unstable sharing refactor
This commit is contained in:
+33
-148
@@ -1,9 +1,9 @@
|
||||
import { type Component, createEffect, createSignal, For, createMemo, onCleanup, Show } from "solid-js";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag, now } from "@/store";
|
||||
import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag, now } 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, Star, FileText } from "lucide-solid";
|
||||
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Star, FileText } from "lucide-solid";
|
||||
import { StatusCircle } from "./StatusCircle";
|
||||
import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
|
||||
import { Button } from "./ui/button";
|
||||
@@ -16,8 +16,8 @@ import { toast } from "solid-sonner";
|
||||
import { lazy, Suspense } from "solid-js";
|
||||
import { useTheme } from "./ThemeProvider";
|
||||
import { getThemeAdjustedColor } from "@/lib/colors";
|
||||
import { pb } from "@/lib/pocketbase";
|
||||
import { getRecurrenceProgress } from "@/lib/recurrence";
|
||||
import { buildShareTag } from "@/lib/tags";
|
||||
import { TextBubbleMenu } from "@/components/TextBubbleMenu";
|
||||
import { TableBubbleMenu } from "@/components/TableBubbleMenu";
|
||||
|
||||
@@ -174,7 +174,8 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
|
||||
// If in a bucket view, ensure the bucket tag is preserved (it was hidden from the UI so it's missing from 'tags')
|
||||
if (typeof ctx === 'object' && 'bucketId' in ctx) {
|
||||
const bucketTagName = `@${(ctx as { name: string }).name}`;
|
||||
const bucketContext = store.contexts.find(context => context.id === ctx.bucketId);
|
||||
const bucketTagName = buildShareTag(bucketContext?.displayName || ctx.name);
|
||||
// Check case-insensitive existence
|
||||
if (!newTags.some(t => t.toLowerCase() === bucketTagName.toLowerCase())) {
|
||||
newTags.push(bucketTagName);
|
||||
@@ -201,9 +202,8 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
const ctx = currentTaskContext();
|
||||
|
||||
if (typeof ctx === 'object' && 'bucketId' in ctx) {
|
||||
// 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()}`;
|
||||
const bucketContext = store.contexts.find(context => context.id === ctx.bucketId);
|
||||
const bucketTagName = buildShareTag(bucketContext?.displayName || ctx.name).toLowerCase();
|
||||
return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
|
||||
}
|
||||
|
||||
@@ -682,11 +682,32 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
{/* Sharing Section */}
|
||||
<div class="p-2 border-t border-border/50">
|
||||
<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 || []}
|
||||
tags={props.task.tags || []}
|
||||
/>
|
||||
<div class="px-2 py-1.5 rounded-lg bg-muted/20 border border-border/30 space-y-2">
|
||||
<p class="text-[0.6875rem] text-muted-foreground leading-relaxed">
|
||||
Sharing is driven by the task's <span class="font-semibold text-foreground">@tags</span>. Add or remove
|
||||
<span class="font-semibold text-foreground"> @people</span> and <span class="font-semibold text-foreground">@buckets</span> in the tag list above.
|
||||
</p>
|
||||
<Show
|
||||
when={props.task.shareRefs.length > 0}
|
||||
fallback={<p class="text-[0.6875rem] text-muted-foreground/70">No shared contexts on this task.</p>}
|
||||
>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<For each={props.task.shareRefs}>
|
||||
{(ref) => {
|
||||
const context = store.contexts.find(existing => existing.id === ref.contextId) || store.contexts.find(existing => existing.key === ref.key);
|
||||
const label = `@${context?.displayName || ref.key}`;
|
||||
const policy = context?.policy || (ref.kind === "bucket" ? "handoff" : "collaborative");
|
||||
return (
|
||||
<Badge variant="secondary" class="h-6 px-2 text-[0.625rem] gap-1 bg-muted/40 border-border/40">
|
||||
<span>{label}</span>
|
||||
<span class="uppercase text-[0.5rem] tracking-wider text-muted-foreground">{policy}</span>
|
||||
</Badge>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
@@ -757,139 +778,3 @@ const MetadataItem: Component<{
|
||||
);
|
||||
};
|
||||
|
||||
// User Share Picker Component
|
||||
const UserSharePicker: Component<{
|
||||
taskId: string;
|
||||
sharedWith: Array<{ userId: string; access: 'view' | 'edit' }>;
|
||||
tags: string[];
|
||||
}> = (props) => {
|
||||
const [users, setUsers] = createSignal<Array<{ id: string; name: string }>>([]);
|
||||
const [selectedUserId, setSelectedUserId] = createSignal<string>("");
|
||||
const [loading, setLoading] = createSignal(true);
|
||||
|
||||
// Get matching ShareRules for this task
|
||||
const matchingRules = () => {
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
return store.shareRules.filter(rule => {
|
||||
if (rule.ownerId !== currentUserId) return false;
|
||||
if (rule.type === 'all') return true;
|
||||
if (rule.type === 'tag' && props.tags.includes(rule.tagName!)) return true;
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
const getUserName = (userId: string) => {
|
||||
return users().find(u => u.id === userId)?.name || userId;
|
||||
};
|
||||
|
||||
// Fetch users on mount
|
||||
createEffect(async () => {
|
||||
try {
|
||||
const records = await pb.collection('users').getFullList({
|
||||
fields: 'id,name'
|
||||
});
|
||||
setUsers(records.map(r => ({ id: r.id, name: r.name || r.email || r.id })));
|
||||
} catch (err) {
|
||||
console.error("Failed to load users:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const availableUsers = () => {
|
||||
const sharedUserIds = props.sharedWith.map(s => s.userId);
|
||||
const currentUserId = pb.authStore.model?.id;
|
||||
return users().filter(u => !sharedUserIds.includes(u.id) && u.id !== currentUserId);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="flex gap-1 mb-2">
|
||||
<Select<{ id: string; name: string }>
|
||||
value={users().find(u => u.id === selectedUserId()) || null}
|
||||
onChange={(user) => setSelectedUserId(user?.id || "")}
|
||||
options={availableUsers()}
|
||||
optionValue="id"
|
||||
optionTextValue="name"
|
||||
placeholder={loading() ? "Loading..." : "Select user..."}
|
||||
itemComponent={(itemProps: any) => (
|
||||
<SelectItem item={itemProps.item}>{itemProps.item.rawValue.name}</SelectItem>
|
||||
)}
|
||||
>
|
||||
<SelectTrigger class="flex-1 h-8 text-xs">
|
||||
<SelectValue<{ id: string; name: string }>>
|
||||
{(state) => state.selectedOption()?.name || "Select user..."}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
disabled={!selectedUserId()}
|
||||
onClick={async () => {
|
||||
if (selectedUserId()) {
|
||||
await shareTask(props.taskId, selectedUserId(), 'edit');
|
||||
setSelectedUserId("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Share2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
<For each={props.sharedWith}>
|
||||
{(share) => (
|
||||
<div class="flex items-center justify-between py-1 px-2 rounded-lg bg-muted/30 mb-1">
|
||||
<span class="text-xs truncate flex-1">{getUserName(share.userId)}</span>
|
||||
<div class="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-6 w-6 hover:bg-amber-500/10 hover:text-amber-600"
|
||||
title="Split - Give them an independent copy"
|
||||
onClick={() => splitTask(props.taskId, share.userId)}
|
||||
>
|
||||
<GitBranch size={12} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-6 w-6 hover:bg-destructive/10 hover:text-destructive"
|
||||
title="Revoke access"
|
||||
onClick={() => revokeShare(props.taskId, share.userId)}
|
||||
>
|
||||
<UserMinus size={12} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
{/* ShareRule-based sharing */}
|
||||
{matchingRules().length > 0 && (
|
||||
<div class="mt-3 pt-3 border-t border-border/30">
|
||||
<div class="text-[9px] font-bold uppercase tracking-widest text-muted-foreground/40 mb-2 px-1">Automatic Rule Shares</div>
|
||||
<For each={matchingRules()}>
|
||||
{(rule) => (
|
||||
<div class="flex items-center gap-2 py-1.5 px-2 rounded-lg bg-muted/10 mb-1 border border-border/5">
|
||||
<div class="shrink-0 text-muted-foreground/40">
|
||||
{rule.type === 'tag' ? <Tag size={10} /> : <Settings size={10} />}
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<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">
|
||||
{rule.type === 'all' ? 'All Tasks Rule' : `Matched Tag: ${rule.tagName}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user