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

favoriting

Browse Source
This commit is contained in:
Timothy Cardoza
2026-03-06 13:53:26 -06:00
parent 10d76eb3c1
commit 09557d49a4
8 changed files with 155 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FilterBar.tsx
+27 -3
View File
@@ -1,6 +1,6 @@
import { type Component, createSignal, For, Show } from "solid-js";
import { Search, X, Tag, ArrowUpCircle, Clock, Minus, Save, Trash2, Bookmark } from "lucide-solid";
import { store, setFilter, clearFilter, saveFilterTemplate, applyFilterTemplate, removeFilterTemplate, loadAllHistory, setNoteFilter, clearNoteFilter, saveNoteFilterTemplate, applyNoteFilterTemplate, removeNoteFilterTemplate, syncPreferences, type Filter } from "@/store";
import { Search, X, Tag, ArrowUpCircle, Clock, Minus, Save, Trash2, Bookmark, User, Star } from "lucide-solid";
import { store, setFilter, clearFilter, saveFilterTemplate, applyFilterTemplate, removeFilterTemplate, loadAllHistory, setNoteFilter, clearNoteFilter, saveNoteFilterTemplate, applyNoteFilterTemplate, removeNoteFilterTemplate, type Filter } from "@/store";
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";
import { Badge } from "./ui/badge";
@@ -26,7 +26,7 @@ export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, tr
const hasActiveFilters = () => {
const f = currentFilter();
const baseActive = (f.query || "") !== "" || (f.tags || []).length > 0 || f.editedToday;
const baseActive = (f.query || "") !== "" || (f.tags || []).length > 0 || f.editedToday || f.ownedByMe || f.starred;
if (mode() === 'tasks') {
return baseActive || f.priorityMin !== 1 || f.priorityMax !== 10 || f.urgencyMin !== 1 || f.urgencyMax !== 10;
}
@@ -78,6 +78,30 @@ export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, tr
<div class={cn("w-1.5 h-1.5 rounded-full", currentFilter().editedToday ? "bg-primary" : "bg-muted-foreground/30")} />
Edited Today
</button>
<button
onClick={() => currentSetFilter({ ownedByMe: !currentFilter().ownedByMe })}
class={cn(
"flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
currentFilter().ownedByMe
? "bg-primary/10 text-primary border-primary/20"
: "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
)}
>
<User size={10} class={cn(currentFilter().ownedByMe ? "text-primary" : "text-muted-foreground/50")} />
Mine
</button>
<button
onClick={() => currentSetFilter({ starred: !currentFilter().starred })}
class={cn(
"flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
currentFilter().starred
? "bg-amber-500/10 text-amber-500 border-amber-500/20"
: "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
)}
>
<Star size={10} class={cn(currentFilter().starred ? "fill-amber-500 text-amber-500" : "text-muted-foreground/50")} />
Starred
</button>
</div>
<div class="flex items-center gap-2">
<Show when={mode() === 'tasks'}>
src/components/NotesSidebar.tsx
+22 -7
View File
@@ -1,7 +1,7 @@
import { type Component, createMemo, For, Show } from "solid-js";
import { store } from "@/store";
import { store, getFavoriteTag } from "@/store";
import { pb } from "@/lib/pocketbase";
import { Plus, Lock } from "lucide-solid";
import { Plus, Lock, Star } from "lucide-solid";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { NOTES_COLLECTION } from "@/lib/constants";
@@ -54,6 +54,16 @@ export const NotesSidebar: Component<{
});
}
// Owned By Me Filter
if (filter.ownedByMe) {
n = n.filter(note => note.user === currentUserId);
}
// Starred Filter
if (filter.starred) {
n = n.filter(note => note.tags?.includes(getFavoriteTag()));
}
return n;
});
@@ -105,23 +115,28 @@ export const NotesSidebar: Component<{
)}
>
<div class="font-semibold text-sm truncate flex items-center justify-between">
<span>{note.title || "Untitled"}</span>
<div class="flex items-center gap-1.5 truncate">
<Show when={note.tags?.includes(getFavoriteTag())}>
<Star size={12} class="fill-amber-500 text-amber-500 shrink-0" />
</Show>
<span class="truncate">{note.title || "Untitled"}</span>
</div>
<Show when={note.isPrivate}>
<Lock size={12} class="text-orange-500 shrink-0 ml-2" />
</Show>
</div>
<Show when={note.tags && note.tags.length > 0}>
<Show when={note.tags && note.tags.some(t => !t.endsWith("_favorite__"))}>
<div class="flex gap-1 mt-2 flex-wrap">
<For each={note.tags.slice(0, 3)}>
<For each={note.tags.filter(t => !t.endsWith("_favorite__")).slice(0, 3)}>
{(t) => (
<span class="text-[0.6rem] px-1.5 py-0.5 bg-muted rounded-md text-muted-foreground whitespace-nowrap border border-border/50">
{t}
</span>
)}
</For>
<Show when={note.tags.length > 3}>
<Show when={note.tags.filter(t => !t.endsWith("_favorite__")).length > 3}>
<span class="text-[0.6rem] px-1.5 py-0.5 text-muted-foreground whitespace-nowrap shrink-0">
+{note.tags.length - 3}
+{note.tags.filter(t => !t.endsWith("_favorite__")).length - 3}
</span>
</Show>
</div>
src/components/QuickEntryForm.tsx
+1 -1
View File
@@ -345,7 +345,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
<div class="flex flex-col md:flex-row items-stretch md:items-center px-4 py-3 gap-4 bg-muted/10 border-b border-border">
<div class="flex-1 flex flex-wrap gap-2 items-center">
<TagPicker selectedTags={tags()} onTagsChange={setTags} />
<For each={tags()}>
<For each={tags().filter(t => !t.endsWith("_favorite__"))}>
{(tag) => (
<Badge
variant="secondary"
src/components/TagPicker.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
};
const allTagNames = () => {
const definedTags = store.tagDefinitions.map(d => d.name);
const definedTags = store.tagDefinitions.filter(d => !d.name.endsWith("_favorite__")).map(d => d.name);
const bucketTags = store.buckets.map(b => `@${b.name}`);
const noteTags = store.notes.map(n => `#${n.title}`);
return [...new Set([...definedTags, ...bucketTags, ...noteTags])].sort();
src/components/TaskCard.tsx
+25 -6
View File
@@ -1,7 +1,7 @@
import { type Component, createMemo, For, Show } from "solid-js";
import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask, currentTaskContext, now } from "@/store";
import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask, currentTaskContext, now, getFavoriteTag } from "@/store";
import { cn } from "@/lib/utils";
import { Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
import { Clock, ArrowUpCircle, Copy, Users2, Star } from "lucide-solid";
import { Badge } from "@/components/ui/badge";
import { useTheme } from "./ThemeProvider";
import { getThemeAdjustedColor } from "@/lib/colors";
@@ -35,10 +35,10 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
// We are in a bucket view. Hide the tag that matches this bucket's name.
// Buckets are now tagged with '@' + name.
const bucketTagName = `@${(ctx as { name: string }).name.toLowerCase()}`;
return tags.filter(t => t.toLowerCase() !== bucketTagName);
return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
}
return tags;
return tags.filter(t => !t.endsWith("_favorite__"));
});
const isDueWithin12Hours = createMemo(() => {
@@ -218,9 +218,9 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
</div>
</div>
<div class="ml-2 sm:ml-4 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<div class="ml-2 sm:ml-4 shrink-0 flex items-center gap-1">
<button
class="p-1.5 hover:bg-muted rounded-full transition-colors text-muted-foreground hover:text-primary"
class="p-1.5 hover:bg-muted rounded-full transition-all text-muted-foreground hover:text-primary opacity-0 group-hover:opacity-100"
onClick={(e) => {
e.stopPropagation();
copyTask(props.task.id);
@@ -229,6 +229,25 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
>
<Copy size={16} />
</button>
<button
class={cn(
"p-1.5 rounded-full transition-all",
props.task.tags?.includes(getFavoriteTag())
? "text-amber-500 bg-amber-500/10 hover:bg-amber-500/20 opacity-100"
: "text-muted-foreground hover:text-amber-500 hover:bg-muted opacity-0 group-hover:opacity-100"
)}
onClick={(e) => {
e.stopPropagation();
const favTag = getFavoriteTag();
const currentTags = props.task.tags || [];
const isFav = currentTags.includes(favTag);
const newTags = isFav ? currentTags.filter(t => t !== favTag) : [...currentTags, favTag];
updateTask(props.task.id, { tags: newTags });
}}
title="Toggle Favorite"
>
<Star size={16} class={cn(props.task.tags?.includes(getFavoriteTag()) && "fill-amber-500")} />
</button>
</div>
</div>
);
src/components/TaskDetail.tsx
+24 -4
View File
@@ -1,9 +1,9 @@
import { type Component, createEffect, createSignal, For, createMemo, onCleanup } from "solid-js";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext, cleanupTaskAttachments } from "@/store";
import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag } from "@/store";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings } from "lucide-solid";
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings, Star } from "lucide-solid";
import { StatusCircle } from "./StatusCircle";
import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
import { Button } from "./ui/button";
@@ -201,10 +201,10 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
// We are in a bucket view. Hide the tag that matches this bucket's name.
// Buckets are now tagged with '@' + name.
const bucketTagName = `@${(ctx as { name: string }).name.toLowerCase()}`;
return tags.filter(t => t.toLowerCase() !== bucketTagName);
return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
}
return tags;
return tags.filter(t => !t.endsWith("_favorite__"));
});
const statusOptions = createMemo(() => getStatusOptionsForTask(props.task.recurrence));
@@ -361,6 +361,26 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
</Select>
</div>
{/* Favorite */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Favorite</span>
<Button
variant="ghost"
size="sm"
class={cn("h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider transition-colors shrink-0", props.task.tags?.includes(getFavoriteTag()) ? "text-amber-500 hover:bg-amber-500/10" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground")}
onClick={() => {
const favTag = getFavoriteTag();
const currentTags = props.task.tags || [];
const isFav = currentTags.includes(favTag);
const newTags = isFav ? currentTags.filter(t => t !== favTag) : [...currentTags, favTag];
updateTags(newTags);
}}
>
<Star size={14} class={cn("opacity-70 group-hover:opacity-100 transition-opacity shrink-0", props.task.tags?.includes(getFavoriteTag()) && "fill-amber-500")} />
<span class="hidden sm:inline sm:ml-1.5">{props.task.tags?.includes(getFavoriteTag()) ? "Starred" : "Star"}</span>
</Button>
</div>
{/* Commands Shortcut */}
<div class="flex items-center gap-1 shrink-0">
<Button