fix: menu bar and dock icon settings (#2490)

Co-authored-by: Zane Staggs <zane@squareup.com>

ui/desktop/src/components/settings_v2/SettingsView.tsx

@@ -7,6 +7,7 @@ import { ModeSection } from './mode/ModeSection';
 import { ToolSelectionStrategySection } from './tool_selection_strategy/ToolSelectionStrategySection';
 import SessionSharingSection from './sessions/SessionSharingSection';
 import { ResponseStylesSection } from './response_styles/ResponseStylesSection';
+import AppSettingsSection from './app/AppSettingsSection';
 import { ExtensionConfig } from '../../api';
 import MoreMenuLayout from '../more_menu/MoreMenuLayout';
 
@@ -53,6 +54,8 @@ export default function SettingsView({
               <ResponseStylesSection />
               {/* Tool Selection Strategy */}
               <ToolSelectionStrategySection setView={setView} />
+              {/* App Settings */}
+              <AppSettingsSection />
             </div>
           </div>
         </div>

ui/desktop/src/components/settings_v2/app/AppSettingsSection.tsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from 'react';
+import { Switch } from '../../ui/switch';
+
+export default function AppSettingsSection() {
+  const [menuBarIconEnabled, setMenuBarIconEnabled] = useState(true);
+  const [dockIconEnabled, setDockIconEnabled] = useState(true);
+  const [isMacOS, setIsMacOS] = useState(false);
+  const [isDockSwitchDisabled, setIsDockSwitchDisabled] = useState(false);
+
+  // Check if running on macOS
+  useEffect(() => {
+    setIsMacOS(window.electron.platform === 'darwin');
+  }, []);
+
+  // Load menu bar and dock icon states
+  useEffect(() => {
+    window.electron.getMenuBarIconState().then((enabled) => {
+      setMenuBarIconEnabled(enabled);
+    });
+
+    if (isMacOS) {
+      window.electron.getDockIconState().then((enabled) => {
+        setDockIconEnabled(enabled);
+      });
+    }
+  }, [isMacOS]);
+
+  const handleMenuBarIconToggle = async () => {
+    const newState = !menuBarIconEnabled;
+    // If we're turning off the menu bar icon and the dock icon is hidden,
+    // we need to show the dock icon to maintain accessibility
+    if (!newState && !dockIconEnabled && isMacOS) {
+      const success = await window.electron.setDockIcon(true);
+      if (success) {
+        setDockIconEnabled(true);
+      }
+    }
+    const success = await window.electron.setMenuBarIcon(newState);
+    if (success) {
+      setMenuBarIconEnabled(newState);
+    }
+  };
+
+  const handleDockIconToggle = async () => {
+    const newState = !dockIconEnabled;
+    // If we're turning off the dock icon and the menu bar icon is hidden,
+    // we need to show the menu bar icon to maintain accessibility
+    if (!newState && !menuBarIconEnabled) {
+      const success = await window.electron.setMenuBarIcon(true);
+      if (success) {
+        setMenuBarIconEnabled(true);
+      }
+    }
+
+    // Disable the switch to prevent rapid toggling
+    setIsDockSwitchDisabled(true);
+    setTimeout(() => {
+      setIsDockSwitchDisabled(false);
+    }, 1000);
+
+    // Set the dock icon state
+    const success = await window.electron.setDockIcon(newState);
+    if (success) {
+      setDockIconEnabled(newState);
+    }
+  };
+
+  return (
+    <section id="appSettings" className="px-8">
+      <div className="flex justify-between items-center mb-2">
+        <h2 className="text-xl font-medium text-textStandard">App Settings</h2>
+      </div>
+      <div className="pb-8">
+        <p className="text-sm text-textStandard mb-6">Configure Goose app</p>
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h3 className="text-textStandard">Menu Bar Icon</h3>
+              <p className="text-xs text-textSubtle max-w-md mt-[2px]">
+                Show Goose in the menu bar
+              </p>
+            </div>
+            <div className="flex items-center">
+              <Switch
+                checked={menuBarIconEnabled}
+                onCheckedChange={handleMenuBarIconToggle}
+                variant="mono"
+              />
+            </div>
+          </div>
+
+          {isMacOS && (
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="text-textStandard">Dock Icon</h3>
+                <p className="text-xs text-textSubtle max-w-md mt-[2px]">Show Goose in the dock</p>
+              </div>
+              <div className="flex items-center">
+                <Switch
+                  disabled={isDockSwitchDisabled}
+                  checked={dockIconEnabled}
+                  onCheckedChange={handleDockIconToggle}
+                  variant="mono"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

ui/desktop/src/components/settings_v2/response_styles/ResponseStylesSection.tsx

@@ -29,7 +29,7 @@ export const ResponseStylesSection = () => {
       <div className="flex justify-between items-center mb-2">
         <h2 className="text-xl font-medium text-textStandard">Response Styles</h2>
       </div>
-      <div className="pb-8">
+      <div className="border-b border-borderSubtle pb-8">
         <p className="text-sm text-textStandard mb-6">
           Choose how Goose should format and style its responses
         </p>