Implement bounce dock icon notification setting

Author: charlesvien

apps/twig/src/main/services/notification/service.ts

@@ -35,6 +35,13 @@ export class NotificationService {
     log.info("Dock badge shown");
   }
 
+  bounceDock(): void {
+    if (process.platform === "darwin") {
+      app.dock?.bounce("informational");
+      log.info("Dock bounce triggered");
+    }
+  }
+
   private clearDockBadge(): void {
     if (!this.hasBadge) return;
 

apps/twig/src/main/trpc/routers/notification.ts

@@ -20,4 +20,5 @@ export const notificationRouter = router({
       getService().send(input.title, input.body, input.silent),
     ),
   showDockBadge: publicProcedure.mutation(() => getService().showDockBadge()),
+  bounceDock: publicProcedure.mutation(() => getService().bounceDock()),
 });

apps/twig/src/renderer/features/settings/components/sections/ChatSettings.tsx

@@ -14,12 +14,14 @@ export function ChatSettings() {
   const {
     desktopNotifications,
     dockBadgeNotifications,
+    dockBounceNotifications,
     completionSound,
     completionVolume,
     autoConvertLongText,
     sendMessagesWith,
     setDesktopNotifications,
     setDockBadgeNotifications,
+    setDockBounceNotifications,
     setCompletionSound,
     setCompletionVolume,
     setAutoConvertLongText,
@@ -90,6 +92,17 @@ export function ChatSettings() {
         />
       </SettingRow>
 
+      <SettingRow
+        label="Bounce dock icon"
+        description="Bounce the dock icon when the agent finishes a task or needs your input"
+      >
+        <Switch
+          checked={dockBounceNotifications}
+          onCheckedChange={setDockBounceNotifications}
+          size="1"
+        />
+      </SettingRow>
+
       <SettingRow
         label="Sound effect"
         description="Play a sound when the agent finishes a task or needs your input"

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

@@ -18,6 +18,7 @@ interface SettingsStore {
   lastUsedModel: string | null;
   desktopNotifications: boolean;
   dockBadgeNotifications: boolean;
+  dockBounceNotifications: boolean;
   cursorGlow: boolean;
   autoConvertLongText: boolean;
   completionSound: CompletionSound;
@@ -36,6 +37,7 @@ interface SettingsStore {
   setLastUsedModel: (model: string) => void;
   setDesktopNotifications: (enabled: boolean) => void;
   setDockBadgeNotifications: (enabled: boolean) => void;
+  setDockBounceNotifications: (enabled: boolean) => void;
   setCursorGlow: (enabled: boolean) => void;
   setAutoConvertLongText: (enabled: boolean) => void;
   setSendMessagesWith: (mode: SendMessagesWith) => void;
@@ -54,6 +56,7 @@ export const useSettingsStore = create<SettingsStore>()(
       lastUsedModel: null,
       desktopNotifications: true,
       dockBadgeNotifications: true,
+      dockBounceNotifications: false,
       completionSound: "none",
       completionVolume: 80,
       cursorGlow: false,
@@ -75,6 +78,8 @@ export const useSettingsStore = create<SettingsStore>()(
         set({ desktopNotifications: enabled }),
       setDockBadgeNotifications: (enabled) =>
         set({ dockBadgeNotifications: enabled }),
+      setDockBounceNotifications: (enabled) =>
+        set({ dockBounceNotifications: enabled }),
       setCursorGlow: (enabled) => set({ cursorGlow: enabled }),
       setAutoConvertLongText: (enabled) =>
         set({ autoConvertLongText: enabled }),
@@ -96,6 +101,7 @@ export const useSettingsStore = create<SettingsStore>()(
         lastUsedModel: state.lastUsedModel,
         desktopNotifications: state.desktopNotifications,
         dockBadgeNotifications: state.dockBadgeNotifications,
+        dockBounceNotifications: state.dockBounceNotifications,
         cursorGlow: state.cursorGlow,
         autoConvertLongText: state.autoConvertLongText,
         completionSound: state.completionSound,

apps/twig/src/renderer/lib/notifications.ts

@@ -28,6 +28,12 @@ function showDockBadge(): void {
   });
 }
 
+function bounceDock(): void {
+  trpcVanilla.notification.bounceDock.mutate().catch((err) => {
+    log.error("Failed to bounce dock", err);
+  });
+}
+
 export function notifyPromptComplete(
   taskTitle: string,
   stopReason: string,
@@ -39,6 +45,7 @@ export function notifyPromptComplete(
     completionVolume,
     desktopNotifications,
     dockBadgeNotifications,
+    dockBounceNotifications,
   } = useSettingsStore.getState();
 
   const isWindowFocused = document.hasFocus();
@@ -57,6 +64,9 @@ export function notifyPromptComplete(
   if (dockBadgeNotifications) {
     showDockBadge();
   }
+  if (dockBounceNotifications) {
+    bounceDock();
+  }
 }
 
 export function notifyPermissionRequest(taskTitle: string): void {
@@ -65,6 +75,7 @@ export function notifyPermissionRequest(taskTitle: string): void {
     completionVolume,
     desktopNotifications,
     dockBadgeNotifications,
+    dockBounceNotifications,
   } = useSettingsStore.getState();
   const isWindowFocused = document.hasFocus();
 
@@ -82,5 +93,8 @@ export function notifyPermissionRequest(taskTitle: string): void {
     if (dockBadgeNotifications) {
       showDockBadge();
     }
+    if (dockBounceNotifications) {
+      bounceDock();
+    }
   }
 }