ui: New Logo + Navigation cleanup & Mobile UI/UX improvements (#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>

tools/ui/src/lib/constants/pwa.ts

@@ -7,7 +7,8 @@ import { APP_NAME } from './app';
 
 export const MEDIA_QUERIES = {
 	PREFERS_DARK: '(prefers-color-scheme: dark)',
-	PREFERS_LIGHT: '(prefers-color-scheme: light)'
+	PREFERS_LIGHT: '(prefers-color-scheme: light)',
+	DISPLAY_MODE_STANDALONE: '(display-mode: standalone)'
 } as const;
 
 export const THEME_COLORS = {
@@ -34,6 +35,13 @@ export const FAVICON_PATHS = {
 	SVG_DARK: 'favicon-dark.svg'
 } as const;
 
+// Substituted for `currentColor` in src/lib/assets/logo.svg when generating
+// the light/dark static sources consumed by the PWA asset generator.
+export const FAVICON_COLORS = {
+	LIGHT: '#111111',
+	DARK: '#fafafa'
+} as const;
+
 export const FAVICON_SELECTORS = {
 	ICO_48X48: 'link[rel="icon"][sizes="48x48"]',
 	SVG_ANY: 'link[rel="icon"][type="image/svg+xml"]'
@@ -222,8 +230,13 @@ export const PWA_GENERATOR_DEVICES = [
 ] as const;
 
 // PWA assets generator configuration — used by pwa-assets.config.ts
+// FAVICON_PADDING: fraction (0..1) of the icon reserved as equal margin on
+// each side. Applied to icon PNG/ICO outputs by @vite-pwa/assets-generator and
+// post-processed into the static favicon.svg so the in-app logo (which reads
+// src/lib/assets/logo.svg directly) is unaffected.
 export const PWA_ASSET_GENERATOR = {
 	LINK_PRESET: '2023',
+	FAVICON_PADDING: 0.04,
 	SPLASH_PADDING: 0.75,
 	FIT_MODE: 'contain',
 	ADD_MEDIA_SCREEN: true,

tools/ui/src/lib/constants/routes.ts

@@ -23,5 +23,7 @@ export const ROUTES = {
 	/** MCP servers. */
 	MCP_SERVERS: '#/mcp-servers',
 	/** Settings base — for dynamic settings URLs use RouterService. */
-	SETTINGS: '#/settings'
+	SETTINGS: '#/settings',
+	/** Search — mobile-only full-page conversation search. */
+	SEARCH: '#/search'
 } as const;

tools/ui/src/lib/constants/ui.ts

@@ -1,4 +1,4 @@
-import { Settings, Search, SquarePen } from '@lucide/svelte';
+import { Search, Settings, SquarePen } from '@lucide/svelte';
 import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
 import type { Component } from 'svelte';
 import { ROUTES } from './routes';
@@ -15,6 +15,7 @@ export interface DesktopIconStripItem {
 	route?: string;
 	activeRouteId?: string;
 	activeRoutePrefix?: string;
+	activeUrlIncludes?: string;
 	keys?: string[];
 }
 
@@ -30,7 +31,7 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 	{
 		icon: Settings,
 		tooltip: 'Settings',
-		route: ROUTES.SETTINGS,
-		activeRoutePrefix: '/settings'
+		route: `${ROUTES.SETTINGS}/general`,
+		activeUrlIncludes: '#/settings'
 	}
 ];