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 { AppContext } from "@/src/pages/__root";
import RailUserMenu from "./rail-user-menu"; import RailUserMenu from "./rail-user-menu";
import Tag from "@moduletrace/twui/elements/Tag"; 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 * 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() { export default function RailUserRow() {
const { user, user_types } = useContext(AppContext); const { user, user_types } = useContext(AppContext);
@@ -24,53 +26,56 @@ export default function RailUserRow() {
return ( 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"> <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 <Row className="w-full gap-1! flex-nowrap items-center">
position="top-left" <Dropdown
className="w-full" position="top-left"
targetWrapperProps={{ className: "w-full" }} className="grow min-w-0"
target={ targetWrapperProps={{ className: "w-full" }}
<Row target={
role="button" <Row
tabIndex={0} role="button"
aria-haspopup="menu" tabIndex={0}
aria-label={`Account menu for ${name}`} aria-haspopup="menu"
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" 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} <UserAvatar
img_err_src={user?.image} src={user?.image_thumbnail || user?.image}
initials={initials} img_err_src={user?.image}
size="md" 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"> <Stack className="hidden @rail:flex grow min-w-0 gap-1">
{name} <Span className="text-sm font-bold leading-5 text-ink truncate w-full">
</Span> {name}
<Row className="-mt-1"> </Span>
{user_types?.map((ut, indx) => { <Row className="-mt-1">
return ( {user_types?.map((ut, indx) => {
<Tag return (
key={indx} <Tag
variant="ghost" key={indx}
color="gray" variant="ghost"
className="p-0!" color="gray"
> className="p-0!"
{ut.user_type} >
</Tag> {ut.user_type}
); </Tag>
})} );
</Row> })}
</Stack> </Row>
<ChevronRight </Stack>
size={16} <ChevronRight
className="hidden @rail:block shrink-0 text-ink" size={16}
aria-hidden className="hidden @rail:block shrink-0 text-ink"
/> aria-hidden
</Row> />
} </Row>
> }
<RailUserMenu /> >
</Dropdown> <RailUserMenu />
</Dropdown>
<RailSettingsButton />
</Row>
</Stack> </Stack>
); );
} }