Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added search/filter and fixed horizontal fit for mobile.

Browse Source
This commit is contained in:
Timothy Cardoza
2026-01-31 15:32:06 -06:00
parent ce58ee8fc5
commit 2c83b91e66
12 changed files with 376 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FilterBar.tsx
+243
View File
@@ -0,0 +1,243 @@
import { type Component, createSignal, For, Show } from "solid-js";
import { Search, X, Hash, ChevronDown, ArrowUpCircle, Clock } from "lucide-solid";
import { store, setFilter, clearFilter } from "@/store";
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";
import { Badge } from "./ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
export const FilterBar: Component = () => {
const [isExpanded, setIsExpanded] = createSignal(false);
const hasActiveFilters = () => {
const f = store.filter;
return f.query !== "" || f.tags.length > 0 || f.priorityMin !== 1 || f.priorityMax !== 10 || f.urgencyMin !== 1 || f.urgencyMax !== 10;
};
const allTags = () => Object.keys(store.tagDefinitions || {}).sort();
const FilterControls: Component<{ class?: string }> = (props) => (
<div class={cn("flex flex-col md:flex-row items-stretch md:items-center gap-3", props.class)}>
{/* Main Search */}
<div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0 min-w-0">
<Search size={16} class="text-muted-foreground shrink-0" />
<input
type="text"
placeholder="Search tasks..."
value={store.filter.query}
onInput={(e) => setFilter({ query: e.currentTarget.value })}
class="bg-transparent border-none focus:ring-0 text-sm flex-1 md:w-40 h-8 outline-none placeholder:text-muted-foreground/50 min-w-0"
autofocus
/>
</div>
{/* Priority Range */}
<div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0">
<span class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Priority</span>
<div class="flex items-center gap-1">
<Select
value={store.filter.priorityMin.toString()}
onChange={(val) => val && setFilter({ priorityMin: parseInt(val) })}
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 w-12 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground flex items-center gap-1">
<ArrowUpCircle size={12} class="text-muted-foreground/70" />
<span>{store.filter.priorityMin}</span>
</SelectTrigger>
<SelectContent />
</Select>
<span class="text-muted-foreground/50">-</span>
<Select
value={store.filter.priorityMax.toString()}
onChange={(val) => val && setFilter({ priorityMax: parseInt(val) })}
options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 w-8 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground justify-center">
<span>{store.filter.priorityMax}</span>
</SelectTrigger>
<SelectContent />
</Select>
</div>
</div>
{/* Urgency Range */}
<div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0">
<span class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Urgency</span>
<div class="flex items-center gap-1">
<Select
value={store.filter.urgencyMin.toString()}
onChange={(val) => val && setFilter({ urgencyMin: parseInt(val) })}
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 w-12 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground flex items-center gap-1">
<Clock size={12} class="text-muted-foreground/70" />
<span>{store.filter.urgencyMin}</span>
</SelectTrigger>
<SelectContent />
</Select>
<span class="text-muted-foreground/50">-</span>
<Select
value={store.filter.urgencyMax.toString()}
onChange={(val) => val && setFilter({ urgencyMax: parseInt(val) })}
options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 w-8 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground justify-center">
<span>{store.filter.urgencyMax}</span>
</SelectTrigger>
<SelectContent />
</Select>
</div>
</div>
{/* Tags */}
<div class="px-2 flex items-center gap-2 min-w-[120px]">
<Hash size={14} class="text-muted-foreground" />
<div class="flex flex-wrap gap-1 max-w-[200px]">
<Show when={store.filter.tags.length === 0}>
<Select
value=""
onChange={(val) => {
if (val && !store.filter.tags.includes(val)) {
setFilter({ tags: [...store.filter.tags, val] });
}
}}
options={allTags()}
placeholder="Add Tag..."
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 p-0 bg-transparent border-none shadow-none focus:ring-0 text-[10px] italic text-muted-foreground">
<span>Add Tag...</span>
</SelectTrigger>
<SelectContent />
</Select>
</Show>
<For each={store.filter.tags}>
{(tag) => (
<Badge
variant="secondary"
class="h-5 px-1 text-[10px] gap-0.5 cursor-pointer hover:bg-destructive/20 border-border/50"
onClick={(e) => {
e.stopPropagation();
setFilter({ tags: store.filter.tags.filter(t => t !== tag) });
}}
>
{tag}
<X size={8} />
</Badge>
)}
</For>
<Show when={store.filter.tags.length > 0}>
<Select
value=""
onChange={(val) => {
if (val && !store.filter.tags.includes(val)) {
setFilter({ tags: [...store.filter.tags, val] });
}
}}
options={allTags()}
placeholder="+"
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-5 w-5 p-0 bg-muted/50 border-none shadow-none focus:ring-0 text-[10px] rounded-full flex items-center justify-center">
<span>+</span>
</SelectTrigger>
<SelectContent />
</Select>
</Show>
</div>
</div>
{/* Actions for Desktop */}
<div class="hidden md:flex items-center gap-1 pl-2 ml-auto">
<Button
variant="ghost"
size="icon"
class="h-8 w-8 text-muted-foreground hover:text-destructive"
onClick={clearFilter}
title="Clear all filters"
>
<X size={16} />
</Button>
<Button
variant="ghost"
size="icon"
class="h-8 w-8 text-muted-foreground hover:text-foreground"
onClick={() => setIsExpanded(false)}
>
<ChevronDown size={16} class="rotate-90" />
</Button>
</div>
{/* Clear All for Mobile */}
<div class="flex md:hidden items-center pt-2">
<Button
variant="outline"
size="sm"
class="w-full text-xs h-8 gap-2"
onClick={clearFilter}
>
<X size={14} />
Clear All Filters
</Button>
</div>
</div>
);
return (
<div class="flex items-center gap-2">
{/* Desktop View: Inline expansion */}
<div class="hidden md:flex items-center">
{!isExpanded() ? (
<Button
variant="ghost"
size="sm"
class={cn(
"h-9 px-3 gap-2 text-muted-foreground hover:text-foreground transition-all duration-300",
hasActiveFilters() && "text-primary bg-primary/10 hover:bg-primary/20"
)}
onClick={() => setIsExpanded(true)}
>
<Search size={18} />
<span class="text-sm font-medium">Filter</span>
{hasActiveFilters() && (
<div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
)}
</Button>
) : (
<div class="bg-card border border-border/50 p-2 rounded-xl shadow-lg animate-in fade-in slide-in-from-top-4 duration-300 w-auto overflow-hidden">
<FilterControls />
</div>
)}
</div>
{/* Mobile View: Popover */}
<div class="flex md:hidden items-center">
<Popover>
<PopoverTrigger
as={Button}
variant="ghost"
size="sm"
class={cn(
"h-9 px-3 gap-2 text-muted-foreground hover:text-foreground transition-all duration-300",
hasActiveFilters() && "text-primary bg-primary/10 hover:bg-primary/20"
)}
>
<Search size={18} />
<span class="text-sm font-medium">Filter</span>
{hasActiveFilters() && (
<div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
)}
</PopoverTrigger>
<PopoverContent class="w-[calc(100vw-2rem)] sm:w-96 p-4">
<FilterControls class="w-full" />
</PopoverContent>
</Popover>
</div>
</div>
);
};
src/components/Layout.tsx
+9 -3
View File
@@ -7,6 +7,7 @@ const TaskDetail = lazy(() => import("./TaskDetail").then(m => ({ default: m.Tas
const QuickEntry = lazy(() => import("./QuickEntry").then(m => ({ default: m.QuickEntry })));
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";
import { FilterBar } from "./FilterBar";
interface LayoutProps {
children: JSX.Element;
@@ -32,7 +33,7 @@ export const Layout: Component<LayoutProps> = (props) => {
const activeTask = () => store.tasks.find(t => t.id === activeTaskId());
return (
<div class="flex h-screen w-full bg-background overflow-hidden relative font-sans antialiased text-foreground">
<div class="flex h-screen w-full min-w-0 bg-background overflow-hidden relative font-sans antialiased text-foreground">
<Sidebar
currentView={props.currentView}
setView={props.setView}
@@ -62,8 +63,13 @@ export const Layout: Component<LayoutProps> = (props) => {
)}
{/* Main Content Area */}
<main class="flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6 lg:p-8 pb-32 sm:pb-6">
<div class="max-w-5xl mx-auto w-full">
<main class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden pb-32 sm:pb-6 relative scroll-smooth">
<div class="w-full max-w-screen-2xl mx-auto p-3 sm:p-6 lg:p-10 space-y-6 sm:space-y-8">
{/* Global Top Header for Filter/Search */}
<div class="sticky top-0 z-40 flex items-center justify-end py-2 -mx-3 px-3 md:relative md:top-auto md:z-auto md:py-0 md:mx-0 md:px-0 bg-background/80 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
<FilterBar />
</div>
{props.children}
</div>
</main>
src/components/TagPicker.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
<Hash size={14} />
<span>Add Tag</span>
</PopoverTrigger>
<PopoverContent class="p-3 w-[260px] flex flex-col gap-3" align="start">
<PopoverContent class="p-3 w-[min(calc(100vw-2rem),280px)] flex flex-col gap-3" align="start">
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
<div class="relative">
src/components/TaskCard.tsx
+20 -20
View File
@@ -24,43 +24,43 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
return (
<div
class={cn(
"group flex items-center p-4 bg-card border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer",
"group flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-300 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"
)}
onClick={() => setActiveTaskId(props.task.id)}
>
<button
onClick={(e) => { e.stopPropagation(); toggleTask(props.task.id); }}
class="mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
class="mr-3 sm:mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
>
{props.task.completed ? (
<CheckCircle2 class="text-green-500" size={24} />
<CheckCircle2 class="text-green-500" size={22} />
) : (
<Circle size={24} />
<Circle size={22} />
)}
</button>
<div class="flex-1 min-w-0">
<div class="flex-1 min-w-0 flex flex-col">
<h3 class={cn(
"text-base font-semibold truncate transition-all",
"text-sm sm:text-base font-semibold truncate transition-all",
props.task.completed && "line-through"
)}>
{props.task.title}
</h3>
<div class="flex items-center space-x-4 mt-1">
<div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-1 min-w-0">
{/* Priority */}
<div class="flex items-center gap-1.5 min-w-[32px]">
<div class="flex items-center gap-1.5 shrink-0">
<ArrowUpCircle size={12} class="text-primary opacity-60" />
<span>P{props.task.priority}</span>
<span class="text-[10px] font-medium">P{props.task.priority}</span>
</div>
{/* Tags */}
{props.task.tags && props.task.tags.length > 0 && (
<div class="flex items-center gap-1">
<div class="flex flex-wrap items-center gap-1 min-w-0">
<For each={props.task.tags}>
{(tag) => (
<Badge variant="secondary" class="h-5 px-1.5 text-[10px] gap-1 bg-muted/50 border-border/50">
<div class={cn("w-1.5 h-1.5 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
<Badge variant="secondary" class="h-4 px-1.5 text-[9px] gap-1 bg-muted/50 border-border/50 shrink-0">
<div class={cn("w-1 h-1 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
{tag}
</Badge>
)}
@@ -69,11 +69,11 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
)}
{/* Due Date + Urgency Slide-out */}
<div class="relative group/date flex items-center h-6 cursor-help">
<div class="relative group/date flex items-center h-5 cursor-help shrink-0 min-w-0">
{/* Due Date - Static Layer on Top */}
<div class="flex items-center space-x-1.5 text-[10px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<Clock size={12} class="text-primary/60" />
<span>{formattedDate()}</span>
<div class="flex items-center space-x-1 text-[9px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<Clock size={11} class="text-primary/60" />
<span class="truncate">{formattedDate()}</span>
</div>
{/* Urgency Number - Slides out from behind with fade */}
@@ -81,7 +81,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
"absolute left-4 top-0 bottom-0 flex items-center transition-all duration-300 ease-out z-10 opacity-0 group-hover/date:opacity-100 group-hover/date:left-full whitespace-nowrap",
urgencyColor()
)}>
<span class="text-[10px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
<span class="text-[9px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
Urgency {urgencyLevel()}
</span>
</div>
@@ -89,9 +89,9 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
</div>
</div>
<div class="ml-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<button class="p-2 hover:bg-muted rounded-full transition-colors">
<div class="w-1.5 h-1.5 bg-muted-foreground rounded-full" />
<div class="ml-2 sm:ml-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<button class="p-1.5 hover:bg-muted rounded-full transition-colors">
<div class="w-1 h-1 bg-muted-foreground rounded-full" />
</button>
</div>
</div>
src/components/TaskDetail.tsx
+5 -5
View File
@@ -107,7 +107,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
/>
{/* Properties Bar */}
<div class="flex flex-row items-center gap-1.5 sm:gap-4 mt-2 text-sm overflow-x-auto no-scrollbar flex-nowrap">
<div class="flex flex-wrap items-center gap-1.5 sm:gap-4 mt-2 text-sm">
{/* Priority */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
@@ -224,19 +224,19 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
</div>
{/* Tags Row */}
<div class="flex items-center gap-2 mt-4 overflow-x-auto no-scrollbar pb-1">
<div class="flex flex-wrap items-center gap-2 mt-4 pb-1">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 shrink-0">Tags</span>
<div class="flex items-center gap-1.5 min-w-0">
<div class="flex flex-wrap items-center gap-1.5 min-w-0">
<TagPicker
selectedTags={props.task.tags || []}
onTagsChange={updateTags}
/>
<div class="flex items-center gap-1.5 flex-nowrap overflow-x-auto no-scrollbar">
<div class="flex flex-wrap items-center gap-1.5">
<For each={props.task.tags || []}>
{(tag) => (
<Badge
variant="secondary"
class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap"
class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
onClick={() => updateTags((props.task.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")} />
src/components/ui/button.tsx
+1
View File
@@ -39,6 +39,7 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
type?: "button" | "submit" | "reset"
disabled?: boolean
title?: string
}
const Button = (props: ButtonProps) => {