evOo-local/apps/web/src/components/MediaLibraryFolders.tsx

import { Plural, Trans, useLingui } from "@lingui/react/macro";
import type { MediaLibrarySource } from "@rakazo/contracts";
import { Button, Input } from "@rakazo/ui-web";
import { RefreshCw, X } from "lucide-react";
import { useEffect, useId, useState } from "react";
import { rpc } from "../lib/rpc";
import { Shimmer } from "./ai/primitives";

const POLL_MS = 2000;

/** Folders on the server whose photos and videos the owner's bots can search and use. */
export function MediaLibraryFolders() {
  const { t } = useLingui();
  const id = useId();
  const [sources, setSources] = useState<MediaLibrarySource[] | null>(null);
  const [folder, setFolder] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    rpc.media.library
      .list()
      .then((next) => {
        if (!cancelled) setSources(next);
      })
      .catch((err: unknown) => {
        if (!cancelled) setError(err instanceof Error ? err.message : t`Couldn't load`);
      });
    return () => {
      cancelled = true;
    };
  }, [t]);

  const syncing = sources?.some((source) => source.status === "syncing") ?? false;
  useEffect(() => {
    if (!syncing) return;
    const timer = setInterval(() => {
      rpc.media.library
        .list()
        .then(setSources)
        .catch(() => undefined);
    }, POLL_MS);
    return () => clearInterval(timer);
  }, [syncing]);

  async function act(action: () => Promise<void>) {
    if (busy) return;
    setBusy(true);
    setError(null);
    try {
      await action();
    } catch (err) {
      setError(err instanceof Error ? err.message : t`Couldn't save`);
    } finally {
      setBusy(false);
    }
  }

  function replace(next: MediaLibrarySource) {
    setSources((current) => [...(current ?? []).filter((source) => source.id !== next.id), next]);
  }

  const disabled = busy || sources === null;

  return (
    <section
      data-testid="media-library"
      className="rounded-xl border border-border px-4 py-4"
      aria-labelledby={`${id}-title`}
    >
      <h3 id={`${id}-title`} className="text-ui-body font-medium text-foreground">
        <Trans>Library</Trans>
      </h3>
      {sources?.length ? (
        <ul className="mt-3 divide-y divide-border">
          {sources.map((source) => (
            <li key={source.id} className="flex items-center gap-2 py-2">
              <div className="min-w-0 flex-1">
                <p className="truncate font-mono text-ui-body-sm text-foreground">{source.path}</p>
                {source.status === "syncing" ? (
                  <p className="text-ui-caption">
                    <Shimmer>
                      <Trans>Indexing…</Trans>
                    </Shimmer>
                  </p>
                ) : source.status === "failed" ? (
                  <p className="text-ui-caption text-destructive">{source.error}</p>
                ) : (
                  <p className="text-ui-caption text-muted-foreground">
                    <Plural value={source.assetCount} one="# file" other="# files" />
                  </p>
                )}
              </div>
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                aria-label={t`Index again`}
                disabled={disabled || source.status === "syncing"}
                onClick={() =>
                  void act(async () => {
                    replace(await rpc.media.library.sync({ sourceId: source.id }));
                  })
                }
              >
                <RefreshCw />
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                aria-label={t`Remove folder`}
                disabled={disabled}
                onClick={() =>
                  void act(async () => {
                    await rpc.media.library.remove({ sourceId: source.id });
                    setSources((current) =>
                      (current ?? []).filter((entry) => entry.id !== source.id),
                    );
                  })
                }
              >
                <X />
              </Button>
            </li>
          ))}
        </ul>
      ) : null}
      <form
        className="mt-3 flex items-center gap-2"
        onSubmit={(event) => {
          event.preventDefault();
          const path = folder.trim();
          if (!path) return;
          void act(async () => {
            replace(await rpc.media.library.add({ path }));
            setFolder("");
          });
        }}
      >
        <Input
          aria-label={t`Folder`}
          value={folder}
          disabled={disabled}
          placeholder="/srv/photos"
          autoComplete="off"
          spellCheck={false}
          onChange={(event) => setFolder(event.target.value)}
        />
        <Button type="submit" variant="secondary" disabled={disabled || !folder.trim()}>
          <Trans>Add</Trans>
        </Button>
      </form>
      {error ? (
        <p role="alert" className="mt-2 text-ui-body-sm text-destructive">
          {error}
        </p>
      ) : null}
    </section>
  );
}