From 0cd5ad749d9aed99cbf67252a9c3120bf97d445b Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Sat, 29 Nov 2025 15:15:00 +0100 Subject: [PATCH] refactor(shared-ui): use PillDropdown for app switcher MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace custom PillAppDropdown with standard PillDropdown - Add appItemsToDropdownItems helper function - Use grid icon for app switcher - Consistent styling with theme dropdown - Delete unused PillAppDropdown component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../web/src/routes/(protected)/+layout.svelte | 8 +- .../src/navigation/PillAppDropdown.svelte | 450 ------------------ .../src/navigation/PillNavigation.svelte | 63 ++- packages/shared-ui/src/navigation/index.ts | 1 - 4 files changed, 61 insertions(+), 461 deletions(-) delete mode 100644 packages/shared-ui/src/navigation/PillAppDropdown.svelte diff --git a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte index 4b8497e1b..b334af65b 100644 --- a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte +++ b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte @@ -49,16 +49,18 @@ // Current theme variant label let currentThemeVariantLabel = $derived(THEME_DEFINITIONS[theme.variant].label); - // Navigation items for Chat + // Navigation items for Chat (settings moved to user dropdown) const navItems: PillNavItem[] = [ { href: '/chat', label: 'Chat', icon: 'home' }, { href: '/templates', label: 'Templates', icon: 'document' }, { href: '/spaces', label: 'Spaces', icon: 'building' }, { href: '/documents', label: 'Dokumente', icon: 'archive' }, { href: '/archive', label: 'Archiv', icon: 'list' }, - { href: '/settings', label: 'Einstellungen', icon: 'settings' }, ]; + // User email for user dropdown + let userEmail = $derived(authStore.user?.email); + // Check if current page is a chat page (needs full-width layout) let isChatPage = $derived($page.url.pathname.startsWith('/chat')); @@ -183,6 +185,8 @@ primaryColor="#3b82f6" showAppSwitcher={true} {appItems} + {userEmail} + settingsHref="/settings" /> diff --git a/packages/shared-ui/src/navigation/PillAppDropdown.svelte b/packages/shared-ui/src/navigation/PillAppDropdown.svelte deleted file mode 100644 index 798483c63..000000000 --- a/packages/shared-ui/src/navigation/PillAppDropdown.svelte +++ /dev/null @@ -1,450 +0,0 @@ - - -
- - - - {#if isOpen} - - - - -
- - - Zur {currentAppName} Startseite - - - - - -
- - -
Mana Apps
- - -
- {#each apps as app, i (app.id)} - - {/each} -
-
- {/if} -
- - diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte index 86cd72d34..5cfcac7c9 100644 --- a/packages/shared-ui/src/navigation/PillNavigation.svelte +++ b/packages/shared-ui/src/navigation/PillNavigation.svelte @@ -3,7 +3,24 @@ import type { PillNavItem, PillDropdownItem, PillNavElement, PillTabGroupConfig, PillAppItem } from './types'; import PillDropdown from './PillDropdown.svelte'; import PillTabGroup from './PillTabGroup.svelte'; - import PillAppDropdown from './PillAppDropdown.svelte'; + + // Convert app items to dropdown items + function appItemsToDropdownItems(apps: PillAppItem[]): PillDropdownItem[] { + return apps.map((app) => ({ + id: app.id, + label: app.name, + onClick: () => { + if (app.isCurrent) { + // Navigate to home route for current app + window.location.href = '/'; + } else if (app.url) { + window.open(app.url, '_blank', 'noopener,noreferrer'); + } + }, + active: app.isCurrent, + disabled: false, + })); + } interface Props { /** Navigation items */ @@ -58,6 +75,10 @@ appItems?: PillAppItem[]; /** Show app switcher dropdown */ showAppSwitcher?: boolean; + /** User email for user dropdown */ + userEmail?: string; + /** Settings page href */ + settingsHref?: string; } let { @@ -87,6 +108,8 @@ onThemeModeChange, appItems = [], showAppSwitcher = false, + userEmail, + settingsHref = '/settings', }: Props = $props(); // Type guards for elements @@ -232,12 +255,11 @@ {#if showAppSwitcher && appItems.length > 0} - {:else} @@ -410,8 +432,33 @@ {/if} - - {#if onLogout && showLogout} + + {#if userEmail} + { + window.location.href = settingsHref; + }, + active: currentPath === settingsHref, + }, + { + id: 'logout', + label: 'Logout', + icon: 'logout', + onClick: () => onLogout?.(), + danger: true, + }, + ]} + direction="down" + label={userEmail} + icon="user" + /> + {:else if onLogout && showLogout} +