refactor(ui): full rewrite instance and code struct (#129)

## Summary by Sourcery

Refactor the UI to modernize effect handling, routing, and legacy APIs
while adding a reusable alert dialog component and cleaning up obsolete
stores.

New Features:
- Introduce a shared SaturnEffect context via ParticleBackground so
pages can access the effect without relying on global window APIs.
- Add a Base UI–powered alert dialog component for consistent
confirmation and warning flows across the app.
- Define a central router configuration module with instance routes to
standardize page wiring.

Bug Fixes:
- Ensure SaturnEffect nullish checks are handled safely when forwarding
pointer and touch events from the home view.

Enhancements:
- Rewrite ParticleBackground to manage its own SaturnEffect lifecycle
via React state and context instead of global accessors.
- Update the home view to use the SaturnEffect hook, simplify
pointer/touch handlers, and remove legacy game and release store usage.
- Refine layout and accessibility attributes for various form field and
label components, including field grouping and error rendering keys.
- Simplify sidebar navigation and adjust the user dropdown trigger to
work with the updated dropdown menu API.
- Wrap the root outlet for the home route with ParticleBackground only
on the index path to limit the effect to the intended view.
- Clean up imports and code style in radio group and other UI primitives
for consistency.

Chores:
- Remove deprecated UI stores and utility modules that are no longer
used with the new architecture.
- Add changeset entries documenting the Saturn effect refactor,
ParticleBackground rewrite, and removal of legacy store code.

1 files changed, 15 insertions, 29 deletions

diff --git a/packages/ui/src/components/bottom-bar.tsx b/packages/ui/src/components/bottom-bar.tsx
index 8f70985..f73ace4 100644
--- a/packages/ui/src/components/bottom-bar.tsx
+++ b/packages/ui/src/components/bottom-bar.tsx
@@ -1,10 +1,10 @@
 import { Play, User, XIcon } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/models/auth";
+import { useGameStore } from "@/models/game";
 import { useInstanceStore } from "@/models/instance";
-import { useGameStore } from "@/stores/game-store";
 import { LoginModal } from "./login-modal";
 import { Button } from "./ui/button";
 import {
@@ -19,27 +19,17 @@ import { Spinner } from "./ui/spinner";
 
 export function BottomBar() {
   const account = useAuthStore((state) => state.account);
-  const instances = useInstanceStore((state) => state.instances);
-  const activeInstance = useInstanceStore((state) => state.activeInstance);
-  const setActiveInstance = useInstanceStore((state) => state.setActiveInstance);
-  const selectedVersion = useGameStore((state) => state.selectedVersion);
-  const setSelectedVersion = useGameStore((state) => state.setSelectedVersion);
-  const startGame = useGameStore((state) => state.startGame);
-  const stopGame = useGameStore((state) => state.stopGame);
-  const runningInstanceId = useGameStore((state) => state.runningInstanceId);
-  const launchingInstanceId = useGameStore((state) => state.launchingInstanceId);
-  const stoppingInstanceId = useGameStore((state) => state.stoppingInstanceId);
 
-  const [showLoginModal, setShowLoginModal] = useState(false);
-
-  useEffect(() => {
-    const nextVersion = activeInstance?.versionId ?? "";
-    if (selectedVersion === nextVersion) {
-      return;
-    }
+  const { instances, activeInstance, setActiveInstance } = useInstanceStore();
+  const {
+    runningInstanceId,
+    launchingInstanceId,
+    stoppingInstanceId,
+    startGame,
+    stopGame,
+  } = useGameStore();
 
-    setSelectedVersion(nextVersion);
-  }, [activeInstance?.id, activeInstance?.versionId, selectedVersion, setSelectedVersion]);
+  const [showLoginModal, setShowLoginModal] = useState(false);
 
   const handleInstanceChange = useCallback(
     async (instanceId: string) => {
@@ -47,7 +37,9 @@ export function BottomBar() {
         return;
       }
 
-      const nextInstance = instances.find((instance) => instance.id === instanceId);
+      const nextInstance = instances.find(
+        (instance) => instance.id === instanceId,
+      );
       if (!nextInstance) {
         return;
       }
@@ -68,13 +60,7 @@ export function BottomBar() {
       return;
     }
 
-    await startGame(
-      account,
-      () => setShowLoginModal(true),
-      activeInstance.id,
-      selectedVersion || activeInstance.versionId,
-      () => undefined,
-    );
+    await startGame(activeInstance.id, activeInstance.versionId ?? "");
   };
 
   const handleStopGame = async () => {