style: format frontend with prettier

Mechanical one-shot pass of pnpm format over src/, tests/, tools/, and root configs. No functional changes; build and type-check verified.
2026-07-04 20:23:32 +01:00
parent 32c6ae09d6
commit 827e1a8ecf
152 changed files with 9204 additions and 7445 deletions
@@ -2,29 +2,38 @@ export function DuplicateScanLoadingState({ progressLabel }: { progressLabel: st
  return (
    <div className="flex flex-1 items-center justify-center gap-3 text-white/25">
      <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/15 border-t-white/50" />
-      <span className="text-sm">{progressLabel ? `${progressLabel}…` : "Preparing scan…"}</span>
+      <span className="text-sm">{progressLabel ? `${progressLabel}…` : 'Preparing scan…'}</span>
    </div>
-  );
+  )
 }

 export function DuplicateScanIntroState() {
  return (
    <div className="flex flex-1 items-center justify-center px-8">
      <div className="max-w-sm text-center">
-        <svg className="mx-auto mb-4 h-10 w-10 text-white/10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
-            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        <svg
+          className="mx-auto mb-4 h-10 w-10 text-white/10"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1}
+            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
        </svg>
        <p className="text-sm text-white/30">
-          Finds files with identical content regardless of filename or location.
-          Click <strong className="text-white/50">Scan for duplicates</strong> to begin.
+          Finds files with identical content regardless of filename or location. Click{' '}
+          <strong className="text-white/50">Scan for duplicates</strong> to begin.
        </p>
        <p className="mt-2 text-xs text-white/20">
          Large libraries may take a minute — files are hashed from disk.
        </p>
      </div>
    </div>
-  );
+  )
 }

 export function DuplicateScanEmptyState() {
@@ -32,5 +41,5 @@ export function DuplicateScanEmptyState() {
    <div className="flex flex-1 items-center justify-center">
      <p className="text-sm text-white/25">No duplicate files found.</p>
    </div>
-  );
+  )
 }
