repoimage 0.2.0

package/client/src/App.tsx

@@ -0,0 +1,599 @@
+import { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import type { ImageRow } from '@repoimage/shared';
+import { API_ORIGIN, fetchScanEntries, fetchScanFolder, FILE_PROTOCOL_ERROR } from './lib/api';
+import {
+  applyFilters,
+  applySort,
+  barFillClass,
+  formatFileSize,
+  scoreClass,
+  splitPath,
+  type SortKey
+} from './lib/format';
+import {
+  buildEntriesFromPicked,
+  collectFromDirectoryHandle,
+  collectFromFileInputListAsync,
+  pickerRootLabelFromPaths,
+  tryDeriveAbsoluteRootFromPicked,
+  yieldToPaint,
+  type PickedFile
+} from './lib/collect';
+import { FsBrowser } from './components/FsBrowser';
+import { Settings } from './components/Settings';
+
+function joinPosix(root: string, rel: string): string {
+  const r = root.replace(/\\/g, '/').replace(/\/+$/, '');
+  const p = rel.replace(/\\/g, '/').replace(/^\/+/, '');
+  return `${r}/${p}`;
+}
+
+function pathToFileUrl(absPath: string): string {
+  const p = absPath.replace(/\\/g, '/');
+  if (/^[a-zA-Z]:/.test(p)) {
+    return `file:///${encodeURI(p)}`;
+  }
+  return `file://${encodeURI(p.startsWith('/') ? p : `/${p}`)}`;
+}
+
+export default function App() {
+  const [folderInput, setFolderInput] = useState('');
+  const [pickedFiles, setPickedFiles] = useState<PickedFile[] | null>(null);
+  const [pickedLabel, setPickedLabel] = useState('');
+  const [rawImages, setRawImages] = useState<ImageRow[]>([]);
+  const [sortKey, setSortKey] = useState<SortKey>('score-desc');
+  const [filterText, setFilterText] = useState('');
+  const [minScore, setMinScore] = useState('');
+  const [maxScore, setMaxScore] = useState('');
+  const [statusMsg, setStatusMsg] = useState('');
+  const [scanning, setScanning] = useState(false);
+  const [sourceLabel, setSourceLabel] = useState('idle');
+  const [fsOpen, setFsOpen] = useState(false);
+  const [flowPopMsg, setFlowPopMsg] = useState('');
+  const [flowPopOpen, setFlowPopOpen] = useState(false);
+  const [excludeCommonFolders, setExcludeCommonFolders] = useState(false);
+
+  const pickerRef = useRef<HTMLInputElement>(null);
+  const blobUrlsRef = useRef<Map<string, string>>(new Map());
+  const webkitPendingRef = useRef(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('excludeCommonFolders');
+    if (saved === 'true') {
+      setExcludeCommonFolders(true);
+    }
+    const savedFolder = localStorage.getItem('folderInput');
+    if (savedFolder) {
+      setFolderInput(savedFolder);
+    }
+    const savedImages = localStorage.getItem('cachedScanResults');
+    if (savedImages) {
+      try {
+        const parsed = JSON.parse(savedImages) as ImageRow[];
+        setRawImages(parsed);
+      } catch {
+        // ignore invalid cache
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('excludeCommonFolders', String(excludeCommonFolders));
+  }, [excludeCommonFolders]);
+
+  useEffect(() => {
+    localStorage.setItem('folderInput', folderInput);
+  }, [folderInput]);
+
+  useEffect(() => {
+    if (rawImages.length > 0) {
+      localStorage.setItem('cachedScanResults', JSON.stringify(rawImages));
+    }
+  }, [rawImages]);
+
+  const revokeBlobUrls = useCallback(() => {
+    for (const url of blobUrlsRef.current.values()) {
+      URL.revokeObjectURL(url);
+    }
+    blobUrlsRef.current.clear();
+  }, []);
+
+  const scanRootAbsolute = useCallback((): string | null => {
+    if (pickedFiles !== null) return null;
+    const v = folderInput.trim();
+    if (!v || /\s·\s/.test(v)) return null;
+    return v;
+  }, [folderInput, pickedFiles]);
+
+  const pickedBlobUrl = useCallback(
+    (relPath: string): string | null => {
+      if (!pickedFiles) return null;
+      const map = blobUrlsRef.current;
+      if (map.has(relPath)) return map.get(relPath)!;
+      const row = pickedFiles.find(item => item.path === relPath);
+      if (!row) return null;
+      const url = URL.createObjectURL(row.file);
+      map.set(relPath, url);
+      return url;
+    },
+    [pickedFiles]
+  );
+
+  const imageOpenHref = useCallback(
+    (img: ImageRow): string | null => {
+      const fromPick = pickedBlobUrl(img.path);
+      if (fromPick) return fromPick;
+
+      const abs = scanRootAbsolute();
+      if (!abs) return null;
+
+      const full = joinPosix(abs, img.path);
+      if (location.protocol === 'file:') {
+        return pathToFileUrl(full);
+      }
+      if (API_ORIGIN === null) return null;
+      return `/api/file?path=${encodeURIComponent(full)}`;
+    },
+    [pickedBlobUrl, scanRootAbsolute]
+  );
+
+  const displayImages = useMemo(() => {
+    const filtered = applyFilters(rawImages, filterText, minScore, maxScore);
+    return applySort(filtered, sortKey);
+  }, [rawImages, filterText, minScore, maxScore, sortKey]);
+
+  const summary = useMemo(() => {
+    const count = displayImages.length;
+    const totalSize = displayImages.reduce((s, img) => s + (img.size || 0), 0);
+    const scored = displayImages.filter(img => img.compressionRatio != null);
+    const avgScore = scored.length
+      ? (
+          scored.reduce((s, img) => s + parseFloat(img.compressionRatio!), 0) / scored.length
+        ).toFixed(1)
+      : '—';
+    return { count, totalSize, avgScore };
+  }, [displayImages]);
+
+  const syncFolderInputAfterPick = useCallback((list: PickedFile[], label: string) => {
+    setPickedLabel(label || '');
+    const derived = tryDeriveAbsoluteRootFromPicked(list);
+    if (derived) {
+      setFolderInput(derived);
+      setPickedFiles(null);
+    } else {
+      setPickedFiles(list);
+      if (list.length) {
+        setFolderInput(label ? `${label} · ${list.length}` : String(list.length));
+      } else {
+        setFolderInput(label || '');
+      }
+    }
+  }, []);
+
+  const runScan = useCallback(async () => {
+    const pathTrim = folderInput.trim();
+    const usePicker = pickedFiles !== null;
+
+    if (!usePicker && !pathTrim) {
+      setStatusMsg('Browse or enter a path.');
+      return;
+    }
+
+    setScanning(true);
+    setStatusMsg(usePicker ? 'Reading…' : 'Scanning…');
+    revokeBlobUrls();
+    await yieldToPaint();
+
+    try {
+      if (usePicker) {
+        if (pickedFiles.length === 0) {
+          setRawImages([]);
+          setSourceLabel('0 images');
+          setStatusMsg('');
+          return;
+        }
+        const entries = await buildEntriesFromPicked(pickedFiles, (done, total) => {
+          setStatusMsg(`Reading ${done}/${total}`);
+        });
+        setStatusMsg('Sending…');
+        const data = await fetchScanEntries(entries);
+        const issueHint = data.issues?.length ? ` (${data.issues.length})` : '';
+        setSourceLabel(`pick${issueHint}`);
+        setRawImages(data.images || []);
+      } else {
+        const data = await fetchScanFolder(pathTrim, { excludeCommonFolders });
+        const issueHint = data.issues?.length ? ` (${data.issues.length})` : '';
+        setSourceLabel(`disk${issueHint}`);
+        setRawImages(data.images || []);
+      }
+      setStatusMsg('');
+    } catch (err) {
+      setRawImages([]);
+      setStatusMsg(err instanceof Error ? err.message : String(err));
+    } finally {
+      setScanning(false);
+    }
+  }, [folderInput, pickedFiles, revokeBlobUrls, excludeCommonFolders]);
+
+  const runNativeFolderPicker = useCallback(async () => {
+    if (typeof window.showDirectoryPicker === 'function') {
+      setScanning(true);
+      setFlowPopOpen(true);
+      setFlowPopMsg('Use the system window to pick a folder, then confirm.');
+      setStatusMsg('Choosing folder…');
+      await yieldToPaint();
+
+      let handle: FileSystemDirectoryHandle;
+      try {
+        handle = await window.showDirectoryPicker({ mode: 'read' });
+      } catch (e) {
+        setFlowPopOpen(false);
+        setScanning(false);
+        setStatusMsg('');
+        if (e instanceof Error && e.name === 'AbortError') return;
+        setStatusMsg(e instanceof Error ? e.message : String(e));
+        return;
+      }
+
+      setFlowPopOpen(false);
+      setStatusMsg('Walking folder tree…');
+      await yieldToPaint();
+      try {
+        const list = await collectFromDirectoryHandle(handle, '', (visited, imgs) => {
+          setStatusMsg(`Walking tree… ${visited} entries · ${imgs} images`);
+        });
+        syncFolderInputAfterPick(list, handle.name || '');
+        setStatusMsg('');
+        setScanning(false);
+        await runScan();
+      } catch (e) {
+        setStatusMsg(e instanceof Error ? e.message : String(e));
+        setScanning(false);
+      }
+    } else {
+      webkitPendingRef.current = true;
+      setScanning(true);
+      setFlowPopOpen(true);
+      setFlowPopMsg('In the system window, choose the project folder, then confirm with Upload or Open.');
+      setStatusMsg('Choosing folder…');
+      await yieldToPaint();
+      pickerRef.current?.click();
+    }
+  }, [runScan, syncFolderInputAfterPick]);
+
+  const onPickerChange = useCallback(
+    async (fl: FileList | null) => {
+      webkitPendingRef.current = false;
+      if (!fl || !fl.length) {
+        setFlowPopOpen(false);
+        setScanning(false);
+        setStatusMsg('');
+        return;
+      }
+
+      setFlowPopMsg('Preparing file list from the folder you chose…');
+      setFlowPopOpen(true);
+      setScanning(true);
+      setStatusMsg('Building file list…');
+      await yieldToPaint();
+      try {
+        const list = await collectFromFileInputListAsync(fl, (processed, total, imgs) => {
+          setFlowPopMsg(`Listing files… ${processed}/${total} · ${imgs} images`);
+          setStatusMsg(`Reading file list… ${processed}/${total} · ${imgs} images`);
+        });
+        syncFolderInputAfterPick(list, pickerRootLabelFromPaths(list));
+        setStatusMsg('');
+        setFlowPopOpen(false);
+        setScanning(false);
+        await runScan();
+      } catch (e) {
+        setStatusMsg(e instanceof Error ? e.message : String(e));
+        setFlowPopOpen(false);
+        setScanning(false);
+      }
+    },
+    [runScan, syncFolderInputAfterPick]
+  );
+
+  const handleClearData = useCallback(() => {
+    localStorage.clear();
+    setFolderInput('');
+    setPickedFiles(null);
+    setPickedLabel('');
+    setRawImages([]);
+    setSortKey('score-desc');
+    setFilterText('');
+    setMinScore('');
+    setMaxScore('');
+    setStatusMsg('');
+    setExcludeCommonFolders(false);
+  }, []);
+
+  const showResults = displayImages.length > 0;
+  const showEmptyStatus =
+    !showResults && (statusMsg || rawImages.length === 0 || displayImages.length === 0);
+
+  return (
+    <>
+      {API_ORIGIN === null ? (
+        <div className="file-protocol-banner" role="alert">
+          {FILE_PROTOCOL_ERROR}
+        </div>
+      ) : null}
+
+      <header className="top-bar">
+        <div className="top-bar__left">
+          <h1 className="top-bar__title">RepoImage</h1>
+          <p className="top-bar__subtitle">Repository image compression analyser</p>
+        </div>
+        <Settings
+          excludeCommonFolders={excludeCommonFolders}
+          onExcludeChange={setExcludeCommonFolders}
+          onClearData={handleClearData}
+        />
+      </header>
+
+      <main className="main">
+        <section className="controls">
+          <div className="controls__group">
+            <label className="controls__label" htmlFor="folder-input">
+              Project root
+            </label>
+            <div className="controls__input-row controls__input-row--wrap">
+              <input
+                type="text"
+                id="folder-input"
+                className="controls__text-input"
+                placeholder="/path/to/project"
+                autoComplete="off"
+                spellCheck={false}
+                value={folderInput}
+                disabled={scanning}
+                onChange={e => {
+                  setFolderInput(e.target.value);
+                  setPickedFiles(null);
+                  setPickedLabel('');
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'Enter') void runScan();
+                }}
+              />
+              <input
+                ref={pickerRef}
+                type="file"
+                className="visually-hidden"
+                // @ts-expect-error webkitdirectory
+                webkitdirectory=""
+                directory=""
+                multiple
+                tabIndex={-1}
+                aria-hidden
+                onChange={e => void onPickerChange(e.target.files)}
+                onCancel={() => {
+                  if (!webkitPendingRef.current) return;
+                  webkitPendingRef.current = false;
+                  setFlowPopOpen(false);
+                  setScanning(false);
+                  setStatusMsg('');
+                }}
+              />
+              <button
+                type="button"
+                className={`btn btn--primary${scanning ? ' btn--working' : ''}`}
+                disabled={scanning}
+                onClick={() => setFsOpen(true)}
+              >
+                Browse…
+              </button>
+            </div>
+            <div
+              className={`scan-progress${scanning ? ' scan-progress--active' : ''}`}
+              aria-hidden={scanning ? 'false' : 'true'}
+            >
+              <div className="scan-progress__bar" />
+            </div>
+          </div>
+
+          <div className="controls__group controls__group--row">
+            <div className="controls__field">
+              <label className="controls__label" htmlFor="sort-select">
+                Sort by
+              </label>
+              <select
+                id="sort-select"
+                className="controls__select"
+                value={sortKey}
+                onChange={e => setSortKey(e.target.value as SortKey)}
+              >
+                <option value="path-asc">Path A–Z</option>
+                <option value="path-desc">Path Z–A</option>
+                <option value="size-desc">Size (largest first)</option>
+                <option value="size-asc">Size (smallest first)</option>
+                <option value="score-desc">Compression score (worst first)</option>
+                <option value="score-asc">Compression score (best first)</option>
+                <option value="dimensions-desc">Dimensions (largest first)</option>
+                <option value="dimensions-asc">Dimensions (smallest first)</option>
+              </select>
+            </div>
+            <div className="controls__field">
+              <label className="controls__label" htmlFor="filter-input">
+                Filter path
+              </label>
+              <input
+                type="text"
+                id="filter-input"
+                className="controls__text-input controls__text-input--short"
+                placeholder="e.g. .png or assets/"
+                value={filterText}
+                onChange={e => setFilterText(e.target.value)}
+              />
+            </div>
+            <div className="controls__field">
+              <label className="controls__label" htmlFor="min-score">
+                Min score
+              </label>
+              <input
+                type="number"
+                id="min-score"
+                className="controls__text-input controls__text-input--tiny"
+                min={0}
+                max={10}
+                step={0.1}
+                placeholder="0"
+                value={minScore}
+                onChange={e => setMinScore(e.target.value)}
+              />
+            </div>
+            <div className="controls__field">
+              <label className="controls__label" htmlFor="max-score">
+                Max score
+              </label>
+              <input
+                type="number"
+                id="max-score"
+                className="controls__text-input controls__text-input--tiny"
+                min={0}
+                max={10}
+                step={0.1}
+                placeholder="10"
+                value={maxScore}
+                onChange={e => setMaxScore(e.target.value)}
+              />
+            </div>
+          </div>
+        </section>
+
+        {rawImages.length > 0 ? (
+          <section className="summary">
+            <span className="summary__stat">
+              <strong>{summary.count}</strong> image{summary.count !== 1 ? 's' : ''} shown
+            </span>
+            <span className="summary__stat">
+              Total size: <strong>{formatFileSize(summary.totalSize)}</strong>
+            </span>
+            <span className="summary__stat">
+              Avg compression score: <strong>{summary.avgScore}</strong>/10
+            </span>
+          </section>
+        ) : null}
+
+        {showEmptyStatus && statusMsg ? (
+          <section className="status">
+            <p className="status__message">{statusMsg}</p>
+          </section>
+        ) : null}
+
+        {showResults ? (
+          <section className="results-container">
+            <table className="results-table">
+              <thead>
+                <tr>
+                  <th className="results-table__th results-table__th--num">#</th>
+                  <th className="results-table__th results-table__th--path">Path</th>
+                  <th className="results-table__th results-table__th--size">File size</th>
+                  <th className="results-table__th results-table__th--dims">Dimensions</th>
+                  <th className="results-table__th results-table__th--uncomp">Uncompressed</th>
+                  <th className="results-table__th results-table__th--score">Score</th>
+                  <th className="results-table__th results-table__th--bar">Compression</th>
+                </tr>
+              </thead>
+              <tbody>
+                {displayImages.map((img, i) => {
+                  const { dir, file } = splitPath(img.path);
+                  const dims =
+                    img.width && img.height ? `${img.width} × ${img.height}` : '—';
+                  const scoreVal = img.compressionRatio ?? 'N/A';
+                  const scorePercent =
+                    img.compressionRatio != null
+                      ? (parseFloat(img.compressionRatio) / 10) * 100
+                      : 0;
+                  const href = imageOpenHref(img);
+                  return (
+                    <tr key={img.path}>
+                      <td className="cell--num">{i + 1}</td>
+                      <td className="cell--path">
+                        <span className="cell--path__dir">{dir}</span>
+                        {href ? (
+                          <a
+                            className="cell--path__file cell--path__link"
+                            href={href}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {file}
+                          </a>
+                        ) : (
+                          <span className="cell--path__file">{file}</span>
+                        )}
+                      </td>
+                      <td className="cell--size">{formatFileSize(img.size)}</td>
+                      <td className="cell--dims">{dims}</td>
+                      <td className="cell--uncomp">{formatFileSize(img.uncompressedSize)}</td>
+                      <td className={`cell--score ${scoreClass(img.compressionRatio)}`}>
+                        {scoreVal}
+                      </td>
+                      <td className="cell--bar">
+                        <div className="bar">
+                          <div
+                            className={`bar__fill ${barFillClass(img.compressionRatio)}`}
+                            style={{ width: `${scorePercent}%` }}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </section>
+        ) : showEmptyStatus && !statusMsg ? (
+          <section className="status">
+            <p className="status__message">
+              {rawImages.length === 0 ? 'No images.' : 'No images match the current filters.'}
+            </p>
+          </section>
+        ) : null}
+      </main>
+
+      <footer className="footer">
+        <p>
+          RepoImage GUI — run <code>npm run gui</code> or <code>npm run dev</code> ·{' '}
+          <span>{sourceLabel}</span>
+        </p>
+      </footer>
+
+      <FsBrowser
+        open={fsOpen}
+        onClose={() => setFsOpen(false)}
+        onUseFolder={path => {
+          setFolderInput(path);
+          setPickedFiles(null);
+          setPickedLabel('');
+          setFsOpen(false);
+          void runScan();
+        }}
+        onSystemPick={() => {
+          setFsOpen(false);
+          void runNativeFolderPicker();
+        }}
+        fileProtocolError={API_ORIGIN === null ? FILE_PROTOCOL_ERROR : null}
+      />
+
+      <div
+        className={`folder-flow-pop${flowPopOpen ? '' : ' hidden'}`}
+        aria-hidden={!flowPopOpen}
+      >
+        <div className="folder-flow-pop__backdrop" aria-hidden />
+        <div className="folder-flow-pop__panel" role="dialog" aria-modal={false}>
+          <h2 className="folder-flow-pop__title">Folder</h2>
+          <p className="folder-flow-pop__msg" aria-live="polite">
+            {flowPopMsg}
+          </p>
+          <div className="folder-flow-pop__track">
+            <div className="folder-flow-pop__bar" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}