Merge pull request #24 from badgerloop-software/fullscreen-dashboard-update

Fullscreen dashboard update

Author: sbasu107

.github/workflows/deploy-pages.yml

@@ -10,8 +10,6 @@
 #    - EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY (if the app needs it at build time). Use a production Clerk key for Pages.
 #    - MAPBOX_ACCESS_TOKEN (optional; also in app.config extra).
 #    - METEOBLUE_API_KEY (optional; Meteoblue map tiles on Strategy — must be a plain string secret).
-#    Classic dashboard WebSocket: on HTTPS, ws:// is blocked. To stream from a bridge on Pages builds,
-#    add a workflow step that builds classic-dashboard with REACT_APP_CLASSIC_WS_BASE=wss://... (secret).
 # 3. Clerk Dashboard → Native applications → allowlist SSO redirect URLs, e.g.
 #    https://<owner>.github.io/<repo>/oauth-native-callback
 #    https://<owner>.github.io/<repo>/   (after sign-out)
@@ -65,13 +63,6 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      # CRA uses relative ./static/* ; without a trailing slash, /repo/classic-dashboard resolves
-      # ./static to /repo/static (wrong). <base href> fixes direct links to .../classic-dashboard
-      - name: Classic dashboard base URL for Pages
-        env:
-          CLASSIC_BASE_HREF: /${{ github.event.repository.name }}/classic-dashboard
-        run: node scripts/inject-classic-dashboard-base.cjs
-
       - name: Export web (static)
         env:
           EXPO_PUBLIC_BASE_PATH: /${{ github.event.repository.name }}

README.md

@@ -106,5 +106,3 @@ sc2-mobile-app/
 ### License / Model credit:
 This work uses the Ferrari F40 model by Black Snow on Sketchfab, licensed under CC-BY-4.0. See src/car-visualizer/ferrari_f40/license.txt for details.
 
