feat(web): shared link filters (#15948)

web/src/lib/components/elements/group-tab.svelte

@@ -3,12 +3,13 @@
 
   interface Props {
     filters: string[];
+    labels?: string[];
     selected: string;
     label: string;
     onSelect: (selected: string) => void;
   }
 
-  let { filters, selected, label, onSelect }: Props = $props();
+  let { filters, selected, label, labels, onSelect }: Props = $props();
 
   const id = `group-tab-${generateId()}`;
 </script>
@@ -32,7 +33,7 @@
         for="{id}-{index}"
         class="flex h-full cursor-pointer items-center px-4 text-sm hover:bg-gray-300 group-first-of-type:rounded-s-2xl group-last-of-type:rounded-e-2xl peer-checked:bg-gray-300 dark:hover:bg-gray-800 peer-checked:dark:bg-gray-700"
       >
-        {filter}
+        {labels?.[index] ?? filter}
       </label>
     </div>
   {/each}

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

@@ -21,6 +21,7 @@
     mdiToolboxOutline,
     mdiFolderOutline,
     mdiTagMultipleOutline,
+    mdiLink,
   } from '@mdi/js';
   import SideBarSection from './side-bar-section.svelte';
   import SideBarLink from './side-bar-link.svelte';
@@ -72,6 +73,10 @@
       />
     {/if}
 
+    {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
+      <SideBarLink title={$t('shared_links')} routeId="/(user)/shared-links" icon={mdiLink} />
+    {/if}
+
     <SideBarLink
       title={$t('sharing')}
       routeId="/(user)/sharing"

web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { AppRoute } from '$lib/constants';
+  import type { SharedLinkResponseDto } from '@immich/sdk';
   import { mdiCircleEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
     menuItem?: boolean;
-    onEdit: () => void;
+    sharedLink: SharedLinkResponseDto;
   }
 
-  let { menuItem = false, onEdit }: Props = $props();
+  let { sharedLink, menuItem = false }: Props = $props();
+
+  const onEdit = async () => {
+    await goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`);
+  };
 </script>
 
 {#if menuItem}

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -15,10 +15,9 @@
   interface Props {
     link: SharedLinkResponseDto;
     onDelete: () => void;
-    onEdit: () => void;
   }
 
-  let { link, onDelete, onEdit }: Props = $props();
+  let { link, onDelete }: Props = $props();
 
   let now = DateTime.now();
   let expiresAt = $derived(link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined);
@@ -95,10 +94,9 @@
       </div>
     </div>
   </svelte:element>
-
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
     <div class="sm:flex hidden">
-      <SharedLinkEdit {onEdit} />
+      <SharedLinkEdit sharedLink={link} />
       <SharedLinkCopy {link} />
       <SharedLinkDelete {onDelete} />
     </div>
@@ -112,7 +110,7 @@
         padding="3"
         hideContent
       >
-        <SharedLinkEdit menuItem {onEdit} />
+        <SharedLinkEdit menuItem sharedLink={link} />
         <SharedLinkCopy menuItem {link} />
         <SharedLinkDelete menuItem {onDelete} />
       </ButtonContextMenu>

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -27,6 +27,10 @@
   // Ratings
   let ratingsEnabled = $state($preferences?.ratings?.enabled ?? false);
 
+  // Shared links
+  let sharedLinksEnabled = $state($preferences?.sharedLinks?.enabled ?? true);
+  let sharedLinkSidebar = $state($preferences?.sharedLinks?.sidebarWeb ?? false);
+
   // Tags
   let tagsEnabled = $state($preferences?.tags?.enabled ?? false);
   let tagsSidebar = $state($preferences?.tags?.sidebarWeb ?? false);
@@ -39,6 +43,7 @@
           memories: { enabled: memoriesEnabled },
           people: { enabled: peopleEnabled, sidebarWeb: peopleSidebar },
           ratings: { enabled: ratingsEnabled },
+          sharedLinks: { enabled: sharedLinksEnabled, sidebarWeb: sharedLinkSidebar },
           tags: { enabled: tagsEnabled, sidebarWeb: tagsSidebar },
         },
       });
@@ -104,6 +109,21 @@
           </div>
         </SettingAccordion>
 
+        <SettingAccordion key="shared-links" title={$t('shared_links')} subtitle={$t('shared_links_description')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={sharedLinksEnabled} />
+          </div>
+          {#if sharedLinksEnabled}
+            <div class="ml-4 mt-6">
+              <SettingSwitch
+                title={$t('sidebar')}
+                subtitle={$t('sidebar_display_description')}
+                bind:checked={sharedLinkSidebar}
+              />
+            </div>
+          {/if}
+        </SettingAccordion>
+
         <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
           <div class="ml-4 mt-6">
             <SettingSwitch title={$t('enable')} bind:checked={tagsEnabled} />