Compare commits
2 Commits
414eead28d
...
25403ecaf0
| Author | SHA1 | Date | |
|---|---|---|---|
 tcardoza
|
25403ecaf0 | ||
|
tcardoza
|
bf12c6f814 |
@@ -1,6 +1,6 @@
|
||||
import { type Component, createSignal, For, Show } from "solid-js";
|
||||
import { Search, X, Hash, ArrowUpCircle, Clock, Minus } from "lucide-solid";
|
||||
import { store, setFilter, clearFilter } from "@/store";
|
||||
import { Search, X, Hash, ArrowUpCircle, Clock, Minus, Save, Trash2, Bookmark } from "lucide-solid";
|
||||
import { store, setFilter, clearFilter, saveFilterTemplate, applyFilterTemplate, removeFilterTemplate } from "@/store";
|
||||
import { Button } from "./ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Badge } from "./ui/badge";
|
||||
@@ -12,6 +12,8 @@ import { getThemeAdjustedColor } from "@/lib/colors";
|
||||
export const FilterBar: Component = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
const [newTemplateName, setNewTemplateName] = createSignal("");
|
||||
const [isSaving, setIsSaving] = createSignal(false);
|
||||
|
||||
const hasActiveFilters = () => {
|
||||
const f = store.filter;
|
||||
@@ -251,6 +253,109 @@ export const FilterBar: Component = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<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"
|
||||
>
|
||||
<Save size={10} />
|
||||
Save Current
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={isSaving()}>
|
||||
<div class="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Template name..."
|
||||
value={newTemplateName()}
|
||||
onInput={(e) => setNewTemplateName(e.currentTarget.value)}
|
||||
class="flex-1 bg-muted/30 border border-primary/20 rounded-lg px-3 py-1.5 text-xs outline-none focus:ring-1 focus:ring-primary/30"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (newTemplateName().trim()) {
|
||||
saveFilterTemplate(newTemplateName().trim());
|
||||
setNewTemplateName("");
|
||||
setIsSaving(false);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
class="h-8 px-3"
|
||||
disabled={!newTemplateName().trim()}
|
||||
onClick={() => {
|
||||
saveFilterTemplate(newTemplateName().trim());
|
||||
setNewTemplateName("");
|
||||
setIsSaving(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
onClick={() => setIsSaving(false)}
|
||||
>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
}>
|
||||
{(template) => (
|
||||
<div class="group flex items-center justify-between p-2 rounded-xl bg-muted/20 border border-border/30 hover:bg-muted/40 transition-all">
|
||||
<button
|
||||
class="flex-1 text-left px-1 min-w-0"
|
||||
onClick={() => applyFilterTemplate(template.id)}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-[11px] 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" />
|
||||
</Show>
|
||||
<Show when={template.filter.tags.length > 0}>
|
||||
<div class="w-1 h-1 rounded-full bg-indigo-500" />
|
||||
</Show>
|
||||
<Show when={template.filter.priorityMin > 1 || template.filter.priorityMax < 10}>
|
||||
<div class="w-1 h-1 rounded-full bg-amber-500" />
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-destructive/10 hover:text-destructive rounded-lg transition-all"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFilterTemplate(template.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,9 @@ import { LayoutDashboard, ListTodo, Settings, Clock, ArrowUpCircle, PanelLeftClo
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "./ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { store, currentTaskContext, setCurrentTaskContext } from "@/store";
|
||||
import { pb } from "@/lib/pocketbase";
|
||||
import { createResource, createSignal, createEffect } from "solid-js";
|
||||
|
||||
interface NavItem {
|
||||
icon: any;
|
||||
@@ -109,6 +112,130 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
|
||||
);
|
||||
};
|
||||
|
||||
const ContextSwitcher: Component<{
|
||||
isLocked: boolean;
|
||||
isPeeking: boolean;
|
||||
setIsPeeking: (v: boolean) => void;
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}> = (props) => {
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
const [open, setOpen] = createSignal(false);
|
||||
|
||||
// Sync with parent if needed
|
||||
createEffect(() => {
|
||||
props.onOpenChange?.(open());
|
||||
});
|
||||
|
||||
// Close popover when sidebar disappears
|
||||
createEffect(() => {
|
||||
if (!props.isLocked && !props.isPeeking) {
|
||||
setOpen(false);
|
||||
}
|
||||
});
|
||||
|
||||
const [oversightUsers] = createResource(
|
||||
() => store.shareRules.filter(r => r.targetUserId === currentUserId && r.type === 'all').map(r => r.ownerId),
|
||||
async (ownerIds) => {
|
||||
if (ownerIds.length === 0) return [];
|
||||
try {
|
||||
// Fetch user names for these IDs
|
||||
// Optimization: Could check if we already have them or just fetch
|
||||
const users = await Promise.all(ownerIds.map(id => pb.collection('users').getOne(id, { fields: 'id,name,email' })));
|
||||
return users.map(u => ({ id: u.id, name: u.name || u.email }));
|
||||
} catch (e) {
|
||||
console.error("Failed to load oversight users", e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const ctx = currentTaskContext; // Accessor
|
||||
|
||||
const label = () => {
|
||||
const c = ctx();
|
||||
return c === 'mine' ? "My Workspace" : c.name;
|
||||
};
|
||||
|
||||
const handleSwitch = (userId: string, name: string) => {
|
||||
if (userId === 'mine') {
|
||||
setCurrentTaskContext('mine');
|
||||
} else {
|
||||
setCurrentTaskContext({ userId, name });
|
||||
}
|
||||
|
||||
// Close popover
|
||||
setOpen(false);
|
||||
|
||||
// Collapse sidebar if peaking
|
||||
if (!props.isLocked && props.isPeeking) {
|
||||
props.setIsPeeking(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Show when={oversightUsers() && oversightUsers()!.length > 0}>
|
||||
<Popover open={open()} onOpenChange={setOpen}>
|
||||
<PopoverTrigger class="w-full">
|
||||
<div class={cn(
|
||||
"flex items-center justify-between w-full px-3 py-2.5 rounded-lg transition-all duration-200 group text-sm",
|
||||
"text-muted-foreground hover:bg-muted hover:text-foreground border border-transparent hover:border-border/50"
|
||||
)}>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<div class={cn(
|
||||
"w-4 h-4 rounded-full flex items-center justify-center shrink-0",
|
||||
ctx() === 'mine' ? "bg-primary/20 text-primary" : "bg-orange-500/20 text-orange-500"
|
||||
)}>
|
||||
<div class="w-2 h-2 rounded-full bg-current" />
|
||||
</div>
|
||||
<span class="font-medium truncate">{label()}</span>
|
||||
</div>
|
||||
<ChevronDown size={14} class="opacity-50 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-1 bg-card border-border shadow-xl">
|
||||
<div class="space-y-0.5">
|
||||
<button
|
||||
onClick={() => handleSwitch('mine', '')}
|
||||
class={cn(
|
||||
"w-full flex items-center gap-2 p-2 rounded-md text-sm transition-colors",
|
||||
ctx() === 'mine' ? "bg-primary/10 text-primary font-semibold" : "hover:bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
<div class="w-4 h-4 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-primary" />
|
||||
</div>
|
||||
My Workspace
|
||||
</button>
|
||||
<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">
|
||||
<span>Oversight</span>
|
||||
<span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{oversightUsers()?.length}</span>
|
||||
</div>
|
||||
<For each={oversightUsers()}>
|
||||
{(user) => (
|
||||
<button
|
||||
onClick={() => handleSwitch(user.id, user.name)}
|
||||
class={cn(
|
||||
"w-full flex items-center gap-2 p-2 rounded-md text-sm transition-colors",
|
||||
(ctx() as any).userId === user.id ? "bg-orange-500/10 text-orange-600 font-semibold" : "hover:bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
<div class="w-4 h-4 rounded-full bg-orange-500/20 flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-orange-500" />
|
||||
</div>
|
||||
<span class="truncate">{user.name}</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sidebar: Component<{
|
||||
currentView: string;
|
||||
setView: (v: string) => void;
|
||||
@@ -117,10 +244,16 @@ export const Sidebar: Component<{
|
||||
isPeeking: boolean;
|
||||
setIsPeeking: (v: boolean) => void;
|
||||
}> = (props) => {
|
||||
const [switcherOpen, setSwitcherOpen] = createSignal(false);
|
||||
|
||||
return (
|
||||
<aside
|
||||
onMouseEnter={() => !props.isLocked && props.setIsPeeking(true)}
|
||||
onMouseLeave={() => !props.isLocked && props.setIsPeeking(false)}
|
||||
onMouseLeave={() => {
|
||||
if (!props.isLocked && !switcherOpen()) {
|
||||
props.setIsPeeking(false);
|
||||
}
|
||||
}}
|
||||
class={cn(
|
||||
"hidden md:flex flex-col border-r border-border bg-card h-screen fixed left-0 top-0 transition-all duration-300 ease-in-out z-[50]",
|
||||
props.isLocked ? "w-48 translate-x-0" : "w-48 -translate-x-full",
|
||||
@@ -151,6 +284,17 @@ export const Sidebar: Component<{
|
||||
</Button>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Context Switcher - Only visible if there are oversight contexts */}
|
||||
<div class={cn("px-3 mb-2", !props.isLocked && !props.isPeeking && "hidden")}>
|
||||
<ContextSwitcher
|
||||
isLocked={props.isLocked}
|
||||
isPeeking={props.isPeeking}
|
||||
setIsPeeking={props.setIsPeeking}
|
||||
onOpenChange={setSwitcherOpen}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 px-3 space-y-1 mt-2">
|
||||
<For each={desktopNavItems}>
|
||||
{(item) => (
|
||||
|
||||
+217
-6
@@ -10,7 +10,9 @@ const getStorageKey = () => {
|
||||
};
|
||||
|
||||
export const [now, setNow] = createSignal(Date.now());
|
||||
// Context: 'mine' = My Workspace (default), { userId: string } = Oversight View for that user
|
||||
export const [activeTaskId, setActiveTaskId] = createSignal<string | null>(null);
|
||||
export const [currentTaskContext, setCurrentTaskContext] = createSignal<'mine' | { userId: string, name: string }>('mine');
|
||||
|
||||
export type UrgencyLevel = number;
|
||||
|
||||
@@ -22,6 +24,7 @@ export interface Task {
|
||||
priority: number; // 1-10
|
||||
completed: boolean;
|
||||
tags: string[];
|
||||
ownerId: string; // Add ownerId to interface
|
||||
content?: string; // HTML content from Tiptap
|
||||
deletedAt?: number; // Timestamp of soft delete
|
||||
created: string; // ISO string from PB
|
||||
@@ -123,6 +126,7 @@ export interface TagDefinition {
|
||||
value: number;
|
||||
color?: string;
|
||||
theme?: "light" | "dark";
|
||||
isUser?: boolean; // New flag to identify user-based tags
|
||||
}
|
||||
|
||||
export interface FilterTag {
|
||||
@@ -140,6 +144,13 @@ export interface Filter {
|
||||
editedToday: boolean;
|
||||
}
|
||||
|
||||
export interface FilterTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
filter: Filter;
|
||||
}
|
||||
|
||||
|
||||
export interface ShareRule {
|
||||
id: string;
|
||||
ownerId: string;
|
||||
@@ -158,6 +169,7 @@ interface TaskStore {
|
||||
templates: TaskTemplate[];
|
||||
filter: Filter;
|
||||
shareRules: ShareRule[];
|
||||
filterTemplates: FilterTemplate[];
|
||||
}
|
||||
|
||||
// Initial empty state
|
||||
@@ -177,10 +189,36 @@ export const [store, setStore] = createStore<TaskStore>({
|
||||
urgencyMax: 10,
|
||||
editedToday: false
|
||||
},
|
||||
shareRules: []
|
||||
shareRules: [],
|
||||
filterTemplates: []
|
||||
});
|
||||
|
||||
export const matchesFilter = (task: Task) => {
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
const ctx = currentTaskContext();
|
||||
|
||||
// 0. Context Filter
|
||||
if (ctx === 'mine') {
|
||||
const isOwner = task.ownerId === currentUserId;
|
||||
const isExplicitlyShared = task.sharedWith?.some(s => s.userId === currentUserId);
|
||||
|
||||
// Tag-based share rules targeting me
|
||||
const isTagRuleShared = store.shareRules.some(r =>
|
||||
r.targetUserId === currentUserId &&
|
||||
r.ownerId === task.ownerId &&
|
||||
r.type === 'tag' &&
|
||||
task.tags?.includes(r.tagName || "")
|
||||
);
|
||||
|
||||
// If context is "mine", we hide tasks that only match a "Share All" rule
|
||||
// (i.e., not owner, not explicit, not tag rule)
|
||||
if (!isOwner && !isExplicitlyShared && !isTagRuleShared) return false;
|
||||
} else {
|
||||
// Context is Oversight for specific user
|
||||
// Show ONLY tasks owned by that user
|
||||
if (task.ownerId !== ctx.userId) return false;
|
||||
}
|
||||
|
||||
// Hide templates from all regular views
|
||||
if (task.tags?.includes("__template__")) return false;
|
||||
|
||||
@@ -316,6 +354,7 @@ const mapRecordToTask = (r: any): Task => {
|
||||
priority: r.priority,
|
||||
completed: r.completed,
|
||||
tags: tags,
|
||||
ownerId: r.user,
|
||||
content: r.content,
|
||||
deletedAt: r.deletedAt ? new Date(r.deletedAt).getTime() : undefined,
|
||||
created: r.created,
|
||||
@@ -583,6 +622,9 @@ export const initStore = async () => {
|
||||
console.warn("Failed to load tags:", tagErr);
|
||||
}
|
||||
|
||||
// 1.8 Sync User Tags & Share Rules
|
||||
await syncUserTagsAndRules();
|
||||
|
||||
// 2. Fetch Tasks & Templates + Shared Tasks in PARALLEL
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
|
||||
@@ -692,9 +734,11 @@ export const initStore = async () => {
|
||||
});
|
||||
}
|
||||
|
||||
// Set store ONCE with all tasks
|
||||
// Set store ONCE with all tasks and rules
|
||||
setStore("tasks", reconcile(allTasks));
|
||||
setStore("templates", loadedTemplates);
|
||||
// Make sure we include incomingRules in the store so ContextSwitcher can see them
|
||||
setStore("shareRules", incomingRules.map(mapRecordToShareRule));
|
||||
|
||||
// Check recurring tasks after load
|
||||
checkRecurringTasks();
|
||||
@@ -702,6 +746,9 @@ export const initStore = async () => {
|
||||
// 2.7. Fetch Share Rules (owned by current user)
|
||||
await loadShareRules();
|
||||
|
||||
// 2.8 Fetch Filter Templates
|
||||
await loadFilterTemplates();
|
||||
|
||||
// 3. Subscribe to Realtime Updates
|
||||
await subscribeToRealtime();
|
||||
|
||||
@@ -754,6 +801,7 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
|
||||
priority,
|
||||
completed: false,
|
||||
tags,
|
||||
ownerId: pb.authStore.model?.id || "",
|
||||
content,
|
||||
size,
|
||||
created: new Date().toISOString(),
|
||||
@@ -789,7 +837,8 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
|
||||
...task,
|
||||
id: record.id,
|
||||
created: record.created,
|
||||
updated: record.updated
|
||||
updated: record.updated,
|
||||
ownerId: record.user // Add missing ownerId from record
|
||||
} : task);
|
||||
});
|
||||
} catch (err) {
|
||||
@@ -1001,6 +1050,104 @@ export const removeTagDefinition = async (name: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const syncUserTagsAndRules = async () => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
|
||||
try {
|
||||
// 1. Fetch only verified users
|
||||
const usersPromise = pb.collection('users').getFullList({
|
||||
filter: 'verified = true',
|
||||
fields: 'id,name,email,verified',
|
||||
requestKey: null
|
||||
});
|
||||
|
||||
// 2. Fetch existing rules DIRECTLY from PB to avoid store race conditions
|
||||
const rulesPromise = pb.collection(SHARE_RULES_COLLECTION).getFullList({
|
||||
filter: `ownerId = "${currentUserId}"`,
|
||||
requestKey: null
|
||||
});
|
||||
|
||||
const [users, pbRules] = await Promise.all([usersPromise, rulesPromise]);
|
||||
|
||||
// 2a. Map PB rules to check for duplicates
|
||||
const existingTags = store.tagDefinitions;
|
||||
const normalizedRules = pbRules.map(r => ({
|
||||
id: r.id,
|
||||
targetUserId: r.targetUserId,
|
||||
type: r.type,
|
||||
tagName: r.tagName
|
||||
}));
|
||||
|
||||
for (const user of users) {
|
||||
const userName = user.name || user.email;
|
||||
if (!userName) continue;
|
||||
|
||||
// --- Tag Sync ---
|
||||
const tagExists = existingTags.find(t => t.name === userName);
|
||||
if (!tagExists) {
|
||||
// ... create tag (logic unchanged) ...
|
||||
try {
|
||||
const record = await pb.collection(TAGS_COLLECTION).create({
|
||||
user: currentUserId,
|
||||
name: userName,
|
||||
value: 5,
|
||||
color: "#64748b",
|
||||
theme: "dark"
|
||||
});
|
||||
setStore("tagDefinitions", prev => [...prev, {
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
value: record.value,
|
||||
color: record.color,
|
||||
theme: record.theme,
|
||||
isUser: true
|
||||
}]);
|
||||
} catch (e) {
|
||||
// console.error(`Failed to create user tag ${userName}`, e);
|
||||
}
|
||||
} else {
|
||||
if (!tagExists.isUser) {
|
||||
setStore("tagDefinitions", d => d.id === tagExists.id, { isUser: true });
|
||||
}
|
||||
}
|
||||
|
||||
// --- Share Rule Sync ---
|
||||
if (user.id !== currentUserId) {
|
||||
// Find ALL rules matching this criteria
|
||||
const matchingRules = normalizedRules.filter(r =>
|
||||
r.targetUserId === user.id &&
|
||||
r.type === 'tag' &&
|
||||
r.tagName === userName
|
||||
);
|
||||
|
||||
if (matchingRules.length === 0) {
|
||||
console.log(`Creating auto-share rule for ${userName}`);
|
||||
await addShareRule('tag', user.id, userName);
|
||||
} else if (matchingRules.length > 1) {
|
||||
// DUPLICATE DETECTED: Keep first, delete others
|
||||
console.warn(`Duplicate share rules found for ${userName}. Cleaning up...`);
|
||||
const [, ...remove] = matchingRules;
|
||||
for (const rule of remove) {
|
||||
try {
|
||||
await pb.collection(SHARE_RULES_COLLECTION).delete(rule.id);
|
||||
// Update local store immediately to reflect deletion
|
||||
setStore("shareRules", list => list.filter(r => r.id !== rule.id));
|
||||
} catch (e) {
|
||||
console.error("Failed to delete duplicate rule:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed to sync user tags/rules:", err);
|
||||
}
|
||||
};
|
||||
|
||||
export const renameTagDefinition = async (oldName: string, newName: string) => {
|
||||
if (!newName || !newName.trim() || newName === oldName) return;
|
||||
if (!pb.authStore.isValid) return;
|
||||
@@ -1227,8 +1374,9 @@ export const loadShareRules = async () => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
|
||||
try {
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
const records = await pb.collection(SHARE_RULES_COLLECTION).getFullList({
|
||||
filter: `ownerId = "${pb.authStore.model?.id}"`
|
||||
filter: `ownerId = "${currentUserId}" || targetUserId = "${currentUserId}"`
|
||||
});
|
||||
|
||||
const rules: ShareRule[] = records.map(r => ({
|
||||
@@ -1239,10 +1387,9 @@ export const loadShareRules = async () => {
|
||||
tagName: r.tagName
|
||||
}));
|
||||
|
||||
setStore("shareRules", rules);
|
||||
setStore("shareRules", reconcile(rules));
|
||||
} catch (err) {
|
||||
console.error("Failed to load share rules:", err);
|
||||
// Collection might not exist yet, that's okay
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1277,6 +1424,70 @@ export const removeShareRule = async (ruleId: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
// -- Filter Templates --
|
||||
const FILTER_TEMPLATES_COLLECTION = 'TasGrid_FilterTemplates';
|
||||
|
||||
export const loadFilterTemplates = async () => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
try {
|
||||
const records = await pb.collection(FILTER_TEMPLATES_COLLECTION).getFullList({
|
||||
filter: `user = "${pb.authStore.model?.id}"`,
|
||||
requestKey: null
|
||||
});
|
||||
const templates: FilterTemplate[] = records.map(r => ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
filter: r.filter as Filter
|
||||
}));
|
||||
setStore("filterTemplates", templates);
|
||||
} catch (err) {
|
||||
console.error("Failed to load filter templates:", err);
|
||||
}
|
||||
};
|
||||
|
||||
export const saveFilterTemplate = async (name: string) => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
try {
|
||||
const record = await pb.collection(FILTER_TEMPLATES_COLLECTION).create({
|
||||
user: pb.authStore.model?.id,
|
||||
name,
|
||||
filter: store.filter
|
||||
}, { requestKey: null });
|
||||
|
||||
const newTemplate: FilterTemplate = {
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
filter: record.filter as Filter
|
||||
};
|
||||
|
||||
setStore("filterTemplates", prev => [...prev, newTemplate]);
|
||||
toast.success(`Filter template "${name}" saved`);
|
||||
} catch (err) {
|
||||
console.error("Failed to save filter template:", err);
|
||||
toast.error("Failed to save filter template.");
|
||||
}
|
||||
};
|
||||
|
||||
export const applyFilterTemplate = (id: string) => {
|
||||
const template = store.filterTemplates.find(t => t.id === id);
|
||||
if (template) {
|
||||
setFilter(template.filter);
|
||||
toast.success(`Applied filter: ${template.name}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const removeFilterTemplate = async (id: string) => {
|
||||
if (!pb.authStore.isValid) return;
|
||||
try {
|
||||
await pb.collection(FILTER_TEMPLATES_COLLECTION).delete(id);
|
||||
setStore("filterTemplates", prev => prev.filter(t => t.id !== id));
|
||||
toast.success("Filter template deleted");
|
||||
} catch (err) {
|
||||
console.error("Failed to delete filter template:", err);
|
||||
toast.error("Failed to delete filter template.");
|
||||
}
|
||||
};
|
||||
|
||||
export const clearFilter = () => {
|
||||
setStore("filter", {
|
||||
query: "",
|
||||
|
||||
+184
-96
@@ -179,33 +179,73 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
|
||||
{/* Active share rules */}
|
||||
<For each={store.shareRules} fallback={
|
||||
<div class="text-center py-6 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
|
||||
No active share rules.
|
||||
</div>
|
||||
}>
|
||||
{(rule) => (
|
||||
<div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
{rule.type === 'all' ? <Users size={14} class="text-primary shrink-0" /> : <Tag size={14} class="text-primary shrink-0" />}
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium truncate">{getUserName(rule.targetUserId)}</p>
|
||||
<p class="text-[10px] text-muted-foreground uppercase tracking-wider">
|
||||
{rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 hover:bg-destructive/10 hover:text-destructive"
|
||||
onClick={() => removeShareRule(rule.id)}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
{/* Active share rules - Custom */}
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-xs font-bold uppercase tracking-wider text-muted-foreground pb-1">Custom Rules</h4>
|
||||
<For each={store.shareRules.filter(r => {
|
||||
const isSystem = r.type === 'tag' && store.tagDefinitions.find(t => t.name === r.tagName)?.isUser;
|
||||
return !isSystem;
|
||||
})} fallback={
|
||||
<div class="text-center py-4 text-muted-foreground text-xs italic border border-dashed border-border rounded-xl">
|
||||
No custom share rules.
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
}>
|
||||
{(rule) => (
|
||||
<div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
{rule.type === 'all' ? <Users size={14} class="text-primary shrink-0" /> : <Tag size={14} class="text-primary shrink-0" />}
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium truncate">{getUserName(rule.targetUserId)}</p>
|
||||
<p class="text-[10px] text-muted-foreground uppercase tracking-wider">
|
||||
{rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 hover:bg-destructive/10 hover:text-destructive"
|
||||
onClick={() => removeShareRule(rule.id)}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
{/* Active share rules - System */}
|
||||
<details class="group/details">
|
||||
<summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none">
|
||||
<div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
|
||||
<ChevronRight size={12} />
|
||||
</div>
|
||||
System Rules (Auto-Generated)
|
||||
</summary>
|
||||
<div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
<For each={store.shareRules.filter(r => {
|
||||
const isSystem = r.type === 'tag' && store.tagDefinitions.find(t => t.name === r.tagName)?.isUser;
|
||||
return isSystem;
|
||||
})}>
|
||||
{(rule) => (
|
||||
<div class="flex items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 opacity-70">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<Tag size={14} class="text-muted-foreground shrink-0" />
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium truncate flex items-center gap-2">
|
||||
{getUserName(rule.targetUserId)}
|
||||
<Users size={10} class="text-muted-foreground" />
|
||||
</p>
|
||||
<p class="text-[10px] text-muted-foreground uppercase tracking-wider">
|
||||
Auto-shared via User Tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</Show>
|
||||
</section>
|
||||
@@ -257,84 +297,132 @@ 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={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>
|
||||
}>
|
||||
{(tag) => {
|
||||
const [isEditingName, setIsEditingName] = createSignal(false);
|
||||
const [tempName, setTempName] = createSignal(tag.name);
|
||||
<div class="space-y-2">
|
||||
<For each={store.tagDefinitions.filter(t => !t.isUser).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 custom tags found.
|
||||
</div>
|
||||
}>
|
||||
{(tag) => {
|
||||
const [isEditingName, setIsEditingName] = createSignal(false);
|
||||
const [tempName, setTempName] = createSignal(tag.name);
|
||||
|
||||
const handleRename = () => {
|
||||
if (tempName() && tempName() !== tag.name) {
|
||||
renameTagDefinition(tag.name, tempName());
|
||||
}
|
||||
setIsEditingName(false);
|
||||
};
|
||||
const handleRename = () => {
|
||||
if (tempName() && tempName() !== tag.name) {
|
||||
renameTagDefinition(tag.name, tempName());
|
||||
}
|
||||
setIsEditingName(false);
|
||||
};
|
||||
|
||||
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">
|
||||
<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() ? (
|
||||
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">
|
||||
<input
|
||||
class="flex h-7 min-w-0 w-full rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
value={tempName()}
|
||||
onInput={(e) => setTempName(e.currentTarget.value)}
|
||||
onBlur={handleRename}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRename()}
|
||||
autofocus
|
||||
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"
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
class="font-medium cursor-pointer hover:underline decoration-dashed underline-offset-4 truncate"
|
||||
onClick={() => setIsEditingName(true)}
|
||||
title="Click to rename"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<select
|
||||
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"]}>
|
||||
{(v) => <option value={v}>{v}</option>}
|
||||
</For>
|
||||
</select>
|
||||
{isEditingName() ? (
|
||||
<input
|
||||
class="flex h-7 min-w-0 w-full rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
value={tempName()}
|
||||
onInput={(e) => setTempName(e.currentTarget.value)}
|
||||
onBlur={handleRename}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRename()}
|
||||
autofocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
class="font-medium cursor-pointer hover:underline decoration-dashed underline-offset-4 truncate"
|
||||
onClick={() => setIsEditingName(true)}
|
||||
title="Click to rename"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => {
|
||||
if (confirm(`Delete tag definition for "${tag.name}" ? `)) {
|
||||
removeTagDefinition(tag.name);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
<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>
|
||||
<select
|
||||
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"]}>
|
||||
{(v) => <option value={v}>{v}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => {
|
||||
if (confirm(`Delete tag definition for "${tag.name}" ? `)) {
|
||||
removeTagDefinition(tag.name);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
{/* User Tags Expansion */}
|
||||
<details class="group/details">
|
||||
<summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none pt-4">
|
||||
<div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
|
||||
<ChevronRight size={12} />
|
||||
</div>
|
||||
User Tags (System)
|
||||
</summary>
|
||||
<div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
<For each={store.tagDefinitions.filter(t => t.isUser).sort((a, b) => a.name.localeCompare(b.name))}>
|
||||
{(tag) => (
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 sm:gap-4 group opacity-80">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<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"
|
||||
/>
|
||||
<span class="font-medium truncate flex items-center gap-2 text-sm">
|
||||
{tag.name}
|
||||
<Users size={12} class="text-muted-foreground opacity-70" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<select
|
||||
value={String(tag.value)}
|
||||
onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
|
||||
class="flex h-7 w-14 items-center justify-between rounded-md border border-input bg-background/50 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"]}>
|
||||
{(v) => <option value={v}>{v}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</Show>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user