ui: New Logo + Navigation cleanup & Mobile UI/UX improvements#24897
Conversation
5a5c194 to
629e810
Compare
There was a problem hiding this comment.
Pull request overview
This PR modernizes the UI’s branding/navigation stack and refactors chat/mobile behavior, including generating theme-aware PWA assets and introducing a mobile-only /search route. It also removes the existing shadcn-style ui/sidebar component set in favor of a custom SidebarNavigation implementation and splits large chat logic into smaller hooks.
Changes:
- Add theme-aware favicon generation + padding support (with unit tests) and wire it into PWA asset generation.
- Replace shadcn sidebar infrastructure with a custom
SidebarNavigation(plus extracted conversation/search result subcomponents) and introduce a mobile/searchpage. - Refactor ChatScreen behavior (scroll, model capability resolution, file upload, drag-and-drop) into focused hooks and adjust mobile/desktop scroll + focus behavior.
Reviewed changes
Copilot reviewed 82 out of 86 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/ui/tests/unit/favicon-colorize.test.ts | Adds unit tests for SVG colorization/padding + favicon writing. |
| tools/ui/tests/stories/SidebarNavigation.stories.svelte | Updates Storybook stories to match new sidebar implementation. |
| tools/ui/tests/client/components/TestWrapper.svelte | Removes shadcn sidebar provider from test wrapper. |
| tools/ui/static/favicon.svg | Removes committed light favicon SVG (now generated). |
| tools/ui/static/favicon-dark.svg | Removes committed dark favicon SVG (now generated). |
| tools/ui/src/routes/settings/+layout.svelte | Adjusts mobile close-button layout for settings routes. |
| tools/ui/src/routes/settings/[[section]]/+page.svelte | Switches settings default-section redirect timing to navigation hook. |
| tools/ui/src/routes/search/+page.svelte | Adds a mobile-only full-page conversation search route. |
| tools/ui/src/routes/+layout.svelte | Reworks app layout to always render new SidebarNavigation + adjusts PWA prompt placement. |
| tools/ui/src/lib/stores/models.svelte.ts | Minor formatting fix (semicolon). |
| tools/ui/src/lib/stores/device.svelte.ts | Adds device context detection including standalone-mode (PWA) detection. |
| tools/ui/src/lib/hooks/use-models-selector.svelte.ts | Prevents textarea focus from scrolling the page. |
| tools/ui/src/lib/hooks/use-chat-screen-scroll.svelte.ts | New hook to bind scroll container + guard auto-scroll around navigation. |
| tools/ui/src/lib/hooks/use-chat-screen-file-upload.svelte.ts | New hook encapsulating ChatScreen file upload lifecycle + validation. |
| tools/ui/src/lib/hooks/use-chat-screen-drag-and-drop.svelte.ts | New hook implementing drag-and-drop state machine for ChatScreen. |
| tools/ui/src/lib/hooks/use-chat-screen-active-model.svelte.ts | New hook for active model selection + capability detection. |
| tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts | Adjusts reset behavior to respect disabled state and sync scroll position. |
| tools/ui/src/lib/constants/ui.ts | Updates action item routing/active detection rules. |
| tools/ui/src/lib/constants/routes.ts | Adds ROUTES.SEARCH. |
| tools/ui/src/lib/constants/pwa.ts | Adds display-mode media query, favicon color constants, favicon padding config. |
| tools/ui/src/lib/components/ui/sidebar/sidebar.svelte | Removes shadcn sidebar root component. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-trigger.svelte | Removes shadcn sidebar trigger. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-separator.svelte | Removes shadcn sidebar separator. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-rail.svelte | Removes shadcn sidebar rail. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-provider.svelte | Removes shadcn sidebar provider/context wiring. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu.svelte | Removes shadcn sidebar menu. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte | Removes shadcn sidebar submenu. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte | Removes shadcn sidebar submenu item. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte | Removes shadcn sidebar submenu button. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte | Removes shadcn sidebar menu skeleton. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte | Removes shadcn sidebar menu item. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte | Removes shadcn sidebar menu button. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte | Removes shadcn sidebar menu badge. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte | Removes shadcn sidebar menu action. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-inset.svelte | Removes shadcn sidebar inset layout. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-input.svelte | Removes shadcn sidebar input. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-header.svelte | Removes shadcn sidebar header. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-group.svelte | Removes shadcn sidebar group. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-group-label.svelte | Removes shadcn sidebar group label. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-group-content.svelte | Removes shadcn sidebar group content. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-group-action.svelte | Removes shadcn sidebar group action. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-footer.svelte | Removes shadcn sidebar footer. |
| tools/ui/src/lib/components/ui/sidebar/sidebar-content.svelte | Removes shadcn sidebar content. |
| tools/ui/src/lib/components/ui/sidebar/index.ts | Removes shadcn sidebar barrel exports. |
| tools/ui/src/lib/components/ui/sidebar/context.svelte.ts | Removes shadcn sidebar context implementation. |
| tools/ui/src/lib/components/ui/sidebar/constants.ts | Removes shadcn sidebar constants. |
| tools/ui/src/lib/components/ui/button/button.svelte | Updates button sizing style for lg. |
| tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte | Updates MCP Servers page layout + adds mobile close behavior. |
| tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte | Tweaks settings sidebar spacing/typography. |
| tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte | Adjusts settings chat container layout/overflow. |
| tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearchResults.svelte | New presentational component for search results list. |
| tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearch.svelte | Wraps search input with padding container. |
| tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationList.svelte | New grouped list component (Pinned + Recent) and search-mode rendering. |
| tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte | Reworks action strip/buttons for expanded vs collapsed navigation modes. |
| tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte | Major rewrite of sidebar navigation layout and mobile/desktop behavior. |
| tools/ui/src/lib/components/app/navigation/index.ts | Removes DesktopIconStrip export and adds new navigation exports. |
| tools/ui/src/lib/components/app/navigation/DesktopIconStrip.svelte | Removes desktop icon strip component. |
| tools/ui/src/lib/components/app/misc/Logo.svelte | Adds inline SVG logo component. |
| tools/ui/src/lib/components/app/misc/index.ts | Exports new Logo component. |
| tools/ui/src/lib/components/app/forms/SearchInput.svelte | Adds autofocus prop and prevents scroll on focus. |
| tools/ui/src/lib/components/app/chat/index.ts | Removes exported ChatScreenActionScrollDown doc/export. |
| tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte | Alters processing info visibility behavior. |
| tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenGreeting.svelte | Updates empty-state layout and removes fade-in action usage. |
| tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte | Adds form height observation and changes focus timing on mobile/desktop. |
| tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDialogsAndAlerts.svelte | New component extracting dialogs/alerts from ChatScreen. |
| tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte | Simplifies scroll-down action to a reusable ActionIcon. |
| tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte | Large refactor: hooks, scroll handling, and mobile-specific behaviors. |
| tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte | Tweaks fade delay behavior based on navigation origin and layout width. |
| tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte | Adjusts user bubble styling and max-height behavior. |
| tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte | Adds class hook used by scroll/layout logic. |
| tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte | Adds layout measurements to enforce assistant message min-height. |
| tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte | Adds wrapper class and prevents scroll on textarea focus. |
| tools/ui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte | Alters focus behavior, introduces viewport import, adds autofocus attribute. |
| tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte | Adjusts submit button sizing for mobile/desktop. |
| tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte | Adjusts add/upload button sizing for mobile/desktop. |
| tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte | Tweaks chat form container sizing/rounding. |
| tools/ui/src/lib/components/app/actions/ActionIcon.svelte | Makes tooltip/onclick optional, adds href support, gates tooltips on desktop width. |
| tools/ui/src/lib/assets/logo.svg | Adds new logo SVG asset using currentColor. |
| tools/ui/src/lib/actions/fade-in-view.svelte.ts | Adds delay option to fade-in-view action. |
| tools/ui/src/app.css | Adjusts chat form CSS vars, removes global overflow hidden, hides Mermaid tooltips. |
| tools/ui/scripts/favicon-colorize.ts | Adds script to colorize/pad logo SVG into theme favicons. |
| tools/ui/pwa-assets.config.ts | Wires in favicon generation and configurable padding for PWA assets. |
| tools/ui/pwa-assets-dark.config.ts | Wires in favicon generation and configurable padding for dark assets. |
| tools/ui/package.json | Bumps dompurify dependency version. |
| tools/ui/package-lock.json | Locks updated dompurify + hono versions. |
| tools/ui/.gitignore | Updates ignored PWA artifacts and static favicon outputs. |
Files not reviewed (1)
- tools/ui/package-lock.json: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
I'm updating my server to re-test |
allozaur
left a comment
There was a problem hiding this comment.
Few cleanup thingys to address before merging
| @@ -1,4 +1,5 @@ | |||
| <script lang="ts"> | |||
| import * as viewport from '$lib/stores/viewport.svelte'; | |||
There was a problem hiding this comment.
duplicate of isMobile.current.
We need to have only one store with this responsibility — now we have isMobile, device and viewport
There was a problem hiding this comment.
some dead/legacy code to be cleanued up there..
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…rg#24897) * chore: `npm audit fix --force` * feat: Update sidebar toggle to use Logo * refactor: Clean up favicon SVG * feat: Refactor logo component and implement theme-aware favicon generation * feat: Add configurable padding to generated PWA assets * test: Add unit tests for writeThemeFavicons * refactor: Componentization * feat: WIP * feat: WIP * feat: WIP * feat: Mobile UI * feat: add SEARCH route constant * feat: create SidebarNavigationSearchResults component * refactor: use SidebarNavigationSearchResults in conversation list * feat: enable mobile search navigation in sidebar actions * feat: add mobile search route and page * fix: prevent sidebar overflow on mobile viewports * fix: Mobile sidebar * feat: Mobile Search WIP * feat: Mobile WIP * feat: Add PWA standalone detection and refine mobile UI * feat: Improve mobile layout, sidebar handling, and chat scrolling * feat: Improve mobile sidebar visibility and iOS Safari chat spacing * fix: Disable auto-scroll on mobile * chore: Linting * fix: Wrong condition * feat: Mobile chat scroll * refactor: WIP * fix: Desktop initial scroll always working again * fix: Partial fix for mobile auto-scroll / initial scroll * fix: Desktop auto-scroll on initial load and during streaming * fix: Mobile scrolling logic * refactor: Clean up * feat: Improve start UI * feat: Add `delay` to `fadeInView` * feat: Auto-scroll button * refactor: Cleanup * refactor: Extract chat dialogs and alerts into dedicated component * refactor: Reorganize ChatScreen component structure and initialization * feat: Improve auto-scroll after sending message * feat: UI improvements * fix: Settings link * feat: UI improvements * fix: better UI spacing * fix: Remove unneeded logic * fix: Chat Processing Info UI rendering * feat: Improve mobile UI * feat: UI improvement * fix: Conditional transition delay for Chat Messages based on route from * fix: Delay mobile sidebar collapse for smoother transitions * fix: Mobile scroll down button + sidebar pointer events * fix: Mobile UI * fix: Auto scrolling * fix: Implement dynamic height calculations for chat auto-scroll positioning and UI elements * fix: Retrieve `autofocus` for Chat Form textarea * fix: Use proper class Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * refactor: extract scroll-to-bottom logic and fix message send flow * fix: update viewport store usage and remove conflicting autofocus * feat: add accessibility labels to scroll down button * fix: correct HTML structure in sidebar empty states * fix: dynamically toggle processing info visibility * chore: remove commented exports and fix formatting * fix * fix: Mobile Chat Form Add Action Sheet interactions --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
I feel like using the logo as the sidebar menu button is kinda confusing. Especially since it has no visible background to demarcate it from the body background as an actual button rather than just a logo. I can see in the demo video that there is a blurred circle behind it when rolled over text, but even that isn't especially clear. For reference, https://duck.ai/ uses a horizontal-lines hambuger menu type icon to open the sidebar, and then reveals their logo when inside. Don't get me wrong it's a nice logo, I just think it isn't very clear that it is part of the navigation flow. |
…rg#24897) * chore: `npm audit fix --force` * feat: Update sidebar toggle to use Logo * refactor: Clean up favicon SVG * feat: Refactor logo component and implement theme-aware favicon generation * feat: Add configurable padding to generated PWA assets * test: Add unit tests for writeThemeFavicons * refactor: Componentization * feat: WIP * feat: WIP * feat: WIP * feat: Mobile UI * feat: add SEARCH route constant * feat: create SidebarNavigationSearchResults component * refactor: use SidebarNavigationSearchResults in conversation list * feat: enable mobile search navigation in sidebar actions * feat: add mobile search route and page * fix: prevent sidebar overflow on mobile viewports * fix: Mobile sidebar * feat: Mobile Search WIP * feat: Mobile WIP * feat: Add PWA standalone detection and refine mobile UI * feat: Improve mobile layout, sidebar handling, and chat scrolling * feat: Improve mobile sidebar visibility and iOS Safari chat spacing * fix: Disable auto-scroll on mobile * chore: Linting * fix: Wrong condition * feat: Mobile chat scroll * refactor: WIP * fix: Desktop initial scroll always working again * fix: Partial fix for mobile auto-scroll / initial scroll * fix: Desktop auto-scroll on initial load and during streaming * fix: Mobile scrolling logic * refactor: Clean up * feat: Improve start UI * feat: Add `delay` to `fadeInView` * feat: Auto-scroll button * refactor: Cleanup * refactor: Extract chat dialogs and alerts into dedicated component * refactor: Reorganize ChatScreen component structure and initialization * feat: Improve auto-scroll after sending message * feat: UI improvements * fix: Settings link * feat: UI improvements * fix: better UI spacing * fix: Remove unneeded logic * fix: Chat Processing Info UI rendering * feat: Improve mobile UI * feat: UI improvement * fix: Conditional transition delay for Chat Messages based on route from * fix: Delay mobile sidebar collapse for smoother transitions * fix: Mobile scroll down button + sidebar pointer events * fix: Mobile UI * fix: Auto scrolling * fix: Implement dynamic height calculations for chat auto-scroll positioning and UI elements * fix: Retrieve `autofocus` for Chat Form textarea * fix: Use proper class Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * refactor: extract scroll-to-bottom logic and fix message send flow * fix: update viewport store usage and remove conflicting autofocus * feat: add accessibility labels to scroll down button * fix: correct HTML structure in sidebar empty states * fix: dynamically toggle processing info visibility * chore: remove commented exports and fix formatting * fix * fix: Mobile Chat Form Add Action Sheet interactions --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Please bring back the |
…rg#24897) * chore: `npm audit fix --force` * feat: Update sidebar toggle to use Logo * refactor: Clean up favicon SVG * feat: Refactor logo component and implement theme-aware favicon generation * feat: Add configurable padding to generated PWA assets * test: Add unit tests for writeThemeFavicons * refactor: Componentization * feat: WIP * feat: WIP * feat: WIP * feat: Mobile UI * feat: add SEARCH route constant * feat: create SidebarNavigationSearchResults component * refactor: use SidebarNavigationSearchResults in conversation list * feat: enable mobile search navigation in sidebar actions * feat: add mobile search route and page * fix: prevent sidebar overflow on mobile viewports * fix: Mobile sidebar * feat: Mobile Search WIP * feat: Mobile WIP * feat: Add PWA standalone detection and refine mobile UI * feat: Improve mobile layout, sidebar handling, and chat scrolling * feat: Improve mobile sidebar visibility and iOS Safari chat spacing * fix: Disable auto-scroll on mobile * chore: Linting * fix: Wrong condition * feat: Mobile chat scroll * refactor: WIP * fix: Desktop initial scroll always working again * fix: Partial fix for mobile auto-scroll / initial scroll * fix: Desktop auto-scroll on initial load and during streaming * fix: Mobile scrolling logic * refactor: Clean up * feat: Improve start UI * feat: Add `delay` to `fadeInView` * feat: Auto-scroll button * refactor: Cleanup * refactor: Extract chat dialogs and alerts into dedicated component * refactor: Reorganize ChatScreen component structure and initialization * feat: Improve auto-scroll after sending message * feat: UI improvements * fix: Settings link * feat: UI improvements * fix: better UI spacing * fix: Remove unneeded logic * fix: Chat Processing Info UI rendering * feat: Improve mobile UI * feat: UI improvement * fix: Conditional transition delay for Chat Messages based on route from * fix: Delay mobile sidebar collapse for smoother transitions * fix: Mobile scroll down button + sidebar pointer events * fix: Mobile UI * fix: Auto scrolling * fix: Implement dynamic height calculations for chat auto-scroll positioning and UI elements * fix: Retrieve `autofocus` for Chat Form textarea * fix: Use proper class Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * refactor: extract scroll-to-bottom logic and fix message send flow * fix: update viewport store usage and remove conflicting autofocus * feat: add accessibility labels to scroll down button * fix: correct HTML structure in sidebar empty states * fix: dynamically toggle processing info visibility * chore: remove commented exports and fix formatting * fix * fix: Mobile Chat Form Add Action Sheet interactions --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Overview
Branding & PWA
Logo.sveltecomponent wired into the sidebar toggle.scripts/favicon-colorize.ts) plus unit tests.stores/device.svelte.ts) so the UI can adapt when installed as an app.Navigation
ui/sidebarlibrary with a leaner customSidebarNavigation.SidebarNavigationConversationListandSidebarNavigationSearchResults.DesktopIconStripand the shadcn sidebar component set.Mobile UI/UX
/searchroute and mobile search page, reusing the search results component in the sidebar conversation list.Chat scroll
ChatScreeninto focused hooks (use-auto-scroll,use-chat-screen-*) for better separation of concerns.Start UI
delayprop tofadeInViewfor smoother entry animations.Cleanup
ChatScreenDialogsAndAlerts.Additional information
Mobile Demo
mobile.demo_compressed.mp4
Desktop Demo
desktop.demo_compressed.mp4
Requirements