refactor: consolidate frontend controls

Author: stefan-ernst

frontend/src/lib/components/AvatarUpload.svelte

@@ -1,4 +1,5 @@
 <script>
+  import FileInput from './FileInput.svelte';
   /** Reusable image-avatar upload control with availability/MIME checks and
    * fallback tile. Categories require matching backend attachment support. */
   import { Camera, Trash2, Package } from '@lucide/svelte';
@@ -112,8 +113,7 @@
 
   {#if showUpload && attachmentStatus.enabled}
     <div class="p-4 rounded border" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-      <input
-        type="file"
+      <FileInput
         accept="image/*"
         onchange={(e) => handleFiles(e.currentTarget.files)}
         disabled={uploading}

frontend/src/lib/components/BackgroundImageSelector.svelte

@@ -1,4 +1,5 @@
 <script>
+  import FileInput from './FileInput.svelte';
   import { Upload, Trash2 } from '@lucide/svelte';
   import { backgroundCategories, getPresetsByCategory } from '../utils/backgroundImages.js';
   import Button from './Button.svelte';
@@ -119,8 +120,7 @@
 
     {#if showUploadSection && attachmentStatus.enabled}
       <div class="mt-3 p-4 rounded-lg border" style="border-color: var(--ds-border); background-color: var(--ds-surface);">
-        <input
-          type="file"
+        <FileInput
           accept="image/*"
           onchange={handleFileChange}
           disabled={uploading}

frontend/src/lib/components/FileInput.svelte

@@ -0,0 +1,33 @@
+<script>
+  let {
+    id = undefined,
+    name = undefined,
+    accept = undefined,
+    multiple = false,
+    disabled = false,
+    tabindex = undefined,
+    ariaHidden = undefined,
+    class: className = '',
+    style = '',
+    dataTestid = undefined,
+    inputRef = $bindable(null),
+    onchange = undefined,
+  } = $props();
+  export { className as class };
+</script>
+
+<input
+  {id}
+  {name}
+  type="file"
+  {accept}
+  {multiple}
+  {disabled}
+  {tabindex}
+  aria-hidden={ariaHidden}
+  bind:this={inputRef}
+  data-testid={dataTestid}
+  class={className}
+  {style}
+  {onchange}
+/>

frontend/src/lib/components/Input.svelte

@@ -18,18 +18,23 @@
    *   pattern?: string,
    *   title?: string,
    *   autocomplete?: string,
+   *   enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send',
    *   readonly?: boolean,
    *   minlength?: number,
    *   maxlength?: number,
+   *   list?: string,
    *   class?: string,
+   *   style?: string,
    *   dataTestid?: string,
+   *   dataAutofocus?: boolean,
    *   ariaLabel?: string,
    *   ariaDescribedby?: string,
    *   inputRef?: any,
    *   oninput?: (e?: any) => void,
    *   onchange?: (e?: any) => void,
    *   onfocus?: (e?: any) => void,
    *   onblur?: (e?: any) => void,
+   *   onclick?: (e?: any) => void,
    *   onkeydown?: (e?: any) => void,
    *   onkeyup?: (e?: any) => void,
    * }}
@@ -50,11 +55,15 @@
     pattern = undefined,
     title = undefined,
     autocomplete = undefined,
+    enterkeyhint = undefined,
     readonly = false,
     minlength = undefined,
     maxlength = undefined,
+    list = undefined,
     class: className = '',
+    style = '',
     dataTestid = undefined,
+    dataAutofocus = false,
     ariaLabel = undefined,
     ariaDescribedby = undefined,
     // Optional ref binding for parent components that need the raw input element
@@ -64,6 +73,7 @@
     onchange = undefined,
     onfocus = undefined,
     onblur = undefined,
+    onclick = undefined,
     onkeydown = undefined,
     onkeyup = undefined
   } = $props();
@@ -94,12 +104,15 @@
   {pattern}
   {title}
   autocomplete={autocompleteValue}
+  {enterkeyhint}
   {readonly}
   {minlength}
   {maxlength}
+  {list}
   bind:value
   bind:this={inputRef}
   data-testid={dataTestid}
+  data-autofocus={dataAutofocus || undefined}
   aria-label={ariaLabel}
   aria-describedby={ariaDescribedby}
   {placeholder}
@@ -110,11 +123,12 @@
   {max}
   {step}
   class={allClasses}
-  style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
+  style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text); {style}"
   {oninput}
   {onchange}
   {onfocus}
   {onblur}
+  {onclick}
   {onkeydown}
   {onkeyup}
 />

frontend/src/lib/components/LogoUploader.svelte

@@ -1,4 +1,5 @@
 <script>
+  import FileInput from './FileInput.svelte';
   import { Upload, Trash2, Image } from '@lucide/svelte';
   import Button from './Button.svelte';
   import Label from './Label.svelte';
@@ -57,8 +58,7 @@
   <!-- Upload button and input -->
   <div class="flex items-center gap-3">
     <label class="cursor-pointer">
-      <input
-        type="file"
+      <FileInput
         accept="image/png,image/jpeg,image/svg+xml,image/gif,image/webp"
         onchange={handleFileChange}
         disabled={uploading || !attachmentStatus.enabled}

frontend/src/lib/components/NativeSelect.svelte

@@ -12,6 +12,7 @@
     id = undefined,
     class: className = '',
     dataTestid = undefined,
+    ariaLabel = undefined,
     onchange = undefined,
   } = $props();
 
