549 lines
26 KiB
TypeScript
549 lines
26 KiB
TypeScript
import { type Component, createSignal, createEffect, onMount, For, Show, Suspense, lazy } from "solid-js";
|
|
import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertTagDefinition, type TaskTemplate, currentTaskContext } from "@/store";
|
|
import { Search, Command, Clock, ArrowUpCircle, Copy, ChevronDown, Gauge, RotateCcw } from "lucide-solid";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
import { TextField, TextFieldInput } from "@/components/ui/textfield";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
|
|
import { TagPicker } from "@/components/TagPicker";
|
|
import { useTheme } from "./ThemeProvider";
|
|
import { getThemeAdjustedColor } from "@/lib/colors";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { toast } from "solid-sonner";
|
|
import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS } from "@/lib/constants";
|
|
|
|
const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
|
|
|
|
interface QuickEntryFormProps {
|
|
onSuccess?: () => void;
|
|
autoFocus?: boolean;
|
|
initialTitle?: string;
|
|
initialTags?: string[];
|
|
}
|
|
|
|
// Global state for QuickEntry persistence
|
|
const [input, setInput] = createSignal("");
|
|
const [priority, setPriority] = createSignal<string>("");
|
|
const [urgency, setUrgency] = createSignal<string>("");
|
|
const [tags, setTags] = createSignal<string[]>([]);
|
|
const [description, setDescription] = createSignal("");
|
|
const [size, setSize] = createSignal<string>("3");
|
|
const [dateString, setDateString] = createSignal<string>("");
|
|
const [showValidation, setShowValidation] = createSignal(false);
|
|
|
|
let lastParsedTags: string[] = [];
|
|
|
|
const resetQuickEntryState = () => {
|
|
setInput("");
|
|
setPriority("");
|
|
setUrgency("");
|
|
setTags([]);
|
|
setDescription("");
|
|
setSize("3");
|
|
setDateString("");
|
|
setShowValidation(false);
|
|
lastParsedTags = [];
|
|
};
|
|
|
|
export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
|
|
const { resolvedTheme } = useTheme();
|
|
|
|
const [editorInstance, setEditorInstance] = createSignal<any>(null);
|
|
|
|
let inputRef: HTMLInputElement | undefined;
|
|
|
|
onMount(() => {
|
|
if (props.autoFocus) {
|
|
setTimeout(() => inputRef?.focus(), 100);
|
|
}
|
|
if (props.initialTitle && !input()) {
|
|
setInput(props.initialTitle);
|
|
}
|
|
});
|
|
|
|
// Reactive sync from props (handles context changes while open)
|
|
createEffect(() => {
|
|
const initial = props.initialTags || [];
|
|
if (initial.length > 0) {
|
|
setTags(prev => {
|
|
// Merge initial tags if not already present
|
|
const next = [...prev];
|
|
initial.forEach(t => {
|
|
if (!next.includes(t)) next.push(t);
|
|
});
|
|
return next;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Reactive shorthand parsing
|
|
createEffect(() => {
|
|
const text = input();
|
|
|
|
const pMatch = text.match(/\/p(\d+)/);
|
|
if (pMatch) {
|
|
const val = Math.min(10, Math.max(1, parseInt(pMatch[1]))).toString();
|
|
setPriority(val);
|
|
}
|
|
|
|
const uMatch = text.match(/\/u(\d+)/);
|
|
if (uMatch) {
|
|
const val = Math.min(10, Math.max(1, parseInt(uMatch[1]))).toString();
|
|
if (val !== urgency()) {
|
|
onUrgencySimpleChange(val);
|
|
}
|
|
}
|
|
|
|
const tagRegex = /\/t\s*([^:/]+)(?=(?:[:/]))(?:[:](\d+))?/g;
|
|
const newParsedTags: string[] = [];
|
|
let match;
|
|
while ((match = tagRegex.exec(text)) !== null) {
|
|
const tagName = match[1].trim();
|
|
if (tagName) {
|
|
newParsedTags.push(tagName);
|
|
}
|
|
}
|
|
|
|
const currentTags = [...tags()];
|
|
const tagsToRemove = lastParsedTags.filter(t => !newParsedTags.includes(t));
|
|
const tagsToAdd = newParsedTags.filter(t => !currentTags.includes(t));
|
|
|
|
let nextTags = currentTags.filter(t => !tagsToRemove.includes(t));
|
|
nextTags = [...nextTags, ...tagsToAdd];
|
|
|
|
if (JSON.stringify(nextTags) !== JSON.stringify(currentTags)) {
|
|
setTags(nextTags);
|
|
}
|
|
lastParsedTags = newParsedTags;
|
|
});
|
|
|
|
const onUrgencySimpleChange = (val: any) => {
|
|
const value = typeof val === 'object' ? val.value : val;
|
|
if (!value) return;
|
|
|
|
setUrgency(value);
|
|
const level = parseInt(value);
|
|
if (!isNaN(level)) {
|
|
const newDateIso = calculateDateFromUrgency(level);
|
|
const dateObj = new Date(newDateIso);
|
|
const localIso = new Date(dateObj.getTime() - (dateObj.getTimezoneOffset() * 60000)).toISOString().slice(0, 16);
|
|
setDateString(localIso);
|
|
}
|
|
};
|
|
|
|
const onDateInputChange = (e: Event) => {
|
|
const val = (e.currentTarget as HTMLInputElement).value;
|
|
setDateString(val);
|
|
if (val) {
|
|
const level = calculateUrgencyFromDate(new Date(val).toISOString());
|
|
setUrgency(level.toString());
|
|
}
|
|
};
|
|
|
|
const parseAndAdd = async () => {
|
|
let text = input();
|
|
if (!text || !priority() || !urgency()) {
|
|
setShowValidation(true);
|
|
toast.error("Please fill in all required fields (Title, Priority, Urgency)");
|
|
if (!text) inputRef?.focus();
|
|
return;
|
|
}
|
|
|
|
let finalPriority = parseInt(priority());
|
|
let finalUrgency = parseInt(urgency());
|
|
const finalTags = [...tags()];
|
|
|
|
const pMatch = text.match(/\/p\s*(\d+)/);
|
|
if (pMatch) {
|
|
finalPriority = Math.min(10, Math.max(1, parseInt(pMatch[1])));
|
|
text = text.replace(pMatch[0], "");
|
|
}
|
|
|
|
const uMatch = text.match(/\/u\s*(\d+)/);
|
|
if (uMatch) {
|
|
finalUrgency = Math.min(10, Math.max(1, parseInt(uMatch[1])));
|
|
text = text.replace(uMatch[0], "");
|
|
}
|
|
|
|
const segments = text.split(/\/t\s*/);
|
|
let title = segments[0];
|
|
|
|
for (let i = 1; i < segments.length; i++) {
|
|
const seg = segments[i];
|
|
const firstColon = seg.indexOf(':');
|
|
let tagName = "";
|
|
let tagValue: number | undefined;
|
|
let remainingText = "";
|
|
|
|
if (firstColon === -1) {
|
|
tagName = seg.trim();
|
|
} else {
|
|
tagName = seg.slice(0, firstColon).trim();
|
|
const afterColon = seg.slice(firstColon + 1);
|
|
const valueMatch = afterColon.match(/^\s*(\d+)/);
|
|
|
|
if (valueMatch) {
|
|
tagValue = Math.min(10, Math.max(0, parseInt(valueMatch[1])));
|
|
remainingText = afterColon.slice(valueMatch[0].length);
|
|
} else {
|
|
remainingText = afterColon;
|
|
}
|
|
}
|
|
|
|
if (tagName) {
|
|
if (!finalTags.includes(tagName)) {
|
|
finalTags.push(tagName);
|
|
}
|
|
if (tagValue !== undefined) {
|
|
await upsertTagDefinition(tagName, tagValue, undefined, resolvedTheme());
|
|
}
|
|
}
|
|
title += " " + remainingText;
|
|
}
|
|
|
|
let finalDueDate: Date | null = null;
|
|
if (dateString()) {
|
|
finalDueDate = new Date(dateString());
|
|
} else {
|
|
const u = finalUrgency;
|
|
const dateStr = calculateDateFromUrgency(u);
|
|
finalDueDate = new Date(dateStr);
|
|
}
|
|
|
|
// Apply context tags at the time of creation
|
|
const ctx = currentTaskContext();
|
|
if (store.isNotepadMode) {
|
|
const activeNoteId = (window as any)._activeNoteId;
|
|
if (activeNoteId) {
|
|
const note = store.notes.find(n => n.id === activeNoteId);
|
|
if (note && note.title) {
|
|
const noteTagName = note.title.trim();
|
|
if (noteTagName && !finalTags.includes(noteTagName)) finalTags.push(noteTagName);
|
|
}
|
|
}
|
|
} else if (typeof ctx === 'object') {
|
|
if ('bucketId' in ctx) {
|
|
const bucketName = ctx.name;
|
|
if (bucketName) {
|
|
const tag = `@${bucketName}`;
|
|
if (!finalTags.includes(tag)) finalTags.push(tag);
|
|
}
|
|
} else if ('userId' in ctx) {
|
|
const userName = ctx.name;
|
|
if (userName) {
|
|
const tag = `@${userName}`;
|
|
if (!finalTags.includes(tag)) finalTags.push(tag);
|
|
}
|
|
}
|
|
}
|
|
|
|
addTask(title.replace(/\s+/g, " ").trim(), {
|
|
priority: finalPriority,
|
|
dueDate: finalDueDate || undefined,
|
|
tags: finalTags,
|
|
content: description(),
|
|
size: parseInt(size())
|
|
});
|
|
|
|
resetQuickEntryState();
|
|
|
|
const instance = editorInstance();
|
|
if (instance) instance.commands.setContent("");
|
|
|
|
if (props.onSuccess) props.onSuccess();
|
|
};
|
|
|
|
const applyTemplate = (template: TaskTemplate) => {
|
|
setInput(template.title);
|
|
setPriority(template.priority.toString());
|
|
setUrgency(template.urgency.toString());
|
|
setTags([...(template.tags || [])]);
|
|
setDescription(template.content || "");
|
|
|
|
const level = template.urgency;
|
|
const newDateIso = calculateDateFromUrgency(level);
|
|
const dateObj = new Date(newDateIso);
|
|
const localIso = new Date(dateObj.getTime() - (dateObj.getTimezoneOffset() * 60000)).toISOString().slice(0, 16);
|
|
setDateString(localIso);
|
|
|
|
const instance = editorInstance();
|
|
if (instance) {
|
|
instance.commands.setContent(template.content || "");
|
|
}
|
|
toast.info(`Applied template: ${template.name}`);
|
|
};
|
|
|
|
return (
|
|
<div class="flex flex-col h-full bg-card">
|
|
<div class={cn("flex flex-col border-b border-border sticky top-0 bg-card z-10 transition-colors", showValidation() && !input() && "bg-destructive/5")}>
|
|
<div class="flex items-center px-4 py-3">
|
|
<Search class={cn("text-muted-foreground mr-3 transition-colors", showValidation() && !input() && "text-destructive")} size={20} />
|
|
<TextField
|
|
class="flex-1"
|
|
validationState={showValidation() && !input() ? "invalid" : "valid"}
|
|
>
|
|
<TextFieldInput
|
|
id="quick-entry-input"
|
|
name="task-title"
|
|
ref={inputRef}
|
|
value={input()}
|
|
onInput={(e) => setInput(e.currentTarget.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
|
|
placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
|
|
class="border-none shadow-none focus-visible:ring-0 text-lg p-0"
|
|
/>
|
|
</TextField>
|
|
</div>
|
|
<Show when={showValidation() && !input()}>
|
|
<div class="px-4 pb-2 -mt-1 flex items-center gap-1.5 animate-in fade-in slide-in-from-top-1 duration-200">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-destructive" />
|
|
<span class="text-[0.625rem] font-bold uppercase tracking-widest text-destructive/80">
|
|
Title is required to create a task
|
|
</span>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto overscroll-contain">
|
|
<div class="flex flex-col md:flex-row flex-wrap items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
|
|
<div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
|
|
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
|
|
Priority <span class="text-destructive">*</span>
|
|
</label>
|
|
<Select<any>
|
|
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) => (
|
|
<SelectItem item={props.item}>
|
|
{props.item.rawValue.label}
|
|
</SelectItem>
|
|
)}
|
|
validationState={showValidation() && !priority() ? "invalid" : "valid"}
|
|
>
|
|
<SelectTrigger
|
|
class={cn(
|
|
"w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
|
|
showValidation() && !priority() && "border-destructive/50 bg-destructive/5"
|
|
)}
|
|
>
|
|
<div class="flex items-center gap-2 truncate">
|
|
<ArrowUpCircle size={14} class={cn("text-primary shrink-0", showValidation() && !priority() && "text-destructive")} />
|
|
<span class={cn("text-sm font-medium truncate", showValidation() && !priority() && "text-destructive")}>
|
|
{PRIORITY_OPTIONS.find(o => o.value === priority())?.label || (priority() === "" ? "Pick Priority" : priority())}
|
|
</span>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent />
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
|
|
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
|
|
<Select<any>
|
|
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) => (
|
|
<SelectItem item={props.item}>
|
|
{props.item.rawValue.label}
|
|
</SelectItem>
|
|
)}
|
|
>
|
|
<SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
|
|
<div class="flex items-center gap-2 truncate">
|
|
<Gauge size={14} class="text-primary shrink-0" />
|
|
<span class="text-sm font-medium truncate">
|
|
{SIZE_OPTIONS.find(o => o.value === size())?.label || size()}
|
|
</span>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent />
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
|
|
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
|
|
Urgency <span class="text-destructive">*</span>
|
|
</label>
|
|
<Select<any>
|
|
value={urgency()}
|
|
onChange={(val) => onUrgencySimpleChange(val)}
|
|
options={URGENCY_OPTIONS}
|
|
optionValue="value"
|
|
optionTextValue="label"
|
|
placeholder="Urgency"
|
|
itemComponent={(props) => (
|
|
<SelectItem item={props.item}>
|
|
{props.item.rawValue.label}
|
|
</SelectItem>
|
|
)}
|
|
validationState={showValidation() && !urgency() ? "invalid" : "valid"}
|
|
>
|
|
<SelectTrigger
|
|
class={cn(
|
|
"w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
|
|
showValidation() && !urgency() && "border-destructive/50 bg-destructive/5"
|
|
)}
|
|
>
|
|
<div class="flex items-center gap-2 truncate">
|
|
<Clock size={14} class={cn("text-primary shrink-0", showValidation() && !urgency() && "text-destructive")} />
|
|
<span class={cn("text-sm font-medium truncate", showValidation() && !urgency() && "text-destructive")}>
|
|
{URGENCY_OPTIONS.find(o => o.value === urgency())?.label || (urgency() === "" ? "Pick Urgency" : urgency())}
|
|
</span>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent />
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row items-stretch md:items-center px-4 py-3 gap-4 bg-muted/10 border-b border-border">
|
|
<div class="flex-1 flex flex-wrap gap-2 items-center">
|
|
<TagPicker selectedTags={tags()} onTagsChange={setTags} />
|
|
<For each={tags().filter(t => !t.endsWith("_favorite__"))}>
|
|
{(tag) => (
|
|
<Badge
|
|
variant="secondary"
|
|
class="h-7 px-2 text-xs gap-1 bg-background border border-border/50 cursor-pointer hover:bg-destructive/10 hover:border-destructive/30 group/tag transition-all"
|
|
style={{
|
|
"background-color": (() => {
|
|
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))}
|
|
>
|
|
<div
|
|
class="w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive"
|
|
style={{
|
|
"background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
|
|
}}
|
|
/>
|
|
{tag}
|
|
</Badge>
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
<div class="w-full md:w-auto md:min-w-[200px] space-y-1.5">
|
|
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
|
|
<div class="relative">
|
|
<input
|
|
type="datetime-local"
|
|
value={dateString()}
|
|
onInput={onDateInputChange}
|
|
onClick={(e) => (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 relative cursor-pointer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-3 bg-card min-h-[80px]">
|
|
<Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
|
|
<TaskEditor
|
|
content={description()}
|
|
onUpdate={setDescription}
|
|
onEditorReady={setEditorInstance}
|
|
class="min-h-[60px] prose-sm"
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-muted/30 flex justify-between items-center shrink-0 border-t border-border">
|
|
<div class="flex items-center space-x-2 text-[0.625rem] font-bold text-muted-foreground uppercase tracking-widest">
|
|
<Command size={10} />
|
|
<span class="hidden sm:inline">K to focus • Enter to Add</span>
|
|
<span class="sm:hidden">Enter to Add</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-9 w-9 text-muted-foreground hover:text-destructive"
|
|
onClick={() => {
|
|
resetQuickEntryState();
|
|
editorInstance()?.commands.setContent("");
|
|
}}
|
|
title="Restart Quick Entry"
|
|
>
|
|
<RotateCcw size={16} />
|
|
</Button>
|
|
<Show when={(store.templates || []).length > 0}>
|
|
<Popover>
|
|
<PopoverTrigger
|
|
as={Button}
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-9 px-3 gap-2 hover:bg-primary/10 hover:text-primary text-muted-foreground transition-all rounded-xl border border-border/40"
|
|
>
|
|
<Copy size={14} />
|
|
<span class="text-[0.625rem] font-bold uppercase tracking-wider hidden sm:inline">Use Template</span>
|
|
<ChevronDown size={12} class="opacity-50" />
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-64 p-2 bg-card border-border shadow-xl">
|
|
<div class="space-y-1">
|
|
<For each={store.templates}>
|
|
{(template) => (
|
|
<button
|
|
class="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-muted transition-colors text-left group"
|
|
onClick={() => applyTemplate(template)}
|
|
>
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0 group-hover:bg-primary group-hover:text-primary-foreground transition-all">
|
|
<Copy size={14} />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-bold truncate tracking-tight">{template.name}</p>
|
|
<p class="text-[0.5625rem] uppercase font-black text-muted-foreground opacity-60 tracking-widest">
|
|
P:{template.priority} / U:{template.urgency}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Show>
|
|
|
|
<Button size="sm" onClick={parseAndAdd}>
|
|
Create Task
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|