feat: team draft

frontend/pages/hosts/components/host-item.tsx

@@ -26,6 +26,7 @@ const HostItem = ({ host, onMultiTap, onTap, onEdit }: HostItemProps) => {
             name={host.os}
             size={18}
             mr="$2"
+            mt="$1"
             fallback="desktop-classic"
           />
 
@@ -39,9 +40,11 @@ const HostItem = ({ host, onMultiTap, onTap, onEdit }: HostItemProps) => {
           {onEdit != null && (
             <Button
               circular
-              display="none"
-              $sm={{ display: "block" }}
-              $group-hover={{ display: "block" }}
+              opacity={0}
+              $sm={{ opacity: 1 }}
+              $group-hover={{ opacity: 1 }}
+              animation="quick"
+              animateOnly={["opacity"]}
               onPress={(e) => {
                 e.stopPropagation();
                 onEdit();

frontend/pages/hosts/components/host-list.tsx

@@ -13,7 +13,7 @@ type HostsListProps = {
   allowEdit?: boolean;
 };
 
-const HostsList = ({ allowEdit = true }: HostsListProps) => {
+const HostList = ({ allowEdit = true }: HostsListProps) => {
   const openSession = useTermSession((i) => i.push);
   const navigation = useNavigation();
   const [search, setSearch] = useState("");
@@ -98,4 +98,4 @@ const HostsList = ({ allowEdit = true }: HostsListProps) => {
   );
 };
 
-export default React.memo(HostsList);
+export default React.memo(HostList);

frontend/pages/hosts/page.tsx

@@ -1,7 +1,7 @@
 import { Button } from "tamagui";
 import React from "react";
 import Drawer from "expo-router/drawer";
-import HostsList from "./components/hosts-list";
+import HostList from "./components/host-list";
 import HostForm, { hostFormModal } from "./components/form";
 import Icons from "@/components/ui/icons";
 import { initialValues } from "./schema/form";
@@ -25,7 +25,7 @@ export default function HostsPage() {
         }}
       />
 
-      <HostsList />
+      <HostList />
       <HostForm />
       <KeyForm />
     </>