Skip to content

A new look: avatars without the square, a bigger app, an account area and rounder corners - #16

Merged
httpsphl merged 4 commits into
mainfrom
feat/look
Sep 29, 2026
Merged

httpsphl merged 4 commits into
mainfrom
feat/look

Conversation

@httpsphl

Copy link
Copy Markdown
Owner

A new look for the app, in four commits. The first PR of a stack of six: each one after it builds on this one.

What changes

  • Avatars without the black square. A bot is now just the mascot in its color, with a thin edge (dark on the light theme, light on the dark one) so light colors keep their shape. Botloft's own white mascot keeps the black square of the app icon, since it would vanish on the light theme without it.
  • A bigger app, with a size setting. The whole window is drawn at 125% by default (the webview's zoom), so text, spacing, icons and avatars grow together; at 100% the app looked tiny on a monitor without Windows scaling. 100%, 110%, 125% and 150% are available, Ctrl+= and Ctrl+- step through them and Ctrl+0 goes back to the default. The choice is applied before the first paint, so the window never flashes small.
  • An account area at the bottom of the sidebar, like a chat app: the owner's Windows name, their Claude plan and a menu with Usage, Settings, Language, What's new and Help. Usage shows each window of the plan and when it resets; Settings holds the theme, size, language and versions. Theme, size and language leave the title bar, which keeps only the language on the setup screens. The daemon reads the display name once (GetUserNameExW) and the email, plan and organization from claude auth status, and sends them in system.status.account.
  • Rounder and softer. 8 px corners on buttons, fields and menu rows, 12 px on cards and menus, 16 px on the chat's bubbles, cards and dialogs. Menus and dialogs float on a light shadow that is stronger on the dark theme. The chat is a centered column with the day as a pill, and the open conversation in the sidebar is an inset rounded block. Menus share one popover look and one hook that closes them.

Spec: 15.1 (account area) and 15.3 (size, corners, shadow, identity).

Tested

  • cargo fmt, clippy -D warnings and cargo test pass; pnpm check passes.
  • Browser preview in the dark and light themes: avatars on both, the four sizes and the shortcuts, the account menu and its dialogs, and the new corners across the sidebar, chat, dialogs and menus.

To check in the installed app

  • The account area shows the Windows display name and the Claude plan of the signed-in account.

A bot's avatar is now just the mascot in its color, with a thin edge
(dark on the light theme, light on the dark one) so light colors such as
the palette's beige keep their shape. Botloft's own white mascot, in the
title bar and on the daemon's messages, keeps the black square of the
app icon: without it, it would vanish on the light theme.
The whole window is now drawn at 125% (the webview's zoom), so text,
spacing, icons and avatars grow together; at 100% the app looked tiny on
a monitor without Windows scaling. A Size menu in the title bar picks
100%, 110%, 125% or 150%, Ctrl+= and Ctrl+- step through them and Ctrl+0
goes back to the default. The choice is remembered and applied before
the first paint, so the window never flashes small.
Like the account corner of a chat app: the owner's name (the Windows
account's display name), their Claude plan and a menu with Usage,
Settings, Language, What's new and Help. Usage shows each window of the
plan the bots have used and when it resets; Settings holds the theme,
size and language, and the versions. Theme, size and language leave the
title bar, which keeps only the language on the setup screens that have
no sidebar. The sidebar now shows from the welcome screen on.

The daemon reads the owner's display name once (GetUserNameExW) and the
email, plan and organization from `claude auth status`, and sends them
in `system.status.account`.
Buttons, fields and menu rows get 8 px corners, cards and menus 12 px,
the chat's bubbles, cards and dialogs 16 px. Menus and dialogs float on
a light themed shadow. The chat is a centered column with the day as a
pill, and the open conversation in the sidebar is an inset rounded
block instead of a full-width bar. Menus share one popover look and one
hook that closes them.
@httpsphl
httpsphl enabled auto-merge September 29, 2026 04:25
@httpsphl
httpsphl merged commit b38710e into main Sep 29, 2026
3 checks passed
@httpsphl httpsphl mentioned this pull request Sep 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant