ui: New Logo + Navigation cleanup & Mobile UI/UX improvements by allozaur · Pull Request #24897 · ggml-org/llama.cpp

allozaur · 2026-06-22T07:01:14Z

Overview

Branding & PWA
- New Logo.svelte component wired into the sidebar toggle.
- Theme-aware favicon generation (scripts/favicon-colorize.ts) plus unit tests.
- Generated PWA assets now support configurable padding.
- Added PWA standalone-mode detection (stores/device.svelte.ts) so the UI can adapt when installed as an app.
Navigation
- Replaced the shadcn-style ui/sidebar library with a leaner custom SidebarNavigation.
- Extracted SidebarNavigationConversationList and SidebarNavigationSearchResults.
- Removed unused DesktopIconStrip and the shadcn sidebar component set.
Mobile UI/UX
- Major mobile layout overhaul: fixed sidebar overflow/visibility, improved iOS Safari spacing, and refined mobile chat layout.
- Added a dedicated /search route and mobile search page, reusing the search results component in the sidebar conversation list.
- Delayed mobile sidebar collapse for smoother transitions.
Chat scroll
- Heavy pass on desktop and mobile auto-scroll behavior: initial load, streaming, and after sending.
- Scroll-down button improvements.
- Disabled auto-scroll during streaming on mobile.
- Refactored ChatScreen into focused hooks (use-auto-scroll, use-chat-screen-*) for better separation of concerns.
Start UI
- Improved welcome/greeting screen.
- Added delay prop to fadeInView for smoother entry animations.
Cleanup
- Extracted chat dialogs and alerts into ChatScreenDialogsAndAlerts.
- Pruned dead components.

Additional information

Mobile Demo

mobile.demo_compressed.mp4

Desktop Demo

desktop.demo_compressed.mp4

Requirements

I have read and agree with the contributing guidelines
AI usage disclosure:

…ation

ServeurpersoCom · 2026-06-23T16:29:24Z

I'm updating my server to re-test

allozaur

Few cleanup thingys to address before merging

allozaur · 2026-06-23T16:26:38Z

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import * as viewport from '$lib/stores/viewport.svelte';


duplicate of isMobile.current.

We need to have only one store with this responsibility — now we have isMobile, device and viewport

allozaur · 2026-06-23T16:30:38Z

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>

atmosfar · 2026-06-25T17:18:30Z

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.

cora4 · 2026-07-04T17:14:12Z

Please bring back the Ctrl+B open/close sidebar shortcut

…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>

github-actions Bot added examples server/ui labels Jun 22, 2026

allozaur force-pushed the feat/update-logo-and-nav branch 3 times, most recently from 5a5c194 to 629e810 Compare June 23, 2026 07:30

allozaur added 25 commits June 23, 2026 10:46

chore: npm audit fix --force

e7cfcd4

feat: Update sidebar toggle to use Logo

b1c5139

refactor: Clean up favicon SVG

de72864

feat: Refactor logo component and implement theme-aware favicon gener…

152b9bc

…ation

feat: Add configurable padding to generated PWA assets

5a8d498

test: Add unit tests for writeThemeFavicons

9976f6f

refactor: Componentization

0a4918a

feat: WIP

3bfb7e8

feat: WIP

3d41709

feat: WIP

aca5f43

feat: Mobile UI

adcb88a

feat: add SEARCH route constant

8ae5a55

feat: create SidebarNavigationSearchResults component

73f8d59

refactor: use SidebarNavigationSearchResults in conversation list

33d8dfd

feat: enable mobile search navigation in sidebar actions

80cd323

feat: add mobile search route and page

ca903cd

fix: prevent sidebar overflow on mobile viewports

b588b96

fix: Mobile sidebar

0c73e88

feat: Mobile Search WIP

85174de

feat: Mobile WIP

4e6c307

feat: Add PWA standalone detection and refine mobile UI

2794cf1

feat: Improve mobile layout, sidebar handling, and chat scrolling

332ad9a

feat: Improve mobile sidebar visibility and iOS Safari chat spacing

0d859b1

fix: Disable auto-scroll on mobile

c352cab

chore: Linting

c5e9145

allozaur commented Jun 23, 2026

View reviewed changes

allozaur mentioned this pull request Jun 23, 2026

ui: fix accessibility for hover-gated interactive elements assisted b… #24727

Merged

allozaur and others added 8 commits June 24, 2026 00:06

fix: Use proper class

342d969

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

4a4f4e8

fix: update viewport store usage and remove conflicting autofocus

7b7473b

feat: add accessibility labels to scroll down button

b65cea2

fix: correct HTML structure in sidebar empty states

940e4bb

fix: dynamically toggle processing info visibility

d5a2c20

chore: remove commented exports and fix formatting

043864c

fix

0b85680

ggerganov approved these changes Jun 24, 2026

View reviewed changes

fix: Mobile Chat Form Add Action Sheet interactions

e33bdc5

allozaur requested a review from ggerganov June 24, 2026 08:13

allozaur changed the title ~~wip: Logo, navigation & mobile UI/UX improvements~~ ui: New Logo + Navigation cleanup & Mobile UI/UX improvements Jun 24, 2026

ggerganov approved these changes Jun 24, 2026

View reviewed changes

allozaur merged commit ef9c13d into ggml-org:master Jun 24, 2026
6 checks passed

allozaur deleted the feat/update-logo-and-nav branch June 24, 2026 08:21

This was referenced Jun 24, 2026

Misc. bug: ui: Add System Message option not working on certain vertical layouts #24620

Closed

Misc. bug: ui: Edit cursor jumps all over the place when editing long messages on iOS Safari #24698

Closed

ServeurpersoCom mentioned this pull request Jun 24, 2026

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

Merged

allozaur mentioned this pull request Jun 30, 2026

UI Bug: Scroll-down arrow remains visible if we go to new chat route from scrolled up chat id route #24335

Closed

ServeurpersoCom mentioned this pull request Jul 4, 2026

ui: restore Ctrl+B sidebar toggle shortcut #25307

Merged

Navigation Menu

Repository navigation

ui: New Logo + Navigation cleanup & Mobile UI/UX improvements - #24897

ui: New Logo + Navigation cleanup & Mobile UI/UX improvements#24897
allozaur merged 64 commits into
ggml-org:masterfrom
allozaur:feat/update-logo-and-nav

allozaur commented Jun 22, 2026 •

edited

Loading

Uh oh!

ServeurpersoCom commented Jun 23, 2026

Uh oh!

allozaur left a comment

Uh oh!

allozaur Jun 23, 2026

Uh oh!

Uh oh!

allozaur Jun 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

atmosfar commented Jun 25, 2026 •

edited

Loading

Uh oh!

cora4 commented Jul 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

		@@ -1,4 +1,5 @@
		<script lang="ts">
		import * as viewport from '$lib/stores/viewport.svelte';

Conversation

allozaur commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Additional information

Mobile Demo

Desktop Demo

Requirements

Uh oh!

ServeurpersoCom commented Jun 23, 2026

Uh oh!

allozaur left a comment

Choose a reason for hiding this comment

Uh oh!

allozaur Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

allozaur Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

atmosfar commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cora4 commented Jul 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

allozaur commented Jun 22, 2026 •

edited

Loading

atmosfar commented Jun 25, 2026 •

edited

Loading