feat: add pve vnc session

frontend/app/index.tsx

@@ -1,13 +1,33 @@
-import { View, Text, ScrollView, Button } from "react-native";
+import { View, ScrollView, Button } from "react-native";
 import React, { useState } from "react";
 import { Stack } from "expo-router";
-import InteractiveSession from "@/components/containers/interactive-session";
+import InteractiveSession, {
+  InteractiveSessionProps,
+} from "@/components/containers/interactive-session";
 import PagerView from "@/components/ui/pager-view";
 
 let nextSession = 1;
 
+type Session = InteractiveSessionProps & { id: string };
+
 const HomePage = () => {
-  const [sessions, setSessions] = useState<string[]>(["1"]);
+  const [sessions, setSessions] = useState<Session[]>([
+    {
+      id: "1",
+      type: "ssh",
+      params: { serverId: "1" },
+    },
+    {
+      id: "2",
+      type: "pve",
+      params: { client: "vnc", serverId: "2" },
+    },
+    {
+      id: "3",
+      type: "pve",
+      params: { client: "xtermjs", serverId: "3" },
+    },
+  ]);
   const [curSession, setSession] = useState(0);
 
   return (
@@ -21,18 +41,18 @@ const HomePage = () => {
       >
         {sessions.map((session, idx) => (
           <View
-            key={session}
+            key={session.id}
             style={{ flexDirection: "row", alignItems: "center" }}
           >
             <Button
-              title={"Session " + session}
+              title={"Session " + session.id}
               color="#222"
               onPress={() => setSession(idx)}
             />
             <Button
               title="X"
               onPress={() => {
-                const newSessions = sessions.filter((s) => s !== session);
+                const newSessions = sessions.filter((s) => s.id !== session.id);
                 setSessions(newSessions);
                 setSession(
                   Math.min(Math.max(curSession, 0), newSessions.length - 1)
@@ -42,23 +62,19 @@ const HomePage = () => {
           </View>
         ))}
 
-        <Button
+        {/* <Button
           title="[ + ]"
           onPress={() => {
             nextSession += 1;
             setSessions([...sessions, nextSession.toString()]);
             setSession(sessions.length);
           }}
-        />
+        /> */}
       </ScrollView>
 
       <PagerView style={{ flex: 1 }} page={curSession}>
         {sessions.map((session) => (
-          <InteractiveSession
-            key={session}
-            type="ssh"
-            options={{ serverId: session }}
-          />
+          <InteractiveSession key={session.id} {...session} />
         ))}
       </PagerView>
     </View>