Skip to content

feat(web): tidy workspace menus, dock and sidebar controls #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kinqsradio merged 5 commits into from
Nov 3, 2026
Merged

feat(web): tidy workspace menus, dock and sidebar controls #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d6942ee
fix(web): anchor menus to the clicked trigger
luannn010 Nov 3, 2026
9c3020f
fix(web): keep the workspace shell exactly one screen tall
luannn010 Nov 3, 2026
99818e4
fix(web): anchor the task row menu to its trigger
kinqsradio Nov 3, 2026
96b3798
feat(web): tidy workspace menus, dock and sidebar controls
luannn010 Nov 3, 2026
e8e6562
fix(web): keep the rail account button labelled
kinqsradio Nov 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 108 additions & 87 deletions web/src/app/Shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,20 @@ import {
type StarredItem,
} from "@orbyn/core";
import {
ArrowUpDown,
Bell,
ChevronDown,
Keyboard,
MoreHorizontal,
LogOut,
Menu as MenuIcon,
Moon,
Orbit,
PanelLeftClose,
PanelLeftOpen,
Search,
Settings,
Sparkles,
Star,
Sun,
Table2,
Expand Down Expand Up @@ -566,6 +571,79 @@ export function Shell({
))}
</div>
);
// One account menu: in the sidebar on wide screens, the top bar when narrow.
const accountMenu = (where: "sidebar" | "topbar") => (
<Menu
label="Account"
side={where === "sidebar" ? "above" : "below"}
align={where === "sidebar" ? "start" : "end"}
fitTrigger={where === "sidebar" && !size.rail}
trigger={(open, expanded) => (
<button
className={`account account-${where}`}

@kinqsradio kinqsradio Nov 3, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the rail, .shell-nav-text is display: none and the avatar is aria-hidden, so the sidebar account button has no accessible name — aria-label is only set for the topbar variant. Set the label for the sidebar/rail case too. Consider adding aria-haspopup="menu" to this trigger for consistency with the other menu buttons.

aria-label={where === "topbar" || size.rail ? "Account" : undefined}
aria-haspopup="menu"
aria-expanded={expanded}
onClick={open}
>
<span className="avatar" aria-hidden="true">
{(user?.name || user?.email || "?").slice(0, 1).toUpperCase()}
</span>
<span className="row-title shell-nav-text">
{user?.name || user?.email}
</span>
</button>
)}
>
{(done) => (
<>
<button
onClick={() => {
done();
navigate("/app/settings");
close();
}}
>
<Settings aria-hidden="true" /> Settings
</button>
<button
onClick={() => {
done();
setShortcuts(true);
}}
>
<Keyboard aria-hidden="true" /> Keyboard shortcuts
</button>
<button
onClick={() => {
done();
setArranging(true);
}}
>
<ArrowUpDown aria-hidden="true" /> Arrange navigation
</button>
<button
onClick={() => {
done();
requestWhatsNew();
}}
>
<Sparkles aria-hidden="true" /> What's new
</button>
<div role="separator" />
<button
disabled={leaving}
onClick={() => {
done();
void logout();
}}
>
<LogOut aria-hidden="true" /> Sign out
</button>
</>
)}
</Menu>
);
return (
<div
className={`app${size.rail ? " shell-rail" : ""}`}
Expand All @@ -585,19 +663,32 @@ export function Shell({
/>
)}
<aside className={`sidebar${navOpen ? " is-open" : ""}`} id="navigation">
<a
className="brand"
href="/app"
aria-label="Orbyn, Today"
onClick={(event) => {
event.preventDefault();
navigate("/app");
close();
}}
>
<Orbit aria-hidden="true" />
<span className="shell-nav-text">orbyn</span>
</a>
<div className="sidebar-head">
<a
className="brand"
href="/app"
aria-label="Orbyn, Today"
onClick={(event) => {
event.preventDefault();
navigate("/app");
close();
}}
>
<Orbit aria-hidden="true" />
<span className="shell-nav-text">orbyn</span>
</a>
<IconButton
className="sidebar-collapse"
label={size.rail ? "Expand sidebar" : "Collapse sidebar"}
onClick={() => size.choose(size.rail ? 224 : 72)}
>
{size.rail ? (
<PanelLeftOpen aria-hidden="true" />
) : (
<PanelLeftClose aria-hidden="true" />
)}
</IconButton>
</div>
<nav aria-label="Main">
{composition.kind === "default" ? (
<>
Expand Down Expand Up @@ -637,78 +728,7 @@ export function Shell({
)
)}
</nav>
<div className="sidebar-foot">
<Button
aria-label={size.rail ? "Expand navigation" : "Use icon navigation"}
onClick={() => size.choose(size.rail ? 224 : 72)}
>
{size.rail ? "›" : "‹"}
<span className="shell-nav-text">Icon rail</span>
</Button>
<Button
onClick={() => setArranging(true)}
title="Arrange navigation"
aria-label="Arrange navigation"
>
⋮<span className="shell-nav-text">Arrange</span>
</Button>
<Menu
label="Account"
trigger={(open, expanded) => (
<button
className="account"
aria-expanded={expanded}
onClick={open}
>
<span className="avatar" aria-hidden="true">
{(user?.name || user?.email || "?").slice(0, 1).toUpperCase()}
</span>
<span className="row-title shell-nav-text">
{user?.name || user?.email}
</span>
</button>
)}
>
{(done) => (
<>
<button
onClick={() => {
done();
navigate("/app/settings");
close();
}}
>
<Settings aria-hidden="true" /> Settings
</button>
<button
onClick={() => {
done();
setShortcuts(true);
}}
>
Keyboard shortcuts
</button>
<button
onClick={() => {
done();
requestWhatsNew();
}}
>
What's new
</button>
<button
disabled={leaving}
onClick={() => {
done();
void logout();
}}
>
<LogOut aria-hidden="true" /> Sign out
</button>
</>
)}
</Menu>
</div>
<div className="sidebar-foot">{accountMenu("sidebar")}</div>
</aside>
<SidebarSize
width={size.width}
Expand Down Expand Up @@ -750,6 +770,7 @@ export function Shell({
</IconButton>
{unread > 0 && <i aria-hidden="true" />}
</span>
{accountMenu("topbar")}
</header>
<Banners isAdmin={isAdmin} />
<UpdateBanner
Expand Down Expand Up @@ -819,8 +840,8 @@ export function Shell({
<ArrangeNavigation
entries={[
...entries,
{ key: "Starred", label: "Starred" },
{ key: "Pinned views", label: "Pinned views" },
{ key: "Starred", label: "Starred", icon: Star },
{ key: "Pinned views", label: "Pinned views", icon: Table2 },
]}
onClose={() => setArranging(false)}
/>
Expand Down
8 changes: 6 additions & 2 deletions web/src/app/controls/Preferences.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { LucideIcon } from "lucide-react";
import {
assignShortcut,
shortcutConflicts,
Expand Down Expand Up @@ -242,7 +243,7 @@ export function ArrangeNavigation({
entries,
onClose,
}: {
entries: { label: string; key: string }[];
entries: { label: string; key: string; icon?: LucideIcon }[];
onClose(): void;
}) {
const read = usePrefs();
Expand Down Expand Up @@ -278,7 +279,10 @@ export function ArrangeNavigation({
<div className="shell-preference-list">
{all.map((entry, index) => (
<div className="shell-preference-row" key={entry.key}>
<span>{entry.label}</span>
<span className="shell-preference-name">
{entry.icon && <entry.icon aria-hidden="true" />}
{entry.label}
</span>
<label>
<input
type="checkbox"
Expand Down
58 changes: 58 additions & 0 deletions web/src/app/shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,33 @@
font: 800 19px var(--head);
letter-spacing: -0.03em;
}
/* Logo with the sidebar collapse toggle beside it; stacked when collapsed. */
.sidebar-head {
display: flex;
align-items: center;
gap: 4px;
padding-bottom: 4px;
}
.sidebar-head .brand {
flex: 1;
min-width: 0;
padding-bottom: 4px;
}
.sidebar-collapse {
flex: none;
color: var(--text-muted);
}
.shell-rail .sidebar-head {
flex-direction: column;
}
.shell-rail .sidebar-head .brand {
flex: none;
}
@media (max-width: 800px) {
.sidebar-collapse {
display: none;
}
}
.brand svg {
width: 22px;
height: 22px;
Expand Down Expand Up @@ -96,6 +123,26 @@
.account:hover {
background: var(--hover);
}
/* The top-bar avatar replaces the sidebar account row once the sidebar becomes a drawer. */
.account.account-topbar {
display: none;
width: 44px;
min-width: 44px;
justify-content: center;
padding: 0;
border-radius: 50%;
}
.account-topbar .row-title {
display: none;
}
@media (max-width: 800px) {
.account.account-sidebar {
display: none;
}
.account.account-topbar {
display: flex;
}
}
.avatar {
display: grid;
place-items: center;
Expand Down Expand Up @@ -393,6 +440,17 @@ main {
min-width: 140px;
overflow-wrap: anywhere;
}
.shell-preference-name {
display: flex;
align-items: center;
gap: 10px;
}
.shell-preference-name svg {
width: 16px;
height: 16px;
flex: none;
color: var(--text-muted);
}
.shell-preference-row small,
.shell-activity-row small {
display: block;
Expand Down
Loading
Loading