@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,186 @@
+'use client';
+
+import { useMemo, useRef } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
+import { ItemViewHeader } from '@terrafirmagreg-team/recipe/components/views/browser/item-view-header';
+import {
+  RecipeCardGrid,
+  recipeCardDim,
+} from '@terrafirmagreg-team/recipe/components/views/browser/card-grid';
+import { RecipeTypeTabs } from '@terrafirmagreg-team/recipe/components/views/browser/type-tabs';
+import { WorkstationRail } from '@terrafirmagreg-team/recipe/components/views/browser/workstation-rail';
+import { PaneTabs } from '@terrafirmagreg-team/recipe/components/views/browser/pane-tabs';
+import { useFitPages } from '@terrafirmagreg-team/ui/hooks/page/use-fit-pages';
+import { useCategoriesById } from '@terrafirmagreg-team/recipe/hooks/use-categories-by-id';
+import { useTypeFilter } from '@terrafirmagreg-team/recipe/hooks/use-type-filter';
+import { useFavorites } from '@terrafirmagreg-team/recipe/hooks/use-favorites';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import {
+  EMPTY_ROWS,
+  useItemFeeds,
+} from '@terrafirmagreg-team/recipe/hooks/use-item-feeds';
+import { useItemTagGroups } from '@terrafirmagreg-team/recipe/hooks/use-item-tag-groups';
+import { ItemTagGroups } from '@terrafirmagreg-team/recipe/components/views/browser/item-view/tags';
+import { useItemPane } from '@terrafirmagreg-team/recipe/hooks/use-item-pane';
+import { useAddToCalc } from '@terrafirmagreg-team/recipe/hooks/use-add-to-calc';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { parseStackId, stackIdFromRef } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { TaggedReference } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import { customStackName } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/names';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type {
+  RecipeSession,
+} from '@terrafirmagreg-team/recipe/types';
+
+export function ItemView({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const {
+    dataset,
+    lang,
+    index,
+    indexLoading,
+    names,
+    nav,
+    rpage,
+    recipeId,
+    relation,
+  } = session;
+  const item = (session.item ?? session.fluid)!;
+  const kind = session.item ? 'item' : 'fluid';
+  const parsed = useMemo(() => parseStackId(item), [item]);
+  const favorites = useFavorites();
+  const name =
+    customStackName(session.langMap, item) ??
+    recipeItemName(names, lang, item);
+
+  const boxRef = useRef<HTMLDivElement | null>(null);
+
+  const categoriesById = useCategoriesById(index);
+
+  const feeds = useItemFeeds({ dataset, index, indexLoading, item, kind });
+  const { recipes, uses } = feeds;
+  const tags = useItemTagGroups({ dataset, index, item, kind });
+  const pane = useItemPane({
+    dataset,
+    lang,
+    nav,
+    relation,
+    recipeId,
+    recipes,
+    uses,
+    tagCount: tags.ids.length,
+    feedsPending: feeds.pending,
+  });
+  const addToCalc = useAddToCalc(session);
+
+  const feedRows = (pane.pane === 'uses' ? uses : recipes) ?? EMPTY_ROWS;
+  const typeFilter = useTypeFilter(session, feedRows);
+  const railRefs = useMemo(() => {
+    const seen = new Set<string>();
+    const refs: TaggedReference[] = [];
+    for (const ref of
+      categoriesById.get(typeFilter.active)?.workstations ?? []) {
+      const key = stackIdFromRef(ref);
+      if (!seen.has(key)) {
+        seen.add(key);
+        refs.push(ref);
+      }
+    }
+    return refs;
+  }, [categoriesById, typeFilter.active]);
+  const focusIndex = recipeId
+    ? typeFilter.rows.findIndex((row) => row.id === recipeId)
+    : -1;
+  const list = useFitPages(
+    boxRef,
+    typeFilter.rows,
+    (row, box) => {
+      const d = recipeCardDim(index, categoriesById, row);
+      return d.h > box.h ? { w: d.w, h: box.h } : d;
+    },
+    rpage,
+    8,
+    focusIndex >= 0 ? focusIndex : undefined,
+    true,
+  );
+
+  const onSwipe = (dir: -1 | 1) => {
+    if (recipeId) {
+      const row = typeFilter.rows[focusIndex + dir];
+      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,
+      }),
+    );
+  };
+
+  return (
+    <RecipeFrame
+      session={session}
+      list={pane.pane === 'tags' ? undefined : list}
+      strip={
+        <RecipeTypeTabs
+          session={session}
+          ids={pane.pane !== 'tags' ? typeFilter.ids : []}
+          value={typeFilter.active}
+          onChange={typeFilter.setActive}
+        />
+      }
+      header={
+        <div className="flex flex-col gap-1.5">
+          <ItemViewHeader
+            item={item}
+            kind={kind}
+            name={name}
+            parsed={parsed}
+            favorite={favorites.isFavorite(item)}
+            onToggleFavorite={() => favorites.toggleItem(item)}
+            onAddToCalc={() => addToCalc(item, kind)}
+          />
+          <PaneTabs
+            value={pane.pane}
+            options={pane.options}
+            onChange={pane.select}
+          />
+        </div>
+      }
+      rail={
+        pane.pane !== 'tags' ? (
+          <WorkstationRail session={session} workstations={railRefs} />
+        ) : undefined
+      }
+    >
+      {pane.pane === 'tags' ? (
+        <ItemTagGroups
+          groups={tags.groups}
+          dataset={dataset}
+          lang={lang}
+          names={names}
+          query={session.query}
+          nav={nav}
+        />
+      ) : (
+        <RecipeCardGrid
+          session={session}
+          rows={list.shown}
+          boxRef={boxRef}
+          maxH={list.box.h}
+          maxW={list.box.w}
+          loading={feeds.pending}
+          empty={t('No recipes of this type.', { note: 'recipe.empty_type' })}
+          onSwipe={onSwipe}
+        />
+      )}
+    </RecipeFrame>
+  );
+}
+

