From 1b3d36d1e0cc6dd94acb7a1e5babad049070af25 Mon Sep 17 00:00:00 2001
From: Mees Frensel <meesfrensel@gmail.com>
Date: Mon, 16 Mar 2026 17:04:13 +0100
Subject: [PATCH] chore(web): refactor activity status

---
 .../asset-viewer/activity-status.svelte       | 47 ++++++++++++-------
 .../[[assetId=id]]/+page.svelte               |  4 +-
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/activity-status.svelte
index 6bd90fc5f0..8d978b4e99 100644
--- a/web/src/lib/components/asset-viewer/activity-status.svelte
+++ b/web/src/lib/components/asset-viewer/activity-status.svelte
@@ -2,7 +2,7 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import type { ActivityResponseDto } from '@immich/sdk';
-  import { Icon } from '@immich/ui';
+  import { Button } from '@immich/ui';
   import { mdiCommentOutline, mdiThumbUp, mdiThumbUpOutline } from '@mdi/js';
 
   interface Props {
@@ -16,21 +16,32 @@
   let { isLiked, numberOfComments, numberOfLikes, disabled, onFavorite }: Props = $props();
 </script>
 
-<div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60">
-  <button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}>
-    <div class="flex gap-2 items-center justify-center">
-      <Icon icon={isLiked ? mdiThumbUp : mdiThumbUpOutline} size="24" class={isLiked ? 'text-primary' : 'text-fg'} />
-      {#if numberOfLikes}
-        <div class="text-l">{numberOfLikes.toLocaleString($locale)}</div>
-      {/if}
-    </div>
-  </button>
-  <button type="button" onclick={() => assetViewerManager.toggleActivityPanel()}>
-    <div class="flex gap-2 items-center justify-center">
-      <Icon icon={mdiCommentOutline} class="scale-x-[-1]" size="24" />
-      {#if numberOfComments}
-        <div class="text-l">{numberOfComments.toLocaleString($locale)}</div>
-      {/if}
-    </div>
-  </button>
+<div class="flex p-1 items-center justify-center rounded-full gap-1 bg-subtle/70 border">
+  <Button
+    {disabled}
+    onclick={onFavorite}
+    leadingIcon={isLiked ? mdiThumbUp : mdiThumbUpOutline}
+    shape="round"
+    size="large"
+    variant="ghost"
+    color={isLiked ? 'primary' : 'secondary'}
+    class="p-3"
+  >
+    {#if numberOfLikes}
+      {numberOfLikes.toLocaleString($locale)}
+    {/if}
+  </Button>
+  <Button
+    onclick={() => assetViewerManager.toggleActivityPanel()}
+    leadingIcon={mdiCommentOutline}
+    shape="round"
+    size="large"
+    variant="ghost"
+    color="secondary"
+    class="p-3"
+  >
+    {#if numberOfComments}
+      {numberOfComments.toLocaleString($locale)}
+    {/if}
+  </Button>
 </div>
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index e354d2c1fc..14f2e6ff2b 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -437,8 +437,8 @@
         {/if}
       </Timeline>
 
-      {#if showActivityStatus && !activityManager.isLoading}
-        <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">
+      {#if showActivityStatus}
+        <div class="absolute z-2 bottom-0 end-0 mb-6 me-12">
           <ActivityStatus
             disabled={!album.isActivityEnabled}
             isLiked={activityManager.isLiked}