From 391279ebbf632896e04c214a627ebc53ca0a16ae Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Fri, 10 Apr 2026 01:17:28 +0900
Subject: styling cleanup

---
 src/App.svelte                            | 9 +++++++--
 src/lib/components/CachedThumbnail.svelte | 4 ++--
 src/lib/components/ImagePreview.svelte    | 4 ++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index d224306..7a634cc 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -218,9 +218,14 @@
 
   <!-- 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 flex items-center overflow-hidden">
+    <div class="px-3 py-2 bg-base-100 border-b border-base-300 shrink-0 flex items-center gap-1.5 overflow-hidden">
       <span class="text-xs font-semibold whitespace-nowrap truncate">Photos {cachedCount}/{totalCount > 0 ? totalCount : images.length}</span>
-      <span class="ml-1.5 shrink-0 status status-secondary" class:status-ping={isAutoCaching}></span>
+      <span class="relative shrink-0 inline-flex">
+        {#if isAutoCaching}
+          <span class="status status-secondary animate-ping absolute"></span>
+        {/if}
+        <span class="status {isAutoCaching ? 'status-secondary' : 'status-neutral'}"></span>
+      </span>
     </div>
     <div class="flex-1 min-h-0">
       <ImageList {images} selectedPath={selectedFile?.path} onSelect={selectImage} {newImagePaths} onAnimationDone={handleAnimationDone} />
diff --git a/src/lib/components/CachedThumbnail.svelte b/src/lib/components/CachedThumbnail.svelte
index dada22a..3ae7864 100644
--- a/src/lib/components/CachedThumbnail.svelte
+++ b/src/lib/components/CachedThumbnail.svelte
@@ -81,8 +81,8 @@
     />
     {#if cachePercent !== undefined && cachePercent < 100}
       <div class="absolute inset-0 flex items-center justify-center">
-        <div class="radial-progress text-primary bg-base-300/60 border-2 border-base-300/60" style:--value={cachePercent} style:--size="2.5rem" style:--thickness="3px" role="progressbar">
-          <span class="text-[0.6rem] font-bold text-primary-content drop-shadow">{cachePercent}%</span>
+        <div class="radial-progress text-primary bg-base-300/70 border-2 border-base-300/40" style:--value={cachePercent} style:--size="2.5rem" style:--thickness="3px" role="progressbar" aria-valuenow={cachePercent}>
+          <span class="text-[0.6rem] font-bold text-base-content drop-shadow">{cachePercent}%</span>
         </div>
       </div>
     {/if}
diff --git a/src/lib/components/ImagePreview.svelte b/src/lib/components/ImagePreview.svelte
index 335e231..22b40da 100644
--- a/src/lib/components/ImagePreview.svelte
+++ b/src/lib/components/ImagePreview.svelte
@@ -453,8 +453,8 @@
     </div>
   {:else}
     {#if downloading && progress < 1}
-      <div class="absolute inset-0 z-10 flex items-center justify-center bg-black/50">
-        <div class="bg-base-100 rounded-box p-6 shadow-xl max-w-xs w-full mx-4">
+      <div class="absolute inset-0 z-10 flex items-center justify-center bg-base-300/80 backdrop-blur-sm">
+        <div class="bg-base-100 rounded-box p-4 shadow-xl max-w-xs w-full mx-4">
           <div class="flex items-center gap-2">
             <progress class="progress progress-primary flex-1" value={progressPercent} max="100"></progress>
             <span class="text-xs font-mono text-base-content/70 w-10 text-right">{progressPercent}%</span>
-- 
cgit v1.2.3