diff options
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/TagsEditor.tsx | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx index d50acc60..4468b28a 100644 --- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx +++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx @@ -1,4 +1,5 @@ import type { ActionMeta } from "react-select"; +import { useState } from "react"; import { useClientConfig } from "@/lib/clientConfig"; import { api } from "@/lib/trpc"; import { cn } from "@/lib/utils"; @@ -17,7 +18,7 @@ interface EditableTag { } export function TagsEditor({ - tags, + tags: _tags, onAttach, onDetach, }: { @@ -27,6 +28,8 @@ export function TagsEditor({ }) { const demoMode = !!useClientConfig().demoMode; + const [optimisticTags, setOptimisticTags] = useState<ZBookmarkTags[]>(_tags); + const { data: existingTags, isLoading: isExistingTagsLoading } = api.tags.list.useQuery(); @@ -40,6 +43,9 @@ export function TagsEditor({ case "pop-value": case "remove-value": { if (actionMeta.removedValue.value) { + setOptimisticTags((prev) => + prev.filter((t) => t.id != actionMeta.removedValue.value), + ); onDetach({ tagId: actionMeta.removedValue.value, tagName: actionMeta.removedValue.label, @@ -48,11 +54,27 @@ export function TagsEditor({ break; } case "create-option": { + setOptimisticTags((prev) => [ + ...prev, + { + id: "", + name: actionMeta.option.label, + attachedBy: "human" as const, + }, + ]); onAttach({ tagName: actionMeta.option.label }); break; } case "select-option": { if (actionMeta.option) { + setOptimisticTags((prev) => [ + ...prev, + { + id: actionMeta.option?.value ?? "", + name: actionMeta.option!.label, + attachedBy: "human" as const, + }, + ]); onAttach({ tagName: actionMeta.option.label, tagId: actionMeta.option?.value, @@ -74,7 +96,7 @@ export function TagsEditor({ attachedBy: "human" as const, })) ?? [] } - value={tags.map((t) => ({ + value={optimisticTags.map((t) => ({ label: t.name, value: t.id, attachedBy: t.attachedBy, |