feat: implement server-side version fetching with hydration

- Add VersionHydrator component to sync server data to client state
- Update UpdateToastClient to use valtio reactivity with useSnapshot
- Ensure version data is fetched server-side and properly hydrated
- Fix issue where appState.version was never populated from backend

🤖 Generated with Claude Code
https://claude.ai/code

Co-Authored-By: Claude <noreply@anthropic.com>

app/components/UpdateToastClient.tsx

@@ -4,24 +4,33 @@ import { useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
 import { add, format } from 'date-fns'
 import { getCookie } from 'cookies-next'
+import { useSnapshot } from 'valtio'
 
 import { appState } from '~/utils/appState'
 import UpdateToast from '~/components/toasts/UpdateToast'
 
-export default function UpdateToastClient() {
+interface UpdateToastClientProps {
+  initialVersion?: AppUpdate | null
+}
+
+export default function UpdateToastClient({ initialVersion }: UpdateToastClientProps) {
   const pathname = usePathname()
   const [updateToastOpen, setUpdateToastOpen] = useState(false)
+  const { version } = useSnapshot(appState)
+  
+  // Use initialVersion for SSR, then switch to appState version after hydration
+  const effectiveVersion = version?.updated_at ? version : initialVersion
 
   useEffect(() => {
-    if (appState.version) {
+    if (effectiveVersion && effectiveVersion.updated_at) {
       const cookie = getToastCookie()
       const now = new Date()
-      const updatedAt = new Date(appState.version.updated_at)
+      const updatedAt = new Date(effectiveVersion.updated_at)
       const validUntil = add(updatedAt, { days: 7 })
 
       if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
     }
-  }, [])
+  }, [effectiveVersion?.updated_at])
 
   function getToastCookie() {
     if (appState.version && appState.version.updated_at !== '') {
@@ -47,14 +56,15 @@ export default function UpdateToastClient() {
   
   const path = pathname.replaceAll('/', '')
 
-  if (!['about', 'updates', 'roadmap'].includes(path) && appState.version) {
+  // Only render toast if we have valid version data with update_type
+  if (!['about', 'updates', 'roadmap'].includes(path) && effectiveVersion && effectiveVersion.update_type) {
     return (
       <UpdateToast
         open={updateToastOpen}
-        updateType={appState.version.update_type}
+        updateType={effectiveVersion.update_type}
         onActionClicked={handleToastActionClicked}
         onCloseClicked={handleToastClosed}
-        lastUpdated={appState.version.updated_at}
+        lastUpdated={effectiveVersion.updated_at}
       />
     )
   }

app/components/VersionHydrator.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useEffect } from 'react'
+import { appState } from '~/utils/appState'
+
+interface VersionHydratorProps {
+  version: AppUpdate | null
+}
+
+export default function VersionHydrator({ version }: VersionHydratorProps) {
+  useEffect(() => {
+    if (version && version.updated_at) {
+      appState.version = version
+    }
+  }, [version])
+  
+  return null
+}