@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/views/browser/item-panel/index.tsx

@@ -0,0 +1,229 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useFavorites } from '@terrafirmagreg-team/recipe/hooks/use-favorites';
+import { useFavoriteHotkey } from '@terrafirmagreg-team/recipe/hooks/use-favorite-hotkey';
+import { useHideUnused } from '@terrafirmagreg-team/recipe/hooks/use-hide-unused';
+import { usePagedList } from '@terrafirmagreg-team/ui/hooks/page/use-paged-list';
+import { useSwipe } from '@terrafirmagreg-team/ui/hooks/use-swipe';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { type ItemPanelMode } from '@terrafirmagreg-team/recipe/lib/panel';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import { favoriteHover } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
+import { IconPager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import { FavoriteButton } from '@terrafirmagreg-team/recipe/components/views/browser/favorite-button';
+import { ItemPanelGrid } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel-grid';
+import { RecipeSettings } from '@terrafirmagreg-team/recipe/components/views/browser/settings';
+import { QuerySearch } from '@terrafirmagreg-team/recipe/components/views/browser/query-controls';
+import { Pager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import { usePanelPage } from '@terrafirmagreg-team/recipe/hooks/use-panel-page';
+import { useItemPress } from '@terrafirmagreg-team/recipe/hooks/use-item-press';
+import { usePanelCells } from '@terrafirmagreg-team/recipe/hooks/use-panel-cells';
+import { usePanelTabs } from '@terrafirmagreg-team/recipe/hooks/use-panel-tabs';
+import { PanelSkeleton } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel/skeleton';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type {
+  RecipeCompactIndex,
+  RecipeHrefOpts,
+} from '@terrafirmagreg-team/recipe/types';
+
+const CELL = 40;
+const PANEL_COLS = 10;
+
+export const ItemPanel = memo(function ItemPanel({
+  dataset,
+  lang,
+  index,
+  indexLoading,
+  names,
+  tab,
+  query,
+  setQuery,
+  isCalc,
+  nav,
+  className,
+}: {
+  dataset: DatasetRef;
+  lang: Lang;
+  index: RecipeCompactIndex | null;
+  indexLoading: boolean;
+  names: Record<string, Record<string, string>>;
+  tab?: string;
+  query: string;
+  setQuery: (query: string) => void;
+  isCalc: boolean;
+  nav: RecipeHrefOpts;
+  className?: string;
+}) {
+  const t = useTranslations();
+  const favorites = useFavorites();
+  const { hideUnused } = useHideUnused();
+  const [mode, setMode] = useState<ItemPanelMode>('all');
+  const boxRef = useRef<HTMLDivElement | null>(null);
+  useFavoriteHotkey();
+  const { w, h } = useElementSize(boxRef);
+  const cols = Math.min(PANEL_COLS, Math.max(1, Math.floor((w + 4) / CELL)));
+  const rows = Math.max(1, Math.floor((h + 4) / CELL));
+  const pageSize = cols * rows;
+  const measured = w > 0 && h > 0;
+
+  const [expandedGroups, setExpandedGroups] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+  const { cells, filtered, favoriteIds, dIndex, dNames, dLang } =
+    usePanelCells({
+      dataset,
+      index,
+      names,
+      lang,
+      mode,
+      query,
+      tab,
+      hideUnused,
+      favorites,
+      expandedGroups,
+    });
+  const favIds = useMemo(() => new Set(favoriteIds), [favoriteIds]);
+  const { page: panelPage, setPage: setPanelPage } = usePanelPage(dataset);
+  const list = usePagedList(cells, panelPage, pageSize);
+
+  const gridResetKey = useMemo(
+    () => [mode, filtered, favorites.entries],
+    [mode, filtered, favorites.entries],
+  );
+  const onToggleGroup = useCallback((groupId: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) next.delete(groupId);
+      else next.add(groupId);
+      return next;
+    });
+  }, []);
+
+  const onPress = useItemPress({ dataset, lang, nav, isCalc });
+
+  const setTab = (next: string) => {
+    setPanelPage(0);
+    replaceUrlState(
+      recipeHref(dataset, lang, {
+        ...nav,
+        tab: next || undefined,
+      }),
+    );
+  };
+
+  const goPage = (dir: number) => {
+    if (list.pages <= 1) return;
+    setPanelPage((list.page + dir + list.pages) % list.pages);
+  };
+  const swipe = useSwipe(goPage);
+
+  const tabOptions = usePanelTabs(dIndex, dNames, dLang);
+
+  let body;
+  const indexEmpty = !index?.items.length;
+  if (!measured || (indexLoading && indexEmpty)) {
+    body =
+      indexLoading && indexEmpty ? (
+        <PanelSkeleton cols={cols} rows={rows} />
+      ) : null;
+  } else if (!list.shown.length) {
+    body = (
+      <EmptyState variant="empty">
+        {mode === 'fav'
+          ? t('No favorites yet.', { note: 'recipe.favorites_empty' })
+          : hideUnused && !query.trim()
+            ? t('No items match with Hide unused enabled. Turn it off to browse the full catalog.', { note: 'recipe.hide_unused_empty' })
+            : t('No matching items.', { note: 'recipe.empty_items' })}
+      </EmptyState>
+    );
+  } else {
+    body = (
+      <ItemPanelGrid
+        cells={list.shown}
+        resetKey={gridResetKey}
+        dataset={dataset}
+        lang={dLang}
+        names={dNames}
+        nav={nav}
+        cols={cols}
+        rows={rows}
+        favIds={favIds}
+        onPress={onPress}
+        onHover={(target) => {
+          favoriteHover.base = target;
+        }}
+        onToggleGroup={onToggleGroup}
+        draggableStacks={isCalc}
+      />
+    );
+  }
+
+  return (
+    <div className={cn('not-prose flex min-h-0 flex-col gap-2', className)}>
+      <IconPager
+        value={mode === 'fav' ? 'fav' : (tab ?? '')}
+        options={tabOptions}
+        onChange={(id) => {
+          setMode('all');
+          setTab(id);
+        }}
+      />
+      <Pager
+        page={list.page}
+        pages={list.pages}
+        to={list.to}
+        total={list.total}
+        label={t('{page}/{pages}', { note: 'recipe.page_of' })}
+        onPage={setPanelPage}
+        leading={
+          <FavoriteButton
+            variant="outline"
+            active={mode === 'fav'}
+            label={t('Favorites', { note: 'recipe.favorites' })}
+            onToggle={() => {
+              setPanelPage(0);
+              setMode(mode === 'fav' ? 'all' : 'fav');
+            }}
+            className="size-9 [&_svg]:size-4.5"
+          />
+        }
+      />
+      <div
+        ref={boxRef}
+        {...swipe}
+        onWheel={(event) => goPage(event.deltaY > 0 ? 1 : -1)}
+        className="min-h-0 flex-1"
+      >
+        {body}
+      </div>
+      <div className="mx-auto flex w-full max-w-md items-center gap-2">
+        <RecipeSettings />
+        <QuerySearch
+          dataset={dataset}
+          lang={lang}
+          params={nav}
+          query={query}
+          onQuery={(next) => {
+            setPanelPage(0);
+            setQuery(next);
+          }}
+          placeholder={t('Search items', { note: 'recipe.search' })}
+          className="w-full"
+        />
+      </div>
+    </div>
+  );
+});
+

