repoimage 0.2.0

package/client/src/components/FsBrowser.tsx

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { FsListEntry } from '@repoimage/shared';
+import { API_ORIGIN, fetchApiJson } from '../lib/api';
+
+const LS_FS_SHOW_HIDDEN = 'repoimage-fs-show-hidden';
+
+function fsEntryBaseName(ent: FsListEntry): string {
+  if (ent.name.length) return ent.name;
+  const p = ent.path.replace(/\\/g, '/');
+  const i = p.lastIndexOf('/');
+  return i === -1 ? p : p.slice(i + 1);
+}
+
+function fsParentDir(p: string): string {
+  const n = (p || '/').replace(/\/+$/, '') || '/';
+  if (n === '/') return '/';
+  const i = n.lastIndexOf('/');
+  if (i <= 0) return '/';
+  return n.slice(0, i) || '/';
+}
+
+interface FsBrowserProps {
+  open: boolean;
+  onClose: () => void;
+  onUseFolder: (path: string) => void;
+  onSystemPick: () => void;
+  fileProtocolError: string | null;
+}
+
+export function FsBrowser({
+  open,
+  onClose,
+  onUseFolder,
+  onSystemPick,
+  fileProtocolError
+}: FsBrowserProps) {
+  const [dir, setDir] = useState('');
+  const [pathInput, setPathInput] = useState('');
+  const [entriesRaw, setEntriesRaw] = useState<FsListEntry[]>([]);
+  const [error, setError] = useState('');
+  const [showHidden, setShowHidden] = useState(() => {
+    try {
+      const stored = localStorage.getItem(LS_FS_SHOW_HIDDEN);
+      if (stored === '1') return true;
+      if (stored === '0') return false;
+    } catch {
+      /* ignore */
+    }
+    return false;
+  });
+
+  const loadDir = useCallback(async (dirPath: string) => {
+    setError('');
+    setEntriesRaw([]);
+    try {
+      const q = encodeURIComponent(dirPath);
+      const data = await fetchApiJson(`/api/fs/list?path=${q}`);
+      const resolved = data.path as string;
+      setDir(resolved);
+      setPathInput(resolved);
+      setEntriesRaw((data.entries as FsListEntry[]) || []);
+    } catch (e) {
+      setEntriesRaw([]);
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    if (API_ORIGIN === null) {
+      setError(fileProtocolError || 'API unavailable');
+      return;
+    }
+    void (async () => {
+      try {
+        const home = await fetchApiJson('/api/fs/home');
+        await loadDir(home.path as string);
+      } catch {
+        await loadDir('/');
+      }
+    })();
+  }, [open, loadDir, fileProtocolError]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const filtered = showHidden
+    ? entriesRaw
+    : entriesRaw.filter(e => !fsEntryBaseName(e).startsWith('.'));
+
+  const dirs = filtered.filter(e => e.type === 'directory');
+  const rest = filtered.filter(e => e.type !== 'directory');
+  const ordered = [...dirs, ...rest];
+
+  return (
+    <div className="fs-browser" aria-hidden={false}>
+      <div className="fs-browser__backdrop" onClick={onClose} />
+      <div
+        className="fs-browser__panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="fs-browser-title"
+      >
+        <div className="fs-browser__head">
+          <h2 id="fs-browser-title" className="fs-browser__title">
+            Choose folder
+          </h2>
+          <button type="button" className="fs-browser__close" aria-label="Close" onClick={onClose}>
+            ×
+          </button>
+        </div>
+        <div className="fs-browser__path-row">
+          <input
+            type="text"
+            className="fs-browser__path-input controls__text-input"
+            spellCheck={false}
+            autoComplete="off"
+            value={pathInput}
+            onChange={e => setPathInput(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter' && pathInput.trim()) void loadDir(pathInput.trim());
+            }}
+          />
+          <button
+            type="button"
+            className="btn btn--secondary"
+            onClick={() => pathInput.trim() && void loadDir(pathInput.trim())}
+          >
+            Go
+          </button>
+          <button
+            type="button"
+            className="btn btn--secondary"
+            onClick={() => void loadDir(fsParentDir(dir || pathInput.trim() || '/'))}
+          >
+            Up
+          </button>
+        </div>
+        <div className="fs-browser__opts">
+          <label className="fs-browser__hidden-label">
+            <input
+              type="checkbox"
+              checked={showHidden}
+              onChange={e => {
+                setShowHidden(e.target.checked);
+                try {
+                  localStorage.setItem(LS_FS_SHOW_HIDDEN, e.target.checked ? '1' : '0');
+                } catch {
+                  /* ignore */
+                }
+              }}
+            />
+            Show hidden files
+          </label>
+        </div>
+        {error ? (
+          <p className="fs-browser__error" role="alert">
+            {error}
+          </p>
+        ) : null}
+        <ul className="fs-browser__list">
+          {ordered.length === 0 ? (
+            <li className="fs-browser__empty">(empty)</li>
+          ) : (
+            ordered.map(ent => (
+              <li
+                key={ent.path}
+                data-path={ent.path}
+                data-type={ent.type}
+                onClick={() => {
+                  if (ent.type === 'directory') void loadDir(ent.path);
+                }}
+              >
+                {ent.type === 'directory' ? `${fsEntryBaseName(ent)}/` : fsEntryBaseName(ent) || '—'}
+              </li>
+            ))
+          )}
+        </ul>
+        <div className="fs-browser__actions">
+          <button
+            type="button"
+            className="btn btn--primary"
+            onClick={() => {
+              const p = (pathInput || dir).trim();
+              if (p) onUseFolder(p);
+            }}
+          >
+            Use this folder
+          </button>
+          <button type="button" className="btn btn--secondary" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+        <p className="fs-browser__alt">
+          <button type="button" className="fs-browser__linkbtn" onClick={onSystemPick}>
+            Use system folder dialog instead…
+          </button>
+        </p>
+      </div>
+    </div>
+  );
+}

package/client/src/components/Settings.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+
+interface SettingsProps {
+  excludeCommonFolders: boolean;
+  onExcludeChange: (value: boolean) => void;
+  onClearData: () => void;
+}
+
+export function Settings({ excludeCommonFolders, onExcludeChange, onClearData }: SettingsProps) {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [open, setOpen]);
+
+  const handleClear = useCallback(() => {
+    if (confirm('Clear all session data (working directory, preferences)? This cannot be undone.')) {
+      onClearData();
+      setOpen(false);
+    }
+  }, [onClearData, setOpen]);
+
+  return (
+    <div className="settings-container">
+      <button
+        ref={buttonRef}
+        type="button"
+        className="settings-button"
+        onClick={() => setOpen(!open)}
+        aria-label="Settings"
+        aria-expanded={open}
+      >
+        ⚙️
+      </button>
+
+      {open && (
+        <div ref={dropdownRef} className="settings-dropdown">
+          <div className="settings-item">
+            <label className="settings-label">
+              <input
+                type="checkbox"
+                className="settings-checkbox"
+                checked={excludeCommonFolders}
+                onChange={e => onExcludeChange(e.target.checked)}
+              />
+              <span>Exclude common folders</span>
+            </label>
+            <p className="settings-hint">Skip node_modules, dist, .git, etc.</p>
+          </div>
+
+          <hr className="settings-divider" />
+
+          <button
+            type="button"
+            className="settings-action"
+            onClick={handleClear}
+          >
+            Clear all data
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+