kennethnym/markone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement bookmark tagging

Browse Source
This commit is contained in:
Kenneth
2025-05-21 13:18:16 +01:00
parent f048dee6e2
commit b0d458e5ca
20 changed files with 826 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/web/src/app/bookmarks/$bookmarkId.tsx
View File

@@ -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>