fix: add 'untagged' tag to bookmarks without tags on creation

frontend/components/Bookmark/BookmarkCard.tsx

@@ -136,9 +136,12 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
   useEffect(() => {
     if (bookmark) {
       const tagList: string[] = [];
-      bookmark.tags.forEach((tag: Tag) => {
-        tagList.push(tag.title);
-      });
+      if (bookmark.tags.length == 0) tagList.push("untagged");
+      else {
+        bookmark.tags.forEach((tag: Tag) => {
+          tagList.push(tag.title);
+        });
+      }
       setStrTags(tagList);
     }
   }, [bookmark]);
@@ -211,7 +214,11 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
       );
     }
     api.deleteTagById(bookmark.id, tagId);
-    let titles = currentBookmark.current.tags.map((t) => t.title); // just the titles display
+    // if there are no tags to display, display "untagged", else display the tags for the bookmark
+    let titles =
+      currentBookmark.current.tags.length !== 0
+        ? currentBookmark.current.tags.map((t) => t.title)
+        : ["untagged"]; // just the titles display
     setStrTags(titles);
 
     // update the sidebar.
@@ -227,7 +234,10 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
   const onPushTag = (tag: string) =>
     addTagToBookmark(bookmark, tag).then((action) => {
       dispatch(action);
-      setStrTags([...strTags, tag]);
+      setStrTags((prev) => {
+        const cleaned = prev.filter((t) => t != "untagged");
+        return [...cleaned, tag];
+      });
       currentBookmark.current.tags.push({ id: action.id, title: action.title });
     });
 

frontend/components/Bookmark/NewBookmarkCard.tsx

@@ -112,6 +112,7 @@ export default function NewBookmarkCard() {
       // FIXME
       tags.push({ title: tagInput, id: -1 });
     }
+
     let newBkmk: Bookmark = {
       id: -1,
       title: submittedBmk.title || submittedBmk.url,

frontend/components/Tags/TagList.tsx

@@ -9,12 +9,19 @@ import itemStyle from "./tag-list-item.module.scss";
 import menuStyle from "styles/tag.module.scss";
 import { useSelectedTags } from "@/contexts/SelectedContext";
 import { useScreenSize } from "@/contexts/ScreenSizeContext";
+import { useBookmarks } from "@/contexts/BookmarkContext"; // import bookmarks for the "untagged" tag
+
 const TagList = () => {
   const userAuth = useAuth();
   const tagMap = useTags();
   const [loading, setLoading] = useState(false);
   const { selected, setSelected } = useSelectedTags();
   const isPC = useScreenSize();
+  const bookmark = useBookmarks();
+  // check if at least one bookmark has no tags
+  const hasUntaggedBookmark = bookmark.fetchedBookmarks.some(
+    (t) => t.tags.length === 0,
+  );
   useEffect(() => {
     if (userAuth && tagMap.size == 0) {
       setLoading(true);
@@ -51,6 +58,22 @@ const TagList = () => {
   }
 
   let groupItems: any = [];
+  // adds "untagged" tag to the tag list
+  if (hasUntaggedBookmark) {
+    groupItems.push(
+      <ListGroup.Item key={"untagged-item"} className={`${itemStyle.item}`}>
+        <button
+          onClick={(event) => selectTag(event, "untagged")}
+          className={`d-flex btn ${itemStyle.btn} justify-content-between align-items-start`}
+        >
+          untagged
+          <Badge bg="primary" pill>
+            {bookmark.fetchedBookmarks.filter((b) => b.tags.length == 0).length}
+          </Badge>
+        </button>
+      </ListGroup.Item>,
+    );
+  }
   tagMap.forEach((tagCnt) => {
     groupItems.push(
       <ListGroup.Item