feat(orgs): enhance organization management with reload functionality and improved UI

Author: hotlong

apps/studio/src/components/top-bar.tsx

@@ -30,6 +30,7 @@ import { ProjectSwitcher } from '@/components/project-switcher';
 import { OrganizationSwitcher } from '@/components/organization-switcher';
 import { UserMenu } from '@/components/user-menu';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { useActiveOrganizationId } from '@/hooks/useSession';
 
 const META_TYPE_LABELS: Record<string, string> = {
   action: 'Actions',
@@ -74,6 +75,7 @@ function SlashDivider() {
 
 export function TopBar() {
   const location = useLocation();
+  const activeOrgId = useActiveOrganizationId();
   const params = useParams({ strict: false }) as {
     package?: string;
     projectId?: string;
@@ -174,8 +176,12 @@ export function TopBar() {
         <SlashDivider />
         <div className="hidden sm:flex items-center gap-1.5">
           <OrganizationSwitcher />
-          <SlashDivider />
-          <ProjectSwitcher />
+          {activeOrgId && (
+            <>
+              <SlashDivider />
+              <ProjectSwitcher />
+            </>
+          )}
         </div>
         {/* Mobile: Show only current page breadcrumb */}
         <div className="sm:hidden min-w-0 flex-1">

apps/studio/src/hooks/useSession.ts

@@ -54,6 +54,9 @@ export interface SessionState {
   refresh: () => Promise<void>;
   logout: () => Promise<void>;
   setActiveOrganization: (organizationId: string) => Promise<void>;
+  organizations: Organization[];
+  organizationsLoading: boolean;
+  reloadOrganizations: () => Promise<void>;
 }
 
 export interface Organization {
@@ -87,6 +90,21 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   const [session, setSession] = useState<SessionData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [organizationsLoading, setOrganizationsLoading] = useState(false);
+
+  const reloadOrganizations = useCallback(async () => {
+    if (!client?.organizations) return;
+    setOrganizationsLoading(true);
+    try {
+      const result = await client.organizations.list();
+      setOrganizations(result?.organizations ?? []);
+    } catch {
+      setOrganizations([]);
+    } finally {
+      setOrganizationsLoading(false);
+    }
+  }, [client]);
 
   const refresh = useCallback(async () => {
     if (!client?.auth) return;
@@ -110,13 +128,22 @@ export function SessionProvider({ children }: { children: ReactNode }) {
     refresh();
   }, [refresh]);
 
+  useEffect(() => {
+    if (user) {
+      reloadOrganizations();
+    } else {
+      setOrganizations([]);
+    }
+  }, [user, reloadOrganizations]);
+
   const logout = useCallback(async () => {
     if (!client?.auth) return;
     try {
       await client.auth.logout();
     } finally {
       setUser(null);
       setSession(null);
+      setOrganizations([]);
     }
   }, [client]);
 
@@ -130,8 +157,30 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   );
 
   const value = useMemo<SessionState>(
-    () => ({ user, session, loading, error, refresh, logout, setActiveOrganization }),
-    [user, session, loading, error, refresh, logout, setActiveOrganization],
+    () => ({
+      user,
+      session,
+      loading,
+      error,
+      refresh,
+      logout,
+      setActiveOrganization,
+      organizations,
+      organizationsLoading,
+      reloadOrganizations,
+    }),
+    [
+      user,
+      session,
+      loading,
+      error,
+      refresh,
+      logout,
+      setActiveOrganization,
+      organizations,
+      organizationsLoading,
+      reloadOrganizations,
+    ],
   );
 
   return createElement(SessionContext.Provider, { value }, children);
@@ -156,33 +205,19 @@ export function useActiveOrganizationId(): string | undefined {
 
 /**
  * Hook: list every organization the current user belongs to.
+ *
+ * Backed by the shared state in {@link SessionProvider}, so every caller
+ * (top-bar switcher, org list page, new-org redirect) sees the same list
+ * and a single reload refreshes them all.
  */
 export function useOrganizations() {
-  const client = useClient() as any;
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const load = useCallback(async () => {
-    if (!client?.organizations) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await client.organizations.list();
-      setOrganizations(result?.organizations ?? []);
-    } catch (err) {
-      setError(err as Error);
-      setOrganizations([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [client]);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return { organizations, loading, error, reload: load };
+  const { organizations, organizationsLoading, reloadOrganizations } = useSession();
+  return {
+    organizations,
+    loading: organizationsLoading,
+    error: null as Error | null,
+    reload: reloadOrganizations,
+  };
 }
 
 /**

apps/studio/src/routes/orgs.index.tsx

@@ -1,9 +1,10 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
-import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { Building2, Check, Plus } from 'lucide-react';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Building2, Check, Plus, Settings } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
 import { toast } from '@/hooks/use-toast';
 import { useOrganizations, useSession } from '@/hooks/useSession';
 
@@ -12,19 +13,20 @@ export const Route = createFileRoute('/orgs/')({
 });
 
 function OrgsListPage() {
-  const { organizations, loading, reload } = useOrganizations();
+  const { organizations, loading } = useOrganizations();
   const { session, setActiveOrganization } = useSession();
   const navigate = useNavigate();
   const activeId = session?.activeOrganizationId ?? undefined;
 
-  const handleSetActive = async (id: string) => {
+  const handleSelect = async (id: string) => {
     try {
-      await setActiveOrganization(id);
-      await reload();
-      toast({ title: 'Organization switched' });
+      if (id !== activeId) {
+        await setActiveOrganization(id);
+      }
+      navigate({ to: '/projects' });
     } catch (err) {
       toast({
-        title: 'Failed to switch',
+        title: 'Failed to switch organization',
         description: (err as Error).message,
         variant: 'destructive',
       });
@@ -39,58 +41,84 @@ function OrgsListPage() {
             <div>
               <h1 className="text-2xl font-semibold">Organizations</h1>
               <p className="text-sm text-muted-foreground">
-                Manage the organizations you belong to.
+                Select an organization to work with, or create a new one.
               </p>
             </div>
             <Button onClick={() => navigate({ to: '/orgs/new' })}>
               <Plus className="mr-2 h-4 w-4" /> New organization
             </Button>
           </div>
+
           {loading && <p className="text-sm text-muted-foreground">Loading…</p>}
+
           {!loading && organizations.length === 0 && (
-            <Card>
-              <CardContent className="flex flex-col items-center gap-3 py-12 text-center">
-                <Building2 className="h-10 w-10 text-muted-foreground" />
-                <p className="text-sm text-muted-foreground">
-                  You don't belong to any organization yet.
-                </p>
-                <Button onClick={() => navigate({ to: '/orgs/new' })}>
-                  Create your first organization
-                </Button>
-              </CardContent>
+            <Card className="p-10 text-center">
+              <Building2 className="mx-auto mb-3 h-10 w-10 text-muted-foreground" />
+              <h3 className="text-base font-medium">No organizations yet</h3>
+              <p className="mb-4 text-sm text-muted-foreground">
+                Create your first organization to start building.
+              </p>
+              <Button onClick={() => navigate({ to: '/orgs/new' })}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create organization
+              </Button>
             </Card>
           )}
+
           <div className="grid gap-3">
-            {organizations.map((org) => (
-              <Card key={org.id}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <div>
-                    <CardTitle className="text-base">{org.name}</CardTitle>
-                    {org.slug && (
-                      <CardDescription className="font-mono text-xs">{org.slug}</CardDescription>
-                    )}
-                  </div>
-                  {org.id === activeId ? (
-                    <span className="flex items-center gap-1 text-xs text-primary">
-                      <Check className="h-3.5 w-3.5" /> Active
-                    </span>
-                  ) : (
-                    <Button size="sm" variant="outline" onClick={() => handleSetActive(org.id)}>
-                      Set active
+            {organizations.map((org) => {
+              const isActive = org.id === activeId;
+              return (
+                <Card
+                  key={org.id}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => handleSelect(org.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handleSelect(org.id);
+                    }
+                  }}
+                  className={`cursor-pointer p-4 transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring ${
+                    isActive ? 'border-primary ring-1 ring-primary/40' : ''
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <h3 className="truncate text-base font-medium">
+                          {org.name}
+                        </h3>
+                        {isActive && (
+                          <Badge variant="outline" className="gap-1 text-[10px]">
+                            <Check className="h-3 w-3" />
+                            Active
+                          </Badge>
+                        )}
+                      </div>
+                      {org.slug && (
+                        <code className="mt-1 block font-mono text-xs text-muted-foreground">
+                          {org.slug}
+                        </code>
+                      )}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigate({ to: '/orgs/$orgId', params: { orgId: org.id } });
+                      }}
+                      aria-label="Organization settings"
+                    >
+                      <Settings className="h-4 w-4" />
                     </Button>
-                  )}
-                </CardHeader>
-                <CardContent className="pt-0">
-                  <Link
-                    to="/orgs/$orgId"
-                    params={{ orgId: org.id }}
-                    className="text-xs text-primary hover:underline"
-                  >
-                    View details →
-                  </Link>
-                </CardContent>
-              </Card>
-            ))}
+                  </div>
+                </Card>
+              );
+            })}
           </div>
         </div>
       </div>

apps/studio/src/routes/orgs.new.tsx

@@ -25,7 +25,7 @@ function slugify(input: string): string {
 function NewOrgPage() {
   const navigate = useNavigate();
   const { create, creating } = useCreateOrganization();
-  const { setActiveOrganization } = useSession();
+  const { setActiveOrganization, reloadOrganizations } = useSession();
   const [name, setName] = useState('');
   const [slug, setSlug] = useState('');
   const [slugDirty, setSlugDirty] = useState(false);
@@ -45,8 +45,9 @@ function NewOrgPage() {
       if (newId) {
         await setActiveOrganization(newId).catch(() => {});
       }
+      await reloadOrganizations().catch(() => {});
       toast({ title: 'Organization created' });
-      navigate({ to: '/orgs' });
+      navigate({ to: '/projects' });
     } catch (err) {
       toast({
         title: 'Failed to create organization',