feat(web): force delete with shift key (#6239)

* feat: force delete with shift key

* fix: types import

* pr feedback

* fix: permanently delete assets

* fix: format

* fix: remove unused variable

* change info title

* simplify

* fix: rename function name

* pr feedback

* simplify

* pr feedback

* add toggle in the user settings

* fix: trash settings, input label, and wording

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -181,7 +181,7 @@
     }
   }
 
-  const test = (searched: string): Sort => {
+  const searchSort = (searched: string): Sort => {
     for (const key in sortByOptions) {
       if (sortByOptions[key].title === searched) {
         return sortByOptions[key];
@@ -256,7 +256,7 @@
 
     <Dropdown
       options={Object.values(sortByOptions)}
-      selectedOption={test($albumViewSettings.sortBy)}
+      selectedOption={searchSort($albumViewSettings.sortBy)}
       render={(option) => {
         return {
           title: option.title,

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

@@ -87,7 +87,7 @@
       </LinkButton>
     </div>
 
-    <AssetGrid forceDelete {assetStore} {assetInteractionStore}>
+    <AssetGrid {assetStore} {assetInteractionStore}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
       </p>

web/src/routes/(user)/user-settings/+page.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
+  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+  import { mdiKeyboard } from '@mdi/js';
   import type { PageData } from './$types';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
 
   export let data: PageData;
+  export let isShowKeyboardShortcut = false;
 </script>
 
 <UserPageLayout title={data.meta.title}>
+  <svelte:fragment slot="buttons">
+    <IconButton on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}>
+      <Icon path={mdiKeyboard} />
+    </IconButton>
+  </svelte:fragment>
   <section class="mx-4 flex place-content-center">
     <div class="w-full max-w-3xl">
       <UserSettingsList keys={data.keys} devices={data.devices} />
     </div>
   </section>
 </UserPageLayout>
+
+{#if isShowKeyboardShortcut}
+  <ShowShortcuts on:close={() => (isShowKeyboardShortcut = false)} />
+{/if}