feat(ui): display organization name on home and profile views

Author: gbrlpzz

src/App.tsx

@@ -248,6 +248,9 @@ export default function App() {
         view={state.view}
         onNavigate={navigate}
         userEmail={session?.user.email}
+        organizationName={
+          state.project?.organization || state.projects?.[0]?.organization
+        }
         isPreview={!configured}
         observations={state.observations}
         lastSyncAt={state.lastSyncAt}

src/app/useAppController.ts

@@ -45,6 +45,7 @@ import {
   defaultOrganizationName,
   loadAssignedProjects,
   loadUserAdminAccess,
+  loadUserOrganizationName,
   updateProjectStatus,
 } from "../lib/adminBackend";
 import { downloadUrl } from "../lib/download";
@@ -294,7 +295,7 @@ export function useAppController() {
       }
       if (!active) return;
       setAdminAccess(hasAdminAccess ? "allowed" : "denied");
-      if (remoteProjects.length)
+      if (remoteProjects.length) {
         setState((current) => ({
           ...current,
           projects: remoteProjects,
@@ -303,17 +304,27 @@ export function useAppController() {
               (candidate) => candidate.id === current.project.id,
             ) ?? remoteProjects[0],
         }));
-      else
+      } else {
+        const userOrg = hasAdminAccess
+          ? await loadUserOrganizationName().catch(() => null)
+          : null;
         setState((current) => ({
           ...current,
           projects: [],
           // Confirmed empty assignment: hide the cached project so a
           // revoked contributor cannot keep collecting offline into
-          // ACTION_REQUIRED records.
-          project: emptyProject,
+          // ACTION_REQUIRED records. Keep the organization name for clarity.
+          project: {
+            ...emptyProject,
+            organization:
+              userOrg ??
+              current.project.organization ??
+              defaultOrganizationName,
+          },
           mode: current.mode,
           view: current.mode === "admin" ? "admin" : "home",
         }));
+      }
     };
     // Invites are claimed before the project list loads: an already-registered
     // contributor receives membership only through claim-invites, and the list

src/components/AdminDashboard.tsx

@@ -96,10 +96,15 @@ export function AdminDashboard({
       setAddingAdministrator(false);
     }
   };
+  const organizationName = project.organization || projects[0]?.organization;
+
   return (
     <main className="page page-admin">
       <div className="page-heading admin-heading">
-        <h1>Projects</h1>
+        <div className="page-heading-copy">
+          {organizationName && <Eyebrow>{organizationName}</Eyebrow>}
+          <h1>Projects</h1>
+        </div>
         <div className="primary-action-dock">
           <Button
             variant="primary"

src/components/ContributorHome.tsx

@@ -79,9 +79,12 @@ export function ContributorHome({
   ).length;
   const syncedCount = project?.completeSubmissions ?? 0;
 
+  const organizationName = project?.organization;
+
   return (
     <main className="page page-contributor">
       <div className="page-heading page-heading-home">
+        {organizationName && <Eyebrow>{organizationName}</Eyebrow>}
         <h1>Fieldwork</h1>
       </div>
 

src/components/ProfileSheet.tsx

@@ -14,7 +14,8 @@ import { APP_VERSION, FEEDBACK_URL } from "../lib/appMeta";
 interface ProfileSheetProps {
   userEmail?: string | null;
   profile: ContributorProfile | null;
-  observations: Observation[];
+  organizationName?: string | null;
+  observations?: Observation[];
   lastSyncAt: string | null;
   isAdmin: boolean;
   isPreview: boolean;
@@ -27,6 +28,7 @@ interface ProfileSheetProps {
 export function ProfileSheet({
   userEmail,
   profile,
+  organizationName,
   observations = [],
   lastSyncAt,
   isAdmin,
@@ -36,6 +38,7 @@ export function ProfileSheet({
   onRecoveryExport,
   onSignOut,
 }: ProfileSheetProps) {
+  const profileOrganization = organizationName?.trim();
   const pendingCount = (observations ?? []).filter(
     (observation) => observation.status !== "SYNCED",
   ).length;
@@ -64,6 +67,9 @@ export function ProfileSheet({
           ? "Preview session"
           : (userEmail ?? "Account email unavailable")}
       </p>
+      {profileOrganization && (
+        <p className="profile-organization">{profileOrganization}</p>
+      )}
 
       {!isAdmin && (
         <>

src/components/TopBar.tsx

@@ -10,6 +10,7 @@ interface TopBarProps {
   view: View;
   onNavigate: (view: View) => void;
   userEmail?: string | null;
+  organizationName?: string | null;
   isPreview?: boolean;
   observations?: Observation[];
   lastSyncAt?: string | null;
@@ -25,6 +26,7 @@ export function TopBar({
   view,
   onNavigate,
   userEmail,
+  organizationName,
   isPreview = false,
   observations = [],
   lastSyncAt = null,
@@ -83,6 +85,7 @@ export function TopBar({
         <ProfileSheet
           userEmail={userEmail}
           profile={profile}
+          organizationName={organizationName}
           observations={observations}
           lastSyncAt={lastSyncAt}
           isAdmin={isAdmin}

src/lib/adminBackend.ts

@@ -156,6 +156,24 @@ export async function loadUserAdminAccess(): Promise<boolean> {
   return Boolean(orgAdmin) || Boolean(projectAdmin);
 }
 
+export async function loadUserOrganizationName(): Promise<string | null> {
+  const client = requireClient();
+  const { data: userData, error: userError } = await client.auth.getUser();
+  if (userError || !userData.user) return null;
+  const { data: membership } = await client
+    .from("organization_members")
+    .select("organization_id, organizations(name)")
+    .eq("user_id", userData.user.id)
+    .eq("role", "admin")
+    .limit(1)
+    .maybeSingle();
+  if (membership?.organizations) {
+    const org = membership.organizations as unknown as { name?: string };
+    if (org.name) return org.name;
+  }
+  return null;
+}
+
 export async function createRemoteProject(
   input: NewProjectInput,
 ): Promise<Project> {

src/styles/geometry.css

@@ -2003,14 +2003,22 @@ html[data-keyboard-open="true"] .page-wizard .wizard-actions .button-secondary {
   margin-bottom: var(--space-2);
 }
 .profile-email {
-  margin: 0 0 var(--space-5);
+  margin: 0 0 var(--space-1);
   overflow: hidden;
   color: var(--secondary);
   font-size: var(--type-footnote);
   line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.profile-organization {
+  margin: 0 0 var(--space-5);
+  color: var(--tertiary);
+  font-size: var(--type-caption);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
 .profile-metrics {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));