added enter to confirm filter and due today indicator
This commit is contained in:
@@ -113,6 +113,12 @@ export const FilterBar: Component = () => {
|
|||||||
placeholder="Search tasks, descriptions, tags..."
|
placeholder="Search tasks, descriptions, tags..."
|
||||||
value={store.filter.query}
|
value={store.filter.query}
|
||||||
onInput={(e) => setFilter({ query: e.currentTarget.value })}
|
onInput={(e) => setFilter({ query: e.currentTarget.value })}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
class="w-full bg-muted/30 border border-border/50 rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 transition-all placeholder:text-muted-foreground/30"
|
class="w-full bg-muted/30 border border-border/50 rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 transition-all placeholder:text-muted-foreground/30"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { type Component, createMemo, For } from "solid-js";
|
import { type Component, createMemo, For, Show } from "solid-js";
|
||||||
import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask, currentTaskContext } from "@/store";
|
import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask, currentTaskContext } from "@/store";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
|
import { Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
|
||||||
@@ -40,14 +40,29 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
|
|||||||
return tags;
|
return tags;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const isDueToday = createMemo(() => {
|
||||||
|
if (!props.task.dueDate) return false;
|
||||||
|
try {
|
||||||
|
const todayStr = new Date().toLocaleDateString('en-CA');
|
||||||
|
const dueStr = new Date(props.task.dueDate).toLocaleDateString('en-CA');
|
||||||
|
return todayStr === dueStr;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class={cn(
|
class={cn(
|
||||||
"group flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-500 hover:duration-100 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
|
"group relative flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-500 hover:duration-100 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
|
||||||
props.task.completed && "opacity-60"
|
props.task.completed && "opacity-60"
|
||||||
)}
|
)}
|
||||||
onClick={() => setActiveTaskId(props.task.id)}
|
onClick={() => setActiveTaskId(props.task.id)}
|
||||||
>
|
>
|
||||||
|
{/* Today indicator */}
|
||||||
|
<Show when={isDueToday() && !props.task.completed}>
|
||||||
|
<div class="absolute left-0 top-3 bottom-3 w-1 bg-primary rounded-r-md" />
|
||||||
|
</Show>
|
||||||
{/* Status Dropdown */}
|
{/* Status Dropdown */}
|
||||||
<div class="mr-2 sm:mr-3 shrink-0" onClick={(e) => e.stopPropagation()}>
|
<div class="mr-2 sm:mr-3 shrink-0" onClick={(e) => e.stopPropagation()}>
|
||||||
<Select<any>
|
<Select<any>
|
||||||
|
|||||||
Reference in New Issue
Block a user