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>
2026-06-24 10:21:33 +02:00
parent 88636e178f
commit ef9c13d4c2
88 changed files with 2122 additions and 2147 deletions
@@ -0,0 +1,72 @@
+import { browser } from '$app/environment';
+import { MEDIA_QUERIES } from '$lib/constants';
+
+/**
+ * iOS UA token detection.
+ *
+ * iPadOS 13+ ships a desktop macOS UA, so 'iPad' is no longer present in it;
+ * a Macintosh UA combined with touch support is treated as an iPad instead.
+ * Third-party iOS browsers (Chrome, Firefox, Edge) and in-app WKWebViews all
+ * run on WKWebView and emit their own tokens (CriOS/FxiOS/EdgiOS/GSA) instead
+ * of the trailing 'Safari/' the Safari app keeps.
+ */
+const UA_PATTERNS = {
+	IOS_PHONE: /iPhone|iPod/,
+	MACINTOSH: /Macintosh/,
+	SAFARI: /Safari/,
+	WEBVIEW_IOS: /CriOS|FxiOS|EdgiOS|GSA/
+} as const;
+
+interface DeviceContext {
+	/** Any iOS/iPadOS device, regardless of which app or browser embeds the page. */
+	isIOSDevice: boolean;
+	/** The Safari browser app on iOS, excluding other iOS browsers and WKWebViews. */
+	isIOSSafari: boolean;
+	/** Any WKWebView context on iOS: in-app browsers, embedded web views, and the
+	 *  third-party iOS browsers (all of which share the WKWebView engine). */
+	isWKWebView: boolean;
+	/** PWA standalone mode: the page was launched from the home screen icon. */
+	isStandalone: boolean;
+}
+
+const SERVER_DEFAULT: DeviceContext = {
+	isIOSDevice: false,
+	isIOSSafari: false,
+	isWKWebView: false,
+	isStandalone: false
+};
+
+function detect(): DeviceContext {
+	if (!browser) return SERVER_DEFAULT;
+
+	const ua = navigator.userAgent;
+	const isTouch = navigator.maxTouchPoints > 0;
+
+	const isIOSDevice = UA_PATTERNS.IOS_PHONE.test(ua) || (UA_PATTERNS.MACINTOSH.test(ua) && isTouch);
+
+	// Safari keeps 'Safari/' in the UA; non-Safari iOS browsers emit their own
+	// token instead. WKWebView typically omits 'Safari/' entirely.
+	const hasSafariToken = UA_PATTERNS.SAFARI.test(ua) && !UA_PATTERNS.WEBVIEW_IOS.test(ua);
+	const isIOSSafari = isIOSDevice && hasSafariToken;
+	const isWKWebView = isIOSDevice && !hasSafariToken;
+
+	// navigator.standalone is the legacy iOS-only flag (deprecated but still
+	// present); display-mode: standalone is the modern standard (Safari 16.4+).
+	const isStandalone =
+		window.matchMedia(MEDIA_QUERIES.DISPLAY_MODE_STANDALONE).matches ||
+		(navigator as Navigator & { standalone?: boolean }).standalone === true;
+
+	return { isIOSDevice, isIOSSafari, isWKWebView, isStandalone };
+}
+
+export const device = $state<DeviceContext>(detect());
+
+if (browser) {
+	// isStandalone can change at runtime (e.g. user installs the PWA while the
+	// tab is open); the UA-derived flags are static for the session.
+	const mql = window.matchMedia(MEDIA_QUERIES.DISPLAY_MODE_STANDALONE);
+
+	mql.addEventListener('change', (e) => {
+		device.isStandalone = e.matches;
+	});
+}
@@ -576,7 +576,7 @@ class ModelsStore {
 		}

 		// Try loading a favorite model
-		const favorite = this.favoriteModelIds.values().next()?.value
+		const favorite = this.favoriteModelIds.values().next()?.value;
 		if (favorite) {
 			await this.selectModelById(favorite);
 			return;