@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/views/browser/card-grid.tsx

@@ -0,0 +1,275 @@
+'use client';
+
+import { useEffect, useState, type ReactNode, type RefObject } from 'react';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
+import { RecipeDefaultMenuItem } from '@terrafirmagreg-team/recipe/components/cards/default-item';
+import { CopyIdMenu } from '@terrafirmagreg-team/game/components/entry/copy-id-menu';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import {
+  recipeCardImageUrl,
+  recipeHref,
+  recipeImageUrl,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { loadClientRecipe } from '@terrafirmagreg-team/recipe/lib/client/recipe';
+import { pushUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import { useSwipe } from '@terrafirmagreg-team/ui/hooks/use-swipe';
+import { favoriteHover } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
+import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { FitDim } from '@terrafirmagreg-team/ui/hooks/page/use-fit-pages';
+import type {
+  RecipeCategory,
+  RecipeCompactIndex,
+  RecipeCompactRow,
+  RecipeSession,
+} from '@terrafirmagreg-team/recipe/types';
+
+const FALLBACK_DIM: FitDim = { w: 320, h: 80 };
+
+export function recipeCardDim(
+  index: RecipeCompactIndex | null,
+  categoriesById: Map<string, RecipeCategory>,
+  row: RecipeCompactRow,
+): FitDim {
+  if (row.d) return { w: row.d.w, h: row.d.h };
+  const typeId = index?.types[row.type];
+  const layout = typeId ? categoriesById.get(typeId)?.layout : undefined;
+  if (!layout) return FALLBACK_DIM;
+  const scale = layout.scale ?? 2;
+  const margin = layout.margin ?? 0;
+  return {
+    w: (layout.w + margin * 2) * scale,
+    h: (layout.h + margin * 2) * scale,
+  };
+}
+
+function RecipeGridCard({
+  row,
+  session,
+  focused,
+  maxH,
+  maxW,
+  onPick,
+  menuExtra,
+  defaultMaterial,
+}: {
+  row: RecipeCompactRow;
+  session: RecipeSession;
+  focused: boolean;
+  maxH?: number;
+  maxW?: number;
+  onPick?: (recipeId: string) => void;
+  menuExtra?: (row: RecipeCompactRow) => ReactNode;
+  defaultMaterial?: string;
+}) {
+  const t = useTranslations();
+  const { dataset, lang, langMap, names, nav, index } = session;
+  const recipe = useAsyncValue(
+    () => loadClientRecipe(dataset, row.id, row.bucket),
+    [dataset, row.id, row.bucket],
+  );
+  const [failed, setFailed] = useState(false);
+
+  const title = recipe
+    ? recipeTitle(recipe, langMap)
+    : recipeItemName(names, lang, row.out[0] ?? row.id);
+  const src =
+    (recipe ? recipeImageUrl(dataset, recipe) : undefined) ??
+    (row.image
+      ? recipeImageUrl(dataset, {
+          modId: row.id.split(':', 1)[0],
+          image: row.image,
+        })
+      : undefined) ??
+    recipeCardImageUrl(dataset, row.id);
+
+  const focus = () =>
+    pushUrlState(
+      recipeHref(dataset, lang, { ...nav, id: row.id, solo: undefined }),
+    );
+
+  const isolate = () =>
+    pushUrlState(
+      recipeHref(dataset, lang, { ...nav, id: row.id, solo: '1' }),
+    );
+
+  const openNewTab = () =>
+    window.open(
+      recipeHref(dataset, lang, { ...nav, id: row.id, solo: '1' }),
+      '_blank',
+      'noopener',
+    );
+
+  const recipeType = index?.types[row.type];
+  const cardW = recipe?.w ?? row.d?.w ?? 0;
+  const fit = maxW && cardW > maxW ? maxW / cardW : 1;
+  return (
+    <CopyIdMenu
+      id={row.id}
+      label="recipe.copy_recipe_id"
+      extra={
+        <>
+          <RecipeDefaultMenuItem
+            dataset={dataset}
+            materialId={defaultMaterial ?? row.out[0]}
+            recipeId={row.id}
+          />
+          {menuExtra?.(row)}
+        </>
+      }
+    >
+      <div
+        onClick={(event) => {
+          if ((event.target as HTMLElement).closest('a,button')) return;
+          if (onPick) onPick(row.id);
+          else focus();
+        }}
+        onDoubleClick={(event) => {
+          if ((event.target as HTMLElement).closest('a,button')) return;
+          if (onPick) openNewTab();
+          else isolate();
+        }}
+        onMouseEnter={() => {
+          favoriteHover.base = recipeType
+            ? {
+                kind: 'recipe',
+                id: row.id,
+                type: recipeType,
+                ...(row.out[0] ?? row.in[0]
+                  ? { icon: (row.out[0] ?? row.in[0])! }
+                  : {}),
+              }
+            : undefined;
+        }}
+        onMouseLeave={() => {
+          favoriteHover.base = undefined;
+          favoriteHover.slot = undefined;
+        }}
+        aria-current={focused || undefined}
+        className={cn(
+          'relative w-fit flex-none rounded-md',
+          focused && 'ring-2 ring-primary ring-offset-1',
+        )}
+        style={fit < 1 ? { zoom: fit } : undefined}
+      >
+        {recipe ? (
+          src && !failed ? (
+            <PagedCard
+              recipe={recipe}
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              nav={nav}
+              title={title}
+              src={src}
+              naturalW={row.d?.w}
+              naturalH={row.d?.h}
+              maxH={maxH}
+              interactive={focused}
+              onFail={() => setFailed(true)}
+            />
+          ) : (
+            <EmptyState variant="empty">{t('No recipe image in dump.', { note: 'recipe.no_image' })}</EmptyState>
+          )
+        ) : src && !failed ? (
+          // eslint-disable-next-line @next/next/no-img-element -- dump asset
+          <img
+            src={src}
+            alt={title}
+            width={row.d?.w}
+            height={row.d?.h}
+            loading="lazy"
+            decoding="async"
+            onError={() => setFailed(true)}
+            className="block rounded-sm"
+          />
+        ) : (
+          <Skeleton
+            className="rounded-sm"
+            style={{
+              width: row.d?.w ?? FALLBACK_DIM.w,
+              height: row.d?.h ?? FALLBACK_DIM.h,
+              maxWidth: '100%',
+            }}
+          />
+        )}
+      </div>
+    </CopyIdMenu>
+  );
+}
+
+export function RecipeCardGrid({
+  session,
+  rows,
+  boxRef,
+  maxH,
+  maxW,
+  loading,
+  empty,
+  onSwipe,
+  onPick,
+  cardMenuExtra,
+  defaultMaterial,
+}: {
+  session: RecipeSession;
+  rows: RecipeCompactRow[];
+  boxRef: RefObject<HTMLDivElement | null>;
+  maxH?: number;
+  maxW?: number;
+  loading?: boolean;
+  empty?: string;
+  onSwipe?: (dir: -1 | 1) => void;
+  onPick?: (recipeId: string) => void;
+  cardMenuExtra?: (row: RecipeCompactRow) => ReactNode;
+  defaultMaterial?: string;
+}) {
+  const { recipeId } = session;
+  const swipe = useSwipe((dir) => onSwipe?.(dir));
+  const { dataset } = session;
+
+  useEffect(() => {
+    for (const row of rows) void loadClientRecipe(dataset, row.id, row.bucket);
+  }, [dataset, rows]);
+
+  let body;
+  if (loading) {
+    body = Array.from({ length: 6 }, (_, i) => (
+      <Skeleton
+        key={i}
+        className="h-24 rounded-md"
+        style={{ width: 220 + (i % 3) * 60 }}
+      />
+    ));
+  } else if (!rows.length) {
+    body = empty ? <EmptyState variant="empty">{empty}</EmptyState> : null;
+  } else {
+    body = rows.map((row) => (
+      <RecipeGridCard
+        key={`${row.bucket ?? ''}#${row.id}`}
+        row={row}
+        session={session}
+        focused={row.id === recipeId}
+        maxH={maxH}
+        maxW={maxW}
+        onPick={onPick}
+        defaultMaterial={defaultMaterial}
+        menuExtra={cardMenuExtra}
+      />
+    ));
+  }
+
+  return (
+    <div
+      ref={boxRef}
+      {...swipe}
+      className="flex min-h-0 flex-1 flex-col items-center justify-start gap-2 overflow-x-hidden"
+    >
+      {body}
+    </div>
+  );
+}
+

package/src/components/views/browser/favorite-button.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Star } from 'lucide-react';
+import { Toggle } from '@terrafirmagreg-team/ui/components/ui/toggle';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function FavoriteButton({
+  active,
+  onToggle,
+  label,
+  variant = 'ghost',
+  className,
+}: {
+  active: boolean;
+  onToggle: () => void;
+  label?: string;
+  variant?: 'ghost' | 'outline' | 'overlay';
+  className?: string;
+}) {
+  const t = useTranslations();
+  const text =
+    label ??
+    (active ? t('Remove from favorites', { note: 'recipe.remove_favorite' }) : t('Add to favorites', { note: 'recipe.add_favorite' }));
+  return (
+    <Hint label={text}>
+      <Toggle
+        variant={variant === 'outline' ? 'outline' : 'default'}
+        pressed={active}
+        onPressedChange={onToggle}
+        aria-label={text}
+        className={cn(
+          'size-7 rounded-lg p-0 data-pressed:bg-transparent [&_svg]:size-3.5',
+          variant === 'overlay' &&
+            'absolute bottom-1 right-1 z-10 size-6 rounded-sm bg-background/80',
+          active && 'text-amber-500',
+          className,
+        )}
+      >
+        <Star className={cn(active && 'fill-current')} />
+      </Toggle>
+    </Hint>
+  );
+}
+

package/src/components/views/browser/frame.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { QueryPager } from '@terrafirmagreg-team/recipe/components/views/browser/query-controls';
+import { Pager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import { RecipeToolbar } from '@terrafirmagreg-team/recipe/components/views/browser/toolbar';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+type FeedList = {
+  page: number;
+  pages: number;
+  from?: number;
+  to: number;
+  total: number;
+};
+
+export function RecipeFrame({
+  session,
+  header,
+  list,
+  strip,
+  rail,
+  back,
+  onPageChange,
+  children,
+}: {
+  session: RecipeSession;
+  header: ReactNode;
+  list?: FeedList;
+  strip?: ReactNode;
+  rail?: ReactNode;
+  back?: { href: string; label: string };
+  onPageChange?: (page: number) => void;
+  children: ReactNode;
+}) {
+  const t = useTranslations();
+  const goPage = (dir: number) => {
+    if (!list || list.pages <= 1) return;
+    const next = (list.page + dir + list.pages) % list.pages;
+    if (onPageChange) {
+      onPageChange(next);
+      return;
+    }
+    replaceUrlState(
+      recipeHref(session.dataset, session.lang, {
+        ...session.nav,
+        id: undefined,
+        rpage: next > 0 ? next + 1 : undefined,
+      }),
+    );
+  };
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col">
+      {strip ? (
+        <div className="flex items-center gap-2">
+          <div className="min-w-0 flex-1">{strip}</div>
+        </div>
+      ) : null}
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border pb-2 pt-2">
+        {back ? (
+          <Link
+            href={back.href}
+            className="shrink-0 text-xs text-muted-foreground hover:text-foreground"
+          >
+            ← {back.label}
+          </Link>
+        ) : null}
+        <div className="min-w-0 flex-1">{header}</div>
+        <div className="ms-auto flex items-center gap-2">
+          <RecipeToolbar session={session} />
+        </div>
+      </div>
+      {list ? (
+        onPageChange ? (
+          <Pager
+            page={list.page}
+            pages={list.pages}
+            to={list.to}
+            total={list.total}
+            label={t('{page}/{pages}', { note: 'recipe.page_of' })}
+            className="pt-2"
+            onPage={onPageChange}
+          />
+        ) : (
+          <QueryPager
+            dataset={session.dataset}
+            lang={session.lang}
+            params={{ ...session.nav, id: undefined }}
+            query={session.query}
+            list={list}
+            label={t('{page}/{pages}', { note: 'recipe.page_of' })}
+            className="pt-2"
+          />
+        )
+      ) : null}
+      <div className="flex min-h-0 flex-1 gap-2 overflow-hidden pt-2">
+        {rail}
+        <div
+          onWheel={(event) => goPage(event.deltaY > 0 ? 1 : -1)}
+          className="flex min-w-0 flex-1 flex-col"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/views/browser/index.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useDocumentTitle } from '@terrafirmagreg-team/ui/hooks/use-document-title';
+import { useRecipeSession } from '@terrafirmagreg-team/recipe/hooks/use-session';
+import { recipeConfig } from '@terrafirmagreg-team/recipe/lib/config';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { ItemPanel } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel';
+import { RecipeGlareFilter } from '@terrafirmagreg-team/recipe/components/cards/glare-filter';
+import { RightSidebarPortal } from '@terrafirmagreg-team/ui/components/layouts/right-sidebar';
+import { TypeView } from '@terrafirmagreg-team/recipe/components/views/browser/type-view';
+import { ItemView } from '@terrafirmagreg-team/recipe/components/views/browser/item-view';
+import { Calculator } from '@terrafirmagreg-team/recipe/components/views/calc/calculator';
+import { ForgeCalculator } from '@terrafirmagreg-team/recipe/components/views/forge';
+import { AlloyCalculator } from '@terrafirmagreg-team/recipe/components/views/alloy';
+import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
+import { RecipeTypeTabs } from '@terrafirmagreg-team/recipe/components/views/browser/type-tabs';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { EntryProvider } from '@terrafirmagreg-team/game/hooks/use-entry-context';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { RecipePageData } from '@terrafirmagreg-team/recipe/types';
+
+export function RecipeBrowser({
+  dataset: id,
+  datasetTitle,
+  lang,
+  versions,
+}: {
+  dataset: string;
+  datasetTitle: string;
+  lang: Lang;
+  versions?: readonly string[];
+}) {
+  const page: RecipePageData = {
+    title: datasetTitle,
+    dataset: { id },
+    lang,
+    versions: versions as string[] | undefined,
+  };
+  const session = useRecipeSession(page);
+  const { dataset, item, fluid, names } = session;
+  const focusId = item ?? fluid;
+
+  const focusTitle = focusId
+    ? recipeItemName(names, lang, focusId)
+    : (session.recipeId ?? '');
+  useDocumentTitle(`${focusTitle || page.title} | ${recipeConfig().appName}`);
+
+  const isCalc = session.place?.kind === 'calc';
+
+  let main;
+  if (focusId) {
+    main = <ItemView session={session} />;
+  } else if (isCalc) {
+    main = <Calculator session={session} />;
+  } else if (session.place?.kind === 'forge') {
+    main = <ForgeCalculator session={session} />;
+  } else if (session.place?.kind === 'alloy') {
+    main = <AlloyCalculator session={session} />;
+  } else if (session.place?.kind === 'type') {
+    main = <TypeView session={session} />;
+  } else {
+    main = (
+      <RecipeFrame
+        session={session}
+        strip={<RecipeTypeTabs session={session} ids={[]} />}
+        header={<ItemRow layout="header" title={page.title} />}
+      >
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-start gap-2 pt-2">
+          {Array.from({ length: 6 }, (_, i) => (
+            <Skeleton
+              key={i}
+              className="h-24 rounded-md"
+              style={{ width: 240 + (i % 3) * 70 }}
+            />
+          ))}
+        </div>
+      </RecipeFrame>
+    );
+  }
+
+  return (
+    <EntryProvider dataset={dataset} lang={lang} langMap={session.langMap}>
+      <RecipeGlareFilter />
+      <div
+        className={cn(
+          'viewport-shell recipe-viewport not-prose flex w-full flex-col gap-3',
+          isCalc && 'calc-viewport',
+        )}
+      >
+        <div className="flex min-h-0 flex-1 gap-4">
+          <main className="flex min-w-0 flex-1 flex-col">{main}</main>
+        </div>
+        <RightSidebarPortal>
+          <ItemPanel
+            dataset={dataset}
+            lang={lang}
+            index={session.index}
+            indexLoading={session.indexLoading}
+            names={names}
+            tab={session.tab}
+            query={session.query}
+            setQuery={session.setQuery}
+            isCalc={isCalc}
+            nav={session.nav}
+            className="hidden h-full w-90 lg:flex"
+          />
+        </RightSidebarPortal>
+      </div>
+    </EntryProvider>
+  );
+}
+