@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/hooks/use-group-outlines.ts

@@ -0,0 +1,65 @@
+'use client';
+
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { groupOutlines } from '@terrafirmagreg-team/recipe/lib/panel-outline';
+import type { ItemPanelCell } from '@terrafirmagreg-team/recipe/types';
+
+const CELL = 36;
+const GAP = 4;
+
+export function useGroupOutlines(
+  shown: ItemPanelCell[],
+  cols: number,
+  rows: number,
+) {
+  const gridRef = useRef<HTMLUListElement>(null);
+  const [size, setSize] = useState<{ w: number; h: number }>();
+
+  const indicesByGroup = useMemo(() => {
+    const map = new Map<string, number[]>();
+    shown.forEach((cell, index) => {
+      const id =
+        cell.kind === 'group'
+          ? cell.expanded
+            ? cell.id
+            : undefined
+          : cell.kind === 'stack'
+            ? cell.groupId
+            : undefined;
+      if (!id) return;
+      const list = map.get(id);
+      if (list) list.push(index);
+      else map.set(id, [index]);
+    });
+    return map;
+  }, [shown]);
+
+  useLayoutEffect(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      const rect = el.getBoundingClientRect();
+      setSize((prev) =>
+        prev && prev.w === rect.width && prev.h === rect.height
+          ? prev
+          : { w: rect.width, h: rect.height },
+      );
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const outlines = useMemo(() => {
+    if (!size || !indicesByGroup.size) return [];
+    const cell = {
+      x: (size.w - (cols * CELL + (cols - 1) * GAP)) / 2,
+      y: (size.h - (rows * CELL + (rows - 1) * GAP)) / 2,
+      w: CELL,
+      h: CELL,
+    };
+    return groupOutlines(indicesByGroup, cols, cell, GAP, size, 1.5);
+  }, [size, indicesByGroup, cols, rows]);
+
+  return { gridRef, outlines };
+}
+

package/src/hooks/use-hide-unused.ts

@@ -0,0 +1,12 @@
+import { boolCodec, createStoredValue } from '@terrafirmagreg-team/ui/lib/utils/stored-value';
+
+const useStoredHideUnused = createStoredValue(
+  'wiki.recipe.hideUnused',
+  boolCodec(false),
+);
+
+export function useHideUnused() {
+  const [hideUnused, setHideUnused] = useStoredHideUnused();
+  return { hideUnused, setHideUnused };
+}
+

package/src/hooks/use-index.ts

@@ -0,0 +1,72 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { startTransition, useMemo, useState } from 'react';
+import { useLang } from '@terrafirmagreg-team/translate/provider';
+import { useAsyncEffect } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import {
+  loadRecipeChromeClient,
+  loadRecipeCompactIndex,
+  loadRecipeSkeletonIndex,
+} from '@terrafirmagreg-team/recipe/lib/client-index';
+import { publishRecipeIndex } from '@terrafirmagreg-team/recipe/lib/index-store';
+import type { RecipeCompactIndex } from '@terrafirmagreg-team/recipe/types';
+
+type LoadedIndex = { key: string; index: RecipeCompactIndex };
+
+function idle(): Promise<void> {
+  return new Promise((resolve) => {
+    if (typeof requestIdleCallback === 'function') {
+      requestIdleCallback(() => resolve(), { timeout: 4000 });
+    } else {
+      setTimeout(resolve, 1500);
+    }
+  });
+}
+
+export function useRecipeIndex(dataset: DatasetRef | undefined, lang: string) {
+  const [loaded, setLoaded] = useState<LoadedIndex | null>(null);
+  const [complete, setComplete] = useState<string | null>(null);
+  const [lastFull, setLastFull] = useState<RecipeCompactIndex | null>(null);
+  const { locales: items } = useLang();
+  const locales = useMemo(
+    () => items?.map((item) => item.locale) ?? [lang],
+    [items, lang],
+  );
+  const key = `${dataset ? `${dataset.id}/${dataset.version ?? ''}` : ''} ${lang}`;
+
+  useAsyncEffect(async (isCancelled) => {
+    if (!dataset) return;
+    const skeleton = await loadRecipeSkeletonIndex(dataset);
+    if (isCancelled()) return;
+    setLoaded({ key, index: skeleton });
+    publishRecipeIndex(dataset, lang, skeleton);
+    const chrome = await loadRecipeChromeClient(dataset, lang);
+    const index = await loadRecipeCompactIndex(dataset, chrome);
+    if (isCancelled()) return;
+    startTransition(() => {
+      setLoaded({ key, index });
+      setComplete(key);
+      setLastFull(index);
+    });
+    publishRecipeIndex(dataset, lang, index);
+  }, [dataset, lang]);
+
+  useAsyncEffect(async (isCancelled) => {
+    if (!dataset) return;
+    const others = locales.filter((entry) => entry !== lang);
+    for (const entry of others) {
+      if (isCancelled()) return;
+      await idle();
+      if (isCancelled()) return;
+      const chrome = await loadRecipeChromeClient(dataset, entry);
+      if (isCancelled()) return;
+      await loadRecipeCompactIndex(dataset, chrome);
+    }
+  }, [dataset, lang, locales]);
+
+  const active = loaded?.key === key ? loaded.index : null;
+  const index = active?.items.length ? active : (lastFull ?? active);
+  return { index, indexLoading: complete !== key };
+}
+

package/src/hooks/use-item-feeds.ts

@@ -0,0 +1,46 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import {
+  recipesForOutput,
+  usesForInput,
+} from '@terrafirmagreg-team/recipe/lib/lookup';
+import type { RecipeCompactIndex, RecipeCompactRow } from '@terrafirmagreg-team/recipe/types';
+
+export const EMPTY_ROWS: RecipeCompactRow[] = [];
+
+export function useItemFeeds({
+  dataset,
+  index,
+  indexLoading,
+  item,
+  kind,
+}: {
+  dataset: DatasetRef;
+  index: RecipeCompactIndex | null;
+  indexLoading: boolean;
+  item: string;
+  kind: 'item' | 'fluid';
+}) {
+  const recipesRes = useAsyncResult(
+    () =>
+      index
+        ? recipesForOutput(dataset, index, item, { includeTagRows: false })
+        : Promise.resolve(EMPTY_ROWS),
+    [dataset, index, item],
+  );
+  const usesRes = useAsyncResult(
+    () =>
+      index
+        ? usesForInput(dataset, index, item, kind)
+        : Promise.resolve(EMPTY_ROWS),
+    [dataset, index, item, kind],
+  );
+  return {
+    recipes: recipesRes.value,
+    uses: usesRes.value,
+    pending: indexLoading || !index || recipesRes.pending || usesRes.pending,
+  };
+}
+

package/src/hooks/use-item-pane.ts

@@ -0,0 +1,106 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { createElement, useMemo } from 'react';
+import { ArrowDownToLine, ArrowUpFromLine, Tag } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { usePaneKeys } from '@terrafirmagreg-team/ui/hooks/use-pane-keys';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import { EMPTY_ROWS } from '@terrafirmagreg-team/recipe/hooks/use-item-feeds';
+import type { PaneTabOption } from '@terrafirmagreg-team/recipe/components/views/browser/pane-tabs';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type {
+  RecipeCompactRow,
+  RecipeHrefOpts,
+  RecipeRelation,
+} from '@terrafirmagreg-team/recipe/types';
+
+export type ItemPane = 'recipes' | 'uses' | 'tags';
+
+const inFeed = (id: string | undefined, rows: RecipeCompactRow[] | undefined) =>
+  id != null && (rows ?? EMPTY_ROWS).some((row) => row.id === id);
+
+export function useItemPane({
+  dataset,
+  lang,
+  nav,
+  relation,
+  recipeId,
+  recipes,
+  uses,
+  tagCount,
+  feedsPending,
+}: {
+  dataset: DatasetRef;
+  lang: Lang;
+  nav: RecipeHrefOpts;
+  relation?: RecipeRelation;
+  recipeId?: string;
+  recipes?: RecipeCompactRow[];
+  uses?: RecipeCompactRow[];
+  tagCount: number;
+  feedsPending: boolean;
+}) {
+  const t = useTranslations();
+  const available = {
+    recipes: (recipes ?? EMPTY_ROWS).length > 0,
+    uses: (uses ?? EMPTY_ROWS).length > 0,
+    tags: tagCount > 0,
+  };
+  const fallback: ItemPane =
+    inFeed(recipeId, uses) && !inFeed(recipeId, recipes)
+      ? 'uses'
+      : available.recipes
+        ? 'recipes'
+        : available.uses
+          ? 'uses'
+          : 'recipes';
+  const pane: ItemPane =
+    relation && (feedsPending || available[relation]) ? relation : fallback;
+  const select = (next: ItemPane) => {
+    replaceUrlState(
+      recipeHref(dataset, lang, {
+        ...nav,
+        relation: next === 'recipes' ? undefined : next,
+        rpage: undefined,
+      }),
+    );
+  };
+  usePaneKeys<ItemPane>(
+    {
+      r: available.recipes ? 'recipes' : undefined,
+      u: available.uses ? 'uses' : undefined,
+      t: available.tags ? 'tags' : undefined,
+    },
+    select,
+  );
+  const options = useMemo<PaneTabOption<ItemPane>[]>(
+    () => [
+      {
+        id: 'recipes',
+        label: t('Recipes', { note: 'recipe.pane_recipes' }),
+        icon: createElement(ArrowDownToLine, { className: 'size-3.5' }),
+        help: 'R',
+        disabled: !available.recipes,
+      },
+      {
+        id: 'uses',
+        label: t('Uses', { note: 'recipe.pane_uses' }),
+        icon: createElement(ArrowUpFromLine, { className: 'size-3.5' }),
+        help: 'U',
+        disabled: !available.uses,
+      },
+      {
+        id: 'tags',
+        label: t('Tags', { note: 'recipe.pane_tags' }),
+        icon: createElement(Tag, { className: 'size-3.5' }),
+        help: 'T',
+        disabled: !available.tags,
+      },
+    ],
+    [available.recipes, available.uses, available.tags, t],
+  );
+  return { pane, select, options };
+}
+

package/src/hooks/use-item-press.ts

@@ -0,0 +1,89 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { startTransition, useCallback, useEffect, useRef } from 'react';
+import {
+  calcStorageKey,
+  readCalcStorage,
+  writeCalcStorage,
+} from '@terrafirmagreg-team/recipe/lib/calc/storage';
+import { requestCalcFocus } from '@terrafirmagreg-team/recipe/lib/calc/focus';
+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 useItemPress({
+  dataset,
+  lang,
+  nav,
+  isCalc,
+}: {
+  dataset: DatasetRef;
+  lang: Lang;
+  nav: RecipeHrefOpts;
+  isCalc: boolean;
+}) {
+  const pressRef = useRef<(id: string, ref?: 'item' | 'fluid') => void>(
+    () => {},
+  );
+  useEffect(() => {
+    pressRef.current = (id: string, ref?: 'item' | 'fluid') => {
+      startTransition(() => {
+        if (isCalc) {
+          const key = calcStorageKey('recipe', dataset);
+          const parsed = readCalcStorage(key) ?? {
+            cards: [],
+            wires: [],
+            tagSelections: {},
+          };
+          const kind = ref === 'fluid' ? ('fluid' as const) : ('item' as const);
+          const same = parsed.cards.findIndex(
+            (row) => row.materialId === id && row.kind === kind,
+          );
+          const cards =
+            same >= 0
+              ? parsed.cards.map((row, index) =>
+                  index === same ? { ...row, crafts: row.crafts + 1 } : row,
+                )
+              : [
+                  ...parsed.cards,
+                  {
+                    id: `c${Date.now().toString(36)}${Math.random()
+                      .toString(36)
+                      .slice(2, 4)}`,
+                    materialId: id,
+                    kind,
+                    recipeId: null,
+                    crafts: 1,
+                  },
+                ];
+          writeCalcStorage(key, {
+            cards,
+            wires: parsed.wires,
+            tagSelections: parsed.tagSelections,
+          });
+          requestCalcFocus(id);
+          return;
+        }
+        replaceUrlState(
+          recipeHref(dataset, lang, {
+            ...nav,
+            type: undefined,
+            tool: undefined,
+            item: ref === 'fluid' ? undefined : id,
+            fluid: ref === 'fluid' ? id : undefined,
+            id: undefined,
+            relation: undefined,
+            rpage: undefined,
+          }),
+        );
+      });
+    };
+  });
+  return useCallback(
+    (id: string, ref?: 'item' | 'fluid') => pressRef.current(id, ref),
+    [],
+  );
+}
+

package/src/hooks/use-item-tag-groups.ts

@@ -0,0 +1,54 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useMemo } from 'react';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { loadTagSlice } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { registryId } from '@terrafirmagreg-team/recipe/lib/lookup';
+import { splitDumpId } from '@terrafirmagreg-team/dump/lib/dump/paths';
+import type { RecipeCompactIndex } from '@terrafirmagreg-team/recipe/types';
+
+const EMPTY_TAGS: { id: string; kind: string }[] = [];
+
+export function useItemTagGroups({
+  dataset,
+  index,
+  item,
+  kind,
+}: {
+  dataset: DatasetRef;
+  index: RecipeCompactIndex | null;
+  item: string;
+  kind: 'item' | 'fluid';
+}) {
+  const ids =
+    useAsyncValue(async () => {
+      const base = registryId(item);
+      const ns = splitDumpId(base)?.ns;
+      if (!index || !ns) return [] as { id: string; kind: string }[];
+      const kinds = kind === 'item' ? ['item', 'block'] : [kind];
+      const slices = await Promise.all(
+        kinds.map((tagKind) => loadTagSlice(dataset, tagKind, ns)),
+      );
+      return slices.flatMap((slice, i) =>
+        (slice[base] ?? slice[item] ?? []).map((id) => ({
+          id,
+          kind: kinds[i],
+        })),
+      );
+    }, [dataset, index, item, kind]) ?? EMPTY_TAGS;
+  const groups = useMemo(() => {
+    const order = ['item', 'block', 'fluid'];
+    const byKind = new Map<string, string[]>();
+    for (const { id, kind: tagKind } of ids) {
+      const list = byKind.get(tagKind);
+      if (list) list.push(id);
+      else byKind.set(tagKind, [id]);
+    }
+    return [...byKind.entries()].sort(
+      (a, b) => order.indexOf(a[0]) - order.indexOf(b[0]),
+    );
+  }, [ids]);
+  return { ids, groups };
+}
+

