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/bun.lock
+++ b/bun.lock
@@ -38,6 +38,7 @@
      "name": "@markone/web",
      "version": "0.0.0",
      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
        "@markone/core": "workspace:*",
        "@tailwindcss/vite": "^4.1.5",
        "@tanstack/react-query": "^5.75.2",
@@ -348,6 +349,14 @@

    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.3", "", { "os": "win32", "cpu": "x64" }, "sha512-ICgUR+kPimx0vvRzf+N/7L7tVSQeE3BYY+NhHRHXS1kBuPO7z2+7ea2HbhDyZdTephgvNvKrlDDKUexuCVBVvg=="],

+    "@floating-ui/core": ["@floating-ui/core@1.7.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.9" } }, "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.0", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/utils": "^0.2.9" } }, "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg=="],
+
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.2", "", { "dependencies": { "@floating-ui/dom": "^1.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
+
    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],

    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
 	"name": "markone",
 	"private": true,
 	"scripts": {
-		"dev": "bun --filter '*' dev"
+		"dev": "bun --filter '*' --elide-lines 100 dev"
 	},
 	"workspaces": ["packages/*"],
 	"devDependencies": {
--- a/packages/core/src/bookmark.ts
+++ b/packages/core/src/bookmark.ts
@@ -1,25 +1,17 @@
 type BookmarkKind = "link" | "placeholder"

-interface LinkBookmark {
-	kind: "link"
+interface Bookmark {
 	id: string
 	title: string
 	url: string
 	tags: BookmarkTag[]
 }

-interface PlaceholderBookmark {
-	id: string
-	kind: "placeholder"
-	tags: BookmarkTag[]
-}
-
 interface BookmarkTag {
 	id: string
 	name: string
 }

-type Bookmark = LinkBookmark | PlaceholderBookmark
 type BookmarkId = Bookmark["id"]

-export type { Bookmark, BookmarkId, BookmarkKind, LinkBookmark, BookmarkTag }
+export type { Bookmark, BookmarkId, BookmarkKind, BookmarkTag }
--- a/packages/server/src/auth/auth-token.ts
+++ b/packages/server/src/auth/auth-token.ts
@@ -2,5 +2,5 @@ import { db } from "~/database.ts"

 function deleteAuthTokenById(id: string) {
 	const query = db.query<void, { id: string }>("DELETE FROM auth_tokens WHERE id = $id")
-	query.run({ id })
+	query.run({ k})
 }
--- a/packages/server/src/bookmark/bookmark.ts
+++ b/packages/server/src/bookmark/bookmark.ts
@@ -1,107 +1,171 @@
+import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"
 import type { User } from "@markone/core/user"
 import { Readability } from "@mozilla/readability"
 import { JSDOM } from "jsdom"
 import { db } from "~/database.ts"
 import { DEMO_BOOKMARKS } from "./demo-bookmarks.ts"
-import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"

 class LinkUnreachable {}
 class UnsupportedLink {}

-interface CachedPage {
+interface CachedContent {
 	title: string
-	readableHtml: string
+	mimeType: string
+	data: Buffer | null
 }

 function insertDemoBookmarks(user: User) {
 	const query = db.query(`
-INSERT OR IGNORE INTO bookmarks (id, user_id, kind, title, url)
-VALUES ($id, $userId, $kind, $title, $url)
+INSERT OR IGNORE INTO bookmarks (id, user_id, title, url, mime_type, content)
+VALUES ${Array(DEMO_BOOKMARKS.length).fill("(?,?,?,?,NULL,NULL)").join(",")}
 `)
-	const insert = db.transaction((bookmarks) => {
-		for (const bookmark of bookmarks) {
-			query.run({
-				id: bookmark.id,
-				userId: user.id,
-				kind: bookmark.kind,
-				title: bookmark.title,
-				url: bookmark.url,
-			})
-		}
-	})
-	insert(DEMO_BOOKMARKS)
+
+	const args: Parameters<typeof query.run> = []
+	for (const bookmark of DEMO_BOOKMARKS) {
+		args.push(bookmark.id, user.id, bookmark.title, bookmark.url)
+	}
+
+	query.run(...args)
 }

-function findBookmarkHtml(id: string, user: User): string | null {
-	const query = db.query("SELECT content_html FROM bookmarks WHERE id = $id AND user_id = $userId")
+function insertBookmark(bookmark: Bookmark, cachedContent: CachedContent | null, user: User) {
+	const query = db.query(`
+INSERT INTO bookmarks (id, user_id, title, url, mime_type, content)
+VALUES ($id, $userId, $title, $url, $mimeType, $content)
+`)
+	query.run({
+		id: bookmark.id,
+		userId: user.id,
+		title: bookmark.title,
+		url: bookmark.url,
+		mimeType: cachedContent?.mimeType || null,
+		content: cachedContent?.data ?? null,
+	})
+}
+
+function findBookmarkCachedContent(id: string, user: User): Buffer | null {
+	const query = db.query<{ content: Buffer | null }, { id: string; userId: string }>(
+		"SELECT content FROM bookmarks WHERE id = $id AND user_id = $userId",
+	)
 	const row = query.get({ id, userId: user.id })
-	if (!row) {
-		return null
-	}
-	const { content_html } = row as { content_html: string }
-	return content_html
+	return row?.content ?? null
 }

 function findBookmark(id: string, user: User): Bookmark | null {
 	const bookmarkQuery = db.query<Bookmark, { id: string; userId: string }>(
-		"SELECT id, kind, title, url FROM bookmarks WHERE id = $id AND user_id = $userId",
+		"SELECT id, title, url FROM bookmarks WHERE id = $id AND user_id = $userId",
 	)
 	const bookmark = bookmarkQuery.get({ id, userId: user.id })
 	if (!bookmark) {
 		return null
 	}

-	const tagsQuery = db.query<BookmarkTag, { id: string }>("SELECT id, name FROM tags WHERE bookmark_id = $id")
-	const tags = tagsQuery.all({ id })
+	const tagsQuery = db.query<BookmarkTag, { bookmarkId: string }>(`
+		SELECT tags.id, tags.name FROM tags
+		INNER JOIN bookmark_tags
+		ON bookmark_tags.tag_id = tags.id AND bookmark_tags.bookmark_id = $bookmarkId
+  `)
+	const tags = tagsQuery.all({ bookmarkId: id })

 	bookmark.tags = tags

 	return bookmark
 }

-async function cacheWebsite(url: string): Promise<CachedPage | null> {
-	const websiteText = await fetch(url)
-		.catch(() => {
-			throw new LinkUnreachable()
-		})
-		.then((res) => res.text())
-		.catch(() => {
+async function cacheContent(url: string): Promise<CachedContent | null> {
+	const res = await fetch(url).catch(() => {
+		throw new LinkUnreachable()
+	})
+
+	let contentType = res.headers.get("Content-Type")
+	if (!contentType) {
+		contentType = "application/octet-stream"
+	}
+
+	if (contentType.startsWith("text/html")) {
+		const matches = contentType.match(/charset=([^; ]+)/gi)
+		let charset: string
+		if (!matches || matches.length <= 2) {
+			charset = "utf-8"
+		} else {
+			charset = matches[1] || "utf-8"
+		}
+
+		const websiteText = await res.text().catch(() => {
 			throw new UnsupportedLink()
 		})

-	const dom = new JSDOM(websiteText, { url })
-	const reader = new Readability(dom.window.document)
-	const article = reader.parse()
+		const dom = new JSDOM(websiteText, { url })
+		const reader = new Readability(dom.window.document)
+		const article = reader.parse()

-	if (!article) {
-		return null
+		if (!article) {
+			return null
+		}
+
+		if (article.content) {
+			const newDom = new JSDOM(article.content, { url })
+			const doc = newDom.window.document
+
+			const lightStyleLink = doc.createElement("link")
+			lightStyleLink.rel = "stylesheet"
+			lightStyleLink.href = "/reader-styles/sakura.css"
+			lightStyleLink.media = "screen"
+
+			const darkStyleLink = doc.createElement("link")
+			darkStyleLink.rel = "stylesheet"
+			darkStyleLink.href = "/reader-styles/sakura-dark.css"
+			darkStyleLink.media = "screen and (prefers-color-scheme: dark)"
+
+			doc.head.appendChild(lightStyleLink)
+			doc.head.appendChild(darkStyleLink)
+
+			article.content = newDom.serialize()
+		}
+
+		return {
+			title: article.title || "Untitled",
+			mimeType: "text/html",
+			data: article.content ? Buffer.from(article.content, charset as BufferEncoding) : null,
+		}
 	}

-	if (article.content) {
-		const newDom = new JSDOM(article.content, { url })
-		const doc = newDom.window.document
-
-		const lightStyleLink = doc.createElement("link")
-		lightStyleLink.rel = "stylesheet"
-		lightStyleLink.href = "/reader-styles/sakura.css"
-		lightStyleLink.media = "screen"
-
-		const darkStyleLink = doc.createElement("link")
-		darkStyleLink.rel = "stylesheet"
-		darkStyleLink.href = "/reader-styles/sakura-dark.css"
-		darkStyleLink.media = "screen and (prefers-color-scheme: dark)"
-
-		doc.head.appendChild(lightStyleLink)
-		doc.head.appendChild(darkStyleLink)
-
-		article.content = newDom.serialize()
-	}
-
-	return {
-		title: article.title || "Untitled",
-		readableHtml: article.content || "",
-	}
+	throw new UnsupportedLink()
 }

-export { insertDemoBookmarks, findBookmark, findBookmarkHtml, cacheWebsite }
+function assignTagsToBookmark(tags: BookmarkTag[], bookmark: Bookmark) {
+	const query = db.query(`
+		INSERT INTO bookmark_tags (tag_id, bookmark_id)
+		VALUES ${Array(tags.length).fill("(?,?)").join(",")}
+	`)
+
+	const args: Parameters<typeof query.run> = []
+	for (const tag of tags) {
+		args.push(tag.id)
+		args.push(bookmark.id)
+	}
+
+	query.run(...args)
+}
+
+function findBookmarkTags(bookmark: Bookmark): BookmarkTag[] {
+	const query = db.query<BookmarkTag, { bookmarkId: string }>(`
+		SELECT tags.name as name, tags.id as id FROM bookmark_tags
+		INNER JOIN tags
+		ON tags.id = bookmark_tags.tag_id
+		WHERE bookmark_tags.bookmark_id = $bookmarkId
+	`)
+	const tags = query.all({ bookmarkId: bookmark.id })
+	return tags
+}
+
+export {
+	insertDemoBookmarks,
+	insertBookmark,
+	findBookmark,
+	findBookmarkCachedContent,
+	cacheContent,
+	assignTagsToBookmark,
+	findBookmarkTags,
+}
 export { LinkUnreachable, UnsupportedLink }
--- a/packages/server/src/bookmark/demo-bookmarks.ts
+++ b/packages/server/src/bookmark/demo-bookmarks.ts
@@ -2,64 +2,94 @@ import type { Bookmark } from "@markone/core/bookmark"

 const DEMO_BOOKMARKS: Bookmark[] = [
 	{
-		kind: "link",
-		id: "01JTKBKVMWRRDR20PY9X4HGPVY",
-		title: "ULID Specification",
-		url: "https://github.com/ulid/spec",
+		id: "01HYN4G66K0000000000000000",
+		title: "Google",
+		url: "https://www.google.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000001", name: "search" },
+			{ id: "01HYN4G66K0000000000000002", name: "tech" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW8392A9361PFGZEGM",
-		title: "Another Example Site",
-		url: "https://www.example.net",
+		id: "01HYN4G66K0000000000000003",
+		title: "MDN Web Docs",
+		url: "https://developer.mozilla.org",
+		tags: [
+			{ id: "01HYN4G66K0000000000000004", name: "documentation" },
+			{ id: "01HYN4G66K0000000000000005", name: "web development" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW3YKY4CMANEK7502N",
-		title: "Documentation Hub",
-		url: "https://docs.example.com",
+		id: "01HYN4G66K0000000000000006",
+		title: "GitHub",
+		url: "https://github.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000007", name: "code" },
+			{ id: "01HYN4G66K0000000000000008", name: "version control" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWHH7QG0CFQ6Q40E2G",
-		title: "API Reference",
-		url: "https://api.example.com/docs",
+		id: "01HYN4G66K0000000000000009",
+		title: "Stack Overflow",
+		url: "https://stackoverflow.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000010", name: "q&a" },
+			{ id: "01HYN4G66K0000000000000011", name: "programming" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWVR4T3KXXB3PHZD60",
-		title: "Blog Posts",
-		url: "https://blog.example.com",
+		id: "01HYN4G66K0000000000000012",
+		title: "TypeScript Handbook",
+		url: "https://www.typescriptlang.org/docs/handbook/intro.html",
+		tags: [
+			{ id: "01HYN4G66K0000000000000013", name: "typescript" },
+			{ id: "01HYN4G66K0000000000000014", name: "documentation" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWAP0GGKWBN7Z3CYAM",
-		title: "Support Forum",
-		url: "https://forum.example.com",
+		id: "01HYN4G66K0000000000000015",
+		title: "Reddit",
+		url: "https://www.reddit.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000016", name: "social" },
+			{ id: "01HYN4G66K0000000000000017", name: "news" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW1YJB63F2YCMZNGFE",
-		title: "Tutorials",
-		url: "https://tutorials.example.com",
+		id: "01HYN4G66K0000000000000018",
+		title: "YouTube",
+		url: "https://www.youtube.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000019", name: "video" },
+			{ id: "01HYN4G66K0000000000000020", name: "entertainment" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW93QYS2EK983RQS40",
-		title: "Resource Library",
-		url: "https://resources.example.com",
+		id: "01HYN4G66K0000000000000021",
+		title: "Figma",
+		url: "https://www.figma.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000022", name: "design" },
+			{ id: "01HYN4G66K0000000000000023", name: "ui/ux" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW6NG61138T8SCRFYT",
-		title: "Community Page",
-		url: "https://community.example.com",
+		id: "01HYN4G66K0000000000000024",
+		title: "The New York Times",
+		url: "https://www.nytimes.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000025", name: "news" },
+			{ id: "01HYN4G66K0000000000000026", name: "current events" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWDBKSXYHGFXC0HEZB",
-		title: "Project Repository",
-		url: "https://github.com/example/project",
+		id: "01HYN4G66K0000000000000027",
+		title: "ChatGPT",
+		url: "https://chat.openai.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000028", name: "ai" },
+			{ id: "01HYN4G66K0000000000000029", name: "chatbot" },
+		],
 	},
 ]

--- a/packages/server/src/bookmark/handlers.ts
+++ b/packages/server/src/bookmark/handlers.ts
@@ -1,11 +1,21 @@
+import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"
 import { DEMO_USER } from "@markone/core/user"
-import type { LinkBookmark, BookmarkTag } from "@markone/core/bookmark"
 import { type } from "arktype"
 import { ulid } from "ulid"
 import { db } from "~/database.ts"
 import { HttpError } from "~/error.ts"
 import type { User } from "~/user/user.ts"
-import { LinkUnreachable, UnsupportedLink, findBookmarkHtml, cacheWebsite, findBookmark } from "./bookmark.ts"
+import {
+	LinkUnreachable,
+	UnsupportedLink,
+	assignTagsToBookmark,
+	cacheContent,
+	findBookmark,
+	findBookmarkCachedContent,
+	findBookmarkTags,
+	insertBookmark,
+} from "./bookmark.ts"
+import { insertTags } from "./tag.ts"

 const BOOKMARK_PAGINATION_LIMIT = 100

@@ -16,12 +26,15 @@ const ListUserBookmarksParams = type({

 const AddBookmarkRequestBody = type({
 	"title?": "string",
-	kind: "string",
 	url: "string",
 	tags: "string[]",
 	"force?": "boolean",
 })

+const AddTagRequestBody = type({
+	name: "string",
+})
+
 async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user: User) {
 	const queryParams = ListUserBookmarksParams(request.params)
 	if (queryParams instanceof type.errors) {
@@ -30,7 +43,7 @@ async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user

 	const listBookmarksQuery = db.query(
 		`
-SELECT bookmarks.id, bookmarks.kind, bookmarks.title, bookmarks.url FROM bookmarks
+SELECT bookmarks.id, bookmarks.title, bookmarks.url FROM bookmarks
 WHERE bookmarks.user_id = $userId
 ORDER BY bookmarks.id DESC
 LIMIT $limit OFFSET $skip
@@ -61,10 +74,11 @@ async function addBookmark(request: Bun.BunRequest<"/api/bookmarks">, user: User
 	if (user.id !== DEMO_USER.id) {
 		const body = AddBookmarkRequestBody(await request.json())
 		if (body instanceof type.errors) {
+			console.log(body)
 			throw new HttpError(400)
 		}

-		const cachedWebsite = await cacheWebsite(body.url).catch((error) => {
+		const cachedContent = await cacheContent(body.url).catch((error) => {
 			if (error instanceof LinkUnreachable) {
 				if (body.force) {
 					return null
@@ -78,48 +92,45 @@ async function addBookmark(request: Bun.BunRequest<"/api/bookmarks">, user: User
 			throw new HttpError(500)
 		})

-		const bookmark: LinkBookmark = {
-			kind: "link",
+		const tagNames = new Set(body.tags)
+		for (const tag of tagNames) {
+			if (/[\s#]/g.test(tag)) {
+				throw new HttpError(400, "InvalidTag", "Tags cannot contain '#' or whitespaces")
+			}
+		}
+
+		const bookmark: Bookmark = {
 			id: ulid(),
 			title: "",
 			url: body.url,
-			tags: body.tags.map((tag) => ({ id: ulid(), name: tag })),
+			tags: [],
 		}

 		if (body.title) {
 			bookmark.title = body.title
-		} else if (cachedWebsite?.title) {
-			bookmark.title = cachedWebsite.title
+		} else if (cachedContent?.title) {
+			bookmark.title = cachedContent.title
 		}

-		const query = db.query(`
-INSERT INTO bookmarks (id, user_id, kind, title, url, content_html)
-VALUES ($id, $userId, $kind, $title, $url, $html)
-`)
-		query.run({
-			id: bookmark.id,
-			userId: user.id,
-			kind: bookmark.kind,
-			title: bookmark.title,
-			url: bookmark.url,
-			html: cachedWebsite?.readableHtml ?? "",
-		})
+		insertBookmark(bookmark, cachedContent, user)
+
+		if (tagNames.size > 0) {
+			const tagQuery = db.query<Partial<BookmarkTag>, string[]>(`
+			SELECT id, name FROM tags
+			WHERE user_id = ? AND name IN (${Array(tagNames.size).fill("?").join(",")})
+		`)
+			const tags = tagQuery.all(user.id, ...tagNames)

-		const insertTagQuery = db.query(`
-INSERT INTO tags(id, bookmark_id, name)
-VALUES ($id, $bookmarkId, $name)
-`)
-		const insertTags = db.transaction((tags: BookmarkTag[]) => {
 			for (const tag of tags) {
-				insertTagQuery.run({
-					bookmarkId: bookmark.id,
-					id: tag.id,
-					name: tag.name,
-				})
+				if (tag.id && tag.name) {
+					bookmark.tags.push(tag as BookmarkTag)
+					tagNames.delete(tag.name)
+				}
 			}
-		})

-		insertTags(bookmark.tags)
+			const createdTags = insertTags([...tagNames], user)
+			assignTagsToBookmark(createdTags, bookmark)
+		}

 		return Response.json(bookmark, { status: 200 })
 	}
@@ -130,7 +141,7 @@ VALUES ($id, $bookmarkId, $name)
 async function fetchBookmark(request: Bun.BunRequest<"/api/bookmarks/:id">, user: User) {
 	switch (request.headers.get("Accept")) {
 		case "text/html": {
-			const html = findBookmarkHtml(request.params.id, user)
+			const html = findBookmarkCachedContent(request.params.id, user)
 			if (html === null) {
 				throw new HttpError(404)
 			}
@@ -155,4 +166,53 @@ async function fetchBookmark(request: Bun.BunRequest<"/api/bookmarks/:id">, user
 	}
 }

-export { addBookmark, fetchBookmark, listUserBookmarks, deleteUserBookmark }
+async function listUserTags(request: Bun.BunRequest<"/api/tags">, user: User) {
+	const query = db.query<BookmarkTag, { id: string }>("SELECT id, name FROM tags WHERE user_id = $id")
+	const tags = query.all({ id: user.id })
+	return Response.json(tags, { status: 200 })
+}
+
+async function createUserTag(request: Bun.BunRequest<"/api/tags">, user: User) {
+	if (user.id !== DEMO_USER.id) {
+		const query = db.query<void, { id: string; name: string; userId: string }>(
+			"INSERT INTO tags (id, name, user_id) VALUES ($id, $name, $userId)",
+		)
+		const json = await request.json().catch(() => {
+			throw new HttpError(400)
+		})
+		const body = AddTagRequestBody(json)
+		if (body instanceof type.errors) {
+			throw new HttpError(400)
+		}
+
+		const tag: BookmarkTag = {
+			id: ulid(),
+			name: body.name,
+		}
+
+		query.run({ id: tag.id, name: tag.name, userId: user.id })
+
+		return Response.json(tag, { status: 200 })
+	}
+
+	return Response.json(undefined, { status: 204 })
+}
+
+async function listBookmarkTags(request: Bun.BunRequest<"/api/bookmarks/:id/tags">, user: User) {
+	const bookmark = findBookmark(request.params.id, user)
+	if (!bookmark) {
+		throw new HttpError(404)
+	}
+	const tags = findBookmarkTags(bookmark)
+	return Response.json(tags, { status: 200 })
+}
+
+export {
+	addBookmark,
+	fetchBookmark,
+	listUserBookmarks,
+	deleteUserBookmark,
+	listUserTags,
+	createUserTag,
+	listBookmarkTags,
+}
--- a/packages/server/src/bookmark/tag.ts
+++ b/packages/server/src/bookmark/tag.ts
@@ -0,0 +1,29 @@
+import type { BookmarkTag } from "@markone/core/bookmark"
+import type { User } from "@markone/core/user"
+import { ulid } from "ulid"
+import { db } from "~/database.ts"
+
+function insertTags(names: string[], user: User): BookmarkTag[] {
+	console.log(names)
+	const insertTags = db.query(`
+		INSERT INTO tags (id, name, user_id)
+		VALUES ${Array(names.length).fill("(?,?,?)").join(",")}
+	`)
+
+	const args: Parameters<typeof insertTags.run> = []
+	const tags: BookmarkTag[] = []
+	for (const name of names) {
+		const tag: BookmarkTag = {
+			id: ulid(),
+			name,
+		}
+		args.push(tag.id, tag.name, user.id)
+		tags.push(tag)
+	}
+
+	insertTags.run(...args)
+
+	return tags
+}
+
+export { insertTags }
--- a/packages/server/src/database.ts
+++ b/packages/server/src/database.ts
@@ -23,16 +23,22 @@ CREATE TABLE IF NOT EXISTS users(
 CREATE TABLE IF NOT EXISTS bookmarks(
 	id TEXT PRIMARY KEY,
 	user_id TEXT NOT NULL,
-	kind TEXT NOT NULL,
 	title TEXT NOT NULL,
 	url TEXT NOT NULL,
-	content_html TEXT NOT NULL
+	mime_type TEXT,
+	content BLOB
 );

 CREATE TABLE IF NOT EXISTS tags(
 	id TEXT PRIMARY KEY,
 	name TEXT NOT NULL,
-	bookmark_id TEXT NOT NULL
+	user_id TEXT NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS bookmark_tags(
+	tag_id TEXT NOT NULL,
+	bookmark_id TEXT NOT NULL,
+	PRIMARY KEY (tag_id, bookmark_id)
 );

 CREATE TABLE IF NOT EXISTS sessions(
--- a/packages/server/src/server.ts
+++ b/packages/server/src/server.ts
@@ -1,7 +1,15 @@
 import { authenticated, login, logout, signUp } from "./auth/auth.ts"
 import { startBackgroundSessionCleanup } from "./auth/session.ts"
 import { insertDemoBookmarks } from "./bookmark/bookmark.ts"
-import { addBookmark, listUserBookmarks, deleteUserBookmark, fetchBookmark } from "./bookmark/handlers.ts"
+import {
+	addBookmark,
+	listUserBookmarks,
+	deleteUserBookmark,
+	fetchBookmark,
+	listUserTags,
+	createUserTag,
+	listBookmarkTags,
+} from "./bookmark/handlers.ts"
 import { migrateDatabase } from "./database.ts"
 import { httpHandler, preflightHandler } from "./http-handler.ts"
 import { createDemoUser } from "./user/user.ts"
@@ -35,6 +43,13 @@ async function main() {
 					allowedHeaders: ["Accept"],
 				}),
 			},
+			"/api/bookmarks/:id/tags": {
+				GET: authenticated(listBookmarkTags),
+			},
+			"/api/tags": {
+				GET: authenticated(listUserTags),
+				POST: authenticated(createUserTag),
+			},
 		},

 		port: 8080,
--- 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)
+}