ui: add remaining dashboard detail routes

apps/web/src/routes/dashboard.notes.$noteId.tsx

@@ -0,0 +1,122 @@
+import { Button } from "@minmon/ui/components/button";
+import { useForm } from "@tanstack/react-form";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
+import { queryClient, trpc, trpcClient } from "@/utils/trpc";
+
+export const Route = createFileRoute("/dashboard/notes/$noteId")({
+  component: RouteComponent,
+});
+
+type NoteFormValues = {
+  serverId: string;
+  title: string;
+  category: string;
+  content: string;
+};
+
+function RouteComponent() {
+  const { noteId } = Route.useParams();
+  const navigate = useNavigate();
+  const note = useQuery(trpc.notes.byId.queryOptions({ id: noteId }));
+  const servers = useQuery(trpc.servers.list.queryOptions());
+
+  const updateNote = useMutation({
+    mutationFn: async (values: NoteFormValues) =>
+      trpcClient.notes.update.mutate({
+        id: noteId,
+        serverId: values.serverId,
+        title: values.title,
+        category: values.category || null,
+        content: values.content,
+      }),
+    onSuccess: async () => {
+      toast.success("Note updated");
+      await queryClient.invalidateQueries();
+    },
+    onError: (error) => toast.error(error.message),
+  });
+
+  if (note.isLoading || servers.isLoading) {
+    return <QueryStateCard title="Loading note" description="Fetching the selected note details." />;
+  }
+
+  if (note.isError || servers.isError || !note.data || !servers.data) {
+    return <QueryStateCard title="Note unavailable" description="The requested note could not be loaded." />;
+  }
+
+  const defaultValues: NoteFormValues = {
+      serverId: note.data.serverId,
+      title: note.data.title,
+      category: note.data.category ?? "",
+      content: note.data.content,
+    };
+
+  const form = useForm({
+    defaultValues,
+    onSubmit: async ({ value }) => {
+      await updateNote.mutateAsync(value);
+    },
+  });
+
+  return (
+    <div className="grid gap-6">
+      <PageSection title={note.data.title} description="View and edit this note.">
+        <DetailCard
+          title="Note summary"
+          description="Current note metadata and content preview."
+          rows={[
+            { label: "Server ID", value: note.data.serverId },
+            { label: "Category", value: note.data.category || "-" },
+            { label: "Updated", value: new Date(note.data.updatedAt).toLocaleString() },
+            { label: "Content", value: note.data.content },
+          ]}
+        />
+      </PageSection>
+
+      <form
+        className="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          form.handleSubmit();
+        }}
+      >
+        <FormCard
+          title="Edit note"
+          description="Update note content and category."
+          footer={
+            <>
+              <Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/notes" })}>
+                Back
+              </Button>
+              <form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
+                {({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
+              </form.Subscribe>
+            </>
+          }
+        >
+          <form.Field name="serverId">
+            {(field) => (
+              <TextField
+                label="Server ID"
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                description={`Available: ${servers.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
+              />
+            )}
+          </form.Field>
+          <div className="grid gap-4 md:grid-cols-2">
+            <form.Field name="title">{(field) => <TextField label="Title" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="category">{(field) => <TextField label="Category" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+          </div>
+          <form.Field name="content">{(field) => <TextAreaField label="Content" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} className="min-h-40" />}</form.Field>
+        </FormCard>
+      </form>
+    </div>
+  );
+}