show caching progress

2 files changed, 35 insertions, 2 deletions

diff --git a/src/App.svelte b/src/App.svelte
index 7d99875..03cd5c1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -13,6 +13,21 @@
   let isDark = $state(false);
   let deleting = $state(false);
   let showDeleteConfirm = $state(false);
+  let isAutoCaching = $state(false);
+  let cachedCount = $state(0);
+  let totalCount = $state(0);
+
+  $effect(() => {
+    const unsubscribe = autoCacheService.subscribe(() => {
+      isAutoCaching = autoCacheService.isActive;
+      cachedCount = autoCacheService.cachedCount;
+      totalCount = autoCacheService.totalCount;
+    });
+    isAutoCaching = autoCacheService.isActive;
+    cachedCount = autoCacheService.cachedCount;
+    totalCount = autoCacheService.totalCount;
+    return unsubscribe;
+  });
 
   $effect(() => {
     document.documentElement.setAttribute('data-theme', isDark ? 'black' : 'cmyk');
@@ -118,8 +133,11 @@
 
   <!-- Right: Image list -->
 <div class="w-36 lg:w-40 shrink-0 border-l border-base-300 flex flex-col">
-    <div class="px-3 py-2 bg-base-100 border-b border-base-300 shrink-0">
-      <span class="text-sm font-semibold">Photos ({images.length})</span>
+    <div class="px-3 py-2 bg-base-100 border-b border-base-300 shrink-0 flex items-center overflow-hidden">
+      <span class="text-xs font-semibold whitespace-nowrap truncate">Photos {cachedCount}/{totalCount > 0 ? totalCount : images.length}</span>
+      {#if isAutoCaching}
+        <span class="loading loading-spinner loading-xs ml-1 shrink-0"></span>
+      {/if}
     </div>
     <div class="flex-1 min-h-0">
       <ImageList {images} selectedPath={selectedFile?.path} onSelect={selectImage} />
diff --git a/src/lib/cache/autoCacheService.ts b/src/lib/cache/autoCacheService.ts
index 04dc92b..e5a6584 100644
--- a/src/lib/cache/autoCacheService.ts
+++ b/src/lib/cache/autoCacheService.ts
@@ -76,6 +76,21 @@ class AutoCacheService {
     return this._progressMap.get(path);
   }
 
+  /** Whether the service is actively caching (running and not finished). */
+  get isActive(): boolean {
+    return this._running && (this._downloading || this._nextIndex < this._images.length);
+  }
+
+  /** Number of images confirmed cached so far. */
+  get cachedCount(): number {
+    return this._cachedPaths.size;
+  }
+
+  /** Total number of images in the work queue. */
+  get totalCount(): number {
+    return this._images.length;
+  }
+
   /** Check if a path has been confirmed fully cached. */
   isCached(path: string): boolean {
     return this._cachedPaths.has(path);