tweak network settings better hierarchy

js/src/features/network-settings.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { ArrowLeft, Mail, Shield, X } from "lucide-react";
+import { ArrowLeft, CreditCard, Mail, Shield, Users, X } from "lucide-react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
@@ -20,13 +20,7 @@ import { useAuthStore } from "@/stores/auth-store";
 import { BillingSection } from "@/features/network-billing";
 import type { Human } from "@/api/types";
 
-function MemberRow({
+function MemberRow({ human, isAdmin }: { human: Human; isAdmin: boolean }) {
-  human,
-  isAdmin,
-}: {
-  human: Human;
-  isAdmin: boolean;
-}) {
   const initials = human.email_prefix.slice(0, 2).toUpperCase();
 
   return (
@@ -74,7 +68,7 @@ function InviteForm({ networkId }: { networkId: string }) {
     <form onSubmit={handleSubmit} className="flex items-center gap-2 px-4 py-3">
       <Input
         type="email"
-        placeholder="Email address"
+        placeholder="[email protected]"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         className="flex-1"
@@ -112,7 +106,7 @@ function PendingInvitationRow({
 
   return (
     <div className="flex w-full items-center gap-3 px-4 py-3">
-      <span className="text-muted-foreground flex size-10 items-center justify-center">
+      <span className="text-muted-foreground flex size-8 items-center justify-center">
         <Mail className="size-4" />
       </span>
       <div className="min-w-0 flex-1">
@@ -132,33 +126,63 @@ function PendingInvitationRow({
   );
 }
 
-function SettingsGroup({
+function SectionHeader({
+  icon,
   title,
-  children,
+  description,
+  trailing,
 }: {
+  icon: React.ReactNode;
   title: string;
-  children: React.ReactNode;
+  description?: string;
+  trailing?: React.ReactNode;
 }) {
   return (
-    <div>
+    <div className="flex items-start gap-3 px-4 pb-2 pt-6">
-      <p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
+      <span className="text-muted-foreground mt-0.5 flex size-4 items-center justify-center">
-        {title}
+        {icon}
-      </p>
+      </span>
-      <div>{children}</div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-semibold tracking-tight">{title}</h2>
+          {trailing}
+        </div>
+        {description && <Muted className="text-xs">{description}</Muted>}
+      </div>
     </div>
   );
 }
 
+function Section({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="bg-card/40 mx-4 mb-2 overflow-hidden rounded-lg border">
+      {children}
+    </section>
+  );
+}
+
 export default function NetworkSettingsPage() {
   const navigate = useNavigate();
   const { networkId } = useParams<{ networkId: string }>();
+  const [searchParams] = useSearchParams();
   const { data: networks } = useNetworks();
   const network = networks?.find((n) => n.id === networkId);
   const { data: invitations } = useNetworkInvitations(networkId!);
   const currentUser = useAuthStore((s) => s.user);
   const isAdmin = currentUser?.id === network?.admin_human.id;
 
+  const billingRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (searchParams.get("section") === "billing") {
+      billingRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [searchParams]);
+
   const networkName = network?.name ?? "Network";
+  const memberCount = network?.humans.length ?? 0;
+  const pendingCount = invitations?.length ?? 0;
+  const networkInitials = networkName.slice(0, 2).toUpperCase();
 
   return (
     <div className="flex h-screen flex-col">
@@ -172,18 +196,38 @@ export default function NetworkSettingsPage() {
         >
           <ArrowLeft className="size-3.5" />
         </Button>
-        <span className="text-sm font-medium">{networkName}</span>
+        <span className="text-sm font-medium">Settings</span>
         <div className="flex-1" />
       </div>
 
       <ScrollArea className="min-h-0 flex-1">
-        <SettingsGroup title="Billing">
+        <div className="flex items-center gap-3 px-4 pb-4 pt-6">
-          <BillingSection networkId={networkId!} />
+          <Avatar size="lg">
-        </SettingsGroup>
+            <AvatarFallback className="bg-primary/10 text-primary font-medium">
+              {networkInitials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-base font-semibold">{networkName}</p>
+            <Muted className="text-xs">
+              {memberCount} {memberCount === 1 ? "member" : "members"}
+              {isAdmin ? " · You're an admin" : ""}
+            </Muted>
+          </div>
+        </div>
 
-        <Separator className="mt-4" />
+        <Section>
-
+          <SectionHeader
-        <SettingsGroup title="Members">
+            icon={<Users className="size-4" />}
+            title="Members"
+            description="People with access to this network."
+            trailing={
+              <Badge variant="secondary" className="tabular-nums">
+                {memberCount}
+              </Badge>
+            }
+          />
+          <Separator />
           {network?.humans.map((human, index) => (
             <div key={human.id}>
               <MemberRow
@@ -195,39 +239,65 @@ export default function NetworkSettingsPage() {
               )}
             </div>
           ))}
-        </SettingsGroup>
+        </Section>
-
-        <Separator className="mt-4" />
 
         {isAdmin && network && (
-          <>
+          <Section>
-            <SettingsGroup title="Invite">
+            <SectionHeader
-              <InviteForm networkId={networkId!} />
+              icon={<Mail className="size-4" />}
-            </SettingsGroup>
+              title="Invitations"
-
+              description="Invite teammates by email. They'll get a link to join."
-            <Separator className="mt-4" />
+              trailing={
-
+                pendingCount > 0 ? (
-            <SettingsGroup title="Pending Invitations">
+                  <Badge variant="secondary" className="tabular-nums">
-              {invitations && invitations.length > 0 ? (
+                    {pendingCount} pending
-                invitations.map((inv, index) => (
+                  </Badge>
+                ) : undefined
+              }
+            />
+            <Separator />
+            <InviteForm networkId={networkId!} />
+            {pendingCount > 0 && (
+              <>
+                <Separator />
+                <div className="px-4 pb-1 pt-3">
+                  <Muted className="text-xs font-medium uppercase tracking-wider">
+                    Pending
+                  </Muted>
+                </div>
+                {invitations!.map((inv, index) => (
                   <div key={inv.email}>
                     <PendingInvitationRow
                       email={inv.email}
                       networkId={networkId!}
                     />
-                    {index < invitations.length - 1 && (
+                    {index < invitations!.length - 1 && (
                       <Separator className="mx-4" />
                     )}
                   </div>
-                ))
+                ))}
-              ) : (
+              </>
-                <p className="text-muted-foreground px-4 py-3 text-sm">
+            )}
-                  No pending invitations
+          </Section>
-                </p>
-              )}
-            </SettingsGroup>
-          </>
         )}
+
+        <div ref={billingRef}>
+          <Section>
+            <SectionHeader
+              icon={<CreditCard className="size-4" />}
+              title="Billing"
+              description={
+                isAdmin
+                  ? "Manage your plan, seats, and payment."
+                  : "Your network's current plan and usage."
+              }
+            />
+            <Separator />
+            <BillingSection networkId={networkId!} />
+          </Section>
+        </div>
+
+        <div className="h-6" />
       </ScrollArea>
     </div>
   );