[feat] adapt steam store + adjust dark mode styles

src/app/prepare/page.tsx

@@ -1,8 +1,15 @@
 "use client"
-import useSteamStore from "@/store/steam"
 
+import { steamStore, setDir, setCsDir, currentUser } from "@/store/steam"
+import { useEffect } from "react"
+import { useSnapshot } from "valtio"
 export default function Page() {
-  const { dir, setDir, csDir, setCsDir, currentUser } = useSteamStore()
+  useEffect(() => {
+    ;async () => {
+      steamStore.start()
+    }
+  }, [])
+  const steam = useSnapshot(steamStore.state)
   return (
     <div
       className="flex flex-col items-center justify-center w-full h-screen gap-6"
@@ -16,12 +23,12 @@ export default function Page() {
       <div className="flex flex-col w-full gap-6 p-5 border rounded-lg bg-white/40">
         <input
           className="px-2 py-1 rounded-lg"
-          value={dir}
+          value={steam.dir}
           onChange={(e) => setDir(e.target.value)}
         />
         <input
           className="px-2 py-1 rounded-lg"
-          value={csDir}
+          value={steam.csDir}
           onChange={(e) => setCsDir(e.target.value)}
         />