From 78640e80ac7b2b8262a1acd1baeab9255d48d985 Mon Sep 17 00:00:00 2001
From: Pranav-8bit <tpranav15@gmail.com>
Date: Thu, 26 Sep 2024 00:35:50 +0530
Subject: [PATCH 1/5] bug fix

---
 .../album-page/album-options.svelte           | 81 +++++++++++++++++--
 .../[[assetId=id]]/+page.svelte               |  1 +
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index ebcf835649070..27d99018023c3 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { updateAlbumInfo, type AlbumResponseDto, type UserResponseDto, AssetOrder } from '@immich/sdk';
-  import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus } from '@mdi/js';
+  import {
+    getMyUser,  // Reintroduce the API to fetch the current user
+    updateAlbumInfo,
+    removeUserFromAlbum,
+    type AlbumResponseDto,
+    type UserResponseDto,
+    AssetOrder
+  } from '@immich/sdk';
+  import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus, mdiDotsVertical } from '@mdi/js';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
@@ -10,14 +17,22 @@
   import { handleError } from '$lib/utils/handle-error';
   import { findKey } from 'lodash-es';
   import { t } from 'svelte-i18n';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { onMount } from 'svelte';  // Import onMount to fetch the user when component mounts
 
   export let album: AlbumResponseDto;
   export let order: AssetOrder | undefined;
-  export let user: UserResponseDto;
   export let onChangeOrder: (order: AssetOrder) => void;
   export let onClose: () => void;
   export let onToggleEnabledActivity: () => void;
   export let onShowSelectSharedUser: () => void;
