@terrafirmagreg-team/recipe 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/recipe",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
   "description": "Recipe viewer and calculator",
   "license": "LGPL-3.0-only",
@@ -20,19 +20,18 @@
     ],
     "./types/*": "./src/types/*.ts",
     "./types": "./src/types/index.ts",
-    "./styles.css": "./styles.css",
-    "./locales": "./src/locales.ts"
+    "./styles.css": "./styles.css"
   },
   "dependencies": {
     "@terrafirmagreg-team/data": "1.2.1",
     "@terrafirmagreg-team/dump": "1.2.1",
-    "@terrafirmagreg-team/game": "1.2.1",
-    "@terrafirmagreg-team/kit": "1.2.1",
+    "@terrafirmagreg-team/game": "1.2.2",
+    "@terrafirmagreg-team/kit": "1.2.3",
     "@terrafirmagreg-team/mdx": "1.2.1",
     "@terrafirmagreg-team/preview": "1.2.1",
     "@terrafirmagreg-team/sites": "1.2.1",
-    "@terrafirmagreg-team/translate": "1.2.1",
-    "@terrafirmagreg-team/ui": "1.2.1",
+    "@terrafirmagreg-team/translate": "1.2.3",
+    "@terrafirmagreg-team/ui": "1.2.2",
     "comlink": "^4.4.2",
     "fflate": "0.8.3",
     "fumadocs-core": "16.17.8",

package/src/components/cards/slot-hitbox.tsx

@@ -156,7 +156,7 @@ export function SlotHitbox({
         dataset={dataset}
         id={widget.id}
         name={name}
-        kind={kind === 'tag' ? 'item' : kind}
+        kind={widgetRefKind(widget)}
         lang={lang}
         langMap={langMap}
         level={tooltipLevel}
@@ -177,7 +177,7 @@ export function SlotHitbox({
       dataset={dataset}
       id={widget.id}
       name={name}
-      kind={kind === 'tag' ? 'item' : kind}
+      kind={widgetRefKind(widget)}
       lang={lang}
       langMap={langMap}
       level={tooltipLevel}

package/src/components/embed-card.tsx

@@ -37,6 +37,7 @@ export function RecipeEmbedCard({
           title={title}
           src={src}
           onFail={() => setFailed(true)}
+          interactive={false}
         />
       </FitBox>
     </Link>

package/src/components/tree.tsx

@@ -4,10 +4,9 @@ import { createElement } from 'react';
 import type * as PageTree from 'fumadocs-core/page-tree';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { loadMergedLangMap, creativeTabName } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/load';
-import { loadClientManifest } from '@terrafirmagreg-team/dump/lib/dump/client/dump';
 import { DUMP_POINTER_TTL } from '@terrafirmagreg-team/dump/lib/dump/json-reader';
 import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
-import { loadDatasetRecipeCategories } from '@terrafirmagreg-team/recipe/lib/data/category/load';
+import { getRecipeSource } from '@terrafirmagreg-team/recipe/lib/source';
 import { keyTreeNode } from '@terrafirmagreg-team/translate/server';
 import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
 import { encodeQueryValue } from '@terrafirmagreg-team/translate/lib/url';
@@ -68,8 +67,9 @@ async function buildRecipeTrees(): Promise<SectionTrees> {
     for (const lang of languages ?? [defaultLanguage]) {
       const ref = { id };
       const map = await loadMergedLangMap(ref, lang);
-      const categories = await loadDatasetRecipeCategories(ref);
-      const types = (await loadClientManifest(ref))?.indexes.recipes.types;
+      const source = getRecipeSource();
+      const categories = await source.categories(ref);
+      const types = (await source.manifest(ref))?.indexes.recipes.types;
       const nonEmpty = types
         ? new Set(
             types

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

@@ -3,6 +3,7 @@
 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 { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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';
@@ -67,6 +68,7 @@ function RecipeGridCard({
   defaultMaterial?: string;
 }) {
   const t = useTranslations();
+  const resolved = useResolvedLang();
   const { dataset, lang, langMap, names, nav, index } = session;
   const recipe = useAsyncValue(
     () => loadClientRecipe(dataset, row.id, row.bucket),
@@ -89,17 +91,17 @@ function RecipeGridCard({
 
   const focus = () =>
     pushUrlState(
-      recipeHref(dataset, lang, { ...nav, id: row.id, solo: undefined }),
+      recipeHref(dataset, resolved, { ...nav, id: row.id, solo: undefined }),
     );
 
   const isolate = () =>
     pushUrlState(
-      recipeHref(dataset, lang, { ...nav, id: row.id, solo: '1' }),
+      recipeHref(dataset, resolved, { ...nav, id: row.id, solo: '1' }),
     );
 
   const openNewTab = () =>
     window.open(
-      recipeHref(dataset, lang, { ...nav, id: row.id, solo: '1' }),
+      recipeHref(dataset, resolved, { ...nav, id: row.id, solo: '1' }),
       '_blank',
       'noopener',
     );

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

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import type { ReactNode } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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';
@@ -38,6 +39,7 @@ export function RecipeFrame({
   children: ReactNode;
 }) {
   const t = useTranslations();
+  const resolved = useResolvedLang();
   const goPage = (dir: number) => {
     if (!list || list.pages <= 1) return;
     const next = (list.page + dir + list.pages) % list.pages;
@@ -46,7 +48,7 @@ export function RecipeFrame({
       return;
     }
     replaceUrlState(
-      recipeHref(session.dataset, session.lang, {
+      recipeHref(session.dataset, resolved, {
         ...session.nav,
         id: undefined,
         rpage: next > 0 ? next + 1 : undefined,
@@ -88,7 +90,6 @@ export function RecipeFrame({
         ) : (
           <QueryPager
             dataset={session.dataset}
-            lang={session.lang}
             params={{ ...session.nav, id: undefined }}
             query={session.query}
             list={list}

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

@@ -21,6 +21,27 @@ 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 RecipeBrowserFallback() {
+  return (
+    <div className="viewport-shell recipe-viewport not-prose flex w-full flex-col gap-3">
+      <div className="flex min-h-0 flex-1 gap-4">
+        <main className="flex min-w-0 flex-1 flex-col">
+          <Skeleton className="mb-3 h-9 w-full rounded-md" />
+          <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>
+        </main>
+      </div>
+    </div>
+  );
+}
+
 export function RecipeBrowser({
   dataset: id,
   datasetTitle,

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

@@ -9,6 +9,7 @@ import {
   useState,
 } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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';
@@ -111,12 +112,13 @@ export const ItemPanel = memo(function ItemPanel({
     });
   }, []);
 
-  const onPress = useItemPress({ dataset, lang, nav, isCalc });
+  const resolved = useResolvedLang();
+  const onPress = useItemPress({ dataset, nav, isCalc });
 
   const setTab = (next: string) => {
     setPanelPage(0);
     replaceUrlState(
-      recipeHref(dataset, lang, {
+      recipeHref(dataset, resolved, {
         ...nav,
         tab: next || undefined,
       }),
@@ -212,7 +214,6 @@ export const ItemPanel = memo(function ItemPanel({
         <RecipeSettings />
         <QuerySearch
           dataset={dataset}
-          lang={lang}
           params={nav}
           query={query}
           onQuery={(next) => {

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

@@ -2,6 +2,7 @@
 
 import { useMemo, useRef } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
 import { ItemViewHeader } from '@terrafirmagreg-team/recipe/components/views/browser/item-view-header';
 import {
@@ -35,6 +36,7 @@ import type {
 
 export function ItemView({ session }: { session: RecipeSession }) {
   const t = useTranslations();
+  const resolved = useResolvedLang();
   const {
     dataset,
     lang,
@@ -63,7 +65,6 @@ export function ItemView({ session }: { session: RecipeSession }) {
   const tags = useItemTagGroups({ dataset, index, item, kind });
   const pane = useItemPane({
     dataset,
-    lang,
     nav,
     relation,
     recipeId,
@@ -110,13 +111,13 @@ export function ItemView({ session }: { session: RecipeSession }) {
       const row = typeFilter.rows[focusIndex + dir];
       if (focusIndex < 0 || !row) return;
       replaceUrlState(
-        recipeHref(dataset, lang, { ...nav, id: row.id, rpage: undefined }),
+        recipeHref(dataset, resolved, { ...nav, id: row.id, rpage: undefined }),
       );
       return;
     }
     if (list.pages <= 1) return;
     replaceUrlState(
-      recipeHref(dataset, lang, {
+      recipeHref(dataset, resolved, {
         ...nav,
         rpage: (list.page + dir + list.pages) % list.pages,
       }),

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

@@ -2,6 +2,7 @@
 import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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';
@@ -27,6 +28,7 @@ export function ItemTagGroups({
   nav: RecipeHrefOpts;
 }) {
   const t = useTranslations();
+  const resolved = useResolvedLang();
   if (!groups.length) {
     return <EmptyState variant="empty">{t('No tags for this item.', { note: 'recipe.empty_tags' })}</EmptyState>;
   }
@@ -47,7 +49,7 @@ export function ItemTagGroups({
               return (
                 <LinkPreview
                   key={`${tagKind}:${id}`}
-                  href={recipeHref(dataset, lang, {
+                  href={recipeHref(dataset, resolved, {
                     type: 'emi:tag',
                     id: tagPseudoId(id, tagKind),
                     search: query || undefined,
@@ -65,7 +67,7 @@ export function ItemTagGroups({
                         ? text || token
                         : `${text} ${token}`;
                     replaceUrlState(
-                      recipeHref(dataset, lang, {
+                      recipeHref(dataset, resolved, {
                         type: 'emi:tag',
                         search,
                       }),

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

@@ -10,20 +10,18 @@ import {
 } 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 { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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,
@@ -35,6 +33,7 @@ export function QuerySearch({
   placeholder?: string;
   className?: string;
 }) {
+  const resolved = useResolvedLang();
   return (
     <InputGroup className={cn('w-full', className)}>
       <InputGroupAddon>
@@ -48,7 +47,7 @@ export function QuerySearch({
           const next = event.target.value;
           onQuery(next);
           replaceUrlState(
-            recipeHref(dataset, lang, {
+            recipeHref(dataset, resolved, {
               ...params,
               search: next || undefined,
             }),
@@ -61,7 +60,6 @@ export function QuerySearch({
 
 export function QueryPager({
   dataset,
-  lang,
   params,
   query,
   list,
@@ -81,6 +79,7 @@ export function QueryPager({
   leading?: ReactNode;
   className?: string;
 }) {
+  const resolved = useResolvedLang();
   return (
     <Pager
       page={list.page}
@@ -92,7 +91,7 @@ export function QueryPager({
       className={className}
       onPage={(next) =>
         replaceUrlState(
-          recipeHref(dataset, lang, {
+          recipeHref(dataset, resolved, {
             ...params,
             search: query || undefined,
             rpage: next + 1,

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 import { useAsyncResult, useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
 import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
 import {
@@ -29,9 +30,9 @@ const EMPTY_ROWS: RecipeCompactRow[] = [];
 
 export function TypeView({ session }: { session: RecipeSession }) {
   const t = useTranslations();
+  const resolved = useResolvedLang();
   const {
     dataset,
-    lang,
     index,
     indexLoading,
     place,
@@ -82,14 +83,14 @@ export function TypeView({ session }: { session: RecipeSession }) {
     const row = focusRes.value?.[0];
     const category = row ? index.types[row.type] : undefined;
     replaceUrlState(
-      recipeHref(dataset, lang, {
+      recipeHref(dataset, resolved, {
         ...nav,
         ...(category && category !== shown ? { type: category } : {}),
         ...(category ? {} : { id: undefined }),
         rpage: undefined,
       }),
     );
-  }, [focusIndex, focusRes.pending, focusRes.value, index, nav, dataset, lang, recipeId, rows, shown]);
+  }, [focusIndex, focusRes.pending, focusRes.value, index, nav, dataset, resolved, recipeId, rows, shown]);
   const list = useFitPages(
     boxRef,
     feedRows,
@@ -109,13 +110,13 @@ export function TypeView({ session }: { session: RecipeSession }) {
       const row = allRows[next];
       if (focusIndex < 0 || !row) return;
       replaceUrlState(
-        recipeHref(dataset, lang, { ...nav, id: row.id, rpage: undefined }),
+        recipeHref(dataset, resolved, { ...nav, id: row.id, rpage: undefined }),
       );
       return;
     }
     if (list.pages <= 1) return;
     replaceUrlState(
-      recipeHref(dataset, lang, {
+      recipeHref(dataset, resolved, {
         ...nav,
         rpage: (list.page + dir + list.pages) % list.pages,
       }),
@@ -154,7 +155,7 @@ export function TypeView({ session }: { session: RecipeSession }) {
           onChange={(id) => {
             if (id === shown) return;
             replaceUrlState(
-              recipeHref(dataset, lang, {
+              recipeHref(dataset, resolved, {
                 ...nav,
                 type: id,
                 id: undefined,

package/src/components/views/landing.tsx

@@ -0,0 +1,32 @@
+import { Suspense } from 'react';
+import { WorkspaceBody } from '@terrafirmagreg-team/ui/components/layouts/workspace';
+import type {
+  SectionLandingProps,
+  SectionLandingView,
+} from '@terrafirmagreg-team/kit/components/views/routes';
+import type { RecipeSource } from '@terrafirmagreg-team/recipe/lib/source';
+import {
+  RecipeBrowser,
+  RecipeBrowserFallback,
+} from '@terrafirmagreg-team/recipe/components/views/browser';
+
+export function recipeLanding({
+  page,
+  lang,
+}: SectionLandingProps<RecipeSource>): SectionLandingView {
+  return {
+    node: (
+      <WorkspaceBody className="viewport-body">
+        <Suspense fallback={<RecipeBrowserFallback />}>
+          <RecipeBrowser
+            dataset={page.dataset.id}
+            datasetTitle={page.datasetTitle ?? page.dataset.id}
+            lang={lang}
+            versions={page.versions}
+          />
+        </Suspense>
+      </WorkspaceBody>
+    ),
+    workspace: { full: true, pagination: false },
+  };
+}

package/src/components/views/layout.tsx

@@ -0,0 +1,14 @@
+import { Layout } from '@terrafirmagreg-team/kit/components/layouts/layout';
+import type { SectionLayoutViewProps } from '@terrafirmagreg-team/kit/components/views/routes';
+import { RecipeAxisSwitcher } from '@terrafirmagreg-team/recipe/components/views/browser/axis-switcher';
+import { useRecipeLeftSidebarTree } from '@terrafirmagreg-team/recipe/hooks/use-left-sidebar-tree';
+
+export function RecipeLayout(props: SectionLayoutViewProps) {
+  return (
+    <Layout
+      {...props}
+      useTree={useRecipeLeftSidebarTree}
+      sidebar={{ feature: RecipeAxisSwitcher }}
+    />
+  );
+}

package/src/hooks/alloy/use-mix-state.ts

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
 import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
 import { useFluidColors } from '@terrafirmagreg-team/recipe/hooks/alloy/use-fluid-colors';
@@ -92,10 +93,11 @@ export function useMixState(recipe: AlloyRecipe, session: RecipeSession) {
     }
   }
 
+  const resolved = useResolvedLang();
   useEffect(() => {
     const mix = amounts.map((value) => trim(value)).join(';');
     replaceUrlState(
-      recipeHref(session.dataset, session.lang, {
+      recipeHref(session.dataset, resolved, {
         tool: 'alloy',
         id: recipe.recipe.id,
         tab: session.tab,
@@ -108,7 +110,7 @@ export function useMixState(recipe: AlloyRecipe, session: RecipeSession) {
     amounts,
     recipe.recipe.id,
     session.dataset,
-    session.lang,
+    resolved,
     session.tab,
   ]);
   const mix = useMemo(

package/src/hooks/calc/use-data.ts

@@ -21,13 +21,12 @@ import { useCalcResolver } from './use-resolver';
 import { useRecipeDefaults } from './use-defaults';
 
 export function useCalcData(session: RecipeSession) {
-  const { dataset, lang } = session;
+  const { dataset } = session;
   const catalog = session.index;
   const storageKey = calcStorageKey('recipe', dataset);
   const sharePending = useCalcShare({
     storageKey,
     dataset,
-    lang,
     incoming: session.tree ?? '',
   });
   const {

package/src/hooks/calc/use-share.ts

@@ -8,18 +8,17 @@ import {
   writeCalcTabs,
 } from '@terrafirmagreg-team/recipe/lib/calc/storage';
 import { recipeCalcHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
 import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 export function useCalcShare({
   storageKey,
   dataset,
-  lang,
   incoming,
 }: {
   storageKey: string;
   dataset: DatasetRef;
-  lang: string;
   incoming: string;
 }): boolean {
   const isShareId = incoming.startsWith('s');
@@ -44,6 +43,7 @@ export function useCalcShare({
     };
   }, [isShareId, incoming, dataset]);
   const transport = isShareId ? sharedTree : incoming || null;
+  const resolved = useResolvedLang();
 
   useEffect(() => {
     if (transport === null) return;
@@ -56,8 +56,8 @@ export function useCalcShare({
         entry.id,
       );
     }
-    if (incoming) replaceUrlState(recipeCalcHref(dataset, lang));
-  }, [transport, storageKey, dataset, lang, incoming]);
+    if (incoming) replaceUrlState(recipeCalcHref(dataset, resolved));
+  }, [transport, storageKey, dataset, resolved, incoming]);
 
   return isShareId && sharedTree === null;
 }

package/src/hooks/use-add-to-calc.ts

@@ -6,11 +6,13 @@ import {
   encodeCalcState,
 } from '@terrafirmagreg-team/recipe/lib/calc/tree';
 import { recipeCalcHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
 import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 
 export function useAddToCalc(session: RecipeSession) {
-  const { dataset, lang, tree } = session;
+  const { dataset, tree } = session;
+  const resolved = useResolvedLang();
   return useCallback(
     (item: string, kind: 'item' | 'fluid') => {
       const state = decodeCalcState(tree ?? '') ?? {
@@ -40,12 +42,12 @@ export function useAddToCalc(session: RecipeSession) {
       replaceUrlState(
         recipeCalcHref(
           dataset,
-          lang,
+          resolved,
           encodeCalcState({ ...state, cards }),
         ),
       );
     },
-    [tree, dataset, lang],
+    [tree, dataset, resolved],
   );
 }
 

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

@@ -4,12 +4,12 @@ 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 { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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,
@@ -23,7 +23,6 @@ const inFeed = (id: string | undefined, rows: RecipeCompactRow[] | undefined) =>
 
 export function useItemPane({
   dataset,
-  lang,
   nav,
   relation,
   recipeId,
@@ -33,7 +32,6 @@ export function useItemPane({
   feedsPending,
 }: {
   dataset: DatasetRef;
-  lang: Lang;
   nav: RecipeHrefOpts;
   relation?: RecipeRelation;
   recipeId?: string;
@@ -43,6 +41,7 @@ export function useItemPane({
   feedsPending: boolean;
 }) {
   const t = useTranslations();
+  const resolved = useResolvedLang();
   const available = {
     recipes: (recipes ?? EMPTY_ROWS).length > 0,
     uses: (uses ?? EMPTY_ROWS).length > 0,
@@ -60,7 +59,7 @@ export function useItemPane({
     relation && (feedsPending || available[relation]) ? relation : fallback;
   const select = (next: ItemPane) => {
     replaceUrlState(
-      recipeHref(dataset, lang, {
+      recipeHref(dataset, resolved, {
         ...nav,
         relation: next === 'recipes' ? undefined : next,
         rpage: undefined,

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

@@ -9,21 +9,20 @@ import {
 } 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 { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
 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 resolved = useResolvedLang();
   const pressRef = useRef<(id: string, ref?: 'item' | 'fluid') => void>(
     () => {},
   );
@@ -67,7 +66,7 @@ export function useItemPress({
           return;
         }
         replaceUrlState(
-          recipeHref(dataset, lang, {
+          recipeHref(dataset, resolved, {
             ...nav,
             type: undefined,
             tool: undefined,