feat: multi tab session

frontend/components/containers/interactive-session.tsx

@@ -0,0 +1,31 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Terminal from "./terminal";
+import { BASE_WS_URL } from "@/lib/api";
+
+type SSHSessionProps = {
+  type: "ssh";
+  options: {
+    serverId: string;
+  };
+};
+
+type Props = SSHSessionProps;
+
+const InteractiveSession = ({ type, options }: Props) => {
+  switch (type) {
+    case "ssh":
+      const params = new URLSearchParams({
+        serverId: options.serverId,
+        token: "token",
+      });
+      return <Terminal wsUrl={BASE_WS_URL + "/ws/ssh?" + params} />;
+
+    default:
+      throw new Error("Unknown interactive session type");
+  }
+
+  return null;
+};
+
+export default InteractiveSession;

frontend/components/containers/xtermjs.tsx

@@ -69,10 +69,13 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
     }
 
     function onOpen() {
+      console.log("WS Open");
       resizeTerminal();
     }
 
     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}`;

frontend/components/ui/pager-view.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import RNPagerView from "react-native-pager-view";
+
+export type PagerViewProps = ComponentPropsWithoutRef<typeof RNPagerView> & {
+  page?: number;
+  onChangePage?: (page: number) => void;
+};
+
+const PagerView = ({ page, onChangePage, ...props }: PagerViewProps) => {
+  const ref = useRef<RNPagerView>(null);
+
+  useEffect(() => {
+    if (page != null) {
+      ref.current?.setPage(page);
+    }
+  }, [page]);
+
+  return (
+    <RNPagerView
+      ref={ref}
+      {...props}
+      onPageSelected={(e) => onChangePage?.(e.nativeEvent.position)}
+    />
+  );
+};
+
+export default PagerView;

frontend/components/ui/pager-view.web.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { View } from "react-native";
+import { PagerViewProps } from "./pager-view";
+
+const PagerView = ({
+  className,
+  children,
+  page,
+  initialPage,
+}: PagerViewProps) => {
+  const [curPage, setPage] = useState<number>(page || initialPage || 0);
+
+  useEffect(() => {
+    if (page != null) {
+      setPage(page);
+    }
+  }, [page]);
+
+  const content = useMemo(() => {
+    if (!Array.isArray(children)) {
+      return null;
+    }
+
+    return children.map((element, index) => {
+      return (
+        <View
+          key={element.key || index}
+          style={{ display: index === curPage ? "flex" : "none", flex: 1 }}
+        >
+          {element}
+        </View>
+      );
+    });
+  }, [curPage, children]);
+
+  return content;
+};
+
+export default PagerView;