package/src/components/views/browser/item-panel/skeleton.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+
+export function PanelSkeleton({ cols, rows }: { cols: number; rows: number }) {
+  return (
+    <ul
+      aria-hidden
+      className="grid h-full w-full place-content-center gap-1"
+      style={{
+        gridTemplateColumns: `repeat(${Math.max(1, cols)}, 36px)`,
+        gridTemplateRows: `repeat(${Math.max(1, rows)}, 36px)`,
+      }}
+    >
+      {Array.from({ length: Math.max(1, cols) * Math.max(1, rows) }, (_, i) => (
+        <li
+          key={i}
+          className="flex min-h-0 min-w-0 items-center justify-center"
+        >
+          <Skeleton className="size-9 rounded-sm" />
+        </li>
+      ))}
+    </ul>
+  );
+}
+

package/src/components/views/browser/item-panel-grid/cell.tsx

@@ -0,0 +1,178 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import type { ReactNode } from 'react';
+import { Minus, Plus, Star } from 'lucide-react';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { EntryGroup } from '@terrafirmagreg-team/game/components/entry/group';
+import { CopyIdMenu } from '@terrafirmagreg-team/game/components/entry/copy-id-menu';
+import { parseStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import { formatNbt } from '@terrafirmagreg-team/dump/lib/snbt';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { Badge } from '@terrafirmagreg-team/ui/components/ui/badge';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { RecipeFavoriteCell } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel-grid/favorite-cell';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { EntrySize } from '@terrafirmagreg-team/game/types/entry';
+import type { FavoriteHoverTarget } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
+import type { ItemPanelCell, RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+function PanelChip({
+  id,
+  size,
+  className,
+  badge,
+  kind = 'item',
+  names,
+  lang,
+  favIds,
+}: {
+  id: string;
+  size: EntrySize;
+  className?: string;
+  badge?: { node: ReactNode; className?: string };
+  kind?: 'item' | 'fluid';
+  names: Record<string, Record<string, string>>;
+  lang: Lang;
+  favIds?: ReadonlySet<string>;
+}) {
+  return (
+    <Entry
+      id={id}
+      kind={kind}
+      name={recipeItemName(names, lang, id)}
+      size={size}
+      variant="chip"
+      href={false}
+      className={cn('block', className)}
+      badge={
+        badge?.node ??
+        (favIds?.has(id) ? (
+          <Star className="size-2.5 fill-amber-500 text-amber-500" />
+        ) : undefined)
+      }
+      badgeClassName={
+        badge?.className ?? '-left-0.5 -top-0.5 right-auto bottom-auto'
+      }
+    />
+  );
+}
+
+export function PanelCell({
+  cell,
+  dataset,
+  lang,
+  names,
+  nav,
+  favIds,
+  expandLabel,
+  draggableStacks,
+  onPress,
+  onHover,
+  onToggleGroup,
+}: {
+  cell: ItemPanelCell;
+  dataset: DatasetRef;
+  lang: Lang;
+  names: Record<string, Record<string, string>>;
+  nav: RecipeHrefOpts;
+  favIds?: ReadonlySet<string>;
+  expandLabel: string;
+  draggableStacks?: boolean;
+  onPress: (id: string, ref?: 'item' | 'fluid') => void;
+  onHover?: (target: FavoriteHoverTarget | undefined) => void;
+  onToggleGroup?: (id: string) => void;
+}) {
+  const stack = cell.kind === 'stack' ? cell.id : undefined;
+  const parsed = stack ? parseStackId(stack) : undefined;
+  const nbt = parsed ? formatNbt(parsed.nbt) : undefined;
+  const hover: FavoriteHoverTarget | undefined =
+    cell.kind === 'stack'
+      ? {
+          kind: 'stack',
+          id: cell.id,
+          ...(cell.ref ? { ref: cell.ref } : {}),
+        }
+      : cell.kind === 'recipe'
+        ? {
+            kind: 'recipe',
+            id: cell.fav.id,
+            type: cell.fav.type,
+            ...(cell.fav.icon ? { icon: cell.fav.icon } : {}),
+          }
+        : undefined;
+  return (
+    <li
+      className="flex min-h-0 min-w-0 items-center justify-center"
+      onMouseEnter={() => onHover?.(hover)}
+      onMouseLeave={() => onHover?.(undefined)}
+    >
+      {cell.kind === 'recipe' ? (
+        <RecipeFavoriteCell
+          dataset={dataset}
+          lang={lang}
+          names={names}
+          nav={nav}
+          fav={cell.fav}
+        />
+      ) : cell.kind === 'group' ? (
+        <Hint label={cell.expanded ? undefined : expandLabel}>
+          <button
+            type="button"
+            aria-label={cell.label}
+            aria-pressed={cell.expanded}
+            onClick={() => onToggleGroup?.(cell.id)}
+            className="block rounded-sm"
+          >
+            <span className="relative flex size-9 items-center justify-center">
+              <EntryGroup members={cell.members} size="lg" />
+              <Badge className="absolute -right-0.5 -bottom-0.5 z-10 h-auto rounded-sm px-0.5 py-0 leading-tight">
+                {cell.expanded ? (
+                  <Minus className="size-3" />
+                ) : (
+                  <Plus className="size-3" />
+                )}
+              </Badge>
+            </span>
+          </button>
+        </Hint>
+      ) : (
+        <CopyIdMenu id={parsed?.id ?? cell.id} nbt={nbt}>
+          <button
+            type="button"
+            onClick={() => onPress(cell.id, cell.ref)}
+            aria-label={recipeItemName(names, lang, cell.id)}
+            className={cn('block rounded-sm', draggableStacks && 'cursor-grab')}
+            draggable={draggableStacks || undefined}
+            onDragStart={
+              draggableStacks
+                ? (event) => {
+                    event.dataTransfer.setData(
+                      'application/x-tfg-calc',
+                      JSON.stringify({
+                        id: cell.id,
+                        kind: cell.ref === 'fluid' ? 'fluid' : 'item',
+                      }),
+                    );
+                    event.dataTransfer.effectAllowed = 'copy';
+                  }
+                : undefined
+            }
+          >
+            <PanelChip
+              id={cell.id}
+              size="lg"
+              className="size-9"
+              kind={cell.ref === 'fluid' ? 'fluid' : 'item'}
+              names={names}
+              lang={lang}
+              favIds={favIds}
+            />
+          </button>
+        </CopyIdMenu>
+      )}
+    </li>
+  );
+}
+

package/src/components/views/browser/item-panel-grid/favorite-cell.tsx

@@ -0,0 +1,129 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import Link from 'next/link';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { EntryTooltip } from '@terrafirmagreg-team/game/components/entry/tooltip';
+import { tooltipLoadKind } from '@terrafirmagreg-team/game/lib/entry/entry';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import {
+  recipeCardImageUrl,
+  recipeHref,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { Badge } from '@terrafirmagreg-team/ui/components/ui/badge';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { RecipeFavorite, RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+const TAG_SEGMENT_KIND: Record<string, ReferenceKind> = {
+  item: 'itemTag',
+  block: 'blockTag',
+  fluid: 'fluidTag',
+  entity_type: 'entityTag',
+};
+
+function favoriteIconKind(fav: RecipeFavorite): ReferenceKind {
+  if (fav.icon?.startsWith('#')) {
+    return TAG_SEGMENT_KIND[fav.id.split('/')[1] ?? ''] ?? 'itemTag';
+  }
+  return 'item';
+}
+
+export function RecipeFavoriteCell({
+  dataset,
+  lang,
+  names,
+  nav,
+  fav,
+}: {
+  dataset: DatasetRef;
+  lang: Lang;
+  names: Record<string, Record<string, string>>;
+  nav: RecipeHrefOpts;
+  fav: RecipeFavorite;
+}) {
+  const src = recipeCardImageUrl(dataset, fav.id);
+  const iconKind = favoriteIconKind(fav);
+  const itemName = fav.icon ? recipeItemName(names, lang, fav.icon) : fav.id;
+  const href = recipeHref(dataset, lang, {
+    ...nav,
+    type: fav.type,
+    id: fav.id,
+    item: undefined,
+    fluid: undefined,
+    relation: undefined,
+    rpage: undefined,
+  });
+  const cardImg = src ? (
+    // eslint-disable-next-line @next/next/no-img-element -- dump asset
+    <img
+      src={src}
+      alt={fav.id}
+      loading="lazy"
+      decoding="async"
+      className="max-h-24 rounded-sm"
+    />
+  ) : null;
+  const link = (
+    <Link href={href} aria-label={itemName} className="block rounded-sm">
+      {fav.icon ? (
+        <Entry
+          id={fav.icon}
+          kind={iconKind}
+          name={itemName}
+          size="lg"
+          variant="chip"
+          href={false}
+          tooltip={false}
+          badge={
+            <Badge className="h-auto rounded-sm px-0.5 py-0 text-3xs leading-tight">
+              R
+            </Badge>
+          }
+        />
+      ) : src ? (
+        // eslint-disable-next-line @next/next/no-img-element -- dump asset
+        <img
+          src={src}
+          alt={fav.id}
+          className="h-9 rounded-sm"
+          loading="lazy"
+          decoding="async"
+        />
+      ) : (
+        <span className="block max-w-9 truncate rounded-sm bg-muted px-1 text-2xs">
+          {fav.id}
+        </span>
+      )}
+    </Link>
+  );
+  if (fav.icon) {
+    return (
+      <EntryTooltip
+        dataset={dataset}
+        id={fav.icon.replace(/^#+/, '')}
+        name={itemName}
+        kind={tooltipLoadKind(iconKind)}
+        lang={lang}
+        footer={cardImg}
+      >
+        {link}
+      </EntryTooltip>
+    );
+  }
+  return (
+    <Tooltip>
+      <TooltipTrigger render={link} delay={150} closeDelay={100} />
+      <TooltipContent className="flex-col items-start gap-1.5 p-2.5">
+        <p className="text-sm font-medium">{itemName}</p>
+        {cardImg}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+

package/src/components/views/browser/item-panel-grid/index.tsx

@@ -0,0 +1,105 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { memo } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { PanelCell } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel-grid/cell';
+import { useMountLimit } from '@terrafirmagreg-team/recipe/hooks/use-mount-limit';
+import { useGroupOutlines } from '@terrafirmagreg-team/recipe/hooks/use-group-outlines';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { FavoriteHoverTarget } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
+import type { ItemPanelCell, RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+const CELL = 36;
+
+export const ItemPanelGrid = memo(function ItemPanelGrid({
+  cells,
+  resetKey,
+  dataset,
+  lang,
+  names,
+  nav,
+  cols,
+  rows,
+  favIds,
+  onPress,
+  onHover,
+  onToggleGroup,
+  draggableStacks,
+}: {
+  cells: ItemPanelCell[];
+
+  resetKey: unknown;
+  dataset: DatasetRef;
+  lang: Lang;
+  names: Record<string, Record<string, string>>;
+  nav: RecipeHrefOpts;
+  cols: number;
+  rows: number;
+  favIds?: ReadonlySet<string>;
+  onPress: (id: string, ref?: 'item' | 'fluid') => void;
+  onHover?: (target: FavoriteHoverTarget | undefined) => void;
+  onToggleGroup?: (id: string) => void;
+  draggableStacks?: boolean;
+}) {
+  const t = useTranslations();
+  const expandLabel = t('Expand', { note: 'recipe.expand' });
+  const limit = useMountLimit(cells.length, resetKey);
+  const shown = limit >= cells.length ? cells : cells.slice(0, limit);
+  const { gridRef, outlines } = useGroupOutlines(shown, cols, rows);
+
+  return (
+    <ul
+      ref={gridRef}
+      className="relative grid h-full w-full place-content-center gap-1"
+      style={{
+        gridTemplateColumns: `repeat(${cols}, ${CELL}px)`,
+        gridTemplateRows: `repeat(${rows}, ${CELL}px)`,
+      }}
+    >
+      {shown.map((cell) => (
+        <PanelCell
+          key={cell.kind === 'recipe' ? `R:${cell.fav.id}` : cell.id}
+          cell={cell}
+          dataset={dataset}
+          lang={lang}
+          names={names}
+          nav={nav}
+          favIds={favIds}
+          expandLabel={expandLabel}
+          draggableStacks={draggableStacks}
+          onPress={onPress}
+          onHover={onHover}
+          onToggleGroup={onToggleGroup}
+        />
+      ))}
+      {Array.from({ length: cells.length - shown.length }, (_, i) => (
+        <li
+          key={`skel-${i}`}
+          aria-hidden
+          className="flex min-h-0 min-w-0 items-center justify-center"
+        >
+          <Skeleton className="size-9 rounded-sm" />
+        </li>
+      ))}
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute inset-0 h-full w-full overflow-visible"
+      >
+        {outlines.map((outline) => (
+          <path
+            key={outline.groupId + outline.d}
+            d={outline.d}
+            fill="none"
+            stroke="var(--color-foreground)"
+            strokeOpacity={0.4}
+            strokeWidth={1.5}
+            strokeLinejoin="round"
+          />
+        ))}
+      </svg>
+    </ul>
+  );
+});
+