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/views/MatrixView.tsx
+10 -10
View File
@@ -1,10 +1,10 @@
import { type Component, For, createMemo } from "solid-js";
import { store, calculateUrgencyScore, setActiveTaskId, setStore, getCombinedScore } from "@/store";
import { store, calculateUrgencyScore, setActiveTaskId, setStore, getCombinedScore, matchesFilter } from "@/store";
import { cn } from "@/lib/utils";
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
export const MatrixView: Component = () => {
const activeTasks = createMemo(() => store.tasks.filter(t => !t.completed && !t.deletedAt));
const activeTasks = createMemo(() => store.tasks.filter(t => !t.completed && !t.deletedAt && matchesFilter(t)));
const scaleOptions = ["1", "7", "30", "60", "90"];
@@ -15,12 +15,12 @@ export const MatrixView: Component = () => {
<p class="text-muted-foreground mt-1 text-lg">Urgency vs Priority mapping.</p>
</header>
<div class="flex-1 relative border-2 border-dashed border-muted rounded-3xl overflow-hidden bg-muted/20">
<div class="flex-1 relative border-2 border-dashed border-muted rounded-2xl md:rounded-3xl overflow-hidden bg-muted/20">
{/* Axis Labels */}
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-2 z-30">
<span>← Soon</span>
<div class="flex items-center gap-1 bg-background/50 backdrop-blur-sm px-2 py-0.5 rounded-full border border-border/50 group hover:bg-background/80 transition-colors cursor-pointer">
<span class="text-[9px]">Time:</span>
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-1 md:gap-2 z-30 w-[calc(100%-2rem)] justify-center">
<span class="truncate">← Soon</span>
<div class="flex items-center gap-1 bg-background/50 backdrop-blur-sm px-1.5 md:px-2 py-0.5 rounded-full border border-border/50 group hover:bg-background/80 transition-colors cursor-pointer shrink-0">
<span class="text-[8px] md:text-[9px]">Time:</span>
<Select
value={store.matrixScaleDays.toString()}
onChange={(val) => val && setStore("matrixScaleDays", parseInt(val))}
@@ -32,15 +32,15 @@ export const MatrixView: Component = () => {
</SelectItem>
)}
>
<SelectTrigger class="h-auto p-0 min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[10px] font-black text-foreground">
<SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[8px] md:text-[10px] font-black text-foreground">
<span>{store.matrixScaleDays} {store.matrixScaleDays === 1 ? 'day' : 'days'}</span>
</SelectTrigger>
<SelectContent class="z-[150]" />
</Select>
</div>
<span>Later →</span>
<span class="truncate">Later →</span>
</div>
<div class="absolute left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 pointer-events-none">
<div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[8px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
← Low (Priority) High →
</div>