feat(theme): implement single-file CSS theming engine with dark, light, high-contrast, and soft themes
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 16s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 16s
This commit is contained in:
sandrodach committed
1 parent
0f24cbdbf4
commit
b3e651b3b9
18 files changed
+1455
-804
No files matched your search
@@ -210,15 +210,15 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
return (
|
||||
<div className="w-full">
|
||||
<form ref={containerRef} onSubmit={handleSubmit} className="relative">
|
||||
{/* Round Quick-Capture Input Bar */}
|
||||
{/* Quick-Capture Input Bar (Radius controlled by --radius-pill) */}
|
||||
<div
|
||||
className={`flex items-center h-9 pl-1.5 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 capture-pill transition-colors duration-150 ${
|
||||
isListening
|
||||
? 'border-accent bg-panel'
|
||||
: 'border-border focus-within:border-accent'
|
||||
}`}
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
|
||||
<div className="w-6 h-6 capture-pill bg-accent text-on-accent flex items-center justify-center mr-2 flex-shrink-0">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
</div>
|
||||
|
||||
@@ -244,7 +244,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
? 'Neue Workspace-Notiz direkt anlegen…'
|
||||
: 'Quick Dump: Gedanke einfach reinrotzen & später swipen… (C / Enter)'
|
||||
}
|
||||
className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
|
||||
className="w-full bg-transparent text-main placeholder-faint text-xs sm:text-sm focus:outline-none"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
@@ -254,10 +254,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
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 rounded-full text-[11px] flex items-center gap-1 transition-colors ${
|
||||
className={`h-6 px-2.5 capture-pill text-[11px] flex items-center gap-1 transition-colors ${
|
||||
showOptions || target !== 'inbox' || priority !== 'normal' || dueDate
|
||||
? 'bg-accent/20 text-accent border border-accent/40 font-medium'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated border border-transparent'
|
||||
? 'bg-accent-dim text-accent border border-accent-border font-medium'
|
||||
: 'text-muted hover:text-main hover:bg-panel-elevated border border-transparent'
|
||||
}`}
|
||||
>
|
||||
{target === 'task' ? (
|
||||
@@ -281,10 +281,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
type="button"
|
||||
onClick={toggleVoiceDictation}
|
||||
title="Spracheingabe"
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center transition-colors ${
|
||||
className={`w-6 h-6 capture-pill flex items-center justify-center transition-colors ${
|
||||
isListening
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
|
||||
? 'bg-accent-dim text-accent'
|
||||
: 'text-muted hover:text-main hover:bg-panel-elevated'
|
||||
}`}
|
||||
>
|
||||
{isListening ? <MicOff className="w-3 h-3" /> : <Mic className="w-3 h-3" />}
|
||||
@@ -294,10 +294,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!content.trim() || isSubmitting}
|
||||
className={`h-6 px-2.5 rounded-full font-medium text-[11px] flex items-center gap-1 transition-all ${
|
||||
className={`h-6 px-2.5 capture-pill 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'
|
||||
? 'bg-accent hover:bg-accent-hover text-on-accent cursor-pointer shadow-sm'
|
||||
: 'bg-panel-elevated text-faint cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{justSavedLabel ? (
|
||||
@@ -323,16 +323,16 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expandable Target & Metadata Panel (Square Monochromatic Dropdown) */}
|
||||
{/* Expandable Target & Metadata Panel (Theme-controlled Dropdown) */}
|
||||
{showOptions && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-3 bg-panel border border-border shadow-2xl space-y-3 text-xs">
|
||||
<div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-3 panel-surface shadow-panel space-y-3 text-xs">
|
||||
{/* Row 1: Where should this entry go? */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted">
|
||||
Wohin damit? {content.trim() ? '(Klick speichert sofort oder wählt Ziel)' : '(Ziel für Eingabe wählen)'}
|
||||
</span>
|
||||
<span className="text-[11px] text-zinc-500">
|
||||
<span className="text-[11px] text-faint">
|
||||
Standard: Quick Dump für späteres Swipen
|
||||
</span>
|
||||
</div>
|
||||
@@ -347,10 +347,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
executeCapture('inbox');
|
||||
}
|
||||
}}
|
||||
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
|
||||
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
|
||||
target === 'inbox'
|
||||
? 'bg-accent/20 border-accent text-white font-medium'
|
||||
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
|
||||
? 'bg-accent-dim border-accent text-main font-medium'
|
||||
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
|
||||
}`}
|
||||
>
|
||||
<Layers className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
@@ -366,10 +366,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
executeCapture('task');
|
||||
}
|
||||
}}
|
||||
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
|
||||
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
|
||||
target === 'task'
|
||||
? 'bg-accent/20 border-accent text-white font-medium'
|
||||
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
|
||||
? 'bg-accent-dim border-accent text-main font-medium'
|
||||
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
|
||||
}`}
|
||||
>
|
||||
<CheckSquare className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
@@ -385,10 +385,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
setTargetListId(lists[0].id);
|
||||
}
|
||||
}}
|
||||
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
|
||||
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
|
||||
target === 'list_item'
|
||||
? 'bg-accent/20 border-accent text-white font-medium'
|
||||
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
|
||||
? 'bg-accent-dim border-accent text-main font-medium'
|
||||
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
@@ -404,10 +404,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
executeCapture('document');
|
||||
}
|
||||
}}
|
||||
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
|
||||
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
|
||||
target === 'document'
|
||||
? 'bg-accent/20 border-accent text-white font-medium'
|
||||
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
|
||||
? 'bg-accent-dim border-accent text-main font-medium'
|
||||
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
@@ -416,10 +416,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optional Sub-Row: Shared List Picker (always shown if lists exist so 1-click list assignment is instant) */}
|
||||
{/* Optional Sub-Row: Shared List Picker */}
|
||||
{lists.length > 0 && (
|
||||
<div className="pt-2 border-t border-border flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-zinc-400 mr-1 flex items-center gap-1">
|
||||
<span className="text-muted mr-1 flex items-center gap-1">
|
||||
<ShoppingCart className="w-3 h-3 text-accent" />
|
||||
Liste:
|
||||
</span>
|
||||
@@ -436,10 +436,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
executeCapture('list_item', lst.id);
|
||||
}
|
||||
}}
|
||||
className={`h-7 px-2.5 border text-xs flex items-center gap-1.5 transition-colors ${
|
||||
className={`h-7 px-2.5 border rounded-btn text-xs flex items-center gap-1.5 transition-colors ${
|
||||
isSelected
|
||||
? 'bg-accent text-white border-accent font-medium'
|
||||
: 'bg-canvas border-border text-zinc-300 hover:text-white hover:bg-panel-hover'
|
||||
? 'bg-accent text-on-accent border-accent font-medium'
|
||||
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
|
||||
}`}
|
||||
>
|
||||
<span>{lst.icon}</span>
|
||||
@@ -453,7 +453,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
{/* Row 2: Priority & Due Date */}
|
||||
<div className="pt-2 border-t border-border flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-zinc-400 mr-1">Priorität:</span>
|
||||
<span className="text-muted mr-1">Priorität:</span>
|
||||
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
|
||||
const labels: Record<PriorityLevel, string> = {
|
||||
low: 'Niedrig',
|
||||
@@ -467,10 +467,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => setPriority(p)}
|
||||
className={`px-2.5 py-0.5 border transition-colors text-xs ${
|
||||
className={`px-2.5 py-0.5 border rounded-btn transition-colors text-xs ${
|
||||
active
|
||||
? 'bg-accent text-white border-accent font-medium'
|
||||
: 'bg-canvas text-zinc-400 hover:text-white border-border'
|
||||
? 'bg-accent text-on-accent border-accent font-medium'
|
||||
: 'bg-canvas text-muted hover:text-main border-border'
|
||||
}`}
|
||||
>
|
||||
{labels[p]}
|
||||
@@ -480,7 +480,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-zinc-400 flex items-center gap-1">
|
||||
<span className="text-muted flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3 text-accent" />
|
||||
Fällig am:
|
||||
</span>
|
||||
|
||||
Reference in new issue
Block a user