+  export let onRemove: (userId: string) => void;
+
+  let currentUser: UserResponseDto | null = null;  // Store the current user fetched from the API
+  let selectedRemoveUser: UserResponseDto | null = null;  // Keep track of the user selected for removal
 
   const options: Record<AssetOrder, RenderedOption> = {
     [AssetOrder.Asc]: { icon: mdiArrowUpThin, title: $t('oldest_first') },
@@ -26,6 +41,15 @@
 
   $: selectedOption = order ? options[order] : options[AssetOrder.Desc];
 
+  // Fetch the current user when the component mounts
+  onMount(async () => {
+    try {
+      currentUser = await getMyUser();
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_refresh_user'));
+    }
+  });
+
   const handleToggle = async (returnedOption: RenderedOption) => {
     if (selectedOption === returnedOption) {
       return;
@@ -45,6 +69,29 @@
       handleError(error, $t('errors.unable_to_save_album'));
     }
   };
+
+  const handleMenuRemove = (user: UserResponseDto) => {
+    selectedRemoveUser = user;
+  };
+
+  const handleRemoveUser = async () => {
+    if (!selectedRemoveUser) {
+      return;
+    }
+console.log(selectedRemoveUser,"selectedRemoveUser");
+    try {
+      await removeUserFromAlbum({ id: album.id, userId: selectedRemoveUser.id });
+      onRemove(selectedRemoveUser.id);
+      notificationController.show({
+        type: NotificationType.Info,
+        message: $t('album_user_removed', { values: { user: selectedRemoveUser.name } }),
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_remove_album_users'));
+    } finally {
+      selectedRemoveUser = null;
+    }
+  };
 </script>
 
 <FullScreenModal title={$t('options')} {onClose}>
@@ -77,22 +124,40 @@
           </div>
           <div>{$t('invite_people')}</div>
         </button>
-        <div class="flex items-center gap-2 py-2 mt-2">
-          <div>
-            <UserAvatar {user} size="md" />
+       {#if currentUser}
+       <div class="flex items-center gap-2 py-2 mt-2">
+        <div>
+           <UserAvatar user={currentUser} size="md" />
           </div>
-          <div class="w-full">{user.name}</div>
+          <div class="w-full">{currentUser.name}</div>
           <div>{$t('owner')}</div>
-        </div>
+      </div>
+      {/if}
+
         {#each album.albumUsers as { user } (user.id)}
           <div class="flex items-center gap-2 py-2">
             <div>
               <UserAvatar {user} size="md" />
             </div>
             <div class="w-full">{user.name}</div>
+            {#if user.id !== album.ownerId} <!-- Allow deletion for non-owners -->
+              <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
+                <MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
+              </ButtonContextMenu>
+            {/if}
           </div>
         {/each}
       </div>
     </div>
   </div>
 </FullScreenModal>
+
+{#if selectedRemoveUser}
+  <ConfirmDialog
+    title={$t('album_remove_user')}
+    prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
+    confirmText={$t('remove_user')}
+    onConfirm={handleRemoveUser}
+    onCancel={() => (selectedRemoveUser = null)}
+  />
+{/if}
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 cbdb38192e082..4b362ea7a1ac0 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
@@ -737,6 +737,7 @@
       albumOrder = order;
       await setModeToView();
     }}
+        onRemove={handleRemoveUser}
     onClose={() => (viewMode = ViewMode.VIEW)}
     onToggleEnabledActivity={handleToggleEnableActivity}
     onShowSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}

From 07830f9802c7883aaaf5e401802b1e012eefdc2f Mon Sep 17 00:00:00 2001
From: Pranav-8bit <tpranav15@gmail.com>
Date: Sat, 28 Sep 2024 13:06:46 +0530
Subject: [PATCH 2/5] added few more type hint

---
 .../album-page/album-options.svelte           | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index 27d99018023c3..1e55c84f4e11f 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import {
-    getMyUser,  // Reintroduce the API to fetch the current user
+    getMyUser,
     updateAlbumInfo,
     removeUserFromAlbum,
     type AlbumResponseDto,
@@ -21,7 +21,7 @@
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { onMount } from 'svelte';  // Import onMount to fetch the user when component mounts
+  import { onMount } from 'svelte';
 
   export let album: AlbumResponseDto;
   export let order: AssetOrder | undefined;
@@ -31,8 +31,8 @@
   export let onShowSelectSharedUser: () => void;
   export let onRemove: (userId: string) => void;
 
-  let currentUser: UserResponseDto | null = null;  // Store the current user fetched from the API
-  let selectedRemoveUser: UserResponseDto | null = null;  // Keep track of the user selected for removal
+  let currentUser: UserResponseDto | null = null;
+  let selectedRemoveUser: UserResponseDto | null = null;
 
   const options: Record<AssetOrder, RenderedOption> = {
     [AssetOrder.Asc]: { icon: mdiArrowUpThin, title: $t('oldest_first') },
@@ -42,7 +42,7 @@
   $: selectedOption = order ? options[order] : options[AssetOrder.Desc];
 
   // Fetch the current user when the component mounts
-  onMount(async () => {
+  onMount(async (): Promise<void> => {
     try {
       currentUser = await getMyUser();
     } catch (error) {
@@ -50,11 +50,11 @@
     }
   });
 
-  const handleToggle = async (returnedOption: RenderedOption) => {
+  const handleToggle = async (returnedOption: RenderedOption): Promise<void> => {
     if (selectedOption === returnedOption) {
       return;
     }
-    let order = AssetOrder.Desc;
+    let order: AssetOrder = AssetOrder.Desc;
     order = findKey(options, (option) => option === returnedOption) as AssetOrder;
 
     try {
@@ -70,15 +70,14 @@
     }
   };
 
-  const handleMenuRemove = (user: UserResponseDto) => {
+  const handleMenuRemove = (user: UserResponseDto): void => {
     selectedRemoveUser = user;
   };
 
-  const handleRemoveUser = async () => {
+  const handleRemoveUser = async (): Promise<void> => {
     if (!selectedRemoveUser) {
       return;
     }
-console.log(selectedRemoveUser,"selectedRemoveUser");
     try {
       await removeUserFromAlbum({ id: album.id, userId: selectedRemoveUser.id });
       onRemove(selectedRemoveUser.id);
@@ -124,15 +123,15 @@ console.log(selectedRemoveUser,"selectedRemoveUser");
           </div>
           <div>{$t('invite_people')}</div>
         </button>
-       {#if currentUser}
-       <div class="flex items-center gap-2 py-2 mt-2">
-        <div>
-           <UserAvatar user={currentUser} size="md" />
+        {#if currentUser}
+        <div class="flex items-center gap-2 py-2 mt-2">
+          <div>
+            <UserAvatar user={currentUser} size="md" />
           </div>
           <div class="w-full">{currentUser.name}</div>
           <div>{$t('owner')}</div>
-      </div>
-      {/if}
+        </div>
+        {/if}
 
         {#each album.albumUsers as { user } (user.id)}
           <div class="flex items-center gap-2 py-2">

From 694801fbff93c4f8d2a3a6bd92944a5a205defe2 Mon Sep 17 00:00:00 2001
From: Pranav-8bit <tpranav15@gmail.com>
Date: Tue, 1 Oct 2024 23:47:27 +0530
Subject: [PATCH 3/5] onMount removed, removed current user to user

---
 .../album-page/album-options.svelte           | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index 1e55c84f4e11f..96d17bb39a096 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import {
-    getMyUser,
     updateAlbumInfo,
     removeUserFromAlbum,
     type AlbumResponseDto,
@@ -21,17 +20,16 @@
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { onMount } from 'svelte';
 
   export let album: AlbumResponseDto;
   export let order: AssetOrder | undefined;
+  export let user: UserResponseDto; // Declare user as a prop
   export let onChangeOrder: (order: AssetOrder) => void;
   export let onClose: () => void;
   export let onToggleEnabledActivity: () => void;
   export let onShowSelectSharedUser: () => void;
   export let onRemove: (userId: string) => void;
 
-  let currentUser: UserResponseDto | null = null;
   let selectedRemoveUser: UserResponseDto | null = null;
 
   const options: Record<AssetOrder, RenderedOption> = {
@@ -41,15 +39,6 @@
 
   $: selectedOption = order ? options[order] : options[AssetOrder.Desc];
 
-  // Fetch the current user when the component mounts
-  onMount(async (): Promise<void> => {
-    try {
-      currentUser = await getMyUser();
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_refresh_user'));
-    }
-  });
-
   const handleToggle = async (returnedOption: RenderedOption): Promise<void> => {
     if (selectedOption === returnedOption) {
       return;
@@ -93,6 +82,7 @@
   };
 </script>
 
+{#if !selectedRemoveUser}
 <FullScreenModal title={$t('options')} {onClose}>
   <div class="items-center justify-center">
     <div class="py-2">
@@ -123,12 +113,13 @@
           </div>
           <div>{$t('invite_people')}</div>
         </button>
-        {#if currentUser}
+        
+        {#if user} <!-- Use user prop instead of $user -->
         <div class="flex items-center gap-2 py-2 mt-2">
           <div>
-            <UserAvatar user={currentUser} size="md" />
+            <UserAvatar user={user} size="md" />
           </div>
-          <div class="w-full">{currentUser.name}</div>
+          <div class="w-full">{user.name}</div>
           <div>{$t('owner')}</div>
         </div>
         {/if}
@@ -150,6 +141,7 @@
     </div>
   </div>
 </FullScreenModal>
+{/if}
 
 {#if selectedRemoveUser}
   <ConfirmDialog

From 91e2555a08f28d0aec9cb57e038ace0cd829f5ff Mon Sep 17 00:00:00 2001
From: Pranav-8bit <tpranav15@gmail.com>
Date: Wed, 2 Oct 2024 23:04:01 +0530
Subject: [PATCH 4/5] user check removed and conflict in view mode resolved
 between option and share info modal

---
 .../album-page/album-options.svelte           |  2 --
 .../[[assetId=id]]/+page.svelte               | 32 +++++++++++--------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index 96d17bb39a096..dd2d601338e75 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -114,7 +114,6 @@
           <div>{$t('invite_people')}</div>
         </button>
         
-        {#if user} <!-- Use user prop instead of $user -->
         <div class="flex items-center gap-2 py-2 mt-2">
           <div>
             <UserAvatar user={user} size="md" />
@@ -122,7 +121,6 @@
           <div class="w-full">{user.name}</div>
           <div>{$t('owner')}</div>
         </div>
-        {/if}
 
         {#each album.albumUsers as { user } (user.id)}
           <div class="flex items-center gap-2 py-2">
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 99794bd3711c8..b2b628be1854b 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
@@ -345,19 +345,23 @@
     }
   };
 
-  const handleRemoveUser = async (userId: string) => {
-    if (userId == 'me' || userId === $user.id) {
-      await goto(backUrl);
-      return;
-    }
+  const handleRemoveUser = async (userId: string, nextViewMode: ViewMode) => {
+  if (userId == 'me' || userId === $user.id) {
+    await goto(backUrl);
+    return;
+  }
+
+  try {
+    await refreshAlbum();
+    
+    // Dynamically set the view mode based on the passed argument
+    viewMode = album.albumUsers.length > 0 ? nextViewMode : ViewMode.VIEW;
+
+  } catch (error) {
+    handleError(error, $t('errors.error_deleting_shared_user'));
+  }
+};
 
-    try {
-      await refreshAlbum();
-      viewMode = album.albumUsers.length > 0 ? ViewMode.VIEW_USERS : ViewMode.VIEW;
-    } catch (error) {
-      handleError(error, $t('errors.error_deleting_shared_user'));
-    }
-  };
 
   const handleDownloadAlbum = async () => {
     await downloadAlbum(album);
@@ -730,7 +734,7 @@
   <ShareInfoModal
     onClose={() => (viewMode = ViewMode.VIEW)}
     {album}
-    onRemove={handleRemoveUser}
+    onRemove={(userId) => handleRemoveUser(userId, ViewMode.VIEW_USERS)}  
     onRefreshAlbum={refreshAlbum}
   />
 {/if}
@@ -744,7 +748,7 @@
       albumOrder = order;
       await setModeToView();
     }}
-        onRemove={handleRemoveUser}
+    onRemove={(userId)=>handleRemoveUser(userId, ViewMode.OPTIONS)}
     onClose={() => (viewMode = ViewMode.VIEW)}
     onToggleEnabledActivity={handleToggleEnableActivity}
     onShowSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}

From 3d524d21404028486c9fe240ee1829c87b01ee69 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 10 Oct 2024 15:46:09 +0700
Subject: [PATCH 5/5] format fix

---
 .../album-page/album-options.svelte           | 95 ++++++++++---------
 .../[[assetId=id]]/+page.svelte               | 30 +++---
 2 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index dd2d601338e75..53fd355c4b0db 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -5,7 +5,7 @@
     removeUserFromAlbum,
     type AlbumResponseDto,
     type UserResponseDto,
-    AssetOrder
+    AssetOrder,
   } from '@immich/sdk';
   import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus, mdiDotsVertical } from '@mdi/js';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -83,62 +83,63 @@
 </script>
 
 {#if !selectedRemoveUser}
-<FullScreenModal title={$t('options')} {onClose}>
-  <div class="items-center justify-center">
-    <div class="py-2">
-      <h2 class="text-gray text-sm mb-2">{$t('settings').toUpperCase()}</h2>
-      <div class="grid p-2 gap-y-2">
-        {#if order}
-          <SettingDropdown
-            title={$t('display_order')}
-            options={Object.values(options)}
-            selectedOption={options[order]}
-            onToggle={handleToggle}
+  <FullScreenModal title={$t('options')} {onClose}>
+    <div class="items-center justify-center">
+      <div class="py-2">
+        <h2 class="text-gray text-sm mb-2">{$t('settings').toUpperCase()}</h2>
+        <div class="grid p-2 gap-y-2">
+          {#if order}
+            <SettingDropdown
+              title={$t('display_order')}
+              options={Object.values(options)}
+              selectedOption={options[order]}
+              onToggle={handleToggle}
+            />
+          {/if}
+          <SettingSwitch
+            title={$t('comments_and_likes')}
+            subtitle={$t('let_others_respond')}
+            checked={album.isActivityEnabled}
+            onToggle={onToggleEnabledActivity}
           />
-        {/if}
-        <SettingSwitch
-          title={$t('comments_and_likes')}
-          subtitle={$t('let_others_respond')}
-          checked={album.isActivityEnabled}
-          onToggle={onToggleEnabledActivity}
-        />
-      </div>
-    </div>
-    <div class="py-2">
-      <div class="text-gray text-sm mb-3">{$t('people').toUpperCase()}</div>
-      <div class="p-2">
-        <button type="button" class="flex items-center gap-2" on:click={onShowSelectSharedUser}>
-          <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
-            <div><Icon path={mdiPlus} size="25" /></div>
-          </div>
-          <div>{$t('invite_people')}</div>
-        </button>
-        
-        <div class="flex items-center gap-2 py-2 mt-2">
-          <div>
-            <UserAvatar user={user} size="md" />
-          </div>
-          <div class="w-full">{user.name}</div>
-          <div>{$t('owner')}</div>
         </div>
+      </div>
+      <div class="py-2">
+        <div class="text-gray text-sm mb-3">{$t('people').toUpperCase()}</div>
+        <div class="p-2">
+          <button type="button" class="flex items-center gap-2" on:click={onShowSelectSharedUser}>
+            <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
+              <div><Icon path={mdiPlus} size="25" /></div>
+            </div>
+            <div>{$t('invite_people')}</div>
+          </button>
 
-        {#each album.albumUsers as { user } (user.id)}
-          <div class="flex items-center gap-2 py-2">
+          <div class="flex items-center gap-2 py-2 mt-2">
             <div>
               <UserAvatar {user} size="md" />
             </div>
             <div class="w-full">{user.name}</div>
-            {#if user.id !== album.ownerId} <!-- Allow deletion for non-owners -->
-              <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
-                <MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
-              </ButtonContextMenu>
-            {/if}
+            <div>{$t('owner')}</div>
           </div>
-        {/each}
+
+          {#each album.albumUsers as { user } (user.id)}
+            <div class="flex items-center gap-2 py-2">
+              <div>
+                <UserAvatar {user} size="md" />
+              </div>
+              <div class="w-full">{user.name}</div>
+              {#if user.id !== album.ownerId}
+                <!-- Allow deletion for non-owners -->
+                <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
+                  <MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
+                </ButtonContextMenu>
+              {/if}
+            </div>
+          {/each}
+        </div>
       </div>
     </div>
-  </div>
-</FullScreenModal>
+  </FullScreenModal>
 {/if}
 
 {#if selectedRemoveUser}
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 b2b628be1854b..fdf21a2bb82cd 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
@@ -346,22 +346,20 @@
   };
 
   const handleRemoveUser = async (userId: string, nextViewMode: ViewMode) => {
-  if (userId == 'me' || userId === $user.id) {
-    await goto(backUrl);
-    return;
-  }
-
-  try {
-    await refreshAlbum();
-    
-    // Dynamically set the view mode based on the passed argument
-    viewMode = album.albumUsers.length > 0 ? nextViewMode : ViewMode.VIEW;
+    if (userId == 'me' || userId === $user.id) {
+      await goto(backUrl);
+      return;
+    }
 
-  } catch (error) {
-    handleError(error, $t('errors.error_deleting_shared_user'));
-  }
-};
+    try {
+      await refreshAlbum();
 
+      // Dynamically set the view mode based on the passed argument
+      viewMode = album.albumUsers.length > 0 ? nextViewMode : ViewMode.VIEW;
+    } catch (error) {
+      handleError(error, $t('errors.error_deleting_shared_user'));
+    }
+  };
 
   const handleDownloadAlbum = async () => {
     await downloadAlbum(album);
@@ -734,7 +732,7 @@
   <ShareInfoModal
     onClose={() => (viewMode = ViewMode.VIEW)}
     {album}
-    onRemove={(userId) => handleRemoveUser(userId, ViewMode.VIEW_USERS)}  
+    onRemove={(userId) => handleRemoveUser(userId, ViewMode.VIEW_USERS)}
     onRefreshAlbum={refreshAlbum}
   />
 {/if}
@@ -748,7 +746,7 @@
       albumOrder = order;
       await setModeToView();
     }}
-    onRemove={(userId)=>handleRemoveUser(userId, ViewMode.OPTIONS)}
+    onRemove={(userId) => handleRemoveUser(userId, ViewMode.OPTIONS)}
     onClose={() => (viewMode = ViewMode.VIEW)}
     onToggleEnabledActivity={handleToggleEnableActivity}
     onShowSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}