From bc1d6a6acc799cbda1441d555582f120b99e6242 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Tue, 15 Sep 2026 15:11:42 +0200
Subject: [PATCH] refactor(web): simplify some styling (#31550)

---
 .../asset-viewer/AssetViewer.svelte           |  3 +-
 .../assets/thumbnail/ImageThumbnail.spec.ts   |  8 ++--
 .../assets/thumbnail/ImageThumbnail.svelte    |  5 +--
 .../assets/thumbnail/Thumbnail.svelte         | 43 ++++++-------------
 .../assets/thumbnail/VideoThumbnail.svelte    |  2 +-
 5 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
index f339442ec..b269fd104 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewer.svelte
@@ -650,9 +650,8 @@
             style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
           >
             <Thumbnail
-              imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
+              imageClass={stackedAsset.id === asset.id ? 'border-2 border-white' : 'brightness-70'}
               brokenAssetClass="text-xs"
-              dimmed={stackedAsset.id !== asset.id}
               asset={toTimelineAsset(stackedAsset)}
               onClick={() => {
                 cursor.current = stackedAsset;
diff --git a/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts b/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
index 11a0f078f..c947cdeeb 100644
--- a/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
@@ -61,7 +61,7 @@ describe('ImageThumbnail component', () => {
     expect(onComplete).toHaveBeenCalledWith(true);
   });
 
-  it('applies hidden styles when hidden is true', () => {
+  it('applies hidden classes when hidden is true', () => {
     const { baseElement } = render(ImageThumbnail, {
       url: '/test-thumbnail.jpg',
       altText: 'Test image',
@@ -69,9 +69,9 @@ describe('ImageThumbnail component', () => {
       hidden: true,
     });
     const img = baseElement.querySelector('img')!;
-    const style = img.getAttribute('style') ?? '';
-    expect(style).toContain('grayscale');
-    expect(style).toContain('opacity');
+    const className = img.getAttribute('class') ?? '';
+    expect(className).toContain('grayscale');
+    expect(className).toContain('opacity');
   });
 
   it('sets alt text after loading', async () => {
diff --git a/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
index 617669c91..9709176d3 100644
--- a/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
@@ -64,11 +64,10 @@
     border && 'border-3 border-immich-dark-primary/80 hover:border-immich-primary',
     'transition-shadow duration-150',
     highlighted && 'ring-4 ring-immich-primary dark:ring-immich-dark-primary',
+    hidden && 'grayscale-50 opacity-50',
   ]);
 
-  let style = $derived(
-    `width: ${widthStyle}; height: ${heightStyle ?? ''}; filter: ${hidden ? 'grayscale(50%)' : 'none'}; opacity: ${hidden ? '0.5' : '1'};`,
-  );
+  let style = $derived(`width: ${widthStyle}; height: ${heightStyle ?? ''};`);
 </script>
 
 {#if errored}
diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index 5764965bd..5726914b0 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -42,7 +42,6 @@
     showStackedIcon?: boolean;
     imageClass?: ClassValue;
     brokenAssetClass?: ClassValue;
-    dimmed?: boolean;
     albumUsers?: UserResponseDto[];
     onClick?: (asset: TimelineAsset) => void;
     onPreview?: (asset: TimelineAsset) => void;
@@ -70,7 +69,6 @@
     onMouseEvent = undefined,
     imageClass = '',
     brokenAssetClass = '',
-    dimmed = false,
   }: Props = $props();
 
   let usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
@@ -206,7 +204,12 @@
 </script>
 
 <div
-  class={['group flex overflow-hidden focus-visible:outline-none', backgroundColorClass, { 'rounded-xl': selected }]}
+  class={[
+    'group flex overflow-hidden focus-visible:outline-none',
+    backgroundColorClass,
+    { 'rounded-xl': selected },
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+  ]}
   style:width="{width}px"
   style:height="{height}px"
   onmouseenter={onMouseEnter}
@@ -232,21 +235,11 @@
   tabindex={0}
   role="link"
 >
-  <div
-    class={['group absolute inset-y-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
-    style:width="inherit"
-    style:height="inherit"
-  >
-    <div
-      class={[
-        'absolute size-full bg-transparent transition-transform select-none',
-        { 'scale-[0.85]': selected },
-        { 'rounded-xl': selected },
-      ]}
-    >
+  <div class="group absolute inset-y-0" style:width="inherit" style:height="inherit">
+    <div class={['absolute size-full bg-transparent transition-transform select-none', { 'scale-[0.85]': selected }]}>
       <ImageThumbnail
-        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
-        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', selected && 'rounded-2xl', brokenAssetClass]}
+        class={['absolute group-focus-visible:rounded-lg', imageClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', brokenAssetClass]}
         url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"
@@ -324,14 +317,6 @@
           ></div>
         {/if}
 
-        <!-- Dimmed support -->
-        {#if dimmed && !mouseOver}
-          <div
-            id="a"
-            class={['absolute z-2 size-full bg-gray-700/40 group-focus-visible:rounded-lg', { 'rounded-xl': selected }]}
-          ></div>
-        {/if}
-
         <!-- Favorite asset star -->
         {#if !authManager.isSharedLink && asset.isFavorite}
           <div class="absolute inset-s-2 bottom-2 z-2">
@@ -373,14 +358,12 @@
         {#if asset.stack && showStackedIcon}
           <div
             class={[
-              'absolute z-2 flex place-items-center gap-1 text-xs font-medium text-white',
+              'absolute z-2 flex place-items-center gap-1 pe-2 pt-2 text-xs font-medium text-white',
               asset.isImage && !asset.livePhotoVideoId ? 'inset-e-0 top-0' : 'inset-e-1 top-7',
             ]}
           >
-            <span class="flex place-items-center gap-1 pe-2 pt-2">
-              <p>{asset.stack.assetCount.toLocaleString($locale)}</p>
-              <Icon icon={mdiCameraBurst} size="24" />
-            </span>
+            <p>{asset.stack.assetCount.toLocaleString($locale)}</p>
+            <Icon icon={mdiCameraBurst} size="24" />
           </div>
         {/if}
       </div>
diff --git a/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
index 2875d96a9..63eedaf9c 100644
--- a/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
@@ -94,7 +94,7 @@
   class="@container absolute inset-x-0 top-0 flex place-items-center justify-end gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
 >
   {#if showTime}
-    <span class="hidden pt-2 @min-[100px]:inline">
+    <span class="hidden pt-2 tabular-nums @min-[100px]:inline">
       {#if remainingSeconds < 60}
         {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
       {:else if remainingSeconds < 3600}