Moduletrace/cobble
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases 32 Wiki Activity

Add a settings icon beside the rail's user row

Browse Source 
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
tben
2026-10-28 19:44:06 +01:00
co-authored by Claude Opus 5.5
parent f2710eb640
commit 913a87d23c
2 changed files with 75 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/bots/(partials)/rail-settings-button.tsx
+22
View File
@@ -0,0 +1,22 @@
import Button from "@moduletrace/twui/layout/Button";
import { Settings } from "lucide-react";
import { SettingsDefaultPath } from "@/src/dict/settings-pages-dict";
/**
* The settings icon beside the user row: a shortcut to the same place as
* the popover's Settings item. Hidden when the rail collapses.
*/
export default function RailSettingsButton() {
return (
<Button
href={SettingsDefaultPath}
title="Settings"
aria-label="Settings"
variant="ghost"
color="text"
className="hidden @rail:flex shrink-0 p-1.5! rounded-default-sm text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink hover:bg-sunken hover:dark:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:ring-2 focus-visible:ring-ink"
>
<Settings size={18} aria-hidden />
</Button>
);
}
src/layouts/bots/(partials)/rail-user-row.tsx
+53 -48
View File
@@ -8,10 +8,12 @@ import UserAvatar from "@/src/components/general/user-avatar";
import { AppContext } from "@/src/pages/__root";
import RailUserMenu from "./rail-user-menu";
import Tag from "@moduletrace/twui/elements/Tag";
import RailSettingsButton from "./rail-settings-button";
/**
* The signed-in user, opening the popover above. Its top rule sits at the
* same height as the composer rule, so the two read as one line.
* same height as the composer rule, so the two read as one line. A
* settings icon sits beside it.
*/
export default function RailUserRow() {
const { user, user_types } = useContext(AppContext);
@@ -24,53 +26,56 @@ export default function RailUserRow() {
return (
<Stack className="h-[88px] shrink-0 gap-0! items-stretch justify-center px-2 @rail:px-3 mx-0 @rail:mx-3 border-0 border-t border-solid border-hairline">
<Dropdown
position="top-left"
className="w-full"
targetWrapperProps={{ className: "w-full" }}
target={
<Row
role="button"
tabIndex={0}
aria-haspopup="menu"
aria-label={`Account menu for ${name}`}
className="w-full h-12 gap-3! flex-nowrap items-center rounded-default px-1 @rail:px-0 cursor-pointer hover:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
>
<UserAvatar
src={user?.image_thumbnail || user?.image}
img_err_src={user?.image}
initials={initials}
size="md"
/>
<Stack className="hidden @rail:flex grow min-w-0 gap-1">
<Span className="text-sm font-bold leading-5 text-ink truncate w-full">
{name}
</Span>
<Row className="-mt-1">
{user_types?.map((ut, indx) => {
return (
<Tag
key={indx}
variant="ghost"
color="gray"
className="p-0!"
>
{ut.user_type}
</Tag>
);
})}
</Row>
</Stack>
<ChevronRight
size={16}
className="hidden @rail:block shrink-0 text-ink"
aria-hidden
/>
</Row>
}
>
<RailUserMenu />
</Dropdown>
<Row className="w-full gap-1! flex-nowrap items-center">
<Dropdown
position="top-left"
className="grow min-w-0"
targetWrapperProps={{ className: "w-full" }}
target={
<Row
role="button"
tabIndex={0}
aria-haspopup="menu"
aria-label={`Account menu for ${name}`}
className="w-full h-12 gap-3! flex-nowrap items-center rounded-default px-1 @rail:px-0 cursor-pointer hover:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
>
<UserAvatar
src={user?.image_thumbnail || user?.image}
img_err_src={user?.image}
initials={initials}
size="md"
/>
<Stack className="hidden @rail:flex grow min-w-0 gap-1">
<Span className="text-sm font-bold leading-5 text-ink truncate w-full">
{name}
</Span>
<Row className="-mt-1">
{user_types?.map((ut, indx) => {
return (
<Tag
key={indx}
variant="ghost"
color="gray"
className="p-0!"
>
{ut.user_type}
</Tag>
);
})}
</Row>
</Stack>
<ChevronRight
size={16}
className="hidden @rail:block shrink-0 text-ink"
aria-hidden
/>
</Row>
}
>
<RailUserMenu />
</Dropdown>
<RailSettingsButton />
</Row>
</Stack>
);
}