From 2c292db0fcf0409879ea524c5435aec6d880b11b Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Wed, 21 May 2025 23:27:03 +0100
Subject: [PATCH] fix link unreachable error not handled properly

---
 packages/web/src/api.ts                                |  2 +-
 packages/web/src/app/bookmarks/-bookmark-list.tsx      | 10 +++++++++-
 .../src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx |  4 ++--
 packages/web/src/app/bookmarks/index.tsx               |  9 ++++++---
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/api.ts b/packages/web/src/api.ts
index 788ba5a..a617a1f 100644
--- a/packages/web/src/api.ts
+++ b/packages/web/src/api.ts
@@ -4,7 +4,7 @@ import { useEffect } from "react"
 
 enum ApiErrorCode {
 	BadRequestBody = "BadRequestBody",
-	WebsiteUnreachable = "WebsiteUnreachable",
+	LinkUnreachable = "LinkUnreachable",
 	UnsupportedWebsite = "UnsupportedWebsite",
 }
 
diff --git a/packages/web/src/app/bookmarks/-bookmark-list.tsx b/packages/web/src/app/bookmarks/-bookmark-list.tsx
index 99578fc..176b61e 100644
--- a/packages/web/src/app/bookmarks/-bookmark-list.tsx
+++ b/packages/web/src/app/bookmarks/-bookmark-list.tsx
@@ -339,7 +339,15 @@ function BookmarkTagList({ bookmark }: { bookmark: Bookmark }) {
 		case "pending":
 			return <LoadingSpinner />
 		case "success":
-			return <p className="my-2 text-sm">{tags.map((tag) => `#${tag.name}`).join(" ")}</p>
+			return (
+				<div className="flex flex-row flex-wrap space-x-2">
+					{tags.map((tag) => (
+						<Link key={tag.id} to={`/bookmarks?tags=${tag.name}`}>
+							#{tag.name}
+						</Link>
+					))}
+				</div>
+			)
 		case "error":
 			return null
 	}
diff --git a/packages/web/src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx b/packages/web/src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx
index ffb1a2f..fda45ef 100644
--- a/packages/web/src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx
+++ b/packages/web/src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx
@@ -40,7 +40,7 @@ function AddBookmarkDialog() {
 	const getTags = useAtomCallback(
 		useCallback((get) => {
 			const value = get(tagsInputValueAtom)
-			return value.split(" ")
+			return value.trim().split(" ")
 		}, []),
 	)
 
@@ -77,7 +77,7 @@ function AddBookmarkDialog() {
 				await createBookmarkMutation.mutateAsync({ url, tags: getTags(), force: isWebsiteUnreachable })
 				setActiveDialog(ActiveDialog.None)
 			} catch (error) {
-				if (error instanceof BadRequestError && error.code === ApiErrorCode.WebsiteUnreachable) {
+				if (error instanceof BadRequestError && error.code === ApiErrorCode.LinkUnreachable) {
 					setIsWebsiteUnreachable(true)
 				} else {
 					setIsWebsiteUnreachable(false)
diff --git a/packages/web/src/app/bookmarks/index.tsx b/packages/web/src/app/bookmarks/index.tsx
index 844eb95..f72e15b 100644
--- a/packages/web/src/app/bookmarks/index.tsx
+++ b/packages/web/src/app/bookmarks/index.tsx
@@ -35,9 +35,12 @@ function BookmarkListPane() {
 }
 
 function BookmarkListContainer() {
-	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
-		fetchApi("/bookmarks").then((res) => res.json()),
-	)
+	const searchParams = Route.useSearch()
+	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () => {
+		const params = new URLSearchParams(searchParams)
+		console.log("params", params)
+		return fetchApi(params.size > 0 ? `/bookmarks?${params.toString()}` : "/bookmarks").then((res) => res.json())
+	})
 	const handleBookmarkListItemAction = useBookmarkPageStore((state) => state.handleBookmarkListItemAction)
 
 	switch (status) {