feat: upgrade signal comparison UX and account settings flow

Improve the Signal Search graph experience with richer comparison controls and focused layouts, and streamline navigation by replacing legacy classic mode with a dedicated Classic Dashboard tab. Add a full Account Settings page backed by Clerk user data, plus account deletion and updated auth UI copy.

Made-with: Cursor

Author: sbasu107

app/(tabs)/_layout.js

@@ -3,15 +3,17 @@ import { Tabs } from 'expo-router';
 import { NativeTabs, Icon, Label, VectorIcon } from 'expo-router/unstable-native-tabs';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
-import { Platform } from 'react-native';
+import { Image, Platform, View } from 'react-native';
 import { useTheme } from '../../src/theme/ThemeProvider';
 import { useAuthGuard } from '../../src/hooks/useAuthGuard';
 import useDeviceType from '../../src/hooks/useDeviceType';
 import { useNavigation } from '../../src/context/NavigationContext';
+import { useUser } from '@clerk/expo';
 
 export default function TabLayout() {
   const { isDark } = useTheme();
   const { isLoaded } = useAuthGuard();
+  const { user } = useUser();
   const deviceType = useDeviceType();
   const { infotainmentLeftWidth, showInfotainmentMap } = useNavigation();
 
@@ -62,7 +64,9 @@ export default function TabLayout() {
 
         [role="tablist"] a[href="/"]::after { content: "Home"; }
         [role="tablist"] a[href="/systems"]::after { content: "Systems"; }
+        [role="tablist"] a[href="/classic-dashboard"]::after { content: "Classic"; }
         [role="tablist"] a[href="/signal-search"]::after { content: "Signals"; }
+        [role="tablist"] a[href="/account"]::after { content: "Account"; }
         [role="tablist"] a[href="/profile"]::after { content: "Settings"; }
 
         [role="tablist"] a::after {
@@ -208,9 +212,17 @@ export default function TabLayout() {
           name="index"
           options={{
             title: 'Home',
+            unmountOnBlur: true,
             tabBarIcon: ({ color, size }) => <Ionicons name="home" size={isDesktopSidebar ? 22 : size} color={color} />,
           }}
         />
+        <Tabs.Screen
+          name="classic-dashboard"
+          options={{
+            title: 'Classic',
+            tabBarIcon: ({ color, size }) => <Ionicons name="speedometer-outline" size={isDesktopSidebar ? 22 : size} color={color} />,
+          }}
+        />
         <Tabs.Screen
           name="systems"
           options={{
@@ -225,6 +237,40 @@ export default function TabLayout() {
             tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="signal-variant" size={isDesktopSidebar ? 22 : size} color={color} />,
           }}
         />
+        <Tabs.Screen
+          name="account"
+          options={{
+            title: 'Account',
+            tabBarItemStyle: isDesktopSidebar ? { marginTop: 'auto' } : undefined,
+            tabBarIcon: ({ color, size }) =>
+              user?.imageUrl ? (
+                <Image
+                  source={{ uri: user.imageUrl }}
+                  style={{
+                    width: isDesktopSidebar ? 24 : size,
+                    height: isDesktopSidebar ? 24 : size,
+                    borderRadius: 999,
+                    borderWidth: 1,
+                    borderColor: color,
+                  }}
+                />
+              ) : (
+                <View
+                  style={{
+                    width: isDesktopSidebar ? 24 : size,
+                    height: isDesktopSidebar ? 24 : size,
+                    borderRadius: 999,
+                    borderWidth: 1,
+                    borderColor: color,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Ionicons name="person" size={isDesktopSidebar ? 14 : Math.max(12, size - 6)} color={color} />
+                </View>
+              ),
+          }}
+        />
         <Tabs.Screen
           name="profile"
           options={{
@@ -264,6 +310,14 @@ export default function TabLayout() {
         })}
       </NativeTabs.Trigger>
 
+      <NativeTabs.Trigger name="classic-dashboard">
+        <Label>Classic</Label>
+        {Platform.select({
+          ios: <Icon sf={{ default: 'speedometer', selected: 'speedometer' }} />,
+          android: <Icon src={<VectorIcon family={Ionicons} name="speedometer-outline" />} />,
+        })}
+      </NativeTabs.Trigger>
+
       <NativeTabs.Trigger name="systems">
         <Label>Systems</Label>
         {Platform.select({
@@ -280,6 +334,14 @@ export default function TabLayout() {
         })}
       </NativeTabs.Trigger>
 
+      <NativeTabs.Trigger name="account">
+        <Label>Account</Label>
+        {Platform.select({
+          ios: <Icon sf={{ default: 'person.circle', selected: 'person.circle.fill' }} />,
+          android: <Icon src={<VectorIcon family={Ionicons} name="person-circle" />} />,
+        })}
+      </NativeTabs.Trigger>
+
       <NativeTabs.Trigger name="profile">
         <Label>Settings</Label>
         {Platform.select({

app/(tabs)/account.js

@@ -0,0 +1 @@
+export { default } from '../account-settings';

app/(tabs)/classic-dashboard.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ClassicDashboardScreen from '../../src/screens/ClassicDashboardScreen';
+
+export default function ClassicDashboardTab() {
+  return <ClassicDashboardScreen />;
+}

app/_layout.js

@@ -1,5 +1,5 @@
 import { Slot, useRouter, useSegments } from 'expo-router';
-import { ThemeProvider, useTheme } from '../src/theme/ThemeProvider';
+import { ThemeProvider } from '../src/theme/ThemeProvider';
 import { NavigationProvider } from '../src/context/NavigationContext';
 import { TelemetryProvider } from '../src/context/TelemetryContext';
 import { useFonts } from 'expo-font';
@@ -9,10 +9,8 @@ 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 ClassicDashboardScreen from '../src/screens/ClassicDashboardScreen';
 import { ClerkProvider, ClerkLoaded, useUser } from '@clerk/expo';
 import * as SecureStore from 'expo-secure-store';
-import useDeviceType from '../src/hooks/useDeviceType';
 import { createClerkExpoWebRouter, getClerkWebProviderUrls } from '../src/lib/clerkWebProviderUrls';
 
 // Token cache for Clerk
@@ -82,10 +80,8 @@ export default function RootLayout() {
 }
 
 function AppContent() {
-  const { classicView } = useTheme();
   const { user } = useUser();
   const segments = useSegments();
-  const deviceType = useDeviceType();
   const currentTopSegment = segments[0];
   const isAuthFlowRoute =
     currentTopSegment === 'sign-in' ||
@@ -119,12 +115,7 @@ function AppContent() {
   return (
     <View style={styles.container}>
       <Slot />
-      {!isAuthFlowRoute && !classicView && <SharedMapContainer />}
-      {Platform.OS === 'web' && classicView && !deviceType.isPhone && !isAuthFlowRoute && (
-        <View style={styles.classicOverlay}>
-          <ClassicDashboardScreen />
-        </View>
-      )}
+      {!isAuthFlowRoute && <SharedMapContainer />}
     </View>
   );
 }
@@ -133,8 +124,4 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  classicOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 2000,
-  },
 });