@gmickel/gno 0.7.0 → 0.8.1

package/src/serve/public/pages/Dashboard.tsx

@@ -1,22 +1,36 @@
 import {
   BookOpen,
+  CheckCircle2Icon,
   Database,
+  FolderIcon,
   Layers,
+  Loader2Icon,
   MessageSquare,
+  PenIcon,
+  RefreshCwIcon,
   Search,
   Sparkles,
-} from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { PresetSelector } from '../components/preset-selector';
-import { Badge } from '../components/ui/badge';
-import { Button } from '../components/ui/button';
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { CaptureButton } from "../components/CaptureButton";
+import { IndexingProgress } from "../components/IndexingProgress";
+import { PresetSelector } from "../components/preset-selector";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
-} from '../components/ui/card';
-import { apiFetch } from '../hooks/use-api';
+} from "../components/ui/card";
+import { apiFetch } from "../hooks/use-api";
+import { useCaptureModal } from "../hooks/useCaptureModal";
+import { modKey } from "../hooks/useKeyboardShortcuts";
+
+interface SyncResponse {
+  jobId: string;
+}
 
 interface PageProps {
   navigate: (to: string | number) => void;
@@ -40,16 +54,48 @@ interface StatusData {
 export default function Dashboard({ navigate }: PageProps) {
   const [status, setStatus] = useState<StatusData | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [syncing, setSyncing] = useState(false);
+  const [syncJobId, setSyncJobId] = useState<string | null>(null);
+  const { openCapture } = useCaptureModal();
+
+  const loadStatus = useCallback(async () => {
+    const { data, error: err } = await apiFetch<StatusData>("/api/status");
+    if (err) {
+      setError(err);
+    } else {
+      setStatus(data);
+      setError(null);
+    }
+  }, []);
 
   useEffect(() => {
-    apiFetch<StatusData>('/api/status').then(({ data, error }) => {
-      if (error) {
-        setError(error);
-      } else {
-        setStatus(data);
-      }
+    void loadStatus();
+  }, [loadStatus]);
+
+  const handleSync = async () => {
+    setSyncing(true);
+    setSyncJobId(null);
+
+    const { data, error: err } = await apiFetch<SyncResponse>("/api/sync", {
+      method: "POST",
     });
-  }, []);
+
+    if (err) {
+      setSyncing(false);
+      setError(err);
+      return;
+    }
+
+    if (data?.jobId) {
+      setSyncJobId(data.jobId);
+    }
+  };
+
+  const handleSyncComplete = () => {
+    setSyncing(false);
+    setSyncJobId(null);
+    void loadStatus();
+  };
 
   return (
     <div className="min-h-screen">
@@ -64,11 +110,40 @@ export default function Dashboard({ navigate }: PageProps) {
                 GNO
               </h1>
             </div>
-            <PresetSelector />
+            <div className="flex items-center gap-3">
+              <Button
+                disabled={syncing}
+                onClick={handleSync}
+                size="sm"
+                variant="outline"
+              >
+                {syncing ? (
+                  <Loader2Icon className="mr-1.5 size-4 animate-spin" />
+                ) : (
+                  <RefreshCwIcon className="mr-1.5 size-4" />
+                )}
+                {syncing ? "Syncing..." : "Update All"}
+              </Button>
+              <PresetSelector />
+            </div>
           </div>
           <p className="text-lg text-muted-foreground">
             Your Local Knowledge Index
           </p>
+
+          {/* Sync progress */}
+          {syncJobId && (
+            <div className="mt-4 rounded-lg border border-border/50 bg-background/50 p-4">
+              <IndexingProgress
+                jobId={syncJobId}
+                onComplete={handleSyncComplete}
+                onError={() => {
+                  setSyncing(false);
+                  setSyncJobId(null);
+                }}
+              />
+            </div>
+          )}
         </div>
       </header>
 
@@ -77,7 +152,7 @@ export default function Dashboard({ navigate }: PageProps) {
         <nav className="mb-10 flex gap-4">
           <Button
             className="gap-2"
-            onClick={() => navigate('/search')}
+            onClick={() => navigate("/search")}
             size="lg"
           >
             <Search className="size-4" />
@@ -85,7 +160,7 @@ export default function Dashboard({ navigate }: PageProps) {
           </Button>
           <Button
             className="gap-2"
-            onClick={() => navigate('/ask')}
+            onClick={() => navigate("/ask")}
             size="lg"
             variant="secondary"
           >
@@ -94,7 +169,7 @@ export default function Dashboard({ navigate }: PageProps) {
           </Button>
           <Button
             className="gap-2"
-            onClick={() => navigate('/browse')}
+            onClick={() => navigate("/browse")}
             size="lg"
             variant="outline"
           >
@@ -112,22 +187,27 @@ export default function Dashboard({ navigate }: PageProps) {
 
         {/* Stats Grid */}
         {status && (
-          <div className="mb-10 grid animate-fade-in gap-6 opacity-0 md:grid-cols-3">
-            <Card className="group transition-colors hover:border-primary/50">
-              <CardHeader className="pb-2">
-                <CardDescription className="flex items-center gap-2">
+          <div className="mb-10 grid animate-fade-in gap-6 opacity-0 md:grid-cols-4">
+            {/* Hero Documents Card */}
+            <Card className="group relative overflow-hidden border-primary/30 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent transition-all duration-300 hover:border-primary/50 hover:shadow-[0_0_30px_-10px_hsl(var(--primary)/0.3)]">
+              <div className="pointer-events-none absolute -top-12 -right-12 size-32 rounded-full bg-primary/10 blur-2xl" />
+              <CardHeader className="relative pb-2">
+                <CardDescription className="flex items-center gap-2 text-primary/80">
                   <Database className="size-4" />
                   Documents
                 </CardDescription>
               </CardHeader>
-              <CardContent>
-                <div className="font-bold text-4xl tracking-tight">
+              <CardContent className="relative">
+                <div className="font-bold text-5xl tracking-tight text-primary">
                   {status.totalDocuments.toLocaleString()}
                 </div>
+                <p className="mt-1 text-muted-foreground text-sm">
+                  indexed files
+                </p>
               </CardContent>
             </Card>
 
-            <Card className="group stagger-1 animate-fade-in opacity-0 transition-colors hover:border-primary/50">
+            <Card className="group stagger-1 animate-fade-in opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg">
               <CardHeader className="pb-2">
                 <CardDescription className="flex items-center gap-2">
                   <Layers className="size-4" />
@@ -141,17 +221,48 @@ export default function Dashboard({ navigate }: PageProps) {
               </CardContent>
             </Card>
 
-            <Card className="group stagger-2 animate-fade-in opacity-0 transition-colors hover:border-primary/50">
+            <Card className="group stagger-2 animate-fade-in opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg">
               <CardHeader className="pb-2">
-                <CardDescription>Status</CardDescription>
+                <CardDescription className="flex items-center gap-2">
+                  <FolderIcon className="size-4" />
+                  Collections
+                </CardDescription>
               </CardHeader>
               <CardContent>
-                <Badge
-                  className="px-3 py-1 text-lg"
-                  variant={status.healthy ? 'default' : 'secondary'}
-                >
-                  {status.healthy ? '● Healthy' : '○ Degraded'}
-                </Badge>
+                <div className="flex items-center gap-2">
+                  <span className="font-bold text-4xl tracking-tight">
+                    {status.collections.length}
+                  </span>
+                  {status.healthy && (
+                    <CheckCircle2Icon className="size-5 text-green-500" />
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Quick Capture Card */}
+            <Card
+              className="group stagger-3 animate-fade-in cursor-pointer opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-secondary/50 hover:bg-secondary/5 hover:shadow-lg"
+              onClick={openCapture}
+            >
+              <CardHeader className="pb-2">
+                <CardDescription className="flex items-center gap-2">
+                  <PenIcon className="size-4" />
+                  Quick Capture
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center justify-between">
+                  <span className="font-medium text-lg transition-colors group-hover:text-secondary">
+                    New Note
+                  </span>
+                  <Badge
+                    className="font-mono text-xs transition-colors group-hover:border-secondary/50 group-hover:text-secondary"
+                    variant="outline"
+                  >
+                    {modKey}N
+                  </Badge>
+                </div>
               </CardContent>
             </Card>
           </div>
@@ -174,12 +285,22 @@ export default function Dashboard({ navigate }: PageProps) {
                   style={{ animationDelay: `${0.4 + i * 0.1}s` }}
                 >
                   <CardContent className="flex items-center justify-between py-4">
-                    <div>
-                      <div className="font-medium text-lg transition-colors group-hover:text-primary">
-                        {c.name}
-                      </div>
-                      <div className="font-mono text-muted-foreground text-sm">
-                        {c.path}
+                    <div className="flex items-center gap-3">
+                      {/* Health indicator */}
+                      {syncing ? (
+                        <Loader2Icon className="size-4 animate-spin text-amber-500" />
+                      ) : c.embeddedCount >= c.chunkCount ? (
+                        <CheckCircle2Icon className="size-4 text-green-500" />
+                      ) : (
+                        <div className="size-4 rounded-full border-2 border-amber-500" />
+                      )}
+                      <div>
+                        <div className="font-medium text-lg transition-colors group-hover:text-primary">
+                          {c.name}
+                        </div>
+                        <div className="font-mono text-muted-foreground text-sm">
+                          {c.path}
+                        </div>
                       </div>
                     </div>
                     <div className="text-right">
@@ -187,7 +308,9 @@ export default function Dashboard({ navigate }: PageProps) {
                         {c.documentCount.toLocaleString()} docs
                       </div>
                       <div className="text-muted-foreground text-sm">
-                        {c.chunkCount.toLocaleString()} chunks
+                        {c.embeddedCount === c.chunkCount
+                          ? `${c.chunkCount.toLocaleString()} chunks`
+                          : `${c.embeddedCount}/${c.chunkCount} embedded`}
                       </div>
                     </div>
                   </CardContent>
@@ -197,6 +320,9 @@ export default function Dashboard({ navigate }: PageProps) {
           </section>
         )}
       </main>
+
+      {/* Floating Action Button */}
+      <CaptureButton onClick={openCapture} />
     </div>
   );
 }