feat(server): trash asset (#4015)

* refactor(server): delete assets endpoint

* fix: formatting

* chore: cleanup

* chore: open api

* chore(mobile): replace DeleteAssetDTO with BulkIdsDTOs

* feat: trash an asset

* chore(server): formatting

* chore: open api

* chore: wording

* chore: open-api

* feat(server): add withDeleted to getAssets queries

* WIP: mobile-recycle-bin

* feat(server): recycle-bin to system config

* feat(web): use recycle-bin system config

* chore(server): domain assetcore removed

* chore(server): rename recycle-bin to trash

* chore(web): rename recycle-bin to trash

* chore(server): always send soft deleted assets for getAllByUserId

* chore(web): formatting

* feat(server): permanent delete assets older than trashed period

* feat(web): trash empty placeholder image

* feat(server): empty trash

* feat(web): empty trash

* WIP: mobile-recycle-bin

* refactor(server): empty / restore trash to separate endpoint

* test(server): handle failures

* test(server): fix e2e server-info test

* test(server): deletion test refactor

* feat(mobile): use map settings from server-config to enable / disable map

* feat(mobile): trash asset

* fix(server): operations on assets in trash

* feat(web): show trash statistics

* fix(web): handle trash enabled

* fix(mobile): restore updates from trash

* fix(server): ignore trashed assets for person

* fix(server): add / remove search index when trashed / restored

* chore(web): format

* fix(server): asset service test

* fix(server): include trashed assts for duplicates from uploads

* feat(mobile): no dialog for trash, always dialog for permanent delete

* refactor(mobile): use isar where instead of dart filter

* refactor(mobile): asset provide - handle deletes in single db txn

* chore(mobile): review changes

* feat(web): confirmation before empty trash

* server: review changes

* fix(server): handle library changes

* fix: filter external assets from getting trashed / deleted

* fix(server): empty-bin

* feat: broadcast config update events through ws

* change order of trash button on mobile

* styling

* fix(mobile): do not show trashed toast for local only assets

---------

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

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -12,6 +12,7 @@
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
   import SettingSelect from '../setting-select.svelte';
+  import { loadConfig } from '$lib/stores/server-config.store';
 
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
@@ -47,6 +48,9 @@
       savedConfig = cloneDeep(updated);
 
       notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
+      // TODO: Use websockets to reload feature params instead once websocket for client is merged
+      // Reload feature params in the background
+      loadConfig();
     } catch (error) {
       handleError(error, 'Unable to save settings');
     }

