feat(web): add spaces, grouped channels and file chat

web/src/app/App.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Home } from '@/features/home/Home';
-import { JoinScreen, MissingAccess } from '@/features/scan/JoinScreen';
+import { JoinScreen } from '@/features/scan/JoinScreen';
+import { AccountChannelAccess } from './AccountChannelAccess';
 import { useChannels } from '@/store/channels';
 import { useShares } from '@/store/shares';
 import { useWorkspace } from '@/store/workspace';
@@ -8,6 +9,8 @@ import { ChannelScreen } from './ChannelScreen';
 import { ShareScreen } from './ShareScreen';
 import { channelPath, navigate, useRoute } from './navigation';
 import { Splash } from './Splash';
+import { AccountScreen } from '@/features/home/AccountScreen';
+import { useAccount } from '@/store/account';
 
 const SEEN_KEY = 'wd.splash';
 
@@ -20,6 +23,13 @@ function splashSeen(): boolean {
 }
 
 export function App() {
+  const username = useAccount((s) => s.username);
+  const accountHydrated = useAccount((s) => s.hydrated);
+  const refreshAccount = useAccount((s) => s.refresh);
+  useEffect(() => {
+    const timer = window.setInterval(() => { void refreshAccount(); }, 5000);
+    return () => window.clearInterval(timer);
+  }, [refreshAccount]);
   const route = useRoute();
   const list = useChannels((s) => s.list);
   const channelsHydrated = useChannels((s) => s.hydrated);
@@ -31,12 +41,12 @@ export function App() {
   const [splash, setSplash] = useState(() => !splashSeen());
 
   const saved = route.name === 'channel' && list.some((c) => c.id === route.id);
-  // 只有打开已保存的频道才需要等数据;首页与加入页没有加载过程
+  // 只有打开已保存的空间才需要等数据;首页与加入页没有加载过程
   const waitingOnSavedChannel = route.name === 'channel' && !pendingLink && !channelsHydrated;
   const waitingOnSavedShare = route.name === 'share' && pendingShareLink?.id !== route.id && !sharesHydrated;
-  const ready = route.name === 'home' || (route.name === 'channel'
+  const ready = accountHydrated && (route.name === 'home' || (route.name === 'channel'
     ? pendingLink?.id === route.id || (channelsHydrated && (!saved || wsReady))
-    : pendingShareLink?.id === route.id || sharesHydrated);
+    : pendingShareLink?.id === route.id || sharesHydrated));
 
   function onSplashDone() {
     try {
@@ -48,7 +58,8 @@ export function App() {
   }
 
   let screen;
-  if (route.name === 'home') screen = <Home />;
+  if (!accountHydrated) screen = null;
+  else if (route.name === 'home') screen = username ? <Home /> : <AccountScreen />;
   else if (route.name === 'share' && waitingOnSavedShare) screen = null;
   else if (route.name === 'share') screen = <ShareScreen id={route.id} />;
   else if (route.name === 'channel' && waitingOnSavedChannel) screen = null;
@@ -64,7 +75,7 @@ export function App() {
         }}
       />
     );
-  } else screen = <MissingAccess onHome={() => navigate('/')} />;
+  } else screen = <AccountChannelAccess id={route.name === 'channel' ? route.id : ''} onHome={() => navigate('/')} />;
 
   return (
     <>