implement bookmark tagging

2025-05-21 13:18:16 +01:00
parent f048dee6e2
commit b0d458e5ca
20 changed files with 826 additions and 362 deletions
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -9,6 +9,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@floating-ui/react-dom": "^2.1.2",
 		"@markone/core": "workspace:*",
 		"@tailwindcss/vite": "^4.1.5",
 		"@tanstack/react-query": "^5.75.2",
--- a/packages/web/src/api.ts
+++ b/packages/web/src/api.ts
@@ -18,13 +18,16 @@ class BadRequestError extends Error {
 }
 class InternalError extends Error {}
 class UnauthenticatedError extends Error {}
+class NotFoundError extends Error {}

 interface ErrorBody {
 	code: string
 	message?: string
 }

-type QueryKey = ["bookmarks", ...ReadonlyArray<unknown>] | ["bookmarks", string, ...ReadonlyArray<unknown>]
+type QueryKey =
+	| ["bookmarks" | "tags", ...ReadonlyArray<unknown>]
+	| ["bookmarks" | "tags", string, ...ReadonlyArray<unknown>]

 async function fetchApi(route: string, init?: RequestInit): Promise<Response> {
 	const response = await fetch(`${import.meta.env.VITE_API_URL}/api${route}`, {
@@ -42,6 +45,8 @@ async function fetchApi(route: string, init?: RequestInit): Promise<Response> {
 		case 401: {
 			throw new UnauthenticatedError()
 		}
+		case 404:
+			throw new NotFoundError()
 		default:
 			throw new InternalError()
 	}
@@ -50,8 +55,8 @@ async function fetchApi(route: string, init?: RequestInit): Promise<Response> {
 function useAuthenticatedQuery<TData>(queryKey: QueryKey, fn: () => Promise<TData>) {
 	const query = useQuery({
 		queryKey,
-		queryFn: () => fn(),
-		retry: (_, error) => !(error instanceof UnauthenticatedError),
+		queryFn: fn,
+		retry: false,
 	})

 	const navigate = useNavigate()
@@ -76,6 +81,7 @@ export {
 	BadRequestError,
 	InternalError,
 	UnauthenticatedError,
+	NotFoundError,
 	fetchApi,
 	useAuthenticatedQuery,
 	mutationOptions,
--- a/packages/web/src/app/bookmarks.tsx
+++ b/packages/web/src/app/bookmarks.tsx
@@ -1,14 +1,12 @@
 import { Outlet, createFileRoute } from "@tanstack/react-router"
-import { useState, useId, useRef, useEffect } from "react"
-import { BadRequestError, ApiErrorCode } from "~/api"
-import { useCreateBookmark, useDeleteBookmark } from "~/bookmark/api"
+import { useEffect } from "react"
+import { useDeleteBookmark } from "~/bookmark/api"
 import { Button } from "~/components/button"
-import { Dialog, DialogTitle, DialogBody, DialogActionRow } from "~/components/dialog"
-import { FormField } from "~/components/form-field"
+import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
 import { LoadingSpinner } from "~/components/loading-spinner"
-import { Message, MessageVariant } from "~/components/message"
 import { useMnemonics } from "~/hooks/use-mnemonics"
-import { useBookmarkPageStore, ActiveDialog, LayoutMode } from "./bookmarks/-store"
+import { AddBookmarkDialog } from "./bookmarks/-dialogs/add-bookmark-dialog"
+import { ActiveDialog, LayoutMode, useBookmarkPageStore } from "./bookmarks/-store"

 export const Route = createFileRoute("/bookmarks")({
 	component: RouteComponent,
@@ -56,116 +54,10 @@ function PageDialog() {
 	}
 }

-function AddBookmarkDialog() {
-	const [isWebsiteUnreachable, setIsWebsiteUnreachable] = useState(false)
-	const createBookmarkMutation = useCreateBookmark()
-	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
-	const formId = useId()
-	const linkInputRef = useRef<HTMLInputElement | null>(null)
-
-	useMnemonics(
-		{
-			c: () => {
-				if (linkInputRef.current !== document.activeElement) {
-					cancel()
-				}
-			},
-			Escape: () => {
-				linkInputRef.current?.blur()
-			},
-		},
-		{ ignore: () => false },
-	)
-
-	useEffect(() => {
-		setTimeout(() => {
-			if (linkInputRef.current) {
-				linkInputRef.current.focus()
-			}
-		}, 0)
-	}, [])
-
-	async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
-		event.preventDefault()
-
-		const formData = new FormData(event.currentTarget)
-		const url = formData.get("link")
-		if (url && typeof url === "string") {
-			try {
-				await createBookmarkMutation.mutateAsync({ url, force: isWebsiteUnreachable })
-				setActiveDialog(ActiveDialog.None)
-			} catch (error) {
-				if (error instanceof BadRequestError && error.code === ApiErrorCode.WebsiteUnreachable) {
-					setIsWebsiteUnreachable(true)
-				} else {
-					setIsWebsiteUnreachable(false)
-				}
-			}
-		}
-	}
-
-	function cancel() {
-		setActiveDialog(ActiveDialog.None)
-	}
-
-	function message() {
-		if (createBookmarkMutation.isPending) {
-			return (
-				<p>
-					Loading <LoadingSpinner />
-				</p>
-			)
-		}
-		if (isWebsiteUnreachable) {
-			return (
-				<Message variant={MessageVariant.Warning} className="px-4">
-					The link does not seem to be reachable. Click "SAVE" to save anyways.
-				</Message>
-			)
-		}
-		if (createBookmarkMutation.status === "error") {
-			return (
-				<Message variant={MessageVariant.Error} className="px-4">
-					An error occurred when saving bookmark
-				</Message>
-			)
-		}
-		return null
-	}
-
-	return (
-		<Dialog>
-			<DialogTitle>NEW BOOKMARK</DialogTitle>
-			<DialogBody>
-				{message()}
-				<form id={formId} className="px-8" onSubmit={onSubmit}>
-					<FormField
-						ref={linkInputRef}
-						type="text"
-						name="link"
-						label="LINK"
-						className="w-full"
-						labelClassName="bg-stone-300 dark:bg-stone-800"
-					/>
-				</form>
-			</DialogBody>
-			<DialogActionRow>
-				<Button type="submit" disabled={createBookmarkMutation.isPending} form={formId}>
-					SAVE
-				</Button>
-				<Button type="button" disabled={createBookmarkMutation.isPending} onClick={cancel}>
-					<span className="underline">C</span>ANCEL
-				</Button>
-			</DialogActionRow>
-		</Dialog>
-	)
-}
-
 function DeleteBookmarkDialog() {
 	// biome-ignore lint/style/noNonNullAssertion: this cannot be null when delete bookmark dialog is visible
 	const bookmark = useBookmarkPageStore((state) => state.bookmarkToBeDeleted!)
 	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
-	const markBookmarkForDeletion = useBookmarkPageStore((state) => state.markBookmarkForDeletion)
 	const deleteBookmarkMutation = useDeleteBookmark()

 	useMnemonics(
@@ -180,7 +72,6 @@ function DeleteBookmarkDialog() {
 		try {
 			await deleteBookmarkMutation.mutateAsync({ bookmark })
 			setActiveDialog(ActiveDialog.None)
-			markBookmarkForDeletion(null)
 		} catch (error) {
 			console.error(error)
 		}
@@ -188,7 +79,6 @@ function DeleteBookmarkDialog() {

 	function cancel() {
 		setActiveDialog(ActiveDialog.None)
-		markBookmarkForDeletion(null)
 	}

 	function body() {
--- a/packages/web/src/app/bookmarks/$bookmarkId.tsx
+++ b/packages/web/src/app/bookmarks/$bookmarkId.tsx
@@ -1,16 +1,16 @@
+import type { Bookmark } from "@markone/core/bookmark"
 import { createFileRoute, useCanGoBack, useNavigate, useRouter } from "@tanstack/react-router"
-import { LayoutMode, useBookmarkPageStore } from "./-store"
 import clsx from "clsx"
-import { fetchApi, useAuthenticatedQuery } from "~/api"
-import { LoadingSpinner } from "~/components/loading-spinner"
-import { BookmarkList } from "./-bookmark-list"
-import { useCallback, useEffect, useRef } from "react"
-import type { LinkBookmark } from "@markone/core/bookmark"
-import { ActionBar, BookmarkListActionBar } from "./-action-bar"
-import { Button, LinkButton } from "~/components/button"
-import { useMnemonics } from "~/hooks/use-mnemonics"
-import { useBookmark } from "~/bookmark/api"
 import { atom, useAtom } from "jotai"
+import { useCallback, useEffect, useRef } from "react"
+import { fetchApi, useAuthenticatedQuery } from "~/api"
+import { useBookmark } from "~/bookmark/api"
+import { Button, LinkButton } from "~/components/button"
+import { LoadingSpinner } from "~/components/loading-spinner"
+import { useMnemonics } from "~/hooks/use-mnemonics"
+import { ActionBar, BookmarkListActionBar } from "./-action-bar"
+import { BookmarkList } from "./-bookmark-list"
+import { LayoutMode, useBookmarkPageStore } from "./-store"

 export const Route = createFileRoute("/bookmarks/$bookmarkId")({
 	component: RouteComponent,
@@ -64,7 +64,7 @@ function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {

 function BookmarkListSidebar() {
 	return (
-		<div className="relative flex flex-col py-16 w-full h-screen relative">
+		<div className="relative flex flex-col py-16 w-full h-screen">
 			<header className="mb-4 text-start">
 				<h1 className="font-bold text-start mb-4">
 					<span className="invisible">&nbsp;&gt;&nbsp;</span>
@@ -86,7 +86,7 @@ function BookmarkListContainer() {
 	const handleBookmarkListItemAction = useBookmarkPageStore((state) => state.handleBookmarkListItemAction)

 	const onSelectedBookmarkChange = useCallback(
-		(bookmark: LinkBookmark) => {
+		(bookmark: Bookmark) => {
 			navigate({ to: `/bookmarks/${bookmark.id}` })
 		},
 		[navigate],
@@ -118,19 +118,29 @@ function BookmarkListContainer() {

 function BookmarkPreview() {
 	const { bookmarkId } = Route.useParams()
-	const { data: previewHtml, status: previewQueryStatus } = useAuthenticatedQuery(
-		["bookmarks", `${bookmarkId}.html`],
-		() =>
-			fetchApi(`/bookmarks/${bookmarkId}`, {
-				headers: {
-					Accept: "text/html",
-				},
-			}).then((res) => res.text()),
+	const {
+		data: previewHtml,
+		status: previewQueryStatus,
+		error,
+	} = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () =>
+		fetchApi(`/bookmarks/${bookmarkId}`, {
+			headers: {
+				Accept: "text/html",
+			},
+		}).then((res) => res.text()),
 	)
 	const { data: bookmark, status: bookmarkQueryStatus } = useBookmark(bookmarkId)
 	const [_titleBarHeight] = useAtom(titleBarHeight)
 	const [_actionBarHeight] = useAtom(actionBarHeight)

+	if (previewQueryStatus === "error") {
+		return (
+			<div className="w-full h-full flex items-center justify-center">
+				<p>Preview not available</p>
+			</div>
+		)
+	}
+
 	if (previewQueryStatus === "success" && bookmarkQueryStatus === "success") {
 		return (
 			<iframe
@@ -161,7 +171,7 @@ function BookmarkPreviewTitleBar() {
 	const { data: bookmark, status } = useBookmark(bookmarkId)
 	const [, _setTitleBarHeight] = useAtom(setTitleBarHeight)
 	const headerRef = useRef<HTMLElement | null>(null)
-	const isHidden = status !== "success" || layoutMode !== LayoutMode.Popup || bookmark.kind !== "link"
+	const isHidden = status !== "success" || layoutMode !== LayoutMode.Popup

 	useEffect(() => {
 		if (headerRef.current) {
@@ -230,11 +240,9 @@ function BookmarkPreviewActionBar() {
 			}}
 			className="absolute bottom-0 left-0 right-0"
 		>
-			{bookmark.kind === "link" ? (
-				<LinkButton ref={linkRef} to={bookmark.url}>
-					<span className="underline">O</span>PEN LINK
-				</LinkButton>
-			) : null}
+			<LinkButton ref={linkRef} to={bookmark.url}>
+				<span className="underline">O</span>PEN LINK
+			</LinkButton>
 			<Button onClick={close}>
 				<span className="underline">C</span>LOSE
 			</Button>
--- a/packages/web/src/app/bookmarks/-bookmark-list.tsx
+++ b/packages/web/src/app/bookmarks/-bookmark-list.tsx
@@ -1,13 +1,15 @@
-import type { LinkBookmark } from "@markone/core/bookmark"
+import type { Bookmark } from "@markone/core/bookmark"
 import { Link } from "@tanstack/react-router"
-import { createStore, useStore } from "zustand"
-import { useEffect, useCallback, createContext, useRef, memo, useContext } from "react"
-import { useMnemonics } from "~/hooks/use-mnemonics"
-import { useBookmarkPageStore, ActiveDialog } from "./-store"
-import { Button } from "~/components/button"
 import clsx from "clsx"
+import { createContext, memo, useCallback, useContext, useEffect, useRef } from "react"
 import { twMerge } from "tailwind-merge"
+import { createStore, useStore } from "zustand"
 import { subscribeWithSelector } from "zustand/middleware"
+import { Button } from "~/components/button"
+import { useMnemonics } from "~/hooks/use-mnemonics"
+import { ActiveDialog, useBookmarkPageStore } from "./-store"
+import { useBookmarkTags } from "~/bookmark/api"
+import { LoadingSpinner } from "~/components/loading-spinner"

 enum BookmarkListItemAction {
 	Open = "Open",
@@ -15,34 +17,34 @@ enum BookmarkListItemAction {
 	Delete = "Delete",
 }

-type SelectionChangeCallback = (bookmark: LinkBookmark) => void
-type ItemActionCallback = (bookmark: LinkBookmark, action: BookmarkListItemAction) => void
+type SelectionChangeCallback = (bookmark: Bookmark) => void
+type ItemActionCallback = (bookmark: Bookmark, action: BookmarkListItemAction) => void

 interface BookmarkListProps {
-	bookmarks: LinkBookmark[]
+	bookmarks: Bookmark[]
 	selectedBookmarkId?: string
 	alwaysExpandItem: boolean
 	onSelectionChange?: SelectionChangeCallback
-	onItemAction: (bookmark: LinkBookmark, action: BookmarkListItemAction) => void
+	onItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void
 	className?: string
 }

 interface CreateStoreOptions {
-	bookmarks: LinkBookmark[]
+	bookmarks: Bookmark[]
 	selectedBookmarkId?: string
 	alwaysExpandItem: boolean
 	onItemAction: ItemActionCallback
 }

 interface BookmarkListState {
-	bookmarks: LinkBookmark[]
+	bookmarks: Bookmark[]
 	selectedIndex: number
 	selectedBookmarkId: string
 	alwaysExpandItem: boolean
 	isItemExpanded: boolean

 	onItemAction: ItemActionCallback
-	setBookmarks: (bookmarks: LinkBookmark[]) => void
+	setBookmarks: (bookmarks: Bookmark[]) => void
 	setSelectedIndex: (index: number) => void
 	setSelectedBookmarkId: (id: string) => void
 	setIsItemExpanded: (expanded: boolean) => void
@@ -58,17 +60,22 @@ function createBookmarkListStore({
 	alwaysExpandItem,
 	onItemAction,
 }: CreateStoreOptions) {
+	let _selectedBookmarkId = selectedBookmarkId
+	if (!_selectedBookmarkId && bookmarks.length > 0) {
+		_selectedBookmarkId = bookmarks[0].id
+	}
+
 	return createStore<BookmarkListState>()(
 		subscribeWithSelector((set) => ({
 			bookmarks,
 			alwaysExpandItem,
 			selectedIndex: selectedBookmarkId ? bookmarks.findIndex((bookmark) => bookmark.id === selectedBookmarkId) : 0,
-			selectedBookmarkId: selectedBookmarkId ?? bookmarks[0].id,
+			selectedBookmarkId: _selectedBookmarkId ?? "",
 			isItemExpanded: false,

 			onItemAction,

-			setBookmarks(bookmarks: LinkBookmark[]) {
+			setBookmarks(bookmarks: Bookmark[]) {
 				set({ bookmarks })
 			},

@@ -113,6 +120,12 @@ function BookmarkList({

 	const setSelectedBookmarkId = useStore(storeRef.current, (state) => state.setSelectedBookmarkId)

+	useEffect(() => {
+		// biome-ignore lint/style/noNonNullAssertion: storeRef.current is already set above, so cant be null
+		const store = storeRef.current!
+		store.getState().setBookmarks(bookmarks)
+	}, [bookmarks])
+
 	useEffect(() => {
 		// biome-ignore lint/style/noNonNullAssertion: storeRef.current is already set above, so cant be null
 		const store = storeRef.current!
@@ -230,7 +243,7 @@ function ListContainer() {
 }

 const BookmarkListItem = memo(
-	({ bookmark, index, selected }: { bookmark: LinkBookmark; index: number; selected: boolean }) => {
+	({ bookmark, index, selected }: { bookmark: Bookmark; index: number; selected: boolean }) => {
 		const url = new URL(bookmark.url)
 		const store = useBookmarkListStoreContext()
 		const alwaysExpandItem = useBookmarkListStore((state) => state.alwaysExpandItem)
@@ -279,21 +292,23 @@ const BookmarkListItem = memo(
 					</Link>
 					<p className="opacity-80 text-sm">{url.host}</p>
 					{isBookmarkItemExpanded && selected ? (
-						<div className="flex flex-col space-y-1 md:flex-row md:space-y-0 md:space-x-2 items-end justify-between pt-2">
-							<p className="text-sm">#dev</p>
-							<div className="flex space-x-2">
-								<Button variant="light" className="text-sm">
-									<span>COPY LINK</span>
-								</Button>
-								<Button variant="light" className="text-sm">
-									<span className="underline">E</span>dit
-								</Button>
-								<Button variant="light" className="text-sm" onClick={deleteItem}>
-									<span className="underline">D</span>elete
-								</Button>
-								<span className="-ml-2">&nbsp;</span>
+						<>
+							<BookmarkTagList bookmark={bookmark} />
+							<div className="flex flex-col space-y-1 md:flex-row md:space-y-0 md:space-x-2 items-end justify-between pt-2">
+								<div className="flex space-x-2">
+									<Button variant="light" className="text-sm">
+										<span>COPY LINK</span>
+									</Button>
+									<Button variant="light" className="text-sm">
+										<span className="underline">E</span>dit
+									</Button>
+									<Button variant="light" className="text-sm" onClick={deleteItem}>
+										<span className="underline">D</span>elete
+									</Button>
+									<span className="-ml-2">&nbsp;</span>
+								</div>
 							</div>
-						</div>
+						</>
 					) : null}
 				</div>
 			</li>
@@ -301,4 +316,16 @@ const BookmarkListItem = memo(
 	},
 )

+function BookmarkTagList({ bookmark }: { bookmark: Bookmark }) {
+	const { data: tags, status } = useBookmarkTags(bookmark)
+	switch (status) {
+		case "pending":
+			return <LoadingSpinner />
+		case "success":
+			return <p className="my-2 text-sm">{tags.map((tag) => `#${tag.name}`).join(" ")}</p>
+		case "error":
+			return null
+	}
+}
+
 export { BookmarkList, BookmarkListItemAction }
--- a/packages/web/src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx
+++ b/packages/web/src/app/bookmarks/-dialogs/add-bookmark-dialog.tsx
@@ -0,0 +1,319 @@
+import { autoUpdate, size, useFloating } from "@floating-ui/react-dom"
+import type { BookmarkTag } from "@markone/core/bookmark"
+import clsx from "clsx"
+import { atom, useAtom } from "jotai"
+import { useAtomCallback } from "jotai/utils"
+import { useCallback, useEffect, useId, useRef, useState } from "react"
+import { ApiErrorCode, BadRequestError } from "~/api"
+import { useCreateBookmark, useTags } from "~/bookmark/api"
+import { Button } from "~/components/button"
+import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
+import { FormField } from "~/components/form-field"
+import { LoadingSpinner } from "~/components/loading-spinner"
+import { Message, MessageVariant } from "~/components/message"
+import { useMnemonics } from "~/hooks/use-mnemonics"
+import { ActiveDialog, useBookmarkPageStore } from "../-store"
+
+const tagsInputValueAtom = atom("")
+const appendTagAtom = atom(null, (_, set, update: string) => {
+	set(tagsInputValueAtom, (current) => current + update)
+})
+const lastTagAtom = atom((get) => {
+	const value = get(tagsInputValueAtom)
+	let start = 0
+	for (let i = value.length; i > 0; --i) {
+		if (value.charAt(i) === " ") {
+			start = i + 1
+			break
+		}
+	}
+	return value.slice(start)
+})
+
+function AddBookmarkDialog() {
+	const [isWebsiteUnreachable, setIsWebsiteUnreachable] = useState(false)
+	const createBookmarkMutation = useCreateBookmark()
+	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
+	const formId = useId()
+	const linkInputRef = useRef<HTMLInputElement | null>(null)
+	const getTags = useAtomCallback(
+		useCallback((get) => {
+			const value = get(tagsInputValueAtom)
+			return value.split(" ")
+		}, []),
+	)
+
+	useMnemonics(
+		{
+			c: () => {
+				if (!document.activeElement) {
+					cancel()
+				}
+			},
+			Escape: () => {
+				linkInputRef.current?.blur()
+			},
+		},
+		{ ignore: () => false },
+	)
+
+	useEffect(() => {
+		setTimeout(() => {
+			if (linkInputRef.current) {
+				linkInputRef.current.focus()
+			}
+		}, 0)
+	}, [])
+
+	async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault()
+
+		const formData = new FormData(event.currentTarget)
+		const url = formData.get("link")
+		if (url && typeof url === "string") {
+			try {
+				await createBookmarkMutation.mutateAsync({ url, tags: getTags(), force: isWebsiteUnreachable })
+				setActiveDialog(ActiveDialog.None)
+			} catch (error) {
+				if (error instanceof BadRequestError && error.code === ApiErrorCode.WebsiteUnreachable) {
+					setIsWebsiteUnreachable(true)
+				} else {
+					setIsWebsiteUnreachable(false)
+				}
+			}
+		}
+	}
+
+	function cancel() {
+		setActiveDialog(ActiveDialog.None)
+	}
+
+	function message() {
+		if (createBookmarkMutation.isPending) {
+			return (
+				<p>
+					Loading <LoadingSpinner />
+				</p>
+			)
+		}
+		if (isWebsiteUnreachable) {
+			return (
+				<Message variant={MessageVariant.Warning} className="px-4">
+					The link does not seem to be reachable. Click "SAVE" to save anyways.
+				</Message>
+			)
+		}
+		if (createBookmarkMutation.status === "error") {
+			return (
+				<Message variant={MessageVariant.Error} className="px-4">
+					An error occurred when saving bookmark
+				</Message>
+			)
+		}
+		return null
+	}
+
+	return (
+		<Dialog>
+			<DialogTitle>NEW BOOKMARK</DialogTitle>
+			<DialogBody>
+				{message()}
+				<form id={formId} className="px-8" onSubmit={onSubmit}>
+					<FormField
+						ref={linkInputRef}
+						type="text"
+						name="link"
+						label="LINK"
+						className="w-full"
+						labelClassName="bg-stone-300 dark:bg-stone-800"
+					/>
+					<TagsInput />
+				</form>
+			</DialogBody>
+			<DialogActionRow>
+				<Button type="submit" disabled={createBookmarkMutation.isPending} form={formId}>
+					SAVE
+				</Button>
+				<Button type="button" disabled={createBookmarkMutation.isPending} onClick={cancel}>
+					<span className="underline">C</span>ANCEL
+				</Button>
+			</DialogActionRow>
+		</Dialog>
+	)
+}
+
+function TagsInput() {
+	const [value, setValue] = useAtom(tagsInputValueAtom)
+	const [isInputFocused, setIsInputFocused] = useState(false)
+	const [lastTag] = useAtom(lastTagAtom)
+	const { refs, floatingStyles } = useFloating({
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			size({
+				apply({ rects, elements }) {
+					Object.assign(elements.floating.style, {
+						minWidth: `${rects.reference.width}px`,
+					})
+				},
+			}),
+		],
+		open: isInputFocused && lastTag !== "",
+	})
+
+	return (
+		<>
+			<FormField
+				ref={refs.setReference}
+				type="text"
+				name="tags"
+				label="TAGS"
+				value={value}
+				onChange={(event) => {
+					setValue(event.currentTarget.value)
+				}}
+				className="flex-1"
+				onFocus={() => {
+					setIsInputFocused(true)
+				}}
+				onBlur={() => {
+					setIsInputFocused(false)
+				}}
+				labelClassName="bg-stone-300 dark:bg-stone-800"
+			/>
+			<TagList ref={refs.setFloating} style={floatingStyles} />
+		</>
+	)
+}
+
+function TagList({ ref, style }: { ref: React.Ref<HTMLDivElement>; style: React.CSSProperties }) {
+	const { data: tags, status } = useTags()
+	switch (status) {
+		case "pending":
+			return (
+				<p>
+					Loading <LoadingSpinner />
+				</p>
+			)
+		case "success":
+			return <_TagList ref={ref} style={style} tags={tags} />
+		case "error":
+			return null
+	}
+}
+
+function _TagList({
+	ref,
+	style,
+	tags,
+}: { tags: BookmarkTag[]; ref: React.Ref<HTMLDivElement>; style: React.CSSProperties }) {
+	const [selectedTag, setSelectedTag] = useState<BookmarkTag | null | undefined>(undefined)
+	const [, appendTag] = useAtom(appendTagAtom)
+	const [lastTag] = useAtom(lastTagAtom)
+
+	const filteredTags: BookmarkTag[] = []
+	const listItems: React.ReactElement[] = []
+	let hasExactMatch = false
+	let shouldResetSelection = selectedTag !== null
+	for (const tag of tags) {
+		if (tag.name.startsWith(lastTag)) {
+			if (tag.name.length === lastTag.length) {
+				hasExactMatch = true
+			}
+			if (tag.id === selectedTag?.id) {
+				shouldResetSelection = false
+			}
+			filteredTags.push(tag)
+			listItems.push(
+				<li
+					className={clsx("text-start py-1", {
+						"bg-stone-800 dark:bg-stone-300 text-stone-300 dark:text-stone-800": selectedTag?.id === tag.id,
+					})}
+					key={tag.id}
+				>
+					&nbsp;#{tag.name}
+				</li>,
+			)
+		}
+	}
+	if (hasExactMatch && selectedTag === null) {
+		shouldResetSelection = true
+	}
+
+	useEffect(() => {
+		if (shouldResetSelection) {
+			if (listItems.length === 0) {
+				setSelectedTag(null)
+			} else {
+				setSelectedTag(filteredTags[0])
+			}
+		}
+	}, [shouldResetSelection])
+
+	useMnemonics(
+		{
+			ArrowUp: (event) => {
+				event.preventDefault()
+				if (selectedTag) {
+					const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
+					if (i === 0 || i === filteredTags.length - 1) {
+						setSelectedTag(null)
+					} else if (i === -1) {
+						setSelectedTag(filteredTags[0])
+					} else {
+						setSelectedTag(filteredTags[i + 1])
+					}
+				} else {
+					setSelectedTag(filteredTags.at(-1) ?? null)
+				}
+			},
+			ArrowDown: (event) => {
+				event.preventDefault()
+				if (selectedTag) {
+					const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
+					if (i === filteredTags.length - 1) {
+						setSelectedTag(null)
+					} else {
+						setSelectedTag(filteredTags[i + 1])
+					}
+				} else {
+					setSelectedTag(filteredTags[0])
+				}
+			},
+			Enter: (event) => {
+				if (lastTag) {
+					event.preventDefault()
+					event.stopPropagation()
+					if (selectedTag) {
+						appendTag(`${selectedTag.name.slice(lastTag.length)} `)
+					} else {
+						appendTag(" ")
+					}
+				}
+			},
+		},
+		{ ignore: () => false },
+	)
+
+	if (lastTag === "") {
+		return null
+	}
+
+	return (
+		<div ref={ref} style={style} className="bg-stone-300 dark:bg-stone-800 border-2 mt-1">
+			<ul className="py-2">
+				{listItems}
+				{hasExactMatch ? null : (
+					<li
+						className={clsx("text-start py-1", {
+							"bg-stone-800 dark:bg-stone-300 text-stone-300 dark:text-stone-800": selectedTag === null,
+						})}
+					>
+						&nbsp;{lastTag.includes("#") ? "Tags cannot contain '#'" : `Add tag: #${lastTag}`}
+					</li>
+				)}
+			</ul>
+		</div>
+	)
+}
+
+export { AddBookmarkDialog }
--- a/packages/web/src/app/bookmarks/-store.tsx
+++ b/packages/web/src/app/bookmarks/-store.tsx
@@ -1,7 +1,7 @@
-import type { LinkBookmark } from "@markone/core/bookmark"
+import type { Bookmark } from "@markone/core/bookmark"
 import { create } from "zustand/react"
-import { BookmarkListItemAction } from "./-bookmark-list"
 import { router } from "~/router"
+import { BookmarkListItemAction } from "./-bookmark-list"

 enum LayoutMode {
 	Popup = "Popup",
@@ -15,11 +15,11 @@ enum ActiveDialog {
 }

 interface BookmarkPageState {
-	bookmarkToBeDeleted: LinkBookmark | null
+	bookmarkToBeDeleted: Bookmark | null
 	layoutMode: LayoutMode
 	activeDialog: ActiveDialog

-	handleBookmarkListItemAction: (bookmark: LinkBookmark, action: BookmarkListItemAction) => void
+	handleBookmarkListItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void
 	setActiveDialog: (dialog: ActiveDialog) => void
 	setLayoutMode: (mode: LayoutMode) => void
 }
@@ -36,7 +36,7 @@ const useBookmarkPageStore = create<BookmarkPageState>()((set, get) => ({
 	activeDialog: ActiveDialog.None,
 	actionBarHeight: 0,

-	handleBookmarkListItemAction(bookmark: LinkBookmark, action: BookmarkListItemAction) {
+	handleBookmarkListItemAction(bookmark: Bookmark, action: BookmarkListItemAction) {
 		switch (action) {
 			case BookmarkListItemAction.Open:
 				router.navigate({ to: `/bookmarks/${bookmark.id}` })
--- a/packages/web/src/bookmark/api.ts
+++ b/packages/web/src/bookmark/api.ts
@@ -1,4 +1,4 @@
-import type { Bookmark } from "@markone/core/bookmark"
+import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { UnauthenticatedError, fetchApi, useAuthenticatedQuery } from "~/api"
@@ -11,6 +11,16 @@ function useBookmark(id: string) {
 	)
 }

+function useTags() {
+	return useAuthenticatedQuery(["tags"], () => fetchApi("/tags").then((res): Promise<BookmarkTag[]> => res.json()))
+}
+
+function useBookmarkTags(bookmark: Bookmark) {
+	return useAuthenticatedQuery(["bookmarks", bookmark.id, "tags"], () =>
+		fetchApi(`/bookmarks/${bookmark.id}/tags`).then((res): Promise<BookmarkTag[]> => res.json()),
+	)
+}
+
 function useDeleteBookmark() {
 	const navigate = useNavigate()
 	const queryClient = useQueryClient()
@@ -38,15 +48,10 @@ function useCreateBookmark() {
 	const queryClient = useQueryClient()

 	return useMutation({
-		mutationFn: ({ url, force = false }: { url: string; force?: boolean }) =>
+		mutationFn: (body: { url: string; tags: string[]; force?: boolean }) =>
 			fetchApi("/bookmarks", {
 				method: "POST",
-				body: JSON.stringify({
-					url,
-					force,
-					kind: "link",
-					tags: [],
-				}),
+				body: JSON.stringify(body),
 			}).then((res) => (res.status === 204 ? Promise.resolve() : res.json())),
 		onError: (error) => {
 			if (error instanceof UnauthenticatedError) {
@@ -54,11 +59,15 @@ function useCreateBookmark() {
 			}
 		},
 		onSuccess: (bookmark: Bookmark | undefined) => {
+			console.log("on success bookmark", bookmark)
 			if (bookmark) {
-				queryClient.setQueryData(["bookmarks"], (bookmarks: Bookmark[]) => [bookmark, ...bookmarks])
+				queryClient.setQueryData(["bookmarks"], (bookmarks: Bookmark[]) =>
+					bookmarks ? [bookmark, ...bookmarks] : [bookmark],
+				)
+				console.log("query data updated")
 			}
 		},
 	})
 }

-export { useBookmark, useDeleteBookmark, useCreateBookmark }
+export { useBookmark, useDeleteBookmark, useCreateBookmark, useTags, useBookmarkTags }
--- a/packages/web/src/components/form-field.tsx
+++ b/packages/web/src/components/form-field.tsx
@@ -2,7 +2,8 @@ import { clsx } from "clsx"
 import { useId } from "react"
 import { twMerge } from "tailwind-merge"

-interface FormFieldProps {
+interface FormFieldProps
+	extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
 	name: string
 	label: string
 	type: React.HTMLInputTypeAttribute
@@ -11,31 +12,20 @@ interface FormFieldProps {
 	required?: boolean
 	autoFocus?: boolean
 	ref?: React.Ref<HTMLInputElement>
+	value?: string
 }

-function FormField({
-	name,
-	label,
-	type,
-	className,
-	labelClassName,
-	required = false,
-	autoFocus = false,
-	ref,
-}: FormFieldProps) {
+function FormField({ label, className, labelClassName, ref, value, ...inputProps }: FormFieldProps) {
 	const id = useId()
 	return (
 		<div className={clsx("flex flex-col-reverse focus:text-teal-600", className)}>
 			<input
 				ref={ref}
 				id={id}
-				required={required}
-				name={name}
-				type={type}
-				// biome-ignore lint/a11y/noAutofocus: <explanation>
-				autoFocus={autoFocus}
-				defaultValue=""
+				defaultValue={value !== undefined ? undefined : ""}
+				value={value}
 				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 dark:border-stone-200 focus:border-teal-600 focus:ring-0 focus:outline-none"
+				{...inputProps}
 			/>
 			<label
 				htmlFor={id}
--- a/packages/web/src/components/with-query.tsx
+++ b/packages/web/src/components/with-query.tsx
@@ -0,0 +1,9 @@
+import { useQuery, type QueryOptions } from "@tanstack/react-query"
+import type { QueryKey } from "~/api"
+
+interface WithQueryProps<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>
+	extends QueryOptions<TQueryFnData, TError, TQueryKey> {}
+
+function WithQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: React.PropsWithChildren<QueryOptions<TQueryFnData, TData, TQueryKey>>) {
+	useQuery(options)
+}