feat: team draft

frontend/pages/auth/login.tsx

@@ -13,6 +13,7 @@ import { loginResultSchema, loginSchema } from "./schema";
 import api from "@/lib/api";
 import Icons from "@/components/ui/icons";
 import authStore from "@/stores/auth";
+import tamaguiConfig from "@/tamagui.config";
 
 export default function LoginPage() {
   const form = useZForm(loginSchema);
@@ -42,7 +43,7 @@ export default function LoginPage() {
         options={{
           contentStyle: {
             width: "100%",
-            maxWidth: 600,
+            maxWidth: tamaguiConfig.media.xs.maxWidth,
             marginHorizontal: "auto",
           },
           title: "Login",

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 />
     </>

frontend/pages/keychains/components/input-fields.tsx

@@ -16,7 +16,7 @@ export const UserTypeInputFields = ({ form }: Props) => {
         <InputField f={1} form={form} name="data.username" />
       </FormField>
       <FormField label="Password">
-        <InputField f={1} form={form} name="data.password" />
+        <InputField f={1} form={form} name="data.password" secureTextEntry />
       </FormField>
     </>
   );
@@ -32,7 +32,7 @@ export const PVETypeInputFields = ({ form }: Props) => {
         <SelectField form={form} name="data.realm" items={pveRealms} />
       </FormField>
       <FormField label="Password">
-        <InputField f={1} form={form} name="data.password" />
+        <InputField f={1} form={form} name="data.password" secureTextEntry />
       </FormField>
     </>
   );
@@ -48,7 +48,7 @@ export const RSATypeInputFields = ({ form }: Props) => {
         <TextAreaField rows={7} f={1} form={form} name="data.private" />
       </FormField>
       <FormField label="Passphrase">
-        <InputField f={1} form={form} name="data.passphrase" />
+        <InputField f={1} form={form} name="data.passphrase" secureTextEntry />
       </FormField>
     </>
   );

frontend/pages/server/page.tsx

@@ -12,6 +12,7 @@ import { ofetch } from "ofetch";
 import { z } from "zod";
 import { ErrorAlert } from "@/components/ui/alert";
 import { addServer } from "@/stores/app";
+import tamaguiConfig from "@/tamagui.config";
 
 export default function ServerPage() {
   const form = useZForm(serverSchema);
@@ -41,7 +42,7 @@ export default function ServerPage() {
         options={{
           contentStyle: {
             width: "100%",
-            maxWidth: 600,
+            maxWidth: tamaguiConfig.media.xs.maxWidth,
             marginHorizontal: "auto",
           },
           title: "Vaulterm",

frontend/pages/terminal/page.tsx

@@ -4,7 +4,7 @@ import PagerView from "@/components/ui/pager-view";
 import { useTermSession } from "@/stores/terminal-sessions";
 import { Button, useMedia } from "tamagui";
 import SessionTabs from "./components/session-tabs";
-import HostsList from "../hosts/components/hosts-list";
+import HostList from "../hosts/components/host-list";
 import Drawer from "expo-router/drawer";
 import { router } from "expo-router";
 import Icons from "@/components/ui/icons";
@@ -35,7 +35,7 @@ const TerminalPage = () => {
         style={{ flex: 1 }}
         page={curSession}
         onChangePage={setSession}
-        EmptyComponent={() => <HostsList allowEdit={false} />}
+        EmptyComponent={() => <HostList allowEdit={false} />}
       >
         {sessions.map((session) => (
           <InteractiveSession key={session.id} {...session} />