@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/views/browser/recipe-item-header.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { CopyIdMenu } from '@terrafirmagreg-team/game/components/entry/copy-id-menu';
+import { ButtonCopy } from '@terrafirmagreg-team/recipe/components/button-copy';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { parseStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import { formatNbt } from '@terrafirmagreg-team/dump/lib/snbt';
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function RecipeItemHeader({
+  recipe,
+  session,
+}: {
+  recipe: Recipe;
+  session: RecipeSession;
+}) {
+  const t = useTranslations();
+  const output = recipe.outputs[0];
+  const stackId = output?.id ?? recipe.id;
+  const parsed = parseStackId(stackId);
+  const name = recipeItemName(session.names, session.lang, parsed.id);
+  const nbt = formatNbt(parsed.nbt);
+  return (
+    <ItemRow
+      layout="header"
+      media={
+        <CopyIdMenu id={parsed.id} nbt={nbt}>
+          <Entry
+            id={stackId}
+            kind={output?.kind === 'fluid' ? 'fluid' : 'item'}
+            name={name}
+            size="lg"
+            variant="chip"
+            href={false}
+          />
+        </CopyIdMenu>
+      }
+      title={name}
+      titleClassName="truncate"
+      code={
+        <span className="inline-flex max-w-full items-center gap-0.5">
+          <span className="truncate">{recipe.id}</span>
+          <ButtonCopy
+            value={recipe.id}
+            title={t('Copy recipe id', { note: 'recipe.copy_recipe_id' })}
+            aria-label={t('Copy recipe id', { note: 'recipe.copy_recipe_id' })}
+            copy={<Copy className="size-3" />}
+            copied={<Check className="size-3" />}
+          />
+        </span>
+      }
+    />
+  );
+}
+

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { Settings2 } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useHideUnused } from '@terrafirmagreg-team/recipe/hooks/use-hide-unused';
+import { useSidebarGroup } from '@terrafirmagreg-team/recipe/hooks/use-sidebar-group';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
+import { Label } from '@terrafirmagreg-team/ui/components/ui/label';
+import { Switch } from '@terrafirmagreg-team/ui/components/ui/switch';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+
+export function RecipeSettings() {
+  const t = useTranslations();
+  const { hideUnused, setHideUnused } = useHideUnused();
+  const { sidebarGroup, setSidebarGroup } = useSidebarGroup();
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            size="icon-sm"
+            aria-label={t('Settings', { note: 'recipe.settings' })}
+            className="rounded-lg"
+          />
+        }
+      >
+        <Settings2 className="size-4" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="flex w-56 flex-col gap-2">
+        <Label className="gap-1.5 text-sm font-normal">
+          <Switch size="sm" checked={hideUnused} onCheckedChange={setHideUnused} />
+          {t('Hide unused', { note: 'recipe.hide_unused' })}
+        </Label>
+        <Label className="gap-1.5 text-sm font-normal">
+          <Switch
+            size="sm"
+            checked={sidebarGroup === 'mod'}
+            onCheckedChange={(value) => setSidebarGroup(value ? 'mod' : 'flat')}
+          />
+          {t('Group sidebar by mod', { note: 'recipe.sidebar_group_mod' })}
+        </Label>
+      </PopoverContent>
+    </Popover>
+  );
+}
+

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { LayoutGrid } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@terrafirmagreg-team/ui/components/ui/sheet';
+import { ItemPanel } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function RecipeToolbar({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const [itemsOpen, setItemsOpen] = useState(false);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        className="lg:hidden"
+        onClick={() => setItemsOpen(true)}
+      >
+        <LayoutGrid className="size-3.5" />
+        {t('Items', { note: 'recipe.items' })}
+      </Button>
+      <Sheet open={itemsOpen} onOpenChange={setItemsOpen}>
+        <SheetContent side="right" className="w-full gap-3 sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>{t('Items', { note: 'recipe.items' })}</SheetTitle>
+          </SheetHeader>
+          <ItemPanel
+            dataset={session.dataset}
+            lang={session.lang}
+            index={session.index}
+            indexLoading={session.indexLoading}
+            names={session.names}
+            tab={session.tab}
+            query={session.query}
+            setQuery={session.setQuery}
+            isCalc={session.place?.kind === 'calc'}
+            nav={session.nav}
+            className="min-h-0 w-full flex-1 px-4 pb-4"
+          />
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
+

package/src/components/views/browser/type-tabs.tsx

@@ -0,0 +1,71 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useMemo } from 'react';
+import { Shapes } from 'lucide-react';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { IconPager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import type { RecipeCategory, RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+function CategoryGlyph({
+  category,
+  dataset,
+}: {
+  category?: RecipeCategory;
+  dataset: DatasetRef;
+}) {
+  return category?.icon ? (
+    <Entry
+      dataset={dataset}
+      reference={category.icon}
+      name={category.id}
+      size="lg"
+      href={false}
+      tooltip={false}
+      missing="hide"
+    />
+  ) : (
+    <Shapes className="size-8" />
+  );
+}
+
+export function RecipeTypeTabs({
+  session,
+  ids,
+  value,
+  onChange,
+  className,
+}: {
+  session: Pick<RecipeSession, 'lang' | 'names' | 'index' | 'dataset'>;
+  ids: string[];
+  value?: string;
+  onChange?: (id: string) => void;
+  className?: string;
+}) {
+  const { lang, names, index, dataset } = session;
+
+  const options = useMemo(() => {
+    const byId = new Map(
+      (index?.categories ?? []).map((row) => [row.id, row]),
+    );
+    return ids.map((id) => {
+      const category = byId.get(id);
+      return {
+        id,
+        icon: <CategoryGlyph category={category} dataset={dataset} />,
+        help: recipeItemName(names, lang, id),
+      };
+    });
+  }, [index, ids, lang, names, dataset]);
+
+  return (
+    <IconPager
+      value={value}
+      options={options}
+      onChange={onChange ?? (() => {})}
+      className={className}
+    />
+  );
+}
+

package/src/components/views/browser/type-view.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useAsyncResult, useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
+import {
+  RecipeCardGrid,
+  recipeCardDim,
+} from '@terrafirmagreg-team/recipe/components/views/browser/card-grid';
+import { PlaceHeader } from '@terrafirmagreg-team/recipe/components/views/browser/place-header';
+import { useCategoriesById } from '@terrafirmagreg-team/recipe/hooks/use-categories-by-id';
+import { useFitPages } from '@terrafirmagreg-team/ui/hooks/page/use-fit-pages';
+import {
+  loadTypeRows,
+  nonEmptyCategoryIds,
+  resolveRecipeRows,
+} from '@terrafirmagreg-team/recipe/lib/client-index';
+import { RECIPE_ALL_TYPE, recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { RecipeTypeTabs } from '@terrafirmagreg-team/recipe/components/views/browser/type-tabs';
+import { WorkstationRail } from '@terrafirmagreg-team/recipe/components/views/browser/workstation-rail';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type {
+  RecipeCompactRow,
+  RecipeSession,
+} from '@terrafirmagreg-team/recipe/types';
+
+const EMPTY_ROWS: RecipeCompactRow[] = [];
+
+export function TypeView({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const {
+    dataset,
+    lang,
+    index,
+    indexLoading,
+    place,
+    nav,
+    recipeId,
+    rpage,
+  } = session;
+  const boxRef = useRef<HTMLDivElement | null>(null);
+
+  const placeId = place?.kind === 'type' ? place.id : RECIPE_ALL_TYPE;
+
+  const categoriesById = useCategoriesById(index);
+  const nonEmptyIds = nonEmptyCategoryIds(index);
+
+  const shown =
+    placeId !== RECIPE_ALL_TYPE && nonEmptyIds.includes(placeId)
+      ? placeId
+      : nonEmptyIds[0];
+  const rows = useAsyncValue(
+    () =>
+      index && shown
+        ? loadTypeRows(dataset, index, shown)
+        : Promise.resolve(EMPTY_ROWS),
+    [dataset, index, shown],
+  );
+
+  const allRows = rows ?? EMPTY_ROWS;
+  const focusIndex = recipeId
+    ? allRows.findIndex((row) => row.id === recipeId)
+    : -1;
+  const focusRes = useAsyncResult(
+    () =>
+      recipeId && index && rows !== undefined && focusIndex < 0
+        ? resolveRecipeRows(dataset, index, [recipeId])
+        : Promise.resolve(undefined),
+    [dataset, index, recipeId, rows, focusIndex],
+  );
+  const solo = recipeId != null && session.solo === '1';
+  const feedRows = solo
+    ? focusIndex >= 0
+      ? [allRows[focusIndex]]
+      : (focusRes.value ?? EMPTY_ROWS)
+    : allRows;
+  const feedFocus = solo && focusIndex >= 0 ? 0 : focusIndex;
+  useEffect(() => {
+    if (!recipeId || !index || rows === undefined || focusIndex >= 0) return;
+    if (focusRes.pending) return;
+    const row = focusRes.value?.[0];
+    const category = row ? index.types[row.type] : undefined;
+    replaceUrlState(
+      recipeHref(dataset, lang, {
+        ...nav,
+        ...(category && category !== shown ? { type: category } : {}),
+        ...(category ? {} : { id: undefined }),
+        rpage: undefined,
+      }),
+    );
+  }, [focusIndex, focusRes.pending, focusRes.value, index, nav, dataset, lang, recipeId, rows, shown]);
+  const list = useFitPages(
+    boxRef,
+    feedRows,
+    (row, box) => {
+      const d = recipeCardDim(index, categoriesById, row);
+      return d.h > box.h ? { w: d.w, h: box.h } : d;
+    },
+    rpage,
+    8,
+    feedFocus >= 0 ? feedFocus : undefined,
+    true,
+  );
+
+  const onSwipe = (dir: -1 | 1) => {
+    if (recipeId) {
+      const next = focusIndex + dir;
+      const row = allRows[next];
+      if (focusIndex < 0 || !row) return;
+      replaceUrlState(
+        recipeHref(dataset, lang, { ...nav, id: row.id, rpage: undefined }),
+      );
+      return;
+    }
+    if (list.pages <= 1) return;
+    replaceUrlState(
+      recipeHref(dataset, lang, {
+        ...nav,
+        rpage: (list.page + dir + list.pages) % list.pages,
+      }),
+    );
+  };
+
+  const body = index && !index.types.length && !indexLoading ? (
+    <RecipeCardGrid
+      session={session}
+      rows={EMPTY_ROWS}
+      boxRef={boxRef}
+      empty={t('No recipe dump for this dataset. Run export to generate data.', { note: 'recipe.no_dump' })}
+    />
+  ) : (
+    <RecipeCardGrid
+      session={session}
+      rows={list.shown}
+      boxRef={boxRef}
+      maxH={list.box.h}
+      maxW={list.box.w}
+      loading={index == null || (shown != null && rows === undefined)}
+      empty={t('No recipes of this type.', { note: 'recipe.empty_type' })}
+      onSwipe={onSwipe}
+    />
+  );
+
+  return (
+    <RecipeFrame
+      session={session}
+      list={list}
+      strip={
+        <RecipeTypeTabs
+          session={session}
+          ids={nonEmptyIds}
+          value={shown}
+          onChange={(id) => {
+            if (id === shown) return;
+            replaceUrlState(
+              recipeHref(dataset, lang, {
+                ...nav,
+                type: id,
+                id: undefined,
+                solo: undefined,
+                rpage: undefined,
+              }),
+            );
+          }}
+        />
+      }
+      header={
+        <PlaceHeader session={session} overline={t('Categories', { note: 'recipe.axis_type' })} />
+      }
+      rail={
+        <WorkstationRail
+          session={session}
+          workstations={
+            shown ? categoriesById.get(shown)?.workstations : undefined
+          }
+        />
+      }
+    >
+      {body}
+    </RecipeFrame>
+  );
+}
+

package/src/components/views/browser/workstation-rail.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Factory } from 'lucide-react';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { stackIdFromRef } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { TaggedReference } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function WorkstationRail({
+  session,
+  workstations,
+}: {
+  session: RecipeSession;
+  workstations: TaggedReference[] | undefined;
+}) {
+  if (!workstations?.length) return null;
+  const { lang, names, nav } = session;
+  return (
+    <div className="scrollbar-thin flex max-h-full flex-col items-center gap-1 self-start overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-muted/60 p-1">
+      <Factory
+        className="m-1 size-3.5 shrink-0 text-muted-foreground"
+        aria-hidden
+      />
+      {workstations.map((ref) => {
+        const id = stackIdFromRef(ref);
+        return (
+          <Entry
+            key={id}
+            reference={ref}
+            name={recipeItemName(names, lang, id)}
+            variant="chip"
+            size="lg"
+            className="size-9 shrink-0"
+            tab={nav.tab}
+            search={nav.search}
+          />
+        );
+      })}
+    </div>
+  );
+}
+

package/src/components/views/calc/calculator/actions.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Share2, Trash2 } from 'lucide-react';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { RecipeToolbar } from '@terrafirmagreg-team/recipe/components/views/browser/toolbar';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+import { CalcHelp } from './help';
+
+export function CalcActions({
+  session,
+  shared,
+  onShare,
+  hasTargets,
+  onClear,
+}: {
+  session: RecipeSession;
+  shared: boolean;
+  onShare: () => void;
+  hasTargets: boolean;
+  onClear: () => void;
+}) {
+  const t = useTranslations();
+  return (
+    <>
+      <RecipeToolbar session={session} />
+      <IconButton
+        overlay
+        label={shared ? t('Copied', { note: 'recipe.copied' }) : t('Share', { note: 'recipe.calc.share' })}
+        onClick={onShare}
+      >
+        <Share2 className="size-3.5" />
+      </IconButton>
+      <CalcHelp />
+      {hasTargets ? (
+        <IconButton
+          overlay
+          label={t('Clear', { note: 'recipe.calc.clear.title' })}
+          onClick={onClear}
+        >
+          <Trash2 className="size-3.5" />
+        </IconButton>
+      ) : null}
+    </>
+  );
+}
+