feat: update ui

frontend/app/hosts/_comp/host-form.tsx

@@ -1,69 +0,0 @@
-import Icons from "@/components/ui/icons";
-import Select, { SelectItem } from "@/components/ui/select";
-import api from "@/lib/api";
-import { useQuery } from "@tanstack/react-query";
-import React from "react";
-import { Button, Input, Label, ScrollView, Text, View, XStack } from "tamagui";
-
-type Props = {};
-
-const typeOptions: SelectItem[] = [
-  { label: "SSH", value: "ssh" },
-  { label: "Proxmox VE", value: "pve" },
-  { label: "Incus", value: "incus" },
-];
-
-const HostForm = (props: Props) => {
-  const keys = useQuery({
-    queryKey: ["keychains"],
-    queryFn: () => api("/keychains"),
-    select: (i) => i.rows,
-  });
-
-  return (
-    <>
-      <ScrollView contentContainerStyle={{ padding: "$4" }}>
-        <Label>Hostname</Label>
-        <Input placeholder="IP or hostname..." />
-
-        <Label>Type</Label>
-        <Select items={typeOptions} />
-
-        <Label>Port</Label>
-        <Input keyboardType="number-pad" placeholder="SSH Port" />
-
-        <Label>Label</Label>
-        <Input placeholder="Label..." />
-
-        <XStack gap="$3" mt="$3" mb="$1">
-          <Label flex={1}>Credentials</Label>
-          <Button size="$3" icon={<Icons size={16} name="plus" />}>
-            Add
-          </Button>
-        </XStack>
-
-        <Select
-          placeholder="Username & Password"
-          items={keys.data?.map((key: any) => ({
-            label: key.label,
-            value: key.id,
-          }))}
-        />
-        <Select
-          mt="$3"
-          placeholder="Private Key"
-          items={keys.data?.map((key: any) => ({
-            label: key.label,
-            value: key.id,
-          }))}
-        />
-      </ScrollView>
-
-      <View p="$4">
-        <Button icon={<Icons name="content-save" size={18} />}>Save</Button>
-      </View>
-    </>
-  );
-};
-
-export default HostForm;

frontend/app/hosts/create.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Stack } from "expo-router";
-import HostForm from "./_comp/host-form";
+import HostForm from "@/pages/hosts/components/form";
 
 export default function CreateHostPage() {
   return (

frontend/app/hosts/edit.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Stack } from "expo-router";
-import HostForm from "./_comp/host-form";
+import HostForm from "@/pages/hosts/components/form";
 
 export default function EditHostPage() {
   return (

frontend/app/hosts/index.tsx

@@ -1,80 +0,0 @@
-import { View, Text, Button, ScrollView, Spinner, Card, XStack } from "tamagui";
-import React from "react";
-import useThemeStore from "@/stores/theme";
-import { useQuery } from "@tanstack/react-query";
-import api from "@/lib/api";
-import { Stack } from "expo-router";
-import Pressable from "@/components/ui/pressable";
-import Icons from "@/components/ui/icons";
-
-export default function Hosts() {
-  const { toggle } = useThemeStore();
-
-  const hosts = useQuery({
-    queryKey: ["hosts"],
-    queryFn: () => api("/hosts"),
-  });
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: "Hosts",
-          headerRight: () => (
-            <Button onPress={() => toggle()} mr="$2">
-              Toggle Theme
-            </Button>
-          ),
-        }}
-      />
-
-      {hosts.isLoading ? (
-        <View alignItems="center" justifyContent="center" flex={1}>
-          <Spinner size="large" />
-          <Text mt="$4">Loading...</Text>
-        </View>
-      ) : (
-        <ScrollView
-          contentContainerStyle={{
-            padding: "$2",
-            flexDirection: "row",
-            flexWrap: "wrap",
-            // gap: "$4",
-          }}
-        >
-          {hosts.data.rows?.map((host: any) => (
-            <Pressable
-              key={host.id}
-              flexBasis="100%"
-              $gtXs={{ flexBasis: "50%" }}
-              $gtSm={{ flexBasis: "33.3%" }}
-              $gtMd={{ flexBasis: "25%" }}
-              $gtLg={{ flexBasis: "20%" }}
-              p="$2"
-              group
-            >
-              <Card elevate bordered p="$4">
-                <XStack>
-                  <View flex={1}>
-                    <Text>{host.label}</Text>
-                    <Text fontSize="$3" mt="$2">
-                      {host.host}
-                    </Text>
-                  </View>
-
-                  <Button
-                    circular
-                    display="none"
-                    $group-hover={{ display: "block" }}
-                  >
-                    <Icons name="pencil" size={16} />
-                  </Button>
-                </XStack>
-              </Card>
-            </Pressable>
-          ))}
-        </ScrollView>
-      )}
-    </>
-  );
-}