fix(ui): admin settings loading-loop, real user name, expanded admin nav

SettingsFormCard
- Parent components pass `FIELDS.slice(...)` inline, so the prop reference
  changes on every render. The fetch callback's useCallback re-created
  itself, useEffect re-fired, and loading flicker meant the form never
  rendered. Capture fields in a ref so the callback is stable.

Sidebar
- Show real user name + avatar initial from session/profile, replacing
  the hardcoded "User Name" / "U" placeholder.
- Default the admin-section to expanded so its items are reachable on
  first page load (was collapsed behind a chevron).

Dashboard layout
- Pass {name, email} from the session/profile through to <Sidebar />.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/layout/sidebar.tsx

@@ -40,6 +40,7 @@ import type { Role } from '@/lib/db/schema/users';
 interface SidebarProps {
   portRoles: (UserPortRole & { port: { id: string; slug: string; name: string }; role: Role })[];
   isSuperAdmin?: boolean;
+  user?: { name: string; email: string };
 }
 
 interface NavItem {
@@ -178,6 +179,7 @@ function SidebarContent({
   hasAdminAccess,
   hasMarinaAccess,
   hasResidentialAccess,
+  user,
 }: {
   collapsed: boolean;
   portSlug: string | undefined;
@@ -185,9 +187,10 @@ function SidebarContent({
   hasAdminAccess: boolean;
   hasMarinaAccess: boolean;
   hasResidentialAccess: boolean;
+  user?: SidebarProps['user'];
 }) {
   const pathname = usePathname();
-  const [adminExpanded, setAdminExpanded] = useState(false);
+  const [adminExpanded, setAdminExpanded] = useState(true);
   const sections = buildNavSections(portSlug);
 
   function isActive(href: string, exact?: boolean): boolean {
@@ -285,11 +288,11 @@ function SidebarContent({
             <Avatar className="w-8 h-8 shrink-0">
               <AvatarImage src={undefined} />
               <AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
-                U
+                {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
               </AvatarFallback>
             </Avatar>
             <div className="flex-1 min-w-0">
-              <p className="text-white text-sm font-medium truncate">User Name</p>
+              <p className="text-white text-sm font-medium truncate">{user?.name ?? 'User'}</p>
               <Badge
                 variant="outline"
                 className="text-[10px] px-1.5 py-0 text-[#83aab1] border-[#474e66] mt-0.5"
@@ -304,7 +307,7 @@ function SidebarContent({
   );
 }
 
-export function Sidebar({ portRoles, isSuperAdmin = false }: SidebarProps) {
+export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps) {
   const sidebarCollapsed = useUIStore((s) => s.sidebarCollapsed);
   const toggleSidebar = useUIStore((s) => s.toggleSidebar);
   const currentPortSlug = useUIStore((s) => s.currentPortSlug);
@@ -341,6 +344,7 @@ export function Sidebar({ portRoles, isSuperAdmin = false }: SidebarProps) {
           hasAdminAccess={hasAdminAccess}
           hasMarinaAccess={hasMarinaAccess}
           hasResidentialAccess={hasResidentialAccess}
+          user={user}
         />
 
         {/* Collapse toggle */}