feat: add file manager app

backend/.env.example

@@ -7,3 +7,4 @@ AUTH_PASSWORD=
 # Apps
 PC_MAC_ADDR=
 TERMINAL_SHELL=
+FILE_DIRS="/some/path;/another/path"

backend/lib/jwt.ts

@@ -1,3 +1,5 @@
+import type { Context, Next } from "hono";
+import { HTTPException } from "hono/http-exception";
 import * as jwt from "hono/jwt";
 
 const JWT_SECRET =
@@ -11,4 +13,37 @@ export const verifyToken = async (token: string) => {
   return jwt.verify(token, JWT_SECRET);
 };
 
-export const authMiddleware = jwt.jwt({ secret: JWT_SECRET });
+export const authMiddleware = async (ctx: Context, next: Next) => {
+  const authHeader = ctx.req.raw.headers.get("Authorization");
+  const queryToken = ctx.req.query("token");
+  let token;
+
+  if (authHeader) {
+    const parts = authHeader.split(/\s+/);
+    if (parts.length !== 2) {
+      throw new HTTPException(401, { message: "Unauthorized!" });
+    } else {
+      token = parts[1];
+    }
+  }
+
+  if (queryToken) {
+    token = queryToken;
+  }
+
+  if (!token) {
+    throw new HTTPException(401, { message: "Unauthorized!" });
+  }
+
+  let payload;
+  try {
+    payload = await jwt.verify(token, JWT_SECRET);
+  } catch (e) {}
+
+  if (!payload) {
+    throw new HTTPException(401, { message: "Unauthorized!" });
+  }
+
+  ctx.set("jwtPayload", payload);
+  await next();
+};

backend/package.json

@@ -20,6 +20,7 @@
     "@hono/zod-validator": "^0.2.0",
     "dotenv": "^16.4.5",
     "hono": "^4.1.0",
+    "mime": "^4.0.1",
     "nanoid": "^5.0.6",
     "node-pty": "^1.0.0",
     "systeminformation": "^5.22.2",

backend/routes/_routes.ts

@@ -3,6 +3,7 @@ import auth from "./auth";
 import system from "./system";
 import _process from "./process";
 import apps from "./apps";
+import files from "./files";
 import { authMiddleware } from "../lib/jwt";
 
 const routes = new Hono()
@@ -10,7 +11,8 @@ const routes = new Hono()
   .use(authMiddleware)
   .route("/system", system)
   .route("/process", _process)
-  .route("/apps", apps);
+  .route("/apps", apps)
+  .route("/files", files);
 
 export type AppType = typeof routes;
 

backend/routes/files.ts