package/src/hooks/use-item-tooltips.ts

@@ -0,0 +1,18 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { loadItemTooltips } from '@terrafirmagreg-team/recipe/lib/client-index';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export function useItemTooltips(
+  dataset: DatasetRef,
+  lang: Lang,
+  enabled: boolean,
+): Record<string, string[]> | undefined {
+  return useAsyncValue(
+    enabled ? () => loadItemTooltips(dataset, lang) : false,
+    [dataset, lang, enabled],
+  );
+}
+

package/src/hooks/use-left-sidebar-tree.ts

@@ -0,0 +1,34 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { useMemo } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { useLocationSearchParams } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import { useLastValue } from '@terrafirmagreg-team/ui/hooks/use-last-value';
+import { useRecipeModNames } from '@terrafirmagreg-team/recipe/hooks/use-mod-names';
+import { useSidebarGroup } from '@terrafirmagreg-team/recipe/hooks/use-sidebar-group';
+import { groupRecipeSidebarByMod } from '@terrafirmagreg-team/recipe/lib/sidebar';
+import { parseSectionLocation } from '@terrafirmagreg-team/sites/location';
+
+export function useRecipeLeftSidebarTree(tree: PageTree.Root): PageTree.Root {
+  const { dataset: datasetId } = parseSectionLocation(usePathname());
+  const lang = useResolvedLang();
+  const { sidebarGroup } = useSidebarGroup();
+  const scopeKey = datasetId ?? '';
+  const version = useLocationSearchParams().get('version') ?? undefined;
+  const dataset = useMemo(
+    () => (datasetId ? { id: datasetId, version } : undefined),
+    [datasetId, version],
+  );
+  const modNames = useLastValue(
+    useRecipeModNames(
+      sidebarGroup === 'mod' ? dataset : undefined,
+      lang,
+    ),
+    scopeKey,
+  );
+  return sidebarGroup === 'mod' && modNames
+    ? groupRecipeSidebarByMod(tree, modNames)
+    : tree;
+}
+

