feat(voice): microphone in the add-task and add-item rows; phone fixes in the column dialog

VoiceInputButton brings the Quick Dump microphone into other input rows (useVoiceInput, appends
to the text already there, hidden when voice input is off or unsupported): the add-task row above
the task list and the add-item field of lists (desktop row and phone sheet).

Column dialog on phones: the add-column buttons go below the field, and the Erledigt toggle of a
column shows only its tick, so the bin stays on screen. Docs and changelog; v0.32.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -6,6 +6,14 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+## [0.32.0] - 2026-11-01
+
+### Added
+- Spracheingabe auch beim Hinzufügen von Aufgaben (am PC in der Eingabezeile über der Aufgabenliste, am Handy im Fenster „Neue Aufgabe anlegen“ hinter dem +-Knopf) und von Listeneinträgen (am PC in der Zeile, am Handy im Erfassen-Fenster): ein Mikrofon direkt im Feld wie beim Quick Dump. Diktierter Text wird an das Vorhandene angehängt.
+
+### Fixed
+- Handy: Beim Anlegen einer Kanban-Spalte waren „Erledigt“ und „Hinzufügen“ rechts abgeschnitten; sie stehen jetzt unter dem Textfeld. In der Spaltenliste zeigt „Erledigt“ am Handy nur den Haken, damit der Mülleimer nicht mehr aus dem Bild rutscht.
+
 ## [0.31.0] - 2026-11-01
 
 ### Added
@@ -582,7 +590,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - Geteilte Listen (Einkaufs-, Pack- und Checklisten) mit `#Kategorie`-Gruppierung, Mengenangaben und Echtzeit-Abhaken.
 - Benutzer-, Gruppen- und Admin-Verwaltung (Ersteinrichtungs-Assistent, Einladungscodes, Profilbilder, persönliche API-Keys & Webhook-Ingest `/api/v1/webhooks/ingest`, JSON-Datenexport) sowie CSS-Theme-Engine mit 4 Themes (`Dark`, `Light`, `High Contrast`, `Soft`) und PWA-Unterstützung.
 
