430 lines
21 KiB
TypeScript
430 lines
21 KiB
TypeScript
import { type Component, createSignal, createEffect, onCleanup, onMount, For, Show } from "solid-js";
|
|
import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertMultipleTagDefinitions, type TaskTemplate } from "@/store";
|
|
import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown } 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 { lazy, Suspense } from "solid-js";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { toast } from "solid-sonner";
|
|
|
|
const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
|
|
|
|
export const QuickEntry: Component = () => {
|
|
// Diff tracking for reactive tags
|
|
let lastParsedTags: string[] = [];
|
|
|
|
const [isOpen, setIsOpen] = createSignal(false);
|
|
const [input, setInput] = createSignal("");
|
|
const [priority, setPriority] = createSignal<string>("5");
|
|
const [urgency, setUrgency] = createSignal<string>("5");
|
|
const [tags, setTags] = createSignal<string[]>([]);
|
|
const [description, setDescription] = createSignal("");
|
|
const [editorInstance, setEditorInstance] = createSignal<any>(null);
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
// Tag Shortcut Parsing: /t [tag name]:[optional value]
|
|
// This is reactive. To avoid "prefix storm", only add if terminated by : or /
|
|
// Tag Shortcut Parsing: /t [tag name]:[optional value]
|
|
// Regex: /t, name (no : or /), lookahead for terminator (: or /), optional value group
|
|
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()];
|
|
// Determine changes
|
|
const tagsToRemove = lastParsedTags.filter(t => !newParsedTags.includes(t));
|
|
const tagsToAdd = newParsedTags.filter(t => !currentTags.includes(t));
|
|
|
|
// Apply changes
|
|
let nextTags = currentTags.filter(t => !tagsToRemove.includes(t));
|
|
nextTags = [...nextTags, ...tagsToAdd];
|
|
|
|
if (JSON.stringify(nextTags) !== JSON.stringify(currentTags)) {
|
|
setTags(nextTags);
|
|
}
|
|
|
|
lastParsedTags = newParsedTags;
|
|
});
|
|
|
|
// Explicit date string for the input (YYYY-MM-DDTHH:mm)
|
|
const [dateString, setDateString] = createSignal<string>("");
|
|
let inputRef: HTMLInputElement | undefined;
|
|
|
|
createEffect(() => {
|
|
if (isOpen()) {
|
|
// Slight delay to ensure DOM is ready and animations don't interfere
|
|
setTimeout(() => inputRef?.focus(), 50);
|
|
}
|
|
});
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
|
e.preventDefault();
|
|
if (isOpen()) {
|
|
inputRef?.focus();
|
|
} else {
|
|
setIsOpen(true);
|
|
}
|
|
}
|
|
if (e.key === "Escape") {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
onMount(() => window.addEventListener("keydown", handleKeyDown));
|
|
onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
|
|
|
|
// When urgency changes via dropdown, update the date
|
|
const onUrgencySimpleChange = (val: string) => {
|
|
setUrgency(val);
|
|
const level = parseInt(val);
|
|
if (!isNaN(level)) {
|
|
const newDateIso = calculateDateFromUrgency(level);
|
|
// Format for datetime-local input: YYYY-MM-DDTHH:mm
|
|
const dateObj = new Date(newDateIso);
|
|
const localIso = new Date(dateObj.getTime() - (dateObj.getTimezoneOffset() * 60000)).toISOString().slice(0, 16);
|
|
setDateString(localIso);
|
|
}
|
|
};
|
|
|
|
// When date changes via input, update urgency level
|
|
const onDateInputChange = (e: Event) => {
|
|
const val = (e.target 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()) return;
|
|
|
|
let finalPriority = parseInt(priority());
|
|
let finalUrgency = parseInt(urgency());
|
|
const finalTags = [...tags()];
|
|
|
|
// 1. Handle Priority / Urgency and clean them from text
|
|
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], "");
|
|
}
|
|
|
|
// 2. Handle Tags: /t [name]:[value]
|
|
const segments = text.split(/\/t\s*/);
|
|
let title = segments[0];
|
|
|
|
const tagsToUpsert: Record<string, number> = {};
|
|
|
|
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) {
|
|
tagsToUpsert[tagName] = tagValue;
|
|
} else if (store.tagDefinitions?.[tagName] === undefined) {
|
|
tagsToUpsert[tagName] = 5;
|
|
}
|
|
}
|
|
title += " " + remainingText;
|
|
}
|
|
|
|
if (Object.keys(tagsToUpsert).length > 0) {
|
|
upsertMultipleTagDefinitions(tagsToUpsert);
|
|
}
|
|
|
|
let finalDueDate: Date | null = null;
|
|
if (dateString()) {
|
|
finalDueDate = new Date(dateString());
|
|
} else {
|
|
const u = finalUrgency;
|
|
const dateStr = calculateDateFromUrgency(u);
|
|
finalDueDate = new Date(dateStr);
|
|
}
|
|
|
|
addTask(title.replace(/\s+/g, " ").trim(), {
|
|
priority: finalPriority,
|
|
dueDate: finalDueDate || undefined,
|
|
tags: finalTags,
|
|
content: description()
|
|
});
|
|
|
|
setInput("");
|
|
setPriority("5");
|
|
setUrgency("5");
|
|
setTags([]);
|
|
setDescription("");
|
|
lastParsedTags = [];
|
|
setDateString("");
|
|
setIsOpen(false);
|
|
// Reset editor content
|
|
const instance = editorInstance();
|
|
if (instance) instance.commands.setContent("");
|
|
};
|
|
|
|
const applyTemplate = (template: TaskTemplate) => {
|
|
setInput(template.title);
|
|
setPriority(template.priority.toString());
|
|
setUrgency(template.urgency.toString());
|
|
setTags([...(template.tags || [])]);
|
|
setDescription(template.content || "");
|
|
|
|
// Sync urgency to date
|
|
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);
|
|
|
|
// Update editor if ready
|
|
const instance = editorInstance();
|
|
if (instance) {
|
|
instance.commands.setContent(template.content || "");
|
|
}
|
|
|
|
toast.info(`Applied template: ${template.name}`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
size="icon"
|
|
onClick={() => setIsOpen(true)}
|
|
class="fixed bottom-20 left-[80%] -translate-x-1/2 md:bottom-10 md:right-10 md:left-auto md:translate-x-0 w-14 h-14 rounded-full shadow-2xl z-50 group hover:scale-110 transition-all duration-300"
|
|
>
|
|
<Plus size={28} class="group-hover:rotate-90 transition-transform duration-300" />
|
|
</Button>
|
|
|
|
{isOpen() && (
|
|
<div class="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh] px-4">
|
|
<div class="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
|
|
|
|
<div class="relative w-full max-w-xl bg-card border border-border rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
<div class="flex items-center px-4 py-3 border-b border-border">
|
|
<Search class="text-muted-foreground mr-3" size={20} />
|
|
<TextField class="flex-1">
|
|
<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"
|
|
/>
|
|
</TextField>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
|
|
<div class="flex-1 space-y-1.5">
|
|
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
|
|
<Select
|
|
value={priority()}
|
|
onChange={(val) => val && setPriority(val)}
|
|
options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
|
|
placeholder="Priority"
|
|
itemComponent={(props) => (
|
|
<SelectItem item={props.item}>
|
|
{props.item.rawValue}
|
|
</SelectItem>
|
|
)}
|
|
>
|
|
<SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3">
|
|
<div class="flex items-center gap-2">
|
|
<ArrowUpCircle size={14} class="text-primary shrink-0" />
|
|
<span class="text-sm font-medium">{priority()}</span>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent />
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="flex-1 space-y-1.5">
|
|
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency (Time)</label>
|
|
<Select
|
|
value={urgency()}
|
|
onChange={(val) => {
|
|
if (val) onUrgencySimpleChange(val);
|
|
}}
|
|
options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
|
|
placeholder="Urgency"
|
|
itemComponent={(props) => (
|
|
<SelectItem item={props.item}>
|
|
{props.item.rawValue}
|
|
</SelectItem>
|
|
)}
|
|
>
|
|
<SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3">
|
|
<div class="flex items-center gap-2">
|
|
<Clock size={14} class="text-primary shrink-0" />
|
|
<span class="text-sm font-medium">{urgency()}</span>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent />
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="flex-1 space-y-1.5">
|
|
<label class="text-[10px] 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 z-[102] relative cursor-pointer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pb-4 bg-muted/10 border-b border-border flex flex-wrap gap-2 items-center">
|
|
<TagPicker selectedTags={tags()} onTagsChange={setTags} />
|
|
<For each={tags()}>
|
|
{(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"
|
|
onClick={() => setTags(tags().filter(t => t !== tag))}
|
|
>
|
|
<div class={cn("w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
|
|
{tag}
|
|
</Badge>
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
<div class="px-4 py-3 bg-card border-b border-border min-h-[120px] max-h-[300px] overflow-y-auto">
|
|
<Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
|
|
<TaskEditor
|
|
content={description()}
|
|
onUpdate={setDescription}
|
|
onEditorReady={setEditorInstance}
|
|
class="min-h-[100px] prose-sm"
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
|
|
<div class="p-4 bg-muted/30 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2 text-[10px] 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">
|
|
<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-[10px] 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-[9px] 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} disabled={!input() || !priority() || !urgency()}>
|
|
Create Task
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|