Basic scaffold for managing equiped items

src/App.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useReducer } from "react";
+import "./App.css";
+import { Equipment } from "./components/Equipment";
+import { reducer, withLoadingAction } from "./lib/state";
+import type { ItemId } from "./lib/types";
+
+function App() {
+  const [state, dispatch] = useReducer(withLoadingAction(reducer), "loading");
+
+  useEffect(() => {
+    if (state === "loading") {
+      console.log("Loading state...");
+      // TODO: Parse with Zod?
+      const stateValue = localStorage.getItem("state");
+      if (stateValue) {
+        dispatch({
+          action: "loadState",
+          state: JSON.parse(stateValue),
+        });
+      } else {
+        dispatch({
+          action: "loadState",
+          state: {
+            equipedItems: [{ id: 219309 as ItemId, quality: "champion" }],
+            bisList: [],
+          },
+        });
+      }
+    } else {
+      console.log("Saving state...");
+      localStorage.setItem("state", JSON.stringify(state));
+    }
+  }, [state]);
+
+  if (state === "loading") {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <h1>WoW Gear Finder</h1>
+      <Equipment
+        state={state}
+        onEquip={(item) => dispatch({ action: "equipItem", item })}
+        onUnequip={(item) => dispatch({ action: "unequipItem", item })}
+      />
+    </>
+  );
+}
+
+export default App;