feat(download): Add path flatten options for ZIP download

PresentKim · PresentKim · commit 06ce3ac9017a · 2025-12-10T05:04:20.000+09:00
diff --git a/src/components/FilterToolbar.tsx b/src/components/FilterToolbar.tsx
@@ -1,9 +1,12 @@
-import {memo} from 'react'
+import {memo, useState} from 'react'
 import {Button} from '@/components/ui/button'
-import {Download as DownloadIcon, Loader as LoaderIcon} from 'lucide-react'
+import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
+import {Download as DownloadIcon, Loader as LoaderIcon, ChevronDown} from 'lucide-react'
 import {useRepoStore} from '@/stores/repoStore'
 import {useImageCount} from '@/hooks/features/filter/useImageCount'
 import {useImageDownload} from '@/hooks/features/download/useImageDownload'
+import type {FlattenMode} from '@/utils'
+import {cn} from '@/utils'
 
 interface ImageCountBadgeProps {
   filteredCount: number
@@ -29,52 +32,109 @@ const ImageCountBadge = memo(
   },
 )
 
+const flattenModeLabels: Record<FlattenMode, string> = {
+  original: 'Original paths',
+  'last-level': 'Last level only',
+  flat: 'Flat (filename only)',
+}
+
 const DownloadButton = memo(function DownloadButton() {
   const repo = useRepoStore(state => state.repo)
   const filteredImageFiles = useRepoStore(state => state.filteredImageFiles)
   const {filteredCount} = useImageCount()
+  const [flattenMode, setFlattenMode] = useState<FlattenMode>('original')
+  const [popoverOpen, setPopoverOpen] = useState(false)
 
   const {isDownloading, downloadProgress, handleDownload} = useImageDownload({
     repo,
     imagePaths: filteredImageFiles || [],
+    flattenMode,
   })
 
+  const handleDownloadClick = () => {
+    setPopoverOpen(false)
+    handleDownload()
+  }
+
   return (
-    <Button
-      aria-label="Download all filtered images as ZIP"
-      disabled={isDownloading || !filteredCount}
-      onClick={handleDownload}
-      size="sm"
-      variant="outline"
-      className="text-xs font-semibold flex flex-col items-center gap-0.5 min-w-[190px]">
-      {isDownloading ? (
-        <>
-          <div className="flex items-center gap-1">
-            <LoaderIcon className="size-4 animate-spin" />
-            <span>
-              {downloadProgress !== null
-                ? `DOWNLOADING ${downloadProgress}%`
-                : 'DOWNLOADING...'}
-            </span>
-          </div>
-          {downloadProgress !== null && (
-            <div
-              className="mt-0.5 h-1 w-full rounded-full bg-muted overflow-hidden"
-              aria-hidden="true">
-              <div
-                className="h-full bg-accent transition-[width] duration-150 ease-out"
-                style={{width: `${downloadProgress}%`}}
-              />
+    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+      <div className="flex gap-1">
+        <Button
+          aria-label="Download all filtered images as ZIP"
+          disabled={isDownloading || !filteredCount}
+          onClick={handleDownloadClick}
+          size="sm"
+          variant="outline"
+          className="text-xs font-semibold flex flex-col items-center gap-0.5 min-w-[160px]">
+          {isDownloading ? (
+            <>
+              <div className="flex items-center gap-1">
+                <LoaderIcon className="size-4 animate-spin" />
+                <span>
+                  {downloadProgress !== null
+                    ? `DOWNLOADING ${downloadProgress}%`
+                    : 'DOWNLOADING...'}
+                </span>
+              </div>
+              {downloadProgress !== null && (
+                <div
+                  className="mt-0.5 h-1 w-full rounded-full bg-muted overflow-hidden"
+                  aria-hidden="true">
+                  <div
+                    className="h-full bg-accent transition-[width] duration-150 ease-out"
+                    style={{width: `${downloadProgress}%`}}
+                  />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center gap-1">
+              <DownloadIcon className="size-4" />
+              <span>DOWNLOAD FILTERED</span>
             </div>
           )}
-        </>
-      ) : (
-        <div className="flex items-center gap-1">
-          <DownloadIcon className="size-4" />
-          <span>DOWNLOAD FILTERED</span>
+        </Button>
+        {!isDownloading && (
+          <PopoverTrigger asChild>
+            <Button
+              aria-label="Download options"
+              size="sm"
+              variant="outline"
+              disabled={!filteredCount}
+              className="px-2">
+              <ChevronDown className="size-4" />
+            </Button>
+          </PopoverTrigger>
+        )}
+      </div>
+      <PopoverContent side="bottom" align="end" className="w-64">
+        <div className="space-y-2">
+          <p className="text-xs font-semibold text-foreground">Path structure</p>
+          <div className="space-y-1">
+            {(['original', 'last-level', 'flat'] as FlattenMode[]).map(mode => (
+              <button
+                key={mode}
+                type="button"
+                onClick={() => {
+                  setFlattenMode(mode)
+                  setPopoverOpen(false)
+                }}
+                className={cn(
+                  'w-full text-left px-2 py-1.5 rounded text-xs transition-colors',
+                  flattenMode === mode
+                    ? 'bg-accent text-accent-foreground'
+                    : 'hover:bg-muted text-muted-foreground',
+                )}>
+                {flattenModeLabels[mode]}
+              </button>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground pt-1 border-t">
+            Duplicate names will be renamed with -1, -2, etc.
+          </p>
         </div>
-      )}
-    </Button>
+      </PopoverContent>
+    </Popover>
   )
 })
 
diff --git a/src/hooks/features/download/useImageDownload.ts b/src/hooks/features/download/useImageDownload.ts
@@ -1,17 +1,22 @@
 import {useCallback, useState} from 'react'
 import {downloadImagesAsZip} from '@/utils'
-import type {GithubRepo} from '@/utils'
+import type {GithubRepo, FlattenMode} from '@/utils'
 
 interface UseImageDownloadProps {
   repo: GithubRepo
   imagePaths: string[]
+  flattenMode?: FlattenMode
 }
 
 /**
  * Hook for downloading images as ZIP
  * Handles download progress and state management
  */
-export function useImageDownload({repo, imagePaths}: UseImageDownloadProps) {
+export function useImageDownload({
+  repo,
+  imagePaths,
+  flattenMode = 'original',
+}: UseImageDownloadProps) {
   const [downloadProgress, setDownloadProgress] = useState<number | null>(null)
   const [isDownloading, setIsDownloading] = useState(false)
 
@@ -21,10 +26,15 @@ export function useImageDownload({repo, imagePaths}: UseImageDownloadProps) {
     setIsDownloading(true)
     setDownloadProgress(0)
     try {
-      await downloadImagesAsZip(repo, imagePaths, (completed, total) => {
-        const percent = Math.round((completed / total) * 100)
-        setDownloadProgress(percent)
-      })
+      await downloadImagesAsZip(
+        repo,
+        imagePaths,
+        (completed, total) => {
+          const percent = Math.round((completed / total) * 100)
+          setDownloadProgress(percent)
+        },
+        flattenMode,
+      )
       setDownloadProgress(100)
       // Briefly show 100%, then reset
       setTimeout(() => {
@@ -36,7 +46,7 @@ export function useImageDownload({repo, imagePaths}: UseImageDownloadProps) {
       setDownloadProgress(null)
       setIsDownloading(false)
     }
-  }, [repo, imagePaths])
+  }, [repo, imagePaths, flattenMode])
 
   return {
     isDownloading,
diff --git a/src/utils/downloadImagesAsZip.ts b/src/utils/downloadImagesAsZip.ts
@@ -1,34 +1,36 @@
 import {GithubRepo, createRawImageUrl} from './github'
 import type JSZip from 'jszip'
+import {type FlattenMode, resolveDuplicatePaths} from './pathFlatten'
 
 // Constants
 const LARGE_DOWNLOAD_THRESHOLD = 2000
 const BATCH_SIZE = 50
 const MAX_CONCURRENT_DOWNLOADS = 4 // Limit concurrent downloads to reduce memory usage
 
 /**
- * Download a single image and add it to the zip
+ * Download a single image and add it to the zip with a specific path
  */
 async function downloadImageToZip(
   zip: JSZip,
   repo: GithubRepo,
-  imagePath: string,
+  originalPath: string,
+  zipPath: string,
 ): Promise<void> {
   try {
-    const url = createRawImageUrl(repo, imagePath)
+    const url = createRawImageUrl(repo, originalPath)
     const response = await fetch(url)
 
     if (!response.ok) {
       throw new Error(
-        `Failed to fetch ${imagePath}: ${response.status} ${response.statusText}`,
+        `Failed to fetch ${originalPath}: ${response.status} ${response.statusText}`,
       )
     }
 
     const blob = await response.blob()
-    zip.file(imagePath, blob)
+    zip.file(zipPath, blob)
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : String(error)
-    console.error(`Failed to download ${imagePath}:`, errorMessage)
+    console.error(`Failed to download ${originalPath}:`, errorMessage)
     throw error
   }
 }
@@ -41,17 +43,19 @@ async function processWithConcurrencyLimit(
   zip: JSZip,
   repo: GithubRepo,
   imagePaths: string[],
+  pathMap: Map<string, string>,
   onProgress?: (completed: number, total: number) => void,
 ): Promise<void> {
   let completed = 0
   const total = imagePaths.length
   const queue: Array<() => Promise<void>> = []
 
   // Create a queue of download tasks
-  for (const imagePath of imagePaths) {
+  for (const originalPath of imagePaths) {
+    const zipPath = pathMap.get(originalPath) || originalPath
     queue.push(async () => {
       try {
-        await downloadImageToZip(zip, repo, imagePath)
+        await downloadImageToZip(zip, repo, originalPath, zipPath)
       } catch {
         // Error already logged in downloadImageToZip
         // Continue with other images
@@ -93,19 +97,15 @@ async function processBatch(
   zip: JSZip,
   repo: GithubRepo,
   batch: string[],
+  pathMap: Map<string, string>,
   currentCompleted: number,
   total: number,
   onProgress?: (completed: number, total: number) => void,
 ): Promise<number> {
-  await processWithConcurrencyLimit(
-    zip,
-    repo,
-    batch,
-    (completed) => {
-      // Adjust progress to account for current batch offset
-      onProgress?.(currentCompleted + completed, total)
-    },
-  )
+  await processWithConcurrencyLimit(zip, repo, batch, pathMap, completed => {
+    // Adjust progress to account for current batch offset
+    onProgress?.(currentCompleted + completed, total)
+  })
 
   return currentCompleted + batch.length
 }
@@ -118,6 +118,7 @@ export const downloadImagesAsZip = async (
   repo: GithubRepo,
   imagePaths: string[],
   onProgress?: (completed: number, total: number) => void,
+  flattenMode: FlattenMode = 'original',
 ): Promise<void> => {
   if (!imagePaths.length) {
     throw new Error('No images to download')
@@ -137,6 +138,9 @@ export const downloadImagesAsZip = async (
     }
   }
 
+  // Resolve path transformations and duplicates
+  const pathMap = resolveDuplicatePaths(imagePaths, flattenMode)
+
   // Dynamic import - only load when download is triggered
   let JSZipClass: typeof JSZip
   let saveAs: typeof import('file-saver').saveAs
@@ -168,6 +172,7 @@ export const downloadImagesAsZip = async (
         zip,
         repo,
         batch,
+        pathMap,
         completed,
         total,
         onProgress,
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -21,3 +21,5 @@ export {
   preloadImage,
 } from './imageCache'
 export {parseImagePath as parseImagePathForCell} from './features/imageCell'
+export {resolveDuplicatePaths, transformPath} from './pathFlatten'
+export type {FlattenMode} from './pathFlatten'
diff --git a/src/utils/pathFlatten.ts b/src/utils/pathFlatten.ts
