@geminilight/mindos 0.5.37 → 0.5.39

package/app/components/HomeContent.tsx

@@ -1,20 +1,31 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Loader2 } from 'lucide-react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime } from '@/lib/utils';
 import { getAllRenderers } from '@/lib/renderers/registry';
 import '@/lib/renderers/index'; // registers all renderers
 import OnboardingView from './OnboardingView';
 import GuideCard from './GuideCard';
+import { useRouter } from 'next/navigation';
+import { createSpaceAction } from '@/lib/actions';
+import type { SpaceInfo } from '@/app/page';
 
 interface RecentFile {
   path: string;
   mtime: number;
 }
 
+interface SpaceGroup {
+  space: string;
+  spacePath: string;
+  files: RecentFile[];
+  latestMtime: number;
+  totalFiles: number;
+}
+
 function triggerSearch() {
   window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
 }
@@ -23,9 +34,70 @@ function triggerAsk() {
   window.dispatchEvent(new KeyboardEvent('keydown', { key: '/', metaKey: true, bubbles: true }));
 }
 
-export default function HomeContent({ recent, existingFiles }: { recent: RecentFile[]; existingFiles?: string[] }) {
+/** Group recent files by their top-level directory (Space) */
+function groupBySpace(recent: RecentFile[], spaces: SpaceInfo[]): { groups: SpaceGroup[]; rootFiles: RecentFile[] } {
+  const groupMap = new Map<string, SpaceGroup>();
+  const rootFiles: RecentFile[] = [];
+
+  for (const file of recent) {
+    const parts = file.path.split('/');
+    if (parts.length < 2) {
+      rootFiles.push(file);
+      continue;
+    }
+    const spaceName = parts[0];
+    const spaceInfo = spaces.find(s => s.name === spaceName);
+
+    if (!groupMap.has(spaceName)) {
+      groupMap.set(spaceName, {
+        space: spaceName,
+        spacePath: spaceName + '/',
+        files: [],
+        latestMtime: 0,
+        totalFiles: spaceInfo?.fileCount ?? 0,
+      });
+    }
+    const g = groupMap.get(spaceName)!;
+    g.files.push(file);
+    g.latestMtime = Math.max(g.latestMtime, file.mtime);
+  }
+
+  const groups = [...groupMap.values()].sort((a, b) => b.latestMtime - a.latestMtime);
+  return { groups, rootFiles };
+}
+
+/** Extract leading emoji from a directory name, e.g. "📝 Notes" → "📝" */
+function extractEmoji(name: string): string {
+  const match = name.match(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+/u);
+  return match?.[0] ?? '';
+}
+
+/** Strip leading emoji+space from name for display, e.g. "📝 Notes" → "Notes" */
+function stripEmoji(name: string): string {
+  return name.replace(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s]+/u, '') || name;
+}
+
+/* ── Section Title component (shared across all three sections) ── */
+function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2 mb-4">
+      <span className="text-[var(--amber)]">{icon}</span>
+      <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display text-muted-foreground">
+        {children}
+      </h2>
+    </div>
+  );
+}
+
+const FILES_PER_GROUP = 3;
+const SPACES_PER_ROW = 6;   // 3 cols × 2 rows on desktop, show 1 row initially
+const PLUGINS_INITIAL = 6;
+
+export default function HomeContent({ recent, existingFiles, spaces }: { recent: RecentFile[]; existingFiles?: string[]; spaces?: SpaceInfo[] }) {
   const { t } = useLocale();
   const [showAll, setShowAll] = useState(false);
+  const [showAllSpaces, setShowAllSpaces] = useState(false);
+  const [showAllPlugins, setShowAllPlugins] = useState(false);
   const [suggestionIdx, setSuggestionIdx] = useState(0);
 
   const suggestions = t.ask?.suggestions ?? [
@@ -56,10 +128,15 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
 
   const lastFile = recent[0];
 
+  // Group recent files by Space
+  const spaceList = spaces ?? [];
+  const { groups, rootFiles } = useMemo(() => groupBySpace(recent, spaceList), [recent, spaceList]);
+
   return (
     <div className="content-width px-4 md:px-6 py-8 md:py-12">
       <GuideCard onNavigate={(path) => { window.location.href = `/view/${encodeURIComponent(path)}`; }} />
-      {/* Hero */}
+
+      {/* ── Hero ── */}
       <div className="mb-10">
         <div className="flex items-center gap-2 mb-3">
           <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
@@ -73,7 +150,6 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
 
         {/* AI-first command bar */}
         <div className="w-full max-w-[620px] flex flex-col sm:flex-row items-stretch sm:items-center gap-2 ml-4">
-          {/* Ask AI (primary) */}
           <button
             onClick={triggerAsk}
             title="⌘/"
@@ -88,8 +164,6 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
               ⌘/
             </kbd>
           </button>
-
-          {/* Search files (secondary) */}
           <button
             onClick={triggerSearch}
             title="⌘K"
@@ -132,98 +206,253 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
             <span>{t.explore.title}</span>
           </Link>
         </div>
+      </div>
 
-        {/* Plugin quick-access chips — only show available plugins */}
-        {availablePlugins.length > 0 && (
-          <div className="flex flex-wrap gap-1.5 mt-3 pl-4">
-            {availablePlugins.map(r => (
+      {/* ── Section 1: Plugins ── */}
+      {availablePlugins.length > 0 && (
+        <section className="mb-8">
+          <SectionTitle icon={<Puzzle size={13} />}>{t.home.plugins}</SectionTitle>
+          <div className="flex flex-wrap gap-2">
+            {(showAllPlugins ? availablePlugins : availablePlugins.slice(0, PLUGINS_INITIAL)).map(r => (
               <Link
                 key={r.id}
                 href={`/view/${encodePath(r.entryPath!)}`}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs text-muted-foreground transition-all duration-100 hover:bg-muted/60"
+                className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-border text-xs transition-all duration-150 hover:border-amber-500/30 hover:bg-muted/60"
               >
                 <span className="text-sm leading-none" suppressHydrationWarning>{r.icon}</span>
-                <span>{r.name}</span>
+                <span className="font-medium text-foreground">{r.name}</span>
               </Link>
             ))}
           </div>
-        )}
-      </div>
-
-      {/* Recently modified — timeline feed */}
-      {recent.length > 0 && (() => {
-        const INITIAL_COUNT = 5;
-        const visibleRecent = showAll ? recent : recent.slice(0, INITIAL_COUNT);
-        const hasMore = recent.length > INITIAL_COUNT;
+          {availablePlugins.length > PLUGINS_INITIAL && (
+            <button
+              onClick={() => setShowAllPlugins(v => !v)}
+              className="flex items-center gap-1.5 mt-2 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
+            >
+              <ChevronDown size={12} className={`transition-transform duration-200 ${showAllPlugins ? 'rotate-180' : ''}`} />
+              <span>{showAllPlugins ? t.home.showLess : t.home.showMore}</span>
+            </button>
+          )}
+        </section>
+      )}
 
-        return (
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-5">
-            <Clock size={13} className="text-[var(--amber)]" />
-            <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display text-muted-foreground">
-              {t.home.recentlyModified}
-            </h2>
+      {/* ── Section 2: Spaces ── */}
+      {spaceList.length > 0 ? (
+        <section className="mb-8">
+          <SectionTitle icon={<Brain size={13} />}>{t.home.spaces}</SectionTitle>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {(showAllSpaces ? spaceList : spaceList.slice(0, SPACES_PER_ROW)).map(s => {
+              const emoji = extractEmoji(s.name);
+              const label = stripEmoji(s.name);
+              const isEmpty = s.fileCount === 0;
+              return (
+                <Link
+                  key={s.name}
+                  href={`/view/${encodePath(s.path)}`}
+                  className={`flex items-start gap-3 px-3.5 py-3 rounded-xl border transition-all duration-150 hover:translate-x-0.5 ${
+                    isEmpty
+                      ? 'border-dashed border-border/50 opacity-50 hover:opacity-70'
+                      : 'border-border hover:border-amber-500/30 hover:bg-muted/40'
+                  }`}
+                >
+                  {emoji ? (
+                    <span className="text-lg leading-none shrink-0 mt-0.5" suppressHydrationWarning>{emoji}</span>
+                  ) : (
+                    <Folder size={16} className="shrink-0 text-[var(--amber)] mt-0.5" />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <span className="text-sm font-medium truncate block text-foreground">{label}</span>
+                    {s.description && (
+                      <span className="text-xs text-muted-foreground line-clamp-1 mt-0.5" suppressHydrationWarning>{s.description}</span>
+                    )}
+                    <span className="text-xs text-muted-foreground opacity-50 mt-0.5 block">
+                      {t.home.nFiles(s.fileCount)}
+                    </span>
+                  </div>
+                </Link>
+              );
+            })}
+            {/* Show "+" card inline only when it won't be orphaned on its own row */}
+            {(showAllSpaces || spaceList.length < SPACES_PER_ROW) && <CreateSpaceCard t={t} />}
+          </div>
+          {spaceList.length > SPACES_PER_ROW && (
+            <div className="flex items-center gap-3 mt-2">
+              <button
+                onClick={() => setShowAllSpaces(v => !v)}
+                className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
+              >
+                <ChevronDown size={12} className={`transition-transform duration-200 ${showAllSpaces ? 'rotate-180' : ''}`} />
+                <span>{showAllSpaces ? t.home.showLess : t.home.showMore}</span>
+              </button>
+              {/* When collapsed and "+" card is hidden from grid, show as text link */}
+              {!showAllSpaces && <CreateSpaceTextLink t={t} />}
+            </div>
+          )}
+        </section>
+      ) : (
+        /* Show create card even when no spaces exist */
+        <section className="mb-8">
+          <SectionTitle icon={<Brain size={13} />}>{t.home.spaces}</SectionTitle>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            <CreateSpaceCard t={t} />
           </div>
+        </section>
+      )}
 
-          <div className="relative pl-4">
-            {/* Timeline line */}
-            <div className="absolute left-0 top-1 bottom-1 w-px bg-border" />
+      {/* ── Section 3: Recently Edited ── */}
+      {recent.length > 0 && (
+        <section className="mb-12">
+          <SectionTitle icon={<Clock size={13} />}>{t.home.recentlyEdited}</SectionTitle>
 
-            <div className="flex flex-col gap-0.5">
-              {visibleRecent.map(({ path: filePath, mtime }, idx) => {
-                const isCSV = filePath.endsWith('.csv');
-                const name = filePath.split('/').pop() || filePath;
-                const dir = filePath.split('/').slice(0, -1).join('/');
+          {groups.length > 0 ? (
+            /* Space-Grouped View */
+            <div className="flex flex-col gap-4">
+              {groups.map((group) => {
+                const visibleFiles = showAll ? group.files : group.files.slice(0, FILES_PER_GROUP);
+                const hasMoreFiles = group.files.length > FILES_PER_GROUP;
                 return (
-                  <div key={filePath} className="relative group">
-                    {/* Timeline dot */}
-                    <div
-                      aria-hidden="true"
-                      className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${idx === 0 ? 'w-2 h-2' : 'w-1.5 h-1.5'}`}
-                      style={{
-                        background: idx === 0 ? 'var(--amber)' : 'var(--border)',
-                        outline: idx === 0 ? '2px solid var(--amber-dim)' : 'none',
-                      }}
-                    />
+                  <div key={group.space}>
                     <Link
-                      href={`/view/${encodePath(filePath)}`}
-                      className="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-100 group-hover:translate-x-0.5 hover:bg-muted"
+                      href={`/view/${encodePath(group.spacePath)}`}
+                      className="flex items-center gap-2 px-1 py-1.5 rounded-lg group transition-colors hover:bg-muted/50"
                     >
-                      {isCSV
-                        ? <Table size={13} className="shrink-0 text-success" />
-                        : <FileText size={13} className="shrink-0 text-muted-foreground" />
-                      }
-                      <div className="flex-1 min-w-0">
-                        <span className="text-sm font-medium truncate block text-foreground" suppressHydrationWarning>{name}</span>
-                        {dir && <span className="text-xs truncate block text-muted-foreground opacity-60" suppressHydrationWarning>{dir}</span>}
-                      </div>
-                      <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground opacity-50" suppressHydrationWarning>
-                        {formatTime(mtime)}
+                      <Folder size={13} className="shrink-0 text-[var(--amber)]" />
+                      <span className="text-xs font-semibold font-display text-foreground group-hover:text-[var(--amber)] transition-colors" suppressHydrationWarning>
+                        {group.space}
                       </span>
+                      <span className="text-xs text-muted-foreground opacity-60 tabular-nums" suppressHydrationWarning>
+                        {t.home.nFiles(group.totalFiles)} · {formatTime(group.latestMtime)}
+                      </span>
+                      {hasMoreFiles && !showAll && (
+                        <span className="text-xs text-muted-foreground opacity-40">
+                          +{group.files.length - FILES_PER_GROUP}
+                        </span>
+                      )}
                     </Link>
+                    <div className="flex flex-col gap-0.5 ml-2 border-l border-border pl-3">
+                      {visibleFiles.map(({ path: filePath, mtime }) => {
+                        const isCSV = filePath.endsWith('.csv');
+                        const name = filePath.split('/').pop() || filePath;
+                        const subPath = filePath.split('/').slice(1, -1).join('/');
+                        return (
+                          <Link
+                            key={filePath}
+                            href={`/view/${encodePath(filePath)}`}
+                            className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted group"
+                          >
+                            {isCSV
+                              ? <Table size={12} className="shrink-0 text-success" />
+                              : <FileText size={12} className="shrink-0 text-muted-foreground" />
+                            }
+                            <div className="flex-1 min-w-0">
+                              <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                              {subPath && <span className="text-xs truncate block text-muted-foreground opacity-50" suppressHydrationWarning>{subPath}</span>}
+                            </div>
+                            <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground opacity-40" suppressHydrationWarning>
+                              {formatTime(mtime)}
+                            </span>
+                          </Link>
+                        );
+                      })}
+                    </div>
                   </div>
                 );
               })}
-            </div>
 
-            {/* Show more / less */}
-            {hasMore && (
-              <button
-                onClick={() => setShowAll(v => !v)}
-                aria-expanded={showAll}
-                className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
-              >
-                <ChevronDown
-                  size={12}
-                  className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`}
-                />
-                <span>{showAll ? t.home.showLess : t.home.showMore}</span>
-              </button>
-            )}
-          </div>
+              {/* Root-level files (Other) */}
+              {rootFiles.length > 0 && (
+                <div>
+                  <div className="flex items-center gap-2 px-1 py-1.5">
+                    <FileText size={13} className="shrink-0 text-muted-foreground" />
+                    <span className="text-xs font-semibold font-display text-muted-foreground">
+                      {t.home.other}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-0.5 ml-2 border-l border-border pl-3">
+                    {rootFiles.map(({ path: filePath, mtime }) => (
+                      <Link
+                        key={filePath}
+                        href={`/view/${encodePath(filePath)}`}
+                        className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted"
+                      >
+                        <FileText size={12} className="shrink-0 text-muted-foreground" />
+                        <span className="text-sm flex-1 min-w-0 truncate text-foreground" suppressHydrationWarning>
+                          {filePath.split('/').pop() || filePath}
+                        </span>
+                        <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground opacity-40" suppressHydrationWarning>
+                          {formatTime(mtime)}
+                        </span>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Show more / less */}
+              {groups.some(g => g.files.length > FILES_PER_GROUP) && (
+                <button
+                  onClick={() => setShowAll(v => !v)}
+                  aria-expanded={showAll}
+                  className="flex items-center gap-1.5 mt-1 ml-1 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
+                >
+                  <ChevronDown size={12} className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`} />
+                  <span>{showAll ? t.home.showLess : t.home.showMore}</span>
+                </button>
+              )}
+            </div>
+          ) : (
+            /* Flat Timeline Fallback */
+            <div className="relative pl-4">
+              <div className="absolute left-0 top-1 bottom-1 w-px bg-border" />
+              <div className="flex flex-col gap-0.5">
+                {(showAll ? recent : recent.slice(0, 5)).map(({ path: filePath, mtime }, idx) => {
+                  const isCSV = filePath.endsWith('.csv');
+                  const name = filePath.split('/').pop() || filePath;
+                  const dir = filePath.split('/').slice(0, -1).join('/');
+                  return (
+                    <div key={filePath} className="relative group">
+                      <div
+                        aria-hidden="true"
+                        className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${idx === 0 ? 'w-2 h-2' : 'w-1.5 h-1.5'}`}
+                        style={{
+                          background: idx === 0 ? 'var(--amber)' : 'var(--border)',
+                          outline: idx === 0 ? '2px solid var(--amber-dim)' : 'none',
+                        }}
+                      />
+                      <Link
+                        href={`/view/${encodePath(filePath)}`}
+                        className="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-100 group-hover:translate-x-0.5 hover:bg-muted"
+                      >
+                        {isCSV
+                          ? <Table size={13} className="shrink-0 text-success" />
+                          : <FileText size={13} className="shrink-0 text-muted-foreground" />
+                        }
+                        <div className="flex-1 min-w-0">
+                          <span className="text-sm font-medium truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                          {dir && <span className="text-xs truncate block text-muted-foreground opacity-60" suppressHydrationWarning>{dir}</span>}
+                        </div>
+                        <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground opacity-50" suppressHydrationWarning>
+                          {formatTime(mtime)}
+                        </span>
+                      </Link>
+                    </div>
+                  );
+                })}
+              </div>
+              {recent.length > 5 && (
+                <button
+                  onClick={() => setShowAll(v => !v)}
+                  aria-expanded={showAll}
+                  className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
+                >
+                  <ChevronDown size={12} className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`} />
+                  <span>{showAll ? t.home.showLess : t.home.showMore}</span>
+                </button>
+              )}
+            </div>
+          )}
         </section>
-        );
-      })()}
+      )}
 
       {/* Footer */}
       <div className="mt-16 flex items-center gap-1.5 text-xs font-display text-muted-foreground opacity-60">
@@ -233,3 +462,151 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
     </div>
   );
 }
+
+/* ── Create Space inline card ── */
+function CreateSpaceCard({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
+  const router = useRouter();
+  const [editing, setEditing] = useState(false);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const open = useCallback(() => {
+    setEditing(true);
+    setError('');
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, []);
+
+  const close = useCallback(() => {
+    setEditing(false);
+    setName('');
+    setDescription('');
+    setError('');
+  }, []);
+
+  const handleCreate = useCallback(async () => {
+    if (!name.trim() || loading) return;
+    setLoading(true);
+    setError('');
+    const result = await createSpaceAction(name, description);
+    setLoading(false);
+    if (result.success) {
+      close();
+      router.refresh();
+    } else {
+      setError(result.error ?? 'Failed to create space');
+    }
+  }, [name, description, loading, close, router]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') close();
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleCreate(); }
+  }, [close, handleCreate]);
+
+  if (!editing) {
+    return (
+      <button
+        onClick={open}
+        aria-label={t.home.newSpace}
+        className="flex items-center justify-center gap-2 px-3.5 py-3 rounded-xl border border-dashed border-border/50 text-muted-foreground opacity-60 transition-all duration-150 hover:opacity-100 hover:border-amber-500/30 cursor-pointer"
+      >
+        <Plus size={16} />
+        <span className="text-sm font-medium">{t.home.newSpace}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-3.5 py-3 rounded-xl border border-[var(--amber)] bg-[var(--amber-subtle)]" onKeyDown={handleKeyDown}>
+      <input
+        ref={inputRef}
+        type="text"
+        value={name}
+        onChange={e => { setName(e.target.value); setError(''); }}
+        placeholder={t.home.spaceName}
+        maxLength={80}
+        className="text-sm font-medium bg-transparent border-b border-border pb-1 outline-none placeholder:text-muted-foreground/50 text-foreground focus:border-[var(--amber)]"
+      />
+      <input
+        type="text"
+        value={description}
+        onChange={e => setDescription(e.target.value)}
+        placeholder={t.home.spaceDescription}
+        maxLength={200}
+        className="text-xs bg-transparent border-b border-border/50 pb-1 outline-none placeholder:text-muted-foreground/40 text-muted-foreground focus:border-[var(--amber)]"
+      />
+      {error && <span className="text-xs text-error">{error}</span>}
+      <div className="flex items-center gap-2 mt-1">
+        <button
+          onClick={handleCreate}
+          disabled={!name.trim() || loading}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-[var(--amber)] text-white transition-colors hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          {loading && <Loader2 size={12} className="animate-spin" />}
+          {t.home.createSpace}
+        </button>
+        <button
+          onClick={close}
+          className="px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground transition-colors hover:bg-muted"
+        >
+          {t.home.cancelCreate}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** Compact "+ New Space" text link shown next to "Show more" when grid is collapsed */
+function CreateSpaceTextLink({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
+  const router = useRouter();
+  const [editing, setEditing] = useState(false);
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  if (!editing) {
+    return (
+      <button
+        onClick={() => { setEditing(true); setTimeout(() => inputRef.current?.focus(), 50); }}
+        className="flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-[var(--amber)] cursor-pointer"
+      >
+        <Plus size={11} />
+        <span>{t.home.newSpace}</span>
+      </button>
+    );
+  }
+
+  return (
+    <form
+      className="flex items-center gap-2"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        if (!name.trim() || loading) return;
+        setLoading(true);
+        const result = await createSpaceAction(name, '');
+        setLoading(false);
+        if (result.success) { setEditing(false); setName(''); router.refresh(); }
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        value={name}
+        onChange={e => setName(e.target.value)}
+        onKeyDown={e => { if (e.key === 'Escape') { setEditing(false); setName(''); } }}
+        placeholder={t.home.spaceName}
+        maxLength={80}
+        className="text-xs bg-transparent border-b border-border pb-0.5 outline-none w-28 placeholder:text-muted-foreground/40 text-foreground focus:border-[var(--amber)]"
+      />
+      <button
+        type="submit"
+        disabled={!name.trim() || loading}
+        className="text-xs font-medium text-[var(--amber)] disabled:opacity-40"
+      >
+        {loading ? '...' : t.home.createSpace}
+      </button>
+    </form>
+  );
+}