diff --git a/src/components/QuickEntry.tsx b/src/components/QuickEntry.tsx index 425178b..872ca4c 100644 --- a/src/components/QuickEntry.tsx +++ b/src/components/QuickEntry.tsx @@ -1,6 +1,6 @@ import { type Component, createSignal, createEffect, onCleanup, onMount, For, Show } from "solid-js"; import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertTagDefinition, type TaskTemplate } from "@/store"; -import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown, Gauge } from "lucide-solid"; +import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown, Gauge, X } from "lucide-solid"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { TextField, TextFieldInput } from "@/components/ui/textfield"; @@ -258,11 +258,11 @@ export const QuickEntry: Component = () => { {isOpen() && ( -
+
setIsOpen(false)} /> -
-
+
+
{ class="border-none shadow-none focus-visible:ring-0 text-lg" /> +
- {/* Row 1: Priority, Size, Urgency */} -
-
- - - value={priority()} - onChange={(val) => { - const v = typeof val === 'object' ? val.value : val; - if (v) setPriority(v); - }} - options={PRIORITY_OPTIONS} - optionValue="value" - optionTextValue="label" - placeholder="Priority" - itemComponent={(props) => ( - - {props.item.rawValue.label} - - )} - > - -
- - - {PRIORITY_OPTIONS.find(o => o.value === priority())?.label || (priority() === "" ? "Pick Priority" : priority())} - -
- - - -
- -
- - - value={size()} - onChange={(val) => { - const v = typeof val === 'object' ? val.value : val; - if (v) setSize(v); - }} - options={SIZE_OPTIONS} - optionValue="value" - optionTextValue="label" - placeholder="Size" - itemComponent={(props) => ( - - {props.item.rawValue.label} - - )} - > - -
- - - {SIZE_OPTIONS.find(o => o.value === size())?.label || size()} - -
- - - -
- -
- - - value={urgency()} - onChange={(val) => onUrgencySimpleChange(val)} - options={URGENCY_OPTIONS} - optionValue="value" - optionTextValue="label" - placeholder="Urgency" - itemComponent={(props) => ( - - {props.item.rawValue.label} - - )} - > - -
- - - {URGENCY_OPTIONS.find(o => o.value === urgency())?.label || (urgency() === "" ? "Pick Urgency" : urgency())} - -
- - - -
-
- - {/* Row 2: Tags + Due Date */} -
-
- - - {(tag) => ( - { - const def = store.tagDefinitions.find(d => d.name === tag); - const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()); - return color ? `${color}15` : undefined; - })(), - "border-color": (() => { - const def = store.tagDefinitions.find(d => d.name === tag); - const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()); - return color ? `${color}30` : undefined; - })(), - "color": (() => { - const def = store.tagDefinitions.find(d => d.name === tag); - return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit"; - })() - }} - onClick={() => setTags(tags().filter(t => t !== tag))} - > -
d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8" - }} - /> - {tag} - - )} - -
- -
- -
- (e.target as HTMLInputElement).showPicker?.()} - onKeyDown={(e) => { - if (e.key !== "Tab" && e.key !== "Escape") { - e.preventDefault(); - } + {/* Scrollable content area */} +
+ {/* Row 1: Priority, Size, Urgency */} +
+
+ + + value={priority()} + onChange={(val) => { + const v = typeof val === 'object' ? val.value : val; + if (v) setPriority(v); }} - step="900" - class="w-full h-10 px-3 bg-background border-none rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring z-[102] relative cursor-pointer" - /> + options={PRIORITY_OPTIONS} + optionValue="value" + optionTextValue="label" + placeholder="Priority" + itemComponent={(props) => ( + + {props.item.rawValue.label} + + )} + > + +
+ + + {PRIORITY_OPTIONS.find(o => o.value === priority())?.label || (priority() === "" ? "Pick Priority" : priority())} + +
+ + + +
+ +
+ + + value={size()} + onChange={(val) => { + const v = typeof val === 'object' ? val.value : val; + if (v) setSize(v); + }} + options={SIZE_OPTIONS} + optionValue="value" + optionTextValue="label" + placeholder="Size" + itemComponent={(props) => ( + + {props.item.rawValue.label} + + )} + > + +
+ + + {SIZE_OPTIONS.find(o => o.value === size())?.label || size()} + +
+ + + +
+ +
+ + + value={urgency()} + onChange={(val) => onUrgencySimpleChange(val)} + options={URGENCY_OPTIONS} + optionValue="value" + optionTextValue="label" + placeholder="Urgency" + itemComponent={(props) => ( + + {props.item.rawValue.label} + + )} + > + +
+ + + {URGENCY_OPTIONS.find(o => o.value === urgency())?.label || (urgency() === "" ? "Pick Urgency" : urgency())} + +
+ + +
+ + {/* Row 2: Tags + Due Date */} +
+
+ + + {(tag) => ( + { + const def = store.tagDefinitions.find(d => d.name === tag); + const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()); + return color ? `${color}15` : undefined; + })(), + "border-color": (() => { + const def = store.tagDefinitions.find(d => d.name === tag); + const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()); + return color ? `${color}30` : undefined; + })(), + "color": (() => { + const def = store.tagDefinitions.find(d => d.name === tag); + return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit"; + })() + }} + onClick={() => setTags(tags().filter(t => t !== tag))} + > +
d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8" + }} + /> + {tag} + + )} + +
+ +
+ +
+ (e.target as HTMLInputElement).showPicker?.()} + onKeyDown={(e) => { + if (e.key !== "Tab" && e.key !== "Escape") { + e.preventDefault(); + } + }} + step="900" + class="w-full h-10 px-3 bg-background border-none rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring z-[102] relative cursor-pointer" + /> +
+
+
+ +
+ }> + + +
-
- }> - - -
- -
+