chore: cleanup network selector ui

js/src/features/network-selector.tsx

@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -153,7 +154,8 @@ function CreateNetworkDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create Network</DialogTitle>
+          <DialogTitle>Create a Network</DialogTitle>
+          <DialogDescription>Caution: creating a network will create a new billing account. If your team already has a network, ask them for an invite.</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="py-4">
@@ -189,7 +191,7 @@ export default function NetworkSelector() {
   const navigate = useNavigate();
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
 
-  const { data: networks, isPending, error } = useNetworks();
+  const { data: networks, isPending, error, refetch } = useNetworks();
   const { data: invitations } = useMyInvitations();
 
   if (isPending) {
@@ -214,10 +216,13 @@ export default function NetworkSelector() {
         <p className="text-muted-foreground">
           You don't have access to any networks yet. Create one or ask your admin for an invite.
         </p>
-        <Button onClick={() => setCreateDialogOpen(true)}>
-          <Plus className="mr-1 size-3.5" />
-          Create Network
-        </Button>
+        <div className="flex flex-row gap-1">
+          <Button variant="outline" onClick={() => refetch()}>Refresh</Button>
+          <Button onClick={() => setCreateDialogOpen(true)}>
+            <Plus className="mr-1 size-3.5" />
+            Create Network
+          </Button>
+        </div>
         <CreateNetworkDialog
           open={createDialogOpen}
           onOpenChange={setCreateDialogOpen}
@@ -281,7 +286,6 @@ export default function NetworkSelector() {
             <Button
               variant="outline"
               size="sm"
-              className="w-full"
               onClick={() => setCreateDialogOpen(true)}
             >
               <Plus className="mr-1 size-3.5" />