diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1ffc867..b64bc22 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1022,7 +1022,7 @@ export const App: React.FC = () => { onClick={() => setShowMobileCapture(false)} >
e.stopPropagation()} > {/* Header */} @@ -1045,6 +1045,8 @@ export const App: React.FC = () => { {/* InstantCaptureBar */}
{ handleCaptured(thought, target); setShowMobileCapture(false); diff --git a/frontend/src/features/capture/InstantCaptureBar.tsx b/frontend/src/features/capture/InstantCaptureBar.tsx index c2d5f82..aeaaabe 100644 --- a/frontend/src/features/capture/InstantCaptureBar.tsx +++ b/frontend/src/features/capture/InstantCaptureBar.tsx @@ -21,19 +21,23 @@ interface InstantCaptureBarProps { onCaptured: (thought: Thought, target?: CaptureTarget) => void; lists?: SharedList[]; autoFocusTrigger?: number; + inlineOptions?: boolean; + defaultShowOptions?: boolean; } export const InstantCaptureBar: React.FC = ({ onCaptured, lists = [], autoFocusTrigger = 0, + inlineOptions = false, + defaultShowOptions = false, }) => { const [content, setContent] = useState(''); const [priority, setPriority] = useState('normal'); const [dueDate, setDueDate] = useState(''); const [target, setTarget] = useState('inbox'); const [targetListId, setTargetListId] = useState(''); - const [showOptions, setShowOptions] = useState(false); + const [showOptions, setShowOptions] = useState(defaultShowOptions); const [isListening, setIsListening] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [justSavedLabel, setJustSavedLabel] = useState(null); @@ -72,6 +76,7 @@ export const InstantCaptureBar: React.FC = ({ // Close dropdown on outside click useEffect(() => { + if (inlineOptions) return; const handleClickOutside = (e: MouseEvent) => { if (containerRef.current && !containerRef.current.contains(e.target as Node)) { setShowOptions(false); @@ -79,7 +84,7 @@ export const InstantCaptureBar: React.FC = ({ }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); - }, []); + }, [inlineOptions]); // Global keyboard shortcut: 'c' or '/' focuses the Instant Capture input immediately useEffect(() => { @@ -293,7 +298,7 @@ export const InstantCaptureBar: React.FC = ({ type="button" onClick={() => setShowOptions((prev) => !prev)} title="Ziel wählen (Quick Dump, direkt als Aufgabe, auf Liste oder als Notiz) & Optionen" - className={`h-6 px-2.5 capture-pill rounded-full text-[11px] flex items-center gap-1 transition-colors ${ + className={`h-6 px-2.5 capture-pill rounded-full text-[11px] flex items-center gap-1 transition-colors cursor-pointer ${ showOptions || target !== 'inbox' || priority !== 'normal' || dueDate ? 'bg-accent-dim text-accent border border-accent-border font-medium' : 'text-muted hover:text-main hover:bg-panel-elevated border border-transparent' @@ -308,11 +313,11 @@ export const InstantCaptureBar: React.FC = ({ ) : ( )} - + {getTargetLabel()} {dueDate && • {dueDate.slice(5)}} - + {/* Voice Dictation Button */} @@ -362,9 +367,15 @@ export const InstantCaptureBar: React.FC = ({
- {/* Expandable Target & Metadata Panel (Theme-controlled Dropdown) */} + {/* Expandable Target & Metadata Panel (Theme-controlled Dropdown or Inline) */} {showOptions && ( -
+
{/* Row 1: Where should this entry go? */}
@@ -386,7 +397,7 @@ export const InstantCaptureBar: React.FC = ({ executeCapture('inbox'); } }} - className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${ + className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${ target === 'inbox' ? 'bg-accent-dim border-accent text-main font-medium' : 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover' @@ -405,7 +416,7 @@ export const InstantCaptureBar: React.FC = ({ executeCapture('task'); } }} - className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${ + className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${ target === 'task' ? 'bg-accent-dim border-accent text-main font-medium' : 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover' @@ -424,7 +435,7 @@ export const InstantCaptureBar: React.FC = ({ setTargetListId(lists[0].id); } }} - className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${ + className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${ target === 'list_item' ? 'bg-accent-dim border-accent text-main font-medium' : 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover' @@ -443,7 +454,7 @@ export const InstantCaptureBar: React.FC = ({ executeCapture('document'); } }} - className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${ + className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${ target === 'document' ? 'bg-accent-dim border-accent text-main font-medium' : 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover' @@ -475,7 +486,7 @@ export const InstantCaptureBar: React.FC = ({ executeCapture('list_item', lst.id); } }} - className={`h-7 px-2.5 border rounded-btn text-xs flex items-center gap-1.5 transition-colors ${ + className={`min-h-[30px] px-2.5 border rounded-btn text-xs flex items-center gap-1.5 transition-colors cursor-pointer ${ isSelected ? 'bg-accent text-on-accent border-accent font-medium' : 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover' @@ -506,7 +517,7 @@ export const InstantCaptureBar: React.FC = ({ key={p} type="button" onClick={() => setPriority(p)} - className={`px-2.5 py-0.5 border rounded-btn transition-colors text-xs ${ + className={`min-h-[30px] px-2.5 py-1 border rounded-btn transition-colors text-xs cursor-pointer ${ active ? 'bg-accent text-on-accent border-accent font-medium' : 'bg-canvas text-muted hover:text-main border-border' @@ -527,7 +538,7 @@ export const InstantCaptureBar: React.FC = ({ type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} - className="input-field px-2 py-0.5 text-xs" + className="input-field px-2.5 py-1 text-xs min-h-[30px]" />