Claude Code simplify: extract shared bellIconClass helper, deduplicate hover class, update spec for tilt-based visuals

Author: nedtwigg

docs/specs/alarm.md

@@ -248,14 +248,13 @@ Alarm button:
 - icon-only control with tooltip and accessible label
 - visual states (pure function of `status`):
   - `ALARM_DISABLED`: `BellSlashIcon`, muted
-  - `NOTHING_TO_SHOW`: `BellIcon` filled, muted
-  - `MIGHT_BE_BUSY`: `BellIcon` filled, muted, with a faint dot badge (`foreground/40`, static)
-  - `BUSY`: `BellIcon` filled, muted, with an accent-colored dot badge (gentle breathing pulse)
-  - `MIGHT_NEED_ATTENTION`: `BellIcon` filled, muted, with a warning-colored dot badge (`warning/60`, gentle breathing pulse)
-  - `ALARM_RINGING`: `BellIcon` filled, warning color, whole-button breathing pulse; no dot badge
-- the dot badge is a small circle positioned at the top-right corner of the bell icon
-- the dot badge has a `border-surface-alt` outline to cleanly separate it from the bell icon
-- the dot badge must not change the button's layout size
+  - `NOTHING_TO_SHOW`: `BellIcon` filled, muted, upright
+  - `MIGHT_BE_BUSY`: `BellIcon` filled, muted, tilted slightly (-22.5°)
+  - `BUSY`: `BellIcon` filled, muted, tilted 45°
+  - `MIGHT_NEED_ATTENTION`: `BellIcon` filled, muted, tilted 60°
+  - `ALARM_RINGING`: `BellIcon` filled, warning color, rocking animation (±45° bell-ring keyframe); reduced-motion: static 45° tilt
+- escalation is conveyed by increasing tilt angle, not by a separate badge element
+- the tilt/animation must not change the button's layout size
 
 Interaction (`dismissOrToggleAlarm` state machine):
 
@@ -281,8 +280,8 @@ Door indicators:
 
 - show bell indicator only when `status !== 'ALARM_DISABLED'`
 - show TODO pill when `hasTodo(todo)` (soft or hard)
-- if `status === 'ALARM_RINGING'`, the Door itself gets the ringing treatment, not just a tiny icon
-- the Door bell icon shows the same dot badge as the Pane header for `MIGHT_BE_BUSY`, `BUSY`, and `MIGHT_NEED_ATTENTION` states, but smaller (4px vs 6px) to match the smaller bell icon
+- if `status === 'ALARM_RINGING'`, the Door bell icon uses warning color and the same rocking animation as the Pane header
+- the Door bell icon shows the same tilt angles as the Pane header for escalation states
 
 Door interaction:
 

lib/src/components/Door.tsx

@@ -1,7 +1,7 @@
 import { BellIcon } from '@phosphor-icons/react';
 import { TODO_OFF, isSoftTodo, type SessionStatus, type TodoState } from '../lib/terminal-registry';
 import { useTodoPillContent } from './TodoPillBody';
-import { cfg } from '../cfg';
+import { bellIconClass } from './bell-icon-class';
 
 export interface DoorProps {
   doorId?: string;
@@ -66,21 +66,7 @@ export function Door({
           )}
           {alarmEnabled && (
             <span className={[alarmRinging ? 'text-warning' : (isActive && windowFocused) ? 'text-foreground' : 'text-muted'].join(' ')}>
-              <BellIcon
-                size={11}
-                weight="fill"
-                className={[
-                  'transition-transform',
-                  status === 'MIGHT_BE_BUSY' && '-rotate-[22.5deg]',
-                  status === 'BUSY' && 'rotate-45',
-                  status === 'MIGHT_NEED_ATTENTION' && 'rotate-[60deg]',
-                  status === 'ALARM_RINGING' && (
-                    cfg.alarm.ringingPaused
-                      ? 'rotate-45'
-                      : 'motion-safe:animate-bell-ring motion-reduce:rotate-45'
-                  ),
-                ].filter(Boolean).join(' ')}
-              />
+              <BellIcon size={11} weight="fill" className={bellIconClass(status)} />
             </span>
           )}
         </span>

lib/src/components/Pond.tsx

@@ -58,6 +58,7 @@ import { getPlatform } from '../lib/platform';
 import { saveSession } from '../lib/session-save';
 import type { PersistedDetachedItem } from '../lib/session-types';
 import { cfg } from '../cfg';
+import { bellIconClass } from './bell-icon-class';
 import { useTodoPillContent } from './TodoPillBody';
 
 // --- Theme ---
@@ -700,10 +701,10 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
         )}
         <HeaderActionButton
           className={[
-            'flex h-5 min-w-5 items-center justify-center rounded transition-colors shrink-0',
+            'flex h-5 min-w-5 items-center justify-center rounded transition-colors shrink-0 hover:bg-foreground/10',
             sessionState.status === 'ALARM_RINGING'
-              ? 'text-warning hover:bg-foreground/10'
-              : 'text-muted hover:bg-foreground/10 hover:text-foreground',
+              ? 'text-warning'
+              : 'text-muted hover:text-foreground',
           ].join(' ')}
           onMouseDownCapture={(e) => {
             if (e.button !== 0) return;
@@ -729,21 +730,7 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
             {sessionState.status === 'ALARM_DISABLED' ? (
               <BellSlashIcon size={14} />
             ) : (
-              <BellIcon
-                size={14}
-                weight="fill"
-                className={[
-                  'transition-transform',
-                  sessionState.status === 'MIGHT_BE_BUSY' && '-rotate-[22.5deg]',
-                  sessionState.status === 'BUSY' && 'rotate-45',
-                  sessionState.status === 'MIGHT_NEED_ATTENTION' && 'rotate-[60deg]',
-                  sessionState.status === 'ALARM_RINGING' && (
-                    cfg.alarm.ringingPaused
-                      ? 'rotate-45'
-                      : 'motion-safe:animate-bell-ring motion-reduce:rotate-45'
-                  ),
-                ].filter(Boolean).join(' ')}
-              />
+              <BellIcon size={14} weight="fill" className={bellIconClass(sessionState.status)} />
             )}
           </span>
         </HeaderActionButton>

lib/src/components/bell-icon-class.ts

@@ -0,0 +1,17 @@
+import { cfg } from '../cfg';
+import type { SessionStatus } from '../lib/terminal-registry';
+
+/** Returns the Tailwind className string for a BellIcon's rotation/animation based on alarm status. */
+export function bellIconClass(status: SessionStatus): string {
+  return [
+    'transition-transform',
+    status === 'MIGHT_BE_BUSY' && '-rotate-[22.5deg]',
+    status === 'BUSY' && 'rotate-45',
+    status === 'MIGHT_NEED_ATTENTION' && 'rotate-[60deg]',
+    status === 'ALARM_RINGING' && (
+      cfg.alarm.ringingPaused
+        ? 'rotate-45'
+        : 'motion-safe:animate-bell-ring motion-reduce:rotate-45'
+    ),
+  ].filter(Boolean).join(' ');
+}