pastilhas
d882e349a9
It loaded once. A bookmark is not finished when it is saved - Karakeep crawls it afterwards, and the picture, description and favicon arrive minutes later - so the panel sat on "fetching…" while the work quietly completed behind it. Worse, the page most likely to be full of unfinished ones is the FIRST page. Newest first, and the crawler works through the backlog, so a fresh import shows exactly the page with the least on it. Measured while diagnosing: 79 of 97 crawled, and all 16 pending sitting on page one - which reads as a stalled crawler and is the opposite. Polls every five seconds while anything is pending, through the same code path as a first load so a refresh cannot drift from it. Self-limiting and needs no switch: it re-arms only while something is actually pending, so a settled library makes no requests at all.
308 lines
12 KiB
TypeScript
308 lines
12 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { useSearchParams } from 'react-router';
|
|
import { useClient } from 'hooks/useClient';
|
|
import { Input } from '@/components/ui/input';
|
|
import { StickyNote, Image as ImageIcon, Link2 } from 'lucide-react';
|
|
import { ALL } from './ListsPanel';
|
|
|
|
/**
|
|
* Your saved bookmarks, as the calling Officer user.
|
|
*
|
|
* Every request goes through `/api/karakeep/api/*` — the authenticated door, which finds the caller's
|
|
* mapped account and puts THEIR key on the request. This panel holds no credential and could not send
|
|
* one if it wanted to, which is the property the whole plugin exists for.
|
|
*
|
|
* ── Search is Karakeep's, not ours ──
|
|
*
|
|
* `/bookmarks/search?q=` searches titles, notes, tags and the archived text. Re-implementing it here
|
|
* would mean pulling every bookmark to the browser to filter, and would still only see the fields we
|
|
* happened to fetch.
|
|
*/
|
|
|
|
type Asset = { id: string; assetType?: string; fileName?: string | null };
|
|
|
|
type Bookmark = {
|
|
id: string;
|
|
title?: string | null;
|
|
createdAt?: string;
|
|
tags?: { id: string; name: string }[];
|
|
assets?: Asset[];
|
|
content?:
|
|
| {
|
|
type: 'link';
|
|
url: string;
|
|
title?: string | null;
|
|
description?: string | null;
|
|
imageUrl?: string | null;
|
|
favicon?: string | null;
|
|
publisher?: string | null;
|
|
crawlStatus?: string | null;
|
|
}
|
|
| { type: 'text'; text?: string }
|
|
| { type: 'asset'; assetType?: string; fileName?: string | null };
|
|
};
|
|
|
|
type Page = { bookmarks?: Bookmark[]; nextCursor?: string | null };
|
|
|
|
export const BookmarksPanel = () => {
|
|
const client = useClient();
|
|
// `useClient()` rebuilds its verbs every render, so they must never sit in a dependency list.
|
|
const clientRef = useRef(client);
|
|
clientRef.current = client;
|
|
|
|
const [params] = useSearchParams();
|
|
const list = params.get('list') ?? ALL;
|
|
|
|
const [query, setQuery] = useState('');
|
|
const [rows, setRows] = useState<Bookmark[] | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const load = useCallback(async (listId: string, search: string) => {
|
|
/*
|
|
Three endpoints, because Karakeep models them as three questions rather than one with filters:
|
|
everything, one list's contents, and a search. Search wins when there is one — narrowing a search
|
|
to a list is a fourth thing the API does not offer, and faking it by filtering here would be a
|
|
different feature wearing the same label.
|
|
*/
|
|
const path =
|
|
search.trim() ? `/karakeep/api/v1/bookmarks/search?q=${encodeURIComponent(search.trim())}`
|
|
: listId !== ALL ? `/karakeep/api/v1/lists/${encodeURIComponent(listId)}/bookmarks`
|
|
: '/karakeep/api/v1/bookmarks';
|
|
|
|
try {
|
|
const body = await clientRef.current.get<Page>(path);
|
|
setRows(body.bookmarks ?? []);
|
|
setError(null);
|
|
} catch (failure) {
|
|
setError(failure instanceof Error ? failure.message : 'Could not read your bookmarks.');
|
|
setRows(null);
|
|
}
|
|
}, []);
|
|
|
|
/*
|
|
`tick` exists to re-ask the same question, which is different from asking a new one.
|
|
|
|
Everything else in this effect is a NEW question — a different list, different words. This one is
|
|
the poll below saying "ask that again", and it has to go through the same path so a refresh cannot
|
|
drift from a first load.
|
|
*/
|
|
const [tick, setTick] = useState(0);
|
|
|
|
// Debounced: long enough that a five-letter word is one query instead of five, short enough that the
|
|
// grid moves while you type.
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => void load(list, query), 250);
|
|
return () => clearTimeout(timer);
|
|
}, [list, query, load, tick]);
|
|
|
|
const waiting = rows?.filter((b) => b.content?.type === 'link' && b.content.crawlStatus === 'pending').length ?? 0;
|
|
|
|
/*
|
|
── While anything is still being fetched, ask again ──
|
|
|
|
Without this the panel loads once and never moves. That is wrong here in a way it would not be for
|
|
most lists, because a bookmark is not finished when it is saved: Karakeep crawls it afterwards, and
|
|
the picture, the description and the favicon all arrive minutes later.
|
|
|
|
Worse, the page most likely to be full of unfinished ones is the FIRST page — newest first, and the
|
|
crawler works through the backlog — so a fresh import shows a grid of "fetching…" that never
|
|
resolves until somebody reloads by hand. Measured on this instance: 79 of 97 crawled, and all 16
|
|
pending sitting on page one.
|
|
|
|
The poll is self-limiting and needs no switch: it only re-arms while something is actually pending,
|
|
so a settled library makes no requests at all. Five seconds because a crawl takes a few and nobody
|
|
is watching the clock.
|
|
*/
|
|
useEffect(() => {
|
|
if (waiting === 0) return;
|
|
const timer = setTimeout(() => setTick((n) => n + 1), 5000);
|
|
return () => clearTimeout(timer);
|
|
}, [waiting, tick]);
|
|
|
|
return (
|
|
<div className="flex size-full flex-col">
|
|
<header className="border-b p-2">
|
|
<Input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder="Search titles, notes, tags and saved text…"
|
|
className="h-8 text-xs"
|
|
/>
|
|
<div className="mt-1 flex flex-wrap gap-x-3 text-[10px] text-muted-foreground">
|
|
{query.trim() && list !== ALL && <span>Searching everything, not just this list.</span>}
|
|
{/*
|
|
Said, rather than left as a grid of blank tiles.
|
|
|
|
A bookmark has no picture until Karakeep has crawled it, and on a fresh import that is most
|
|
of them for a while. Without this the panel looks broken at exactly the moment it is working.
|
|
*/}
|
|
{waiting > 0 && (
|
|
<span>
|
|
{waiting} still being fetched — this updates itself as they finish.
|
|
</span>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
{error && (
|
|
<p className="px-3 py-2 text-xs text-destructive">
|
|
{error}
|
|
{error.includes('no Karakeep account') && ' — the owner maps accounts in Settings.'}
|
|
</p>
|
|
)}
|
|
|
|
{rows === null && !error ? (
|
|
<Centred>Loading…</Centred>
|
|
) : rows && rows.length === 0 ? (
|
|
<Centred>{query.trim() ? `Nothing matches “${query.trim()}”.` : 'Nothing saved here yet.'}</Centred>
|
|
) : (
|
|
<div className="flex-1 overflow-auto p-3">
|
|
{/*
|
|
`auto-fill` with a minimum, not a fixed column count: the panel is one pane of a layout the
|
|
owner can drag, so the number of columns has to follow the width it is actually given rather
|
|
than a breakpoint guessed from the window.
|
|
*/}
|
|
<div className="grid grid-cols-[repeat(auto-fill,minmax(210px,1fr))] gap-3">
|
|
{rows?.map((bookmark) => (
|
|
<Card key={bookmark.id} bookmark={bookmark} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Card = ({ bookmark }: { bookmark: Bookmark }) => {
|
|
const content = bookmark.content;
|
|
const link = content?.type === 'link' ? content : null;
|
|
const url = link?.url ?? null;
|
|
|
|
const title =
|
|
bookmark.title ||
|
|
link?.title ||
|
|
(content?.type === 'asset' ? content.fileName : null) ||
|
|
(content?.type === 'text' ? content.text?.slice(0, 120) : null) ||
|
|
url ||
|
|
'Untitled';
|
|
|
|
const host = (() => {
|
|
if (!url) return null;
|
|
try {
|
|
return new URL(url).hostname.replace(/^www\./, '');
|
|
} catch {
|
|
// A saved address that does not parse is still a bookmark; it just has no domain to show.
|
|
return null;
|
|
}
|
|
})();
|
|
|
|
const Body = (
|
|
<>
|
|
<Picture bookmark={bookmark} title={title} />
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1 p-2">
|
|
<p className="line-clamp-2 text-xs leading-snug">{title}</p>
|
|
|
|
{host && (
|
|
<p className="flex items-center gap-1 truncate text-[10px] text-muted-foreground">
|
|
{link?.favicon && (
|
|
// Decorative: the domain beside it already says what this is.
|
|
<img src={link.favicon} alt="" loading="lazy" referrerPolicy="no-referrer" className="size-3 shrink-0 rounded-sm" />
|
|
)}
|
|
<span className="truncate">{host}</span>
|
|
</p>
|
|
)}
|
|
|
|
{bookmark.tags && bookmark.tags.length > 0 && (
|
|
<p className="mt-auto flex flex-wrap gap-1 pt-1 text-[10px] text-muted-foreground">
|
|
{bookmark.tags.slice(0, 3).map((tag) => (
|
|
<span key={tag.id} className="rounded bg-muted px-1 py-px">
|
|
{tag.name}
|
|
</span>
|
|
))}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
const shell = 'flex flex-col overflow-hidden rounded-md border border-border bg-card transition-colors hover:border-foreground/25';
|
|
|
|
// A note or an asset has nowhere to go, so it is not dressed as something clickable.
|
|
return url ? (
|
|
<a href={url} target="_blank" rel="noreferrer noopener" className={shell}>
|
|
{Body}
|
|
</a>
|
|
) : (
|
|
<div className={shell}>{Body}</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* The card's picture, or an honest stand-in.
|
|
*
|
|
* ── Why the ORIGIN's image and not Karakeep's screenshot ──
|
|
*
|
|
* A crawled bookmark carries both: `content.imageUrl`, the page's own og:image, and a `screenshot`
|
|
* asset that Karakeep took and stores itself. The screenshot is the better picture — it is archived, it
|
|
* cannot rot, and it never leaves the house.
|
|
*
|
|
* It is also unreachable from an `<img>`. Officer authenticates with a bearer token in a header, and a
|
|
* browser cannot put a header on an image request, so `/api/karakeep/api/assets/<id>` answers 401 from
|
|
* markup. Fetching each one as a blob through the client would work and costs a request, a decode and an
|
|
* object URL per card, which is a lot of machinery for a thumbnail.
|
|
*
|
|
* So this uses the origin's image, with `referrerPolicy="no-referrer"` so the sites being fetched from
|
|
* learn nothing about where the request came from, and `loading="lazy"` so a long grid does not fetch a
|
|
* hundred of them at once. The honest cost: viewing your bookmarks makes requests to the sites they
|
|
* point at. Proxying the archived asset instead is the fix if that matters — see the note above for what
|
|
* it would take.
|
|
*/
|
|
const Picture = ({ bookmark, title }: { bookmark: Bookmark; title: string }) => {
|
|
const [broken, setBroken] = useState(false);
|
|
const content = bookmark.content;
|
|
const image = content?.type === 'link' ? content.imageUrl : null;
|
|
const pending = content?.type === 'link' && content.crawlStatus === 'pending';
|
|
|
|
if (image && !broken) {
|
|
return (
|
|
<div className="aspect-video w-full overflow-hidden bg-muted">
|
|
<img
|
|
src={image}
|
|
alt=""
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer"
|
|
onError={() => setBroken(true)}
|
|
className="size-full object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/*
|
|
The stand-in, which is deliberately not a grey rectangle.
|
|
|
|
Three states land here and they are not the same: not crawled yet, crawled with no picture to find,
|
|
and a picture that failed to load. The first is temporary and the others are permanent, so the first
|
|
says so — otherwise a fresh import reads as a broken panel for as long as the crawler takes.
|
|
*/
|
|
const Icon = content?.type === 'text' ? StickyNote : content?.type === 'asset' ? ImageIcon : Link2;
|
|
|
|
return (
|
|
<div className="flex aspect-video w-full flex-col items-center justify-center gap-1 bg-muted/40 px-2">
|
|
<Icon className="size-5 text-muted-foreground/50" />
|
|
{pending ? (
|
|
<span className="text-[10px] text-muted-foreground/70">fetching…</span>
|
|
) : (
|
|
<span className="line-clamp-2 text-center text-[10px] text-muted-foreground/60">{title}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Centred = ({ children }: { children: React.ReactNode }) => (
|
|
<div className="flex flex-1 items-center justify-center p-6 text-center text-xs text-muted-foreground">
|
|
{children}
|
|
</div>
|
|
);
|