@@ -0,0 +1,157 @@
+import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
+import { z } from "zod";
+import fs from "node:fs/promises";
+import { HTTPException } from "hono/http-exception";
+import { ReadStream, createReadStream } from "node:fs";
+import { ReadableStream } from "stream/web";
+import mime from "mime";
+
+const getFilesSchema = z
+  .object({
+    path: z.string(),
+  })
+  .partial()
+  .optional();
+
+const filesDirList = process.env.FILE_DIRS
+  ? process.env.FILE_DIRS.split(";").map((i) => ({
+      name: i.split("/").at(-1),
+      path: i,
+    }))
+  : [];
+
+const route = new Hono()
+  .get("/", zValidator("query", getFilesSchema), async (c) => {
+    const input: z.infer<typeof getFilesSchema> = c.req.query();
+    const pathname = (input.path || "").split("/");
+    const path = pathname.slice(2).join("/");
+    const baseName = pathname[1];
+
+    if (!baseName?.length) {
+      return c.json(
+        filesDirList.map((i) => ({
+          name: i.name,
+          path: "/" + i.name,
+          isDirectory: true,
+        }))
+      );
+    }
+
+    const baseDir = filesDirList.find((i) => i.name === baseName)?.path;
+    if (!baseDir) {
+      return c.json([]);
+    }
+
+    try {
+      const cwd = baseDir + "/" + path;
+      const entities = await fs.readdir(cwd, { withFileTypes: true });
+
+      const files = entities
+        .filter((e) => !e.name.startsWith("."))
+        .map((e) => ({
+          name: e.name,
+          path: "/" + [baseName, path, e.name].filter(Boolean).join("/"),
+          isDirectory: e.isDirectory(),
+        }))
+        .sort((a, b) => {
+          if (a.isDirectory && !b.isDirectory) {
+            return -1;
+          } else if (!a.isDirectory && b.isDirectory) {
+            return 1;
+          } else {
+            return a.name.localeCompare(b.name);
+          }
+        });
+
+      return c.json(files);
+    } catch (err) {}
+
+    return c.json([]);
+  })
+  .get(
+    "/download",
+    zValidator("query", z.object({ path: z.string().min(1) })),
+    async (c) => {
+      const pathname = (c.req.query("path") || "").split("/");
+      const path = "/" + pathname.slice(2).join("/");
+      const baseName = pathname[1];
+
+      try {
+        if (!baseName?.length) {
+          throw new Error();
+        }
+
+        const baseDir = filesDirList.find((i) => i.name === baseName)?.path;
+        if (!baseDir) {
+          throw new Error();
+        }
+
+        const filepath = baseDir + path;
+        const stat = await fs.stat(filepath);
+        const size = stat.size;
+
+        // c.header("Content-Type", "application/octet-stream");
+        // c.header("Content-Disposition", `attachment; filename="${path}"`);
+
+        c.header(
+          "Content-Type",
+          mime.getType(filepath) || "application/octet-stream"
+        );
+
+        if (c.req.method == "HEAD" || c.req.method == "OPTIONS") {
+          c.header("Content-Length", size.toString());
+          c.status(200);
+          return c.body(null);
+        }
+
+        const range = c.req.header("range") || "";
+
+        if (!range) {
+          c.header("Content-Length", size.toString());
+          return c.body(createStreamBody(createReadStream(filepath)), 200);
+        }
+
+        c.header("Accept-Ranges", "bytes");
+        c.header("Date", stat.birthtime.toUTCString());
+
+        const parts = range.replace(/bytes=/, "").split("-", 2);
+        const start = parts[0] ? parseInt(parts[0], 10) : 0;
+        let end = parts[1] ? parseInt(parts[1], 10) : stat.size - 1;
+        if (size < end - start + 1) {
+          end = size - 1;
+        }
+
+        const chunksize = end - start + 1;
+        const stream = createReadStream(filepath, { start, end });
+
+        c.header("Content-Length", chunksize.toString());
+        c.header("Content-Range", `bytes ${start}-${end}/${stat.size}`);
+
+        return c.body(createStreamBody(stream), 206);
+      } catch (err) {
+        console.error(err);
+        throw new HTTPException(404, { message: "Not Found!" });
+      }
+    }
+  );
+
+const createStreamBody = (stream: ReadStream) => {
+  const body = new ReadableStream({
+    start(controller) {
+      stream.on("data", (chunk) => {
+        controller.enqueue(chunk);
+      });
+      stream.on("end", () => {
+        controller.close();
+      });
+    },
+
+    cancel() {
+      stream.destroy();
+    },
+  });
+  return body;
+};
+
+export default route;

backend/yarn.lock

@@ -199,6 +199,11 @@ hono@^4.1.0:
   resolved "https://registry.yarnpkg.com/hono/-/hono-4.1.0.tgz#62cef81df0dbf731643155e1e5c1b9dffb230dc4"
   integrity sha512-9no6DCHb4ijB1tWdFXU6JnrnFgzwVZ1cnIcS1BjAFnMcjbtBTOMsQrDrPH3GXbkNEEEkj8kWqcYBy8Qc0bBkJQ==
 
+mime@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-4.0.1.tgz#ad7563d1bfe30253ad97dedfae2b1009d01b9470"
+  integrity sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==
+
 nan@^2.17.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.19.0.tgz#bb58122ad55a6c5bc973303908d5b16cfdd5a8c0"

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}
+      <Stack.Screen
-      style={{ height: "100vh", background: "#1d1e2b", padding: 16 }}
+        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 Performance from "../components/pages/home/Performance";
-import Summary from "./_sections/Summary";
+import Summary from "../components/pages/home/Summary";
-import Storage from "./_sections/Storage";
+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;
+};