@@ -1,13 +1,13 @@
-import { DuplicateGroup, DuplicateScanProgress } from "../../store";
-import { FolderScopeDropdown } from "../FolderScopeDropdown";
-import { Tooltip } from "../Tooltip";
-import { WarningIcon } from "../icons";
+import { DuplicateGroup, DuplicateScanProgress } from '../../store'
+import { FolderScopeDropdown } from '../FolderScopeDropdown'
+import { Tooltip } from '../Tooltip'
+import { WarningIcon } from '../icons'
 import {
  duplicateProgressLabel,
  duplicateProgressPercent,
  formatBytes,
  formatRelativeTime,
-} from "./format";
+} from './format'

 export function DuplicateFinderHeader({
  confirmingDelete,
@@ -29,32 +29,35 @@ export function DuplicateFinderHeader({
  selectedCount,
  setConfirmingDelete,
 }: {
-  confirmingDelete: boolean;
-  deleteResult: string | null;
-  deleting: boolean;
-  duplicateGroups: DuplicateGroup[];
-  duplicateLastScanned: number | null;
-  duplicateScanError: string | null;
-  duplicateScanning: boolean;
-  duplicateScanProgress: DuplicateScanProgress | null;
-  duplicateScanWarning: string | null;
-  hasResults: boolean;
-  hasScanned: boolean;
-  onClearSelection: () => void;
-  onConfirmDelete: () => void;
-  onDelete: () => void;
-  onScan: () => void;
-  onSelectKeepFirstAll: () => void;
-  selectedCount: number;
-  setConfirmingDelete: (value: boolean | ((current: boolean) => boolean)) => void;
+  confirmingDelete: boolean
+  deleteResult: string | null
+  deleting: boolean
+  duplicateGroups: DuplicateGroup[]
+  duplicateLastScanned: number | null
+  duplicateScanError: string | null
+  duplicateScanning: boolean
+  duplicateScanProgress: DuplicateScanProgress | null
+  duplicateScanWarning: string | null
+  hasResults: boolean
+  hasScanned: boolean
+  onClearSelection: () => void
+  onConfirmDelete: () => void
+  onDelete: () => void
+  onScan: () => void
+  onSelectKeepFirstAll: () => void
+  selectedCount: number
+  setConfirmingDelete: (value: boolean | ((current: boolean) => boolean)) => void
 }) {
  const totalWasted = duplicateGroups.reduce(
    (sum, group) => sum + group.file_size * (group.images.length - 1),
-    0,
-  );
-  const totalDuplicateImages = duplicateGroups.reduce((sum, group) => sum + group.images.length - 1, 0);
-  const progressLabel = duplicateProgressLabel(duplicateScanProgress);
-  const progressPercent = duplicateProgressPercent(duplicateScanProgress);
+    0
+  )
+  const totalDuplicateImages = duplicateGroups.reduce(
+    (sum, group) => sum + group.images.length - 1,
+    0
+  )
+  const progressLabel = duplicateProgressLabel(duplicateScanProgress)
+  const progressPercent = duplicateProgressPercent(duplicateScanProgress)

  return (
    <div className="shrink-0 border-b border-white/[0.05] px-6 py-4">
@@ -64,13 +67,13 @@ export function DuplicateFinderHeader({
          <p className="mt-0.5 text-[11px] text-white/30">
            {duplicateScanning
              ? duplicateScanProgress
-                ? `${progressLabel}… ${duplicateScanProgress.processed.toLocaleString()} / ${duplicateScanProgress.total.toLocaleString()}${duplicateScanProgress.skipped > 0 ? ` · ${duplicateScanProgress.skipped.toLocaleString()} skipped` : ""}`
-                : "Starting scan…"
+                ? `${progressLabel}… ${duplicateScanProgress.processed.toLocaleString()} / ${duplicateScanProgress.total.toLocaleString()}${duplicateScanProgress.skipped > 0 ? ` · ${duplicateScanProgress.skipped.toLocaleString()} skipped` : ''}`
+                : 'Starting scan…'
              : hasResults
-                ? `${duplicateGroups.length} group${duplicateGroups.length === 1 ? "" : "s"} · ${formatBytes(totalWasted)} reclaimable`
+                ? `${duplicateGroups.length} group${duplicateGroups.length === 1 ? '' : 's'} · ${formatBytes(totalWasted)} reclaimable`
                : duplicateLastScanned !== null
-                  ? "No duplicates found"
-                  : "Scan your library for identical files"}
+                  ? 'No duplicates found'
+                  : 'Scan your library for identical files'}
          </p>
          {!duplicateScanning && duplicateLastScanned !== null ? (
            <p className="mt-0.5 text-[10px] text-white/20">
@@ -81,9 +84,12 @@ export function DuplicateFinderHeader({
        <div className="flex items-center gap-2">
          <FolderScopeDropdown />
          {hasResults && selectedCount === 0 && !deleting ? (
-            <Tooltip label={`Mark ${totalDuplicateImages} duplicate${totalDuplicateImages === 1 ? "" : "s"} for deletion across all groups (keeps first in each)`} anchorToCursor>
+            <Tooltip
+              label={`Mark ${totalDuplicateImages} duplicate${totalDuplicateImages === 1 ? '' : 's'} for deletion across all groups (keeps first in each)`}
+              anchorToCursor
+            >
              <button
-                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white"
                onClick={onSelectKeepFirstAll}
              >
                Select all duplicates
@@ -94,7 +100,7 @@ export function DuplicateFinderHeader({
            <>
              <span className="text-[11px] text-white/40">{selectedCount} marked for deletion</span>
              <button
-                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white disabled:opacity-40"
                onClick={onClearSelection}
                disabled={deleting}
              >
@@ -106,19 +112,22 @@ export function DuplicateFinderHeader({
                  onClick={() => setConfirmingDelete((value) => !value)}
                  disabled={deleting}
                >
-                  {deleting ? "Deleting…" : `Delete ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
+                  {deleting
+                    ? 'Deleting…'
+                    : `Delete ${selectedCount} file${selectedCount === 1 ? '' : 's'}`}
                </button>
                {confirmingDelete && !deleting ? (
                  <>
                    <div className="fixed inset-0 z-40" onClick={onConfirmDelete} />
-                    <div className="absolute right-0 top-full z-50 mt-2 w-72 rounded-xl border border-red-500/30 bg-gray-950/98 p-3 text-left shadow-2xl backdrop-blur">
+                    <div className="absolute top-full right-0 z-50 mt-2 w-72 rounded-xl border border-red-500/30 bg-gray-950/98 p-3 text-left shadow-2xl backdrop-blur">
                      <div className="mb-1 flex items-center gap-1.5 text-red-300">
                        <WarningIcon className="h-3.5 w-3.5 shrink-0" />
                        <p className="text-xs font-semibold">Delete from disk</p>
                      </div>
                      <p className="mb-2.5 text-[11px] leading-relaxed text-gray-400">
-                        Permanently delete {selectedCount} file{selectedCount === 1 ? "" : "s"} from your computer.
-                        This removes the actual file{selectedCount === 1 ? "" : "s"} from disk and cannot be undone.
+                        Permanently delete {selectedCount} file{selectedCount === 1 ? '' : 's'} from
+                        your computer. This removes the actual file{selectedCount === 1 ? '' : 's'}{' '}
+                        from disk and cannot be undone.
                      </p>
                      <div className="flex justify-end gap-1.5">
                        <button
@@ -141,11 +150,11 @@ export function DuplicateFinderHeader({
            </>
          ) : null}
          <button
-            className="rounded-lg border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+            className="light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white rounded-lg border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
            onClick={onScan}
            disabled={duplicateScanning}
          >
-            {duplicateScanning ? "Scanning…" : hasScanned ? "Rescan" : "Scan for duplicates"}
+            {duplicateScanning ? 'Scanning…' : hasScanned ? 'Rescan' : 'Scan for duplicates'}
          </button>
        </div>
      </div>
@@ -165,9 +174,7 @@ export function DuplicateFinderHeader({
      {duplicateScanWarning ? (
        <p className="mt-2 text-[11px] text-amber-300/70">{duplicateScanWarning}</p>
      ) : null}
-      {deleteResult ? (
-        <p className="mt-2 text-[11px] text-white/40">{deleteResult}</p>
-      ) : null}
+      {deleteResult ? <p className="mt-2 text-[11px] text-white/40">{deleteResult}</p> : null}
    </div>
-  );
+  )
 }
@@ -1,28 +1,28 @@
-import { DuplicateGroup, useGalleryStore } from "../../store";
-import { mediaSrc } from "../../lib/mediaSrc";
-import { Tooltip } from "../Tooltip";
-import { formatBytes } from "./format";
+import { DuplicateGroup, useGalleryStore } from '../../store'
+import { mediaSrc } from '../../lib/mediaSrc'
+import { Tooltip } from '../Tooltip'
+import { formatBytes } from './format'

 export function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
-  const selectedIds = useGalleryStore((state) => state.duplicateSelectedIds);
-  const toggleDuplicateSelected = useGalleryStore((state) => state.toggleDuplicateSelected);
-  const selectAllDuplicates = useGalleryStore((state) => state.selectAllDuplicates);
-  const groupSelectedCount = group.images.filter((image) => selectedIds.has(image.id)).length;
-  const noneSelected = groupSelectedCount === 0;
+  const selectedIds = useGalleryStore((state) => state.duplicateSelectedIds)
+  const toggleDuplicateSelected = useGalleryStore((state) => state.toggleDuplicateSelected)
+  const selectAllDuplicates = useGalleryStore((state) => state.selectAllDuplicates)
+  const groupSelectedCount = group.images.filter((image) => selectedIds.has(image.id)).length
+  const noneSelected = groupSelectedCount === 0

  const handleKeepFirst = () => {
-    const toDelete = group.images.slice(1).map((image) => image.id);
+    const toDelete = group.images.slice(1).map((image) => image.id)
    for (const image of group.images) {
-      if (selectedIds.has(image.id)) toggleDuplicateSelected(image.id);
+      if (selectedIds.has(image.id)) toggleDuplicateSelected(image.id)
    }
-    selectAllDuplicates(toDelete);
-  };
+    selectAllDuplicates(toDelete)
+  }

  const handleDeselectGroup = () => {
    for (const image of group.images) {
-      if (selectedIds.has(image.id)) toggleDuplicateSelected(image.id);
+      if (selectedIds.has(image.id)) toggleDuplicateSelected(image.id)
    }
-  };
+  }

  return (
    <div className="rounded-2xl border border-white/[0.07] bg-white/[0.02] p-4">
@@ -57,15 +57,15 @@ export function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {

      <div className="flex flex-wrap gap-3">
        {group.images.map((image) => {
-          const isSelected = selectedIds.has(image.id);
-          const src = mediaSrc(image.thumbnail_path);
+          const isSelected = selectedIds.has(image.id)
+          const src = mediaSrc(image.thumbnail_path)
          return (
            <Tooltip key={image.id} label={image.path} anchorToCursor>
              <button
                className={`media-dark-surface group relative overflow-hidden rounded-xl border transition-all ${
                  isSelected
-                    ? "border-red-400/50 ring-1 ring-red-400/30"
-                    : "border-white/8 hover:border-white/20"
+                    ? 'border-red-400/50 ring-1 ring-red-400/30'
+                    : 'border-white/8 hover:border-white/20'
                }`}
                style={{ width: 140, height: 105 }}
                onClick={() => toggleDuplicateSelected(image.id)}
@@ -77,19 +77,31 @@ export function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
                )}
                {isSelected ? (
                  <div className="absolute inset-0 flex items-center justify-center bg-red-950/60">
-                    <svg className="h-6 w-6 text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    <svg
+                      className="h-6 w-6 text-red-300"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      />
                    </svg>
                  </div>
                ) : null}
-                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent px-2 pb-1.5 pt-4 opacity-0 transition-opacity group-hover:opacity-100">
-                  <p className="truncate text-[9px] text-white/60">{image.path.split(/[\\/]/).slice(-2).join("/")}</p>
+                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent px-2 pt-4 pb-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+                  <p className="truncate text-[9px] text-white/60">
+                    {image.path.split(/[\\/]/).slice(-2).join('/')}
+                  </p>
                </div>
              </button>
            </Tooltip>
-          );
+          )
        })}
      </div>
    </div>
-  );
+  )
 }
@@ -1,29 +1,29 @@
-import { DuplicateScanProgress } from "../../store";
+import { DuplicateScanProgress } from '../../store'

 export function formatBytes(bytes: number): string {
-  if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
-  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`;
-  if (bytes >= 1024) return `${(bytes / 1024).toFixed(0)} KB`;
-  return `${bytes} B`;
+  if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`
+  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  return `${bytes} B`
 }

 export function formatRelativeTime(unixSecs: number): string {
-  const diff = Math.floor(Date.now() / 1000) - unixSecs;
-  if (diff < 60) return "just now";
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  return `${Math.floor(diff / 86400)}d ago`;
+  const diff = Math.floor(Date.now() / 1000) - unixSecs
+  if (diff < 60) return 'just now'
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+  return `${Math.floor(diff / 86400)}d ago`
 }

 export function duplicateProgressLabel(progress: DuplicateScanProgress | null): string | null {
-  if (!progress) return null;
-  if (progress.phase === "checking") return "Checking file sizes";
-  if (progress.phase === "hashing") return "Hashing duplicate candidates";
-  return "Confirming exact matches";
+  if (!progress) return null
+  if (progress.phase === 'checking') return 'Checking file sizes'
+  if (progress.phase === 'hashing') return 'Hashing duplicate candidates'
+  return 'Confirming exact matches'
 }

 export function duplicateProgressPercent(progress: DuplicateScanProgress | null): number {
  return progress && progress.total > 0
    ? Math.round((progress.processed / progress.total) * 100)
-    : 0;
+    : 0
 }