refactor: trash page actions (#25039)

web/src/lib/components/layouts/user-page-layout.svelte

@@ -6,8 +6,11 @@
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
+  import type { HeaderButtonActionItem } from '$lib/types';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
   import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     hideNavbar?: boolean;
@@ -16,6 +19,7 @@
     description?: string | undefined;
     scrollbar?: boolean;
     use?: ActionArray;
+    actions?: Array<HeaderButtonActionItem | MenuItemType>;
     header?: Snippet;
     sidebar?: Snippet;
     buttons?: Snippet;
@@ -29,6 +33,7 @@
     description = undefined,
     scrollbar = true,
     use = [],
+    actions = [],
     header,
     sidebar,
     buttons,
@@ -74,7 +79,31 @@
             <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
           {/if}
         </div>
+
         {@render buttons?.()}
+
+        {#if actions.length > 0}
+          <div class="hidden md:block">
+            <HStack gap={0}>
+              {#each actions as action, i (i)}
+                {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
+                  <Button
+                    variant="ghost"
+                    size="small"
+                    color={action.color ?? 'secondary'}
+                    leadingIcon={action.icon}
+                    onclick={() => action.onAction(action)}
+                    title={action.data?.title}
+                  >
+                    {action.title}
+                  </Button>
+                {/if}
+              {/each}
+            </HStack>
+          </div>
+
+          <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
+        {/if}
       </div>
     {/if}
   </main>

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

@@ -0,0 +1,54 @@
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import { emptyTrash, restoreTrash } from '@immich/sdk';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
+import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getTrashActions = ($t: MessageFormatter) => {
+  const RestoreAll: ActionItem = {
+    title: $t('restore_all'),
+    icon: mdiHistory,
+    onAction: () => handleRestoreTrash(),
+  };
+
+  const Empty: ActionItem = {
+    title: $t('empty_trash'),
+    icon: mdiDeleteForeverOutline,
+    onAction: () => handleEmptyTrash(),
+  };
+
+  return { RestoreAll, Empty };
+};
+
+export const handleEmptyTrash = async () => {
+  const $t = await getFormatter();
+
+  const confirmed = await modalManager.showDialog({ prompt: $t('empty_trash_confirmation') });
+  if (!confirmed) {
+    return;
+  }
+
+  try {
+    const { count } = await emptyTrash();
+    toastManager.success($t('assets_permanently_deleted_count', { values: { count } }));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_empty_trash'));
+  }
+};
+
+export const handleRestoreTrash = async () => {
+  const $t = await getFormatter();
+
+  const confirmed = await modalManager.showDialog({ prompt: $t('assets_restore_confirmation') });
+  if (!confirmed) {
+    return;
+  }
+
+  try {
+    const { count } = await restoreTrash();
+    toastManager.success($t('assets_restored_count', { values: { count } }));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_restore_trash'));
+  }
+};