-[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.31.0...dev
+[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.32.0...dev
+[0.32.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.31.0...v0.32.0
 [0.31.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.30.0...v0.31.0
 [0.30.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.29.0...v0.30.0
 [0.29.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.28.0...v0.29.0

Doku/ui-patterns.md

@@ -72,6 +72,15 @@ Komponente: [OriginBadge.tsx](../frontend/src/components/OriginBadge.tsx)
 - Details (angelegt / zuletzt geändert, mit Schlüssel und Zeit) per Mouseover und per Tippen (kleines Info-Fenster, am Handy mit vergrößerter Trefferfläche); in der Aufgaben-Detailansicht stehen sie zusätzlich unten (`originDetails`). Ein Tipp auf die Badge öffnet nie den Eintrag.
 - Größen: `sm` in Aufgabenzeilen, Inbox-Liste und Detailansicht, `xs` auf Kanban-Karten und in Listen, `md` auf den Triage-Karten.
 
+## Mikrofon in Eingabezeilen
+
+Komponente: [VoiceInputButton.tsx](../frontend/src/components/VoiceInputButton.tsx) (nutzt `useVoiceInput` wie der Quick Dump)
+
+- Runder Mikrofon-Knopf direkt in der Zeile, rechts im Feld; diktierter Text wird an den Text angehängt, der beim Start im Feld stand. Am Handy 36 px, am PC 28 px.
+- Während der Aufnahme `MicOff` in Akzentfarbe, mit eigenem Whisper-Server zusätzlich die Live-Wellen, danach „Wird erkannt…“ mit Spinner.
+- Ausgeblendet, wenn die Spracheingabe aus ist (`STT_DISABLED`) oder der Browser sie nicht kann (z. B. Firefox ohne eigenen Whisper-Server). Fehler zeigt das Feld kurz als Platzhalter.
+- Eingesetzt: Quick Dump (eigene Umsetzung), Aufgabe hinzufügen (Zeile am PC, „Neue Aufgabe anlegen“ am Handy), Listeneintrag hinzufügen.
+
 ## Ladebildschirm & Statusleiste
 
 - `manifest.json`: `name` „MindSift“ (kurz, der Slogan steht in `description`), `background_color` und `theme_color` `#2563eb` – Android baut daraus den Splash-Screen.

README.md

@@ -6,7 +6,7 @@
 [![Self-Hosted](https://img.shields.io/badge/100%25-Self--Hosted-2563eb?style=flat-square)](#)
 [![Docker](https://img.shields.io/badge/Deployment-Single%20Container-2496ed?style=flat-square&logo=docker&logoColor=white)](#-schnellstart)
 [![SQLite](https://img.shields.io/badge/Daten-SQLite-003b57?style=flat-square&logo=sqlite&logoColor=white)](#-deine-daten-gehören-dir)
-[![Version](https://img.shields.io/badge/Version-v0.31.0-16a34a?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/Version-v0.32.0-16a34a?style=flat-square)](CHANGELOG.md)
 
 **MindSift** ist eine selbst gehostete Schaltstelle für spontane Gedanken, Aufgaben mit Kanban-Board, hierarchische Outliner-Notizen, die mehrere Personen gleichzeitig bearbeiten können, und gemeinsame Listen. Alles läuft als ein einzelner Container mit eingebetteter SQLite-Datenbank, auf deinem eigenen Server.
 

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mindsift-frontend",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.31.0",
+      "version": "0.32.0",
       "license": "Unlicense",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Unlicense",
   "type": "module",
   "scripts": {

frontend/src/components/VoiceInputButton.tsx

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { Loader2, Mic, MicOff } from 'lucide-react';
+import { useVoiceInput } from '../lib/useVoiceInput';
+import { triggerHaptic } from '../lib/api';
+import { VoiceWave } from './VoiceWave';
+
+interface VoiceInputButtonProps {
+  // The field's text; dictated words are appended to what was there when the recording started
+  value: string;
+  onChange: (text: string) => void;
+  onError?: (message: string) => void;
+  // Field to focus once the text is final
+  focusRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+  className?: string;
+}
+
+// Microphone inside an input row, like the one in Quick Dump (Doku/ui-patterns.md). Hidden when voice
+// input is off or the browser cannot do it (e.g. Firefox without an own Whisper server).
+export const VoiceInputButton: React.FC<VoiceInputButtonProps> = ({ value, onChange, onError, focusRef, className = '' }) => {
+  const baseRef = useRef('');
+  const voice = useVoiceInput({
+    onText: (text, final) => {
+      const base = baseRef.current;
+      if (text) onChange(base ? `${base} ${text}` : text);
+      if (final) focusRef?.current?.focus();
+    },
+    onError,
+  });
+  if (!voice.available) return null;
+  const listening = voice.state === 'listening';
+  const transcribing = voice.state === 'transcribing';
+
+  return (
+    <span className={`inline-flex items-center gap-1 flex-shrink-0 ${className}`}>
+      {listening && voice.mode === 'server' && <VoiceWave getLevel={voice.level} className="h-3.5 text-accent" />}
+      <button
+        type="button"
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => {
+          if (voice.state === 'idle') {
+            baseRef.current = value.trim();
+            triggerHaptic(20);
+          }
+          voice.toggle();
+        }}
+        disabled={transcribing}
+        title={listening ? 'Aufnahme beenden' : transcribing ? 'Wird erkannt…' : 'Spracheingabe'}
+        aria-label={listening ? 'Aufnahme beenden' : transcribing ? 'Wird erkannt…' : 'Spracheingabe'}
+        className={`w-9 h-9 sm:w-7 sm:h-7 rounded-full flex items-center justify-center transition-colors ${
+          listening || transcribing ? 'bg-accent-dim text-accent' : 'text-muted hover:text-main hover:bg-panel-elevated'
+        }`}
+      >
+        {transcribing ? (
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+        ) : listening ? (
+          <MicOff className="w-3.5 h-3.5" />
+        ) : (
+          <Mic className="w-3.5 h-3.5" />
+        )}
+      </button>
+    </span>
+  );
+};

frontend/src/features/lists/SharedListsView.tsx

@@ -17,6 +17,7 @@ import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { AvatarStack, AvatarPerson } from '../../components/AvatarStack';
 import { CountBadge } from '../../components/CountBadge';
 import { OriginBadge } from '../../components/OriginBadge';
+import { VoiceInputButton } from '../../components/VoiceInputButton';
 import { FormSheet } from '../../components/FormSheet';
 import { useMobileActions } from '../../context/MobileActionContext';
 
@@ -102,6 +103,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
   const [newItemText, setNewItemText] = useState('');
   const [newItemQty, setNewItemQty] = useState('');
+  const [itemVoiceError, setItemVoiceError] = useState<string | null>(null);
   const [isSubmittingItem, setIsSubmittingItem] = useState(false);
   const [editingQtyItemId, setEditingQtyItemId] = useState<string | null>(null);
   const [editingQtyValue, setEditingQtyValue] = useState('');
@@ -955,9 +957,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             onBlur={() => {
               setTimeout(() => setShowSuggestions(false), 200);
             }}
-            placeholder={`Was soll auf „${activeList.title}“? (z. B. Hafermilch #Kühlregal)`}
+            placeholder={itemVoiceError || `Was soll auf „${activeList.title}“? (z. B. Hafermilch #Kühlregal)`}
             // 16px on phones: iOS zooms into smaller fields and the layout jumps under the keyboard
-            className="w-full h-11 sm:h-9 pl-9 pr-3 input-field text-base sm:text-sm"
+            className="w-full h-11 sm:h-9 pl-9 pr-11 sm:pr-9 input-field text-base sm:text-sm"
+          />
+          <VoiceInputButton
+            value={newItemText}
+            onChange={setNewItemText}
+            focusRef={inputRef}
+            onError={(message) => {
+              setItemVoiceError(message);
+              window.setTimeout(() => setItemVoiceError(null), 4000);
+            }}
+            className="absolute right-1 top-1/2 -translate-y-1/2"
           />
 
           {/* Hashtag Autocomplete Suggestions Dropdown */}

frontend/src/features/triage/ManageColumnsModal.tsx

@@ -273,7 +273,7 @@ const ManageColumnsModalContent: React.FC<ManageColumnsModalProps> = ({
                       type="text"
                       value={col.name}
                       onChange={(e) => handleRename(col.id, e.target.value)}
-                      className="flex-1 h-7 px-2 text-xs input-field"
+                      className="flex-1 min-w-0 h-7 px-2 text-xs input-field"
                       placeholder="Spaltenname"
                     />
 
@@ -281,15 +281,18 @@ const ManageColumnsModalContent: React.FC<ManageColumnsModalProps> = ({
                     <button
                       type="button"
                       onClick={() => handleToggleDone(col.id)}
-                      className={`h-7 px-2 text-[10px] rounded-btn border transition-colors flex items-center gap-1 ${
+                      className={`h-7 px-2 text-[10px] rounded-btn border transition-colors flex items-center gap-1 flex-shrink-0 ${
                         col.isDone
                           ? 'bg-status-ok/15 border-status-ok text-status-ok font-semibold'
                           : 'bg-panel border-border text-faint hover:text-muted'
                       }`}
                       title={col.isDone ? 'Gilt als Erledigt' : 'Gilt als Offen'}
+                      aria-label={col.isDone ? 'Gilt als Erledigt' : 'Gilt als Offen'}
+                      aria-pressed={!!col.isDone}
                     >
                       <Check className={`w-2.5 h-2.5 ${col.isDone ? 'stroke-[3]' : 'opacity-40'}`} />
-                      <span>Erledigt</span>
+                      {/* Phones: only the tick, so the row keeps room for the bin */}
+                      <span className="hidden sm:inline">Erledigt</span>
                     </button>
 
                     <button
@@ -310,35 +313,38 @@ const ManageColumnsModalContent: React.FC<ManageColumnsModalProps> = ({
           {/* Add New Column Form */}
           <form onSubmit={handleAddColumn} className="space-y-2 pt-2 border-t border-border">
             <label className="block text-xs font-semibold text-main">Neue Spalte hinzufügen:</label>
-            <div className="flex items-center gap-1.5">
+            {/* Phones: the buttons go below the field, so nothing is cut off */}
+            <div className="flex flex-col sm:flex-row sm:items-center gap-1.5">
               <input
                 type="text"
                 value={newColName}
                 onChange={(e) => setNewColName(e.target.value)}
                 placeholder="z.B. Wartet auf Feedback, Review…"
-                className="flex-1 h-8 px-2.5 text-xs input-field"
+                className="w-full sm:w-auto sm:flex-1 min-w-0 h-11 sm:h-8 px-2.5 text-base sm:text-xs input-field"
               />
-              <button
-                type="button"
-                onClick={() => setNewColIsDone((prev) => !prev)}
-                className={`h-8 px-2.5 text-xs rounded-btn border transition-colors flex items-center gap-1 ${
-                  newColIsDone
-                    ? 'bg-status-ok/15 border-status-ok text-status-ok font-semibold'
-                    : 'bg-panel border-border text-muted hover:text-main'
-                }`}
-                title="Sollen Aufgaben in dieser Spalte als erledigt gelten?"
-              >
-                <Check className="w-3 h-3" />
-                <span>Erledigt</span>
-              </button>
-              <button
-                type="submit"
-                disabled={!newColName.trim()}
-                className="btn-primary h-8 px-3 text-xs flex items-center gap-1 disabled:opacity-40"
-              >
-                <Plus className="w-3.5 h-3.5" />
-                <span>Hinzufügen</span>
-              </button>
+              <div className="flex items-center gap-1.5">
+                <button
+                  type="button"
+                  onClick={() => setNewColIsDone((prev) => !prev)}
+                  className={`flex-1 sm:flex-none justify-center h-11 sm:h-8 px-2.5 text-xs rounded-btn border transition-colors flex items-center gap-1 ${
+                    newColIsDone
+                      ? 'bg-status-ok/15 border-status-ok text-status-ok font-semibold'
+                      : 'bg-panel border-border text-muted hover:text-main'
+                  }`}
+                  title="Sollen Aufgaben in dieser Spalte als erledigt gelten?"
+                >
+                  <Check className="w-3 h-3" />
+                  <span>Erledigt</span>
+                </button>
+                <button
+                  type="submit"
+                  disabled={!newColName.trim()}
+                  className="flex-1 sm:flex-none justify-center btn-primary h-11 sm:h-8 px-3 text-xs flex items-center gap-1 disabled:opacity-40"
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  <span>Hinzufügen</span>
+                </button>
+              </div>
             </div>
           </form>
 

frontend/src/features/triage/TasksView.tsx

@@ -35,6 +35,7 @@ import { api, triggerHaptic } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { TaskDetailModal } from './TaskDetailModal';
 import { OriginBadge } from '../../components/OriginBadge';
+import { VoiceInputButton } from '../../components/VoiceInputButton';
 import { ManageColumnsModal, DEFAULT_KANBAN_COLUMNS, columnDotClass } from './ManageColumnsModal';
 import { AvatarStack, AvatarPerson } from '../../components/AvatarStack';
 import { CountBadge } from '../../components/CountBadge';
@@ -138,6 +139,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
   // Quick Task Add state
   const [quickTitle, setQuickTitle] = useState('');
+  const [quickVoiceError, setQuickVoiceError] = useState<string | null>(null);
   const [quickDueDate, setQuickDueDate] = useState('');
   const quickInputRef = useRef<HTMLInputElement | null>(null);
   const { setGroups, setPrimaryAction } = useMobileActions();
@@ -145,6 +147,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
   // Mobile task creation & filter modal state
   const [showMobileCreateModal, setShowMobileCreateModal] = useState(false);
   const [mobileCreateTitle, setMobileCreateTitle] = useState('');
+  const [mobileVoiceError, setMobileVoiceError] = useState<string | null>(null);
+  const mobileCreateInputRef = useRef<HTMLInputElement | null>(null);
   const [mobileCreateDueDate, setMobileCreateDueDate] = useState('');
   const [mobileCreatePriority, setMobileCreatePriority] = useState<PriorityLevel>('normal');
   const [mobileCreateListId, setMobileCreateListId] = useState<string>('');
@@ -1679,13 +1683,21 @@ export const TasksView: React.FC<TasksViewProps> = ({
           value={quickTitle}
           onChange={(e) => setQuickTitle(e.target.value)}
           placeholder={
-            currentSelectedList
-              ? `Aufgabe zu "${currentSelectedList.title}" hinzufügen…`
-              : 'Neue Aufgabe anlegen…'
+            quickVoiceError ||
+            (currentSelectedList ? `Aufgabe zu "${currentSelectedList.title}" hinzufügen…` : 'Neue Aufgabe anlegen…')
           }
           className="flex-1 bg-transparent px-2 py-1.5 sm:py-1 text-sm text-main placeholder-faint focus:outline-none min-w-0"
         />
         <div className="flex items-center gap-1 flex-shrink-0">
+          <VoiceInputButton
+            value={quickTitle}
+            onChange={setQuickTitle}
+            focusRef={quickInputRef}
+            onError={(message) => {
+              setQuickVoiceError(message);
+              window.setTimeout(() => setQuickVoiceError(null), 4000);
+            }}
+          />
           <input
             type="date"
             value={quickDueDate}
@@ -1879,14 +1891,27 @@ export const TasksView: React.FC<TasksViewProps> = ({
             <form onSubmit={handleMobileCreateTask} className="space-y-3">
               <div>
                 <label className="text-[11px] font-semibold text-muted block mb-1">Aufgabentext</label>
-                <input
-                  type="text"
-                  autoFocus
-                  value={mobileCreateTitle}
-                  onChange={(e) => setMobileCreateTitle(e.target.value)}
-                  placeholder="Was ist zu tun?…"
-                  className="w-full input-field px-3 py-2 text-sm"
-                />
+                <div className="relative">
+                  <input
+                    ref={mobileCreateInputRef}
+                    type="text"
+                    autoFocus
+                    value={mobileCreateTitle}
+                    onChange={(e) => setMobileCreateTitle(e.target.value)}
+                    placeholder={mobileVoiceError || 'Was ist zu tun?…'}
+                    className="w-full input-field pl-3 pr-11 py-2 text-sm"
+                  />
+                  <VoiceInputButton
+                    value={mobileCreateTitle}
+                    onChange={setMobileCreateTitle}
+                    focusRef={mobileCreateInputRef}
+                    onError={(message) => {
+                      setMobileVoiceError(message);
+                      window.setTimeout(() => setMobileVoiceError(null), 4000);
+                    }}
+                    className="absolute right-1 top-1/2 -translate-y-1/2"
+                  />
+                </div>
               </div>
 
               {/* List Selector (if lists exist) */}