package/src/hooks/use-mod-names.ts

@@ -0,0 +1,17 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { loadClientModNames } from '@terrafirmagreg-team/dump/lib/dump/client/mods';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export function useRecipeModNames(
+  dataset: DatasetRef | undefined,
+  lang: Lang,
+): Record<string, string> | undefined {
+  return useAsyncValue(
+    dataset ? () => loadClientModNames(dataset, lang) : undefined,
+    [dataset, lang],
+  );
+}
+

package/src/hooks/use-mount-limit.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useMountLimit(length: number, resetKey: unknown): number {
+  const [limit, setLimit] = useState(40);
+  const [lastKey, setLastKey] = useState(resetKey);
+  if (lastKey !== resetKey) {
+    setLastKey(resetKey);
+    setLimit(40);
+  }
+  useEffect(() => {
+    if (limit >= length) return;
+    const timer = setInterval(
+      () => setLimit((prev) => Math.min(prev + 40, length)),
+      16,
+    );
+    return () => clearInterval(timer);
+  }, [length, limit]);
+  return limit;
+}
+

package/src/hooks/use-panel-cells.ts

@@ -0,0 +1,117 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useDeferredValue, useMemo } from 'react';
+import { useItemTooltips } from '@terrafirmagreg-team/recipe/hooks/use-item-tooltips';
+import { useTagMembers } from '@terrafirmagreg-team/recipe/hooks/use-tag-members';
+import { filterCatalogItemIds } from '@terrafirmagreg-team/recipe/lib/search';
+import {
+  buildPanelCells,
+  panelPool,
+  type ItemPanelMode,
+} from '@terrafirmagreg-team/recipe/lib/panel';
+import {
+  filterUsedIds,
+  hasRecipeUsage,
+  recipeUsedItems,
+} from '@terrafirmagreg-team/recipe/lib/used-items';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type {
+  FavoriteEntry,
+  ItemPanelCell,
+  RecipeCompactIndex,
+} from '@terrafirmagreg-team/recipe/types';
+
+export function usePanelCells({
+  dataset,
+  index,
+  names,
+  lang,
+  mode,
+  query,
+  tab,
+  hideUnused,
+  favorites,
+  expandedGroups,
+}: {
+  dataset: DatasetRef;
+  index: RecipeCompactIndex | null;
+  names: Record<string, Record<string, string>>;
+  lang: Lang;
+  mode: ItemPanelMode;
+  query: string;
+  tab?: string;
+  hideUnused: boolean;
+  favorites: { entries: FavoriteEntry[] };
+  expandedGroups: ReadonlySet<string>;
+}) {
+  const favoriteIds = useMemo(
+    () =>
+      favorites.entries.flatMap((entry) =>
+        entry.kind === 'stack' ? [entry.id] : [],
+      ),
+    [favorites.entries],
+  );
+
+  const dIndex = useDeferredValue(index);
+  const dNames = useDeferredValue(names);
+  const dLang = useDeferredValue(lang);
+
+  const pool = useMemo(
+    () => panelPool(mode, favoriteIds, dIndex, tab),
+    [dIndex, mode, favoriteIds, tab],
+  );
+
+  const used = useMemo(() => recipeUsedItems(dIndex), [dIndex]);
+  const tooltips = useItemTooltips(dataset, dLang, query.includes('$'));
+  const tagMembers = useTagMembers(dataset, query.includes('#'));
+  const filtered = useMemo(() => {
+    const base =
+      mode === 'all' && hideUnused && hasRecipeUsage(used)
+        ? filterUsedIds(pool, used)
+        : pool;
+    return filterCatalogItemIds(base, query, {
+      names: dNames,
+      lang: dLang,
+      tagMembers,
+      mods: dIndex?.mods,
+      tooltips,
+    });
+  }, [pool, mode, hideUnused, used, query, dNames, dLang, dIndex, tooltips, tagMembers]);
+  const deferredFiltered = useDeferredValue(filtered);
+  const cells = useMemo(() => {
+    if (mode === 'fav') {
+      const shown = new Set(deferredFiltered);
+      return favorites.entries.flatMap((entry): ItemPanelCell[] =>
+        entry.kind === 'recipe'
+          ? [
+              {
+                kind: 'recipe',
+                fav: {
+                  id: entry.id,
+                  type: entry.type,
+                  ...(entry.icon ? { icon: entry.icon } : {}),
+                },
+              },
+            ]
+          : shown.has(entry.id)
+            ? [
+                {
+                  kind: 'stack',
+                  id: entry.id,
+                  ...(entry.ref ? { ref: entry.ref } : {}),
+                },
+              ]
+            : [],
+      );
+    }
+    return buildPanelCells(
+      deferredFiltered,
+      dIndex?.groups,
+      expandedGroups,
+    );
+  }, [deferredFiltered, dIndex, mode, expandedGroups, favorites.entries]);
+
+  return { cells, filtered: deferredFiltered, favoriteIds, dIndex, dNames, dLang };
+}
+