@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/CreateSpaceModal.tsx

@@ -1,235 +0,0 @@
-'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

@@ -1,346 +0,0 @@
-'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>
-  );
-}