🤖 feat: replace theme toggle with settings gear button

_Generated with mux_

Author: ibetitsmike

src/browser/components/SettingsButton.tsx

@@ -0,0 +1,22 @@
+import { Settings } from "lucide-react";
+import { useSettings } from "@/browser/contexts/SettingsContext";
+import { TooltipWrapper, Tooltip } from "./Tooltip";
+
+export function SettingsButton() {
+  const { open } = useSettings();
+
+  return (
+    <TooltipWrapper>
+      <button
+        type="button"
+        onClick={() => open()}
+        className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-border-medium flex h-5 w-5 items-center justify-center rounded-md border bg-transparent transition-colors duration-150 focus-visible:ring-1"
+        aria-label="Open settings"
+        data-testid="settings-button"
+      >
+        <Settings className="h-3.5 w-3.5" aria-hidden />
+      </button>
+      <Tooltip align="right">Settings</Tooltip>
+    </TooltipWrapper>
+  );
+}

src/browser/components/TitleBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { cn } from "@/common/lib/utils";
 import { VERSION } from "@/version";
-import { ThemeToggleButton } from "./ThemeToggleButton";
+import { SettingsButton } from "./SettingsButton";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { UpdateStatus } from "@/common/types/ipc";
 import { isTelemetryEnabled } from "@/common/telemetry";
@@ -253,7 +253,7 @@ export function TitleBar() {
         </div>
       </div>
       <div className="flex items-center gap-3">
-        <ThemeToggleButton />
+        <SettingsButton />
         <TooltipWrapper>
           <div className="cursor-default text-[11px] opacity-70">{buildDate}</div>
           <Tooltip align="right">Built at {extendedTimestamp}</Tooltip>