diff options
| -rw-r--r-- | src/App.svelte | 22 | ||||
| -rw-r--r-- | src/lib/cache/autoCacheService.ts | 15 |
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); |