refactor: sharing page actions (#25368)

web/src/lib/services/album.service.ts

@@ -7,6 +7,7 @@ import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
 import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { Route } from '$lib/route';
 import { user } from '$lib/stores/user.store';
+import { createAlbumAndRedirect } from '$lib/utils/album-utils';
 import { downloadArchive } from '$lib/utils/asset-utils';
 import { openFileUploadDialog } from '$lib/utils/file-uploader';
 import { handleError } from '$lib/utils/handle-error';
@@ -28,6 +29,16 @@ import { mdiLink, mdiPlus, mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload
 import { type MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
+export const getAlbumsActions = ($t: MessageFormatter) => {
+  const Create: ActionItem = {
+    title: $t('create_album'),
+    icon: mdiPlusBoxOutline,
+    onAction: () => createAlbumAndRedirect(),
+  };
+
+  return { Create };
+};
+
 export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) => {
   const isOwned = get(user).id === album.ownerId;
 

web/src/lib/services/shared-link.service.ts

@@ -18,9 +18,19 @@ import {
   type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiContentCopy, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
+import { mdiContentCopy, mdiLink, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
+export const getSharedLinksActions = ($t: MessageFormatter) => {
+  const ViewAll: ActionItem = {
+    title: $t('shared_links'),
+    icon: mdiLink,
+    onAction: () => goto(Route.sharedLinks()),
+  };
+
+  return { ViewAll };
+};
+
 export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
   const Edit: ActionItem = {
     title: $t('edit_link'),

web/src/routes/(user)/sharing/+page.svelte

@@ -5,6 +5,8 @@
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { Route } from '$lib/route';
+  import { getAlbumsActions } from '$lib/services/album.service';
+  import { getSharedLinksActions } from '$lib/services/shared-link.service';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -13,15 +15,12 @@
     SortOrder,
     type AlbumViewSettings,
   } from '$lib/stores/preferences.store';
-  import { createAlbumAndRedirect } from '$lib/utils/album-utils';
-  import { Button, HStack, Text } from '@immich/ui';
-  import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  interface Props {
+  type Props = {
     data: PageData;
-  }
+  };
 
   let { data }: Props = $props();
 
@@ -34,26 +33,12 @@
     sortOrder: SortOrder.Desc,
     collapsedGroups: {},
   };
+
+  const { Create: CreateAlbum } = $derived(getAlbumsActions($t));
+  const { ViewAll: ViewSharedLinks } = $derived(getSharedLinksActions($t));
 </script>
 
-<UserPageLayout title={data.meta.title}>
+<UserPageLayout title={data.meta.title} actions={[ViewSharedLinks, CreateAlbum]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      <Button
-        leadingIcon={mdiPlusBoxOutline}
-        onclick={() => createAlbumAndRedirect()}
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
-        <Text class="hidden md:block">{$t('create_album')}</Text>
-      </Button>
-      <Button leadingIcon={mdiLink} href={Route.sharedLinks()} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('shared_links')}</Text>
-      </Button>
-    </HStack>
-  {/snippet}
-
   <div class="flex flex-col">
     {#if data.partners.length > 0}
       <div class="mb-6 mt-2">