feat(chrome): put Settings beside update check and center unified-diff lines

src/chrome/ProjectRail.tsx

@@ -12,7 +12,6 @@ import {
   File,
   Plus,
   Search,
-  Settings,
   Trash2,
 } from "./icons";
 import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
@@ -471,16 +470,8 @@ export function ProjectRail({
             update={updateNotice}
             onOpenWhatsNew={onOpenWhatsNew}
             onDismissUpdate={onDismissUpdate}
+            onOpenSettings={onOpenSettings}
           />
-          <div className="flex shrink-0 flex-col gap-px p-2 pt-0">
-            <RailAction
-              label="Settings"
-              icon={Settings}
-              onClick={onOpenSettings}
-              shortcut={`${MOD},`}
-              ariaLabel={`Settings (${MOD},)`}
-            />
-          </div>
         </>
       )}
       {projectMenu ? (

src/chrome/Sidebar.tsx

@@ -10,7 +10,6 @@ import {
   Pin,
   Plus,
   Search,
-  Settings,
   StickyNote,
 } from "./icons";
 import {
@@ -113,7 +112,6 @@ import { ExplorerMenu, type ExplorerMenuItem } from "./ExplorerMenu";
 import { FileTree } from "./FileTree";
 import { HarnessIcon } from "./HarnessIcon";
 import { ProjectRail } from "./ProjectRail";
-import { RailAction } from "./RailAction";
 import { TerminalSpinner } from "./TerminalSpinner";
 import { DevModeSlot, IconButton, TabVisitNav } from "./TitleBar";
 import { ProjectSearch } from "./ProjectSearch";
@@ -1281,22 +1279,12 @@ function SidebarComponent({
           </div>
         ) : null}
         {showSidebarFooter ? (
-          <>
-            <SidebarUpdateFooter
-              update={updateNotice}
-              onOpenWhatsNew={onOpenWhatsNew}
-              onDismissUpdate={onDismissUpdate}
-            />
-            <div className="flex shrink-0 flex-col gap-px p-2 pt-0">
-              <RailAction
-                label="Settings"
-                icon={Settings}
-                onClick={onOpenSettings}
-                shortcut={`${MOD},`}
-                ariaLabel={`Settings (${MOD},)`}
-              />
-            </div>
-          </>
+          <SidebarUpdateFooter
+            update={updateNotice}
+            onOpenWhatsNew={onOpenWhatsNew}
+            onDismissUpdate={onDismissUpdate}
+            onOpenSettings={onOpenSettings}
+          />
         ) : null}
       </>
       {sessionMenu ? (

src/chrome/SidebarUpdate.tsx

@@ -1,4 +1,4 @@
-import { ArrowDownCircle, Loader, RefreshCw } from "./icons";
+import { ArrowDownCircle, Loader, RefreshCw, Settings } from "./icons";
 import { useCallback, useEffect, useState } from "react";
 import {
   installPendingUpdate,
@@ -8,16 +8,20 @@ import {
   type UpdaterSnapshot,
 } from "../lib/updater";
 import type { InstalledUpdate } from "../lib/updateNotice";
+import { MOD } from "../lib/platform";
+import { RailAction } from "./RailAction";
 import { UpdateRailCard } from "./UpdateRailCard";
 
 export function SidebarUpdateFooter({
   update,
   onOpenWhatsNew,
   onDismissUpdate,
+  onOpenSettings,
 }: {
   update?: InstalledUpdate | null;
   onOpenWhatsNew?: (version: string) => void;
   onDismissUpdate?: () => void;
+  onOpenSettings?: () => void;
 }) {
   return (
     <div className="flex flex-col gap-1.5 p-2 pb-1">
@@ -28,7 +32,16 @@ export function SidebarUpdateFooter({
           onDismiss={onDismissUpdate}
         />
       ) : null}
-      <SidebarUpdate />
+      <div className="flex items-center gap-1">
+        <RailAction
+          label="Settings"
+          icon={Settings}
+          onClick={onOpenSettings}
+          shortcut={`${MOD},`}
+          ariaLabel={`Settings (${MOD},)`}
+        />
+        <SidebarUpdate />
+      </div>
     </div>
   );
 }
@@ -93,39 +106,32 @@ export function SidebarUpdate() {
         ? `Downloading${snapshot.progress != null ? ` ${snapshot.progress}%` : "…"}`
         : "Checking…"
       : "Check for updates";
+  const title = `${label} · v${snapshot.currentVersion}`;
 
   return (
     <button
       type="button"
       onClick={onClick}
       disabled={busy}
-      className={`flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition-colors ${
+      title={title}
+      aria-label={title}
+      className={`grid size-8 shrink-0 place-items-center rounded-md transition-colors ${
         hasUpdate
           ? "bg-accent/15 text-content hover:bg-accent/20"
-          : "bg-content/5 text-content/75 hover:bg-content/10 hover:text-content"
+          : "text-content/50 hover:bg-content/10 hover:text-content"
       } disabled:cursor-default disabled:opacity-70`}
     >
-      <span className="grid size-[18px] shrink-0 place-items-center">
-        {busy ? (
-          <Loader className="size-4 animate-spin opacity-70" aria-hidden />
-        ) : hasUpdate ? (
-          <ArrowDownCircle className="size-4 text-accent" aria-hidden />
-        ) : (
-          <RefreshCw
-            className="size-4 opacity-70"
-            strokeWidth={1.75}
-            aria-hidden
-          />
-        )}
-      </span>
-      <span className="min-w-0 flex-1 flex items-center">
-        <span className="block truncate text-[12px] font-medium leading-tight">
-          {label}
-        </span>
-        <span className="ml-auto block text-[11px] text-content/40">
-          v{snapshot.currentVersion}
-        </span>
-      </span>
+      {busy ? (
+        <Loader className="size-4 animate-spin opacity-70" aria-hidden />
+      ) : hasUpdate ? (
+        <ArrowDownCircle className="size-4 text-accent" aria-hidden />
+      ) : (
+        <RefreshCw
+          className="size-4 opacity-70"
+          strokeWidth={1.75}
+          aria-hidden
+        />
+      )}
     </button>
   );
 }

src/surfaces/UnifiedDiffView.tsx

@@ -894,9 +894,12 @@ const DiffLineRow = memo(function DiffLineRow({
 }) {
   if (line.kind === "hunk") {
     return (
-      <div className="bg-content/5" style={{ height: UNIFIED_HUNK_PX }}>
+      <div
+        className="flex items-center bg-content/5"
+        style={{ height: UNIFIED_HUNK_PX }}
+      >
         {lane === "code" ? (
-          <span className="px-3 font-mono text-[11px] leading-5 text-content/40">
+          <span className="px-3 font-mono text-[11px] leading-none text-content/40">
             {line.text}
           </span>
         ) : null}
@@ -920,15 +923,17 @@ const DiffLineRow = memo(function DiffLineRow({
 
   if (lane === "gutter") {
     return (
-      <div className={`relative ${row}`} style={{ height: UNIFIED_LINE_PX }}>
+      <div
+        className={`relative flex items-center ${row}`}
+        style={{ height: UNIFIED_LINE_PX }}
+      >
         {gutterTint ? (
           <span
             className={`pointer-events-none absolute inset-0 ${gutterTint}`}
           />
         ) : null}
         <span
-          className={`relative block pr-2 text-right font-mono text-[11px] tabular-nums ${gutterText}`}
-          style={{ lineHeight: `${UNIFIED_LINE_PX}px` }}
+          className={`relative block w-full pr-2 text-right font-mono text-[11px] leading-none tabular-nums ${gutterText}`}
         >
           {number ?? ""}
         </span>
@@ -967,12 +972,14 @@ const DiffLineRow = memo(function DiffLineRow({
   }
 
   return (
-    <div className={row} style={{ height: UNIFIED_LINE_PX }}>
+    <div
+      className={`flex items-center ${row}`}
+      style={{ height: UNIFIED_LINE_PX }}
+    >
       <span
-        className={`whitespace-pre px-3 font-mono text-[12px] text-content/80 ${
+        className={`whitespace-pre px-3 font-mono text-[12px] leading-none text-content/80 ${
           line.kind === "context" ? "opacity-70" : ""
         }`}
-        style={{ lineHeight: `${UNIFIED_LINE_PX}px` }}
       >
         {renderLineText(line, tokens)}
       </span>