feat(web): global activity (#4796)

* feat: global activity

* fix: tests

* pr feedback

* use flexbox

* fix: deleted control actions

* fix: flex box

* fix: do not show activity tab by default

* feat: better grouping

* fix: set isShared default value to false

* fix: prevent re-rendering the asset grid

* fix: activity status above the scrollbar

* fix: prevent re-rendering the asset grid

* fix: prevent re-rendering the asset grid

* pr feedback

* pr feedback

* pr feedback

* styling and better thumbnail

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -33,18 +33,13 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import {
-    mdiHeartOutline,
-    mdiHeart,
-    mdiCommentOutline,
-    mdiChevronLeft,
-    mdiChevronRight,
-    mdiImageBrokenVariant,
-  } from '@mdi/js';
+  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
   import ActivityViewer from './activity-viewer.svelte';
+  import ActivityStatus from './activity-status.svelte';
+  import { updateNumberOfComments } from '$lib/stores/activity.store';
   import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import SlideshowBar from './slideshow-bar.svelte';
 
@@ -55,7 +50,7 @@
   $: isTrashEnabled = $featureFlags.trash;
   export let force = false;
   export let withStacked = false;
-  export let isShared = true;
+  export let isShared = false;
   export let user: UserResponseDto | null = null;
   export let album: AlbumResponseDto | null = null;
 
@@ -109,6 +104,16 @@
     }
   }
 
+  const handleAddComment = () => {
+    numberOfComments++;
+    updateNumberOfComments(1);
+  };
+
+  const handleRemoveComment = () => {
+    numberOfComments--;
+    updateNumberOfComments(-1);
+  };
+
   const handleFavorite = async () => {
     if (album) {
       try {
@@ -658,25 +663,13 @@
         {/if}
         {#if $slideshowState === SlideshowState.None && isShared}
           <div class="z-[9999] absolute bottom-0 right-0 mb-6 mr-6 justify-self-end">
-            <div
-              class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
-            >
-              <button on:click={handleFavorite}>
-                <div class="items-center justify-center">
-                  <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
-                </div>
-              </button>
-              <button on:click={handleOpenActivity}>
-                <div class="flex gap-2 items-center justify-center">
-                  <Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
-                  {#if numberOfComments}
-                    <div class="text-xl">{numberOfComments}</div>
-                  {:else if !isShowActivity && !$isShowDetail}
-                    <div class="text-lg">Say something</div>
-                  {/if}
-                </div>
-              </button>
-            </div>
+            <ActivityStatus
+              {isLiked}
+              {numberOfComments}
+              {isShowActivity}
+              on:favorite={handleFavorite}
+              on:openActivityTab={handleOpenActivity}
+            />
           </div>
         {/if}
       {/key}
@@ -746,7 +739,7 @@
     <div
       transition:fly={{ duration: 150 }}
       id="activity-panel"
-      class="z-[1002] row-start-1 row-span-5 w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg pl-4"
+      class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg pl-4"
       translate="yes"
     >
       <ActivityViewer
@@ -756,8 +749,8 @@
         albumId={album.id}
         assetId={asset.id}
         bind:reactions
-        on:addComment={() => numberOfComments++}
-        on:deleteComment={() => numberOfComments--}
+        on:addComment={handleAddComment}
+        on:deleteComment={handleRemoveComment}
         on:deleteLike={() => (isLiked = null)}
         on:close={() => (isShowActivity = false)}
       />