feat: update ui, test release mode

frontend/.gitignore

@@ -20,3 +20,5 @@ expo-env.d.ts
 # @end expo-cli
 .env*
 !.env.example
+*.apk
+*.aab

frontend/app.config.ts

@@ -2,12 +2,12 @@ import { ExpoConfig, ConfigContext } from "expo/config";
 
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
-  name: "frontend",
+  name: "Vaulterm",
-  slug: "frontend",
+  slug: "vaulterm",
   version: "1.0.0",
   orientation: "portrait",
   icon: "./assets/images/icon.png",
-  scheme: "myapp",
+  scheme: "vaulterm",
   userInterfaceStyle: "automatic",
   newArchEnabled: true,
   splash: {
@@ -19,6 +19,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     supportsTablet: true,
   },
   android: {
+    package: "sh.rul.vaulterm",
     adaptiveIcon: {
       foregroundImage: "./assets/images/adaptive-icon.png",
       backgroundColor: "#ffffff",
@@ -33,4 +34,10 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   experiments: {
     typedRoutes: true,
   },
+  owner: "khairul169",
+  extra: {
+    eas: {
+      projectId: "3e0112c1-f0ed-423c-b5cf-95633f23f6dc",
+    },
+  },
 });

frontend/app/(drawer)/_layout.tsx

@@ -18,7 +18,7 @@ export default function Layout() {
         <Drawer.Screen name="hosts" options={{ title: "Hosts" }} />
         <Drawer.Screen
           name="terminal"
-          options={{ title: "Terminal", headerShown: true }}
+          options={{ title: "Terminal", headerShown: media.sm }}
         />
       </Drawer>
     </GestureHandlerRootView>

frontend/components/containers/terminal.tsx

@@ -4,6 +4,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import { ScrollView, Text, TextStyle, View } from "tamagui";
 import Pressable from "../ui/pressable";
 import Icons from "../ui/icons";
+import useThemeStore from "@/stores/theme";
 
 const Keys = {
   ArrowLeft: "\x1b[D",
@@ -29,6 +30,7 @@ type TerminalProps = ComponentPropsWithoutRef<typeof View> & XTermJsProps;
 
 const Terminal = ({ client = "xtermjs", style, ...props }: TerminalProps) => {
   const xtermRef = React.useRef<XTermRef>(null);
+  const theme = useThemeStore((i) => i.theme);
 
   const send = (data: string) => {
     switch (client) {
@@ -45,6 +47,7 @@ const Terminal = ({ client = "xtermjs", style, ...props }: TerminalProps) => {
           ref={xtermRef}
           dom={{ scrollEnabled: false }}
           wsUrl={props.url}
+          colorScheme={theme}
         />
       )}
 

frontend/components/containers/xtermjs.tsx

@@ -18,10 +18,11 @@ type XTermJsProps = {
   dom?: DOMProps;
   style?: CSSProperties;
   wsUrl: string;
+  colorScheme?: "light" | "dark";
 };
 
 // vscode-snazzy https://github.com/Tyriar/vscode-snazzy
-const snazzyTheme = {
+const darkTheme = {
   foreground: "#eff0eb",
   background: "#282a36",
   selection: "#97979b33",
@@ -43,6 +44,28 @@ const snazzyTheme = {
   brightWhite: "#eff0eb",
 };
 
+const lightTheme = {
+  foreground: "#282a36",
+  background: "#e5f2ff",
+  selection: "#97979b33",
+  black: "#eff0eb",
+  brightBlack: "#686868",
+  red: "#d32f2f",
+  brightRed: "#ff5c57",
+  green: "#388e3c",
+  brightGreen: "#5af78e",
+  yellow: "#fbc02d",
+  brightYellow: "#f3f99d",
+  blue: "#1976d2",
+  brightBlue: "#57c7ff",
+  magenta: "#ab47bc",
+  brightMagenta: "#ff6ac1",
+  cyan: "#00acc1",
+  brightCyan: "#9aedfe",
+  white: "#282a36",
+  brightWhite: "#686868",
+};
+
 export interface XTermRef extends DOMImperativeFactory {
   send: (...args: JSONValue[]) => void;
 }
@@ -50,7 +73,9 @@ export interface XTermRef extends DOMImperativeFactory {
 const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
-  const { wsUrl, onLoad, style = {} } = props;
+  const xtermRef = useRef<XTerm | null>(null);
+  const { wsUrl, onLoad, style = {}, colorScheme } = props;
+  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
 
   useEffect(() => {
     const container = containerRef.current;
@@ -60,10 +85,11 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
 
     const xterm = new XTerm({
       fontFamily: '"Cascadia Code", Menlo, monospace',
-      theme: snazzyTheme,
+      theme: theme,
       cursorBlink: true,
     });
     xterm.open(container);
+    xtermRef.current = xterm;
 
     const fitAddon = new FitAddon();
     xterm.loadAddon(fitAddon);
@@ -101,8 +127,6 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
     }
 
     function onClose(e: CloseEvent) {
-      console.log("WS Closed", e.reason, e.code);
-
       // Check if the close event was abnormal
       if (!e.wasClean) {
         const reason = e.reason || `Code: ${e.code}`;
@@ -129,6 +153,7 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
 
     return () => {
       xterm.dispose();
+      xtermRef.current = null;
       wsRef.current = null;
       containerRef.current = null;
 
@@ -154,11 +179,17 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
     []
   );
 
+  useEffect(() => {
+    if (xtermRef.current) {
+      xtermRef.current.options.theme = theme;
+    }
+  }, [theme]);
+
   return (
     <div
       ref={containerRef}
       style={{
-        background: snazzyTheme.background,
+        background: theme.background,
         padding: 12,
         flex: !IS_DOM ? 1 : undefined,
         width: "100%",

frontend/components/ui/pager-view.tsx

@@ -19,13 +19,13 @@ const PagerView = ({
 
   const [onPageSelect, clearPageSelectDebounce] = useDebounceCallback(
     (page) => onChangePage?.(page),
-    100
+    300
   );
 
   const [setPage] = useDebounceCallback((page) => {
     ref.current?.setPage(page);
     clearPageSelectDebounce();
-  }, 300);
+  }, 100);
 
   useEffect(() => {
     if (page != null) {

frontend/eas.json

@@ -0,0 +1,24 @@
+{
+  "cli": {
+    "version": ">= 10.2.2"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      },
+      "env": {
+        "EXPO_PUBLIC_API_URL": "https://vaulterm-dev.rul.sh"
+      }
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

frontend/package.json

@@ -10,7 +10,9 @@
     "ios": "expo start --ios",
     "web": "expo start --web",
     "test": "jest --watchAll",
-    "lint": "expo lint"
+    "lint": "expo lint",
+    "build:preview": "eas build -p android --profile preview --local",
+    "build:android": "eas build -p android --local"
   },
   "jest": {
     "preset": "jest-expo"