implement nav chrome for bookmark previewer
This commit is contained in:
11
bun.lock
11
bun.lock
@@ -44,6 +44,7 @@
|
||||
"@tanstack/react-router": "^1.119.0",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"jotai": "^2.12.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.2.0",
|
||||
@@ -481,7 +482,7 @@
|
||||
|
||||
"@types/babel__traverse": ["@types/babel__traverse@7.20.7", "", { "dependencies": { "@babel/types": "^7.20.7" } }, "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng=="],
|
||||
|
||||
"@types/bun": ["@types/bun@1.2.12", "", { "dependencies": { "bun-types": "1.2.12" } }, "sha512-lY/GQTXDGsolT/TiH72p1tuyUORuRrdV7VwOTOjDOt8uTBJQOJc5zz3ufwwDl0VBaoxotSk4LdP0hhjLJ6ypIQ=="],
|
||||
"@types/bun": ["@types/bun@1.2.13", "", { "dependencies": { "bun-types": "1.2.13" } }, "sha512-u6vXep/i9VBxoJl3GjZsl/BFIsvML8DfVDO0RYLEwtSZSp981kEO1V5NwRcO1CPJ7AmvpbnDCiMKo3JvbDEjAg=="],
|
||||
|
||||
"@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
|
||||
|
||||
@@ -569,7 +570,7 @@
|
||||
|
||||
"buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
|
||||
|
||||
"bun-types": ["bun-types@1.2.12", "", { "dependencies": { "@types/node": "*" } }, "sha512-tvWMx5vPqbRXgE8WUZI94iS1xAYs8bkqESR9cxBB1Wi+urvfTrF1uzuDgBHFAdO0+d2lmsbG3HmeKMvUyj6pWA=="],
|
||||
"bun-types": ["bun-types@1.2.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-rRjA1T6n7wto4gxhAO/ErZEtOXyEZEmnIHQfl0Dt1QQSB4QV0iP6BZ9/YB5fZaHFQ2dwHFrmPaRQ9GGMX01k9Q=="],
|
||||
|
||||
"cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
|
||||
|
||||
@@ -847,6 +848,8 @@
|
||||
|
||||
"jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
|
||||
|
||||
"jotai": ["jotai@2.12.4", "", { "peerDependencies": { "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@types/react", "react"] }, "sha512-eFXLJol4oOLM8BS1+QV+XwaYQITG8n1tatBCFl4F5HE3zR5j2WIK8QpMt7VJIYmlogNUZfvB7wjwLoVk+umB9Q=="],
|
||||
|
||||
"js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
|
||||
|
||||
"jsdom": ["jsdom@26.1.0", "", { "dependencies": { "cssstyle": "^4.2.1", "data-urls": "^5.0.0", "decimal.js": "^10.5.0", "html-encoding-sniffer": "^4.0.0", "http-proxy-agent": "^7.0.2", "https-proxy-agent": "^7.0.6", "is-potential-custom-element-name": "^1.0.1", "nwsapi": "^2.2.16", "parse5": "^7.2.1", "rrweb-cssom": "^0.8.0", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^5.1.1", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^7.0.0", "whatwg-encoding": "^3.1.1", "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.1.1", "ws": "^8.18.0", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^3.0.0" }, "optionalPeers": ["canvas"] }, "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg=="],
|
||||
@@ -1279,6 +1282,8 @@
|
||||
|
||||
"regjsparser/jsesc": ["jsesc@3.0.2", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g=="],
|
||||
|
||||
"server/@types/bun": ["@types/bun@1.2.12", "", { "dependencies": { "bun-types": "1.2.12" } }, "sha512-lY/GQTXDGsolT/TiH72p1tuyUORuRrdV7VwOTOjDOt8uTBJQOJc5zz3ufwwDl0VBaoxotSk4LdP0hhjLJ6ypIQ=="],
|
||||
|
||||
"sharp/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
|
||||
|
||||
"source-map/whatwg-url": ["whatwg-url@7.1.0", "", { "dependencies": { "lodash.sortby": "^4.7.0", "tr46": "^1.0.1", "webidl-conversions": "^4.0.2" } }, "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg=="],
|
||||
@@ -1295,6 +1300,8 @@
|
||||
|
||||
"prebuild-install/tar-fs/tar-stream": ["tar-stream@2.2.0", "", { "dependencies": { "bl": "^4.0.3", "end-of-stream": "^1.4.1", "fs-constants": "^1.0.0", "inherits": "^2.0.3", "readable-stream": "^3.1.1" } }, "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ=="],
|
||||
|
||||
"server/@types/bun/bun-types": ["bun-types@1.2.12", "", { "dependencies": { "@types/node": "*" } }, "sha512-tvWMx5vPqbRXgE8WUZI94iS1xAYs8bkqESR9cxBB1Wi+urvfTrF1uzuDgBHFAdO0+d2lmsbG3HmeKMvUyj6pWA=="],
|
||||
|
||||
"source-map/whatwg-url/tr46": ["tr46@1.0.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA=="],
|
||||
|
||||
"source-map/whatwg-url/webidl-conversions": ["webidl-conversions@4.0.2", "", {}, "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="],
|
||||
|
@@ -11,6 +11,7 @@ interface LinkBookmark {
|
||||
interface PlaceholderBookmark {
|
||||
id: string
|
||||
kind: "placeholder"
|
||||
tags: BookmarkTag[]
|
||||
}
|
||||
|
||||
interface BookmarkTag {
|
||||
|
@@ -3,6 +3,7 @@ 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 {}
|
||||
@@ -41,6 +42,23 @@ function findBookmarkHtml(id: string, user: User): string | null {
|
||||
return content_html
|
||||
}
|
||||
|
||||
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",
|
||||
)
|
||||
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 })
|
||||
|
||||
bookmark.tags = tags
|
||||
|
||||
return bookmark
|
||||
}
|
||||
|
||||
async function cacheWebsite(url: string): Promise<CachedPage | null> {
|
||||
const websiteText = await fetch(url)
|
||||
.catch(() => {
|
||||
@@ -85,5 +103,5 @@ async function cacheWebsite(url: string): Promise<CachedPage | null> {
|
||||
}
|
||||
}
|
||||
|
||||
export { insertDemoBookmarks, findBookmarkHtml, cacheWebsite }
|
||||
export { insertDemoBookmarks, findBookmark, findBookmarkHtml, cacheWebsite }
|
||||
export { LinkUnreachable, UnsupportedLink }
|
||||
|
@@ -5,7 +5,7 @@ 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 } from "./bookmark.ts"
|
||||
import { LinkUnreachable, UnsupportedLink, findBookmarkHtml, cacheWebsite, findBookmark } from "./bookmark.ts"
|
||||
|
||||
const BOOKMARK_PAGINATION_LIMIT = 100
|
||||
|
||||
@@ -46,7 +46,7 @@ LIMIT $limit OFFSET $skip
|
||||
return Response.json(results, { status: 200 })
|
||||
}
|
||||
|
||||
async function deleteUserBookmark(request: Bun.BunRequest<"/api/bookmark/:id">, user: User) {
|
||||
async function deleteUserBookmark(request: Bun.BunRequest<"/api/bookmarks/:id">, user: User) {
|
||||
if (user.id !== DEMO_USER.id) {
|
||||
const deleteBookmarkQuery = db.query("DELETE FROM bookmarks WHERE user_id = $userId AND id = $id")
|
||||
const tx = db.transaction(() => {
|
||||
@@ -127,7 +127,7 @@ VALUES ($id, $bookmarkId, $name)
|
||||
return Response.json(undefined, { status: 204 })
|
||||
}
|
||||
|
||||
async function fetchBookmark(request: Bun.BunRequest<"/api/bookmark/:id">, user: User) {
|
||||
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)
|
||||
@@ -141,6 +141,15 @@ async function fetchBookmark(request: Bun.BunRequest<"/api/bookmark/:id">, user:
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
case "application/json": {
|
||||
const bookmark = findBookmark(request.params.id, user)
|
||||
if (bookmark === null) {
|
||||
throw new HttpError(404)
|
||||
}
|
||||
return Response.json(bookmark, { status: 200 })
|
||||
}
|
||||
|
||||
default:
|
||||
throw new HttpError(400, "UnsupportedAcceptHeader")
|
||||
}
|
||||
|
@@ -31,7 +31,10 @@ function httpHandler<Route extends string>(
|
||||
}
|
||||
}
|
||||
|
||||
function preflightHandler<Route extends string>({ allowedMethods }: { allowedMethods: HttpMethod[] }) {
|
||||
function preflightHandler<Route extends string>({
|
||||
allowedMethods,
|
||||
allowedHeaders,
|
||||
}: { allowedMethods: HttpMethod[]; allowedHeaders: string[] }) {
|
||||
return async (request: Bun.BunRequest<Route>) =>
|
||||
new Response(undefined, {
|
||||
status: 200,
|
||||
@@ -39,6 +42,7 @@ function preflightHandler<Route extends string>({ allowedMethods }: { allowedMet
|
||||
"Access-Control-Allow-Origin": ALLOWED_ORIGINS.join(", "),
|
||||
"Access-Control-Allow-Methods": allowedMethods.join(", "),
|
||||
"Access-Control-Allow-Credentials": "true",
|
||||
"Access-Control-Allow-Headers": allowedHeaders.join(", "),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
@@ -27,11 +27,12 @@ async function main() {
|
||||
GET: authenticated(listUserBookmarks),
|
||||
POST: authenticated(addBookmark),
|
||||
},
|
||||
"/api/bookmark/:id": {
|
||||
"/api/bookmarks/:id": {
|
||||
GET: authenticated(fetchBookmark),
|
||||
DELETE: authenticated(deleteUserBookmark),
|
||||
OPTIONS: preflightHandler({
|
||||
allowedMethods: ["GET", "POST", "DELETE", "OPTIONS"],
|
||||
allowedHeaders: ["Accept"],
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
@@ -15,6 +15,7 @@
|
||||
"@tanstack/react-router": "^1.119.0",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"jotai": "^2.12.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.2.0",
|
||||
|
@@ -1,23 +1,38 @@
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router"
|
||||
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 } from "react"
|
||||
import { useCallback, useEffect, useRef } from "react"
|
||||
import type { LinkBookmark } from "@markone/core/bookmark"
|
||||
import { ActionBar } from "./-action-bar"
|
||||
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"
|
||||
|
||||
export const Route = createFileRoute("/bookmarks/$bookmarkId")({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
const actionBarHeight = atom(0)
|
||||
const setActionBarHeight = atom(null, (_, set, update: number) => {
|
||||
set(actionBarHeight, update)
|
||||
})
|
||||
const titleBarHeight = atom(0)
|
||||
const setTitleBarHeight = atom(null, (_, set, update: number) => {
|
||||
set(titleBarHeight, update)
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<Main>
|
||||
<BookmarkListSidebar />
|
||||
<BookmarkPreviewContainer>
|
||||
<BookmarkPreview />
|
||||
<BookmarkPreviewTitleBar />
|
||||
<BookmarkPreviewActionBar />
|
||||
</BookmarkPreviewContainer>
|
||||
</Main>
|
||||
)
|
||||
@@ -37,9 +52,10 @@ function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx("col-span-3 h-screen border-l border-stone-700 dark:border-stone-300 flex dark:bg-stone-900", {
|
||||
"absolute border-l-0": layoutMode === LayoutMode.Popup,
|
||||
})}
|
||||
className={clsx(
|
||||
"h-screen border-l border-stone-700 dark:border-stone-300 flex dark:bg-stone-900",
|
||||
layoutMode === LayoutMode.Popup ? "absolute top-0 left-0 right-0 bottom-0 border-l-0" : "relative col-span-3",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
@@ -48,7 +64,7 @@ function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
|
||||
|
||||
function BookmarkListSidebar() {
|
||||
return (
|
||||
<div className="flex flex-col py-16 w-full h-screen relative">
|
||||
<div className="relative flex flex-col py-16 w-full h-screen relative">
|
||||
<header className="mb-4 text-start">
|
||||
<h1 className="font-bold text-start mb-4">
|
||||
<span className="invisible"> > </span>
|
||||
@@ -56,7 +72,7 @@ function BookmarkListSidebar() {
|
||||
</h1>
|
||||
</header>
|
||||
<BookmarkListContainer />
|
||||
<ActionBar className="absolute bottom-0 left-0 right-0" />
|
||||
<BookmarkListActionBar className="absolute bottom-0 left-0 right-0" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -102,25 +118,126 @@ function BookmarkListContainer() {
|
||||
|
||||
function BookmarkPreview() {
|
||||
const { bookmarkId } = Route.useParams()
|
||||
const { data, status } = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () =>
|
||||
fetchApi(`/bookmark/${bookmarkId}`, {
|
||||
headers: {
|
||||
Accept: "text/html",
|
||||
},
|
||||
}).then((res) => res.text()),
|
||||
const { data: previewHtml, status: previewQueryStatus } = 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)
|
||||
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return (
|
||||
<p>
|
||||
if (previewQueryStatus === "success" && bookmarkQueryStatus === "success") {
|
||||
return (
|
||||
<iframe
|
||||
title={bookmark.id}
|
||||
className="w-full h-full"
|
||||
style={{ paddingTop: _titleBarHeight, paddingBottom: _actionBarHeight }}
|
||||
srcDoc={previewHtml}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (previewQueryStatus === "pending" || bookmarkQueryStatus === "pending") {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<p className="mx-0 my-auto">
|
||||
Loading <LoadingSpinner />
|
||||
</p>
|
||||
)
|
||||
case "success":
|
||||
return <iframe key="preview-iframe" title="asd" className="w-full h-full" srcDoc={data} />
|
||||
|
||||
default:
|
||||
return null
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function BookmarkPreviewTitleBar() {
|
||||
const { bookmarkId } = Route.useParams()
|
||||
const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
|
||||
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"
|
||||
|
||||
useEffect(() => {
|
||||
if (headerRef.current) {
|
||||
_setTitleBarHeight(headerRef.current.clientHeight)
|
||||
} else {
|
||||
_setTitleBarHeight(0)
|
||||
}
|
||||
})
|
||||
|
||||
if (isHidden) {
|
||||
return null
|
||||
}
|
||||
|
||||
const url = new URL(bookmark.url)
|
||||
|
||||
return (
|
||||
<header
|
||||
ref={headerRef}
|
||||
className="absolute top-0 left-0 right-0 flex flex-col items-center bg-stone-200 dark:bg-stone-900 px-2 py-1 border-b-1 border-stone-700 dark:border-stone-300"
|
||||
>
|
||||
<h1 className="text-center">{bookmark.title}</h1>
|
||||
<h2 className="text-center opacity-80 text-sm">{url.host}</h2>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
function BookmarkPreviewActionBar() {
|
||||
const { bookmarkId } = Route.useParams()
|
||||
const navigate = useNavigate()
|
||||
const router = useRouter()
|
||||
const canGoBack = useCanGoBack()
|
||||
const { data: bookmark, status } = useBookmark(bookmarkId)
|
||||
const linkRef = useRef<HTMLAnchorElement | null>(null)
|
||||
const [, _setActionBarHeight] = useAtom(setActionBarHeight)
|
||||
|
||||
useMnemonics(
|
||||
{
|
||||
c: close,
|
||||
o: openLink,
|
||||
},
|
||||
{ ignore: () => false },
|
||||
)
|
||||
|
||||
function close() {
|
||||
if (canGoBack) {
|
||||
router.history.back()
|
||||
} else {
|
||||
navigate({ to: "/bookmarks", replace: true })
|
||||
}
|
||||
}
|
||||
|
||||
function openLink() {
|
||||
linkRef.current?.click()
|
||||
}
|
||||
|
||||
if (status !== "success") {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<ActionBar
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
_setActionBarHeight(el.clientHeight)
|
||||
}
|
||||
}}
|
||||
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}
|
||||
<Button onClick={close}>
|
||||
<span className="underline">C</span>LOSE
|
||||
</Button>
|
||||
</ActionBar>
|
||||
)
|
||||
}
|
||||
|
@@ -1,12 +1,30 @@
|
||||
import { Button } from "~/components/button"
|
||||
import { ActiveDialog, LayoutMode, useBookmarkPageStore } from "./-store"
|
||||
import { ActiveDialog, useBookmarkPageStore } from "./-store"
|
||||
import { useNavigate } from "@tanstack/react-router"
|
||||
import { useCallback } from "react"
|
||||
import { useLogOut } from "~/auth"
|
||||
import { useMnemonics } from "~/hooks/use-mnemonics"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
function ActionBar({ className }: { className?: string }) {
|
||||
function ActionBar({
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
}: React.PropsWithChildren<{ ref?: React.RefCallback<HTMLDivElement>; className?: string }>) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={twMerge(
|
||||
"bg-stone-200 dark:bg-stone-900 border-t-1 flex flex-row justify-center py-4 space-x-4",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function BookmarkListActionBar({ className }: { className?: string }) {
|
||||
const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
|
||||
|
||||
useMnemonics(
|
||||
@@ -21,12 +39,7 @@ function ActionBar({ className }: { className?: string }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-stone-200 dark:bg-stone-900 border-t-1 flex flex-row justify-center py-4 space-x-4",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<ActionBar className={className}>
|
||||
<Button onClick={addBookmark}>
|
||||
<span className="underline">A</span>DD
|
||||
</Button>
|
||||
@@ -34,7 +47,7 @@ function ActionBar({ className }: { className?: string }) {
|
||||
<span className="underline">S</span>EARCH
|
||||
</Button>
|
||||
<LogOutButton />
|
||||
</div>
|
||||
</ActionBar>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -54,4 +67,4 @@ function LogOutButton() {
|
||||
)
|
||||
}
|
||||
|
||||
export { ActionBar }
|
||||
export { ActionBar, BookmarkListActionBar }
|
||||
|
@@ -3,7 +3,7 @@ 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, LayoutMode } from "./-store"
|
||||
import { useBookmarkPageStore, ActiveDialog } from "./-store"
|
||||
import { Button } from "~/components/button"
|
||||
import clsx from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
@@ -236,8 +236,6 @@ const BookmarkListItem = memo(
|
||||
const alwaysExpandItem = useBookmarkListStore((state) => state.alwaysExpandItem)
|
||||
const isBookmarkItemExpanded = useBookmarkListStore((state) => state.alwaysExpandItem || state.isItemExpanded)
|
||||
const setIsItemExpanded = useBookmarkListStore((state) => state.setIsItemExpanded)
|
||||
const selectBookmark = useBookmarkPageStore((state) => state.selectBookmark)
|
||||
const setBookmarkPreviewOpened = useBookmarkPageStore((state) => state.setBookmarkPreviewOpened)
|
||||
const onItemAction = useBookmarkListStore((state) => state.onItemAction)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -250,27 +248,12 @@ const BookmarkListItem = memo(
|
||||
onItemAction(bookmark, BookmarkListItemAction.Delete)
|
||||
}
|
||||
|
||||
function expandOrOpenPreview() {
|
||||
if (!selected) {
|
||||
selectBookmark(bookmark, index)
|
||||
}
|
||||
setIsItemExpanded(true)
|
||||
if (useBookmarkPageStore.getState().layoutMode === LayoutMode.SideBySide) {
|
||||
setBookmarkPreviewOpened(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx("group flex flex-row justify-start py-2", {
|
||||
"bg-teal-600 text-stone-100": isBookmarkItemExpanded && selected,
|
||||
"text-teal-600": selected && !isBookmarkItemExpanded,
|
||||
})}
|
||||
onMouseEnter={() => {
|
||||
if (!isBookmarkItemExpanded) {
|
||||
selectBookmark(bookmark, index)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@@ -280,7 +263,6 @@ const BookmarkListItem = memo(
|
||||
})}
|
||||
onClick={() => {
|
||||
setIsItemExpanded(!isBookmarkItemExpanded)
|
||||
setBookmarkPreviewOpened(false)
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Options for this bookmark</span>
|
||||
@@ -292,7 +274,6 @@ const BookmarkListItem = memo(
|
||||
<Link
|
||||
to={`/bookmarks/${bookmark.id}`}
|
||||
className={clsx("block w-full text-start font-bold", { underline: selected })}
|
||||
onClick={expandOrOpenPreview}
|
||||
>
|
||||
{bookmark.title}
|
||||
</Link>
|
||||
@@ -301,7 +282,9 @@ const BookmarkListItem = memo(
|
||||
<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">
|
||||
<OpenBookmarkPreviewButton />
|
||||
<Button variant="light" className="text-sm">
|
||||
<span>COPY LINK</span>
|
||||
</Button>
|
||||
<Button variant="light" className="text-sm">
|
||||
<span className="underline">E</span>dit
|
||||
</Button>
|
||||
@@ -318,59 +301,4 @@ const BookmarkListItem = memo(
|
||||
},
|
||||
)
|
||||
|
||||
function OpenBookmarkPreviewButton() {
|
||||
const isBookmarkPreviewOpened = useBookmarkPageStore((state) => state.isBookmarkPreviewOpened)
|
||||
const setBookmarkPreviewOpened = useBookmarkPageStore((state) => state.setBookmarkPreviewOpened)
|
||||
const setBookmarkItemExpanded = useBookmarkPageStore((state) => state.setBookmarkItemExpanded)
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (isBookmarkPreviewOpened && event.key === "c") {
|
||||
closePreview()
|
||||
} else if (!isBookmarkPreviewOpened && event.key === "o") {
|
||||
openPreview()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", onKeyDown)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", onKeyDown)
|
||||
}
|
||||
}, [isBookmarkPreviewOpened])
|
||||
|
||||
function closePreview() {
|
||||
setBookmarkPreviewOpened(false)
|
||||
setBookmarkItemExpanded(false)
|
||||
}
|
||||
|
||||
function openPreview() {
|
||||
setBookmarkPreviewOpened(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="light"
|
||||
className="text-sm"
|
||||
onClick={() => {
|
||||
if (isBookmarkPreviewOpened) {
|
||||
closePreview()
|
||||
} else {
|
||||
openPreview()
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isBookmarkPreviewOpened ? (
|
||||
<>
|
||||
<span className="underline">C</span>lose
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="underline">O</span>pen
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export { BookmarkList, BookmarkListItemAction }
|
||||
|
@@ -1,13 +1,9 @@
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router"
|
||||
import { useCallback } from "react"
|
||||
import { useLogOut } from "~/auth"
|
||||
import { Button } from "~/components/button"
|
||||
import { useMnemonics } from "~/hooks/use-mnemonics"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { BookmarkList } from "./-bookmark-list"
|
||||
import { ActiveDialog, LayoutMode, useBookmarkPageStore } from "./-store"
|
||||
import { useBookmarkPageStore } from "./-store"
|
||||
import { fetchApi, useAuthenticatedQuery } from "~/api"
|
||||
import { LoadingSpinner } from "~/components/loading-spinner"
|
||||
import { ActionBar } from "./-action-bar"
|
||||
import { BookmarkListActionBar } from "./-action-bar"
|
||||
|
||||
export const Route = createFileRoute("/bookmarks/")({
|
||||
component: RouteComponent,
|
||||
@@ -17,7 +13,7 @@ function RouteComponent() {
|
||||
return (
|
||||
<main className="w-full flex justify-center">
|
||||
<BookmarkListPane />
|
||||
<ActionBar className="fixed left-0 right-0 bottom-0" />
|
||||
<BookmarkListActionBar className="fixed left-0 right-0 bottom-0" />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
@@ -1,7 +1,15 @@
|
||||
import type { Bookmark } from "@markone/core/bookmark"
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { useNavigate } from "@tanstack/react-router"
|
||||
import { UnauthenticatedError, fetchApi } from "~/api"
|
||||
import { UnauthenticatedError, fetchApi, useAuthenticatedQuery } from "~/api"
|
||||
|
||||
function useBookmark(id: string) {
|
||||
return useAuthenticatedQuery(["bookmarks", id], () =>
|
||||
fetchApi(`/bookmarks/${id}`, {
|
||||
headers: { Accept: "application/json" },
|
||||
}).then((res): Promise<Bookmark> => res.json()),
|
||||
)
|
||||
}
|
||||
|
||||
function useDeleteBookmark() {
|
||||
const navigate = useNavigate()
|
||||
@@ -9,7 +17,7 @@ function useDeleteBookmark() {
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ bookmark }: { bookmark: Bookmark }) =>
|
||||
fetchApi(`/bookmark/${bookmark.id}`, {
|
||||
fetchApi(`/bookmarks/${bookmark.id}`, {
|
||||
method: "DELETE",
|
||||
}),
|
||||
onError: (error) => {
|
||||
@@ -53,4 +61,4 @@ function useCreateBookmark() {
|
||||
})
|
||||
}
|
||||
|
||||
export { useDeleteBookmark, useCreateBookmark }
|
||||
export { useBookmark, useDeleteBookmark, useCreateBookmark }
|
||||
|
@@ -1,5 +1,10 @@
|
||||
import { Link, type AnyRouter, type LinkComponentProps, type RegisteredRouter } from "@tanstack/react-router"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
interface ButtonProps {
|
||||
variant?: keyof typeof VARIANT_CLASSES
|
||||
}
|
||||
|
||||
const VARIANT_CLASSES = {
|
||||
light:
|
||||
"px-4 py-2 md:py-0 font-bold border border-2 border-b-4 border-stone-200 enabled:active:bg-stone-200 enabled:active:text-stone-800 enabled:active:border-b-1 enabled:hover:bg-stone-600 focus:bg-stone-600 focus:ring-0 focus:outline-none enabled:active:translate-y-0.5",
|
||||
@@ -12,9 +17,7 @@ function Button({
|
||||
variant = "normal",
|
||||
disabled,
|
||||
...props
|
||||
}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
|
||||
variant?: keyof typeof VARIANT_CLASSES
|
||||
}) {
|
||||
}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & ButtonProps) {
|
||||
return (
|
||||
<button
|
||||
disabled={disabled}
|
||||
@@ -29,4 +32,25 @@ function Button({
|
||||
)
|
||||
}
|
||||
|
||||
export { Button }
|
||||
function LinkButton<
|
||||
TRouter extends AnyRouter = RegisteredRouter,
|
||||
const TFrom extends string = string,
|
||||
const TTo extends string | undefined = undefined,
|
||||
const TMaskFrom extends string = TFrom,
|
||||
const TMaskTo extends string = "",
|
||||
>({
|
||||
ref,
|
||||
variant = "normal",
|
||||
className,
|
||||
...props
|
||||
}: LinkComponentProps<"a", TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & ButtonProps) {
|
||||
return (
|
||||
<Link
|
||||
ref={ref}
|
||||
className={twMerge(VARIANT_CLASSES[variant], "disabled:text-stone-500 disabled:cursor-not-allowed", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, LinkButton }
|
||||
|
@@ -1,5 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
:root {
|
||||
font-family: monospace;
|
||||
|
Reference in New Issue
Block a user