feat: add drawer

frontend/app/(drawer)/_layout.tsx

@@ -2,6 +2,8 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Drawer } from "expo-router/drawer";
 import React from "react";
 import { useMedia } from "tamagui";
+import DrawerContent from "@/components/containers/drawer";
+import Icons from "@/components/ui/icons";
 
 export default function Layout() {
   const media = useMedia();
@@ -9,17 +11,40 @@ export default function Layout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <Drawer
+        drawerContent={DrawerContent}
         screenOptions={{
           drawerType: media.sm ? "front" : "permanent",
           drawerStyle: { width: 250 },
           headerLeft: media.sm ? undefined : () => null,
         }}
       >
-        <Drawer.Screen name="hosts" options={{ title: "Hosts" }} />
-        <Drawer.Screen name="keychains" options={{ title: "Keychains" }} />
+        <Drawer.Screen
+          name="hosts"
+          options={{
+            title: "Hosts",
+            drawerIcon: ({ size, color }) => (
+              <Icons name="server" size={size} color={color} />
+            ),
+          }}
+        />
+        <Drawer.Screen
+          name="keychains"
+          options={{
+            title: "Keychains",
+            drawerIcon: ({ size, color }) => (
+              <Icons name="key" size={size} color={color} />
+            ),
+          }}
+        />
         <Drawer.Screen
           name="terminal"
-          options={{ title: "Terminal", headerShown: media.sm }}
+          options={{
+            title: "Terminal",
+            headerShown: media.sm,
+            drawerIcon: ({ size, color }) => (
+              <Icons name="console-line" size={size} color={color} />
+            ),
+          }}
         />
       </Drawer>
     </GestureHandlerRootView>

frontend/app/_providers.tsx

@@ -12,7 +12,7 @@ import { router, usePathname, useRootNavigationState } from "expo-router";
 import { useAuthStore } from "@/stores/auth";
 import { PortalProvider } from "tamagui";
 import { queryClient } from "@/lib/api";
-import { useAppStore } from "@/stores/app";
+import { useServer } from "@/stores/app";
 
 type Props = PropsWithChildren;
 
@@ -54,7 +54,7 @@ const AuthProvider = () => {
   const pathname = usePathname();
   const rootNavigationState = useRootNavigationState();
   const { isLoggedIn } = useAuthStore();
-  const { curServer } = useAppStore();
+  const curServer = useServer();
 
   useEffect(() => {
     if (!rootNavigationState?.key) {

frontend/app/index.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Redirect } from "expo-router";
 import { useTermSession } from "@/stores/terminal-sessions";
-import { useAppStore } from "@/stores/app";
+import { useServer } from "@/stores/app";
 
 export default function index() {
   const { sessions, curSession } = useTermSession();
-  const { servers, curServer } = useAppStore();
+  const curServer = useServer();
 
-  if (!servers.length || !curServer) {
+  if (!curServer) {
     return <Redirect href="/server" />;
   }