clipper(web): fix tags not assigned to clip

apps/web/src/utils/web-extension-server.ts

@@ -118,19 +118,16 @@ export class WebExtensionServer implements Server {
       content: { type: "tiptap", data: content }
     });
 
-    if (id && clip.tags) {
-      for (const id of clip.tags) {
-        if (!(await db.tags.exists(id))) continue;
-        await db.relations.add({ id: id, type: "tag" }, { id, type: "note" });
-      }
-    }
-
     if (clip.refs && id && !clip.note) {
       for (const ref of clip.refs) {
         switch (ref.type) {
           case "notebook":
+            if (!(await db.notebooks.exists(ref.id))) continue;
             await db.notes.addToNotebook(ref.id, id);
             break;
+          case "tag":
+            if (!(await db.tags.exists(ref.id))) continue;
+            await db.relations.add(ref, { id, type: "note" });
         }
       }
     }

extensions/web-clipper/src/common/bridge.ts

@@ -44,17 +44,15 @@ export interface Gateway {
   connect(): ClientMetadata;
 }
 
-type SelectedTopicReference = ItemReference & {
-  type: "topic";
-  parentId: string;
-};
-
 type SelectedNotebookReference = ItemReference & {
   type: "notebook";
 };
+type SelectedTagReference = ItemReference & {
+  type: "tag";
+};
 
 export type SelectedReference =
-  | SelectedTopicReference
+  | SelectedTagReference
   | SelectedNotebookReference;
 
 export type Clip = {
@@ -66,7 +64,6 @@ export type Clip = {
   width?: number;
   height?: number;
   pageTitle?: string;
-  tags?: string[];
   note?: ItemReference;
   refs?: SelectedReference[];
 };

extensions/web-clipper/src/components/notebook-picker/index.tsx

@@ -19,11 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useState } from "react";
 import { Flex } from "@theme-ui/components";
 import { FilteredList } from "../filtered-list";
-import {
-  NotebookReference,
-  ItemReference,
-  SelectedReference
-} from "../../common/bridge";
+import { NotebookReference, SelectedReference } from "../../common/bridge";
 import { Icons } from "../icons";
 import { useAppStore } from "../../stores/app-store";
 import { Picker } from "../picker";
