1

src/app/(app)/_layout.tsx

@@ -1,7 +1,7 @@
 import { Redirect, usePathname } from 'expo-router';
 
 import { ROUTES } from '@/constants/routes';
-import { DashboardRouteProvider, useArkHostSync } from '@/features/dashboard';
+import { useArkHostSync } from '@/features/dashboard';
 import { AppScopeNavigator } from '@/features/navigation';
 import { useAppStore } from '@/store';
 
@@ -14,9 +14,5 @@ export default function AppLayout() {
     return <Redirect href={{ pathname: ROUTES.login, params: { returnTo: pathname } }} />;
   }
 
-  return (
-    <DashboardRouteProvider>
-      <AppScopeNavigator />
-    </DashboardRouteProvider>
-  );
+  return <AppScopeNavigator />;
 }

src/app/(app)/dashboard/_layout.tsx

@@ -1,9 +1,18 @@
-import { Slot } from 'expo-router';
+import { Tabs as DashboardTabs } from 'expo-router/tabs';
+import { useEffect } from 'react';
 import { Spinner, YStack } from 'tamagui';
 
 import { MonoText } from '@/components';
-import { useDashboardRoute } from '@/features/dashboard';
-import { DashboardFrame } from '@/features/navigation';
+import {
+  DashboardAccountProvider,
+  useDashboardAccount,
+} from '@/features/dashboard';
+import {
+  DashboardFrame,
+  DashboardSmallScreenTabBar,
+  dashboardPagesList,
+} from '@/features/navigation';
+import { useLayoutSize } from '@/providers/layout-size-provider';
 
 function DashboardState({ label }: { label: string }) {
   return (
@@ -14,13 +23,59 @@ function DashboardState({ label }: { label: string }) {
   );
 }
 
-export default function DashboardLayout() {
-  const { gameAccounts, gameAccountsQuery } = useDashboardRoute();
+function DashboardContent() {
+  const layoutSize = useLayoutSize();
+  const {
+    gameAccountsQuery,
+    selectedGameAccount,
+    selectGameAccount,
+  } = useDashboardAccount();
+  const gameAccounts = gameAccountsQuery.data ?? [];
+  const fallbackGameAccountId = gameAccounts[0]?.account;
+
+  useEffect(() => {
+    if (!selectedGameAccount && fallbackGameAccountId) {
+      selectGameAccount(fallbackGameAccountId);
+    }
+  }, [fallbackGameAccountId, selectedGameAccount, selectGameAccount]);
+
+  if (gameAccountsQuery.isPending) return <DashboardState label="LOADING ARKHOST DATA" />;
+  if (gameAccountsQuery.isError) return <DashboardState label="ARKHOST DATA UNAVAILABLE" />;
+  if (gameAccounts.length === 0) return <DashboardState label="NO GAME ACCOUNTS" />;
 
-  let content = <Slot />;
-  if (gameAccountsQuery.isPending) content = <DashboardState label="LOADING ARKHOST DATA" />;
-  else if (gameAccountsQuery.isError) content = <DashboardState label="ARKHOST DATA UNAVAILABLE" />;
-  else if (gameAccounts.length === 0) content = <DashboardState label="NO GAME ACCOUNTS" />;
+  if (!selectedGameAccount) return null;
+
+  return (
+    <DashboardFrame>
+      <DashboardTabs
+        screenOptions={{
+          animation: 'shift',
+          freezeOnBlur: true,
+          headerShown: false,
+          lazy: true,
+          sceneStyle: { backgroundColor: 'transparent' },
+        }}
+        tabBar={layoutSize === 'small'
+          ? (props) => (
+            <DashboardSmallScreenTabBar
+              {...props}
+              gameAccountId={selectedGameAccount.account}
+            />
+          )
+          : () => null}
+      >
+        {dashboardPagesList.map((page) => (
+          <DashboardTabs.Screen key={page.id} name={page.id} />
+        ))}
+      </DashboardTabs>
+    </DashboardFrame>
+  );
+}
 
-  return <DashboardFrame>{content}</DashboardFrame>;
+export default function DashboardLayout() {
+  return (
+    <DashboardAccountProvider>
+      <DashboardContent />
+    </DashboardAccountProvider>
+  );
 }

src/app/(app)/dashboard/[gameAccountId]/activity.tsx → src/app/(app)/dashboard/activity.tsx

@@ -8,7 +8,6 @@ import { mockDashboardSchedule } from '@/mocks/dashboard';
 export default function DashboardActivityRoute() {
   return (
     <DashboardAccountPager
-      pageId="activity"
       renderAccount={() => (
         <DashboardPageFrame scroll>
           <ActivityTimelineView entries={mockDashboardSchedule} />

src/app/(app)/dashboard/index.tsx

@@ -1,12 +1,7 @@
 import { Redirect } from 'expo-router';
 
-import { useDashboardRoute } from '@/features/dashboard';
-import { dashboardPageHref } from '@/features/navigation';
+import { dashboardDefaultPage } from '@/features/navigation';
 
 export default function DashboardIndexRoute() {
-  const { gameAccounts } = useDashboardRoute();
-  const firstGameAccount = gameAccounts[0];
-
-  if (!firstGameAccount) return null;
-  return <Redirect href={dashboardPageHref('overview', firstGameAccount.account)} />;
+  return <Redirect href={dashboardDefaultPage.route} />;
 }

src/app/(app)/dashboard/[gameAccountId]/inventory.tsx → src/app/(app)/dashboard/inventory.tsx

@@ -1,12 +1,9 @@
-import {
-  DashboardInventoryContent,
-} from '@/features/dashboard';
+import { DashboardInventoryContent } from '@/features/dashboard';
 import { DashboardAccountPager } from '@/features/navigation';
 
 export default function DashboardInventoryRoute() {
   return (
     <DashboardAccountPager
-      pageId="inventory"
       renderAccount={(gameAccount) => (
         <DashboardInventoryContent gameAccount={gameAccount} />
       )}

src/app/(app)/dashboard/[gameAccountId]/operators.tsx → src/app/(app)/dashboard/operators.tsx

@@ -1,12 +1,9 @@
-import {
-  DashboardOperatorsContent,
-} from '@/features/dashboard';
+import { DashboardOperatorsContent } from '@/features/dashboard';
 import { DashboardAccountPager } from '@/features/navigation';
 
 export default function DashboardOperatorsRoute() {
   return (
     <DashboardAccountPager
-      pageId="operators"
       renderAccount={(gameAccount) => (
         <DashboardOperatorsContent gameAccount={gameAccount} />
       )}

src/app/(app)/dashboard/[gameAccountId]/overview.tsx → src/app/(app)/dashboard/overview.tsx

@@ -1,12 +1,9 @@
-import {
-  DashboardOverviewContent,
-} from '@/features/dashboard';
+import { DashboardOverviewContent } from '@/features/dashboard';
 import { DashboardAccountPager } from '@/features/navigation';
 
 export default function DashboardOverviewRoute() {
   return (
     <DashboardAccountPager
-      pageId="overview"
       renderAccount={(gameAccount) => (
         <DashboardOverviewContent gameAccount={gameAccount} />
       )}

src/app/(app)/dashboard/[gameAccountId]/settings.tsx → src/app/(app)/dashboard/settings.tsx

@@ -4,7 +4,6 @@ import { DashboardAccountPager } from '@/features/navigation';
 export default function DashboardSettingsRoute() {
   return (
     <DashboardAccountPager
-      pageId="settings"
       renderAccount={(gameAccount) => (
         <GameHostingConfigScreen gameAccount={gameAccount} />
       )}

src/app/(app)/settings/(tabs)/_layout.tsx

@@ -3,7 +3,7 @@ import { TopTabs as SettingsTopTabs } from 'expo-router/js-top-tabs';
 import {
   SettingsFrame,
   SettingsTabBar,
-  sortedSettingsPages,
+  settingsPagesList,
 } from '@/features/navigation';
 import { useLayoutSize } from '@/providers/layout-size-provider';
 
@@ -22,7 +22,7 @@ export default function SettingsTabsLayout() {
         }}
         tabBar={layoutSize === 'small' ? SettingsTabBar : () => null}
       >
-        {sortedSettingsPages.map((page) => (
+        {settingsPagesList.map((page) => (
           <SettingsTopTabs.Screen key={page.id} name={page.id} />
         ))}
       </SettingsTopTabs>

src/app/(app)/settings/index.tsx

@@ -1,7 +1,7 @@
 import { Redirect } from 'expo-router';
 
-import { settingsNavigation } from '@/features/navigation';
+import { settingsDefaultPage } from '@/features/navigation';
 
 export default function SettingsIndexRoute() {
-  return <Redirect href={settingsNavigation.defaultPage.route} />;
+  return <Redirect href={settingsDefaultPage.route} />;
 }