feat: add file manager app

src/app/_layout.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Slot, router, usePathname } from "expo-router";
+import { Slot, Stack, router, usePathname } from "expo-router";
 import { QueryClientProvider } from "react-query";
 import queryClient from "@/lib/queryClient";
 import { View } from "react-native";
@@ -40,7 +40,9 @@ const RootLayout = () => {
     <QueryClientProvider client={queryClient}>
       <StatusBar style="auto" />
       <View style={cn("flex-1 bg-[#f2f7fb]", { paddingTop: insets.top })}>
-        <Slot />
+        <Stack
+          screenOptions={{ contentStyle: { backgroundColor: "#f2f7fb" } }}
+        />
       </View>
       <Toast
         ref={(ref) => {

src/app/apps/files/index.tsx

@@ -0,0 +1,67 @@
+import FileList, { FileItem } from "@/components/pages/files/FileList";
+import { useAsyncStorage } from "@/hooks/useAsyncStorage";
+import api from "@/lib/api";
+import authStore, { useAuth } from "@/stores/authStore";
+import BackButton from "@ui/BackButton";
+import Box from "@ui/Box";
+import Input from "@ui/Input";
+import { Stack } from "expo-router";
+import React from "react";
+import { useQuery } from "react-query";
+
+const FilesPage = () => {
+  const { isLoggedIn } = useAuth();
+  const [params, setParams] = useAsyncStorage("files", {
+    path: "",
+  });
+  const parentPath =
+    params.path.length > 0
+      ? params.path.split("/").slice(0, -1).join("/")
+      : null;
+
+  const { data } = useQuery({
+    queryKey: ["app/files", params],
+    queryFn: () => api.files.$get({ query: params }).then((r) => r.json()),
+    enabled: isLoggedIn,
+  });
+
+  return (
+    <>
+      <Stack.Screen
+        options={{ headerLeft: () => <BackButton />, title: "Files" }}
+      />
+
+      <Box className="px-2 py-2 bg-white">
+        <Input
+          placeholder="/"
+          value={params.path}
+          onChangeText={(path) => setParams({ path })}
+        />
+      </Box>
+
+      <FileList
+        files={data}
+        onSelect={(file) => {
+          if (file.path === "..") {
+            return setParams({ ...params, path: parentPath });
+          }
+          if (file.isDirectory) {
+            return setParams({ ...params, path: file.path });
+          }
+
+          downloadFile(file);
+        }}
+        canGoBack={parentPath != null}
+      />
+    </>
+  );
+};
+
+async function downloadFile(file: FileItem) {
+  const url = api.files.download.$url();
+  url.searchParams.set("path", file.path);
+  url.searchParams.set("token", authStore.getState().token);
+  window.open(url.toString(), "_blank");
+}
+
+export default FilesPage;

src/app/apps/terminal.tsx

@@ -9,6 +9,8 @@ import React, { useEffect, useRef } from "react";
 import "xterm/css/xterm.css";
 import { API_BASEURL } from "@/lib/constants";
 import authStore, { useAuth } from "@/stores/authStore";
+import { Stack } from "expo-router";
+import BackButton from "@ui/BackButton";
 
 const isWeb = Platform.OS === "web";
 
@@ -83,10 +85,15 @@ const TerminalPage = () => {
   }
 
   return (
-    <div
-      ref={terminalRef}
-      style={{ height: "100vh", background: "#1d1e2b", padding: 16 }}
-    />
+    <>
+      <Stack.Screen
+        options={{ title: "Terminal", headerLeft: () => <BackButton /> }}
+      />
+      <div
+        ref={terminalRef}
+        style={{ height: "100vh", background: "#1d1e2b", padding: 16 }}
+      />
+    </>
   );
 };
 

src/app/index.tsx

@@ -2,14 +2,15 @@ import React from "react";
 import api from "@/lib/api";
 import { useQuery } from "react-query";
 import Text from "@ui/Text";
-import Performance from "./_sections/Performance";
-import Summary from "./_sections/Summary";
-import Storage from "./_sections/Storage";
+import Performance from "../components/pages/home/Performance";
+import Summary from "../components/pages/home/Summary";
+import Storage from "../components/pages/home/Storage";
 import Container from "@ui/Container";
 import { useAuth } from "@/stores/authStore";
 import { HStack } from "@ui/Stack";
 import Box from "@ui/Box";
-import Apps from "./_sections/Apps";
+import Apps from "../components/pages/home/Apps";
+import { Stack } from "expo-router";
 
 const HomePage = () => {
   const { isLoggedIn } = useAuth();
@@ -26,6 +27,8 @@ const HomePage = () => {
 
   return (
     <Container scrollable className="px-4 md:px-8 max-w-none py-8">
+      <Stack.Screen options={{ headerShown: false, title: "Home Lab" }} />
+
       <HStack className="items-start gap-8">
         <Box className="flex-1 md:max-w-lg">
           <Text className="text-2xl font-medium">Home Lab</Text>

src/components/pages/files/FileList.tsx

@@ -0,0 +1,71 @@
+import { FlatList, Pressable } from "react-native";
+import React, { useMemo } from "react";
+import Text from "@ui/Text";
+import { HStack } from "@ui/Stack";
+import { cn } from "@/lib/utils";
+import { Ionicons } from "@ui/Icons";
+
+export type FileItem = {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+};
+
+type FileListProps = {
+  files?: FileItem[];
+  onSelect?: (file: FileItem) => void;
+  canGoBack?: boolean;
+};
+
+const FileList = ({ files, onSelect, canGoBack }: FileListProps) => {
+  const fileList = useMemo(() => {
+    if (canGoBack) {
+      return [{ name: "..", path: "..", isDirectory: true }, ...(files || [])];
+    }
+    return files || [];
+  }, [files, canGoBack]);
+
+  return (
+    <FlatList
+      contentContainerStyle={cn("bg-white")}
+      data={fileList || []}
+      renderItem={({ item }) => (
+        <FileItem file={item} onPress={() => onSelect?.(item)} />
+      )}
+      keyExtractor={(item) => item.path}
+    />
+  );
+};
+
+const FileItem = ({
+  file,
+  onPress,
+}: {
+  file: FileItem;
+  onPress?: () => void;
+}) => {
+  return (
+    <HStack className="bg-white border-b border-gray-200 items-center">
+      <Pressable
+        style={({ pressed }) =>
+          cn(
+            "flex-1 px-4 py-3 flex flex-row gap-4 items-center",
+            pressed && "bg-gray-100"
+          )
+        }
+        onPress={onPress}
+      >
+        <Ionicons
+          name={file.isDirectory ? "folder" : "document"}
+          style={cn(
+            "text-2xl",
+            file.isDirectory ? "text-blue-400" : "text-gray-500"
+          )}
+        />
+        <Text numberOfLines={1}>{file.name}</Text>
+      </Pressable>
+    </HStack>
+  );
+};
+
+export default FileList;

src/components/pages/home/Apps.tsx

@@ -5,8 +5,8 @@ import { Ionicons } from "@ui/Icons";
 import { HStack } from "@ui/Stack";
 import Button from "@ui/Button";
 import { useNavigation } from "expo-router";
-import { wakePcUp } from "@/app/apps/lib";
 import { showDialog } from "@/stores/dialogStore";
+import { wakePcUp } from "@/app/apps/lib";
 
 type Props = ComponentProps<typeof Box>;
 
@@ -14,6 +14,11 @@ const Apps = (props: Props) => {
   const navigation = useNavigation();
 
   const appList = [
+    {
+      name: "Files",
+      icon: <Ionicons name="folder" />,
+      path: "files/index",
+    },
     {
       name: "Terminal",
       icon: <Ionicons name="terminal" />,

src/components/ui/BackButton.tsx

@@ -0,0 +1,32 @@
+import { useNavigation } from "expo-router";
+import React from "react";
+import { Ionicons } from "./Icons";
+import Button from "./Button";
+
+type BackButtonProps = {
+  prev?: string;
+};
+
+const BackButton = ({ prev }: BackButtonProps) => {
+  const navigation = useNavigation();
+
+  const onPress = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    } else {
+      navigation.navigate((prev || "index") as never);
+    }
+  };
+
+  return (
+    <Button
+      icon={<Ionicons name="arrow-back" />}
+      variant="ghost"
+      className="h-14 w-14"
+      iconClassName="text-black text-2xl"
+      onPress={onPress}
+    />
+  );
+};
+
+export default BackButton;

src/hooks/useAsyncStorage.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const useAsyncStorage = <T = any>(key: string, defaultValue: T) => {
+  const [value, setValue] = useState<T>(defaultValue);
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const jsonValue = await AsyncStorage.getItem(key);
+        return jsonValue != null ? JSON.parse(jsonValue) : defaultValue;
+      } catch (e) {
+        console.warn(e);
+        return defaultValue;
+      }
+    };
+
+    const init = async () => setValue(await getData());
+    init();
+  }, [key]);
+
+  const setValueToAsyncStorage = async (newValue: T) => {
+    try {
+      const jsonValue = JSON.stringify(newValue);
+      await AsyncStorage.setItem(key, jsonValue);
+      setValue(newValue);
+    } catch (e) {
+      console.warn(e);
+    }
+  };
+
+  return [value, setValueToAsyncStorage] as const;
+};