Implement a switch component

Author: r59q

src/components/features/bottom/BottomPanel.svelte

@@ -19,6 +19,7 @@
   import { stores } from '../../../lib/stores/Stores';
   import LiveDataFingerprint from './LiveDataFingerprint.svelte';
   import { Feature, hasFeature } from '../../../lib/FeatureToggles';
+  import Switch from '../../ui/Switch.svelte';
 
   const devices = stores.getDevices();
   const enableFingerprint = stores.getEnableFingerprint();
@@ -91,11 +92,10 @@
       <div class="absolute right-0 bottom-0 h-full w-45 flex flex-col justify-between">
         <div class="pt-2 pr-2 justify-end flex flex-row gap-2">
           <p>Fingerprint:</p>
-          <input
-            type="checkbox"
-            checked={$enableFingerprint}
-            on:change={e => toggleEnabled(e)}
-            on:click|stopPropagation />
+          <Switch
+            size="sm"
+            bind:checked={$enableFingerprint}
+            on:change={e => enableFingerprint.set(e.detail.checked)} />
         </div>
 
         {#if isFingerprintEnabled}

src/components/ui/Switch.svelte

@@ -0,0 +1,58 @@
+<!--
+  (c) 2023-2025, Center for Computational Thinking and Design at Aarhus University and contributors
+ 
+  SPDX-License-Identifier: MIT
+ -->
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  export let checked: boolean = false;
+  export let disabled: boolean = false;
+  export let label: string = '';
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  const dispatch = createEventDispatcher();
+
+  function toggle() {
+    if (disabled) return;
+    checked = !checked;
+    dispatch('change', { checked });
+  }
+
+  // Size classes
+  const sizeMap = {
+    sm: { btn: 'w-8 h-5', knob: 'w-4 h-4', translate: '0.9rem' },
+    md: { btn: 'w-12 h-7', knob: 'w-6 h-6', translate: '1.25rem' },
+    lg: { btn: 'w-16 h-9', knob: 'w-8 h-8', translate: '1.75rem' },
+  };
+  $: btnSize = sizeMap[size]?.btn || sizeMap.md.btn;
+  $: knobSize = sizeMap[size]?.knob || sizeMap.md.knob;
+  $: knobTranslate = sizeMap[size]?.translate || sizeMap.md.translate;
+</script>
+
+<div class="flex items-center space-x-3 select-none">
+  {#if label}
+    <label class="text-base cursor-pointer" on:click={toggle}>{label}</label>
+  {/if}
+  <button
+    type="button"
+    class="relative focus:outline-none transition-colors duration-200 rounded-full border-2 border-gray-300 bg-gray-200 flex items-center {btnSize} {disabled
+      ? 'opacity-50 cursor-not-allowed'
+      : 'cursor-pointer'}"
+    aria-checked={checked}
+    on:click|stopPropagation
+    aria-label={label}
+    {disabled}
+    on:click={toggle}
+    role="switch"
+    tabindex="0">
+    <span
+      class="absolute left-0 top-0 w-full h-full rounded-full transition-colors duration-200"
+      class:bg-primary={checked && !disabled}
+      class:bg-gray-200={!checked || disabled}
+      class:border-primary={checked && !disabled}
+      class:border-gray-300={!checked || disabled}></span>
+    <span
+      class="inline-block bg-white rounded-full shadow transform transition-transform duration-200 z-10 border border-gray-300 {knobSize}"
+      style="transform: translateX({checked ? knobTranslate : '0rem'});"></span>
+  </button>
+</div>

src/pages/validation/ValidationPageActionContent.svelte

@@ -12,6 +12,7 @@
   import { tr } from '../../i18n';
   import Tooltip from '../../components/ui/Tooltip.svelte';
   import StandardButton from '../../components/ui/buttons/StandardButton.svelte';
+  import Switch from '../../components/ui/Switch.svelte';
 
   const classifier = stores.getClassifier();
   const model = classifier.getModel();
@@ -29,12 +30,12 @@
 </script>
 
 <div class="bg-white h-full flex flex-row justify-evenly">
-  <div class="pl-2 flex flex-col justify-center">
+  <div class="flex flex-col justify-center">
     <div class="flex flex-row gap-2 justify-center">
       <p>
         {$tr('content.validation.testButton.autoUpdate')}:
       </p>
-      <input type="checkbox" bind:checked={$autoUpdate} />
+      <Switch size="sm" bind:checked={$autoUpdate} />
     </div>
     <Tooltip
       disabled={$model.isTrained}

src/pages/validation/ValidationpageActionContentMinimized.svelte

@@ -6,6 +6,7 @@
 
 <script lang="ts">
   import StandardButton from '../../components/ui/buttons/StandardButton.svelte';
+  import Switch from '../../components/ui/Switch.svelte';
   import Tooltip from '../../components/ui/Tooltip.svelte';
   import { tr } from '../../i18n';
   import { stores } from '../../lib/stores/Stores';
@@ -26,7 +27,7 @@
       <p class="text-sm self-center">
         {$tr('content.validation.testButton.autoUpdate')}:
       </p>
-      <input type="checkbox" bind:checked={$autoUpdate} />
+      <Switch size="sm" bind:checked={$autoUpdate} />
       <Tooltip
         disabled={$model.isTrained}
         offset={{ x: 230, y: 0 }}