refactor(buttons): add a button which carries a pressed state

Toggles were spelled out at each site as a variant picked from state,
which left the accessible state optional: of the twelve places that do
this, six style themselves as pressed without ever saying so, including
the blackout and message visibility controls.

ToggleButton ties the two together so a toggle cannot look active
without announcing it. Adopted in the finder and the log, which were
already pairing the two by hand. The remaining sites in message and
client control still need migrating, and the emphasis on the submit
button in the link form is deliberately not a toggle.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DzALEq9gGWwFmwTdgAiFcY

apps/client/src/common/components/buttons/ToggleButton.tsx

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+import Button from './Button';
+
+type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
+  /** whether the option this button controls is currently on */
+  pressed: boolean;
+};
+
+/**
+ * A button which carries an on / off state.
+ *
+ * Keeps the pressed styling and the accessible state together, so that a toggle
+ * cannot end up looking active without also announcing that it is.
+ */
+export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
+  return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
+}

apps/client/src/features/log/Log.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';
 
 import Button from '../../common/components/buttons/Button';
+import ToggleButton from '../../common/components/buttons/ToggleButton';
 import { clearLogs, useLogData } from '../../common/stores/logger';
 import { cx } from '../../common/utils/styleUtils';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -55,72 +56,66 @@ export default function Log() {
     <div className={cx([style.container, isExtracted && style.extracted])}>
       <Panel.InlineElements className={style.buttonBar}>
         <span className={style.filterLabel}>Filter by</span>
-        <Button
-          variant={showUser ? 'primary' : 'subtle'}
+        <ToggleButton
+          pressed={showUser}
           size='small'
-          aria-pressed={showUser}
           aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
           onClick={() => setShowUser((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.User)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.User}
-        </Button>
-        <Button
-          variant={showClient ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showClient}
           size='small'
-          aria-pressed={showClient}
           aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
           onClick={() => setShowClient((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Client)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Client}
-        </Button>
-        <Button
-          variant={showServer ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showServer}
           size='small'
-          aria-pressed={showServer}
           aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
           onClick={() => setShowServer((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Server)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Server}
-        </Button>
-        <Button
-          variant={showPlayback ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showPlayback}
           size='small'
-          aria-pressed={showPlayback}
           aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
           onClick={() => setShowPlayback((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Playback)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Playback}
-        </Button>
-        <Button
-          variant={showRx ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showRx}
           size='small'
-          aria-pressed={showRx}
           aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
           onClick={() => setShowRx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Rx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Rx}
-        </Button>
-        <Button
-          variant={showTx ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showTx}
           size='small'
-          aria-pressed={showTx}
           aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
           onClick={() => setShowTx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Tx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Tx}
-        </Button>
+        </ToggleButton>
         <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
           <IoClose /> Clear
         </Button>

apps/client/src/views/editor/finder/Finder.tsx

@@ -1,7 +1,7 @@
 import { EntryId, MaybeString } from 'ontime-types';
 import { KeyboardEvent, PointerEvent, useDeferredValue, useEffect, useRef, useState } from 'react';
 
-import Button from '../../../common/components/buttons/Button';
+import ToggleButton from '../../../common/components/buttons/ToggleButton';
 import Input from '../../../common/components/input/input/Input';
 import Kbd from '../../../common/components/kbd/Kbd';
 import Modal from '../../../common/components/modal/Modal';
@@ -116,20 +116,16 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
           />
           <div className={style.filters} data-testid='finder-filters'>
             <span className={style.filterLabel}>Filter by</span>
-            {filters.map((option) => {
-              const isActive = appliedFilter === option.key;
-              return (
-                <Button
-                  key={option.key}
-                  variant={isActive ? 'primary' : 'subtle'}
-                  size='small'
-                  aria-pressed={isActive}
-                  onClick={() => handleFilter(option.key)}
-                >
-                  {option.label}
-                </Button>
-              );
-            })}
+            {filters.map((option) => (
+              <ToggleButton
+                key={option.key}
+                pressed={appliedFilter === option.key}
+                size='small'
+                onClick={() => handleFilter(option.key)}
+              >
+                {option.label}
+              </ToggleButton>
+            ))}
           </div>
           <ul className={style.scrollContainer}>
             {error && <li className={style.error}>{error}</li>}