fix(design): the nav rail's footer rows (language, About, Sign out) share the rail row and glyph (E28)

frontend/src/components/ui/NavRail.tsx

@@ -62,6 +62,9 @@ export function NavRailDivider() {
   return <div className="mx-auto my-1.5 w-7 shrink-0 border-t-2 border-border" />;
 }
 
+/** The glyph of every rail row: a page, an action, the language switcher. */
+export const RAIL_GLYPH = "size-4.5";
+
 /** The shape of one rail row, for a row that is not a page (the account button). */
 export const RAIL_ROW =
   "relative flex w-full flex-col items-center justify-center gap-0.5 rounded-lg transition touch-target";
@@ -112,7 +115,7 @@ export function NavRailItem({
           />
         )}
         <span className="relative shrink-0">
-          <Icon className="size-4.5" aria-hidden="true" />
+          <Icon className={RAIL_GLYPH} aria-hidden="true" />
           {shown && (
             <span className="absolute -top-2 -right-2 grid h-4 min-w-4 place-items-center rounded-full bg-accent px-1 text-3xs leading-none font-bold text-accent-fg ring-2 ring-bg">
               {badge > 9 ? "9+" : badge}
@@ -128,3 +131,28 @@ export function NavRailItem({
     </Tooltip>
   );
 }
+
+/** A rail row that acts instead of navigating (About, Sign out): the page rows' geometry and glyph, so
+ *  the column keeps one rhythm (F32: toolbar icon buttons here drew 32 squares with 16px glyphs). */
+export function NavRailAction({
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  icon: LucideIcon;
+  /** The tooltip and the accessible name. */
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip hint={label} side="right" always openDelay={350}>
+      <Pressable
+        onClick={onClick}
+        aria-label={label}
+        className={clsx(RAIL_ROW, "h-9 text-muted state-layer hover:text-fg")}
+      >
+        <Icon className={RAIL_GLYPH} aria-hidden="true" />
+      </Pressable>
+    </Tooltip>
+  );
+}