sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(header): move quick capture bar into header above tabs with floating options dropdown
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 20:13:54 +02:00
1 parent ec9ba8fd9f
commit 2d4a2bde41
2 files changed
+29 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/capture/InstantCaptureBar.tsx
+14 -14
View File
@@ -135,14 +135,14 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
<form onSubmit={handleSubmit} className="relative">
{/* Capture Input Bar */}
<div
className={`flex items-center h-11 pl-2 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
isListening
? 'border-accent bg-panel'
: 'border-border focus-within:border-accent'
}`}
>
<div className="w-7 h-7 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
<Sparkles className="w-3.5 h-3.5" />
<div className="w-6 h-6 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
<Sparkles className="w-3 h-3" />
</div>
<input
@@ -153,7 +153,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
placeholder={
isListening
? 'Ich höre zu…'
: 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
: 'Schnell-Notiz: Gedanke oder Zutat erfassen… (Taste C oder /)'
}
className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
autoComplete="off"
@@ -165,13 +165,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="button"
onClick={() => setShowOptions((prev) => !prev)}
title="Priorität & Fälligkeit"
className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
className={`h-6 px-2 rounded-full text-[11px] flex items-center gap-1 transition-colors ${
showOptions || priority !== 'normal' || dueDate
? 'bg-accent/20 text-accent border border-accent/40'
? 'bg-accent/20 text-accent border border-accent/40 font-medium'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
}`}
>
<Calendar className="w-3.5 h-3.5" />
<Calendar className="w-3 h-3" />
<span className="hidden sm:inline">
{dueDate ? dueDate : priority !== 'normal' ? priority.toUpperCase() : 'Optionen'}
</span>
@@ -182,20 +182,20 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="button"
onClick={toggleVoiceDictation}
title="Spracheingabe"
className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
className={`w-6 h-6 rounded-full flex items-center justify-center transition-colors ${
isListening
? 'bg-accent/20 text-accent'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
}`}
>
{isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
{isListening ? <MicOff className="w-3 h-3" /> : <Mic className="w-3 h-3" />}
</button>
{/* Instant Send Button */}
<button
type="submit"
disabled={!content.trim() || isSubmitting}
className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
className={`h-6 px-2.5 rounded-full font-medium text-[11px] flex items-center gap-1 transition-all ${
content.trim()
? 'bg-accent hover:bg-accent-hover text-white cursor-pointer shadow-sm'
: 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
@@ -203,12 +203,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
>
{justSaved ? (
<>
<Check className="w-3.5 h-3.5" />
<Check className="w-3 h-3" />
<span className="hidden sm:inline">Gespeichert</span>
</>
) : (
<>
<ArrowUp className="w-3.5 h-3.5" />
<ArrowUp className="w-3 h-3" />
<span className="hidden sm:inline">Sichern</span>
</>
)}
@@ -216,9 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div>
</div>
{/* Expandable Quick Metadata */}
{/* Expandable Quick Metadata (Floating Dropdown) */}
{showOptions && (
<div className="mt-1 px-3 py-2 bg-panel border border-border flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-2.5 bg-panel border border-border shadow-2xl flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-1.5">
<span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {