feat: add auth, hosts, & keychains ownership

frontend/components/containers/interactive-session.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Terminal from "./terminal";
 import { BASE_WS_URL } from "@/lib/api";
 import VNCViewer from "./vncviewer";
+import { useAuthStore } from "@/stores/auth";
 
 type SSHSessionProps = {
   type: "ssh";
@@ -28,7 +29,8 @@ export type InteractiveSessionProps = {
 } & (SSHSessionProps | PVESessionProps | IncusSessionProps);
 
 const InteractiveSession = ({ type, params }: InteractiveSessionProps) => {
-  const query = new URLSearchParams(params);
+  const { token } = useAuthStore();
+  const query = new URLSearchParams({ ...params, sid: token || "" });
   const url = `${BASE_WS_URL}/ws/term?${query}`;
 
   switch (type) {

frontend/components/containers/theme-switcher.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Button, GetProps } from "tamagui";
+import Icons from "../ui/icons";
+import useThemeStore from "@/stores/theme";
+
+type Props = GetProps<typeof Button> & {
+  iconSize?: number;
+};
+
+const ThemeSwitcher = ({ iconSize = 24, ...props }: Props) => {
+  const { theme, toggle } = useThemeStore();
+
+  return (
+    <Button
+      icon={
+        <Icons
+          name={
+            theme === "light" ? "white-balance-sunny" : "moon-waning-crescent"
+          }
+          size={iconSize}
+        />
+      }
+      onPress={toggle}
+      {...props}
+    />
+  );
+};
+
+export default ThemeSwitcher;

frontend/components/ui/form.tsx

@@ -4,11 +4,21 @@ import { Label, Text, View, XStack } from "tamagui";
 type FormFieldProps = ComponentPropsWithoutRef<typeof XStack> & {
   label?: string;
   htmlFor?: string;
+  vertical?: boolean;
 };
 
-const FormField = ({ label, htmlFor, ...props }: FormFieldProps) => {
+const FormField = ({
+  label,
+  htmlFor,
+  vertical = false,
+  ...props
+}: FormFieldProps) => {
   return (
-    <XStack alignItems="flex-start" {...props}>
+    <XStack
+      flexDirection={vertical ? "column" : "row"}
+      alignItems={vertical ? "stretch" : "flex-start"}
+      {...props}
+    >
       <Label htmlFor={htmlFor} w={120} $xs={{ w: 100 }}>
         {label}
       </Label>