Replace auto advance button with toggle

Author: coder13

src/components/NotifyCompRemoteBar/NotifyCompRemoteBar.tsx

@@ -122,14 +122,7 @@ export function NotifyCompRemoteBar({ competitionId }: NotifyCompRemoteBarProps)
           </Link>
         </div>
 
-        <div className="flex min-w-0 items-center justify-end gap-3">
-          <div className="hidden min-w-0 text-right sm:block">
-            <div className="truncate text-sm font-medium text-default">Remote</div>
-            <div className="truncate text-xs text-muted">
-              {remote.error ? remote.error : remote.isSaving ? 'Syncing' : 'Ready'}
-            </div>
-          </div>
-        </div>
+        <div />
       </Container>
     </nav>
   );

src/pages/Competition/Remote/RemoteAutoAdvanceToggle.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+
+interface RemoteAutoAdvanceToggleProps {
+  checked: boolean;
+  disabled?: boolean;
+  onToggle: () => void;
+}
+
+export function RemoteAutoAdvanceToggle({
+  checked,
+  disabled,
+  onToggle,
+}: RemoteAutoAdvanceToggleProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label="Auto-advance"
+      disabled={disabled}
+      className={classNames(
+        'relative h-6 w-12 rounded-full shadow-sm hover-transition disabled:cursor-not-allowed disabled:opacity-50',
+        checked ? 'bg-blue-400' : 'bg-gray-300 dark:bg-gray-600',
+      )}
+      onClick={onToggle}>
+      <span
+        className={classNames(
+          'absolute top-0 h-6 w-6 rounded-full bg-blue-600 shadow-md transition-transform',
+          checked ? 'translate-x-6' : 'translate-x-0 bg-gray-50 dark:bg-gray-300',
+        )}
+      />
+    </button>
+  );
+}

src/pages/Competition/Remote/index.tsx

@@ -9,6 +9,7 @@ import { useNotifyCompRemoteAuth } from '@/providers/NotifyCompRemoteAuthProvide
 import { useWCIF } from '@/providers/WCIFProvider';
 import { RemoteAction, RemoteActionDialog } from './RemoteActionDialog';
 import { RemoteGroupList } from './RemoteActivityList';
+import { RemoteAutoAdvanceToggle } from './RemoteAutoAdvanceToggle';
 
 const confirmAction = (message: string) => window.confirm(message);
 
@@ -109,21 +110,19 @@ export default function CompetitionRemote() {
               <div className="space-y-4">
                 <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                   <h2 className="type-heading">All rooms</h2>
-                  <Button
-                    type="button"
-                    variant={remote.autoAdvance ? 'green' : 'light'}
+                  <RemoteAutoAdvanceToggle
+                    checked={Boolean(remote.autoAdvance)}
                     disabled={remote.isSaving}
-                    onClick={() => {
+                    onToggle={() => {
                       if (
                         confirmAction(
                           `${remote.autoAdvance ? 'Disable' : 'Enable'} auto-advance for this competition?`,
                         )
                       ) {
                         void remote.updateAutoAdvance(!remote.autoAdvance);
                       }
-                    }}>
-                    {remote.autoAdvance ? 'Auto-advance on' : 'Auto-advance off'}
-                  </Button>
+                    }}
+                  />
                 </div>
 
                 <div