From 9860a2cb1f6af17b5a5ad24b44be3592755a056d Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Mon, 9 Mar 2026 22:25:18 -0700
Subject: [PATCH] feat: persist crafting zone selection in sessionStorage (#49)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- Applies the same sticky-zone pattern from #48 to the crafting panel (`elysium_craft_zone` key in sessionStorage)
- Introduces a `handleZoneSelect` wrapper so sessionStorage is updated alongside React state on every zone change
- Gracefully falls back to `verdant_vale` if no stored value exists

## Test plan

- [x] Lint — zero errors, zero warnings
- [x] Build — all packages build cleanly
- [ ] Manual: select a non-default zone in the crafting panel, navigate away and back — zone should still be selected
- [ ] Manual: log out and back in — zone should reset to Verdant Vale

✨ This PR was created with help from Hikari~ 🌸

Reviewed-on: https://git.nhcarrigan.com/nhcarrigan/elysium/pulls/49
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
---
 apps/web/src/components/game/craftingPanel.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/game/craftingPanel.tsx b/apps/web/src/components/game/craftingPanel.tsx
index 86ddcb4..e1deb95 100644
--- a/apps/web/src/components/game/craftingPanel.tsx
+++ b/apps/web/src/components/game/craftingPanel.tsx
@@ -26,7 +26,9 @@ const bonusLabel: Record<string, string> = {
  */
 const CraftingPanel = (): JSX.Element => {
   const { state, craftRecipe, formatNumber } = useGame();
-  const [ activeZoneId, setActiveZoneId ] = useState("verdant_vale");
+  const [ activeZoneId, setActiveZoneId ] = useState(() => {
+    return sessionStorage.getItem("elysium_craft_zone") ?? "verdant_vale";
+  });
   const [ pendingRecipeId, setPendingRecipeId ] = useState<string | null>(null);
 
   if (state === null) {
@@ -68,6 +70,11 @@ const CraftingPanel = (): JSX.Element => {
     });
   }
 
+  function handleZoneSelect(zoneId: string): void {
+    setActiveZoneId(zoneId);
+    sessionStorage.setItem("elysium_craft_zone", zoneId);
+  }
+
   async function handleCraft(recipeId: string): Promise<void> {
     setPendingRecipeId(recipeId);
     try {
@@ -85,7 +92,7 @@ const CraftingPanel = (): JSX.Element => {
 
       <ZoneSelector
         activeZoneId={activeZoneId}
-        onSelectZone={setActiveZoneId}
+        onSelectZone={handleZoneSelect}
         zones={zones}
       />