@@ -66,7 +62,7 @@ export const NotebookPicker = (props: NotebookPickerProps) => {
               <InlineTag
                 key={item.id}
                 title={item.title}
-                icon={item.type === "topic" ? Icons.topic : Icons.notebook}
+                icon={Icons.notebook}
                 onClick={() =>
                   setSelectedItems((items) => {
                     const copy = items.slice();
@@ -105,14 +101,6 @@ export const NotebookPicker = (props: NotebookPickerProps) => {
           renderItem={(item) => (
             <Notebook
               notebook={item}
-              isTopicSelected={(topic) =>
-                !!selectedItems.find(
-                  (n) =>
-                    n.id === topic.id &&
-                    n.type === "topic" &&
-                    n.parentId === item.id
-                )
-              }
               isSelected={
                 !!selectedItems.find(
                   (n) => n.id === item.id && n.type === "notebook"
@@ -144,10 +132,9 @@ type NotebookProps = {
   notebook: NotebookReference;
   isSelected: boolean;
   onSelected: (notebook: SelectedReference) => void;
-  isTopicSelected: (topic: ItemReference) => boolean;
 };
 function Notebook(props: NotebookProps) {
-  const { notebook, isSelected, onSelected, isTopicSelected } = props;
+  const { notebook, isSelected, onSelected } = props;
 
   return (
     <Flex

extensions/web-clipper/src/components/tag-picker/index.tsx

@@ -24,25 +24,22 @@ import { useAppStore } from "../../stores/app-store";
 import { Picker } from "../picker";
 import { InlineTag } from "../inline-tag";
 import { CheckListItem } from "../check-list-item";
+import { SelectedReference } from "../../common/bridge";
 
 type TagPickerProps = {
-  selectedTags: string[];
-  onSelected: (tags: string[]) => void;
+  selectedTags: SelectedReference[];
+  onSelected: (tags: SelectedReference[]) => void;
 };
 export const TagPicker = (props: TagPickerProps) => {
-  const { onSelected } = props;
+  const { selectedTags, onSelected } = props;
 
   const [modalVisible, setModalVisible] = useState(false);
-  const [selectedTags, setSelectedTags] = useState<string[]>(
-    props.selectedTags || []
-  );
 
   const close = () => {
     setModalVisible(false);
   };
 
   const open = () => {
-    setSelectedTags(props.selectedTags || []);
     setModalVisible(true);
   };
 
@@ -57,20 +54,20 @@ export const TagPicker = (props: TagPickerProps) => {
           gap: 1
         }}
       >
-        {props.selectedTags.length
-          ? props.selectedTags.map((tag) => (
+        {selectedTags.length
+          ? selectedTags.map((tag) => (
               <InlineTag
-                key={tag}
+                key={tag.id}
                 icon={Icons.tag}
-                title={tag}
+                title={tag.title}
                 onClick={() => {
-                  setSelectedTags((items) => {
-                    const copy = items.slice();
-                    const index = copy.indexOf(tag);
-                    if (index > -1) copy.splice(index, 1);
-                    onSelected(copy);
-                    return copy;
-                  });
+                  const copy = selectedTags.slice();
+                  const index = copy.findIndex(
+                    (c) => c.type === "tag" && c.id === tag.id
+                  );
+                  if (index <= -1) return;
+                  copy.splice(index, 1);
+                  onSelected(copy);
                 }}
               />
             ))
@@ -102,18 +99,19 @@ export const TagPicker = (props: TagPickerProps) => {
             <CheckListItem
               title={`#${tag.title}`}
               onSelected={() => {
-                setSelectedTags((items) => {
-                  const copy = items.slice();
-                  const index = copy.indexOf(tag.title);
-                  if (index > -1) {
-                    copy.splice(index, 1);
-                  } else {
-                    copy.push(tag.title);
-                  }
-                  return copy;
-                });
+                const copy = selectedTags.slice();
+                const index = copy.findIndex(
+                  (c) => c.type === "tag" && c.id === tag.id
+                );
+                if (index <= -1) copy.push({ ...tag, type: "tag" });
+                else copy.splice(index, 1);
+                onSelected(copy);
               }}
-              isSelected={selectedTags.indexOf(tag.title) > -1}
+              isSelected={
+                selectedTags.findIndex(
+                  (s) => s.type === "tag" && s.id === tag.id
+                ) > -1
+              }
             />
           )}
         />

extensions/web-clipper/src/views/main.tsx

@@ -110,7 +110,6 @@ export function Main() {
   const [isClipping, setIsClipping] = useState(false);
   const [note, setNote] = usePersistentState<ItemReference>("note");
   const [refs, setRefs] = usePersistentState<SelectedReference[]>("refs", []);
-  const [tags, setTags] = usePersistentState<string[]>("tags", []);
   const [clipData, setClipData] = useState<ClipData>();
   const pageTitle = useRef<string>();
 
@@ -374,7 +373,7 @@ export function Main() {
           Organization
         </Text>
 
-        {refs?.length || tags?.length ? null : (
+        {refs?.length ? null : (
           <NotePicker
             selectedNote={note}
             onSelected={(note) => setNote(note)}
@@ -382,19 +381,19 @@ export function Main() {
         )}
         {note ? null : (
           <>
-            {refs?.length || tags?.length ? null : (
+            {refs?.length ? null : (
               <Text variant="subBody" sx={{ my: 1, textAlign: "center" }}>
                 — or —
               </Text>
             )}
             <NotebookPicker
-              selectedItems={refs || []}
+              selectedItems={refs?.filter((r) => r.type === "notebook") || []}
               onSelected={(items) => setRefs(items)}
             />
             <Box sx={{ mt: 1 }} />
             <TagPicker
-              selectedTags={tags || []}
-              onSelected={(tags) => setTags(tags)}
+              selectedTags={refs?.filter((r) => r.type === "tag") || []}
+              onSelected={(tags) => setRefs(tags)}
             />
           </>
         )}
@@ -415,7 +414,6 @@ export function Main() {
               title,
               area: clipArea,
               mode: clipMode,
-              tags,
               note,
               refs,
               pageTitle: pageTitle.current,