wip: implement add bookmark

packages/core/src/bookmark.ts

@@ -5,6 +5,7 @@ interface LinkBookmark {
 	id: string
 	title: string
 	url: string
+	tags: BookmarkTag[]
 }
 
 interface PlaceholderBookmark {
@@ -12,7 +13,12 @@ interface PlaceholderBookmark {
 	kind: "placeholder"
 }
 
+interface BookmarkTag {
+	id: string
+	name: string
+}
+
 type Bookmark = LinkBookmark | PlaceholderBookmark
 type BookmarkId = Bookmark["id"]
 
-export type { Bookmark, BookmarkId, BookmarkKind, LinkBookmark }
+export type { Bookmark, BookmarkId, BookmarkKind, LinkBookmark, BookmarkTag }

packages/server/package.json

@@ -8,13 +8,16 @@
 	"private": true,
 	"devDependencies": {
 		"@types/bun": "^1.2.12",
+		"@types/jsdom": "^21.1.7",
 		"@types/uid-safe": "^2.1.5"
 	},
 	"peerDependencies": {
 		"typescript": "^5"
 	},
 	"dependencies": {
+		"@mozilla/readability": "^0.6.0",
 		"arktype": "^2.1.20",
+		"jsdom": "^26.1.0",
 		"uid-safe": "^2.1.5",
 		"ulid": "^3.0.0"
 	}

packages/server/src/auth/auth.ts

@@ -90,7 +90,7 @@ async function signUp(request: Bun.BunRequest<"/api/sign-up">) {
 
 	const signUpRequest = SignUpRequest(body)
 	if (signUpRequest instanceof type.errors) {
-		throw new HttpError(400, signUpRequest.summary)
+		throw new HttpError(400, "BadRequestBody", signUpRequest.summary)
 	}
 
 	const { username, password } = signUpRequest
@@ -110,7 +110,7 @@ async function login(request: Bun.BunRequest<"/api/login">) {
 
 	const loginRequest = LoginRequest(body)
 	if (loginRequest instanceof type.errors) {
-		throw new HttpError(400, loginRequest.summary)
+		throw new HttpError(400, "BadRequestBody")
 	}
 
 	const foundUser = findUserByUsername(loginRequest.username, {
@@ -145,7 +145,7 @@ async function logout(request: Bun.BunRequest<"/api/logout">, user: User): Promi
 
 	forgetAllSessions(user)
 	deleteAllAuthTokensQuery.run({ userId: user.id })
-	return new Response(undefined, { status: 200 })
+	return new Response(undefined, { status: 204 })
 }
 
 export { authenticated, signUp, login, logout }

packages/server/src/bookmark/bookmark.ts

@@ -1,4 +1,5 @@
 import type { User } from "@markone/core/user"
+import type { Bookmark } from "@markone/core/bookmark"
 import { db } from "~/database.ts"
 import { DEMO_BOOKMARKS } from "./demo-bookmarks.ts"
 
@@ -21,4 +22,18 @@ VALUES ($id, $userId, $kind, $title, $url)
 	insert(DEMO_BOOKMARKS)
 }
 
+function insertBookmark(bookmark: Bookmark, user: User) {
+	const query = db.query(`
+INSERT INTO bookmarks (id, user_id, kind, title, url)
+VALUES ($id, $userId, $kind, $title, $url)
+`)
+	query.run({
+		id: bookmark.id,
+		userId: user.id,
+		kind: bookmark.kind,
+		title: bookmark.title,
+		url: bookmark.url,
+	})
+}
+
 export { insertDemoBookmarks }

packages/server/src/bookmark/handlers.ts

@@ -1,8 +1,12 @@
 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 { JSDOM } from "jsdom"
+import { Readability } from "@mozilla/readability"
 
 const BOOKMARK_PAGINATION_LIMIT = 100
 
@@ -11,10 +15,18 @@ const ListUserBookmarksParams = type({
 	skip: ["number", "=", 5],
 })
 
+const AddBookmarkRequestBody = type({
+	"title?": "string",
+	kind: "string",
+	url: "string",
+	tags: "string[]",
+	"force?": "boolean",
+})
+
 async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user: User) {
 	const queryParams = ListUserBookmarksParams(request.params)
 	if (queryParams instanceof type.errors) {
-		throw new HttpError(400, queryParams.summary)
+		throw new HttpError(400, "", queryParams.summary)
 	}
 
 	const listBookmarksQuery = db.query(
@@ -37,7 +49,6 @@ ORDER BY bookmarks.id LIMIT $limit OFFSET $skip
 }
 
 async function deleteUserBookmark(request: Bun.BunRequest<"/api/bookmark/:id">, user: User) {
-	console.log("askldjlskajdkl")
 	if (user.id !== DEMO_USER.id) {
 		const deleteBookmarkQuery = db.query("DELETE FROM bookmarks WHERE user_id = $userId AND id = $id")
 		const tx = db.transaction(() => {
@@ -48,4 +59,67 @@ async function deleteUserBookmark(request: Bun.BunRequest<"/api/bookmark/:id">,
 	return Response.json(undefined, { status: 204 })
 }
 
-export { listUserBookmarks, deleteUserBookmark }
+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) {
+			throw new HttpError(400)
+		}
+
+		const websiteResponse = await fetch(body.url).catch(() => {
+			throw new HttpError(400, "WebsiteUnreachable")
+		})
+		const websiteText = await websiteResponse.text().catch(() => {
+			throw new HttpError(400, "UnsupportedWebsite")
+		})
+
+		const dom = new JSDOM(websiteText, {
+			url: body.url,
+		})
+		const reader = new Readability(dom.window.document)
+		const article = reader.parse()
+
+		const bookmark: LinkBookmark = {
+			kind: "link",
+			id: ulid(),
+			title: body.title || article?.title || "Untitled",
+			url: body.url,
+			tags: body.tags.map((tag) => ({ id: ulid(), name: tag })),
+		}
+
+		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: article?.content ?? websiteText,
+		})
+
+		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,
+				})
+			}
+		})
+
+		insertTags(bookmark.tags)
+
+		return Response.json(bookmark, { status: 200 })
+	}
+
+	return Response.json(undefined, { status: 204 })
+}
+
+export { addBookmark, listUserBookmarks, deleteUserBookmark }

