refactor(web): user sidebar

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

@@ -1,76 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state';
-  import { Icon } from '@immich/ui';
-  import { mdiChevronDown, mdiChevronLeft } from '@mdi/js';
-  import type { Snippet } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    title: string;
-    href: string;
-    icon: string;
-    flippedLogo?: boolean;
-    isSelected?: boolean;
-    preloadData?: boolean;
-    dropDownContent?: Snippet;
-    dropdownOpen?: boolean;
-  }
-
-  let {
-    title,
-    href,
-    icon,
-    flippedLogo = false,
-    isSelected = $bindable(false),
-    preloadData = true,
-    dropDownContent: hasDropdown,
-    dropdownOpen = $bindable(false),
-  }: Props = $props();
-
-  $effect(() => {
-    isSelected = page.url.pathname.startsWith(href);
-  });
-</script>
-
-<div class="relative">
-  {#if hasDropdown}
-    <span class="hidden md:block absolute start-1 h-full">
-      <button
-        type="button"
-        aria-label={$t('recent-albums')}
-        class="relative flex cursor-default pt-4 pb-4 select-none justify-center hover:cursor-pointer hover:bg-subtle hover:fill-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary rounded h-fill"
-        onclick={() => (dropdownOpen = !dropdownOpen)}
-      >
-        <Icon
-          icon={dropdownOpen ? mdiChevronDown : mdiChevronLeft}
-          size="1em"
-          class="shrink-0 delay-100 duration-100 "
-          flipped={flippedLogo}
-          aria-hidden
-        />
-      </button>
-    </span>
-  {/if}
-  <!-- safari still needs a tabIndex=0 -->
-  <a
-    tabindex="0"
-    {href}
-    data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
-    draggable="false"
-    aria-current={isSelected ? 'page' : undefined}
-    class="flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
-    {isSelected
-      ? 'bg-immich-primary/10 dark:text-primary text-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10'
-      : ''}"
-  >
-    <div class="flex w-full place-items-center gap-4 ps-5 overflow-hidden truncate">
-      <Icon {icon} size="1.5em" class="shrink-0" flipped={flippedLogo} aria-hidden />
-      <span class="text-sm font-medium">{title}</span>
-    </div>
-    <div></div>
-  </a>
-</div>
-
-{#if hasDropdown && dropdownOpen}
-  {@render hasDropdown?.()}
-{/if}

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

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { resolve } from '$app/paths';
   import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
-  import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
+  // import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import { AppRoute } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
+  // import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
+  import { NavbarGroup, NavbarItem } from '@immich/ui';
   import {
     mdiAccount,
     mdiAccountMultiple,
@@ -32,120 +33,74 @@
     mdiTrashCanOutline,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
-  import SideBarLink from './side-bar-link.svelte';
-
-  let isArchiveSelected: boolean = $state(false);
-  let isFavoritesSelected: boolean = $state(false);
-  let isMapSelected: boolean = $state(false);
-  let isPeopleSelected: boolean = $state(false);
-  let isPhotosSelected: boolean = $state(false);
-  let isSharingSelected: boolean = $state(false);
-  let isTrashSelected: boolean = $state(false);
-  let isUtilitiesSelected: boolean = $state(false);
-  let isLockedFolderSelected: boolean = $state(false);
+  // import { fly } from 'svelte/transition';
 </script>
 
 <Sidebar ariaLabel={$t('primary')}>
-  <SideBarLink
+  <NavbarItem
     title={$t('photos')}
-    href={resolve('/(user)/photos')}
-    bind:isSelected={isPhotosSelected}
-    icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
-  ></SideBarLink>
+    href={AppRoute.PHOTOS}
+    icon={mdiImageMultipleOutline}
+    activeIcon={mdiImageMultiple}
+  />
 
   {#if featureFlagsManager.value.search}
-    <SideBarLink title={$t('explore')} href={resolve('/(user)/explore')} icon={mdiMagnify} />
+    <NavbarItem title={$t('explore')} href={AppRoute.EXPLORE} icon={mdiMagnify} />
   {/if}
 
   {#if featureFlagsManager.value.map}
-    <SideBarLink
-      title={$t('map')}
-      href={resolve('/(user)/map')}
-      bind:isSelected={isMapSelected}
-      icon={isMapSelected ? mdiMap : mdiMapOutline}
-    />
+    <NavbarItem title={$t('map')} href={AppRoute.MAP} icon={mdiMapOutline} activeIcon={mdiMap} />
   {/if}
 
   {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
-    <SideBarLink
-      title={$t('people')}
-      href={resolve('/(user)/people')}
-      bind:isSelected={isPeopleSelected}
-      icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
-    />
+    <NavbarItem title={$t('people')} href={AppRoute.PEOPLE} icon={mdiAccountOutline} activeIcon={mdiAccount} />
   {/if}
 
   {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
-    <SideBarLink title={$t('shared_links')} href={resolve('/(user)/shared-links')} icon={mdiLink} />
+    <NavbarItem title={$t('shared_links')} href={AppRoute.SHARED_LINKS} icon={mdiLink} />
   {/if}
 
-  <SideBarLink
+  <NavbarItem
     title={$t('sharing')}
-    href={resolve('/(user)/sharing')}
-    icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
-    bind:isSelected={isSharingSelected}
-  ></SideBarLink>
+    href={AppRoute.SHARING}
+    icon={mdiAccountMultipleOutline}
+    activeIcon={mdiAccountMultiple}
+  />
 
-  <p class="text-xs py-5 ps-6 dark:text-immich-dark-fg uppercase">{$t('library')}</p>
+  <NavbarGroup title={$t('library')} />
 
-  <SideBarLink
-    title={$t('favorites')}
-    href={resolve('/(user)/favorites')}
-    icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
-    bind:isSelected={isFavoritesSelected}
-  ></SideBarLink>
+  <NavbarItem title={$t('favorites')} href={AppRoute.FAVORITES} icon={mdiHeartOutline} activeIcon={mdiHeart} />
 
-  <SideBarLink
-    title={$t('albums')}
-    href={resolve('/(user)/albums')}
-    icon={mdiImageAlbum}
-    flippedLogo
-    bind:dropdownOpen={$recentAlbumsDropdown}
-  >
-    {#snippet dropDownContent()}
+  <NavbarItem title={$t('albums')} href={AppRoute.ALBUMS} icon={{ icon: mdiImageAlbum, flipped: true }} />
+  <!-- bind:expanded={$recentAlbumsDropdown}
+    {#snippet items()}
       <span in:fly={{ y: -20 }} class="hidden md:block">
         <RecentAlbums />
       </span>
     {/snippet}
-  </SideBarLink>
+  </NavbarItem> -->
 
   {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
-    <SideBarLink title={$t('tags')} href={resolve('/(user)/tags')} icon={mdiTagMultipleOutline} flippedLogo />
+    <NavbarItem title={$t('tags')} href={AppRoute.TAGS} icon={{ icon: mdiTagMultipleOutline, flipped: true }} />
   {/if}
 
   {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
-    <SideBarLink title={$t('folders')} href={resolve('/(user)/folders')} icon={mdiFolderOutline} flippedLogo />
+    <NavbarItem title={$t('folders')} href={AppRoute.FOLDERS} icon={{ icon: mdiFolderOutline, flipped: true }} />
   {/if}
 
-  <SideBarLink
-    title={$t('utilities')}
-    href={resolve('/(user)/utilities')}
-    bind:isSelected={isUtilitiesSelected}
-    icon={isUtilitiesSelected ? mdiToolbox : mdiToolboxOutline}
-  ></SideBarLink>
+  <NavbarItem title={$t('utilities')} href={AppRoute.UTILITIES} icon={mdiToolboxOutline} activeIcon={mdiToolbox} />
 
-  <SideBarLink
+  <NavbarItem
     title={$t('archive')}
-    href={resolve('/(user)/archive')}
-    bind:isSelected={isArchiveSelected}
-    icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
-  ></SideBarLink>
+    href={AppRoute.ARCHIVE}
+    icon={mdiArchiveArrowDownOutline}
+    activeIcon={mdiArchiveArrowDown}
+  />
 
-  <SideBarLink
-    title={$t('locked_folder')}
-    href={resolve('/(user)/locked')}
-    bind:isSelected={isLockedFolderSelected}
-    icon={isLockedFolderSelected ? mdiLock : mdiLockOutline}
-  ></SideBarLink>
+  <NavbarItem title={$t('locked_folder')} href={AppRoute.LOCKED} icon={mdiLockOutline} activeIcon={mdiLock} />
 
   {#if featureFlagsManager.value.trash}
-    <SideBarLink
-      title={$t('trash')}
-      href={resolve('/(user)/trash')}
-      bind:isSelected={isTrashSelected}
-      icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
-    ></SideBarLink>
+    <NavbarItem title={$t('trash')} href={AppRoute.TRASH} icon={mdiTrashCanOutline} activeIcon={mdiTrashCan} />
   {/if}
 
   <BottomInfo />

web/src/lib/constants.ts

@@ -30,7 +30,6 @@ export enum AppRoute {
   ADMIN_REPAIR = '/admin/repair',
 
   ALBUMS = '/albums',
-  LIBRARIES = '/libraries',
   ARCHIVE = '/archive',
   FAVORITES = '/favorites',
   PEOPLE = '/people',