refactor: sidebar (#18293)

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

@@ -5,7 +5,7 @@
 <script lang="ts">
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+  import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { Snippet } from 'svelte';
 
@@ -56,7 +56,7 @@
   {#if sidebar}
     {@render sidebar()}
   {:else}
-    <SideBar />
+    <UserSidebar />
   {/if}
 
   <main class="relative">

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

@@ -1,36 +1,36 @@
 <script lang="ts">
+  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 Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
+  import { preferences } from '$lib/stores/user.store';
   import {
     mdiAccount,
-    mdiAccountOutline,
     mdiAccountMultiple,
     mdiAccountMultipleOutline,
+    mdiAccountOutline,
     mdiArchiveArrowDown,
     mdiArchiveArrowDownOutline,
+    mdiFolderOutline,
     mdiHeart,
     mdiHeartOutline,
     mdiImageAlbum,
     mdiImageMultiple,
     mdiImageMultipleOutline,
+    mdiLink,
     mdiMagnify,
     mdiMap,
     mdiMapOutline,
-    mdiTrashCan,
-    mdiTrashCanOutline,
+    mdiTagMultipleOutline,
     mdiToolbox,
     mdiToolboxOutline,
-    mdiFolderOutline,
-    mdiTagMultipleOutline,
-    mdiLink,
+    mdiTrashCan,
+    mdiTrashCanOutline,
   } from '@mdi/js';
-  import SideBarSection from './side-bar-section.svelte';
-  import SideBarLink from './side-bar-link.svelte';
   import { t } from 'svelte-i18n';
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
-  import { preferences } from '$lib/stores/user.store';
-  import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
-  import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
   import { fly } from 'svelte/transition';
+  import SideBarLink from './side-bar-link.svelte';
 
   let isArchiveSelected: boolean = $state(false);
   let isFavoritesSelected: boolean = $state(false);
@@ -42,7 +42,7 @@
   let isUtilitiesSelected: boolean = $state(false);
 </script>
 
-<SideBarSection ariaLabel={$t('primary')}>
+<Sidebar ariaLabel={$t('primary')}>
   <SideBarLink
     title={$t('photos')}
     routeId="/(user)/photos"
@@ -138,4 +138,4 @@
   {/if}
 
   <BottomInfo />
-</SideBarSection>
+</Sidebar>

web/src/lib/components/sidebar/sidebar.spec.ts

@@ -1,4 +1,4 @@
-import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
+import SideBarSection from '$lib/components/sidebar/sidebar.svelte';
 import { sidebarStore } from '$lib/stores/sidebar.svelte';
 import { render, screen } from '@testing-library/svelte';
 import { vi } from 'vitest';
@@ -22,7 +22,7 @@ vi.mock('$lib/stores/sidebar.svelte', () => ({
   },
 }));
 
-describe('SideBarSection component', () => {
+describe('Sidebar component', () => {
   beforeEach(() => {
     vi.resetAllMocks();
     mocks.mobileDevice.isFullSidebar = false;

web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -17,10 +17,10 @@
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import type { Viewport } from '$lib/stores/assets-store.svelte';
@@ -130,7 +130,7 @@
 
 <UserPageLayout title={data.meta.title}>
   {#snippet sidebar()}
-    <SideBarSection>
+    <Sidebar>
       <SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} breakpoint="md" />
       <section>
         <div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
@@ -143,7 +143,7 @@
           />
         </div>
       </section>
-    </SideBarSection>
+    </Sidebar>
   {/snippet}
 
   <Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} {getLink} />

web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -10,10 +10,10 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -142,7 +142,7 @@
 
 <UserPageLayout title={data.meta.title}>
   {#snippet sidebar()}
-    <SideBarSection>
+    <Sidebar>
       <SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} breakpoint="md" />
       <section>
         <div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
@@ -156,7 +156,7 @@
           />
         </div>
       </section>
-    </SideBarSection>
+    </Sidebar>
   {/snippet}
 
   {#snippet buttons()}