create tabbar component, replace navbar tabs with it

src/App.tsx

@@ -5,6 +5,7 @@ import { darkThemeColors, lightThemeColors } from "./constants/theme";
 import AddThirdPartyServerModal from "./containers/AddThirdPartyServer";
 import JoinServerPrompt from "./containers/JoinServerPrompt";
 import MainView from "./containers/MainBody";
+import MessageBox from "./containers/MessageBox";
 import NavBar from "./containers/NavBar";
 import Notification from "./containers/Notification";
 import ContextMenu from "./containers/ServerContextMenu";
@@ -13,12 +14,9 @@ import WindowTitleBar from "./containers/WindowTitleBar";
 import { ThemeContext } from "./contexts/theme";
 import { useAppState } from "./states/app";
 import { fetchServers, fetchUpdateInfo } from "./utils/helpers";
-import { ListType } from "./utils/types";
-import MessageBox from "./containers/MessageBox";
 
 const App = () => {
   const [themeType, setTheme] = useState<"light" | "dark">("light");
-  const [currentListType, setCurrentListType] = useState<ListType>("favorites");
   const { maximized, toggleMaximized } = useAppState();
 
   const windowResizeListener = async () => {
@@ -51,8 +49,8 @@ const App = () => {
         <View style={[styles.appView, { borderRadius: maximized ? 0 : 8 }]}>
           <WindowTitleBar />
           <View style={{ flex: 1, width: "100%" }}>
-            <NavBar onListChange={(type) => setCurrentListType(type)} />
-            <MainView listType={currentListType} />
+            <NavBar />
+            <MainView />
             <ContextMenu />
             <JoinServerPrompt />
             <SettingsModal />

src/components/TabBar.tsx

@@ -0,0 +1,103 @@
+import { useContext } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { ThemeContext } from "../contexts/theme";
+import Icon from "./Icon";
+import Text from "./Text";
+
+interface IProps {
+  onChange: (type: string) => void;
+  list: {
+    icon?: string;
+    label: string;
+    type: string;
+  }[];
+  selected: string;
+}
+
+const TabBar = (props: IProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <View style={styles.listing}>
+      {props.list.map((item) => {
+        const selected = props.selected === item.type;
+        return (
+          <View
+            key={"list-type-" + item.type}
+            style={{
+              overflow: "hidden",
+              height: 34,
+              top: 2,
+            }}
+          >
+            <TouchableOpacity
+              disabled={selected}
+              style={[
+                styles.listItem,
+                selected
+                  ? {
+                      shadowColor: theme.primary,
+                      shadowOffset: {
+                        width: 0,
+                        height: 0,
+                      },
+                      shadowOpacity: 0.45,
+                      shadowRadius: 5.84,
+                      borderColor: theme.textSelected,
+                    }
+                  : {},
+              ]}
+              onPress={() => {
+                if (props.selected !== item.type) {
+                  props.onChange(item.type);
+                }
+              }}
+            >
+              {item.icon && (
+                <Icon
+                  image={item.icon}
+                  size={15}
+                  style={{ marginRight: 5, opacity: selected ? 1 : 0.5 }}
+                />
+              )}
+              <Text
+                semibold={selected}
+                size={1}
+                color={selected ? theme.textSelected : theme.textPrimary}
+                style={
+                  selected
+                    ? {
+                        textShadowColor: "rgba(132, 119, 183, 0.5)",
+                        textShadowOffset: { width: 0, height: 0 },
+                        textShadowRadius: 4,
+                      }
+                    : {}
+                }
+              >
+                {item.label}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  listing: {
+    height: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: -0.5,
+  },
+  listItem: {
+    height: 30,
+    paddingHorizontal: 10,
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+  },
+});
+
+export default TabBar;

src/containers/MainBody/ServerList/SearchBar.tsx

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import {
   Animated,
@@ -12,27 +13,25 @@ import Text from "../../../components/Text";
 import { images } from "../../../constants/images";
 import { ThemeContext } from "../../../contexts/theme";
 import { useAddThirdPartyServerModal } from "../../../states/addThirdPartyServerModal";
+import { useAppState } from "../../../states/app";
 import {
   useGenericPersistentState,
   useGenericTempState,
 } from "../../../states/genericStates";
 import { useJoinServerPrompt } from "../../../states/joinServerPrompt";
 import { usePersistentServers, useServers } from "../../../states/servers";
 import { fetchServers } from "../../../utils/helpers";
-import { ListType } from "../../../utils/types";
-import { t } from "i18next";
 
 interface IProps {
   onChange: (query: string) => void;
-  listType: ListType;
 }
 
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity);
 
 const SearchBar = (props: IProps) => {
   const { theme } = useContext(ThemeContext);
-
+  const { listType } = useAppState();
   const [searchQuery, setSearchQuery] = useState("");
   const { filterMenu, showFilterMenu } = useGenericTempState();
   const { sideLists, showSideLists } = useGenericPersistentState();
@@ -166,7 +165,7 @@ const SearchBar = (props: IProps) => {
           </Pressable>
         )}
       </View>
-      {props.listType === "recentlyjoined" && (
+      {listType === "recentlyjoined" && (
         <TouchableOpacity
           style={styles.rightSideIcons}
           onPress={() => clearRecentlyJoined()}

src/containers/MainBody/index.tsx

@@ -4,11 +4,11 @@ import { Pressable, StyleSheet, View } from "react-native";
 import CheckBox from "../../components/CheckBox";
 import Text from "../../components/Text";
 import { ThemeContext } from "../../contexts/theme";
+import { useAppState } from "../../states/app";
 import {
   useGenericPersistentState,
   useGenericTempState,
 } from "../../states/genericStates";
-import { ListType } from "../../utils/types";
 import BottomBar from "./BottomBar";
 import ServerInfo from "./ServerInfo";
 import SearchBar from "./ServerList/SearchBar";
@@ -17,10 +17,6 @@ import Internet from "./ServerList/Tabs/Internet";
 import Partners from "./ServerList/Tabs/Partners";
 import RecentlyJoined from "./ServerList/Tabs/RecentlyJoined";
 
-interface IProps {
-  listType: ListType;
-}
-
 const FiltersModal = () => {
   const { theme } = useContext(ThemeContext);
   const { showFilterMenu, searchData, setSearchData } = useGenericTempState();
@@ -98,23 +94,21 @@ const FiltersModal = () => {
   );
 };
 
-const MainView = (props: IProps) => {
+const MainView = () => {
   const { filterMenu, setSearchData } = useGenericTempState();
   const { sideLists } = useGenericPersistentState();
+  const { listType } = useAppState();
 
   const renderList = () => {
-    if (props.listType === "favorites") return <Favorites />;
-    else if (props.listType === "partners") return <Partners />;
-    else if (props.listType === "internet") return <Internet />;
-    else if (props.listType === "recentlyjoined") return <RecentlyJoined />;
+    if (listType === "favorites") return <Favorites />;
+    else if (listType === "partners") return <Partners />;
+    else if (listType === "internet") return <Internet />;
+    else if (listType === "recentlyjoined") return <RecentlyJoined />;
   };
 
   return (
     <View style={styles.body}>
-      <SearchBar
-        listType={props.listType}
-        onChange={(query) => setSearchData("query", query)}
-      />
+      <SearchBar onChange={(query) => setSearchData("query", query)} />
       <View style={styles.serverSection}>
         {renderList()}
         {sideLists && <ServerInfo />}

src/containers/NavBar.tsx

@@ -1,21 +1,18 @@
 import { t } from "i18next";
-import { useContext, useState } from "react";
-import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import { useContext } from "react";
+import { StyleSheet, TextInput, View } from "react-native";
 import Icon from "../components/Icon";
-import Text from "../components/Text";
+import TabBar from "../components/TabBar";
 import { images } from "../constants/images";
 import { ThemeContext } from "../contexts/theme";
+import { useAppState } from "../states/app";
 import { useSettings } from "../states/settings";
 import { ListType } from "../utils/types";
 
-interface IProps {
-  onListChange: (type: ListType) => void;
-}
-
-const NavBar = (props: IProps) => {
+const NavBar = () => {
   const { theme } = useContext(ThemeContext);
-  const [selectedList, setSelectedList] = useState<ListType>("favorites");
   const { nickName, setNickName } = useSettings();
+  const { setListType, listType } = useAppState();
 
   const list: { icon: string; label: string; type: ListType }[] = [
     { icon: images.icons.favorite, label: t("favorites"), type: "favorites" },
@@ -31,67 +28,11 @@ const NavBar = (props: IProps) => {
   return (
     <>
       <View style={[styles.container, { backgroundColor: theme.secondary }]}>
-        <View style={styles.listing}>
-          {list.map((item) => {
-            const selected = selectedList === item.type;
-            return (
-              <View
-                key={"list-type-" + item.type}
-                style={{
-                  overflow: "hidden",
-                  height: 34,
-                  top: 2,
-                }}
-              >
-                <TouchableOpacity
-                  style={[
-                    styles.listItem,
-                    selected
-                      ? {
-                          shadowColor: theme.primary,
-                          shadowOffset: {
-                            width: 0,
-                            height: 0,
-                          },
-                          shadowOpacity: 0.45,
-                          shadowRadius: 5.84,
-                          borderColor: theme.textSelected,
-                        }
-                      : {},
-                  ]}
-                  onPress={() => {
-                    if (selectedList !== item.type) {
-                      setSelectedList(item.type);
-                      props.onListChange(item.type);
-                    }
-                  }}
-                >
-                  <Icon
-                    image={item.icon}
-                    size={15}
-                    style={{ marginRight: 5, opacity: selected ? 1 : 0.5 }}
-                  />
-                  <Text
-                    semibold={selected}
-                    size={1}
-                    color={selected ? theme.textSelected : theme.textPrimary}
-                    style={
-                      selected
-                        ? {
-                            textShadowColor: "rgba(132, 119, 183, 0.5)",
-                            textShadowOffset: { width: 0, height: 0 },
-                            textShadowRadius: 4,
-                          }
-                        : {}
-                    }
-                  >
-                    {item.label}
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            );
-          })}
-        </View>
+        <TabBar
+          onChange={(type) => setListType(type as ListType)}
+          list={list}
+          selected={listType}
+        />
         <View style={styles.inputs}>
           <View style={styles.nicknameContainer}>
             <Icon
@@ -149,19 +90,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  listing: {
-    height: "100%",
-    flexDirection: "row",
-    alignItems: "center",
-    marginLeft: -0.5,
-  },
-  listItem: {
-    height: 30,
-    paddingHorizontal: 10,
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: "row",
-  },
   inputs: {
     height: "100%",
     flex: 1,

src/states/app.ts

@@ -1,6 +1,7 @@
 import { OsType } from "@tauri-apps/api/os";
 import { create } from "zustand";
 import { VERSION } from "../constants/app";
+import { ListType } from "../utils/types";
 
 export interface UpdateInfo {
   version: string;
@@ -15,11 +16,13 @@ interface AppState {
   skippedUpdateVersion: string;
   nativeAppVersion: string;
   hostOS: OsType;
+  listType: ListType;
   toggleMaximized: (enable: boolean) => void;
   setUpdateInfo: (data: UpdateInfo) => void;
   setNativeAppVersionValue: (data: string) => void;
   setHostOSValue: (data: OsType) => void;
   skipUpdate: (version: string) => void;
+  setListType: (type: ListType) => void;
 }
 
 const useAppState = create<AppState>()((set) => ({
@@ -29,12 +32,15 @@ const useAppState = create<AppState>()((set) => ({
   skippedUpdateVersion: "",
   nativeAppVersion: "",
   hostOS: "" as OsType,
+  listType: "favorites",
   toggleMaximized: (enable: boolean) => set(() => ({ maximized: enable })),
   setUpdateInfo: (data: UpdateInfo) => set(() => ({ updateInfo: data })),
   setNativeAppVersionValue: (data: string) =>
     set(() => ({ nativeAppVersion: data })),
   setHostOSValue: (data: OsType) => set(() => ({ hostOS: data })),
   skipUpdate: (version) => set(() => ({ skippedUpdateVersion: version })),
+  setListType: (type) => set(() => ({ listType: type })),
 }));
 
 export { useAppState };
+