@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/components/views/alloy/mix/ratio.tsx

@@ -26,7 +26,7 @@ export function RatioPanel({
     <div className="space-y-1.5 rounded-md border border-dashed px-3 py-2 text-sm">
       <div className="flex items-center gap-2">
         <span className="text-xs text-muted-foreground">
-          {t('recipe.alloy.ratio_ingots')}
+          {t('Recipe ratio in ingots', { note: 'recipe.alloy.ratio_ingots' })}
         </span>
         <span className="ms-auto flex shrink-0 items-center gap-1.5">
           {[2, 4, 8].map((mult) => {
@@ -40,7 +40,7 @@ export function RatioPanel({
                     <Button
                       variant="outline"
                       size="xs"
-                      aria-label={`${t('recipe.alloy.hint.mult')}: ${text}`}
+                      aria-label={`${t('Apply the recipe ratio multiplied', { note: 'recipe.alloy.hint.mult' })}: ${text}`}
                       onClick={() => applyRatioMix(mult)}
                     />
                   }
@@ -61,9 +61,9 @@ export function RatioPanel({
                 />
               }
             >
-              {t('recipe.alloy.apply')}
+              {t('Apply', { note: 'recipe.alloy.apply' })}
             </TooltipTrigger>
-            <TooltipContent>{t('recipe.alloy.hint.apply')}</TooltipContent>
+            <TooltipContent>{t('Fill fields with the recipe ratio in whole ingots', { note: 'recipe.alloy.hint.apply' })}</TooltipContent>
           </Tooltip>
         </span>
       </div>
@@ -84,10 +84,11 @@ export function RatioPanel({
           </span>
         ))}
         <span className="tabular-nums text-muted-foreground">
-          → {ratioMix.total.toLocaleString()} {t('recipe.alloy.unit.ingot')} (
-          {(ratioMix.total * INGOT_MB).toLocaleString()} {t('recipe.alloy.unit.mb')})
+          → {ratioMix.total.toLocaleString()} {t('ing.', { note: 'recipe.alloy.unit.ingot' })} (
+          {(ratioMix.total * INGOT_MB).toLocaleString()} {t('mB', { note: 'recipe.alloy.unit.mb' })})
         </span>
       </div>
     </div>
   );
 }
+

package/src/components/views/alloy/mix/rows.tsx

@@ -8,7 +8,7 @@ import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/ico
 import { minShareMix } from '@terrafirmagreg-team/recipe/lib/alloy/mix';
 import { AlloyRangeBar } from '@terrafirmagreg-team/recipe/components/views/alloy/range-bar';
 import { Check, Minus, Plus, TrendingDown, X } from 'lucide-react';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { AlloyComponent } from '@terrafirmagreg-team/recipe/types/alloy';
 import type { MixState } from '@terrafirmagreg-team/recipe/hooks/alloy/use-mix-state';
 
@@ -78,7 +78,7 @@ export function MixRows({
                   max={range.max}
                   value={row?.percent ?? 0}
                   color={colors[i]}
-                  label={`${t('recipe.alloy.range_allowed')}: ${formatPercent(
+                  label={`${t('Allowed window', { note: 'recipe.alloy.range_allowed' })}: ${formatPercent(
                     range.min,
                   )}–${formatPercent(range.max)}%`}
                 />
@@ -90,7 +90,7 @@ export function MixRows({
               <Button
                 variant="outline"
                 size="icon-xs"
-                aria-label={`${t('recipe.alloy.step.down')} ${name(slot.id)}`}
+                aria-label={`${t('Remove 1', { note: 'recipe.alloy.step.down' })} ${name(slot.id)}`}
                 onClick={() => stepInput(i, -1)}
               >
                 <Minus />
@@ -113,7 +113,7 @@ export function MixRows({
               <Button
                 variant="outline"
                 size="icon-xs"
-                aria-label={`${t('recipe.alloy.step.up')} ${name(slot.id)}`}
+                aria-label={`${t('Add 1', { note: 'recipe.alloy.step.up' })} ${name(slot.id)}`}
                 onClick={() => stepInput(i, 1)}
               >
                 <Plus />
@@ -123,9 +123,7 @@ export function MixRows({
               </span>
               {range ? (
                 <IconButton
-                  label={`${t('recipe.alloy.economize')} ${name(slot.id)} — ${t(
-                    'recipe.alloy.hint.economize',
-                  )}`}
+                  label={`${t('Minimize', { note: 'recipe.alloy.economize' })} ${name(slot.id)}: ${t('Set this metal to the lower bound of its range; others keep the recipe ratio', { note: 'recipe.alloy.hint.economize' })}`}
                   size="icon-xs"
                   disabled={!econ}
                   onClick={() =>
@@ -144,3 +142,4 @@ export function MixRows({
     </ul>
   );
 }
+

package/src/components/views/alloy/mix/status.tsx

@@ -43,11 +43,11 @@ export function MixStatus({ state }: { state: MixState }) {
       className="flex flex-wrap items-center gap-3 rounded-md border bg-muted/40 px-3 py-2"
     >
       <Badge variant={mix.valid ? 'default' : 'destructive'}>
-        {mix.valid ? t('recipe.alloy.valid') : t('recipe.alloy.invalid')}
+        {mix.valid ? t('Valid alloy', { note: 'recipe.alloy.valid' }) : t('Outside allowed ranges', { note: 'recipe.alloy.invalid' })}
       </Badge>
       <span className="flex flex-wrap items-baseline gap-x-3">
         <span className="text-sm text-muted-foreground tabular-nums">
-          {t('recipe.alloy.total_in')}: {format(mix.total)} {unitLabel}
+          {t('Total', { note: 'recipe.alloy.total_in' })}: {format(mix.total)} {unitLabel}
         </span>
         <span className="flex items-center gap-1.5 text-sm tabular-nums font-medium">
           <span className="text-muted-foreground">→</span>
@@ -61,7 +61,7 @@ export function MixStatus({ state }: { state: MixState }) {
               tooltip={false}
             />
           ) : (
-            t('recipe.alloy.result')
+            t('Alloy', { note: 'recipe.alloy.result' })
           )}
           <span className="font-normal text-muted-foreground">
             {format(mix.output)} {unitLabel}
@@ -70,7 +70,7 @@ export function MixStatus({ state }: { state: MixState }) {
       </span>
       <span className="ms-auto flex flex-wrap items-center gap-2">
         <IconButton
-          label={`${t('recipe.alloy.fix')} — ${t('recipe.alloy.hint.fix')}`}
+          label={`${t('Top up to minimum', { note: 'recipe.alloy.fix' })}: ${t('Add just enough metal to bring every share into its range', { note: 'recipe.alloy.hint.fix' })}`}
           disabled={!fix || mix.valid}
           onClick={() =>
             fix &&
@@ -83,7 +83,7 @@ export function MixStatus({ state }: { state: MixState }) {
         </IconButton>
         {needsSnap ? (
           <IconButton
-            label={`${t('recipe.alloy.snap_ingots')} — ${t('recipe.alloy.hint.snap')}`}
+            label={`${t('Snap to whole ingots', { note: 'recipe.alloy.snap_ingots' })}: ${t('Round each metal to whole ingots, staying inside the ranges', { note: 'recipe.alloy.hint.snap' })}`}
             disabled={!snapped}
             onClick={() =>
               snapped && setInputs(snapped.map((value) => trim(value / factor)))
@@ -95,7 +95,7 @@ export function MixStatus({ state }: { state: MixState }) {
           <span className="size-7 shrink-0" aria-hidden />
         )}
         <IconButton
-          label={`${t('recipe.alloy.reset')} — ${t('recipe.alloy.hint.reset')}`}
+          label={`${t('Reset to recipe ratio', { note: 'recipe.alloy.reset' })}: ${t('Restore the recipe-ratio mix', { note: 'recipe.alloy.hint.reset' })}`}
           onClick={() =>
             fill(
               Number.isFinite(totalNumber)
@@ -108,7 +108,7 @@ export function MixStatus({ state }: { state: MixState }) {
         >
           <RotateCcw className="size-3.5" />
         </IconButton>
-        <IconButton label={t('recipe.alloy.copy_mix')} onClick={onCopy}>
+        <IconButton label={t('Copy the mix as text', { note: 'recipe.alloy.copy_mix' })} onClick={onCopy}>
           {copied ? (
             <Check className="size-3.5 text-green-600 dark:text-green-400" />
           ) : (
@@ -119,3 +119,4 @@ export function MixStatus({ state }: { state: MixState }) {
     </div>
   );
 }
+

package/src/components/views/alloy/mix/total.tsx

@@ -45,12 +45,12 @@ export function MixTotal({
       <div className="flex flex-wrap items-end gap-2">
         <label className="flex w-44 flex-col gap-1 text-xs text-muted-foreground">
           <span className="flex items-baseline justify-between gap-2">
-            {t('recipe.alloy.total')}
+            {t('Target total', { note: 'recipe.alloy.total' })}
             {unit === 'ingot' ? (
               <span className="tabular-nums text-muted-foreground/70">
                 {Number.isFinite(totalNumber)
-                  ? `= ${format(totalNumber * INGOT_MB)} ${t('recipe.alloy.unit.mb')}`
-                  : `×${INGOT_MB} ${t('recipe.alloy.unit.mb')}`}
+                  ? `= ${format(totalNumber * INGOT_MB)} ${t('mB', { note: 'recipe.alloy.unit.mb' })}`
+                  : `×${INGOT_MB} ${t('mB', { note: 'recipe.alloy.unit.mb' })}`}
               </span>
             ) : null}
           </span>
@@ -69,11 +69,11 @@ export function MixTotal({
                 />
               }
             />
-            <TooltipContent>{t('recipe.alloy.hint.scale')}</TooltipContent>
+            <TooltipContent>{t('Scales the current mix to this total as you type', { note: 'recipe.alloy.hint.scale' })}</TooltipContent>
           </Tooltip>
           {totalInvalid ? (
             <span className="text-[11px] text-destructive">
-              {t('recipe.alloy.invalid_total')}
+              {t('Enter a positive total amount.', { note: 'recipe.alloy.invalid_total' })}
             </span>
           ) : null}
         </label>
@@ -86,23 +86,23 @@ export function MixTotal({
           variant="outline"
           size="sm"
           spacing={0}
-          aria-label={t('recipe.alloy.units')}
+          aria-label={t('units', { note: 'recipe.alloy.units' })}
         >
           <Tooltip>
             <TooltipTrigger render={<ToggleGroupItem value="mb" />}>
-              {t('recipe.alloy.unit.mb')}
+              {t('mB', { note: 'recipe.alloy.unit.mb' })}
             </TooltipTrigger>
-            <TooltipContent>{t('recipe.alloy.hint.mb')}</TooltipContent>
+            <TooltipContent>{t('Millibuckets (mB)', { note: 'recipe.alloy.hint.mb' })}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger render={<ToggleGroupItem value="ingot" />}>
-              {t('recipe.alloy.unit.ingot')}
+              {t('ing.', { note: 'recipe.alloy.unit.ingot' })}
             </TooltipTrigger>
-            <TooltipContent>{t('recipe.alloy.hint.ingot')}</TooltipContent>
+            <TooltipContent>{t('Ingots: 1 ingot = 144 mB', { note: 'recipe.alloy.hint.ingot' })}</TooltipContent>
           </Tooltip>
         </ToggleGroup>
         <IconButton
-          label={`${t('recipe.alloy.fill')} — ${t('recipe.alloy.hint.fill')}`}
+          label={`${t('Fill by recipe', { note: 'recipe.alloy.fill' })}: ${t('Split the target total between metals by the recipe ratio', { note: 'recipe.alloy.hint.fill' })}`}
           disabled={!suggestAmounts(components, totalNumber)}
           onClick={() => fill(totalNumber)}
         >
@@ -111,7 +111,7 @@ export function MixTotal({
       </div>
       <div
         role="group"
-        aria-label={t('recipe.alloy.presets')}
+        aria-label={t('Quick totals', { note: 'recipe.alloy.presets' })}
         className="flex flex-wrap gap-1.5"
       >
         {presets.map((value) => (
@@ -129,3 +129,4 @@ export function MixTotal({
     </>
   );
 }
+

package/src/components/views/alloy/range-bar.tsx

@@ -5,7 +5,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@terrafirmagreg-team/ui/components/ui/tooltip';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 
 export function AlloyRangeBar({
   min,
@@ -62,3 +62,4 @@ export function AlloyRangeBar({
     </Tooltip>
   );
 }
+

package/src/components/views/alloy/stack-bar.tsx

@@ -1,7 +1,8 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useMemo } from 'react';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { useFluidColors } from '@terrafirmagreg-team/recipe/hooks/alloy/use-fluid-colors';
 import type { AlloyComponent, AlloyMixRow } from '@terrafirmagreg-team/recipe/types/alloy';
 
@@ -63,7 +64,7 @@ export function AlloyMiniBar({
   components,
   className,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   components: readonly AlloyComponent[];
   className?: string;
 }) {
@@ -84,3 +85,4 @@ export function AlloyMiniBar({
     />
   );
 }
+

package/src/components/views/browser/axis-switcher.tsx

@@ -4,50 +4,51 @@ import { usePathname } from 'next/navigation';
 import { Anvil, Calculator, FlaskConical, Shapes } from 'lucide-react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
-import { useLocationSearch } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import { useLocationSearchParams } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
 import { recipePlaceFromParams } from '@terrafirmagreg-team/recipe/lib/links';
 import { recipeCalcHref, recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
-import { parseSectionLocation } from '@terrafirmagreg-team/kit/lib/location';
+import { parseSectionLocation } from '@terrafirmagreg-team/sites/location';
 import { Switcher } from '@terrafirmagreg-team/ui/components/blocks/nav/switcher';
 
 export function RecipeAxisSwitcher() {
   const t = useTranslations();
-  const { dataset } = parseSectionLocation(usePathname());
+  const { dataset: datasetId } = parseSectionLocation(usePathname());
   const lang = useResolvedLang();
-  const axis = recipePlaceFromParams(
-    new URLSearchParams(useLocationSearch()),
-  ).kind;
-  if (!dataset) return null;
+  const params = useLocationSearchParams();
+  const axis = recipePlaceFromParams(params).kind;
+  const dataset = { id: datasetId ?? '', version: params.get('version') ?? undefined };
+  if (!datasetId) return null;
   return (
     <Switcher
       options={[
         {
           value: 'type',
-          title: t('recipe.axis_type'),
+          title: t('Categories', { note: 'recipe.axis_type' }),
           icon: <Shapes className="size-4" />,
           url: recipeHref(dataset, lang),
         },
         {
           value: 'calc',
-          title: t('recipe.calculator'),
+          title: t('Calculator', { note: 'recipe.calculator' }),
           icon: <Calculator className="size-4" />,
           url: recipeCalcHref(dataset, lang),
         },
         {
           value: 'forge',
-          title: t('recipe.forge.title'),
+          title: t('Forging', { note: 'recipe.forge.title' }),
           icon: <Anvil className="size-4" />,
           url: recipeHref(dataset, lang, { tool: 'forge' }),
         },
         {
           value: 'alloy',
-          title: t('recipe.alloy.title'),
+          title: t('Alloys', { note: 'recipe.alloy.title' }),
           icon: <FlaskConical className="size-4" />,
           url: recipeHref(dataset, lang, { tool: 'alloy' }),
         },
       ]}
       selected={axis ?? 'type'}
-      placeholder={t('recipe.axis_type')}
+      placeholder={t('Categories', { note: 'recipe.axis_type' })}
     />
   );
 }
+

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

@@ -173,7 +173,7 @@ function RecipeGridCard({
               onFail={() => setFailed(true)}
             />
           ) : (
-            <EmptyState variant="empty">{t('recipe.no_image')}</EmptyState>
+            <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
@@ -272,3 +272,4 @@ export function RecipeCardGrid({
     </div>
   );
 }
+

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

@@ -22,7 +22,7 @@ export function FavoriteButton({
   const t = useTranslations();
   const text =
     label ??
-    (active ? t('recipe.remove_favorite') : t('recipe.add_favorite'));
+    (active ? t('Remove from favorites', { note: 'recipe.remove_favorite' }) : t('Add to favorites', { note: 'recipe.add_favorite' }));
   return (
     <Hint label={text}>
       <Toggle
@@ -43,3 +43,4 @@ export function FavoriteButton({
     </Hint>
   );
 }
+

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

@@ -81,7 +81,7 @@ export function RecipeFrame({
             pages={list.pages}
             to={list.to}
             total={list.total}
-            label={t('recipe.page_of')}
+            label={t('{page}/{pages}', { note: 'recipe.page_of' })}
             className="pt-2"
             onPage={onPageChange}
           />
@@ -92,7 +92,7 @@ export function RecipeFrame({
             params={{ ...session.nav, id: undefined }}
             query={session.query}
             list={list}
-            label={t('recipe.page_of')}
+            label={t('{page}/{pages}', { note: 'recipe.page_of' })}
             className="pt-2"
           />
         )
@@ -109,3 +109,4 @@ export function RecipeFrame({
     </div>
   );
 }
+

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

@@ -18,11 +18,28 @@ 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({ page }: { page: RecipePageData }) {
+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, lang, item, fluid, names } = session;
+  const { dataset, item, fluid, names } = session;
   const focusId = item ?? fluid;
 
   const focusTitle = focusId
@@ -94,3 +111,4 @@ export function RecipeBrowser({ page }: { page: RecipePageData }) {
     </EntryProvider>
   );
 }
+

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

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import {
   memo,
@@ -19,7 +20,7 @@ import { type ItemPanelMode } from '@terrafirmagreg-team/recipe/lib/panel';
 import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
 import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
 import { favoriteHover } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
-import { IconTabs } from '@terrafirmagreg-team/game/components/entry/icon/tabs';
+import { IconPager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
 import { FavoriteButton } from '@terrafirmagreg-team/recipe/components/views/browser/favorite-button';
 import { ItemPanelGrid } from '@terrafirmagreg-team/recipe/components/views/browser/item-panel-grid';
 import { RecipeSettings } from '@terrafirmagreg-team/recipe/components/views/browser/settings';
@@ -53,7 +54,7 @@ export const ItemPanel = memo(function ItemPanel({
   nav,
   className,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   index: RecipeCompactIndex | null;
   indexLoading: boolean;
@@ -141,10 +142,10 @@ export const ItemPanel = memo(function ItemPanel({
     body = (
       <EmptyState variant="empty">
         {mode === 'fav'
-          ? t('recipe.favorites_empty')
+          ? t('No favorites yet.', { note: 'recipe.favorites_empty' })
           : hideUnused && !query.trim()
-            ? t('recipe.hide_unused_empty')
-            : t('recipe.empty_items')}
+            ? t('No items match with Hide unused enabled. Turn it off to browse the full catalog.', { note: 'recipe.hide_unused_empty' })
+            : t('No matching items.', { note: 'recipe.empty_items' })}
       </EmptyState>
     );
   } else {
@@ -171,7 +172,7 @@ export const ItemPanel = memo(function ItemPanel({
 
   return (
     <div className={cn('not-prose flex min-h-0 flex-col gap-2', className)}>
-      <IconTabs
+      <IconPager
         value={mode === 'fav' ? 'fav' : (tab ?? '')}
         options={tabOptions}
         onChange={(id) => {
@@ -184,13 +185,13 @@ export const ItemPanel = memo(function ItemPanel({
         pages={list.pages}
         to={list.to}
         total={list.total}
-        label={t('recipe.page_of')}
+        label={t('{page}/{pages}', { note: 'recipe.page_of' })}
         onPage={setPanelPage}
         leading={
           <FavoriteButton
             variant="outline"
             active={mode === 'fav'}
-            label={t('recipe.favorites')}
+            label={t('Favorites', { note: 'recipe.favorites' })}
             onToggle={() => {
               setPanelPage(0);
               setMode(mode === 'fav' ? 'all' : 'fav');
@@ -218,10 +219,11 @@ export const ItemPanel = memo(function ItemPanel({
             setPanelPage(0);
             setQuery(next);
           }}
-          placeholder={t('recipe.search')}
+          placeholder={t('Search items', { note: 'recipe.search' })}
           className="w-full"
         />
       </div>
     </div>
   );
 });
+

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

@@ -23,3 +23,4 @@ export function PanelSkeleton({ cols, rows }: { cols: number; rows: number }) {
     </ul>
   );
 }
+

package/src/components/views/browser/item-panel-grid/cell.tsx

@@ -1,12 +1,13 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import type { ReactNode } from 'react';
 import { Minus, Plus, Star } from 'lucide-react';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { EntryGroup } from '@terrafirmagreg-team/game/components/entry/group';
 import { CopyIdMenu } from '@terrafirmagreg-team/game/components/entry/copy-id-menu';
-import { parseStackId } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
-import { formatNbt } from '@terrafirmagreg-team/game/lib/snbt';
+import { parseStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import { formatNbt } from '@terrafirmagreg-team/dump/lib/snbt';
 import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
 import { Badge } from '@terrafirmagreg-team/ui/components/ui/badge';
 import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
@@ -72,7 +73,7 @@ export function PanelCell({
   onToggleGroup,
 }: {
   cell: ItemPanelCell;
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   names: Record<string, Record<string, string>>;
   nav: RecipeHrefOpts;
@@ -174,3 +175,4 @@ export function PanelCell({
     </li>
   );
 }
+

package/src/components/views/browser/item-panel-grid/favorite-cell.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import Link from 'next/link';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
@@ -16,7 +17,7 @@ import {
 } from '@terrafirmagreg-team/ui/components/ui/tooltip';
 import { Badge } from '@terrafirmagreg-team/ui/components/ui/badge';
 import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
-import type { ReferenceKind } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
 import type { RecipeFavorite, RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
 
 const TAG_SEGMENT_KIND: Record<string, ReferenceKind> = {
@@ -40,7 +41,7 @@ export function RecipeFavoriteCell({
   nav,
   fav,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   names: Record<string, Record<string, string>>;
   nav: RecipeHrefOpts;
@@ -125,3 +126,4 @@ export function RecipeFavoriteCell({
     </Tooltip>
   );
 }
+

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

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { memo } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
@@ -30,7 +31,7 @@ export const ItemPanelGrid = memo(function ItemPanelGrid({
   cells: ItemPanelCell[];
 
   resetKey: unknown;
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   names: Record<string, Record<string, string>>;
   nav: RecipeHrefOpts;
@@ -43,7 +44,7 @@ export const ItemPanelGrid = memo(function ItemPanelGrid({
   draggableStacks?: boolean;
 }) {
   const t = useTranslations();
-  const expandLabel = t('recipe.expand');
+  const expandLabel = t('Expand', { note: 'recipe.expand' });
   const limit = useMountLimit(cells.length, resetKey);
   const shown = limit >= cells.length ? cells : cells.slice(0, limit);
   const { gridRef, outlines } = useGroupOutlines(shown, cols, rows);
@@ -101,3 +102,4 @@ export const ItemPanelGrid = memo(function ItemPanelGrid({
     </ul>
   );
 });
+

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

@@ -12,6 +12,7 @@ import { RecipeTypeTabs } from '@terrafirmagreg-team/recipe/components/views/bro
 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';
@@ -24,12 +25,11 @@ import { ItemTagGroups } from '@terrafirmagreg-team/recipe/components/views/brow
 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/game/lib/dump/contract/ref';
-import type { TaggedReference } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
-import { customStackName } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+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 {
-  RecipeCategory,
   RecipeSession,
 } from '@terrafirmagreg-team/recipe/types';
 
@@ -56,13 +56,7 @@ export function ItemView({ session }: { session: RecipeSession }) {
 
   const boxRef = useRef<HTMLDivElement | null>(null);
 
-  const categoriesById = useMemo(
-    () =>
-      new Map<string, RecipeCategory>(
-        (index?.categories ?? []).map((row) => [row.id, row]),
-      ),
-    [index],
-  );
+  const categoriesById = useCategoriesById(index);
 
   const feeds = useItemFeeds({ dataset, index, indexLoading, item, kind });
   const { recipes, uses } = feeds;
@@ -182,10 +176,11 @@ export function ItemView({ session }: { session: RecipeSession }) {
           maxH={list.box.h}
           maxW={list.box.w}
           loading={feeds.pending}
-          empty={t('recipe.empty_type')}
+          empty={t('No recipes of this type.', { note: 'recipe.empty_type' })}
           onSwipe={onSwipe}
         />
       )}
     </RecipeFrame>
   );
 }
+