First draft

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Mic, MicOff, Send, Sparkles, Calendar, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { PriorityLevel, Thought } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface InstantCaptureBarProps {
+  onCaptured: (thought: Thought) => void;
+  autoFocusTrigger?: number;
+}
+
+export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
+  onCaptured,
+  autoFocusTrigger = 0,
+}) => {
+  const [content, setContent] = useState('');
+  const [priority, setPriority] = useState<PriorityLevel>('normal');
+  const [dueDate, setDueDate] = useState('');
+  const [showOptions, setShowOptions] = useState(false);
+  const [isListening, setIsListening] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [justSaved, setJustSaved] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const recognitionRef = useRef<any>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [autoFocusTrigger]);
+
+  // Global keyboard shortcut: 'c' or '/' focuses the Instant Capture input immediately
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      const isEditing =
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable;
+
+      if (!isEditing && (e.key === 'c' || e.key === 'C' || e.key === '/')) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      } else if (e.key === 'Escape' && document.activeElement === inputRef.current) {
+        setContent('');
+        setShowOptions(false);
+        inputRef.current?.blur();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const toggleVoiceDictation = () => {
+    const SpeechRecognition =
+      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+
+    if (!SpeechRecognition) {
+      alert('Spracheingabe wird von diesem Browser nicht direkt unterstützt (bitte Chrome, Edge oder Safari nutzen).');
+      return;
+    }
+
+    if (isListening && recognitionRef.current) {
+      recognitionRef.current.stop();
+      setIsListening(false);
+      return;
+    }
+
+    try {
+      const recognition = new SpeechRecognition();
+      recognition.lang = 'de-DE';
+      recognition.continuous = false;
+      recognition.interimResults = true;
+
+      recognition.onstart = () => {
+        setIsListening(true);
+        triggerHaptic(20);
+      };
+
+      recognition.onresult = (event: any) => {
+        let transcript = '';
+        for (let i = 0; i < event.results.length; i++) {
+          transcript += event.results[i][0].transcript;
+        }
+        setContent((prev) => {
+          const base = prev.replace(/\s*\[…\]$/, '').trim();
+          return base ? `${base} ${transcript}` : transcript;
+        });
+      };
+
+      recognition.onerror = () => {
+        setIsListening(false);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+        inputRef.current?.focus();
+      };
+
+      recognitionRef.current = recognition;
+      recognition.start();
+    } catch {
+      setIsListening(false);
+    }
+  };
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    const trimmed = content.trim();
+    if (!trimmed || isSubmitting) return;
+
+    setIsSubmitting(true);
+    triggerHaptic(15);
+
+    try {
+      const created = await api.captureThought(
+        trimmed,
+        priority,
+        isListening ? 'voice' : 'manual',
+        dueDate
+      );
+      setContent('');
+      setPriority('normal');
+      setDueDate('');
+      setShowOptions(false);
+      setJustSaved(true);
+      setTimeout(() => setJustSaved(false), 1800);
+      onCaptured(created);
+      inputRef.current?.focus();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-3xl mx-auto">
+      <form onSubmit={handleSubmit} className="relative">
+        <div
+          className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] gemini-border gemini-input-glow transition-all duration-200 ${
+            isListening ? 'border-[#c58af9] shadow-purple-glow' : ''
+          }`}
+        >
+          <Sparkles
+            className={`w-5 h-5 mr-3 flex-shrink-0 transition-colors ${
+              isListening
+                ? 'text-[#c58af9] animate-pulse'
+                : justSaved
+                ? 'text-[#81c995]'
+                : 'text-[#8ab4f8]'
+            }`}
+          />
+
+          <input
+            ref={inputRef}
+            type="text"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={
+              isListening
+                ? 'Ich höre zu… sprich deinen Gedanken aus'
+                : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
+            }
+            className="w-full bg-transparent text-[#e3e3e3] placeholder-[#9aa0a6] text-sm sm:text-base focus:outline-none"
+            autoComplete="off"
+          />
+
+          <div className="flex items-center gap-1.5 ml-2 flex-shrink-0">
+            {/* Options Toggle Pill (Due Date / Priority) */}
+            <button
+              type="button"
+              onClick={() => setShowOptions((prev) => !prev)}
+              title="Priorität & Fälligkeitsdatum"
+              className={`h-9 px-3 rounded-full text-xs font-medium flex items-center gap-1.5 transition-colors ${
+                showOptions || priority !== 'normal' || dueDate
+                  ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
+                  : 'text-[#9aa0a6] hover:bg-[#282a2c] hover:text-[#e3e3e3]'
+              }`}
+            >
+              <Calendar className="w-3.5 h-3.5" />
+              <span className="hidden sm:inline">
+                {dueDate ? dueDate : priority !== 'normal' ? priority.toUpperCase() : 'Optionen'}
+              </span>
+            </button>
+
+            {/* Voice Dictation Pill Button */}
+            <button
+              type="button"
+              onClick={toggleVoiceDictation}
+              title="Spracheingabe (Diktieren)"
+              className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${
+                isListening
+                  ? 'bg-[#c58af9] text-[#0b0f19] animate-pulse'
+                  : 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#323538]'
+              }`}
+            >
+              {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+            </button>
+
+            {/* Instant Send Pill Button */}
+            <button
+              type="submit"
+              disabled={!content.trim() || isSubmitting}
+              className={`h-9 px-4 rounded-full font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+                content.trim()
+                  ? 'bg-[#8ab4f8] text-[#0b0f19] hover:bg-[#a1c2fa] shadow-sm cursor-pointer'
+                  : 'bg-[#282a2c] text-[#5f6368] cursor-not-allowed'
+              }`}
+            >
+              {justSaved ? (
+                <>
+                  <CheckCircle2 className="w-4 h-4 text-[#0b0f19]" />
+                  <span className="hidden sm:inline">Gespeichert</span>
+                </>
+              ) : (
+                <>
+                  <Send className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Einfrieren</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Expandable Quick Metadata Pills */}
+        {showOptions && (
+          <div className="mt-2.5 px-4 py-2.5 rounded-full bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-2 text-xs animate-fadeIn">
+            <div className="flex items-center gap-1.5">
+              <AlertTriangle className="w-3.5 h-3.5 text-[#9aa0a6] mr-1" />
+              <span className="text-[#9aa0a6] mr-1">Priorität:</span>
+              {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
+                const labels: Record<PriorityLevel, string> = {
+                  low: 'Niedrig',
+                  normal: 'Normal',
+                  high: 'Hoch',
+                  urgent: 'Dringend',
+                };
+                const active = priority === p;
+                return (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => setPriority(p)}
+                    className={`px-3 py-1 rounded-full transition-colors ${
+                      active
+                        ? p === 'urgent'
+                          ? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
+                          : 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+                        : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                    }`}
+                  >
+                    {labels[p]}
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-[#9aa0a6]">Fällig am:</span>
+              <input
+                type="date"
+                value={dueDate}
+                onChange={(e) => setDueDate(e.target.value)}
+                className="bg-[#1e1f20] text-[#e3e3e3] px-3 py-1 rounded-full gemini-border text-xs focus:outline-none focus:border-[#8ab4f8]"
+              />
+            </div>
+          </div>
+        )}
+      </form>
+    </div>
+  );
+};