web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, SystemConfigTrashDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingSwitch from '../setting-switch.svelte';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import { loadConfig } from '$lib/stores/server-config.store';
+
+  export let trashConfig: SystemConfigTrashDto; // this is the config that is being edited
+  export let disabled = false;
+
+  let savedConfig: SystemConfigTrashDto;
+  let defaultConfig: SystemConfigTrashDto;
+
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.trash),
+      api.systemConfigApi.getDefaults().then((res) => res.data.trash),
+    ]);
+  }
+
+  async function saveSetting() {
+    try {
+      const { data: current } = await api.systemConfigApi.getConfig();
+      const { data: updated } = await api.systemConfigApi.updateConfig({
+        systemConfigDto: { ...current, trash: trashConfig },
+      });
+
+      trashConfig = { ...updated.trash };
+      savedConfig = { ...updated.trash };
+
+      notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
+      // TODO: Use websockets to reload feature params instead once websocket for client is merged
+      // Reload feature params in the background
+      loadConfig();
+    } catch (error) {
+      handleError(error, 'Unable to save settings');
+    }
+  }
+
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+    trashConfig = { ...resetConfig.trash };
+    savedConfig = { ...resetConfig.trash };
+
+    notificationController.show({
+      message: 'Reset settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
+
+    trashConfig = { ...configs.trash };
+    defaultConfig = { ...configs.trash };
+
+    notificationController.show({
+      message: 'Reset trash settings to default',
+      type: NotificationType.Info,
+    });
+  }
+</script>
+
+<div>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="ml-4 mt-4 flex flex-col gap-4">
+          <SettingSwitch
+            title="ENABLED"
+            {disabled}
+            subtitle="Enable Trash features"
+            bind:checked={trashConfig.enabled}
+          />
+
+          <hr />
+
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label="Number of days"
+            desc="Number of days to keep the assets in trash before permanently removing them"
+            bind:value={trashConfig.days}
+            required={true}
+            disabled={disabled || !trashConfig.enabled}
+            isEdited={trashConfig.days !== savedConfig.days}
+          />
+
+          <SettingButtonsRow
+            on:reset={reset}
+            on:save={saveSetting}
+            on:reset-to-default={resetToDefault}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+            {disabled}
+          />
+        </div>
+      </form>
+    </div>
+  {/await}
+</div>

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

@@ -26,13 +26,17 @@
   import type { AssetStore } from '$lib/stores/assets.store';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Close from 'svelte-material-icons/Close.svelte';
+
   import ProgressBar, { ProgressBarStatus } from '../shared-components/progress-bar/progress-bar.svelte';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { featureFlags } from '$lib/stores/server-config.store';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
   export let showNavigation = true;
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
+  $: isTrashEnabled = $featureFlags.trash;
+  export let force = false;
 
   const dispatch = createEventDispatcher<{
     archived: AssetResponseDto;
@@ -117,7 +121,7 @@
         }
         return;
       case 'Delete':
-        isShowDeleteConfirmation = true;
+        trashOrDelete();
         return;
       case 'Escape':
         if (isShowDeleteConfirmation) {
@@ -169,27 +173,43 @@
     $isShowDetail = !$isShowDetail;
   };
 
-  const deleteAsset = async () => {
+  $: trashOrDelete = !(force || !isTrashEnabled)
+    ? trashAsset
+    : () => {
+        isShowDeleteConfirmation = true;
+      };
+
+  const trashAsset = async () => {
     try {
-      const { data: deletedAssets } = await api.assetApi.deleteAsset({
-        deleteAssetDto: {
-          ids: [asset.id],
-        },
-      });
+      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
 
       await navigateAssetForward();
 
-      for (const asset of deletedAssets) {
-        if (asset.status == 'SUCCESS') {
-          assetStore?.removeAsset(asset.id);
-        }
-      }
-    } catch (e) {
+      assetStore?.removeAsset(asset.id);
+
       notificationController.show({
-        type: NotificationType.Error,
-        message: 'Error deleting this asset, check console for more details',
+        message: 'Moved to trash',
+        type: NotificationType.Info,
       });
-      console.error('Error deleteAsset', e);
+    } catch (e) {
+      handleError(e, 'Unable to trash asset');
+    }
+  };
+
+  const deleteAsset = async () => {
+    try {
+      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
+
+      await navigateAssetForward();
+
+      assetStore?.removeAsset(asset.id);
+
+      notificationController.show({
+        message: 'Permanently deleted asset',
+        type: NotificationType.Info,
+      });
+    } catch (e) {
+      handleError(e, 'Unable to delete asset');
     } finally {
       isShowDeleteConfirmation = false;
     }
@@ -376,7 +396,7 @@
         on:goBack={closeViewer}
         on:showDetail={showDetailInfoHandler}
         on:download={() => downloadFile(asset)}
-        on:delete={() => (isShowDeleteConfirmation = true)}
+        on:delete={trashOrDelete}
         on:favorite={toggleFavorite}
         on:addToAlbum={() => openAlbumPicker(false)}
         on:addToSharedAlbum={() => openAlbumPicker(true)}

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -9,12 +9,16 @@
   import { api } from '@api';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
   import TimerSand from 'svelte-material-icons/TimerSand.svelte';
+
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { createEventDispatcher } from 'svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
 
   export let onAssetDelete: OnAssetDelete;
   export let menuItem = false;
+  export let force = !$featureFlags.trash;
+
   const { getAssets, clearSelect } = getAssetControlContext();
 
   const dispatch = createEventDispatcher();
@@ -22,27 +26,29 @@
   let isShowConfirmation = false;
   let loading = false;
 
+  const handleTrash = async () => {
+    if (force) {
+      isShowConfirmation = true;
+      return;
+    }
+
+    await handleDelete();
+  };
+
   const handleDelete = async () => {
     loading = true;
 
     try {
-      let count = 0;
-
-      const { data: deletedAssets } = await api.assetApi.deleteAsset({
-        deleteAssetDto: {
-          ids: Array.from(getAssets()).map((a) => a.id),
-        },
-      });
-
-      for (const asset of deletedAssets) {
-        if (asset.status === 'SUCCESS') {
-          onAssetDelete(asset.id);
-          count++;
-        }
+      const ids = Array.from(getAssets())
+        .filter((a) => !a.isExternal)
+        .map((a) => a.id);
+      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids, force } });
+      for (const id of ids) {
+        onAssetDelete(id);
       }
 
       notificationController.show({
-        message: `Deleted ${count}`,
+        message: `${force ? 'Permanently deleted' : 'Trashed'} ${ids.length} assets`,
         type: NotificationType.Info,
       });
 
@@ -62,20 +68,16 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Delete" on:click={() => (isShowConfirmation = true)} />
-{/if}
-
-{#if !menuItem}
-  {#if loading}
-    <CircleIconButton title="Loading" logo={TimerSand} />
-  {:else}
-    <CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
-  {/if}
+  <MenuOption text={force ? 'Permanently Delete' : 'Delete'} on:click={handleTrash} />
+{:else if loading}
+  <CircleIconButton title="Loading" logo={TimerSand} />
+{:else}
+  <CircleIconButton title="Delete" logo={DeleteOutline} on:click={handleTrash} />
 {/if}
 
 {#if isShowConfirmation}
   <ConfirmDialogue
-    title="Delete Asset{getAssets().size > 1 ? 's' : ''}"
+    title="Permanently Delete Asset{getAssets().size > 1 ? 's' : ''}"
     confirmText="Delete"
     on:confirm={handleDelete}
     on:cancel={() => (isShowConfirmation = false)}
@@ -83,7 +85,7 @@
   >
     <svelte:fragment slot="prompt">
       <p>
-        Are you sure you want to delete
+        Are you sure you want to permanently delete
         {#if getAssets().size > 1}
           these <b>{getAssets().size}</b> assets? This will also remove them from their album(s).
         {:else}

web/src/lib/components/photos-page/actions/restore-assets.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api } from '@api';
+  import History from 'svelte-material-icons/History.svelte';
+  import Button from '../../elements/buttons/button.svelte';
+  import { OnRestore, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+  export let onRestore: OnRestore | undefined = undefined;
+
+  const { getAssets, clearSelect } = getAssetControlContext();
+
+  let loading = false;
+
+  const handleRestore = async () => {
+    loading = true;
+
+    try {
+      const ids = Array.from(getAssets()).map((a) => a.id);
+      await api.assetApi.restoreAssets({ bulkIdsDto: { ids } });
+      onRestore?.(ids);
+
+      notificationController.show({
+        message: `Restored ${ids.length}`,
+        type: NotificationType.Info,
+      });
+
+      clearSelect();
+    } catch (e) {
+      handleError(e, 'Error restoring assets');
+    } finally {
+      loading = false;
+    }
+  };
+</script>
+
+<Button disabled={loading} size="sm" color="transparent-gray" shadow={false} rounded="lg" on:click={handleRestore}>
+  <History size="24" />
+  <span class="ml-2">Restore</span>
+</Button>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -17,6 +17,7 @@
   import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
 
   export let isSelectionMode = false;
@@ -24,6 +25,8 @@
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
   export let removeAction: AssetAction | null = null;
+  $: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash;
+  export let forceDelete = false;
 
   const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
     assetInteractionStore;
@@ -383,6 +386,7 @@
     <AssetViewer
       {assetStore}
       asset={$viewingAsset}
+      force={forceDelete || !isTrashEnabled}
       on:previous={() => handlePrevious()}
       on:next={() => handleNext()}
       on:close={() => handleClose()}

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -2,6 +2,7 @@
   import { createContext } from '$lib/utils/context';
 
   export type OnAssetDelete = (assetId: string) => void;
+  export type OnRestore = (ids: string[]) => void;
   export type OnArchive = (ids: string[], isArchived: boolean) => void;
   export type OnFavorite = (ids: string[], favorite: boolean) => void;
 

web/src/lib/components/shared-components/empty-placeholder.svelte

@@ -4,6 +4,7 @@
   export let actionHandler: undefined | (() => unknown) = undefined;
   export let text = '';
   export let alt = '';
+  export let src = empty1Url;
 
   let hoverClasses = 'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
 </script>
@@ -15,14 +16,14 @@
     on:keydown={actionHandler}
     class="border dark:border-immich-dark-gray {hoverClasses} m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray"
   >
-    <img src={empty1Url} {alt} width="500" draggable="false" />
+    <img {src} {alt} width="500" draggable="false" />
     <p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
   </div>
 {:else}
   <div
     class="m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   >
-    <img src={empty1Url} {alt} width="500" draggable="false" />
+    <img {src} {alt} width="500" draggable="false" />
     <p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
   </div>
 {/if}

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -10,6 +10,7 @@
   import Magnify from 'svelte-material-icons/Magnify.svelte';
   import Map from 'svelte-material-icons/Map.svelte';
   import Account from 'svelte-material-icons/Account.svelte';
+  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
   import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
   import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
   import { AppRoute } from '../../../constants';
@@ -37,6 +38,7 @@
   const isFavoritesSelected = $page.route.id === '/(user)/favorites';
   const isPhotosSelected = $page.route.id === '/(user)/photos';
   const isSharingSelected = $page.route.id === '/(user)/sharing';
+  const isTrashSelected = $page.route.id === '/(user)/trash';
 </script>
 
 <SideBarSection>
@@ -139,6 +141,23 @@
         {/await}
       </svelte:fragment>
     </SideBarButton>
+
+    {#if $featureFlags.trash}
+      <a data-sveltekit-preload-data="hover" href={AppRoute.TRASH} draggable="false">
+        <SideBarButton title="Trash" logo={TrashCanOutline} isSelected={isTrashSelected}>
+          <svelte:fragment slot="moreInformation">
+            {#await getStats({ isTrashed: true })}
+              <LoadingSpinner />
+            {:then data}
+              <div>
+                <p>{data.videos.toLocaleString($locale)} Videos</p>
+                <p>{data.images.toLocaleString($locale)} Photos</p>
+              </div>
+            {/await}
+          </svelte:fragment>
+        </SideBarButton>
+      </a>
+    {/if}
   </a>
 
   <!-- Status Box -->