chore: small ui improvements

This commit is contained in:
Nicolas Meienberger
2025-10-02 19:59:04 +02:00
parent 86adda848e
commit 689e92ffc1
4 changed files with 7 additions and 6 deletions

View File

@@ -50,9 +50,9 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
<ScrollArea className="h-[500px]"> <ScrollArea className="h-[500px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Create volume</DialogTitle> <DialogTitle>Create volume</DialogTitle>
<DialogDescription>Enter a name for the new volume</DialogDescription>
</DialogHeader> </DialogHeader>
<CreateVolumeForm <CreateVolumeForm
className="mt-4"
mode="create" mode="create"
formId={formId} formId={formId}
onSubmit={(values) => { onSubmit={(values) => {

View File

@@ -6,7 +6,7 @@ import { CheckCircle, Loader2, XCircle } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen"; import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
import { slugify } from "~/lib/utils"; import { cn, slugify } from "~/lib/utils";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
@@ -24,6 +24,7 @@ type Props = {
initialValues?: Partial<FormValues>; initialValues?: Partial<FormValues>;
formId?: string; formId?: string;
loading?: boolean; loading?: boolean;
className?: string;
}; };
const defaultValuesForType = { const defaultValuesForType = {
@@ -33,7 +34,7 @@ const defaultValuesForType = {
webdav: { backend: "webdav" as const, port: 80, ssl: false }, webdav: { backend: "webdav" as const, port: 80, ssl: false },
}; };
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading }: Props) => { export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
const form = useForm<FormValues>({ const form = useForm<FormValues>({
resolver: arktypeResolver(formSchema), resolver: arktypeResolver(formSchema),
defaultValues: initialValues, defaultValues: initialValues,
@@ -83,7 +84,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
return ( return (
<Form {...form}> <Form {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> <form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
<FormField <FormField
control={form.control} control={form.control}
name="name" name="name"

View File

@@ -13,7 +13,7 @@ export default function Layout() {
)} )}
> >
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div> <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto max-w-full"> <main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
<AppBreadcrumb /> <AppBreadcrumb />
<Outlet /> <Outlet />
</main> </main>

View File

@@ -125,7 +125,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</TableCell> </TableCell>
<TableCell className="hidden sm:table-cell"> <TableCell className="hidden sm:table-cell">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1 max-w-[200px]"> <span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
{volume.path} {volume.path}
</span> </span>
<Copy size={10} /> <Copy size={10} />