From 913a87d23c5aec6c6b16c6fdcbfe00da6bf3876d Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Wed, 28 Oct 2026 19:44:06 +0100
Subject: [PATCH] Add a settings icon beside the rail's user row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../bots/(partials)/rail-settings-button.tsx  |  22 ++++
 src/layouts/bots/(partials)/rail-user-row.tsx | 101 +++++++++---------
 2 files changed, 75 insertions(+), 48 deletions(-)
 create mode 100644 src/layouts/bots/(partials)/rail-settings-button.tsx

diff --git a/src/layouts/bots/(partials)/rail-settings-button.tsx b/src/layouts/bots/(partials)/rail-settings-button.tsx
new file mode 100644
index 0000000..6154bf7
--- /dev/null
+++ b/src/layouts/bots/(partials)/rail-settings-button.tsx
@@ -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>
+    );
+}
diff --git a/src/layouts/bots/(partials)/rail-user-row.tsx b/src/layouts/bots/(partials)/rail-user-row.tsx
index e04e44c..59e15c0 100644
--- a/src/layouts/bots/(partials)/rail-user-row.tsx
+++ b/src/layouts/bots/(partials)/rail-user-row.tsx
@@ -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>
     );
 }