@geminilight/mindos 0.6.58 → 0.6.60

package/app/components/GuideCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { X, Sparkles, Upload, MessageCircle, ExternalLink, Check, ChevronRight, Copy } from 'lucide-react';
+import { X, Sparkles, Upload, MessageCircle, ExternalLink, Check, Copy, ChevronDown } from 'lucide-react';
 import { copyToClipboard } from '@/lib/clipboard';
 import { toast } from '@/lib/toast';
 import Link from 'next/link';
@@ -9,6 +9,7 @@ import { useLocale } from '@/lib/stores/locale-store';
 import { openAskModal } from '@/hooks/useAskModal';
 import { walkthroughSteps } from './walkthrough/steps';
 import type { GuideState } from '@/lib/settings';
+
 export default function GuideCard() {
   const { t } = useLocale();
   const g = t.guide;
@@ -18,7 +19,6 @@ export default function GuideCard() {
   const [isFirstVisit, setIsFirstVisit] = useState(false);
   const [step3Done, setStep3Done] = useState(false);
 
-  // Fetch guide state from backend
   const fetchGuideState = useCallback(() => {
     fetch('/api/setup')
       .then(r => r.json())
@@ -37,10 +37,8 @@ export default function GuideCard() {
 
   useEffect(() => {
     fetchGuideState();
-
     const handleFirstVisit = () => { setIsFirstVisit(true); };
     window.addEventListener('mindos:first-visit', handleFirstVisit);
-
     const handleGuideUpdate = () => fetchGuideState();
     window.addEventListener('focus', handleGuideUpdate);
     window.addEventListener('guide-state-updated', handleGuideUpdate);
@@ -68,7 +66,6 @@ export default function GuideCard() {
   }, [patchGuide]);
 
   // ── Step 1: Import ──
-
   const handleImportClick = useCallback(() => {
     window.dispatchEvent(new CustomEvent('mindos:open-import'));
   }, []);
@@ -78,7 +75,6 @@ export default function GuideCard() {
     setExpanded(null);
   }, [patchGuide]);
 
-  // Auto-mark step 1 done when files change (import completes, space created, etc.)
   useEffect(() => {
     if (!guideState || guideState.step1Done) return;
     const handler = () => patchGuide({ step1Done: true });
@@ -87,7 +83,6 @@ export default function GuideCard() {
   }, [guideState, guideState?.step1Done, patchGuide]);
 
   // ── Step 2: AI verify ──
-
   const handleStartAI = useCallback(() => {
     const gs = guideState;
     const isEmpty = gs?.template === 'empty';
@@ -96,7 +91,6 @@ export default function GuideCard() {
   }, [guideState, g]);
 
   // ── Step 3: Cross-agent copy ──
-
   const handleCopyPrompt = useCallback(async () => {
     const ok = await copyToClipboard(g.agent.copyPrompt);
     if (ok) toast.copy();
@@ -109,7 +103,6 @@ export default function GuideCard() {
   }, [patchGuide]);
 
   // ── Next-step prompts ──
-
   const handleNextStepClick = useCallback(() => {
     if (!guideState) return;
     const idx = guideState.nextStepIndex;
@@ -121,15 +114,12 @@ export default function GuideCard() {
   }, [guideState, g, patchGuide]);
 
   // ── Auto-expand on step transitions ──
-
-  // First visit: expand step 1
   useEffect(() => {
     if (isFirstVisit && guideState && !guideState.step1Done) {
       setExpanded('import');
     }
   }, [isFirstVisit, guideState]);
 
-  // Step transition: auto-expand next step
   const prevStepRef = useRef({ s1: false, s2: false });
   useEffect(() => {
     if (!guideState) return;
@@ -145,7 +135,6 @@ export default function GuideCard() {
   }, [guideState?.step1Done, guideState?.askedAI, guideState]);
 
   // ── Auto-dismiss final state ──
-
   const step1Done = guideState?.step1Done ?? false;
   const step2Done = guideState?.askedAI ?? false;
   const nextIdx = guideState?.nextStepIndex ?? 0;
@@ -161,7 +150,6 @@ export default function GuideCard() {
   }, [allNextDone, handleDismiss]);
 
   // ── Render guards ──
-
   if (!guideState) return null;
 
   const walkthroughActive = guideState.walkthroughStep !== undefined
@@ -170,17 +158,14 @@ export default function GuideCard() {
     && !guideState.walkthroughDismissed;
   if (walkthroughActive) return null;
 
-  // If both steps 1+2 were already done on load (e.g. page refresh), step3Done is local
-  // and starts false — this lets the user see step 3 again, which is useful.
   const showStep3 = step1Done && step2Done && !step3Done;
 
   // ── Final state: all next-steps done ──
-
   if (allCoreDone && allNextDone) {
     return (
-      <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 flex items-center gap-3 animate-in fade-in duration-300 bg-[var(--amber-subtle)]">
-        <Sparkles size={16} className="animate-spin-slow text-[var(--amber)]" />
-        <span className="text-sm font-semibold flex-1 text-foreground">
+      <div className="rounded-lg border border-border/50 px-4 py-3 flex items-center gap-3 animate-in fade-in duration-300">
+        <Sparkles size={14} className="text-[var(--amber)] shrink-0" />
+        <span className="text-xs font-medium flex-1 text-foreground">
           {g.done.titleFinal}
         </span>
         <Link
@@ -190,159 +175,159 @@ export default function GuideCard() {
           {t.walkthrough.exploreCta}
         </Link>
         <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
-          <X size={14} />
+          <X size={12} />
         </button>
       </div>
     );
   }
 
   // ── Done state: next-step prompts ──
-
   if (allCoreDone) {
     const step = g.done.steps[nextIdx];
     return (
-      <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 animate-in fade-in duration-300 bg-[var(--amber-subtle)]">
+      <div className="rounded-lg border border-border/50 px-4 py-3 animate-in fade-in duration-300">
         <div className="flex items-center gap-3">
-          <Sparkles size={16} className="text-[var(--amber)]" />
-          <span className="text-sm font-semibold flex-1 text-foreground">
+          <Sparkles size={14} className="text-[var(--amber)] shrink-0" />
+          <span className="text-xs font-medium flex-1 text-foreground">
             {g.done.title}
           </span>
           <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
-            <X size={14} />
+            <X size={12} />
           </button>
         </div>
         {step && (
           <button
             onClick={handleNextStepClick}
-            className="mt-3 flex items-center gap-2 text-sm text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer animate-in fade-in slide-in-from-left-2 duration-300"
+            className="mt-2 ml-6 flex items-center gap-1.5 text-xs text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer"
           >
-            <ChevronRight size={14} />
             <span>{step.hint}</span>
+            <ChevronDown size={10} className="-rotate-90" />
           </button>
         )}
       </div>
     );
   }
 
-  // ── Main guide card with 3 steps ──
+  // ── Steps data ──
+  const steps = [
+    { key: 'import' as const, done: step1Done, icon: Upload, title: g.import.title, dimmed: false },
+    { key: 'ai' as const, done: step2Done, icon: MessageCircle, title: g.ai.title, dimmed: !step1Done },
+    { key: 'agent' as const, done: step3Done, icon: ExternalLink, title: g.agent.title, dimmed: !step1Done || !step2Done },
+  ];
+
+  const handleStepClick = (key: 'import' | 'ai' | 'agent', done: boolean, dimmed: boolean) => {
+    if (done || dimmed) return;
+    setExpanded(expanded === key ? null : key);
+  };
 
+  // ── Main guide card ──
   return (
-    <div className="mb-6 rounded-xl border border-[var(--amber)] overflow-hidden bg-[var(--amber-subtle)]">
+    <div className="rounded-lg border border-border/50 overflow-hidden">
+
+      {/* Header row with inline steps */}
+      <div className="flex items-center gap-2 px-4 py-3">
+        <Sparkles size={14} className="text-[var(--amber)] shrink-0" />
+        <span className="text-xs font-semibold text-foreground mr-2">{g.title}</span>
+
+        {/* Step indicators — horizontal */}
+        <div className="flex items-center gap-1 flex-1 min-w-0">
+          {steps.map((s, i) => {
+            const Icon = s.icon;
+            const isActive = expanded === s.key;
+            const isClickable = !s.done && !s.dimmed;
+            return (
+              <button
+                key={s.key}
+                type="button"
+                onClick={() => handleStepClick(s.key, s.done, s.dimmed)}
+                disabled={s.done || s.dimmed}
+                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-2xs font-medium transition-all ${
+                  s.done
+                    ? 'text-success/70'
+                    : s.dimmed
+                      ? 'text-muted-foreground/30'
+                      : isActive
+                        ? 'bg-[var(--amber)]/10 text-[var(--amber)]'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                } ${isClickable ? 'cursor-pointer' : ''}`}
+              >
+                {s.done ? (
+                  <Check size={11} className="shrink-0" />
+                ) : (
+                  <span className={`flex items-center justify-center w-4 h-4 rounded-full text-[9px] font-bold shrink-0 ${
+                    isActive ? 'bg-[var(--amber)] text-white' : s.dimmed ? 'bg-muted/50 text-muted-foreground/30' : 'bg-muted text-muted-foreground'
+                  }`}>
+                    {i + 1}
+                  </span>
+                )}
+                <span className="truncate hidden sm:inline">{s.title}</span>
+              </button>
+            );
+          })}
+        </div>
 
-      {/* Header */}
-      <div className="flex items-center gap-3 px-5 pt-4 pb-2">
-        <Sparkles size={16} className="text-[var(--amber)]" />
-        <span className="text-sm font-semibold flex-1 text-foreground">
-          {g.title}
-        </span>
-        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
-          <X size={14} />
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground shrink-0">
+          <X size={12} />
         </button>
       </div>
 
-      {/* Task cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 px-5 py-3">
-        <TaskCard
-          icon={<Upload size={16} />}
-          title={g.import.title}
-          cta={g.import.cta}
-          done={step1Done}
-          active={expanded === 'import'}
-          onClick={() => !step1Done ? setExpanded(expanded === 'import' ? null : 'import') : null}
-        />
-        <TaskCard
-          icon={<MessageCircle size={16} />}
-          title={g.ai.title}
-          cta={g.ai.cta}
-          done={step2Done}
-          active={expanded === 'ai'}
-          dimmed={!step1Done}
-          onClick={() => {
-            if (step2Done || !step1Done) return;
-            setExpanded(expanded === 'ai' ? null : 'ai');
-          }}
-        />
-        <TaskCard
-          icon={<ExternalLink size={16} />}
-          title={g.agent.title}
-          cta={g.agent.cta}
-          done={step3Done}
-          active={expanded === 'agent'}
-          dimmed={!step1Done || !step2Done}
-          onClick={() => {
-            if (!step1Done || !step2Done) return;
-            setExpanded(expanded === 'agent' ? null : 'agent');
-          }}
-        />
-      </div>
-
-      {/* ── Step 1 expanded: Import files ── */}
+      {/* ── Step 1 expanded ── */}
       {expanded === 'import' && !step1Done && (
-        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs text-muted-foreground mb-3">
-              {g.import.desc}
-            </p>
-            <div className="flex items-center justify-between">
-              <button
-                onClick={handleImportClick}
-                className="text-xs font-medium px-4 py-2 rounded-lg transition-all hover:opacity-90"
-                style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
-              >
-                {g.import.button}
-              </button>
-              <button
-                onClick={handleSkipImport}
-                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted"
-              >
-                {g.skip}
-              </button>
-            </div>
+        <div className="px-4 pb-3 animate-in fade-in slide-in-from-top-1 duration-150">
+          <div className="flex items-center gap-3 pl-6">
+            <p className="text-xs text-muted-foreground flex-1">{g.import.desc}</p>
+            <button
+              onClick={handleImportClick}
+              className="shrink-0 text-xs font-medium px-3 py-1.5 rounded-md bg-[var(--amber)] text-[var(--amber-foreground)] transition-all hover:opacity-90"
+            >
+              {g.import.button}
+            </button>
+            <button
+              onClick={handleSkipImport}
+              className="shrink-0 text-xs px-2 py-1 rounded-md text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
+            >
+              {g.skip}
+            </button>
           </div>
         </div>
       )}
 
-      {/* ── Step 2 expanded: AI verification ── */}
+      {/* ── Step 2 expanded ── */}
       {expanded === 'ai' && step1Done && !step2Done && (
-        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs text-muted-foreground mb-3">
-              {g.ai.desc}
-            </p>
+        <div className="px-4 pb-3 animate-in fade-in slide-in-from-top-1 duration-150">
+          <div className="flex items-center gap-3 pl-6">
+            <p className="text-xs text-muted-foreground flex-1">{g.ai.desc}</p>
             <button
               onClick={handleStartAI}
-              className="text-xs font-medium px-4 py-2 rounded-lg transition-all hover:opacity-90"
-              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+              className="shrink-0 text-xs font-medium px-3 py-1.5 rounded-md bg-[var(--amber)] text-[var(--amber-foreground)] transition-all hover:opacity-90"
             >
-              {g.ai.cta} →
+              {g.ai.cta}
             </button>
           </div>
         </div>
       )}
 
-      {/* ── Step 3 expanded: Cross-agent prompt ── */}
+      {/* ── Step 3 expanded ── */}
       {expanded === 'agent' && showStep3 && (
-        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs text-muted-foreground mb-3">
-              {g.agent.desc}
-            </p>
-            <div className="relative rounded-lg border border-border bg-muted/50 p-3 pr-16">
-              <p className="text-xs font-mono text-foreground leading-relaxed whitespace-pre-wrap">
+        <div className="px-4 pb-3 animate-in fade-in slide-in-from-top-1 duration-150">
+          <div className="pl-6">
+            <p className="text-xs text-muted-foreground mb-2">{g.agent.desc}</p>
+            <div className="relative rounded-md bg-muted/50 p-3 pr-20">
+              <p className="text-xs font-mono text-foreground/80 leading-relaxed whitespace-pre-wrap">
                 {g.agent.copyPrompt}
               </p>
               <button
                 onClick={handleCopyPrompt}
-                className="absolute top-2 right-2 flex items-center gap-1 text-2xs font-medium px-2.5 py-1.5 rounded-md border transition-all border-border bg-card text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30"
+                className="absolute top-2 right-2 flex items-center gap-1 text-2xs font-medium px-2 py-1 rounded-md bg-background border border-border/50 text-muted-foreground hover:text-foreground transition-colors"
               >
-                <Copy size={11} />
+                <Copy size={10} />
                 {g.agent.copy}
               </button>
             </div>
-            <div className="flex items-center justify-end mt-3 pt-3 border-t border-border">
+            <div className="flex justify-end mt-2">
               <button
                 onClick={handleStep3Done}
-                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted"
+                className="text-xs px-2 py-1 rounded-md text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
               >
                 {g.skip}
               </button>
@@ -353,39 +338,3 @@ export default function GuideCard() {
     </div>
   );
 }
-
-function TaskCard({ icon, title, cta, done, active, dimmed, onClick }: {
-  icon: React.ReactNode;
-  title: string;
-  cta: string;
-  done: boolean;
-  active: boolean;
-  dimmed?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      disabled={done || dimmed}
-      className={`
-        flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-center
-        transition-all duration-150
-        ${done ? 'opacity-60' : dimmed ? 'opacity-40 cursor-default' : 'hover:border-[var(--amber)]/30 hover:bg-muted/50 cursor-pointer'}
-        ${active ? 'border-[var(--amber)]/40 bg-muted/50' : ''}
-        ${done || active ? 'border-[var(--amber)]' : 'border-border'}
-      `}
-    >
-      <span className={`${done ? 'animate-in zoom-in-50 duration-300 text-success' : 'text-[var(--amber)]'}`}>
-        {done ? <Check size={16} /> : icon}
-      </span>
-      <span className="text-xs font-medium text-foreground">
-        {title}
-      </span>
-      {!done && !dimmed && (
-        <span className="text-2xs text-[var(--amber-text)]">
-          {cta} →
-        </span>
-      )}
-    </button>
-  );
-}