package/src/components/views/browser/item-view/tags.tsx

@@ -0,0 +1,85 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { LinkPreview } from '@terrafirmagreg-team/ui/components/blocks/link/link-preview';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { tagPseudoId } from '@terrafirmagreg-team/dump/lib/dump/paths';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+export function ItemTagGroups({
+  groups,
+  dataset,
+  lang,
+  names,
+  query,
+  nav,
+}: {
+  groups: [string, string[]][];
+  dataset: DatasetRef;
+  lang: Lang;
+  names: Record<string, Record<string, string>>;
+  query: string;
+  nav: RecipeHrefOpts;
+}) {
+  const t = useTranslations();
+  if (!groups.length) {
+    return <EmptyState variant="empty">{t('No tags for this item.', { note: 'recipe.empty_tags' })}</EmptyState>;
+  }
+  return (
+    <div className="flex flex-col gap-3 pt-1">
+      {groups.map(([tagKind, ids]) => (
+        <div key={tagKind} className="flex flex-col gap-1.5">
+          {groups.length > 1 && (
+            <p className="text-xs font-medium text-muted-foreground">
+              {tagKind === 'block'
+                ? t('Blocks', { note: 'recipe.tags_block' })
+                : t('Items', { note: 'recipe.tags_item' })}
+            </p>
+          )}
+          <div className="flex flex-wrap gap-1">
+            {ids.map((id) => {
+              const bare = id.replace(/^#+/, '');
+              return (
+                <LinkPreview
+                  key={`${tagKind}:${id}`}
+                  href={recipeHref(dataset, lang, {
+                    type: 'emi:tag',
+                    id: tagPseudoId(id, tagKind),
+                    search: query || undefined,
+                    tab: nav.tab,
+                  })}
+                  variant="chip"
+                  size="sm"
+                  onClick={(event) => {
+                    if (!event.shiftKey) return;
+                    event.preventDefault();
+                    const token = `#${bare}`;
+                    const text = query.trim();
+                    const search =
+                      !text || text.split(/\s+/).includes(token)
+                        ? text || token
+                        : `${text} ${token}`;
+                    replaceUrlState(
+                      recipeHref(dataset, lang, {
+                        type: 'emi:tag',
+                        search,
+                      }),
+                    );
+                  }}
+                >
+                  {recipeItemName(names, lang, id)}
+                </LinkPreview>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,131 @@
+'use client';
+
+import { Braces, Calculator, Check, Copy } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useModifierKeys } from '@terrafirmagreg-team/ui/hooks/use-modifier-keys';
+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 { FavoriteButton } from '@terrafirmagreg-team/recipe/components/views/browser/favorite-button';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+import { formatNbt, formatNbtPretty } from '@terrafirmagreg-team/dump/lib/snbt';
+import type { ParsedStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+
+export function ItemViewHeader({
+  item,
+  kind,
+  name,
+  parsed,
+  favorite,
+  onToggleFavorite,
+  onAddToCalc,
+}: {
+  item: string;
+  kind: ReferenceKind;
+  name: string;
+  parsed: ParsedStackId;
+  favorite: boolean;
+  onToggleFavorite: () => void;
+  onAddToCalc?: () => void;
+}) {
+  const t = useTranslations();
+  const held = useModifierKeys();
+  const nbt = formatNbt(parsed.nbt);
+  const pretty =
+    parsed.nbt !== undefined ? formatNbtPretty(parsed.nbt) : undefined;
+  const copyId = held.shift && nbt ? `${parsed.id}${nbt}` : parsed.id;
+  const copyTitle = held.shift ? t('Copy stack id', { note: 'recipe.copy_stack' }) : t('Copy id', { note: 'recipe.copy' });
+  return (
+    <>
+      <ItemRow
+        layout="header"
+        media={
+          <CopyIdMenu id={parsed.id} nbt={nbt}>
+            <Entry
+              id={item}
+              kind={kind}
+              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">{parsed.id}</span>
+            <ButtonCopy
+              value={copyId}
+              title={copyTitle}
+              aria-label={copyTitle}
+              copy={<Copy className="size-3" />}
+              copied={<Check className="size-3" />}
+            />
+          </span>
+        }
+        trailing={
+          <span className="flex items-center gap-1">
+            {nbt && pretty ? (
+              <Popover>
+                <PopoverTrigger
+                  render={
+                    <IconButton
+                      variant="ghost"
+                      tooltip={false}
+                      label={t('NBT', { note: 'recipe.nbt' })}
+                      className="size-7 rounded-lg text-muted-foreground hover:text-foreground [&_svg]:size-3.5"
+                    >
+                      <Braces />
+                    </IconButton>
+                  }
+                />
+                <PopoverContent
+                  align="end"
+                  className="w-96 max-w-[calc(100vw-2rem)]"
+                >
+                  <div className="flex items-center justify-between">
+                    <PopoverTitle className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                      {t('NBT', { note: 'recipe.nbt' })}
+                    </PopoverTitle>
+                    <ButtonCopy
+                      value={nbt}
+                      title={t('Copy NBT', { note: 'recipe.copy_nbt' })}
+                      aria-label={t('Copy NBT', { note: 'recipe.copy_nbt' })}
+                      copy={<Copy className="size-3" />}
+                      copied={<Check className="size-3" />}
+                    />
+                  </div>
+                  <pre className="max-h-80 overflow-auto rounded-md bg-muted/50 p-2 text-2xs leading-snug break-all whitespace-pre-wrap">
+                    {pretty}
+                  </pre>
+                </PopoverContent>
+              </Popover>
+            ) : null}
+            {onAddToCalc ? (
+              <IconButton
+                variant="ghost"
+                label={t('Add to calculator', { note: 'recipe.calc.add.title' })}
+                className="size-7 rounded-lg text-muted-foreground hover:text-foreground [&_svg]:size-3.5"
+                onClick={onAddToCalc}
+              >
+                <Calculator />
+              </IconButton>
+            ) : null}
+            <FavoriteButton active={favorite} onToggle={onToggleFavorite} />
+          </span>
+        }
+      />
+    </>
+  );
+}
+

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

@@ -0,0 +1,61 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { Tabs, TabsList, TabsTrigger } from '@terrafirmagreg-team/ui/components/ui/tabs';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export type PaneTabOption<T extends string> = {
+  id: T;
+  label: string;
+  icon: ReactNode;
+  help?: string;
+  disabled?: boolean;
+};
+
+export function PaneTabs<T extends string>({
+  value,
+  options,
+  onChange,
+  className,
+}: {
+  value: T;
+  options: PaneTabOption<T>[];
+  onChange: (id: T) => void;
+  className?: string;
+}) {
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(id) => onChange(id as T)}
+      className={cn('flex', className)}
+    >
+      <TabsList className="flex-wrap gap-1 bg-transparent p-0">
+        {options.map((option) => (
+          <Tooltip key={option.id}>
+            <TooltipTrigger
+              render={
+                <TabsTrigger
+                  value={option.id}
+                  disabled={option.disabled}
+                  className="h-7 flex-none rounded-lg border border-border bg-background px-2.5 text-xs hover:bg-muted hover:text-foreground data-active:border-border data-active:bg-secondary data-active:text-secondary-foreground"
+                />
+              }
+            >
+              {option.icon}
+              {option.label}
+            </TooltipTrigger>
+            {option.help ? (
+              <TooltipContent>{option.help}</TooltipContent>
+            ) : null}
+          </Tooltip>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}
+

package/src/components/views/browser/place-header.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { Calculator, Check, Copy } from 'lucide-react';
+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 { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { RECIPE_ALL_TYPE } from '@terrafirmagreg-team/recipe/lib/links';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function PlaceHeader({
+  session,
+  overline,
+}: {
+  session: RecipeSession;
+  overline?: string;
+}) {
+  const t = useTranslations();
+  const { lang, index, names, place, dataset } = session;
+  const isCalc = place?.kind === 'calc';
+  const placeId = place?.kind === 'type' ? place.id : undefined;
+  const category = placeId
+    ? index?.categories?.find((row) => row.id === placeId)
+    : undefined;
+  const title = isCalc
+    ? t('Calculator', { note: 'recipe.calculator' })
+    : placeId
+      ? recipeItemName(names, lang, placeId)
+      : '';
+  return (
+    <ItemRow
+      layout="header"
+      media={
+        isCalc ? (
+          <Calculator className="size-8 text-muted-foreground" />
+        ) : category?.icon ? (
+          <CopyIdMenu id={placeId ?? ''}>
+            <Entry
+              dataset={dataset}
+              reference={category.icon}
+              name={title}
+              size="lg"
+              href={false}
+              tooltip={false}
+              variant="chip"
+            />
+          </CopyIdMenu>
+        ) : undefined
+      }
+      overline={overline}
+      title={title}
+      titleClassName="truncate"
+      code={
+        placeId && placeId !== RECIPE_ALL_TYPE ? (
+          <span className="inline-flex max-w-full items-center gap-0.5">
+            <span className="truncate">{placeId}</span>
+            <ButtonCopy
+              value={placeId}
+              title={t('Copy id', { note: 'recipe.copy' })}
+              aria-label={t('Copy id', { note: 'recipe.copy' })}
+              copy={<Copy className="size-3" />}
+              copied={<Check className="size-3" />}
+            />
+          </span>
+        ) : undefined
+      }
+    />
+  );
+}
+

package/src/components/views/browser/query-controls.tsx

@@ -0,0 +1,105 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import type { ReactNode } from 'react';
+import { Search } from 'lucide-react';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@terrafirmagreg-team/ui/components/ui/input-group';
+import { Pager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+type QueryNav = {
+  dataset: DatasetRef;
+  lang: Lang;
+  params?: RecipeHrefOpts;
+};
+
+export function QuerySearch({
+  dataset,
+  lang,
+  params,
+  query,
+  onQuery,
+  placeholder,
+  className,
+}: QueryNav & {
+  query: string;
+  onQuery: (query: string) => void;
+  placeholder?: string;
+  className?: string;
+}) {
+  return (
+    <InputGroup className={cn('w-full', className)}>
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <InputGroupInput
+        type="search"
+        value={query}
+        placeholder={placeholder}
+        onChange={(event) => {
+          const next = event.target.value;
+          onQuery(next);
+          replaceUrlState(
+            recipeHref(dataset, lang, {
+              ...params,
+              search: next || undefined,
+            }),
+          );
+        }}
+      />
+    </InputGroup>
+  );
+}
+
+export function QueryPager({
+  dataset,
+  lang,
+  params,
+  query,
+  list,
+  label,
+  leading,
+  className,
+}: QueryNav & {
+  query: string;
+  list: {
+    page: number;
+    pages: number;
+    from?: number;
+    to: number;
+    total: number;
+  };
+  label: string;
+  leading?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Pager
+      page={list.page}
+      pages={list.pages}
+      to={list.to}
+      total={list.total}
+      label={label}
+      leading={leading}
+      className={className}
+      onPage={(next) =>
+        replaceUrlState(
+          recipeHref(dataset, lang, {
+            ...params,
+            search: query || undefined,
+            rpage: next + 1,
+          }),
+        )
+      }
+    />
+  );
+}
+