karakeep/web/BookmarksPanel.tsx

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);
    }
  }, []);

  // 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]);

  const waiting = rows?.filter((b) => b.content?.type === 'link' && b.content.crawlStatus === 'pending').length ?? 0;

  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 — pictures appear 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>
);