ui: fix always-show-sidebar-on-desktop setting after navigation refactor (#24979)

diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
index 1445961e00adabe233867a57449fd9d47b53c568..fe503f53baa1a0bc6b63d5a0bece8afa0266d964 100644 (file)
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -14,6 +14,7 @@
        import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
        import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
        import { chatStore } from '$lib/stores/chat.svelte';
+       import { config } from '$lib/stores/settings.svelte';
        import { RouterService } from '$lib/services/router.service';
        import { isMobile } from '$lib/stores/viewport.svelte';
        import { TooltipSide } from '$lib/enums';
@@ -34,6 +35,14 @@
 
        const isStripExpanded = $derived(isExpandedMode || hoveredTooltip !== null);
        const isOnMobile = $derived(isMobile.current);
+       const alwaysShowOnDesktop = $derived(config().alwaysShowSidebarOnDesktop as boolean);
+
+       // Keep the sidebar expanded on desktop when the user pins it open
+       $effect(() => {
+               if (alwaysShowOnDesktop && !isOnMobile) {
+                       isExpandedMode = true;
+               }
+       });
 
        function toggleExpandedMode() {
                isExpandedMode = !isExpandedMode;
@@ -183,7 +192,7 @@
                                />
                        </div>
 
-                       {#if isExpandedMode || isOnMobile}
+                       {#if isOnMobile || (isExpandedMode && !alwaysShowOnDesktop)}
                                <div
                                        class="flex items-center transition-all duration-150 ease-out {isMobile.current &&
                                        !isExpandedMode

diff --git a/tools/ui/src/routes/+layout.svelte b/tools/ui/src/routes/+layout.svelte
index f7993f5947f67404f9fe10f23e14ba251b1d6054..339b067dd2c1aa255b072961b28384345d97d4dc 100644 (file)
--- a/tools/ui/src/routes/+layout.svelte
+++ b/tools/ui/src/routes/+layout.svelte
@@ -33,8 +33,6 @@
        import { SETTINGS_KEYS } from '$lib/constants';
 
        let { children } = $props();
-       let alwaysShowSidebarOnDesktop = $derived(config().alwaysShowSidebarOnDesktop);
-       let isDesktop = $derived(!isMobile.current);
        let innerHeight = $state<number | undefined>();
        let innerWidth = $state(browser ? window.innerWidth : 0);
 
@@ -164,12 +162,6 @@
                updateFavicon();
        });
 
-       $effect(() => {
-               if (alwaysShowSidebarOnDesktop && isDesktop) {
-                       return;
-               }
-       });
-
        // Initialize server properties on app load (run once)
        $effect(() => {
                // Only fetch if we don't already have props