larkup 0.1.14 → 0.1.21

package/components/data/corpus-panel.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { formatErrorMessage } from "@/lib/error-formatter";
+import { useEffect, useState, useRef, useMemo } from 'react';
+import { toast } from 'sonner';
+import { formatErrorMessage } from '@/lib/error-formatter';
 import {
   FileText,
   Trash2,
@@ -14,14 +14,24 @@ import {
   X,
   ChevronLeft,
   ChevronRight,
-} from "lucide-react";
-import type { DocumentSource, SourceDocument } from "@larkup/core/types";
-import { GenericAlert } from "@/components/alerts/generic-alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+  Database,
+  Film,
+  Upload,
+} from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { DocumentSource, SourceDocument } from '@larkup/core/types';
+import { GenericAlert } from '@/components/alerts/generic-alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import {
   Table,
   TableBody,
@@ -29,7 +39,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from '@/components/ui/table';
 import {
   Dialog,
   DialogContent,
@@ -37,53 +47,88 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Checkbox } from "@/components/ui/checkbox";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
 
-const SOURCE_META: Record<
-  DocumentSource,
-  { label: string; icon: typeof Globe }
-> = {
-  scrape: { label: "Scraped", icon: Globe },
-  paste: { label: "Pasted", icon: ClipboardPaste },
-  upload: { label: "Uploaded", icon: FileUp },
+const SOURCE_META: Record<DocumentSource, { label: string; icon: typeof Globe }> = {
+  scrape: { label: 'Scraped', icon: Globe },
+  paste: { label: 'Pasted', icon: ClipboardPaste },
+  upload: { label: 'Uploaded', icon: FileUp },
+  tabular: { label: 'Tabular', icon: Database },
+  media: { label: 'Media', icon: Film },
 };
 
 export function CorpusPanel({
   documents,
   onChanged,
+  isIndexing,
 }: {
   documents: SourceDocument[];
   onChanged: () => void;
+  isIndexing?: boolean;
 }) {
   const [active, setActive] = useState<SourceDocument | null>(null);
   const [deleteTask, setDeleteTask] = useState<
-    | { type: "single"; doc: SourceDocument }
-    | { type: "all" }
-    | { type: "selected" }
-    | null
+    { type: 'single'; doc: SourceDocument } | { type: 'all' } | { type: 'selected' } | null
   >(null);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
   const [page, setPage] = useState(0);
 
+  const [sourceFilter, setSourceFilter] = useState<DocumentSource | 'all'>('all');
+
+  const groupedDocuments = useMemo(() => {
+    const grouped = new Map<string, SourceDocument>();
+    const others: SourceDocument[] = [];
+
+    for (const doc of documents) {
+      if (doc.source === 'media' && doc.metadata?.mediaAssetId) {
+        const id = doc.metadata.mediaAssetId;
+        if (!grouped.has(id)) {
+          grouped.set(id, {
+            ...doc,
+            id: `media-group-${id}`,
+            title: doc.metadata.fileName || doc.title || 'Media Asset',
+            charCount: doc.charCount,
+            metadata: { ...doc.metadata, isGroup: true, childIds: [doc.id] },
+          });
+        } else {
+          const existing = grouped.get(id)!;
+          existing.charCount += doc.charCount;
+          existing.metadata!.childIds.push(doc.id);
+          if (doc.status !== 'indexed') existing.status = doc.status;
+        }
+      } else {
+        others.push(doc);
+      }
+    }
+    return [...Array.from(grouped.values()), ...others].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
+  }, [documents]);
+
+  const filteredDocuments =
+    sourceFilter === 'all'
+      ? groupedDocuments
+      : groupedDocuments.filter((d) => d.source === sourceFilter);
+
   const PAGE_SIZE = 10;
-  const totalPages = Math.max(1, Math.ceil(documents.length / PAGE_SIZE));
+  const totalPages = Math.max(1, Math.ceil(filteredDocuments.length / PAGE_SIZE));
   const safePage = Math.min(page, totalPages - 1);
-  const pageDocuments = documents.slice(
-    safePage * PAGE_SIZE,
-    (safePage + 1) * PAGE_SIZE,
-  );
+  const pageDocuments = filteredDocuments.slice(safePage * PAGE_SIZE, (safePage + 1) * PAGE_SIZE);
 
   const allPageSelected =
-    pageDocuments.length > 0 &&
-    pageDocuments.every((d) => selectedIds.has(d.id));
+    pageDocuments.length > 0 && pageDocuments.every((d) => selectedIds.has(d.id));
 
-  async function del(id: string) {
-    await fetch(`/api/documents?id=${id}`, { method: "DELETE" });
-    toast.message("Document deleted");
+  async function del(id: string, doc?: SourceDocument) {
+    if (doc?.metadata?.isGroup && doc?.metadata?.mediaAssetId) {
+      await fetch(`/api/media?id=${doc.metadata.mediaAssetId}`, { method: 'DELETE' });
+    } else {
+      await fetch(`/api/documents?id=${id}`, { method: 'DELETE' });
+    }
+    toast.message('Deleted');
     setSelectedIds((prev) => {
       const next = new Set(prev);
       next.delete(id);
@@ -93,27 +138,35 @@ export function CorpusPanel({
   }
   async function delSelected() {
     if (selectedIds.size === 0) return;
-    const ids = Array.from(selectedIds).join(",");
-    await fetch(`/api/documents?ids=${ids}`, { method: "DELETE" });
-    toast.message(`Deleted ${selectedIds.size} document(s)`);
+    const toDelete = pageDocuments.filter((d) => selectedIds.has(d.id));
+    for (const doc of toDelete) {
+      if (doc.metadata?.isGroup && doc.metadata?.mediaAssetId) {
+        await fetch(`/api/media?id=${doc.metadata.mediaAssetId}`, { method: 'DELETE' });
+      } else {
+        await fetch(`/api/documents?id=${doc.id}`, { method: 'DELETE' });
+      }
+    }
+    toast.message(`Deleted ${selectedIds.size} item(s)`);
     setSelectedIds(new Set());
     onChanged();
   }
   async function clearAll() {
-    await fetch("/api/documents", { method: "DELETE" });
-    toast.message("Corpus cleared");
+    await fetch('/api/documents', { method: 'DELETE' });
+    toast.message('Corpus and vector index cleared');
     setSelectedIds(new Set());
     onChanged();
   }
 
   if (documents.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border px-6 py-14 text-center">
-        <FileText className="size-7 text-muted-foreground/60" />
-        <p className="mt-3 text-sm font-medium">Your corpus is empty</p>
-        <p className="mt-1 max-w-sm text-xs text-muted-foreground">
-          Scrape the web, paste text, or upload files. Everything you collect is
-          stored locally and ready to index in the next step.
+      <div className="flex flex-col  items-center justify-center rounded-lg   px-6 py-14 text-center">
+        <div className="size-10 p-1.5 bg-white/60 border border-border  rounded-md flex items-center justify-center">
+          <FileText className="size-7 text-muted-foreground/60" />
+        </div>
+        <p className="mt-3 text-lg font-medium">Your corpus is empty</p>
+        <p className="mt-1 max-w-xl text-sm text-muted-foreground">
+          Scrape the web, paste text, or upload files. Everything you collect is stored locally and
+          ready to index in the next step.
         </p>
       </div>
     );
@@ -121,20 +174,35 @@ export function CorpusPanel({
 
   return (
     <>
-      <div className="flex items-center justify-between pb-3">
-        <p className="text-sm text-muted-foreground">
-          <span className="font-medium text-foreground">
-            {documents.length}
-          </span>{" "}
-          document{documents.length === 1 ? "" : "s"} in corpus
-        </p>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center justify-between pb-3">
+        <div className="flex items-center gap-3">
+          <p className="text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">{filteredDocuments.length}</span> document
+            {filteredDocuments.length === 1 ? '' : 's'} in corpus
+          </p>
+        </div>
         <div className="flex items-center gap-2">
+          {documents.length > 0 && (
+            <Select value={sourceFilter} onValueChange={(v: any) => setSourceFilter(v)}>
+              <SelectTrigger className="w-35 shadow-none border-border/70 bg-white  h-8 text-xs">
+                <SelectValue placeholder="All Sources" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Sources</SelectItem>
+                {Object.entries(SOURCE_META).map(([key, meta]) => (
+                  <SelectItem key={key} value={key}>
+                    {meta.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
           {selectedIds.size > 0 && (
             <Button
               size="sm"
-              variant="ghost"
+              variant="secondary"
               className="h-8 text-xs text-muted-foreground hover:text-destructive"
-              onClick={() => setDeleteTask({ type: "selected" })}
+              onClick={() => setDeleteTask({ type: 'selected' })}
             >
               <Trash2 className="size-3.5" />
               Delete {selectedIds.size} selected
@@ -142,12 +210,12 @@ export function CorpusPanel({
           )}
           <Button
             size="sm"
-            variant="ghost"
-            className="h-8 text-xs text-muted-foreground hover:text-destructive"
-            onClick={() => setDeleteTask({ type: "all" })}
+            variant="destructive"
+            className="h-8.5 border border-border text-xs text-muted-foreground hover:text-destructive"
+            onClick={() => setDeleteTask({ type: 'all' })}
           >
             <Trash2 className="size-3.5" />
-            Clear corpus
+            {/* Clear corpus */}
           </Button>
         </div>
       </div>
@@ -174,17 +242,21 @@ export function CorpusPanel({
                 />
               </TableHead>
               <TableHead>Title</TableHead>
+              <TableHead className="w-24">Status</TableHead>
               <TableHead className="w-28">Source</TableHead>
               <TableHead className="w-24 text-right">Chars</TableHead>
               <TableHead className="w-20" />
             </TableRow>
           </TableHeader>
-          <TableBody>
+          <TableBody className="bg-white/70">
             {pageDocuments.map((doc) => {
-              const meta = SOURCE_META[doc.source];
+              const meta = SOURCE_META[doc.source as DocumentSource] || {
+                label: doc.source || 'Unknown',
+                icon: FileText,
+              };
               const Icon = meta.icon;
               return (
-                <TableRow key={doc.id}>
+                <TableRow key={doc.id} className="border-border/50 h-10.5!">
                   <TableCell>
                     <Checkbox
                       checked={selectedIds.has(doc.id)}
@@ -200,19 +272,57 @@ export function CorpusPanel({
                   <TableCell>
                     <button
                       type="button"
-                      onClick={() => setActive(doc)}
-                      className="group flex flex-col items-start text-left"
+                      onClick={() => !doc.metadata?.isGroup && setActive(doc)}
+                      className={cn(
+                        'group flex flex-col items-start text-left',
+                        doc.metadata?.isGroup ? 'cursor-default' : 'cursor-pointer',
+                      )}
                     >
-                      <span className="line-clamp-1 text-sm font-medium group-hover:text-primary">
+                      <span
+                        className={cn(
+                          'line-clamp-1 text-sm font-medium',
+                          !doc.metadata?.isGroup && 'group-hover:text-primary',
+                        )}
+                      >
                         {doc.title}
                       </span>
-                      {doc.url && (
+                      {doc.metadata?.isGroup && (
+                        <span className="line-clamp-1 text-[10px] text-muted-foreground mt-0.5">
+                          Video ({doc.metadata.childIds?.length} chunks)
+                        </span>
+                      )}
+                      {/* {doc.url && (
                         <span className="line-clamp-1 text-xs text-muted-foreground">
                           {doc.url}
                         </span>
-                      )}
+                      )} */}
                     </button>
                   </TableCell>
+                  <TableCell>
+                    {doc.status === 'indexed' ? (
+                      <Badge
+                        variant="outline"
+                        className="text-green-600 bg-green-50/10 border-green-500 font-normal"
+                      >
+                        Indexed
+                      </Badge>
+                    ) : isIndexing ? (
+                      <Badge
+                        variant="outline"
+                        className="text-blue-500 bg-blue-50 border-blue-200 font-normal flex items-center gap-1.5"
+                      >
+                        <Loader2 className="size-3 animate-spin" />
+                        Indexing
+                      </Badge>
+                    ) : (
+                      <Badge
+                        variant="outline"
+                        className="text-orange-500 bg-orange-50 border-orange-200 font-normal"
+                      >
+                        Unindexed
+                      </Badge>
+                    )}
+                  </TableCell>
                   <TableCell>
                     <Badge variant="secondary" className="gap-1 font-normal">
                       <Icon className="size-3" />
@@ -224,18 +334,20 @@ export function CorpusPanel({
                   </TableCell>
                   <TableCell>
                     <div className="flex items-center justify-end gap-4">
-                      <button
-                        type="button"
-                        aria-label="Edit document"
-                        onClick={() => setActive(doc)}
-                        className="text-muted-foreground transition-colors hover:text-primary"
-                      >
-                        <Pencil className="size-4" />
-                      </button>
+                      {!doc.metadata?.isGroup && (
+                        <button
+                          type="button"
+                          aria-label="Edit document"
+                          onClick={() => setActive(doc)}
+                          className="text-muted-foreground transition-colors hover:text-primary"
+                        >
+                          <Pencil className="size-4" />
+                        </button>
+                      )}
                       <button
                         type="button"
                         aria-label="Delete document"
-                        onClick={() => setDeleteTask({ type: "single", doc })}
+                        onClick={() => setDeleteTask({ type: 'single', doc })}
                         className="text-muted-foreground transition-colors hover:text-destructive"
                       >
                         <Trash2 className="size-4" />
@@ -253,9 +365,9 @@ export function CorpusPanel({
       {totalPages > 1 && (
         <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
           <span>
-            {safePage * PAGE_SIZE + 1}–
-            {Math.min((safePage + 1) * PAGE_SIZE, documents.length)} of{" "}
-            {documents.length}
+            {filteredDocuments.length === 0 ? 0 : safePage * PAGE_SIZE + 1}–
+            {Math.min((safePage + 1) * PAGE_SIZE, filteredDocuments.length)} of{' '}
+            {filteredDocuments.length}
           </span>
           <div className="flex items-center gap-1">
             <button
@@ -288,7 +400,7 @@ export function CorpusPanel({
         }}
         onDelete={(id) => {
           if (active) {
-            setDeleteTask({ type: "single", doc: active });
+            setDeleteTask({ type: 'single', doc: active });
           }
         }}
       />
@@ -299,30 +411,36 @@ export function CorpusPanel({
           if (!open) setDeleteTask(null);
         }}
         title={
-          deleteTask?.type === "all"
-            ? "Clear corpus"
-            : deleteTask?.type === "selected"
-              ? "Delete selected documents"
-              : "Delete document"
+          deleteTask?.type === 'all'
+            ? 'Clear corpus'
+            : deleteTask?.type === 'selected'
+            ? 'Delete selected documents'
+            : 'Delete document'
         }
         description={
-          deleteTask?.type === "all"
-            ? "Are you sure you want to delete all documents in the corpus? This action cannot be undone."
-            : deleteTask?.type === "selected"
-              ? `Are you sure you want to delete ${selectedIds.size} selected documents?`
-              : `Are you sure you want to delete "${
-                  deleteTask?.type === "single" ? deleteTask.doc.title : ""
-                }"?`
+          deleteTask?.type === 'all' ? (
+            'Are you sure you want to delete all documents in the corpus? This action cannot be undone.'
+          ) : deleteTask?.type === 'selected' ? (
+            `Are you sure you want to delete ${selectedIds.size} selected documents?`
+          ) : (
+            <span className="wrap-break-word">
+              Are you sure you want to delete "
+              <span className="break-all font-medium">
+                {deleteTask?.type === 'single' ? deleteTask.doc.title : ''}
+              </span>
+              "?
+            </span>
+          )
         }
         actionText="Delete"
         variant="destructive"
         onAction={() => {
-          if (deleteTask?.type === "all") {
+          if (deleteTask?.type === 'all') {
             clearAll();
-          } else if (deleteTask?.type === "selected") {
+          } else if (deleteTask?.type === 'selected') {
             delSelected();
-          } else if (deleteTask?.type === "single") {
-            del(deleteTask.doc.id);
+          } else if (deleteTask?.type === 'single') {
+            del(deleteTask.doc.id, deleteTask.doc);
             if (active?.id === deleteTask.doc.id) {
               setActive(null);
             }
@@ -345,17 +463,18 @@ function DocumentDialog({
   onDelete: (id: string) => void;
 }) {
   const [editing, setEditing] = useState(false);
-  const [title, setTitle] = useState("");
-  const [url, setUrl] = useState("");
-  const [content, setContent] = useState("");
+  const [title, setTitle] = useState('');
+  const [url, setUrl] = useState('');
+  const [content, setContent] = useState('');
   const [saving, setSaving] = useState(false);
+  const [uploadingMedia, setUploadingMedia] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Reset local state whenever a different document is opened.
   useEffect(() => {
     if (doc) {
       setEditing(false);
       setTitle(doc.title);
-      setUrl(doc.url ?? "");
+      setUrl(doc.url ?? '');
       setContent(doc.content);
     }
   }, [doc]);
@@ -368,52 +487,88 @@ function DocumentDialog({
     }
     setSaving(true);
     try {
-      const res = await fetch("/api/documents", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
+      const res = await fetch('/api/documents', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           id: doc.id,
-          title: title.trim() || "Untitled",
+          title: title.trim() || 'Untitled',
           url: url.trim(),
           content,
         }),
       });
       if (!res.ok) {
         const body = await res.json().catch(() => ({}));
-        toast.error(body.error ? formatErrorMessage(new Error(body.error)) : "Failed to save document.");
+        toast.error(
+          body.error ? formatErrorMessage(new Error(body.error)) : 'Failed to save document.',
+        );
         return;
       }
-      toast.success("Document saved");
+      toast.success('Document saved');
       onSaved();
     } catch (err) {
-      toast.error(formatErrorMessage(err) || "Could not reach the server.");
+      toast.error(formatErrorMessage(err) || 'Could not reach the server.');
     } finally {
       setSaving(false);
     }
   }
 
+  async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploadingMedia(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/api/media', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || 'Failed to upload file');
+      }
+
+      const data = await res.json();
+      if (data.assets && data.assets.length > 0) {
+        setUrl(`/api/media/${data.assets[0].id}`);
+        toast.success('File uploaded and URL updated');
+      }
+    } catch (err) {
+      toast.error(formatErrorMessage(err) || 'Failed to upload');
+    } finally {
+      setUploadingMedia(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }
+
   return (
     <Dialog open={!!doc} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full max-w-2xl max-h-[80%]">
+      <DialogContent className="w-full max-w-2xl max-h-[90%] ">
         <DialogHeader>
           <DialogTitle className="text-balance">
-            {editing ? "Edit document" : doc?.title}
+            {editing ? 'Edit document' : doc?.title}
           </DialogTitle>
           {!editing && doc?.url && (
-            <DialogDescription className="break-all">
-              {doc.url}
-            </DialogDescription>
+            <DialogDescription className="break-all">{doc.url}</DialogDescription>
           )}
           {editing && (
             <DialogDescription>
-              Changes are saved to this server&apos;s corpus. Re-index to apply
-              them to search.
+              Changes are saved to this server&apos;s corpus. Re-index to apply them to search.
             </DialogDescription>
           )}
         </DialogHeader>
 
         {editing ? (
-          <div className="grid gap-4 overflow-y-auto pr-2 pb-2" style={{ maxHeight: "calc(80vh - 150px)" }}>
+          <div
+            className="grid gap-4 overflow-y-auto pr-2 pb-2"
+            style={{ maxHeight: 'calc(80vh - 150px)' }}
+          >
             <div className="grid gap-2">
               <Label htmlFor="doc-title">Title</Label>
               <Input
@@ -424,7 +579,31 @@ function DocumentDialog({
               />
             </div>
             <div className="grid gap-2">
-              <Label htmlFor="doc-url">URL (optional)</Label>
+              <div className="flex items-center justify-between">
+                <Label htmlFor="doc-url">URL (optional)</Label>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 text-[10px] uppercase font-medium text-primary hover:bg-primary/10"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={uploadingMedia}
+                >
+                  {uploadingMedia ? (
+                    <Loader2 className="size-3 mr-1 animate-spin" />
+                  ) : (
+                    <Upload className="size-3 mr-1" />
+                  )}
+                  Upload File
+                </Button>
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  className="hidden"
+                  onChange={handleFileUpload}
+                  accept="image/*,video/*,audio/*"
+                />
+              </div>
               <Input
                 id="doc-url"
                 value={url}
@@ -449,25 +628,38 @@ function DocumentDialog({
             </div>
           </div>
         ) : (
-          <ScrollArea className="max-h-[60vh] rounded-md border border-border bg-muted/30">
-            <pre
-              className={cn(
-                "whitespace-pre-wrap break-all px-4 py-3 font-mono text-xs leading-relaxed text-foreground",
-              )}
-            >
-              {doc?.content}
-            </pre>
-          </ScrollArea>
+          <div className="flex flex-col gap-4">
+            {doc?.source === 'media' && doc?.url && (
+              <div className="rounded-md border border-border bg-muted/30 overflow-hidden flex items-center justify-center p-4">
+                {doc.metadata?.mediaType === 'video' ? (
+                  <video src={doc.url} controls className="max-h-[40vh] max-w-full" />
+                ) : doc.metadata?.mediaType === 'audio' ? (
+                  <audio src={doc.url} controls className="w-full" />
+                ) : (
+                  <img
+                    src={doc.url}
+                    alt={doc.title}
+                    className="max-h-[40vh] max-w-full object-contain"
+                  />
+                )}
+              </div>
+            )}
+            <ScrollArea className="max-h-[60vh] rounded-md border border-border bg-muted/30">
+              <pre
+                className={cn(
+                  'whitespace-pre-wrap break-all px-4 py-3 font-mono text-xs leading-relaxed text-foreground',
+                )}
+              >
+                {doc?.content}
+              </pre>
+            </ScrollArea>
+          </div>
         )}
 
         <DialogFooter className="flex-row items-center justify-between gap-2 sm:justify-between">
           {editing ? (
             <>
-              <Button
-                variant="ghost"
-                onClick={() => setEditing(false)}
-                disabled={saving}
-              >
+              <Button variant="ghost" onClick={() => setEditing(false)} disabled={saving}>
                 <X className="size-4" />
                 Cancel
               </Button>
@@ -479,15 +671,15 @@ function DocumentDialog({
           ) : (
             <>
               <Button
-                variant="ghost"
+                variant="destructive"
                 className="text-muted-foreground hover:text-destructive"
                 onClick={() => doc && onDelete(doc.id)}
               >
-                <Trash2 className="size-4" />
+                <Trash2 className="size-4 mr-2" />
                 Delete
               </Button>
               <Button onClick={() => setEditing(true)}>
-                <Pencil className="size-4" />
+                <Pencil className="size-4 mr-2" />
                 Edit
               </Button>
             </>