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

tag colors and tag list tracking fix

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-02 15:10:29 -06:00
parent 3212402788
commit e36ae92441
12 changed files with 548 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/SettingsView.tsx
+28 -14
View File
@@ -1,6 +1,7 @@
import { type Component, For, Show, createSignal, lazy, Suspense } from "solid-js";
import { ThemeToggle } from "../components/ThemeToggle";
import { store, restoreTask, deleteTaskPermanently, setMatrixScaleDays, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition } from "@/store";
import { useTheme } from "@/components/ThemeProvider";
import { Trash2, Undo2, ArrowLeftRight, Hash, Copy, Plus, ChevronDown, ChevronRight, Type } from "lucide-solid";
import { TagPicker } from "@/components/TagPicker";
import { cn } from "@/lib/utils";
@@ -13,6 +14,7 @@ import { pb } from "@/lib/pocketbase";
const TaskEditor = lazy(() => import("../components/TaskEditor").then(m => ({ default: m.TaskEditor })));
export const SettingsView: Component = () => {
const { resolvedTheme } = useTheme();
const [isTagsOpen, setIsTagsOpen] = createSignal(false);
const [isTemplatesOpen, setIsTemplatesOpen] = createSignal(false);
const [isTrashOpen, setIsTrashOpen] = createSignal(false);
@@ -98,18 +100,18 @@ export const SettingsView: Component = () => {
<Show when={isTagsOpen()}>
<div class="space-y-2 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
<For each={Object.entries(store.tagDefinitions || {}).sort((a, b) => a[0].localeCompare(b[0]))} fallback={
<For each={store.tagDefinitions.sort((a, b) => a.name.localeCompare(b.name))} fallback={
<div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
No specific tag definitions found.
</div>
}>
{([tagName, val]) => {
{(tag) => {
const [isEditingName, setIsEditingName] = createSignal(false);
const [tempName, setTempName] = createSignal(tagName);
const [tempName, setTempName] = createSignal(tag.name);
const handleRename = () => {
if (tempName() && tempName() !== tagName) {
renameTagDefinition(tagName, tempName());
if (tempName() && tempName() !== tag.name) {
renameTagDefinition(tag.name, tempName());
}
setIsEditingName(false);
};
@@ -117,7 +119,13 @@ export const SettingsView: Component = () => {
return (
<div class="flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded-xl bg-muted/30 border border-border/50 gap-3 sm:gap-4 group">
<div class="flex items-center gap-3 min-w-0 flex-1">
<div class={cn("w-2 h-2 rounded-full shrink-0", val > 5 ? "bg-green-500" : val < 5 ? "bg-red-500" : "bg-gray-400")} />
<input
type="color"
value={tag.color || "#6366f1"}
onInput={(e) => upsertTagDefinition(tag.name, tag.value, e.currentTarget.value, resolvedTheme())}
class="w-4 h-4 rounded-full border-none p-0 bg-transparent cursor-pointer shrink-0 overflow-hidden"
title="Tag accent color"
/>
{isEditingName() ? (
<input
@@ -134,7 +142,7 @@ export const SettingsView: Component = () => {
onClick={() => setIsEditingName(true)}
title="Click to rename"
>
{tagName}
{tag.name}
</span>
)}
</div>
@@ -143,8 +151,8 @@ export const SettingsView: Component = () => {
<div class="flex items-center gap-2">
<span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
<select
value={String(val)}
onChange={(e) => upsertTagDefinition(tagName, parseInt(e.currentTarget.value))}
value={String(tag.value)}
onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
class="flex h-8 w-16 items-center justify-between rounded-md border border-input bg-background px-2 py-1 text-xs shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring appearance-none"
>
<For each={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"]}>
@@ -156,10 +164,10 @@ export const SettingsView: Component = () => {
<Button
variant="ghost"
size="icon"
class="h-8 w-8 hover:bg-destructive/10 hover:text-destructive"
class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
onClick={() => {
if (confirm(`Delete tag "${tagName}" globally? This will remove it from all tasks.`)) {
removeTagDefinition(tagName);
if (confirm(`Delete tag definition for "${tag.name}" ? `)) {
removeTagDefinition(tag.name);
}
}}
>
@@ -291,7 +299,7 @@ export const SettingsView: Component = () => {
class="h-8 w-8 hover:bg-red-500/10 hover:text-red-600 rounded-xl"
onClick={(e: MouseEvent) => {
e.stopPropagation();
if (confirm(`Delete template "${template.name}"?`)) {
if (confirm(`Delete template "${template.name}" ? `)) {
removeTemplate(template.id);
toast.error("Template removed");
}
@@ -356,7 +364,13 @@ export const SettingsView: Component = () => {
class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-background border border-border/50 text-xs hover:bg-destructive/10 hover:border-destructive/30 group/tag transition-all"
onClick={() => updateTemplate(template.id, { tags: (template.tags || []).filter(t => t !== tag) })}
>
<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")} />
<div
class="w-1.5 h-1.5 rounded-full"
style={{
"background-color": store.tagDefinitions.find(d => d.name === tag)?.color ||
((store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8")
}}
/>
{tag}
</button>
)}