Add a settings icon beside the rail's user row

Co-Authored-By: Claude Opus 5.5 <[email protected]>

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>
+    );
+}

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,9 +26,10 @@ 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">
+            <Row className="w-full gap-1! flex-nowrap items-center">
                 <Dropdown
                     position="top-left"
-                className="w-full"
+                    className="grow min-w-0"
                     targetWrapperProps={{ className: "w-full" }}
                     target={
                         <Row
@@ -71,6 +74,8 @@ export default function RailUserRow() {
                 >
                     <RailUserMenu />
                 </Dropdown>
+                <RailSettingsButton />
+            </Row>
         </Stack>
     );
 }