@@ -45,6 +46,7 @@
     {required}
     multiple
     data-testid={dataTestid}
+    aria-label={ariaLabel}
     class={classes}
     style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
     onchange={handleChange}
@@ -60,6 +62,7 @@
     {disabled}
     {required}
     data-testid={dataTestid}
+    aria-label={ariaLabel}
     class={classes}
     style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
     onchange={handleChange}

frontend/src/lib/components/Radio.svelte

@@ -0,0 +1,35 @@
+<script>
+  let {
+    id = undefined,
+    name = undefined,
+    value = undefined,
+    groupValue = $bindable(null),
+    checked = false,
+    disabled = false,
+    class: className = '',
+    dataTestid = undefined,
+    onchange = undefined,
+  } = $props();
+  export { className as class };
+
+  const isGrouped = $derived(groupValue !== null);
+  const isChecked = $derived(isGrouped ? groupValue === value : checked);
+
+  function handleChange(event) {
+    if (!event.currentTarget.checked) return;
+    if (isGrouped) groupValue = value;
+    onchange?.(value, event);
+  }
+</script>
+
+<input
+  {id}
+  type="radio"
+  {name}
+  {value}
+  {disabled}
+  checked={isChecked}
+  onchange={handleChange}
+  data-testid={dataTestid}
+  class="h-4 w-4 accent-[var(--ds-interactive)] {className}"
+/>

frontend/src/lib/components/Textarea.svelte

@@ -4,19 +4,23 @@
     placeholder = '',
     disabled = false,
     required = false,
+    autofocus = false,
     spellcheck = undefined,
     rows = 3,
     size = 'medium',
     id = undefined,
     class: className = '',
     style = '',
     'data-testid': dataTestid = undefined,
+    textareaRef = $bindable(null),
     // Svelte 5 event handlers
     oninput = undefined,
     onchange = undefined,
     onfocus = undefined,
     onblur = undefined,
-    onkeydown = undefined
+    onkeydown = undefined,
+    onclick = undefined,
+    ...restProps
   } = $props();
   export { className as class };
 
@@ -35,12 +39,16 @@
   ].filter(Boolean).join(' '));
 </script>
 
+<!-- svelte-ignore a11y_autofocus -->
 <textarea
+  {...restProps}
   {id}
   bind:value
+  bind:this={textareaRef}
   {placeholder}
   {disabled}
   {required}
+  {autofocus}
   {spellcheck}
   {rows}
   class={allClasses}
@@ -51,4 +59,5 @@
   {onfocus}
   {onblur}
   {onkeydown}
+  {onclick}
 ></textarea>

frontend/src/lib/dialogs/CompleteIterationDialog.svelte

@@ -1,6 +1,7 @@
 <script>
   import { CheckCircle, X } from '@lucide/svelte';
   import Button from '../components/Button.svelte';
+  import Radio from '../components/Radio.svelte';
   import ModalBackdrop from '../components/ModalBackdrop.svelte';
   import ItemPicker from '../pickers/ItemPicker.svelte';
   import { t } from '../stores/i18n.svelte.js';
@@ -135,11 +136,10 @@
 
             <!-- Radio: Move to backlog -->
             <label class="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
+              <Radio
                 name="move-target"
                 value="backlog"
-                bind:group={moveTarget}
+                bind:groupValue={moveTarget}
                 class="accent-[var(--ds-interactive)]"
               />
               <span class="text-sm" style="color: var(--ds-text);">
@@ -149,11 +149,10 @@
 
             <!-- Radio: Move to another iteration -->
             <label class="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
+              <Radio
                 name="move-target"
                 value="iteration"
-                bind:group={moveTarget}
+                bind:groupValue={moveTarget}
                 class="accent-[var(--ds-interactive)]"
               />
               <span class="text-sm" style="color: var(--ds-text);">

frontend/src/lib/dialogs/DeleteItemDialog.svelte

@@ -6,6 +6,7 @@
   import AlertBox from '../components/AlertBox.svelte';
   import FormField from '../components/FormField.svelte';
   import Input from '../components/Input.svelte';
+  import Radio from '../components/Radio.svelte';
   import ItemPicker from '../pickers/ItemPicker.svelte';
   import { t } from '../stores/i18n.svelte.js';
   import { api } from '../api';
@@ -225,11 +226,10 @@
               class="flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors {selectedMode === 'deleteAll' ? 'border-red-500' : ''}"
               style="border-color: {selectedMode === 'deleteAll' ? 'var(--ds-border-danger)' : 'var(--ds-border)'}; background-color: {selectedMode === 'deleteAll' ? 'var(--ds-background-danger)' : 'transparent'};"
             >
-              <input
-                type="radio"
+              <Radio
                 name="deleteMode"
                 value="deleteAll"
-                bind:group={selectedMode}
+                bind:groupValue={selectedMode}
                 disabled={loading}
                 class="mt-1"
               />
@@ -251,11 +251,10 @@
               class="flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors"
               style="border-color: {selectedMode === 'reparent' ? 'var(--ds-border-selected)' : 'var(--ds-border)'}; background-color: {selectedMode === 'reparent' ? 'var(--ds-background-selected)' : 'transparent'};"
             >
-              <input
-                type="radio"
+              <Radio
                 name="deleteMode"
                 value="reparent"
-                bind:group={selectedMode}
+                bind:groupValue={selectedMode}
                 disabled={loading}
                 class="mt-1"
               />