packages/server/src/database.ts

@@ -25,7 +25,8 @@ CREATE TABLE IF NOT EXISTS bookmarks(
 	user_id TEXT NOT NULL,
 	kind TEXT NOT NULL,
 	title TEXT NOT NULL,
-	url TEXT NOT NULL
+	url TEXT NOT NULL,
+	content_html TEXT NOT NULL,
 );
 
 CREATE TABLE IF NOT EXISTS tags(

packages/server/src/error.ts

@@ -1,6 +1,7 @@
 class HttpError {
 	constructor(
 		public readonly status: number,
+		public readonly code?: string,
 		public readonly message?: string,
 	) {}
 }

packages/server/src/http-handler.ts

@@ -13,8 +13,8 @@ function httpHandler<Route extends string>(
 			response = await handler(request)
 		} catch (error) {
 			if (error instanceof HttpError) {
-				if (error.message) {
-					response = Response.json({ message: error.message }, { status: error.status })
+				if (error.message || error.code) {
+					response = Response.json({ code: error.code, message: error.message }, { status: error.status })
 				} else {
 					response = new Response(undefined, { status: error.status })
 				}
@@ -36,7 +36,7 @@ function preflightHandler<Route extends string>({ allowedMethods }: { allowedMet
 		new Response(undefined, {
 			status: 200,
 			headers: {
-				"Access-Control-Allow-Origin": ALLOWED_ORIGINS,
+				"Access-Control-Allow-Origin": ALLOWED_ORIGINS.join(", "),
 				"Access-Control-Allow-Methods": allowedMethods.join(", "),
 				"Access-Control-Allow-Credentials": "true",
 			},

packages/server/src/server.ts

@@ -1,7 +1,7 @@
 import { authenticated, login, logout, signUp } from "./auth/auth.ts"
 import { startBackgroundSessionCleanup } from "./auth/session.ts"
 import { insertDemoBookmarks } from "./bookmark/bookmark.ts"
-import { listUserBookmarks, deleteUserBookmark } from "./bookmark/handlers.ts"
+import { addBookmark, listUserBookmarks, deleteUserBookmark } from "./bookmark/handlers.ts"
 import { migrateDatabase } from "./database.ts"
 import { httpHandler, preflightHandler } from "./http-handler.ts"
 import { createDemoUser } from "./user/user.ts"
@@ -25,6 +25,7 @@ async function main() {
 			},
 			"/api/bookmarks": {
 				GET: authenticated(listUserBookmarks),
+				POST: authenticated(addBookmark),
 			},
 			"/api/bookmark/:id": {
 				DELETE: authenticated(deleteUserBookmark),

packages/web/src/api.ts

@@ -2,26 +2,46 @@ import { type DefaultError, type UseMutationOptions, type queryOptions, useQuery
 import { useNavigate } from "@tanstack/react-router"
 import { useEffect } from "react"
 
-class BadRequestError extends Error {}
+enum ApiErrorCode {
+	BadRequestBody = "BadRequestBody",
+	WebsiteUnreachable = "WebsiteUnreachable",
+	UnsupportedWebsite = "UnsupportedWebsite",
+}
+
+class BadRequestError extends Error {
+	constructor(
+		public readonly code: ApiErrorCode,
+		public readonly message: string = "Server returned status 400",
+	) {
+		super()
+	}
+}
 class InternalError extends Error {}
 class UnauthenticatedError extends Error {}
 
+interface ErrorBody {
+	code: string
+	message?: string
+}
+
 type QueryKey = ["bookmarks", ...ReadonlyArray<unknown>]
 
-async function fetchApi<TData>(route: string, init?: RequestInit): Promise<[TData | void, Response]> {
+async function fetchApi(route: string, init?: RequestInit): Promise<Response> {
 	const response = await fetch(`${import.meta.env.VITE_API_URL}/api${route}`, {
 		...init,
 		credentials: "include",
 	})
 	switch (response.status) {
 		case 200:
-			return [await response.json(), response]
 		case 204:
-			return [undefined, response]
-		case 400:
-			throw new BadRequestError()
-		case 401:
+			return response
+		case 400: {
+			const body: ErrorBody = await response.json()
+			throw new BadRequestError(body.code as ApiErrorCode, body.message)
+		}
+		case 401: {
 			throw new UnauthenticatedError()
+		}
 		default:
 			throw new InternalError()
 	}
@@ -51,5 +71,13 @@ function mutationOptions<TData = unknown, TError = DefaultError, TVariables = vo
 	return options
 }
 
-export { BadRequestError, InternalError, UnauthenticatedError, fetchApi, useAuthenticatedQuery, mutationOptions }
+export {
+	ApiErrorCode,
+	BadRequestError,
+	InternalError,
+	UnauthenticatedError,
+	fetchApi,
+	useAuthenticatedQuery,
+	mutationOptions,
+}
 export type { QueryKey }

packages/web/src/app/bookmarks.tsx

@@ -1,14 +1,16 @@
 import type { LinkBookmark } from "@markone/core/bookmark"
 import { createFileRoute } from "@tanstack/react-router"
 import clsx from "clsx"
-import { useEffect } from "react"
+import { useEffect, useId, useState } from "react"
 import { create } from "zustand"
-import { fetchApi, useAuthenticatedQuery } from "~/api"
+import { fetchApi, useAuthenticatedQuery, BadRequestError, ApiErrorCode } from "~/api"
+import { useCreateBookmark, useDeleteBookmark } from "~/bookmark/api"
 import { Button } from "~/components/button"
-import { useDeleteBookmark } from "~/bookmark/api"
+import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
+import { Message, MessageVariant } from "~/components/message"
+import { FormField } from "~/components/form-field"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
-import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
 
 const LAYOUT_MODE = {
 	popup: "popup",
@@ -157,7 +159,7 @@ function PageDialog() {
 		case ActiveDialog.None:
 			return null
 		case ActiveDialog.AddBookmark:
-			return null
+			return <AddBookmarkDialog />
 		case ActiveDialog.DeleteBookmark:
 			return <DeleteBookmarkDialog />
 	}
@@ -243,9 +245,94 @@ function DeleteBookmarkDialog() {
 	)
 }
 
+function AddBookmarkDialog() {
+	const [isWebsiteUnreachable, setIsWebsiteUnreachable] = useState(false)
+	const createBookmarkMutation = useCreateBookmark()
+	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
+	const formId = useId()
+
+	useMnemonics(
+		{
+			c: cancel,
+		},
+		{ active: true },
+	)
+
+	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 })
+			} catch (error) {
+				if (error instanceof BadRequestError && error.code === ApiErrorCode.WebsiteUnreachable) {
+					setIsWebsiteUnreachable(true)
+				}
+			}
+		}
+	}
+
+	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
+						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 BookmarkListSection() {
 	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
-		fetchApi<LinkBookmark[]>("/bookmarks").then(([data]) => data),
+		fetchApi("/bookmarks").then((res) => res.json()),
 	)
 
 	switch (status) {
@@ -485,9 +572,22 @@ function OpenBookmarkPreviewButton() {
 }
 
 function ActionBar() {
+	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
+
+	useMnemonics(
+		{
+			a: addBookmark,
+		},
+		{ active: true },
+	)
+
+	function addBookmark() {
+		setActiveDialog(ActiveDialog.AddBookmark)
+	}
+
 	return (
 		<div className="fixed z-10 bottom-0 left-0 right-0 border-t-1 flex flex-row justify-center py-4 space-x-4">
-			<Button>
+			<Button onClick={addBookmark}>
 				<span className="underline">A</span>DD
 			</Button>
 			<Button>

packages/web/src/bookmark/api.ts

@@ -27,4 +27,32 @@ function useDeleteBookmark() {
 	})
 }
 
-export { useDeleteBookmark }
+function useCreateBookmark() {
+	const navigate = useNavigate()
+	const queryClient = useQueryClient()
+
+	return useMutation({
+		mutationFn: ({ url, force = false }: { url: string; force?: boolean }) =>
+			fetchApi("/bookmarks", {
+				method: "POST",
+				body: JSON.stringify({
+					url,
+					force,
+					kind: "link",
+					tags: [],
+				}),
+			}).then((res) => (res.status === 204 ? Promise.resolve() : res.json())),
+		onError: (error) => {
+			if (error instanceof UnauthenticatedError) {
+				navigate({ to: "/login", replace: true })
+			}
+		},
+		onSuccess: (bookmark: Bookmark | undefined) => {
+			if (bookmark) {
+				queryClient.setQueryData(["bookmarks"], (bookmarks: Bookmark[]) => [bookmark, ...bookmarks])
+			}
+		},
+	})
+}
+
+export { useDeleteBookmark, useCreateBookmark }

packages/web/src/components/dialog.tsx

@@ -1,7 +1,7 @@
 function Dialog({ children }: React.PropsWithChildren) {
 	return (
-		<div className="fixed z-20 top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-stone-200">
-			<div className="w-full m-8 md:w-2/3 lg:w-1/3 flex flex-col items-center border-2 bg-stone-300 relative after:absolute after:-z-10 after:inset-0 after:bg-stone-400 after:translate-4 md:after:translate-8">
+		<div className="fixed z-20 top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-stone-200 dark:bg-stone-900">
+			<div className="w-full m-8 md:w-2/3 lg:w-1/3 flex flex-col items-center border-2 bg-stone-300 dark:bg-stone-800 relative after:absolute after:-z-10 after:inset-0 after:bg-stone-400 dark:after:bg-stone-950 after:translate-4 md:after:translate-8">
 				{children}
 			</div>
 		</div>
@@ -9,11 +9,15 @@ function Dialog({ children }: React.PropsWithChildren) {
 }
 
 function DialogTitle({ children }: React.PropsWithChildren) {
-	return <h2 className="select-none font-bold w-full bg-stone-800 text-stone-300 text-center">{children}</h2>
+	return (
+		<h2 className="select-none font-bold w-full bg-stone-800 dark:bg-stone-300 text-stone-300 dark:text-stone-800 text-center">
+			{children}
+		</h2>
+	)
 }
 
 function DialogBody({ children }: React.PropsWithChildren) {
-	return <div className="m-8 text-center">{children}</div>
+	return <div className="m-8 w-full text-center">{children}</div>
 }
 
 function DialogActionRow({ children }: React.PropsWithChildren) {

packages/web/src/components/form-field.tsx

@@ -1,27 +1,34 @@
 import { clsx } from "clsx"
 import { useId } from "react"
+import { twMerge } from "tailwind-merge"
 
 interface FormFieldProps {
 	name: string
 	label: string
 	type: React.HTMLInputTypeAttribute
 	className?: string
+	labelClassName?: string
+	required?: boolean
 }
 
-function FormField({ name, label, type, className }: FormFieldProps) {
+function FormField({ name, label, type, className, labelClassName, required = false }: FormFieldProps) {
 	const id = useId()
 	return (
 		<div className={clsx("flex flex-col-reverse focus:text-teal-600", className)}>
 			<input
 				id={id}
+				required={required}
 				name={name}
 				type={type}
 				defaultValue=""
-				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 focus:border-teal-600 focus:ring-0 focus:outline-none"
+				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"
 			/>
 			<label
 				htmlFor={id}
-				className="select-none border-x-2 border-transparent w-min translate-y-[55%] bg-stone-200 mx-2 px-1 peer-focus:text-teal-600 peer-focus:font-bold"
+				className={twMerge(
+					"select-none border-x-2 border-transparent w-min translate-y-[55%] bg-stone-200 dark:bg-stone-900 mx-2 px-1 peer-focus:text-teal-600 peer-focus:font-bold",
+					labelClassName,
+				)}
 			>
 				{label}
 			</label>

packages/web/src/components/message.tsx

@@ -0,0 +1,22 @@
+import { clsx } from "clsx"
+
+enum MessageVariant {
+	Warning = "Warning",
+	Error = "Error",
+}
+
+const VARIANT_CLASSES = {
+	[MessageVariant.Warning]: "text-amber-600 dark:text-amber-200",
+	[MessageVariant.Error]: "text-red-500 dark:text-red-300",
+} as const
+
+interface MessageProps {
+	variant: MessageVariant
+	className?: string
+}
+
+function Message({ variant, className, children }: React.PropsWithChildren<MessageProps>) {
+	return <p className={clsx(VARIANT_CLASSES[variant], className)}>{children}</p>
+}
+
+export { Message, MessageVariant }