feat: sticky entity header with name, avatar and vote controls

apps/web/app/entry.tsx

@@ -26,6 +26,7 @@ import { MobileBrowseDrawer } from '~/partials/browse-sidebar/mobile-browse-draw
 import { EntityCommentsPanelHost } from '~/partials/comments/entity-comments-panel-host';
 import { CreateSpaceDialog } from '~/partials/create-space/create-space-dialog';
 import { EntitySidePanel } from '~/partials/entity-page/entity-side-panel';
+import { EntityStickyHeaderHost } from '~/partials/entity-page/entity-sticky-header-host';
 import { PersonalProfileCreatePostSidePanelSync } from '~/partials/entity-page/personal-profile-create-post-side-panel-sync';
 import { FeatureFlagsDialog } from '~/partials/feature-flags/feature-flags-dialog';
 import { GovernanceReopenEditLoadingBar } from '~/partials/governance/governance-reopen-edit-loading-bar';
@@ -151,6 +152,11 @@ export function App({ children }: { children: React.ReactNode }) {
             triggerRef={mobileBrowseButtonRef}
           />
           <SearchDialog open={open} onDone={() => setOpen(false)} />
+          {/* Directly under the navbar and above the page: a zero-height dock the entity route
+              portals its sticky header into. See `EntityStickyHeaderHost`. The collapsed sidebar
+              leaves a vertical rail across this column with nothing holding the space — the same
+              condition that draws it below. */}
+          <EntityStickyHeaderHost railInset={!sidebarOpen && !fullscreenActive} />
           <div className="min-w-0 flex-1 2xl:px-[2ch]">
             <Main>{children}</Main>
           </div>

apps/web/app/space/(entity)/[id]/[entityId]/layout.tsx

@@ -26,6 +26,7 @@ import { EntityPageContentContainer } from '~/partials/entity-page/entity-page-c
 import { EntityPageCover } from '~/partials/entity-page/entity-page-cover';
 import { EntityPageInlineDescription } from '~/partials/entity-page/entity-page-inline-description';
 import { EntityPageMetadataHeader } from '~/partials/entity-page/entity-page-metadata-header';
+import { EntityStickyHeader } from '~/partials/entity-page/entity-sticky-header';
 import { EntityTabs } from '~/partials/entity-page/entity-tabs';
 import { PersonalProfileSuggestedCard } from '~/partials/entity-page/personal-profile-suggested-card';
 import { PersonalProfileSuggestedTaskSync } from '~/partials/entity-page/personal-profile-suggested-task-sync';
@@ -80,14 +81,25 @@ export default async function ProfileLayout(props: Props) {
   const result = await cachedFetchEntityPage(entityId, spaceId);
   const entityTypes = result?.entity?.types ?? [];
 
+  // Mounted here rather than per page: every entity surface below this — the generic page, a
+  // claim, a topic, a profile, and each of the type-owned record tabs — hangs off this one layout,
+  // and the bar has no business being drawn four times with four ideas of what it shows.
+  const stickyHeader = <EntityStickyHeader entityId={entityId} spaceId={spaceId} />;
+
   if (entityBrowseViewFromTypes(entityTypes) !== 'person') {
-    return <>{children}</>;
+    return (
+      <>
+        {stickyHeader}
+        {children}
+      </>
+    );
   }
 
   const profile = await getProfilePage(entityId, spaceId);
 
   return (
     <EntityStoreProvider id={entityId} spaceId={spaceId}>
+      {stickyHeader}
       <RouteEditorProvider
         id={profile.id}
         spaceId={spaceId}

apps/web/app/space/(entity)/[id]/[entityId]/profile-layout.test.tsx

@@ -25,6 +25,7 @@ const mocks = vi.hoisted(() => ({
   heading: null as Record<string, unknown> | null,
   storeProvider: null as Record<string, unknown> | null,
   metadataHeader: null as Record<string, unknown> | null,
+  stickyHeader: null as Record<string, unknown> | null,
   entityTypes: [] as { id: string }[],
 }));
 
@@ -83,6 +84,16 @@ vi.mock('~/partials/entity-page/entity-page-metadata-header', () => ({
   },
 }));
 
+// Stubbed like every other child here: the real one reads the sync engine, which this suite mounts
+// no provider for. Its props are captured because they are this file's subject — the header votes
+// on and names an entity, so it has to be handed the route's id like the actions and the title.
+vi.mock('~/partials/entity-page/entity-sticky-header', () => ({
+  EntityStickyHeader: (props: Record<string, unknown>) => {
+    mocks.stickyHeader = props;
+    return <div data-testid="sticky-header" />;
+  },
+}));
+
 vi.mock('~/partials/entity-page/entity-page-cover', () => ({ EntityPageCover: () => null }));
 vi.mock('~/partials/entity-page/entity-page-content-container', () => ({
   EntityPageContentContainer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -104,6 +115,7 @@ beforeEach(() => {
   mocks.heading = null;
   mocks.storeProvider = null;
   mocks.metadataHeader = null;
+  mocks.stickyHeader = null;
 });
 
 afterEach(cleanup);
@@ -145,6 +157,8 @@ describe('profile ProfileLayout', () => {
     // The metadata header takes its id from the store rather than a prop, so pinning the provider
     // above is what covers it — the space it scopes by is the one assertable here.
     expect(mocks.metadataHeader).toMatchObject({ spaceId: SPACE_ID });
+    expect(mocks.stickyHeader).toMatchObject({ entityId: ROUTE_ENTITY_ID, spaceId: SPACE_ID });
+    expect(mocks.stickyHeader?.entityId).not.toBe(FETCHED_PERSON_ID);
   });
 
   it('does not wrap a mixed Claim and Person entity in the profile shell', async () => {
@@ -155,5 +169,9 @@ describe('profile ProfileLayout', () => {
     expect(view.getByTestId('page')).toBeInTheDocument();
     expect(mocks.storeProvider).toBeNull();
     expect(mocks.actions).toBeNull();
+    // The bar is not part of the profile shell: it belongs to every entity route, so the branch that
+    // draws no shell still draws it.
+    expect(view.getByTestId('sticky-header')).toBeInTheDocument();
+    expect(mocks.stickyHeader).toMatchObject({ entityId: ROUTE_ENTITY_ID, spaceId: SPACE_ID });
   });
 });

apps/web/atoms/index.ts

@@ -18,6 +18,17 @@ export const entitySidePanelAtom = atom<EntitySidePanelTarget | null>(null);
 
 export const entitySidePanelHostElementAtom = atom<HTMLElement | null>(null);
 
+/**
+ * Where the sticky entity header draws itself: a zero-height element docked under the navbar by the
+ * app shell.
+ *
+ * The bar has to span the content column and sit under the navbar, and the entity route that knows
+ * *which* entity is on screen renders deep inside a width-capped, transform-animated `<main>` —
+ * neither a full-bleed `sticky` nor a `fixed` element behaves there. Registering a host once in the
+ * shell and portalling into it keeps the positioning in the one place that can express it.
+ */
+export const entityStickyHeaderHostElementAtom = atom<HTMLElement | null>(null);
+
 /**
  * The comments panel's own element, for the same reason the side panel registers one: a slide-up
  * locks scrolling everywhere but its own subtree, and a panel portalled to the body is outside it.

apps/web/core/claims/browse/claim-page-view.tsx

@@ -34,6 +34,7 @@ import { Text } from '~/design-system/text';
 import { CommentSection } from '~/partials/comments/comments-section';
 import { Editor } from '~/partials/editor/editor';
 import { EditableHeading } from '~/partials/entity-page/editable-entity-header';
+import { ENTITY_PAGE_CONTENT_ANCHOR, entityPageTitleAnchor } from '~/partials/entity-page/entity-page-anchors';
 import {
   ENTITY_DESCRIPTION_MAX_LINES,
   EntityPageInlineDescription,
@@ -217,6 +218,7 @@ export function ClaimPageView({
   return (
     <div className="@container">
       <div
+        {...ENTITY_PAGE_CONTENT_ANCHOR}
         className={`mx-auto flex w-full flex-col gap-6 py-6 @[560px]:gap-8 @[560px]:py-8 ${CLAIM_PAGE_CONTENT_INSET_CLASS}`}
         style={{ maxWidth: CLAIM_PAGE_CONTENT_MAX_WIDTH }}
       >
@@ -262,7 +264,10 @@ export function ClaimPageView({
                 {isEditing ? (
                   <EditableHeading entityId={entityId} spaceId={spaceId} fallbackName={entity.name ?? entity.id} />
                 ) : (
-                  <h1 className="text-[1.5rem] leading-[1.3] font-semibold tracking-[-0.4px] text-pretty text-text @[560px]:text-[1.75rem]">
+                  <h1
+                    {...entityPageTitleAnchor(entityId)}
+                    className="text-[1.5rem] leading-[1.3] font-semibold tracking-[-0.4px] text-pretty text-text @[560px]:text-[1.75rem]"
+                  >
                     {entity.name ?? entity.id}
                   </h1>
                 )}