Web UI refresh

duolicious · Dec 23, 2024 · a7312d0 · a7312d0
1 parent 8de775f
commit a7312d0
Show file tree

Hide file tree

Showing 6 changed files with 498 additions and 96 deletions.
diff --git a/App.tsx b/App.tsx
@@ -26,7 +26,7 @@ import * as ScreenOrientation from 'expo-screen-orientation';
 import * as SplashScreen from 'expo-splash-screen';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import { TabBar } from './components/tab-bar';
+import { TabBar } from './components/navigation/tab-bar';
 import SearchTab from './components/search-tab';
 import { QuizTab } from './components/quiz-tab';
 import ProfileTab from './components/profile-tab';
@@ -58,6 +58,7 @@ import { ClubItem } from './club/club';
 import { Toast } from './components/toast';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { DonationNagModal } from './components/donation-nag-modal';
+import { createWebNavigator } from './components/navigation/web-navigator';
 
 setNofications();
 verificationWatcher();
@@ -66,6 +67,7 @@ SplashScreen.preventAutoHideAsync();
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
+const WebNavigator = createWebNavigator();
 
 if (
   Platform.OS === 'android' &&
@@ -75,19 +77,35 @@ if (
 }
 
 const HomeTabs = () => {
-  return (
-    <Tab.Navigator
-      backBehavior="history"
-      screenOptions={{ headerShown: false, animation: 'shift' }}
-      tabBar={props => <TabBar {...props} />}
-    >
-      <Tab.Screen name="Q&A" component={QuizTab} />
-      <Tab.Screen name="Search" component={SearchTab} />
-      <Tab.Screen name="Inbox" component={InboxTab} />
-      <Tab.Screen name="Traits" component={TraitsTab} />
-      <Tab.Screen name="Profile" component={ProfileTab} />
-    </Tab.Navigator>
-  );
+  if (Platform.OS === 'web') {
+    return (
+      <WebNavigator.Navigator
+        backBehavior="history"
+        screenOptions={{ headerShown: false, animation: 'shift' }}
+        tabBar={props => <TabBar {...props} />}
+      >
+        <Tab.Screen name="Q&A" component={QuizTab} />
+        <Tab.Screen name="Search" component={SearchTab} />
+        <Tab.Screen name="Inbox" component={InboxTab} />
+        <Tab.Screen name="Traits" component={TraitsTab} />
+        <Tab.Screen name="Profile" component={ProfileTab} />
+      </WebNavigator.Navigator>
+    )
+  } else {
+    return (
+      <Tab.Navigator
+        backBehavior="history"
+        screenOptions={{ headerShown: false, animation: 'shift' }}
+        tabBar={props => <TabBar {...props} />}
+      >
+        <Tab.Screen name="Q&A" component={QuizTab} />
+        <Tab.Screen name="Search" component={SearchTab} />
+        <Tab.Screen name="Inbox" component={InboxTab} />
+        <Tab.Screen name="Traits" component={TraitsTab} />
+        <Tab.Screen name="Profile" component={ProfileTab} />
+      </Tab.Navigator>
+    );
+  }
 };
 
 const WebSplashScreen = ({loading}) => {

diff --git a/components/tab-bar.tsx → components/navigation/tab-bar.tsx b/components/tab-bar.tsx → components/navigation/tab-bar.tsx
@@ -8,21 +8,17 @@ import {
   useEffect,
   useRef,
 } from 'react';
-import { DefaultText } from './default-text';
+import { DefaultText } from '../default-text';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { StackActions } from '@react-navigation/native';
-import { QAndADevice } from './q-and-a-device';
-import { Inbox, inboxStats } from '../xmpp/xmpp';
+import { QAndADevice } from '../q-and-a-device';
+import { Inbox, inboxStats } from '../../xmpp/xmpp';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { listen } from '../events/events';
-
-const displayedTabs: Set<string> = new Set([
-  "Q&A",
-  "Search",
-  "Inbox",
-  "Traits",
-  "Profile",
-]);
+import { listen } from '../../events/events';
+import {
+  LabelToIcon,
+  displayedTabs
+} from './util';
 
 const TabBar = ({state, descriptors, navigation}) => {
   const insets = useSafeAreaInsets();
@@ -136,17 +132,6 @@ const TabBar = ({state, descriptors, navigation}) => {
 
           const inputRange = state.routes.map((_, i) => i);
 
-          const searchIcon =
-            isFocused ? 'search' : 'search-outline';
-          const inboxIcon =
-            isFocused ? 'chatbubbles' : 'chatbubbles-outline';
-          const profileIcon =
-            isFocused ? 'person' : 'person-outline';
-
-          const iconStyle = {
-            fontSize: 20,
-          };
-
           return [
             <Pressable
               key={route.key}
@@ -174,63 +159,11 @@ const TabBar = ({state, descriptors, navigation}) => {
                   overflow: 'visible',
                 }}
               >
-                {label === 'Q&A' &&
-                  <QAndADevice
-                    color="black"
-                    fontSize={iconStyle.fontSize}
-                    isBold={isFocused}
-                  />
-                }
-                <View>
-                  {label === 'Search' &&
-                    <Ionicons style={{...iconStyle}} name={searchIcon}/>
-                  }
-                  {label === 'Inbox' &&
-                    <Ionicons style={{...iconStyle}} name={inboxIcon}/>
-                  }
-                  {label === 'Inbox' &&
-                    <Animated.View
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        right: -13,
-                        height: 12,
-                        width: 12,
-                        backgroundColor: '#70f',
-                        borderRadius: 999,
-                        shadowOffset: {
-                          width: 0,
-                          height: 2,
-                        },
-                        shadowOpacity: 0.4,
-                        shadowRadius: 4,
-                        elevation: 4,
-                        opacity: unreadIndicatorOpacity,
-                      }}
-                    />
-                  }
-                  {label === 'Traits' &&
-                    <View
-                      style={{
-                        height: 20,
-                        overflow: 'visible',
-                      }}
-                    >
-                      <DefaultText
-                        style={{
-                          fontSize: 22,
-                          marginTop: -6,
-                          fontWeight: isFocused ? '700' : undefined,
-                        }}
-                      >
-                        Ψ
-                      </DefaultText>
-                    </View>
-                  }
-                  {label === 'Profile' &&
-                    <Ionicons style={{...iconStyle}} name={profileIcon}/>
-                  }
-                </View>
+                <LabelToIcon
+                  label={label}
+                  isFocused={isFocused}
+                  unreadIndicatorOpacity={unreadIndicatorOpacity}
+                />
                 <DefaultText
                   style={{
                     textAlign: 'center',

diff --git a/components/navigation/util.tsx b/components/navigation/util.tsx
@@ -0,0 +1,105 @@
+import {
+  Animated,
+  View,
+} from 'react-native';
+import { QAndADevice } from '../q-and-a-device';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { DefaultText } from '../default-text';
+
+const displayedTabs: Set<string> = new Set([
+  "Q&A",
+  "Search",
+  "Inbox",
+  "Traits",
+  "Profile",
+]);
+
+const LabelToIcon = ({
+  label,
+  isFocused,
+  unreadIndicatorOpacity,
+  color = "black",
+  backgroundColor = undefined,
+  fontSize = 20,
+}) => {
+  const searchIcon =
+    isFocused ? 'search' : 'search-outline';
+  const inboxIcon =
+    isFocused ? 'chatbubbles' : 'chatbubbles-outline';
+  const profileIcon =
+    isFocused ? 'person' : 'person-outline';
+
+  const iconStyle = {
+    fontSize: fontSize,
+    color: color,
+  };
+
+  return (
+    <>
+      {label === 'Q&A' &&
+        <QAndADevice
+          color={color}
+          fontSize={iconStyle.fontSize}
+          isBold={isFocused}
+          backgroundColor={backgroundColor}
+        />
+      }
+      <View>
+        {label === 'Search' &&
+          <Ionicons style={{...iconStyle}} name={searchIcon}/>
+        }
+        {label === 'Inbox' &&
+          <Ionicons style={{...iconStyle}} name={inboxIcon}/>
+        }
+        {label === 'Inbox' &&
+          <Animated.View
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: -13,
+              height: 12,
+              width: 12,
+              backgroundColor: '#70f',
+              borderRadius: 999,
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowOpacity: 0.4,
+              shadowRadius: 4,
+              elevation: 4,
+              opacity: unreadIndicatorOpacity,
+            }}
+          />
+        }
+        {label === 'Traits' &&
+          <View
+            style={{
+              height: 20,
+              overflow: 'visible',
+            }}
+          >
+            <DefaultText
+              style={{
+                fontSize: fontSize + 2,
+                marginTop: -6,
+                fontWeight: isFocused ? '700' : undefined,
+                color: color,
+              }}
+            >
+              Ψ
+            </DefaultText>
+          </View>
+        }
+        {label === 'Profile' &&
+          <Ionicons style={{...iconStyle}} name={profileIcon}/>
+        }
+      </View>
+    </>
+  );
+};
+
+export {
+  displayedTabs,
+  LabelToIcon,
+}