-### Classic (chase car) dashboard on web
-The Classic View dashboard UI is derived from the [chase-car-dashboard](https://github.com/badgerloop-software/chase-car-dashboard) **Frontend** subtree; upstream authorship is preserved in git. See [docs/chase-car-dashboard-git-subtree.md](docs/chase-car-dashboard-git-subtree.md) for merge details and how to refresh the static build under `public/classic-dashboard/`.

app/(tabs)/_layout.js

@@ -9,6 +9,7 @@ import { useAuthGuard } from '../../src/hooks/useAuthGuard';
 import useDeviceType from '../../src/hooks/useDeviceType';
 import { useNavigation } from '../../src/context/NavigationContext';
 import { useUser } from '@clerk/expo';
+import { useTelemetryUi } from '../../src/context/TelemetryUiContext';
 import { getExpoWebBasePath } from '../../src/lib/expoWebBasePath';
 
 /** Href segment for Expo Router tab links (with optional GitHub Pages `experiments.baseUrl`). */
@@ -21,6 +22,7 @@ function tabHref(pathFromRoot) {
 
 export default function TabLayout() {
   const { isDark } = useTheme();
+  const { openTelemetryQuickSettings } = useTelemetryUi();
   const { isLoaded } = useAuthGuard();
   const { user } = useUser();
   const deviceType = useDeviceType();
@@ -32,7 +34,7 @@ export default function TabLayout() {
   const isWebInfotainment = Platform.OS === 'web' && deviceType.isInfotainmentMode;
   const isWebInfotainmentWithMap = isWebInfotainment && showInfotainmentMap;
 
-  // Classic dashboard + Account tab: large / infotainment only. Settings stays on the bar for phones & narrow web.
+  // Fullscreen dashboard + Account tab: large / infotainment only. Settings stays on the bar for phones & narrow web.
   const showInfotainmentExtraTabs = deviceType.isInfotainmentMode;
 
   // Web uses standard Expo Router Tabs to avoid NativeTabs icon rasterization errors.
@@ -52,10 +54,11 @@ export default function TabLayout() {
         : `[role="tablist"] a[href="/"]::after`;
       const tabRules = [
         `${homeSelectors} { content: "Home"; }`,
+        `[role="tablist"] a[href="${tabHref('/fullscreen-dashboard')}"]::after { content: "Dashboard"; }`,
         `[role="tablist"] a[href="${tabHref('/systems')}"]::after { content: "Systems"; }`,
-        `[role="tablist"] a[href="${tabHref('/classic-dashboard')}"]::after { content: "Classic"; }`,
         `[role="tablist"] a[href="${tabHref('/signal-search')}"]::after { content: "Signals"; }`,
         `[role="tablist"] a[href="${tabHref('/account')}"]::after { content: "Account"; }`,
+        `[role="tablist"] a[href="${tabHref('/telemetry-source')}"]::after { content: "Telemetry source"; }`,
         `[role="tablist"] a[href="${tabHref('/profile')}"]::after { content: "Settings"; }`,
       ].join('\n        ');
       style.textContent = `
@@ -163,14 +166,15 @@ export default function TabLayout() {
     }, [isDark]);
 
     return (
+      <View style={{ flex: 1 }}>
       <Tabs
         screenOptions={{
           headerShown: false,
           sceneStyle: isDesktopSidebar
             ? {
               paddingBottom: 0,
               marginBottom: 0,
-              // Tab bar is position absolute, width 56 — inset scenes so content (e.g. Classic iframe) is not covered
+              // Tab bar is position absolute, width 56 — inset scenes so content is not covered
               paddingLeft: 56,
             }
             : undefined,
@@ -238,11 +242,11 @@ export default function TabLayout() {
           }}
         />
         <Tabs.Screen
-          name="classic-dashboard"
+          name="fullscreen-dashboard"
           options={{
-            title: 'Classic',
+            title: 'Dashboard',
             href: showInfotainmentExtraTabs ? undefined : null,
-            tabBarIcon: ({ color, size }) => <Ionicons name="speedometer-outline" size={isDesktopSidebar ? 22 : size} color={color} />,
+            tabBarIcon: ({ color, size }) => <Ionicons name="grid-outline" size={isDesktopSidebar ? 22 : size} color={color} />,
           }}
         />
         <Tabs.Screen
@@ -294,6 +298,22 @@ export default function TabLayout() {
               ),
           }}
         />
+        <Tabs.Screen
+          name="telemetry-source"
+          listeners={{
+            tabPress: (e) => {
+              e?.preventDefault?.();
+              openTelemetryQuickSettings();
+            },
+          }}
+          options={{
+            title: 'Telemetry source',
+            href: showInfotainmentExtraTabs ? undefined : null,
+            tabBarIcon: ({ color, size }) => (
+              <Ionicons name="pulse" size={isDesktopSidebar ? 22 : size} color={color} />
+            ),
+          }}
+        />
         <Tabs.Screen
           name="profile"
           options={{
@@ -302,6 +322,7 @@ export default function TabLayout() {
           }}
         />
       </Tabs>
+      </View>
     );
   }
 
@@ -333,11 +354,11 @@ export default function TabLayout() {
         })}
       </NativeTabs.Trigger>
 
-      <NativeTabs.Trigger name="classic-dashboard" hidden={!showInfotainmentExtraTabs}>
-        <Label>Classic</Label>
+      <NativeTabs.Trigger name="fullscreen-dashboard" hidden={!showInfotainmentExtraTabs}>
+        <Label>Dashboard</Label>
         {Platform.select({
-          ios: <Icon sf={{ default: 'speedometer', selected: 'speedometer' }} />,
-          android: <Icon src={<VectorIcon family={Ionicons} name="speedometer-outline" />} />,
+          ios: <Icon sf={{ default: 'square.grid.2x2', selected: 'square.grid.2x2.fill' }} />,
+          android: <Icon src={<VectorIcon family={Ionicons} name="grid-outline" />} />,
         })}
       </NativeTabs.Trigger>
 

app/(tabs)/classic-dashboard.js

@@ -0,0 +1,5 @@
+import FullscreenDashboardScreen from '../../src/screens/FullscreenDashboardScreen';
+
+export default function FullscreenDashboardTab() {
+  return <FullscreenDashboardScreen />;
+}

app/(tabs)/fullscreen-dashboard.js

@@ -0,0 +1,9 @@
+import { View } from 'react-native';
+
+/**
+ * Route exists for the desktop sidebar tab only. The tab opens quick telemetry settings
+ * via a tabPress listener in _layout.js (navigation is prevented).
+ */
+export default function TelemetrySourceTabScreen() {
+  return <View style={{ flex: 1 }} />;
+}

app/(tabs)/telemetry-source.js

@@ -2,14 +2,15 @@ import { Slot, useRouter, useSegments } from 'expo-router';
 import { ThemeProvider } from '../src/theme/ThemeProvider';
 import { NavigationProvider } from '../src/context/NavigationContext';
 import { TelemetryProvider } from '../src/context/TelemetryContext';
+import { TelemetryUiProvider } from '../src/context/TelemetryUiContext';
 import { useFonts } from 'expo-font';
 import { useEffect, useMemo } from 'react';
 import * as SplashScreen from 'expo-splash-screen';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { StyleSheet, View, Platform } from 'react-native';
 import SharedMapContainer from '../src/components/SharedMapContainer';
-import { ClerkProvider, ClerkLoaded, useUser } from '@clerk/expo';
+import { ClerkProvider, ClerkLoaded } from '@clerk/expo';
 import * as SecureStore from 'expo-secure-store';
 import { createClerkExpoWebRouter, getClerkWebProviderUrls } from '../src/lib/clerkWebProviderUrls';
 
@@ -68,7 +69,9 @@ export default function RootLayout() {
             <ThemeProvider>
               <NavigationProvider>
                 <TelemetryProvider>
-                  <AppContent />
+                  <TelemetryUiProvider>
+                    <AppContent />
+                  </TelemetryUiProvider>
                 </TelemetryProvider>
               </NavigationProvider>
             </ThemeProvider>
@@ -80,7 +83,6 @@ export default function RootLayout() {
 }
 
 function AppContent() {
-  const { user } = useUser();
   const segments = useSegments();
   const currentTopSegment = segments[0];
   const isAuthFlowRoute =
@@ -89,29 +91,6 @@ function AppContent() {
     currentTopSegment === 'sso-callback' ||
     currentTopSegment === 'oauth-native-callback';
 
-  // Keep classic iframe UI in sync with current auth status.
-  useEffect(() => {
-    if (Platform.OS !== 'web') return;
-    try {
-      const payload = user
-        ? {
-            isSignedIn: true,
-            name: user.fullName || user.firstName || 'Signed In User',
-            email: user.primaryEmailAddress?.emailAddress || '',
-            imageUrl: user.imageUrl || '',
-          }
-        : {
-            isSignedIn: false,
-            name: '',
-            email: '',
-            imageUrl: '',
-          };
-      window.localStorage.setItem('bsrClassicAuth', JSON.stringify(payload));
-    } catch (e) {
-      // Best-effort sync only.
-    }
-  }, [user]);
-
   return (
     <View style={styles.container}>
       <Slot />

app/_layout.js

@@ -139,20 +139,22 @@ export default function AccountSettingsScreen() {
                 ) : null}
               </View>
 
-              <View style={[styles.appSettingsCard, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }]}>
-                <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>App</Text>
-                <Text style={[styles.subtitle, { color: theme.colors.muted, marginBottom: 10 }]}>
-                  Quick link to the Settings tab (telemetry, theme, units). On phones the Account tab is hidden; open Account Settings from Settings → Account Settings.
-                </Text>
-                <TouchableOpacity
-                  onPress={() => router.push('/profile')}
-                  style={[styles.appSettingsBtn, { borderColor: theme.colors.border, backgroundColor: theme.colors.background }]}
-                >
-                  <Ionicons name="settings-outline" size={18} color={theme.colors.primary} />
-                  <Text style={[styles.appSettingsBtnText, { color: theme.colors.text }]}>Open Settings tab</Text>
-                  <Ionicons name="chevron-forward" size={18} color={theme.colors.muted} style={styles.appSettingsChevron} />
-                </TouchableOpacity>
-              </View>
+              {Platform.OS !== 'web' ? (
+                <View style={[styles.appSettingsCard, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }]}>
+                  <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>App</Text>
+                  <Text style={[styles.subtitle, { color: theme.colors.muted, marginBottom: 10 }]}>
+                    Quick link to the Settings tab (telemetry, theme, units). On phones the Account tab is hidden; open Account Settings from Settings → Account Settings.
+                  </Text>
+                  <TouchableOpacity
+                    onPress={() => router.push('/profile')}
+                    style={[styles.appSettingsBtn, { borderColor: theme.colors.border, backgroundColor: theme.colors.background }]}
+                  >
+                    <Ionicons name="settings-outline" size={18} color={theme.colors.primary} />
+                    <Text style={[styles.appSettingsBtnText, { color: theme.colors.text }]}>Open Settings tab</Text>
+                    <Ionicons name="chevron-forward" size={18} color={theme.colors.muted} style={styles.appSettingsChevron} />
+                  </TouchableOpacity>
+                </View>
+              ) : null}
 
               {!user ? (
                 <View style={[styles.card, { backgroundColor: theme.colors.card }]}>