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

Made font size match device preference

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-17 17:15:07 -06:00
parent 49cbe6abb2
commit 759083ea7d
10 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FilterBar.tsx
+11 -11
View File
@@ -55,7 +55,7 @@ export const FilterBar: Component = () => {
<button
onClick={() => setFilter({ editedToday: !store.filter.editedToday })}
class={cn(
"flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-tight transition-all border",
"flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
store.filter.editedToday
? "bg-primary/10 text-primary border-primary/20"
: "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
@@ -70,7 +70,7 @@ export const FilterBar: Component = () => {
<Button
variant="ghost"
size="sm"
class="h-7 px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
class="h-7 px-2 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
onClick={clearFilter}
>
Clear
@@ -109,7 +109,7 @@ export const FilterBar: Component = () => {
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
{/* Priority Range */}
<div class="space-y-2.5">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
<div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
<Select
value={store.filter.priorityMin.toString()}
@@ -144,7 +144,7 @@ export const FilterBar: Component = () => {
{/* Urgency Range */}
<div class="space-y-2.5">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
<div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
<Select
value={store.filter.urgencyMin.toString()}
@@ -180,9 +180,9 @@ export const FilterBar: Component = () => {
{/* Tags Multi-select */}
<div class="space-y-2.5">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
Filter by Tags
<span class="text-[9px] lowercase font-medium opacity-50 tracking-normal text-right">
<span class="text-[0.5625rem] lowercase font-medium opacity-50 tracking-normal text-right">
Click tag name to toggle exclude<br />
Click X to remove
</span>
@@ -245,7 +245,7 @@ export const FilterBar: Component = () => {
placeholder="Add tag..."
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
<SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
<span>+ Tag</span>
</SelectTrigger>
<SelectContent />
@@ -257,14 +257,14 @@ export const FilterBar: Component = () => {
{/* Filter Templates Section */}
<div class="px-4 pb-4 pt-4 border-t border-border/50 space-y-4 bg-muted/5">
<div class="flex items-center justify-between ml-1">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<Bookmark size={12} class="text-primary" />
Saved Filters
</label>
<Show when={!isSaving() && hasActiveFilters()}>
<button
onClick={() => setIsSaving(true)}
class="text-[9px] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
class="text-[0.5625rem] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
>
<Save size={10} />
Save Current
@@ -318,7 +318,7 @@ export const FilterBar: Component = () => {
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<For each={store.filterTemplates} fallback={
<div class="col-span-2 py-4 text-center border border-dashed border-border/40 rounded-xl bg-muted/5">
<p class="text-[10px] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
<p class="text-[0.625rem] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
</div>
}>
{(template) => (
@@ -328,7 +328,7 @@ export const FilterBar: Component = () => {
onClick={() => applyFilterTemplate(template.id)}
>
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold text-foreground truncate">{template.name}</p>
<p class="text-[0.6875rem] font-bold text-foreground truncate">{template.name}</p>
<div class="flex gap-1 opacity-60 shrink-0">
<Show when={template.filter.query}>
<div class="w-1 h-1 rounded-full bg-primary" />
src/components/ImportTool.tsx
+15 -15
View File
@@ -137,7 +137,7 @@ export const ImportTool: Component = () => {
<Show when={step() === "paste"}>
<div class="space-y-3 animate-in fade-in duration-300">
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
Paste your task list
</label>
<textarea
@@ -154,7 +154,7 @@ export const ImportTool: Component = () => {
</p>
<Button
size="sm"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px] h-9 px-4"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem] h-9 px-4"
disabled={!rawText().trim()}
onClick={parseText}
>
@@ -170,13 +170,13 @@ export const ImportTool: Component = () => {
{/* Bulk defaults */}
<div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
<div class="flex items-center justify-between">
<p class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
<p class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">
Bulk Defaults
</p>
<Button
variant="ghost"
size="sm"
class="h-7 text-[10px] font-bold uppercase tracking-wider rounded-lg"
class="h-7 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg"
onClick={applyBulkDefaults}
>
Apply to All
@@ -185,7 +185,7 @@ export const ImportTool: Component = () => {
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Priority</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Priority</label>
<select
value={bulkPriority()}
onChange={(e) => setBulkPriority(e.currentTarget.value)}
@@ -197,7 +197,7 @@ export const ImportTool: Component = () => {
</select>
</div>
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Urgency</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Urgency</label>
<select
value={bulkUrgency()}
onChange={(e) => setBulkUrgency(e.currentTarget.value)}
@@ -209,7 +209,7 @@ export const ImportTool: Component = () => {
</select>
</div>
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Size</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Size</label>
<select
value={bulkSize()}
onChange={(e) => setBulkSize(e.currentTarget.value)}
@@ -221,14 +221,14 @@ export const ImportTool: Component = () => {
</select>
</div>
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Tags</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Tags</label>
<div class="flex items-center gap-1 flex-wrap">
<TagPicker selectedTags={bulkTags()} onTagsChange={setBulkTags} />
<For each={bulkTags()}>
{(tag) => (
<Badge
variant="secondary"
class="h-6 px-1.5 text-[10px] gap-1 cursor-pointer hover:bg-destructive/10"
class="h-6 px-1.5 text-[0.625rem] gap-1 cursor-pointer hover:bg-destructive/10"
onClick={() => setBulkTags(bulkTags().filter(t => t !== tag))}
>
{tag}
@@ -250,7 +250,7 @@ export const ImportTool: Component = () => {
<Button
variant="ghost"
size="sm"
class="h-7 text-[10px] font-bold uppercase tracking-wider rounded-lg text-muted-foreground"
class="h-7 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg text-muted-foreground"
onClick={reset}
>
← Back
@@ -284,7 +284,7 @@ export const ImportTool: Component = () => {
<select
value={task.priority}
onChange={(e) => updateTask(task.id, "priority", e.currentTarget.value)}
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
title="Priority"
>
<For each={PRIORITY_OPTIONS}>
@@ -295,7 +295,7 @@ export const ImportTool: Component = () => {
<select
value={task.urgency}
onChange={(e) => updateTask(task.id, "urgency", e.currentTarget.value)}
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
title="Urgency"
>
<For each={URGENCY_OPTIONS}>
@@ -306,7 +306,7 @@ export const ImportTool: Component = () => {
<select
value={task.size}
onChange={(e) => updateTask(task.id, "size", e.currentTarget.value)}
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
title="Size"
>
<For each={SIZE_OPTIONS}>
@@ -323,7 +323,7 @@ export const ImportTool: Component = () => {
{(tag) => (
<Badge
variant="secondary"
class="h-6 px-1.5 text-[10px] gap-0.5 cursor-pointer hover:bg-destructive/10"
class="h-6 px-1.5 text-[0.625rem] gap-0.5 cursor-pointer hover:bg-destructive/10"
onClick={() => updateTask(task.id, "tags", task.tags.filter(t => t !== tag))}
>
{tag}
@@ -352,7 +352,7 @@ export const ImportTool: Component = () => {
</Show>
<Button
size="sm"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px] h-9 px-5"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem] h-9 px-5"
disabled={tasks().length === 0 || importing()}
onClick={handleImport}
>
src/components/Navigation.tsx
+6 -6
View File
@@ -68,7 +68,7 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
)}
>
<group.icon size={20} />
<span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
<span class="text-[0.625rem] font-medium uppercase tracking-wider">{group.label}</span>
</button>
}>
<Popover>
@@ -82,7 +82,7 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
<group.icon size={20} />
<ChevronDown size={10} class="absolute -right-2 -bottom-0.5 opacity-60" />
</div>
<span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
<span class="text-[0.625rem] font-medium uppercase tracking-wider">{group.label}</span>
</PopoverTrigger>
<PopoverContent class="w-40 p-1 bg-card border-border shadow-xl mb-2">
<div class="space-y-0.5">
@@ -233,9 +233,9 @@ export const ContextSwitcher: Component<{
<div class="py-1">
<div class="h-px bg-border/50" />
</div>
<div class="px-2 py-1 text-[10px] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<span>Buckets</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{store.subscribedBuckets.length}</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{store.subscribedBuckets.length}</span>
</div>
<For each={store.buckets.filter(b => store.subscribedBuckets.includes(b.id))}>
{(bucket) => (
@@ -262,9 +262,9 @@ export const ContextSwitcher: Component<{
<div class="py-1">
<div class="h-px bg-border/50" />
</div>
<div class="px-2 py-1 text-[10px] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<span>Oversight</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{oversightUsers()?.length}</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{oversightUsers()?.length}</span>
</div>
<For each={oversightUsers()}>
{(user) => (
src/components/QuickEntry.tsx
+7 -7
View File
@@ -290,7 +290,7 @@ export const QuickEntry: Component = () => {
{/* Row 1: Priority, Size, Urgency */}
<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-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
Priority <span class="text-destructive">*</span>
</label>
<Select<any>
@@ -322,7 +322,7 @@ export const QuickEntry: Component = () => {
</div>
<div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
<Select<any>
value={size()}
onChange={(val) => {
@@ -352,7 +352,7 @@ export const QuickEntry: Component = () => {
</div>
<div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
Urgency <span class="text-destructive">*</span>
</label>
<Select<any>
@@ -421,7 +421,7 @@ export const QuickEntry: Component = () => {
</div>
<div class="w-full md:w-auto md:min-w-[200px] space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
<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"
@@ -453,7 +453,7 @@ export const QuickEntry: Component = () => {
</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-[10px] font-bold text-muted-foreground uppercase tracking-widest">
<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>
@@ -469,7 +469,7 @@ export const QuickEntry: Component = () => {
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>
<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">
@@ -485,7 +485,7 @@ export const QuickEntry: Component = () => {
</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 class="text-[0.5625rem] uppercase font-black text-muted-foreground opacity-60 tracking-widest">
P:{template.priority} / U:{template.urgency}
</p>
</div>
src/components/SlashMenu.tsx
+1 -1
View File
@@ -150,7 +150,7 @@ export const SlashMenu: Component<{
</div>
<div class="flex flex-col min-w-0 overflow-hidden">
<span class="text-sm font-medium leading-none">{item.title}</span>
<span class="text-[11px] text-muted-foreground truncate mt-1">{item.description}</span>
<span class="text-[0.6875rem] text-muted-foreground truncate mt-1">{item.description}</span>
</div>
</button>
)}
src/components/TagPicker.tsx
+2 -2
View File
@@ -63,7 +63,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
</PopoverTrigger>
<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>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
<div class="relative">
<input
list="existing-tags"
@@ -81,7 +81,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
</div>
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Value (Sorting Influence)</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Value (Sorting Influence)</label>
<select
value={valueScore().toString()}
onInput={(e) => setValueScore(parseInt(e.currentTarget.value))}
src/components/TaskCard.tsx
+5 -5
View File
@@ -73,7 +73,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{props.task.title}
</h3>
{props.task.content && (
<div class="text-[11px] sm:text-xs text-muted-foreground/60 line-clamp-1 mt-1 leading-tight whitespace-pre">
<div class="text-[0.6875rem] sm:text-xs text-muted-foreground/60 line-clamp-1 mt-1 leading-tight whitespace-pre">
{(() => {
let html = props.task.content || "";
// Replace block tags with newlines first to preserve structure
@@ -97,7 +97,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{/* Priority */}
<div class="flex items-center gap-1.5 shrink-0">
<ArrowUpCircle size={12} class="text-primary opacity-60" />
<span class="text-[10px] font-medium">P{props.task.priority}</span>
<span class="text-[0.625rem] font-medium">P{props.task.priority}</span>
</div>
{/* Shared Indicator - shows for individual shares OR tag-based ShareRules */}
@@ -132,7 +132,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{(tag) => (
<Badge
variant="secondary"
class="h-4 px-1.5 text-[9px] gap-1 bg-muted/50 border-border/50 shrink-0"
class="h-4 px-1.5 text-[0.5625rem] gap-1 bg-muted/50 border-border/50 shrink-0"
style={{
"background-color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
@@ -166,7 +166,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{/* Due Date + Urgency Slide-out */}
<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 text-[9px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<div class="flex items-center space-x-1 text-[0.5625rem] 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>
@@ -176,7 +176,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-[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]">
<span class="text-[0.5625rem] 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>
src/components/TaskDetail.tsx
+11 -11
View File
@@ -181,7 +181,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* 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>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
<Select<any>
value={props.task.priority.toString()}
onChange={(val: string | null) => val && updatePriority(val)}
@@ -205,7 +205,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Urgency */}
<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">Time</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Time</span>
<Select<any>
value={currentUrgency()}
onChange={(val: string | null) => val && updateUrgency(val)}
@@ -229,7 +229,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Size */}
<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">Size</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Size</span>
<Select<any>
value={(props.task.size ?? 5).toString()}
onChange={(val: any) => {
@@ -262,7 +262,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
<Button
variant="ghost"
size="sm"
class="h-8 px-1 sm:px-2 text-[10px] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
class="h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
onClick={() => {
const instance = editorInstance();
if (instance) {
@@ -325,7 +325,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Tags at the bottom */}
<div class="mt-auto pt-6 border-t border-border/50">
<div class="flex flex-wrap items-center gap-3">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
<div class="flex flex-wrap items-center gap-1.5 min-w-0 flex-1">
<TagPicker
selectedTags={props.task.tags || []}
@@ -404,7 +404,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
<PopoverContent class="w-72 p-0 overflow-hidden" align="end">
<div class="flex flex-col">
<div class="p-2 border-b border-border/50">
<div class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1">Recurrence</div>
<div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1">Recurrence</div>
<div class="flex flex-col gap-2 p-2 pt-0">
<Select
value={props.task.recurrence?.type || "none"}
@@ -442,7 +442,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{(day, index) => (
<button
class={cn(
"w-7 h-7 rounded-full text-[10px] font-bold flex items-center justify-center transition-colors shadow-sm",
"w-7 h-7 rounded-full text-[0.625rem] font-bold flex items-center justify-center transition-colors shadow-sm",
props.task.recurrence?.days?.includes(index())
? "bg-primary text-primary-foreground"
: "bg-muted text-muted-foreground hover:bg-muted/80"
@@ -509,7 +509,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Sharing Section */}
<div class="p-2 border-t border-border/50">
<div class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
<div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
<UserSharePicker
taskId={props.task.id}
sharedWith={props.task.sharedWith || []}
@@ -569,12 +569,12 @@ const MetadataItem: Component<{
isToggled() ? "-translate-y-4" : "translate-y-0"
)}>
{/* Layer 1: Date */}
<div class="h-4 flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/80 whitespace-nowrap">
<div class="h-4 flex items-center gap-1.5 text-[0.6875rem] font-medium text-muted-foreground/80 whitespace-nowrap">
{props.icon}
{props.date}
</div>
{/* Layer 2: Time */}
<div class="h-4 flex items-center gap-2 text-[11px] font-bold text-foreground whitespace-nowrap">
<div class="h-4 flex items-center gap-2 text-[0.6875rem] font-bold text-foreground whitespace-nowrap">
<Clock size={11} class="text-primary/60 shrink-0" />
<span>{props.time}</span>
</div>
@@ -706,7 +706,7 @@ const UserSharePicker: Component<{
{rule.type === 'tag' ? <Tag size={10} /> : <Settings size={10} />}
</div>
<div class="flex flex-col min-w-0">
<span class="text-[11px] font-medium leading-none truncate">
<span class="text-[0.6875rem] font-medium leading-none truncate">
{getUserName(rule.targetUserId)}
</span>
<span class="text-[9px] text-muted-foreground/50 mt-0.5 uppercase tracking-tighter">
src/views/MatrixView.tsx
+11 -11
View File
@@ -17,10 +17,10 @@ export const MatrixView: Component = () => {
<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-[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">
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[0.5625rem] md:text-[0.625rem] 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>
<span class="text-[0.5rem] md:text-[0.5625rem]">Time:</span>
<Select
value={store.matrixScaleDays.toString()}
onChange={(val) => val && setStore("matrixScaleDays", parseInt(val))}
@@ -32,7 +32,7 @@ export const MatrixView: Component = () => {
</SelectItem>
)}
>
<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">
<SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[0.5rem] md:text-[0.625rem] font-black text-foreground">
<span>{store.matrixScaleDays} {store.matrixScaleDays === 1 ? 'day' : 'days'}</span>
</SelectTrigger>
<SelectContent class="z-[150]" />
@@ -40,7 +40,7 @@ export const MatrixView: Component = () => {
</div>
<span class="truncate">Later →</span>
</div>
<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">
<div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[0.5rem] md:text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
← Low (Priority) High →
</div>
@@ -55,10 +55,10 @@ export const MatrixView: Component = () => {
</div>
{/* Quadrant Labels */}
<div class="absolute top-4 left-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">DO FIRST</div>
<div class="absolute top-4 right-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">SCHEDULE</div>
<div class="absolute bottom-4 left-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">DELEGATE</div>
<div class="absolute bottom-4 right-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">ELIMINATE</div>
<div class="absolute top-4 left-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">DO FIRST</div>
<div class="absolute top-4 right-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">SCHEDULE</div>
<div class="absolute bottom-4 left-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">DELEGATE</div>
<div class="absolute bottom-4 right-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">ELIMINATE</div>
{/* Task Pips */}
<For each={activeTasks()}>
@@ -122,9 +122,9 @@ export const MatrixView: Component = () => {
<div class="bg-popover text-popover-foreground border border-border rounded-xl p-3 shadow-2xl scale-95 group-hover:scale-100 transition-transform">
<p class="text-xs font-bold leading-tight">{task.title}</p>
<div class="flex items-center justify-between mt-2 pt-2 border-t border-border">
<span class="text-[9px] text-muted-foreground">U: {urgencyScore}</span>
<span class="text-[9px] text-muted-foreground">S: {task.size ?? 5}</span>
<span class="text-[9px] text-muted-foreground">P: {task.priority}</span>
<span class="text-[0.5625rem] text-muted-foreground">U: {urgencyScore}</span>
<span class="text-[0.5625rem] text-muted-foreground">S: {task.size ?? 5}</span>
<span class="text-[0.5625rem] text-muted-foreground">P: {task.priority}</span>
</div>
</div>
<div class={cn(
src/views/SettingsView.tsx
+25 -25
View File
@@ -58,14 +58,14 @@ export const SettingsView: Component = () => {
<header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div class="min-w-0 flex-1">
<h1 class="text-2xl sm:text-4xl font-black tracking-tighter">Settings</h1>
<p class="text-[10px] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
<p class="text-[0.625rem] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
{pb.authStore.model?.email}
</p>
</div>
<Button
variant="outline"
size="sm"
class="w-full sm:w-auto font-black uppercase tracking-widest text-[10px] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
class="w-full sm:w-auto font-black uppercase tracking-widest text-[0.625rem] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
onClick={() => { pb.authStore.clear(); location.reload(); }}
>
Sign Out
@@ -134,7 +134,7 @@ export const SettingsView: Component = () => {
<Button
variant={shareMode() === 'ADD_USER' ? 'default' : 'outline'}
size="sm"
class="h-7 text-[10px] gap-1 px-2"
class="h-7 text-[0.625rem] gap-1 px-2"
title="Recipient gets edit access (Collaboration)"
onClick={() => setShareMode('ADD_USER')}
>
@@ -144,7 +144,7 @@ export const SettingsView: Component = () => {
<Button
variant={shareMode() === 'SEND_TASK' ? 'default' : 'outline'}
size="sm"
class="h-7 text-[10px] gap-1 px-2"
class="h-7 text-[0.625rem] gap-1 px-2"
title="Task ownership is transferred to recipient (Handoff)"
onClick={() => setShareMode('SEND_TASK')}
>
@@ -215,7 +215,7 @@ export const SettingsView: Component = () => {
Share
</Button>
</div>
<p class="text-[10px] text-muted-foreground italic px-1 pt-1">
<p class="text-[0.625rem] text-muted-foreground italic px-1 pt-1">
{shareMode() === 'ADD_USER'
? "User will be added to the task's shared list."
: "Task owner will change to the recipient immediately when tagged."}
@@ -226,7 +226,7 @@ export const SettingsView: Component = () => {
{/* Active share rules */}
{/* Active share rules - Outgoing */}
<div class="space-y-3">
<h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
<h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
<div class="w-1 h-1 rounded-full bg-primary" />
Sharing With Others
</h4>
@@ -237,7 +237,7 @@ export const SettingsView: Component = () => {
const isOwner = r.ownerId === pb.authStore.model?.id;
return !isSystem && isOwner;
})} fallback={
<div class="text-center py-4 text-muted-foreground text-[10px] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
<div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
You aren't sharing with anyone yet.
</div>
}>
@@ -249,7 +249,7 @@ export const SettingsView: Component = () => {
</div>
<div class="min-w-0">
<p class="text-xs font-bold truncate">To: {getUserName(rule.targetUserId)}</p>
<p class="text-[9px] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
<p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
{rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
<span class="mx-1">•</span>
<button
@@ -278,7 +278,7 @@ export const SettingsView: Component = () => {
{/* Active share rules - Incoming */}
<div class="space-y-3 pt-4 border-t border-border/20">
<h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
<h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
<div class="w-1 h-1 rounded-full bg-indigo-500" />
Shared With You
</h4>
@@ -289,7 +289,7 @@ export const SettingsView: Component = () => {
const isTarget = r.targetUserId === pb.authStore.model?.id;
return !isSystem && isTarget;
})} fallback={
<div class="text-center py-4 text-muted-foreground text-[10px] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
<div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
No one has shared with you yet.
</div>
}>
@@ -301,7 +301,7 @@ export const SettingsView: Component = () => {
</div>
<div class="min-w-0">
<p class="text-xs font-bold truncate">From: {getUserName(rule.ownerId)}</p>
<p class="text-[9px] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
<p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
{rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
<span class="mx-1">•</span>
{rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
@@ -340,7 +340,7 @@ export const SettingsView: Component = () => {
{tagDef?.isUser ? getUserName(rule.targetUserId) : rule.tagName}
{tagDef?.isUser ? <Users size={10} class="text-muted-foreground" /> : <Archive size={10} class="text-muted-foreground" />}
</p>
<p class="text-[10px] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
<p class="text-[0.625rem] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
Auto-shared via {tagDef?.isUser ? 'User' : 'Bucket'} Tag
<span class="mx-1">•</span>
<button
@@ -387,7 +387,7 @@ export const SettingsView: Component = () => {
<div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
{/* Create Bucket */}
<div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
<h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
<h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
<form
class="flex gap-2"
onSubmit={(e) => {
@@ -474,7 +474,7 @@ export const SettingsView: Component = () => {
autofocus
/>
</Show>
<p class="text-[10px] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
<p class="text-[0.625rem] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
</div>
</div>
@@ -620,7 +620,7 @@ export const SettingsView: Component = () => {
<div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
<div class="flex items-center gap-2">
<span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
<span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
<select
value={String(tag.value)}
onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
@@ -679,7 +679,7 @@ export const SettingsView: Component = () => {
<div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
<div class="flex items-center gap-2">
<span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
<span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
<select
value={String(tag.value)}
onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
@@ -720,7 +720,7 @@ export const SettingsView: Component = () => {
</div>
<Button
size="sm"
class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px]"
class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem]"
onClick={() => {
addTemplate({
name: "New Template",
@@ -793,7 +793,7 @@ export const SettingsView: Component = () => {
) : (
<div class="min-w-0 cursor-pointer flex-1" onClick={() => setExpandedTemplateId(isExpanded() ? null : template.id)}>
<p class="font-bold text-sm tracking-tight truncate">{template.name}</p>
<p class="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
<p class="text-[0.625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60">
P:{template.priority} / U:{template.urgency} / {template.tags?.length || 0} Tags
</p>
</div>
@@ -832,7 +832,7 @@ export const SettingsView: Component = () => {
<div class="border-t border-border/50 p-4 space-y-4 bg-background/50 animate-in fade-in slide-in-from-top-2 duration-300">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
<input
class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
value={editTitle()}
@@ -843,7 +843,7 @@ export const SettingsView: Component = () => {
</div>
<div class="flex gap-4">
<div class="flex-1 space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
<select
class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
value={template.priority}
@@ -855,7 +855,7 @@ export const SettingsView: Component = () => {
</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</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency</label>
<select
class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
value={template.urgency}
@@ -870,7 +870,7 @@ export const SettingsView: Component = () => {
</div>
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
<div class="flex flex-wrap gap-2 p-2 rounded-xl bg-muted/30 border border-border/40">
<TagPicker
selectedTags={template.tags || []}
@@ -897,7 +897,7 @@ export const SettingsView: Component = () => {
</div>
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
<div class="min-h-[120px] rounded-xl border border-border/40 bg-background/50 p-2 overflow-hidden prose-sm">
<Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
<TaskEditor
@@ -982,13 +982,13 @@ export const SettingsView: Component = () => {
<div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
<div class="min-w-0 flex-1 px-1">
<p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
<p class="text-[11px] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
<p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
</div>
<div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
<Button
variant="secondary"
size="sm"
class="h-9 px-4 text-[10px] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
onClick={() => {
restoreTask(task.id);
toast.success("Task restored");