feat(gif-picker): add gif groups

feat(gif-picker): increase default size

packages/chat/src/components/media/gifPicker.tsx

@@ -0,0 +1,709 @@
+import { Debouncer } from "@tanstack/pacer";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import {
+  Button,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@methanium/ui";
+import type { ChatPickerMediaGroup } from "@tensamin/shared/data";
+import { useStorage } from "@tensamin/storage/context";
+import { ArrowLeft, Loader2, Search } from "lucide-react";
+import MediaSaveButton from "./mediaSaveButton";
+import { getUngroupedMedia } from "./mediaGroups";
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  startTransition,
+} from "react";
+
+const klipyApiKey =
+  "KzyghnvdlaHjJuDycVx6rLIEu5eaacPyFERieoI7L8UWLt2rnJloL45UL5MVc9IG";
+const klipyBaseUrl = "https://api.klipy.com/api/v1";
+const pageSize = 24;
+const minColumnWidth = 200;
+
+function getColumnCount(width: number, itemCount: number) {
+  return Math.max(
+    1,
+    Math.min(itemCount || 1, Math.floor(width / minColumnWidth)),
+  );
+}
+
+type KlipyKind = "gif" | "meme";
+
+type KlipyItem = {
+  id: number | string;
+  title?: string;
+  file?: Record<
+    string,
+    | Record<
+        string,
+        | {
+            url?: string;
+            width?: number;
+            height?: number;
+          }
+        | undefined
+      >
+    | undefined
+  >;
+  blur_preview?: string;
+};
+
+type PickerMedia = {
+  key: React.Key;
+  url: string;
+  alt: string;
+  width?: number;
+  height?: number;
+};
+
+function distributeByHeight<T>(
+  items: T[],
+  columnCount: number,
+  getAspectRatio: (item: T) => number,
+) {
+  const columns = Array.from({ length: columnCount }, () => [] as T[]);
+  const columnHeights = Array.from({ length: columnCount }, () => 0);
+
+  for (const item of items) {
+    const shortestColumnIndex = columnHeights.indexOf(
+      Math.min(...columnHeights),
+    );
+
+    columns[shortestColumnIndex].push(item);
+    columnHeights[shortestColumnIndex] += getAspectRatio(item);
+  }
+
+  return columns;
+}
+
+function getKlipyPath(kind: KlipyKind) {
+  const resource = kind === "gif" ? "gifs" : "static-memes";
+
+  return `${resource}/search`;
+}
+
+async function fetchKlipyPage({
+  kind,
+  page,
+  search,
+}: {
+  kind: KlipyKind;
+  page: number;
+  search: string;
+}): Promise<{
+  items: KlipyItem[];
+  currentPage: number;
+  hasNext: boolean;
+}> {
+  const params = new URLSearchParams({
+    page: String(page),
+    per_page: String(pageSize),
+    content_filter: "medium",
+  });
+
+  if (search !== "") {
+    params.set("q", search);
+  }
+
+  if (kind === "gif") {
+    params.set("format_filter", "gif,webp");
+  }
+
+  const response = await fetch(
+    `${klipyBaseUrl}/${klipyApiKey}/${getKlipyPath(kind)}?${params}`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`Klipy request failed with status ${response.status}`);
+  }
+
+  const body = (await response.json()) as {
+    data?: {
+      data?: KlipyItem[];
+      current_page?: number;
+      has_next?: boolean;
+    };
+  };
+  const data = body.data;
+
+  return {
+    items: data?.data ?? [],
+    currentPage: data?.current_page ?? page,
+    hasNext: data?.has_next ?? false,
+  };
+}
+
+function getFormat(item: KlipyItem, size: string, format: string) {
+  return item.file?.[size]?.[format];
+}
+
+function pickDisplayMedia(kind: KlipyKind, item: KlipyItem) {
+  if (kind === "gif") {
+    return (
+      getFormat(item, "sm", "webp") ??
+      getFormat(item, "md", "webp") ??
+      getFormat(item, "sm", "gif") ??
+      getFormat(item, "md", "gif") ??
+      getFormat(item, "hd", "webp") ??
+      getFormat(item, "hd", "gif")
+    );
+  }
+
+  return (
+    getFormat(item, "sm", "webp") ??
+    getFormat(item, "md", "webp") ??
+    getFormat(item, "sm", "png") ??
+    getFormat(item, "md", "png") ??
+    getFormat(item, "hd", "webp") ??
+    getFormat(item, "hd", "png")
+  );
+}
+
+function pickSelectionUrl(kind: KlipyKind, item: KlipyItem) {
+  if (kind === "gif") {
+    return (
+      getFormat(item, "md", "gif")?.url ??
+      getFormat(item, "sm", "gif")?.url ??
+      getFormat(item, "hd", "gif")?.url
+    );
+  }
+
+  return (
+    getFormat(item, "md", "png")?.url ??
+    getFormat(item, "md", "webp")?.url ??
+    getFormat(item, "sm", "png")?.url ??
+    getFormat(item, "sm", "webp")?.url ??
+    getFormat(item, "hd", "png")?.url ??
+    getFormat(item, "hd", "webp")?.url
+  );
+}
+
+function useMeasuredWidth() {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [scrollWidth, setScrollWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const element = scrollRef.current;
+
+    if (!element || typeof ResizeObserver === "undefined") return;
+
+    const updateWidth = () => setScrollWidth(element.clientWidth);
+    const observer = new ResizeObserver(updateWidth);
+
+    updateWidth();
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return [scrollRef, scrollWidth] as const;
+}
+
+function useImageSizes(urls: string[]) {
+  const [sizes, setSizes] = useState<
+    Record<string, { width: number; height: number }>
+  >({});
+
+  useEffect(() => {
+    let active = true;
+
+    for (const url of urls) {
+      if (sizes[url]) continue;
+
+      const image = new Image();
+
+      image.onload = () => {
+        if (!active) return;
+
+        setSizes((current) => ({
+          ...current,
+          [url]: {
+            width: image.naturalWidth,
+            height: image.naturalHeight,
+          },
+        }));
+      };
+      image.src = url;
+    }
+
+    return () => {
+      active = false;
+    };
+  }, [sizes, urls]);
+
+  return sizes;
+}
+
+function MediaGrid({
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  items,
+  onLoadMore,
+  onSelect,
+  resizeWidth,
+}: {
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  items: PickerMedia[];
+  onLoadMore?: () => void;
+  onSelect: (url: string) => void;
+  resizeWidth?: number;
+}) {
+  const [scrollRef, measuredWidth] = useMeasuredWidth();
+  const columnWidth = resizeWidth ?? measuredWidth;
+  const columnCount = getColumnCount(columnWidth, items.length);
+  const columns = distributeByHeight(items, columnCount, (item) => {
+    if (!item.width || !item.height) return 1;
+
+    return item.height / item.width;
+  });
+
+  function handleScroll(event: React.UIEvent<HTMLDivElement>) {
+    const element = event.currentTarget;
+    const distanceFromBottom =
+      element.scrollHeight - element.scrollTop - element.clientHeight;
+
+    if (
+      distanceFromBottom > 240 ||
+      !hasNextPage ||
+      isFetchingNextPage ||
+      !onLoadMore
+    ) {
+      return;
+    }
+
+    onLoadMore();
+  }
+
+  useEffect(() => {
+    const element = scrollRef.current;
+
+    if (!element || !hasNextPage || isFetchingNextPage || !onLoadMore) return;
+
+    const distanceFromBottom =
+      element.scrollHeight - element.scrollTop - element.clientHeight;
+
+    if (distanceFromBottom <= 240) {
+      onLoadMore();
+    }
+  }, [
+    columnCount,
+    hasNextPage,
+    isFetchingNextPage,
+    items.length,
+    onLoadMore,
+    scrollRef,
+  ]);
+
+  return (
+    <div
+      ref={scrollRef}
+      className="min-h-0 w-full flex-1 overflow-y-auto pr-1"
+      onScroll={handleScroll}
+    >
+      <div className="flex w-full items-start gap-2">
+        {columns.map((column, columnIndex) => (
+          <div key={columnIndex} className="flex min-w-0 flex-1 flex-col gap-2">
+            {column.map((item) => (
+              <button
+                key={item.key}
+                className="group overflow-hidden rounded-lg text-left transition hover:border-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={() => onSelect(item.url)}
+                type="button"
+              >
+                <img
+                  alt={item.alt}
+                  className="block h-auto w-full object-contain"
+                  height={item.height}
+                  loading="lazy"
+                  src={item.url}
+                  width={item.width}
+                />
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div>
+        {hasNextPage ? (
+          <div className="flex h-20 items-center justify-center text-muted-foreground">
+            <Loader2 className="mr-2 size-4 animate-spin" />
+            Loading more...
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function KlipyPanel({
+  kind,
+  onSelect,
+  resizeWidth,
+  searchString,
+}: {
+  kind: KlipyKind;
+  onSelect: (url: string) => void;
+  resizeWidth?: number;
+  searchString: string;
+}) {
+  const query = useInfiniteQuery({
+    queryKey: ["klipy", kind, searchString],
+    initialPageParam: 1,
+    enabled: searchString !== "",
+    queryFn: ({ pageParam }) =>
+      fetchKlipyPage({
+        kind,
+        page: Number(pageParam),
+        search: searchString,
+      }),
+    getNextPageParam: (lastPage) =>
+      lastPage.hasNext ? lastPage.currentPage + 1 : undefined,
+  });
+  const items: PickerMedia[] =
+    query.data?.pages.flatMap((page) =>
+      page.items.flatMap((item) => {
+        const displayMedia = pickDisplayMedia(kind, item);
+        const selectionUrl = pickSelectionUrl(kind, item);
+
+        if (!displayMedia?.url || !selectionUrl) return [];
+
+        return [
+          {
+            key: item.id,
+            url: selectionUrl,
+            alt: item.title ?? "Klipy result",
+            width: displayMedia.width,
+            height: displayMedia.height,
+          },
+        ];
+      }),
+    ) ?? [];
+
+  if (searchString === "") {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center gap-5 text-center text-muted-foreground">
+        <Search className="size-12" />
+        <p className="w-50 text-lg text-foreground">
+          {kind === "gif" && 'Try searching for "Funny cat"'}
+          {kind === "meme" &&
+            'Try searching for "Spiderman pointing at Spiderman"'}
+        </p>
+      </div>
+    );
+  }
+
+  if (query.isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <Loader2 className="mr-2 size-4 animate-spin" />
+        Loading...
+      </div>
+    );
+  }
+
+  if (query.isError) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+        <p>Failed to load {kind === "gif" ? "GIFs" : "memes"}.</p>
+        <Button
+          onClick={() => void query.refetch()}
+          size="sm"
+          variant="secondary"
+        >
+          Try again
+        </Button>
+      </div>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-center text-muted-foreground">
+        No {kind === "gif" ? "GIFs" : "memes"} found.
+      </div>
+    );
+  }
+
+  return (
+    <MediaGrid
+      hasNextPage={query.hasNextPage}
+      isFetchingNextPage={query.isFetchingNextPage}
+      items={items}
+      onLoadMore={() => void query.fetchNextPage()}
+      onSelect={onSelect}
+      resizeWidth={resizeWidth}
+    />
+  );
+}
+
+function SavedPanel({
+  groups,
+  onSelect,
+  onSavedMediaChange,
+  onSavedMediaGroupsChange,
+  resizeWidth,
+  urls,
+}: {
+  groups: ChatPickerMediaGroup[];
+  onSelect: (url: string) => void;
+  onSavedMediaChange: (savedMedia: string[]) => void;
+  onSavedMediaGroupsChange: (groups: ChatPickerMediaGroup[]) => void;
+  resizeWidth?: number;
+  urls: string[];
+}) {
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [scrollRef, measuredWidth] = useMeasuredWidth();
+  const selectedGroup = groups.find((group) => group.id === selectedGroupId);
+  const sortedGroups = [...groups].sort((left, right) =>
+    left.name.localeCompare(right.name),
+  );
+  const visibleUrls = selectedGroup
+    ? selectedGroup.media.filter((url) => urls.includes(url))
+    : getUngroupedMedia(urls, groups);
+  const imageSizes = useImageSizes(visibleUrls);
+  const columnWidth = resizeWidth ?? measuredWidth;
+  const columnCount = getColumnCount(columnWidth, visibleUrls.length);
+  const groupColumnCount = getColumnCount(columnWidth, groups.length);
+  const columns = distributeByHeight(visibleUrls, columnCount, (url) => {
+    const size = imageSizes[url];
+
+    if (!size?.width || !size.height) return 1;
+
+    return size.height / size.width;
+  });
+
+  if (urls.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-center text-muted-foreground">
+        Saved media will appear here.
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className="min-h-0 w-full flex-1 overflow-y-auto pr-1">
+      {selectedGroup ? (
+        <div className="mb-2 flex items-center gap-2">
+          <Button
+            variant="ghost"
+            aria-label="Back to saved media groups"
+            className="h-8 w-8 p-0"
+            onClick={() => setSelectedGroupId(null)}
+          >
+            <ArrowLeft className="size-4" />
+          </Button>
+          <span className="font-medium">{selectedGroup.name}</span>
+        </div>
+      ) : groups.length > 0 ? (
+        <div
+          className="mb-2 grid gap-2"
+          style={{
+            gridTemplateColumns: `repeat(${groupColumnCount}, minmax(0, 1fr))`,
+          }}
+        >
+          {sortedGroups.map((group) => (
+            <button
+              key={group.id}
+              className="relative h-24 overflow-hidden rounded-lg border bg-muted bg-cover bg-center p-1 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              style={{
+                backgroundImage: `url(${JSON.stringify(group.media[0])})`,
+              }}
+              type="button"
+              onClick={() => setSelectedGroupId(group.id)}
+            >
+              <span className="absolute inset-0 bg-black/40" />
+              <span className="relative flex h-full items-center justify-center font-medium text-white drop-shadow-sm">
+                {group.name}
+              </span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {visibleUrls.length === 0 ? (
+        <div className="flex min-h-32 items-center justify-center text-center text-muted-foreground">
+          {selectedGroup ? "This group is empty." : "No ungrouped media."}
+        </div>
+      ) : null}
+
+      <div className="flex w-full items-start gap-2">
+        {columns.map((column, columnIndex) => (
+          <div key={columnIndex} className="flex min-w-0 flex-1 flex-col gap-2">
+            {column.map((url) => {
+              const size = imageSizes[url];
+
+              return (
+                <div
+                  key={url}
+                  className="group relative overflow-hidden rounded-lg transition hover:border-foreground/30"
+                >
+                  <button
+                    className="block w-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    onClick={() => onSelect(url)}
+                    type="button"
+                  >
+                    <img
+                      alt="Saved media"
+                      className="block h-auto w-full object-contain"
+                      height={size?.height}
+                      loading="lazy"
+                      src={url}
+                      width={size?.width}
+                    />
+                  </button>
+                  <MediaSaveButton
+                    ariaLabel="Unsave media"
+                    defaultSaved
+                    onSavedMediaChange={onSavedMediaChange}
+                    onSavedMediaGroupsChange={onSavedMediaGroupsChange}
+                    url={url}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function GifPicker({
+  onSelect,
+  resizeHeight,
+  resizeWidth,
+}: {
+  onSelect: (url: string) => void;
+  resizeHeight?: number;
+  resizeWidth?: number;
+}) {
+  const { load, save } = useStorage();
+  const [tab, setTab] = useState<KlipyKind | "saved">("gif");
+  const [searchString, setSearchString] = useState("");
+  const [debouncedSearchString, setDebouncedSearchString] = useState("");
+  const [savedMedia, setSavedMedia] = useState<string[]>([]);
+  const [savedMediaGroups, setSavedMediaGroups] = useState<
+    ChatPickerMediaGroup[]
+  >([]);
+  const didLoadLastTabRef = useRef(false);
+  const searchDebouncerRef = useRef<Debouncer<(value: string) => void> | null>(
+    null,
+  );
+
+  if (searchDebouncerRef.current === null) {
+    searchDebouncerRef.current = new Debouncer(
+      (value) => {
+        startTransition(() => {
+          setDebouncedSearchString(value.trim());
+        });
+      },
+      { wait: 300 },
+    );
+  }
+
+  useEffect(() => {
+    return () => {
+      searchDebouncerRef.current?.cancel();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (tab !== "saved") return;
+
+    void Promise.all([
+      load("chat_picker_saved_media"),
+      load("chat_picker_saved_media_groups"),
+    ]).then(([nextSavedMedia, nextGroups]) => {
+      setSavedMedia(nextSavedMedia);
+      setSavedMediaGroups(nextGroups);
+    });
+  }, [load, tab]);
+
+  useEffect(() => {
+    void load("chat_picker_last_tab").then((savedTab) => {
+      setTab(savedTab);
+      didLoadLastTabRef.current = true;
+    });
+  }, [load]);
+
+  useEffect(() => {
+    if (!didLoadLastTabRef.current) return;
+
+    void save("chat_picker_last_tab", tab);
+  }, [save, tab]);
+
+  function handleTabChange(nextTab: string) {
+    if (nextTab !== "gif" && nextTab !== "meme" && nextTab !== "saved") return;
+
+    setTab(nextTab);
+  }
+
+  function handleSearchChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const nextValue = event.target.value;
+
+    setSearchString(nextValue);
+    searchDebouncerRef.current?.maybeExecute(nextValue);
+  }
+
+  return (
+    <Tabs
+      className="h-full min-h-0 w-full overflow-hidden"
+      style={resizeHeight ? { height: `${resizeHeight}px` } : undefined}
+      value={tab}
+      onValueChange={handleTabChange}
+    >
+      <TabsList className="w-full">
+        <TabsTrigger value="gif">GIFs</TabsTrigger>
+        <TabsTrigger value="meme">Memes</TabsTrigger>
+        <TabsTrigger value="saved">Saved</TabsTrigger>
+      </TabsList>
+      <TabsContent value="gif" className="flex min-h-0 w-full flex-col gap-2">
+        <Input
+          placeholder="Search Klipy..."
+          value={searchString}
+          onChange={handleSearchChange}
+        />
+        <KlipyPanel
+          kind="gif"
+          onSelect={onSelect}
+          resizeWidth={resizeWidth}
+          searchString={debouncedSearchString}
+        />
+      </TabsContent>
+      <TabsContent value="meme" className="flex min-h-0 w-full flex-col gap-2">
+        <Input
+          placeholder="Search Klipy..."
+          value={searchString}
+          onChange={handleSearchChange}
+        />
+        <KlipyPanel
+          kind="meme"
+          onSelect={onSelect}
+          resizeWidth={resizeWidth}
+          searchString={debouncedSearchString}
+        />
+      </TabsContent>
+      <TabsContent
+        value="saved"
+        className="flex min-h-0 w-full flex-col overflow-hidden"
+      >
+        <SavedPanel
+          groups={savedMediaGroups}
+          onSelect={onSelect}
+          onSavedMediaChange={setSavedMedia}
+          onSavedMediaGroupsChange={setSavedMediaGroups}
+          resizeWidth={resizeWidth}
+          urls={savedMedia}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}

packages/chat/src/components/media/media.tsx

@@ -0,0 +1,301 @@
+import { Text } from "@methanium/ui/markdown";
+import { useStorage } from "@tensamin/storage/context";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@methanium/ui";
+import { toast } from "@tensamin/shared/log";
+import {
+  Check,
+  Copy,
+  ExternalLink,
+  TriangleAlert,
+  X,
+  ZoomIn,
+} from "lucide-react";
+import { useState, useMemo, useEffect, useRef, type WheelEvent } from "react";
+import MediaSaveButton from "./mediaSaveButton";
+import { useUserFields } from "@tensamin/user/context";
+
+const zoomLevels = [1, 1.5, 2, 3];
+
+export default function Media({
+  link,
+  senderId,
+  time,
+}: {
+  link: string;
+  senderId: number;
+  time: string;
+}) {
+  const { load } = useStorage();
+
+  const [trustedDomains, setTrustedDomains] = useState<string[]>([]);
+  const [hidden, setHidden] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [zoomLevel, setZoomLevel] = useState(0);
+  const wheelDelta = useRef(0);
+  const hostname = useMemo(() => new URL(link).hostname, [link]);
+
+  const { data: user } = useUserFields(senderId, ["Avatar", "Display"]);
+  const avatar = user?.Avatar
+    ? `data:image/webp;base64,${user.Avatar}`
+    : undefined;
+
+  useEffect(() => {
+    load("chat_trusted_domains").then(setTrustedDomains);
+  }, [load]);
+
+  const changeZoom = (change: number) => {
+    setZoomLevel((level) =>
+      Math.max(0, Math.min(zoomLevels.length - 1, level + change)),
+    );
+  };
+
+  const handleWheel = (event: WheelEvent) => {
+    wheelDelta.current += event.deltaY;
+
+    if (Math.abs(wheelDelta.current) < 50) return;
+
+    changeZoom(wheelDelta.current < 0 ? 1 : -1);
+    wheelDelta.current = 0;
+  };
+
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+
+    if (copied) {
+      setTimeout(() => {
+        if (cancelled) return;
+        setCopied(false);
+      }, 1000);
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [copied]);
+  const copyImage = async () => {
+    try {
+      if (!navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
+        throw new Error("Image clipboard access is not supported.");
+      }
+
+      const image = (async () => {
+        const response = await fetch(link);
+        if (!response.ok) {
+          throw new Error(`Failed to download image (${response.status}).`);
+        }
+
+        const blob = await response.blob();
+        if (blob.type === "image/png") return blob;
+
+        const bitmap = await createImageBitmap(blob);
+        try {
+          const canvas = document.createElement("canvas");
+          canvas.width = bitmap.width;
+          canvas.height = bitmap.height;
+          const context = canvas.getContext("2d");
+
+          if (!context) {
+            throw new Error("Failed to prepare the image for copying.");
+          }
+
+          context.drawImage(bitmap, 0, 0);
+          return await new Promise<Blob>((resolve, reject) => {
+            canvas.toBlob(
+              (convertedBlob) =>
+                convertedBlob
+                  ? resolve(convertedBlob)
+                  : reject(new Error("Failed to convert the image to PNG.")),
+              "image/png",
+            );
+          });
+        } finally {
+          bitmap.close();
+        }
+      })();
+
+      await navigator.clipboard.write([
+        new ClipboardItem({ "image/png": image }),
+      ]);
+      setCopied(true);
+    } catch (error) {
+      toast("error", "Failed to copy image", String(error));
+    }
+  };
+
+  return trustedDomains.includes(hostname) ? (
+    <div className="group relative inline-block">
+      {hidden ? (
+        <Text value={link} />
+      ) : (
+        <MediaSaveButton className="top-2" url={link} />
+      )}
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={(open) => {
+          setDialogOpen(open);
+          if (!open) {
+            setZoomLevel(0);
+            wheelDelta.current = 0;
+          }
+        }}
+      >
+        <DialogTrigger
+          render={({ onClick }) => (
+            <img
+              onClick={onClick}
+              src={link}
+              hidden={hidden}
+              onLoad={() => setHidden(false)}
+              className="max-h-70 max-w-70 py-1 rounded-lg cursor-pointer"
+            />
+          )}
+        />
+        <DialogContent
+          showCloseButton={false}
+          onWheel={handleWheel}
+          className="bg-black/50 border-0! w-screen! h-screen! max-w-screen! rounded-none! p-0!"
+        >
+          <div className="relative z-10 flex w-full h-full justify-between p-7 items-start pointer-events-none">
+            <div
+              className={`flex gap-2 items-center transition-opacity duration-200 ${zoomLevel === 0 ? "opacity-100" : "pointer-events-none opacity-0"}`}
+              inert={zoomLevel !== 0}
+            >
+              <Avatar className="size-10">
+                <AvatarImage src={avatar} />
+                <AvatarFallback className="text-lg">
+                  {user?.Display.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col">
+                <p className="text-lg font-semibold">{user?.Display}</p>
+                <p className="text-sm text-muted-foreground">{time}</p>
+              </div>
+            </div>
+            <div className="flex gap-3 pointer-events-auto">
+              <div
+                className={`flex ${zoomLevel === 0 ? "gap-1" : ""} bg-card rounded-lg p-1`}
+              >
+                <Tooltip>
+                  <TooltipTrigger
+                    render={({ ref }) => (
+                      <Button
+                        ref={ref}
+                        onClick={() =>
+                          setZoomLevel(
+                            (level) => (level + 1) % zoomLevels.length,
+                          )
+                        }
+                        aria-label={`Zoom ${zoomLevel + 1}/4`}
+                        className="w-9! h-9!"
+                        variant="ghost"
+                      >
+                        <ZoomIn />
+                      </Button>
+                    )}
+                  />
+                  <TooltipContent>Zoom {zoomLevel + 1}/4</TooltipContent>
+                </Tooltip>
+                <div
+                  className={`flex overflow-hidden transition-[width,opacity] duration-200 ${zoomLevel === 0 ? "w-18 opacity-100" : "pointer-events-none w-0 opacity-0"}`}
+                  inert={zoomLevel !== 0}
+                >
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={({ ref }) => (
+                        <Button
+                          ref={ref}
+                          onClick={copyImage}
+                          aria-label="Copy image"
+                          className="w-9! h-9!"
+                          variant="ghost"
+                        >
+                          {copied ? <Check /> : <Copy />}
+                        </Button>
+                      )}
+                    />
+                    <TooltipContent>
+                      {copied ? "Copied!" : "Copy image"}
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={({ ref }) => (
+                        <a
+                          ref={ref}
+                          href={link}
+                          target="_blank"
+                          className="w-9! h-9!"
+                        >
+                          <Button className="w-9! h-9!" variant="ghost">
+                            <ExternalLink />
+                          </Button>
+                        </a>
+                      )}
+                    />
+                    <TooltipContent>Open in browser</TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>
+              <div className="flex bg-card rounded-lg p-1">
+                <DialogClose
+                  render={({ onClick }) => (
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={({ ref }) => (
+                          <Button
+                            ref={ref}
+                            onClick={onClick}
+                            className="w-9! h-9!"
+                            variant="ghost"
+                          >
+                            <X />
+                          </Button>
+                        )}
+                      />
+                      <TooltipContent>Close</TooltipContent>
+                    </Tooltip>
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+          <img
+            src={link}
+            hidden={hidden}
+            onLoad={() => setHidden(false)}
+            style={{
+              transform: `translate(-50%, -50%) scale(${zoomLevels[zoomLevel]})`,
+            }}
+            className="h-[80vh] rounded-lg object-cover absolute top-1/2 left-1/2 transition-transform duration-200"
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  ) : (
+    <div className="flex gap-1 items-center">
+      <Tooltip>
+        <TooltipTrigger
+          render={<TriangleAlert className="size-4 stroke-yellow-400" />}
+        />
+        <TooltipContent>
+          Link embeds can get your IP-Address! You can configure trusted domains
+          in the settings.
+        </TooltipContent>
+      </Tooltip>
+      <Text value={link} />
+    </div>
+  );
+}

packages/chat/src/components/media/mediaGroups.ts

@@ -0,0 +1,65 @@
+import type { ChatPickerMediaGroup } from "@tensamin/shared/data";
+
+function withoutMedia(
+  groups: ChatPickerMediaGroup[],
+  url: string,
+  keepGroupId?: string,
+) {
+  return groups
+    .map((group) => ({
+      ...group,
+      media: group.media.filter((item) => item !== url),
+    }))
+    .filter((group) => group.id === keepGroupId || group.media.length > 0);
+}
+
+export function assignMediaToGroup(
+  groups: ChatPickerMediaGroup[],
+  groupId: string | null,
+  url: string,
+) {
+  const nextGroups = withoutMedia(groups, url, groupId ?? undefined);
+
+  if (groupId === null) return nextGroups;
+
+  return nextGroups.map((group) =>
+    group.id === groupId ? { ...group, media: [url, ...group.media] } : group,
+  );
+}
+
+export function createMediaGroup(
+  groups: ChatPickerMediaGroup[],
+  id: string,
+  name: string,
+  url: string,
+) {
+  const trimmedName = name.trim();
+
+  if (
+    !trimmedName ||
+    groups.some(
+      (group) =>
+        group.name.toLocaleLowerCase() === trimmedName.toLocaleLowerCase(),
+    )
+  ) {
+    return groups;
+  }
+
+  return [
+    ...withoutMedia(groups, url),
+    { id, name: trimmedName, media: [url] },
+  ];
+}
+
+export function getMediaGroupId(groups: ChatPickerMediaGroup[], url: string) {
+  return groups.find((group) => group.media.includes(url))?.id ?? null;
+}
+
+export function getUngroupedMedia(
+  savedMedia: string[],
+  groups: ChatPickerMediaGroup[],
+) {
+  const groupedMedia = new Set(groups.flatMap((group) => group.media));
+
+  return savedMedia.filter((url) => !groupedMedia.has(url));
+}

packages/chat/src/components/media/mediaSaveButton.tsx

@@ -0,0 +1,238 @@
+import {
+  Button,
+  cn,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  useIsMobile,
+} from "@methanium/ui";
+import type { ChatPickerMediaGroup } from "@tensamin/shared/data";
+import { useStorage } from "@tensamin/storage/context";
+import { Ellipsis, Star } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  assignMediaToGroup,
+  createMediaGroup,
+  getMediaGroupId,
+} from "./mediaGroups";
+
+export default function MediaSaveButton({
+  ariaLabel,
+  className,
+  defaultSaved = false,
+  onSavedMediaChange,
+  onSavedMediaGroupsChange,
+  url,
+}: {
+  ariaLabel?: string;
+  className?: string;
+  defaultSaved?: boolean;
+  onSavedMediaChange?: (savedMedia: string[]) => void;
+  onSavedMediaGroupsChange?: (groups: ChatPickerMediaGroup[]) => void;
+  url: string;
+}) {
+  const { load, save } = useStorage();
+  const isMobile = useIsMobile();
+  const [savedMedia, setSavedMedia] = useState<string[] | null>(null);
+  const [groups, setGroups] = useState<ChatPickerMediaGroup[] | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [newGroupName, setNewGroupName] = useState("");
+  const isSaved = savedMedia ? savedMedia.includes(url) : defaultSaved;
+  const sortedGroups = [...(groups ?? [])].sort((left, right) =>
+    left.name.localeCompare(right.name),
+  );
+  const normalizedNewGroupName = newGroupName.trim().toLocaleLowerCase();
+  const canCreateGroup =
+    normalizedNewGroupName.length > 0 &&
+    !(groups ?? []).some(
+      (group) => group.name.toLocaleLowerCase() === normalizedNewGroupName,
+    );
+
+  useEffect(() => {
+    void Promise.all([
+      load("chat_picker_saved_media"),
+      load("chat_picker_saved_media_groups"),
+    ]).then(([nextSavedMedia, nextGroups]) => {
+      setSavedMedia(nextSavedMedia);
+      setGroups(nextGroups);
+    });
+  }, [load]);
+
+  async function handleSaveClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+
+    const [currentSavedMedia, currentGroups] = await Promise.all([
+      load("chat_picker_saved_media"),
+      load("chat_picker_saved_media_groups"),
+    ]);
+    const willUnsave = currentSavedMedia.includes(url);
+    const nextSavedMedia = willUnsave
+      ? currentSavedMedia.filter((item) => item !== url)
+      : [url, ...currentSavedMedia];
+
+    setSavedMedia(nextSavedMedia);
+    onSavedMediaChange?.(nextSavedMedia);
+    if (willUnsave) {
+      const nextGroups = assignMediaToGroup(currentGroups, null, url);
+      setGroups(nextGroups);
+      onSavedMediaGroupsChange?.(nextGroups);
+      await Promise.all([
+        save("chat_picker_saved_media", nextSavedMedia),
+        save("chat_picker_saved_media_groups", nextGroups),
+      ]);
+      return;
+    }
+
+    await save("chat_picker_saved_media", nextSavedMedia);
+  }
+
+  async function handleGroupClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+
+    const currentGroups = await load("chat_picker_saved_media_groups");
+    setGroups(currentGroups);
+    setSelectedGroupId(getMediaGroupId(currentGroups, url));
+    setNewGroupName("");
+    setDialogOpen(true);
+  }
+
+  async function handleGroupSave() {
+    const currentGroups = await load("chat_picker_saved_media_groups");
+    const nextGroups = assignMediaToGroup(currentGroups, selectedGroupId, url);
+
+    setGroups(nextGroups);
+    onSavedMediaGroupsChange?.(nextGroups);
+    await save("chat_picker_saved_media_groups", nextGroups);
+    setDialogOpen(false);
+  }
+
+  async function handleCreateGroup() {
+    if (!canCreateGroup) return;
+
+    const currentGroups = await load("chat_picker_saved_media_groups");
+    const groupId = crypto.randomUUID();
+    const nextGroups = createMediaGroup(
+      currentGroups,
+      groupId,
+      newGroupName,
+      url,
+    );
+
+    setGroups(nextGroups);
+    setSelectedGroupId(groupId);
+    setNewGroupName("");
+    onSavedMediaGroupsChange?.(nextGroups);
+    await save("chat_picker_saved_media_groups", nextGroups);
+    setDialogOpen(false);
+  }
+
+  return (
+    <>
+      <div
+        className={cn(
+          "absolute right-1 top-1 z-10 flex gap-1 transition-all",
+          !isMobile &&
+            "-translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100",
+          className,
+        )}
+      >
+        <Button
+          variant="secondary"
+          aria-label={ariaLabel ?? (isSaved ? "Unsave media" : "Save media")}
+          className="h-9 w-9 rounded-sm border-0! p-0"
+          onClick={handleSaveClick}
+        >
+          <Star
+            color="var(--primary-foreground-alt)"
+            className={cn(
+              "size-4.5 stroke-1.5!",
+              isSaved ? "fill-(--primary)" : "",
+            )}
+          />
+        </Button>
+        {isSaved ? (
+          <Button
+            variant="secondary"
+            aria-label="Choose saved media group"
+            className="h-9 w-9 rounded-sm border-0! p-0"
+            onClick={handleGroupClick}
+          >
+            <Ellipsis className="size-4.5 stroke-1.5!" />
+          </Button>
+        ) : null}
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent onClick={(event) => event.stopPropagation()}>
+          <DialogHeader>
+            <DialogTitle>Organize saved media</DialogTitle>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="saved-media-group">Select group</Label>
+              <Select
+                value={selectedGroupId ?? "ungrouped"}
+                onValueChange={(value) =>
+                  setSelectedGroupId(value === "ungrouped" ? null : value)
+                }
+              >
+                <SelectTrigger id="saved-media-group" className="w-full">
+                  <SelectValue>
+                    {selectedGroupId === null
+                      ? "Ungrouped"
+                      : groups?.find((group) => group.id === selectedGroupId)
+                          ?.name}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent className="p-1">
+                  <SelectItem value="ungrouped">Ungrouped</SelectItem>
+                  {sortedGroups.map((group) => (
+                    <SelectItem key={group.id} value={group.id}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="new-saved-media-group">New group</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="new-saved-media-group"
+                  placeholder="Group name"
+                  value={newGroupName}
+                  onChange={(event) => setNewGroupName(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") void handleCreateGroup();
+                  }}
+                />
+                <Button disabled={!canCreateGroup} onClick={handleCreateGroup}>
+                  Create Group
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleGroupSave}>Save</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}