@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/CreateSpaceModal.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Folder, Loader2, X, Sparkles, AlertTriangle } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useLocale } from '@/lib/stores/locale-store';
+import { encodePath } from '@/lib/utils';
+import { createSpaceAction } from '@/lib/actions';
+import { checkAiAvailable, triggerSpaceAiInit } from '@/lib/space-ai-init';
+import DirPicker from './DirPicker';
+
+/* ── Create Space Modal ── */
+
+export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof useLocale>['t']; dirPaths: string[] }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [parent, setParent] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [nameHint, setNameHint] = useState('');
+  const [aiAvailable, setAiAvailable] = useState<boolean | null>(null); // null = loading
+  const [useAi, setUseAi] = useState(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handler = () => {
+      setOpen(true);
+      setError('');
+      setNameHint('');
+      setTimeout(() => inputRef.current?.focus(), 80);
+    };
+    window.addEventListener('mindos:create-space', handler);
+    return () => window.removeEventListener('mindos:create-space', handler);
+  }, []);
+
+  useEffect(() => {
+    if (!open || aiAvailable !== null) return;
+    checkAiAvailable().then(ok => {
+      setAiAvailable(ok);
+      setUseAi(ok);
+    });
+  }, [open, aiAvailable]);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setName('');
+    setDescription('');
+    setParent('');
+    setError('');
+    setNameHint('');
+    setAiAvailable(null); // re-check on next open
+  }, []);
+
+  const validateName = useCallback((val: string) => {
+    if (val.includes('/') || val.includes('\\')) {
+      setNameHint(t.home.spaceNameNoSlash ?? 'Name cannot contain / or \\');
+      return false;
+    }
+    setNameHint('');
+    return true;
+  }, [t]);
+
+  const fullPathPreview = useMemo(() => {
+    const trimmed = name.trim();
+    if (!trimmed) return '';
+    return (parent ? parent + '/' : '') + trimmed + '/';
+  }, [name, parent]);
+
+  const handleCreate = useCallback(async () => {
+    if (!name.trim() || loading) return;
+    if (!validateName(name)) return;
+    setLoading(true);
+    setError('');
+    const trimmed = name.trim();
+    const result = await createSpaceAction(trimmed, description, parent);
+    if (result.success) {
+      const createdPath = result.path ?? trimmed;
+
+      if (useAi && aiAvailable) {
+        triggerSpaceAiInit(trimmed, createdPath, description);
+      }
+
+      close();
+      router.refresh();
+      window.dispatchEvent(new Event('mindos:files-changed'));
+      router.push(`/view/${encodePath(createdPath + '/')}`);
+    } else {
+      const msg = result.error ?? '';
+      if (msg.includes('already exists')) {
+        setError(t.home.spaceExists ?? 'A space with this name already exists');
+      } else {
+        setError(t.home.spaceCreateFailed ?? 'Failed to create space');
+      }
+    }
+    setLoading(false);
+  }, [name, description, parent, loading, close, router, t, validateName, useAi, aiAvailable]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') close();
+    if (e.key === 'Enter' && !e.shiftKey && e.target instanceof HTMLInputElement) { e.preventDefault(); handleCreate(); }
+  }, [close, handleCreate]);
+
+  if (!open) return null;
+
+  const h = t.home;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center" onKeyDown={handleKeyDown}>
+      {/* Backdrop */}
+      <div className="absolute inset-0 overlay-backdrop" onClick={close} />
+      {/* Dialog */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={h.newSpace}
+        className="relative w-full max-w-md mx-4 rounded-2xl border border-border bg-card shadow-xl"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 pt-5 pb-3">
+          <h3 className="text-base font-semibold text-foreground">{h.newSpace}</h3>
+          <button onClick={close} className="p-1 rounded-md text-muted-foreground hover:bg-muted transition-colors">
+            <X size={14} />
+          </button>
+        </div>
+        {/* Body */}
+        <div className="px-5 pb-5 flex flex-col gap-3">
+          {/* Location */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">{h.spaceLocation ?? 'Location'}</label>
+            <DirPicker
+              dirPaths={dirPaths}
+              value={parent}
+              onChange={setParent}
+              rootLabel={h.rootLevel ?? 'Root'}
+            />
+          </div>
+          {/* Name */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">{h.spaceName}</label>
+            <input
+              ref={inputRef}
+              type="text"
+              value={name}
+              onChange={e => { setName(e.target.value); setError(''); validateName(e.target.value); }}
+              placeholder="e.g. 📝 Notes"
+              maxLength={80}
+              aria-invalid={!!nameHint}
+              aria-describedby={nameHint ? 'space-name-hint' : undefined}
+              className={`w-full px-3 py-2 text-sm rounded-lg border bg-background outline-none transition-colors ${
+                nameHint ? 'border-error focus-visible:border-error' : 'border-border focus-visible:ring-1 focus-visible:ring-ring'
+              }`}
+            />
+            {nameHint && <span id="space-name-hint" className="text-xs text-error">{nameHint}</span>}
+          </div>
+          {/* Description */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">
+              {h.spaceDescription} <span className="opacity-50">({h.optional ?? 'optional'})</span>
+            </label>
+            <input
+              type="text"
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              placeholder={h.spaceDescPlaceholder ?? 'Describe the purpose of this space'}
+              maxLength={200}
+              className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors"
+            />
+          </div>
+          {/* AI initialization toggle */}
+          <div className="flex items-start gap-2.5 px-1 py-1">
+            <button
+              type="button"
+              role="switch"
+              aria-checked={useAi}
+              disabled={!aiAvailable}
+              title={!aiAvailable ? t.hints.configureAiKey : undefined}
+              onClick={() => setUseAi(v => !v)}
+              className={`relative mt-0.5 inline-flex shrink-0 h-4 w-7 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+                useAi ? 'bg-[var(--amber)]' : 'bg-muted'
+              }`}
+            >
+              <span className={`pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-sm transition-transform ${useAi ? 'translate-x-3' : 'translate-x-0'}`} />
+            </button>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5">
+                <Sparkles size={12} className="text-[var(--amber)] shrink-0" />
+                <span className="text-xs font-medium text-foreground">{h.aiInit ?? 'AI initialize content'}</span>
+              </div>
+              {aiAvailable === false && (
+                <p className="text-2xs text-muted-foreground mt-0.5 flex items-center gap-1">
+                  <AlertTriangle size={10} className="text-[var(--amber)] shrink-0" />
+                  {h.aiInitNoKey ?? 'Configure an API key in Settings → AI to enable'}
+                </p>
+              )}
+              {aiAvailable && useAi && (
+                <p className="text-2xs text-muted-foreground mt-0.5">
+                  {h.aiInitHint ?? 'AI will generate README and INSTRUCTION for this space'}
+                </p>
+              )}
+            </div>
+          </div>
+          {/* Path preview */}
+          {fullPathPreview && (
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground font-mono px-1">
+              <Folder size={12} className="shrink-0 text-[var(--amber)]" />
+              <span className="truncate">{fullPathPreview}</span>
+            </div>
+          )}
+          {error && <span role="alert" className="text-xs text-error px-1">{error}</span>}
+          {/* Actions */}
+          <div className="flex items-center justify-end gap-2 pt-1">
+            <button
+              onClick={close}
+              className="px-4 py-2 rounded-lg text-sm font-medium text-muted-foreground transition-colors hover:bg-muted"
+            >
+              {h.cancelCreate}
+            </button>
+            <button
+              onClick={handleCreate}
+              disabled={!name.trim() || loading || !!nameHint}
+              className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium bg-[var(--amber)] text-[var(--amber-foreground)] transition-colors hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading && <Loader2 size={14} className="animate-spin" />}
+              {h.createSpace}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/_standalone/components/CsvView.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import Papa from 'papaparse';
+import { ChevronUp, ChevronDown, ChevronsUpDown, Plus, Trash2, Loader2 } from 'lucide-react';
+
+interface CsvViewProps {
+  content: string;
+  filePath?: string;
+  appendAction?: (newRow: string[]) => Promise<{ newContent: string }>;
+  saveAction?: (newContent: string) => Promise<void>;
+}
+
+type SortDir = 'asc' | 'desc' | null;
+
+function serializeRows(headers: string[], rows: string[][]): string {
+  return Papa.unparse([headers, ...rows]);
+}
+
+// ─── Inline cell editor ───────────────────────────────────────────────────────
+
+function Cell({
+  value,
+  editable,
+  onCommit,
+}: {
+  value: string;
+  editable: boolean;
+  onCommit: (newVal: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function startEdit() {
+    if (!editable) return;
+    setDraft(value);
+    setEditing(true);
+  }
+
+  useEffect(() => {
+    if (editing) inputRef.current?.select();
+  }, [editing]);
+
+  function commit() {
+    setEditing(false);
+    if (draft !== value) onCommit(draft);
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={draft}
+        onChange={e => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={e => {
+          if (e.key === 'Enter') commit();
+          if (e.key === 'Escape') { setDraft(value); setEditing(false); }
+        }}
+        className="w-full bg-transparent outline-none text-sm"
+        style={{
+          color: 'var(--foreground)',
+          borderBottom: '1px solid var(--amber)',
+          minWidth: 60,
+        }}
+        onClick={e => e.stopPropagation()}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={`truncate text-sm ${editable ? 'cursor-text' : ''}`}
+      style={{ color: 'var(--foreground)', minWidth: 60 }}
+      onClick={editable ? startEdit : undefined}
+      title={value}
+    >
+      {value || <span style={{ color: 'var(--muted-foreground)', opacity: 0.4 }}>—</span>}
+    </div>
+  );
+}
+
+// ─── Add row form ─────────────────────────────────────────────────────────────
+
+function AddRowForm({
+  headers,
+  onAdd,
+  onCancel,
+}: {
+  headers: string[];
+  onAdd: (row: string[]) => void;
+  onCancel: () => void;
+}) {
+  const [values, setValues] = useState<string[]>(() => Array(headers.length).fill(''));
+  const firstRef = useRef<HTMLInputElement>(null);
+
+  function set(i: number, v: string) {
+    setValues(prev => { const next = [...prev]; next[i] = v; return next; });
+  }
+
+  function submit() {
+    onAdd(values);
+  }
+
+  return (
+    <tr style={{ background: 'color-mix(in srgb, var(--amber) 6%, transparent)', borderTop: '1px solid var(--amber)' }}>
+      {headers.map((h, i) => (
+        <td key={i} className="px-3 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+          <input
+            ref={i === 0 ? firstRef : undefined}
+            autoFocus={i === 0}
+            value={values[i]}
+            onChange={e => set(i, e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter') submit();
+              if (e.key === 'Escape') onCancel();
+            }}
+            placeholder={h}
+            className="w-full bg-transparent outline-none text-sm placeholder:opacity-30"
+            style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--border)' }}
+          />
+        </td>
+      ))}
+      {/* spacer for delete column */}
+      <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }} />
+    </tr>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function CsvView({ content: initialContent, appendAction, saveAction }: CsvViewProps) {
+  const [content, setContent] = useState(initialContent);
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>(null);
+  const [showAdd, setShowAdd] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const parsed = useMemo(() => {
+    const result = Papa.parse<string[]>(content, { skipEmptyLines: true });
+    return result.data as string[][];
+  }, [content]);
+
+  const headers = parsed[0] || [];
+  const rows = parsed.slice(1);
+
+  const sortedRows = useMemo(() => {
+    if (sortCol === null || sortDir === null) return rows;
+    return [...rows].sort((a, b) => {
+      const va = a[sortCol] ?? '', vb = b[sortCol] ?? '';
+      const na = parseFloat(va), nb = parseFloat(vb);
+      if (!isNaN(na) && !isNaN(nb)) return sortDir === 'asc' ? na - nb : nb - na;
+      return sortDir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
+  }, [rows, sortCol, sortDir]);
+
+  function toggleSort(col: number) {
+    if (sortCol !== col) { setSortCol(col); setSortDir('asc'); return; }
+    if (sortDir === 'asc') { setSortDir('desc'); return; }
+    setSortCol(null); setSortDir(null);
+  }
+
+  // Update a single cell and persist
+  const handleCellCommit = useCallback(async (rowIdx: number, colIdx: number, newVal: string) => {
+    if (!saveAction) return;
+    const updatedRows = rows.map((r) => {
+      const sorted = sortedRows[rowIdx];
+      if (r === sorted) return r.map((cell, ci) => ci === colIdx ? newVal : cell);
+      return r;
+    });
+    const newContent = serializeRows(headers, updatedRows);
+    setContent(newContent);
+    setSaving(true);
+    try {
+      await saveAction(newContent);
+    } catch (err) {
+      console.error('[CsvView] Cell save failed:', err);
+    } finally {
+      setSaving(false);
+    }
+  }, [saveAction, rows, sortedRows, headers]);
+
+  // Delete a row and persist
+  const handleDeleteRow = useCallback(async (rowIdx: number) => {
+    if (!saveAction || saving) return;
+    const sorted = sortedRows[rowIdx];
+    const updatedRows = rows.filter(r => r !== sorted);
+    const newContent = serializeRows(headers, updatedRows);
+    setContent(newContent);
+    setSaving(true);
+    try {
+      await saveAction(newContent);
+    } catch (err) {
+      console.error('[CsvView] Row delete failed:', err);
+    } finally {
+      setSaving(false);
+    }
+  }, [saveAction, rows, sortedRows, headers, saving]);
+
+  // Append a new row
+  const handleAddRow = useCallback(async (newRow: string[]) => {
+    setSaving(true);
+    try {
+      if (appendAction) {
+        const result = await appendAction(newRow);
+        setContent(result.newContent);
+      } else if (saveAction) {
+        const newContent = serializeRows(headers, [...rows, newRow]);
+        setContent(newContent);
+        await saveAction(newContent);
+      }
+      setShowAdd(false);
+    } catch (err) {
+      console.error('[CsvView] Add row failed:', err);
+    } finally {
+      setSaving(false);
+    }
+  }, [appendAction, saveAction, headers, rows]);
+
+  const canEdit = !!saveAction || !!appendAction;
+
+  if (headers.length === 0) {
+    return <div className="text-sm py-4" style={{ color: 'var(--muted-foreground)' }}>Empty CSV file</div>;
+  }
+
+  return (
+    <div className="w-full rounded-xl overflow-hidden border" style={{ borderColor: 'var(--border)' }}>
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-sm border-collapse">
+          <thead>
+            <tr style={{ background: 'var(--muted)' }}>
+              {headers.map((header, i) => (
+                <th
+                  key={i}
+                  onClick={() => toggleSort(i)}
+                  className="px-4 py-2.5 text-left font-semibold cursor-pointer select-none whitespace-nowrap transition-colors hover:bg-accent"
+                  style={{
+                    color: 'var(--foreground)',
+                    borderBottom: '1px solid var(--border)',
+                    fontSize: '0.75rem',
+                    letterSpacing: '0.04em',
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span>{header}</span>
+                    {sortCol === i
+                      ? sortDir === 'asc'
+                        ? <ChevronUp size={11} style={{ color: 'var(--amber)' }} />
+                        : <ChevronDown size={11} style={{ color: 'var(--amber)' }} />
+                      : <ChevronsUpDown size={11} style={{ color: 'var(--muted-foreground)', opacity: 0.4 }} />
+                    }
+                  </div>
+                </th>
+              ))}
+              {canEdit && <th className="w-8" style={{ borderBottom: '1px solid var(--border)', background: 'var(--muted)' }} />}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedRows.map((row, rowIdx) => (
+              <tr
+                key={rowIdx}
+                className="group transition-colors"
+                style={{
+                  background: rowIdx % 2 === 0 ? 'var(--background)' : 'var(--card)',
+                }}
+                onMouseEnter={e => (e.currentTarget.style.background = 'var(--muted)')}
+                onMouseLeave={e => (e.currentTarget.style.background = rowIdx % 2 === 0 ? 'var(--background)' : 'var(--card)')}
+              >
+                {headers.map((_, colIdx) => (
+                  <td
+                    key={colIdx}
+                    className="px-4 py-2.5 max-w-xs"
+                    style={{ borderBottom: '1px solid var(--border)' }}
+                  >
+                    <Cell
+                      value={row[colIdx] ?? ''}
+                      editable={!!saveAction}
+                      onCommit={(v) => handleCellCommit(rowIdx, colIdx, v)}
+                    />
+                  </td>
+                ))}
+                {canEdit && (
+                  <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+                    {saveAction && (
+                      <button
+                        onClick={() => handleDeleteRow(rowIdx)}
+                        disabled={saving}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-destructive/10 disabled:opacity-30"
+                        style={{ color: 'var(--muted-foreground)' }}
+                        title={saving ? 'Saving...' : 'Delete row'}
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+
+            {/* Add row form */}
+            {showAdd && (
+              <AddRowForm
+                headers={headers}
+                onAdd={handleAddRow}
+                onCancel={() => setShowAdd(false)}
+              />
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Footer */}
+      <div
+        className="px-4 py-2 flex items-center justify-between"
+        style={{ background: 'var(--muted)', borderTop: '1px solid var(--border)' }}
+      >
+        <span className="text-xs font-display flex items-center gap-1.5" style={{ color: 'var(--muted-foreground)' }}>
+          {rows.length} rows · {headers.length} cols
+          {saving && <Loader2 size={10} className="animate-spin" style={{ color: 'var(--amber)' }} />}
+        </span>
+
+        {canEdit && !showAdd && (
+          <button
+            onClick={() => setShowAdd(true)}
+            className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-md transition-colors font-display"
+            style={{ color: 'var(--amber)', background: 'var(--amber-dim)' }}
+          >
+            <Plus size={12} />
+            Add row
+          </button>
+        )}
+        {showAdd && (
+          <button
+            onClick={() => setShowAdd(false)}
+            className="text-xs px-2.5 py-1 rounded-md transition-colors font-display"
+            style={{ color: 'var(--muted-foreground)' }}
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}