feat: Make cursor glow disabled by default, have a setting and a binding relationship with dark mode (#509)

Author: charlesvien

apps/array/src/renderer/components/CursorGlow.tsx

@@ -1,8 +1,10 @@
+import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { useThemeStore } from "@stores/themeStore";
 import { useEffect, useState } from "react";
 
 export function CursorGlow() {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const cursorGlow = useSettingsStore((state) => state.cursorGlow);
   const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(
     null,
   );
@@ -16,8 +18,7 @@ export function CursorGlow() {
     return () => window.removeEventListener("mousemove", handleMouseMove);
   }, []);
 
-  // Only show in dark mode
-  if (!isDarkMode || !mousePos) return null;
+  if (!isDarkMode || !cursorGlow || !mousePos) return null;
 
   return (
     <div

apps/array/src/renderer/features/settings/components/SettingsView.tsx

@@ -54,9 +54,11 @@ export function SettingsView() {
   const {
     autoRunTasks,
     createPR,
+    cursorGlow,
     desktopNotifications,
     setAutoRunTasks,
     setCreatePR,
+    setCursorGlow,
     setDesktopNotifications,
   } = useSettingsStore();
   const terminalLayoutMode = useTerminalLayoutStore(
@@ -127,8 +129,24 @@ export function SettingsView() {
       new_value: !isDarkMode,
       old_value: isDarkMode,
     });
+    // Turn off cursor glow when switching to light mode
+    if (isDarkMode && cursorGlow) {
+      setCursorGlow(false);
+    }
     toggleDarkMode();
-  }, [isDarkMode, toggleDarkMode]);
+  }, [isDarkMode, toggleDarkMode, cursorGlow, setCursorGlow]);
+
+  const handleCursorGlowChange = useCallback(
+    (checked: boolean) => {
+      track(ANALYTICS_EVENTS.SETTING_CHANGED, {
+        setting_name: "cursor_glow",
+        new_value: checked,
+        old_value: cursorGlow,
+      });
+      setCursorGlow(checked);
+    },
+    [cursorGlow, setCursorGlow],
+  );
 
   const handleTerminalLayoutChange = useCallback(
     (value: "split" | "tabbed") => {
@@ -237,16 +255,39 @@ export function SettingsView() {
             <Card>
               <Flex direction="column" gap="4">
                 <Flex align="center" justify="between">
-                  <Text size="1" weight="medium">
-                    Dark mode
-                  </Text>
+                  <Flex direction="column" gap="1">
+                    <Text size="1" weight="medium">
+                      Dark mode
+                    </Text>
+                    <Text size="1" color="gray">
+                      Use dark theme for the interface
+                    </Text>
+                  </Flex>
                   <Switch
                     checked={isDarkMode}
                     onCheckedChange={handleDarkModeChange}
                     size="1"
                   />
                 </Flex>
 
+                {isDarkMode && (
+                  <Flex align="center" justify="between">
+                    <Flex direction="column" gap="1">
+                      <Text size="1" weight="medium">
+                        Cursor glow
+                      </Text>
+                      <Text size="1" color="gray">
+                        Show a glow effect that follows your cursor
+                      </Text>
+                    </Flex>
+                    <Switch
+                      checked={cursorGlow}
+                      onCheckedChange={handleCursorGlowChange}
+                      size="1"
+                    />
+                  </Flex>
+                )}
+
                 <Flex direction="column" gap="2">
                   <Text size="1" weight="medium">
                     Terminal layout

apps/array/src/renderer/features/settings/stores/settingsStore.ts

@@ -15,6 +15,7 @@ interface SettingsStore {
   createPR: boolean;
   defaultModel: string;
   desktopNotifications: boolean;
+  cursorGlow: boolean;
 
   setAutoRunTasks: (autoRun: boolean) => void;
   setDefaultRunMode: (mode: DefaultRunMode) => void;
@@ -24,6 +25,7 @@ interface SettingsStore {
   setCreatePR: (createPR: boolean) => void;
   setDefaultModel: (model: string) => void;
   setDesktopNotifications: (enabled: boolean) => void;
+  setCursorGlow: (enabled: boolean) => void;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -37,6 +39,7 @@ export const useSettingsStore = create<SettingsStore>()(
       createPR: true,
       defaultModel: DEFAULT_MODEL,
       desktopNotifications: true,
+      cursorGlow: false,
 
       setAutoRunTasks: (autoRun) => set({ autoRunTasks: autoRun }),
       setDefaultRunMode: (mode) => set({ defaultRunMode: mode }),
@@ -48,6 +51,7 @@ export const useSettingsStore = create<SettingsStore>()(
       setDefaultModel: (model) => set({ defaultModel: model }),
       setDesktopNotifications: (enabled) =>
         set({ desktopNotifications: enabled }),
+      setCursorGlow: (enabled) => set({ cursorGlow: enabled }),
     }),
     {
       name: "settings-storage",