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 { ExternalLink, FileText, StickyNote, Image as ImageIcon } 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 it, and would still only see the fields we
 * happened to fetch.
 */

/**
 * A bookmark is a discriminated union on `content.type` — a link, a note, or an asset.
 *
 * Officer reads the minimum: enough to draw a row and open the thing. Everything else stays Karakeep's,
 * which is what keeps an upstream field addition from being a change here.
 */
type Bookmark = {
  id: string;
  title?: string | null;
  createdAt?: string;
  tags?: { id: string; name: string }[];
  content?:
    | { type: 'link'; url: string; title?: string | null; description?: string | null }
    | { type: 'text'; text?: string }
    | { type: 'asset'; assetType?: string; fileName?: string | null };
};

/** Paginated, and the cursor is ignored for now — the first page is a screenful. */
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 different 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 pretending otherwise here would mean
      filtering results in the browser and calling it the same feature.
    */
    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, because this types straight into a request: long enough that a five-letter word is one
  // query instead of five, short enough that the list moves while you type.
  useEffect(() => {
    const timer = setTimeout(() => void load(list, query), 250);
    return () => clearTimeout(timer);
  }, [list, query, load]);

  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"
        />
        {query.trim() && list !== ALL && (
          // Said rather than silently ignored: the result set is not what the sidebar implies.
          <p className="mt-1 text-[10px] text-muted-foreground">Searching everything, not just this list.</p>
        )}
      </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>
      ) : (
        <ul className="flex-1 divide-y overflow-auto">
          {rows?.map((bookmark) => (
            <li key={bookmark.id} className="group px-3 py-2 hover:bg-muted/40">
              <Row bookmark={bookmark} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

const Row = ({ bookmark }: { bookmark: Bookmark }) => {
  const content = bookmark.content;
  const url = content?.type === 'link' ? content.url : null;
  const title =
    bookmark.title ||
    (content?.type === 'link' ? content.title : null) ||
    (content?.type === 'asset' ? content.fileName : null) ||
    (content?.type === 'text' ? content.text?.slice(0, 80) : null) ||
    url ||
    'Untitled';

  const Icon = content?.type === 'text' ? StickyNote : content?.type === 'asset' ? ImageIcon : FileText;

  return (
    <div className="flex items-start gap-2">
      <Icon className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
      <div className="min-w-0 flex-1">
        {url ? (
          <a
            href={url}
            target="_blank"
            rel="noreferrer noopener"
            className="flex items-center gap-1 text-xs hover:underline"
          >
            <span className="min-w-0 truncate">{title}</span>
            <ExternalLink className="size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-60" />
          </a>
        ) : (
          // A note or an asset has nowhere to go, so it is not dressed as a link.
          <span className="block truncate text-xs">{title}</span>
        )}
        {url && <p className="truncate text-[11px] text-muted-foreground">{url}</p>}

        {bookmark.tags && bookmark.tags.length > 0 && (
          <p className="mt-0.5 flex flex-wrap items-center gap-1 text-[10px] text-muted-foreground">
            {bookmark.tags.map((tag) => (
              <span key={tag.id} className="rounded bg-muted px-1 py-px">
                {tag.name}
              </span>
            ))}
          </p>
        )}
      </div>
    </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>
);