From 509ca2c23d0bbabc183bbd5fce4eef57ed3d7d31 Mon Sep 17 00:00:00 2001
From: Juan Mardikian <developermardikian@gmail.com>
Date: Mon, 20 Apr 2026 11:33:41 -0400
Subject: [PATCH 01/14] fix: red dot next to governance tab

---
 apps/web/app/api/explore/feed/route.ts        |  1 +
 apps/web/app/explore/page.tsx                 |  1 +
 .../core/browse/fetch-browse-sidebar-data.ts  | 63 +++++++++++++++++++
 .../browse-sidebar/browse-sidebar.tsx         |  8 ++-
 4 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/api/explore/feed/route.ts b/apps/web/app/api/explore/feed/route.ts
index e25142b797..38a6a86c31 100644
--- a/apps/web/app/api/explore/feed/route.ts
+++ b/apps/web/app/api/explore/feed/route.ts
@@ -68,6 +68,7 @@ export async function GET(request: Request) {
         editorOf: [],
         memberOf: [],
         documentationImage: null,
+        hasPendingVotes: false,
         personalSpaceId: null,
       };
     }
diff --git a/apps/web/app/explore/page.tsx b/apps/web/app/explore/page.tsx
index 59c761f8a2..ae21e31de4 100644
--- a/apps/web/app/explore/page.tsx
+++ b/apps/web/app/explore/page.tsx
@@ -27,6 +27,7 @@ export default async function ExploreRoutePage() {
         editorOf: [],
         memberOf: [],
         documentationImage: null,
+        hasPendingVotes: false,
         personalSpaceId: null,
       };
     }
diff --git a/apps/web/core/browse/fetch-browse-sidebar-data.ts b/apps/web/core/browse/fetch-browse-sidebar-data.ts
index 2043111c52..239c9f89d4 100644
--- a/apps/web/core/browse/fetch-browse-sidebar-data.ts
+++ b/apps/web/core/browse/fetch-browse-sidebar-data.ts
@@ -1,8 +1,10 @@
 import * as Effect from 'effect/Effect';
 import * as Either from 'effect/Either';
+import { Schema } from 'effect';
 
 import { DOCUMENTATION_SPACE_ID, PLACEHOLDER_SPACE_IMAGE } from '~/core/constants';
 import { Environment } from '~/core/environment';
+import { ApiProposalListResponseSchema, encodePathSegment, restFetch } from '~/core/io/rest';
 import { getSpaces, getSpacesWhereMember } from '~/core/io/queries';
 import { graphql } from '~/core/io/subgraph/graphql';
 
@@ -25,10 +27,67 @@ export type BrowseSidebarData = {
   editorOf: BrowseSpaceRow[];
   memberOf: BrowseSpaceRow[];
   documentationImage: string | null;
+  hasPendingVotes: boolean;
   /** Personal space id used for membership/editor GraphQL (same as browse “member space”). */
   personalSpaceId: string | null;
 };
 
+const GOVERNANCE_PROPOSAL_PAGE_SIZE = 100;
+const GOVERNANCE_PROPOSAL_MAX_PAGES = 40;
+
+async function hasPendingVotesInEditorSpaces(memberSpaceId: string, editorSpaceIds: string[]): Promise<boolean> {
+  if (editorSpaceIds.length === 0) return false;
+
+  const config = Environment.getConfig();
+
+  for (const spaceId of editorSpaceIds) {
+    let cursor: string | null = null;
+
+    for (let page = 0; page < GOVERNANCE_PROPOSAL_MAX_PAGES; page++) {
+      const params = new URLSearchParams();
+      params.set('limit', String(GOVERNANCE_PROPOSAL_PAGE_SIZE));
+      params.set('status', 'PROPOSED');
+      params.set('orderBy', 'end_time');
+      params.set('orderDirection', 'desc');
+      params.set('voterId', memberSpaceId);
+      if (cursor) {
+        params.set('cursor', cursor);
+      }
+
+      const path = `/proposals/space/${encodePathSegment(spaceId)}/status?${params.toString()}`;
+
+      const result = await Effect.runPromise(
+        Effect.either(
+          restFetch<unknown>({
+            endpoint: config.api,
+            path,
+          })
+        )
+      );
+
+      if (Either.isLeft(result)) {
+        console.error(`Failed to fetch governance proposals for space ${spaceId}:`, result.left);
+        break;
+      }
+
+      const decoded = Schema.decodeUnknownEither(ApiProposalListResponseSchema)(result.right);
+      if (Either.isLeft(decoded)) {
+        console.error(`Failed to decode governance proposals for space ${spaceId}:`, decoded.left);
+        break;
+      }
+
+      if (decoded.right.proposals.some(proposal => proposal.userVote == null)) {
+        return true;
+      }
+
+      cursor = decoded.right.nextCursor;
+      if (!cursor) break;
+    }
+  }
+
+  return false;
+}
+
 async function fetchSpaceRows(ids: string[]): Promise<Map<string, BrowseSpaceRow>> {
   const unique = [...new Set(ids.filter(Boolean))];
   if (unique.length === 0) return new Map();
@@ -139,6 +198,7 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
       editorOf: [],
       memberOf: [],
       documentationImage: featuredOnly.get(DOCUMENTATION_SPACE_ID)?.image ?? null,
+      hasPendingVotes: false,
       personalSpaceId: null,
     };
   }
@@ -227,11 +287,14 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
     })
   );
 
+  const hasPendingVotes = await hasPendingVotesInEditorSpaces(memberSpaceId, editorIds);
+
   return {
     featured,
     editorOf,
     memberOf,
     documentationImage: rows.get(DOCUMENTATION_SPACE_ID)?.image ?? null,
+    hasPendingVotes,
     personalSpaceId: memberSpaceId,
   };
 }
diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index e12e803860..381114dcb5 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -59,9 +59,11 @@ function BrowseNavIcon({ src }: { src: string }) {
 function BrowseNavPrimaryLinks({
   personalSpaceId,
   documentationImage,
+  hasPendingVotes,
 }: {
   personalSpaceId: string | null;
   documentationImage: string | null;
+  hasPendingVotes: boolean;
 }) {
   const { smartAccount } = useSmartAccount();
   const address = smartAccount?.account.address;
@@ -87,7 +89,10 @@ function BrowseNavPrimaryLinks({
       ) : null}
       <Link href={NavUtils.toHome()} className={navLinkClass}>
         <BrowseNavIcon src={BROWSE_NAV_ICON.governance} />
-        <span>Governance</span>
+        <span className="flex items-center gap-2">
+          <span>Governance</span>
+          {hasPendingVotes ? <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-01" aria-hidden="true" /> : null}
+        </span>
       </Link>
       <Link
         href={NavUtils.toEntity(DOCUMENTATION_SPACE_ID, DOCUMENTATION_SPACE_ENTITY_ID)}
@@ -242,6 +247,7 @@ export function BrowseSidebar() {
           <BrowseNavPrimaryLinks
             personalSpaceId={personalSpaceId}
             documentationImage={data?.documentationImage ?? null}
+            hasPendingVotes={data?.hasPendingVotes ?? false}
           />
         </nav>
 

From 6cbcb7368e4f3383682be71b80e6529aca30dee8 Mon Sep 17 00:00:00 2001
From: Juan Mardikian <developermardikian@gmail.com>
Date: Mon, 20 Apr 2026 17:51:26 -0400
Subject: [PATCH 02/14] fix: red dot position issue

---
 apps/web/partials/browse-sidebar/browse-sidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index 381114dcb5..3d399ec3c7 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -87,12 +87,12 @@ function BrowseNavPrimaryLinks({
           <span>Personal space</span>
         </Link>
       ) : null}
-      <Link href={NavUtils.toHome()} className={navLinkClass}>
+      <Link href={NavUtils.toHome()} className={`${navLinkClass} w-full min-w-0`}>
         <BrowseNavIcon src={BROWSE_NAV_ICON.governance} />
-        <span className="flex items-center gap-2">
-          <span>Governance</span>
-          {hasPendingVotes ? <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-01" aria-hidden="true" /> : null}
-        </span>
+        <span className="min-w-0 flex-1 text-left">Governance</span>
+        {hasPendingVotes ? (
+          <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-red-01" aria-hidden="true" />
+        ) : null}
       </Link>
       <Link
         href={NavUtils.toEntity(DOCUMENTATION_SPACE_ID, DOCUMENTATION_SPACE_ENTITY_ID)}

From 0cbbf7581bbee3090633f776462c76a3cd9fd13c Mon Sep 17 00:00:00 2001
From: Juan Mardikian <developermardikian@gmail.com>
Date: Tue, 21 Apr 2026 12:01:06 -0400
Subject: [PATCH 03/14] fix: voted propoal order issue

---
 apps/web/app/home/accept-or-reject-editor.tsx  | 11 +++++++++--
 apps/web/app/home/accept-or-reject-member.tsx  | 11 +++++++++--
 apps/web/app/home/component.tsx                |  3 ++-
 .../app/home/fetch-my-governance-proposals.ts  | 11 ++++++++++-
 apps/web/app/home/pending-proposals-page.tsx   |  7 +++++--
 .../active-proposal/accept-or-reject.tsx       | 11 +++++++++--
 .../partials/browse-sidebar/browse-sidebar.tsx | 16 +++++++++-------
 .../governance/governance-proposals-list.tsx   | 18 ++++++++++++++++--
 8 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/apps/web/app/home/accept-or-reject-editor.tsx b/apps/web/app/home/accept-or-reject-editor.tsx
index a8d491cadb..8620688365 100644
--- a/apps/web/app/home/accept-or-reject-editor.tsx
+++ b/apps/web/app/home/accept-or-reject-editor.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 import { useSmartAccount } from '~/core/hooks/use-smart-account';
 import { useVote } from '~/core/hooks/use-vote';
@@ -30,6 +31,8 @@ export function AcceptOrRejectEditor({
   userVote,
   proposalId,
 }: Props) {
+  const router = useRouter();
+
   const { vote, status: voteStatus } = useVote({
     spaceId,
     proposalId,
@@ -44,14 +47,18 @@ export function AcceptOrRejectEditor({
 
   const { smartAccount } = useSmartAccount();
 
+  const onVoteSuccess = () => {
+    router.refresh();
+  };
+
   const onApprove = () => {
     setHasApproved(true);
-    vote('ACCEPT');
+    vote('ACCEPT', { onSuccess: onVoteSuccess });
   };
 
   const onReject = () => {
     setHasRejected(true);
-    vote('REJECT');
+    vote('REJECT', { onSuccess: onVoteSuccess });
   };
 
   // Terminal / post-vote states on the proposal must win over "You accepted" so we match space
diff --git a/apps/web/app/home/accept-or-reject-member.tsx b/apps/web/app/home/accept-or-reject-member.tsx
index 4597b2f4fb..38a9420bee 100644
--- a/apps/web/app/home/accept-or-reject-member.tsx
+++ b/apps/web/app/home/accept-or-reject-member.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, type ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
 
 import cx from 'classnames';
 
@@ -65,6 +66,8 @@ export function AcceptOrRejectMember({
 }: Props) {
   const [selectedVote, setSelectedVote] = useState<'ACCEPT' | 'REJECT' | null>(null);
 
+  const router = useRouter();
+
   const { vote, status: voteStatus } = useVote({
     spaceId,
     proposalId,
@@ -77,14 +80,18 @@ export function AcceptOrRejectMember({
 
   const { smartAccount } = useSmartAccount();
 
+  const onVoteSuccess = () => {
+    router.refresh();
+  };
+
   const onApprove = () => {
     setSelectedVote('ACCEPT');
-    vote('ACCEPT');
+    vote('ACCEPT', { onSuccess: onVoteSuccess });
   };
 
   const onReject = () => {
     setSelectedVote('REJECT');
-    vote('REJECT');
+    vote('REJECT', { onSuccess: onVoteSuccess });
   };
 
   const { hours, minutes } = getProposalTimeRemaining(endTime);
diff --git a/apps/web/app/home/component.tsx b/apps/web/app/home/component.tsx
index b3baa8feaa..990d8fa5fe 100644
--- a/apps/web/app/home/component.tsx
+++ b/apps/web/app/home/component.tsx
@@ -135,7 +135,7 @@ async function PendingProposals({
   connectedSpaceId,
   governanceFilters,
 }: PendingProposalsProps) {
-  const { node, hasMore } = await PendingProposalsPage({
+  const { node, hasMore, page0OrderKey } = await PendingProposalsPage({
     connectedSpaceId,
     connectedAddress,
     proposalType,
@@ -152,6 +152,7 @@ async function PendingProposals({
       {node}
       {hasMore && connectedSpaceId && (
         <HomeProposalsInfiniteScroll
+          key={page0OrderKey}
           connectedSpaceId={connectedSpaceId}
           connectedAddress={connectedAddress}
           proposalType={proposalType}
diff --git a/apps/web/app/home/fetch-my-governance-proposals.ts b/apps/web/app/home/fetch-my-governance-proposals.ts
index 51a3ffb231..b73c343ae8 100644
--- a/apps/web/app/home/fetch-my-governance-proposals.ts
+++ b/apps/web/app/home/fetch-my-governance-proposals.ts
@@ -92,8 +92,17 @@ export async function getMyGovernanceProposals(opts: {
 
   const votingRows =
     status === 'pending' ? allRows.filter(p => p.status === 'PROPOSED') : allRows;
-  votingRows.sort((a, b) => b.timing.endTime - a.timing.endTime);
   const unique = dedupeByProposalId(votingRows);
+  if (status === 'pending') {
+    unique.sort((a, b) => {
+      const aVoted = a.userVote != null;
+      const bVoted = b.userVote != null;
+      if (aVoted !== bVoted) return aVoted ? 1 : -1;
+      return b.timing.endTime - a.timing.endTime;
+    });
+  } else {
+    unique.sort((a, b) => b.timing.endTime - a.timing.endTime);
+  }
   const offset = page * PAGE_SIZE;
   const pageSlice = unique.slice(offset, offset + PAGE_SIZE);
 
diff --git a/apps/web/app/home/pending-proposals-page.tsx b/apps/web/app/home/pending-proposals-page.tsx
index f084aba14a..2b325ac937 100644
--- a/apps/web/app/home/pending-proposals-page.tsx
+++ b/apps/web/app/home/pending-proposals-page.tsx
@@ -52,14 +52,16 @@ export async function PendingProposalsPage({
   proposalType,
   page = 0,
   governanceFilters,
-}: Props): Promise<{ node: React.ReactNode; hasMore: boolean }> {
+}: Props): Promise<{ node: React.ReactNode; hasMore: boolean; page0OrderKey: string }> {
   const [activeProposals, profile] = await Promise.all([
     getActiveProposalsForSpacesWhereEditor(connectedSpaceId, proposalType, page, governanceFilters),
     connectedAddress ? Effect.runPromise(fetchProfile(connectedAddress)) : null,
   ]);
 
+  const page0OrderKey = activeProposals.proposals.map(p => p.id).join('|');
+
   if (activeProposals.proposals.length === 0) {
-    return { node: null, hasMore: false };
+    return { node: null, hasMore: false, page0OrderKey: '' };
   }
 
   const user =
@@ -82,6 +84,7 @@ export async function PendingProposalsPage({
       : undefined;
 
   return {
+    page0OrderKey,
     node: (
       <div className="space-y-2">
         {activeProposals.proposals.map(proposal => {
diff --git a/apps/web/partials/active-proposal/accept-or-reject.tsx b/apps/web/partials/active-proposal/accept-or-reject.tsx
index d8dda4b502..4e08147e64 100644
--- a/apps/web/partials/active-proposal/accept-or-reject.tsx
+++ b/apps/web/partials/active-proposal/accept-or-reject.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 import { useAccessControl } from '~/core/hooks/use-access-control';
 import { useSmartAccount } from '~/core/hooks/use-smart-account';
@@ -35,6 +36,7 @@ export function AcceptOrReject({
   userVote,
   proposalId,
 }: Props) {
+  const router = useRouter();
   const { isEditor } = useAccessControl(spaceId);
   const { vote, status: voteStatus } = useVote({
     spaceId,
@@ -49,14 +51,19 @@ export function AcceptOrReject({
   const isPendingRejection = hasRejected && voteStatus === 'pending';
 
   const { smartAccount } = useSmartAccount();
+
+  const onVoteSuccess = () => {
+    router.refresh();
+  };
+
   const onApprove = () => {
     setHasApproved(true);
-    vote('ACCEPT');
+    vote('ACCEPT', { onSuccess: onVoteSuccess });
   };
 
   const onReject = () => {
     setHasRejected(true);
-    vote('REJECT');
+    vote('REJECT', { onSuccess: onVoteSuccess });
   };
 
   if (isProposalEnded) {
diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index 3d399ec3c7..ab439b9413 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -87,13 +87,15 @@ function BrowseNavPrimaryLinks({
           <span>Personal space</span>
         </Link>
       ) : null}
-      <Link href={NavUtils.toHome()} className={`${navLinkClass} w-full min-w-0`}>
-        <BrowseNavIcon src={BROWSE_NAV_ICON.governance} />
-        <span className="min-w-0 flex-1 text-left">Governance</span>
-        {hasPendingVotes ? (
-          <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-red-01" aria-hidden="true" />
-        ) : null}
-      </Link>
+      {address ? (
+        <Link href={NavUtils.toHome()} className={`${navLinkClass} w-full min-w-0`}>
+          <BrowseNavIcon src={BROWSE_NAV_ICON.governance} />
+          <span className="min-w-0 flex-1 text-left">Governance</span>
+          {hasPendingVotes ? (
+            <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-red-01" aria-hidden="true" />
+          ) : null}
+        </Link>
+      ) : null}
       <Link
         href={NavUtils.toEntity(DOCUMENTATION_SPACE_ID, DOCUMENTATION_SPACE_ENTITY_ID)}
         className={navLinkClass}
diff --git a/apps/web/partials/governance/governance-proposals-list.tsx b/apps/web/partials/governance/governance-proposals-list.tsx
index ea94829e05..e414e16bd1 100644
--- a/apps/web/partials/governance/governance-proposals-list.tsx
+++ b/apps/web/partials/governance/governance-proposals-list.tsx
@@ -45,6 +45,16 @@ const PAGE_SIZE = 100;
 
 const MEMBERSHIP_ACTION_TYPES = new Set(['ADD_MEMBER', 'REMOVE_MEMBER', 'ADD_EDITOR', 'REMOVE_EDITOR']);
 
+/** Unvoted proposals first; voted ones sink to the bottom (same as governance home review). */
+function sortOpenProposalsUnvotedFirstByEndTimeAsc(items: readonly ApiProposalListItem[]): ApiProposalListItem[] {
+  return [...items].sort((a, b) => {
+    const aVoted = a.userVote != null;
+    const bVoted = b.userVote != null;
+    if (aVoted !== bVoted) return aVoted ? 1 : -1;
+    return a.timing.endTime - b.timing.endTime;
+  });
+}
+
 function percentageFromCounts(count: number, total: number): number {
   if (total === 0) return 0;
   return Math.floor((count / total) * 100);
@@ -352,8 +362,12 @@ async function fetchGovernanceProposals({
     }),
   ]);
 
-  // Combine in priority order: executable > active > completed
-  let combinedProposals = [...executableProposals, ...activeProposals, ...completedProposals];
+  // Combine in priority order: executable > active > completed; within open phases, unvoted first.
+  let combinedProposals = [
+    ...sortOpenProposalsUnvotedFirstByEndTimeAsc(executableProposals),
+    ...sortOpenProposalsUnvotedFirstByEndTimeAsc(activeProposals),
+    ...completedProposals,
+  ];
 
   // Filter by proposal type
   if (effectiveType === 'proposals') {

From 1ff7eeac40202dba9fabb736fd7bc0590dd705cb Mon Sep 17 00:00:00 2001
From: Juan Mardikian <developermardikian@gmail.com>
Date: Tue, 21 Apr 2026 13:42:13 -0400
Subject: [PATCH 04/14] fix: missing field issue

---
 apps/web/app/api/activity/feed/route.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/app/api/activity/feed/route.ts b/apps/web/app/api/activity/feed/route.ts
index b099aa1360..2763c8a040 100644
--- a/apps/web/app/api/activity/feed/route.ts
+++ b/apps/web/app/api/activity/feed/route.ts
@@ -53,6 +53,7 @@ export async function GET(request: Request) {
     editorOf: [],
     memberOf: [],
     documentationImage: null,
+    hasPendingVotes: false,
     personalSpaceId: null,
   };
 

From c9515701a484c585cb4c35135bdd8ebae4771f2e Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 12:37:03 -0700
Subject: [PATCH 05/14] refactor: parallelize pending-votes fetch, add sr-only
 label for red dot

Address Copilot review feedback on the governance red-dot indicator:
- Fan out pending-votes lookups across editor spaces (concurrency=4)
  with cooperative early-exit, instead of serial per-space paging.
  Reduces sidebar data-fetch latency for editor-heavy accounts.
- Add a visually-hidden 'Pending votes' label alongside the aria-hidden
  dot so screen-reader users get the same signal as sighted users.
---
 .../core/browse/fetch-browse-sidebar-data.ts  | 117 ++++++++++++------
 .../browse-sidebar/browse-sidebar.tsx         |   5 +-
 2 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/apps/web/core/browse/fetch-browse-sidebar-data.ts b/apps/web/core/browse/fetch-browse-sidebar-data.ts
index 239c9f89d4..2a3ea3357a 100644
--- a/apps/web/core/browse/fetch-browse-sidebar-data.ts
+++ b/apps/web/core/browse/fetch-browse-sidebar-data.ts
@@ -34,58 +34,91 @@ export type BrowseSidebarData = {
 
 const GOVERNANCE_PROPOSAL_PAGE_SIZE = 100;
 const GOVERNANCE_PROPOSAL_MAX_PAGES = 40;
+const GOVERNANCE_PROPOSAL_SPACE_CONCURRENCY = 4;
+
+async function hasPendingVoteInSpace(
+  memberSpaceId: string,
+  spaceId: string,
+  apiEndpoint: string,
+  shouldStop: () => boolean
+): Promise<boolean> {
+  let cursor: string | null = null;
+
+  for (let page = 0; page < GOVERNANCE_PROPOSAL_MAX_PAGES; page++) {
+    if (shouldStop()) return false;
+
+    const params = new URLSearchParams();
+    params.set('limit', String(GOVERNANCE_PROPOSAL_PAGE_SIZE));
+    params.set('status', 'PROPOSED');
+    params.set('orderBy', 'end_time');
+    params.set('orderDirection', 'desc');
+    params.set('voterId', memberSpaceId);
+    if (cursor) {
+      params.set('cursor', cursor);
+    }
 
-async function hasPendingVotesInEditorSpaces(memberSpaceId: string, editorSpaceIds: string[]): Promise<boolean> {
-  if (editorSpaceIds.length === 0) return false;
+    const path = `/proposals/space/${encodePathSegment(spaceId)}/status?${params.toString()}`;
 
-  const config = Environment.getConfig();
+    const result = await Effect.runPromise(
+      Effect.either(
+        restFetch<unknown>({
+          endpoint: apiEndpoint,
+          path,
+        })
+      )
+    );
 
-  for (const spaceId of editorSpaceIds) {
-    let cursor: string | null = null;
+    if (Either.isLeft(result)) {
+      console.error(`Failed to fetch governance proposals for space ${spaceId}:`, result.left);
+      return false;
+    }
 
-    for (let page = 0; page < GOVERNANCE_PROPOSAL_MAX_PAGES; page++) {
-      const params = new URLSearchParams();
-      params.set('limit', String(GOVERNANCE_PROPOSAL_PAGE_SIZE));
-      params.set('status', 'PROPOSED');
-      params.set('orderBy', 'end_time');
-      params.set('orderDirection', 'desc');
-      params.set('voterId', memberSpaceId);
-      if (cursor) {
-        params.set('cursor', cursor);
-      }
+    const decoded = Schema.decodeUnknownEither(ApiProposalListResponseSchema)(result.right);
+    if (Either.isLeft(decoded)) {
+      console.error(`Failed to decode governance proposals for space ${spaceId}:`, decoded.left);
+      return false;
+    }
 
-      const path = `/proposals/space/${encodePathSegment(spaceId)}/status?${params.toString()}`;
+    if (decoded.right.proposals.some(proposal => proposal.userVote == null)) {
+      return true;
+    }
 
-      const result = await Effect.runPromise(
-        Effect.either(
-          restFetch<unknown>({
-            endpoint: config.api,
-            path,
-          })
-        )
-      );
+    cursor = decoded.right.nextCursor;
+    if (!cursor) break;
+  }
 
-      if (Either.isLeft(result)) {
-        console.error(`Failed to fetch governance proposals for space ${spaceId}:`, result.left);
-        break;
-      }
+  return false;
+}
 
-      const decoded = Schema.decodeUnknownEither(ApiProposalListResponseSchema)(result.right);
-      if (Either.isLeft(decoded)) {
-        console.error(`Failed to decode governance proposals for space ${spaceId}:`, decoded.left);
-        break;
-      }
+async function hasPendingVotesInEditorSpaces(memberSpaceId: string, editorSpaceIds: string[]): Promise<boolean> {
+  if (editorSpaceIds.length === 0) return false;
 
-      if (decoded.right.proposals.some(proposal => proposal.userVote == null)) {
-        return true;
+  const apiEndpoint = Environment.getConfig().api;
+  const concurrency = Math.min(GOVERNANCE_PROPOSAL_SPACE_CONCURRENCY, editorSpaceIds.length);
+  let nextIndex = 0;
+  let foundPendingVote = false;
+
+  const worker = async () => {
+    while (!foundPendingVote) {
+      const currentIndex = nextIndex++;
+      if (currentIndex >= editorSpaceIds.length) return;
+
+      const result = await hasPendingVoteInSpace(
+        memberSpaceId,
+        editorSpaceIds[currentIndex],
+        apiEndpoint,
+        () => foundPendingVote
+      );
+      if (result) {
+        foundPendingVote = true;
+        return;
       }
-
-      cursor = decoded.right.nextCursor;
-      if (!cursor) break;
     }
-  }
+  };
 
-  return false;
+  await Promise.all(Array.from({ length: concurrency }, () => worker()));
+
+  return foundPendingVote;
 }
 
 async function fetchSpaceRows(ids: string[]): Promise<Map<string, BrowseSpaceRow>> {
@@ -218,6 +251,8 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
     ),
   ]);
 
+  const pendingVotesPromise = hasPendingVotesInEditorSpaces(memberSpaceId, editorIds);
+
   const editorIdSet = new Set(editorIds);
   const pendingMemberIds = new Set<string>();
   const pendingEditorIds = new Set<string>();
@@ -287,7 +322,7 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
     })
   );
 
-  const hasPendingVotes = await hasPendingVotesInEditorSpaces(memberSpaceId, editorIds);
+  const hasPendingVotes = await pendingVotesPromise;
 
   return {
     featured,
diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index ab439b9413..f24c7df7d7 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -92,7 +92,10 @@ function BrowseNavPrimaryLinks({
           <BrowseNavIcon src={BROWSE_NAV_ICON.governance} />
           <span className="min-w-0 flex-1 text-left">Governance</span>
           {hasPendingVotes ? (
-            <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-red-01" aria-hidden="true" />
+            <>
+              <span className="sr-only">Pending votes</span>
+              <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-red-01" aria-hidden="true" />
+            </>
           ) : null}
         </Link>
       ) : null}

From d7815ca365b5fb0f0cfb6d3a844402ea299edcab Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 12:37:37 -0700
Subject: [PATCH 06/14] feat: optimistically reorder voted proposal to bottom
 of list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After a vote transaction submits successfully, the list used to wait for
router.refresh() plus backend indexing before the voted proposal sank
to the bottom of its bucket — a visible multi-second delay.

Track optimistically-voted proposal ids in a jotai atom, written from
the AcceptOrReject success callback. Each list item is wrapped in a
client component that applies a CSS 'order' bump (+5000) within its
bucket when optimistically voted. Bucket base offsets (0/10000/20000)
guarantee the bump cannot overshoot into the next bucket.

When router.refresh() eventually returns fresh data with userVote set,
the server's own sort already places the item in the same spot, so the
optimistic state and server truth agree with no visual jitter.
---
 .../active-proposal/accept-or-reject.tsx      |  3 ++
 .../governance/governance-proposals-list.tsx  | 31 +++++++++++++++++--
 .../governance/optimistic-voted-atom.ts       | 22 +++++++++++++
 .../governance/proposal-list-item.tsx         | 20 ++++++++++++
 4 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/partials/governance/optimistic-voted-atom.ts
 create mode 100644 apps/web/partials/governance/proposal-list-item.tsx

diff --git a/apps/web/partials/active-proposal/accept-or-reject.tsx b/apps/web/partials/active-proposal/accept-or-reject.tsx
index 4e08147e64..325f9462cb 100644
--- a/apps/web/partials/active-proposal/accept-or-reject.tsx
+++ b/apps/web/partials/active-proposal/accept-or-reject.tsx
@@ -12,6 +12,7 @@ import { SubstreamVote } from '~/core/io/substream-schema';
 
 import { Button } from '~/design-system/button';
 import { Pending } from '~/design-system/pending';
+import { useAddOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 import { GovernanceReopenEditButton } from '~/partials/governance/governance-reopen-edit-button';
 
 import { Execute } from './execute';
@@ -51,8 +52,10 @@ export function AcceptOrReject({
   const isPendingRejection = hasRejected && voteStatus === 'pending';
 
   const { smartAccount } = useSmartAccount();
+  const addOptimisticVote = useAddOptimisticVote();
 
   const onVoteSuccess = () => {
+    addOptimisticVote(proposalId);
     router.refresh();
   };
 
diff --git a/apps/web/partials/governance/governance-proposals-list.tsx b/apps/web/partials/governance/governance-proposals-list.tsx
index e414e16bd1..7d8c7eae8a 100644
--- a/apps/web/partials/governance/governance-proposals-list.tsx
+++ b/apps/web/partials/governance/governance-proposals-list.tsx
@@ -39,8 +39,16 @@ import type { GovernanceProposalType } from './governance-proposal-type-filter';
 import { GovernanceProposalVoteState } from './governance-proposal-vote-state';
 import { GovernanceRejectedProposalMenu } from './governance-rejected-proposal-menu';
 import { GovernanceStatusChip } from './governance-status-chip';
+import { ProposalListItem } from './proposal-list-item';
 import { cachedFetchSpace } from '~/app/space/[id]/cached-fetch-space';
 
+type ProposalBucket = 'executable' | 'active' | 'completed';
+const BUCKET_BASE_ORDER: Record<ProposalBucket, number> = {
+  executable: 0,
+  active: 10000,
+  completed: 20000,
+};
+
 const PAGE_SIZE = 100;
 
 const MEMBERSHIP_ACTION_TYPES = new Set(['ADD_MEMBER', 'REMOVE_MEMBER', 'ADD_EDITOR', 'REMOVE_EDITOR']);
@@ -110,6 +118,8 @@ export async function GovernanceProposalsList({
 
   const spaceName = space?.entity?.name ?? '';
 
+  const bucketPositions: Record<ProposalBucket, number> = { executable: 0, active: 0, completed: 0 };
+
   return {
     node: (
       <div className="flex flex-col divide-y divide-grey-01">
@@ -130,9 +140,16 @@ export async function GovernanceProposalsList({
           const showReopenMenu =
             p.status === 'REJECTED' && p.type === 'ADD_EDIT' && getIsProposalEnded(p.status, p.endTime);
 
+          const baseOrder = BUCKET_BASE_ORDER[p.bucket] + bucketPositions[p.bucket]++;
+
           return (
-            <Link
+            <ProposalListItem
               key={p.id}
+              proposalId={p.id}
+              baseOrder={baseOrder}
+              canSink={p.bucket !== 'completed'}
+            >
+            <Link
               href={`/space/${spaceId}/governance?proposalId=${p.id}`}
               className="flex w-full flex-col gap-3 py-4"
             >
@@ -188,6 +205,7 @@ export async function GovernanceProposalsList({
                 <GovernanceStatusChip endTime={p.endTime} status={p.status} canExecute={p.canExecute} />
               </div>
             </Link>
+            </ProposalListItem>
           );
         })}
       </div>
@@ -218,6 +236,7 @@ type GovernanceProposal = {
   endTime: number;
   status: ProposalStatus;
   canExecute: boolean;
+  bucket: ProposalBucket;
   proposalVotes: {
     totalCount: number;
     yesCount: number;
@@ -228,6 +247,7 @@ type GovernanceProposal = {
 
 function apiProposalToGovernanceDto(
   proposal: ApiProposalListItem,
+  bucket: ProposalBucket,
   maybeProfile?: Profile,
   maybeTargetProfile?: Profile
 ): GovernanceProposal {
@@ -246,6 +266,7 @@ function apiProposalToGovernanceDto(
     endTime: proposal.timing.endTime,
     status: mapProposalStatus(proposal.status),
     canExecute: proposal.canExecute,
+    bucket,
     createdBy: profile,
     targetProfile: maybeTargetProfile,
     userVote: proposal.userVote ? convertVoteOption(proposal.userVote) : undefined,
@@ -257,6 +278,12 @@ function apiProposalToGovernanceDto(
   };
 }
 
+function getProposalBucket(apiStatus: string): ProposalBucket {
+  if (apiStatus === 'EXECUTABLE') return 'executable';
+  if (apiStatus === 'PROPOSED') return 'active';
+  return 'completed';
+}
+
 /**
  * Fetch proposals by status using server-side filtering.
  * Returns proposals filtered and sorted by the API.
@@ -408,7 +435,7 @@ async function fetchGovernanceProposals({
     const maybeProfile = profilesBySpaceId.get(p.proposedBy);
     const targetId = p.actions[0]?.targetId;
     const maybeTargetProfile = targetId ? targetProfilesBySpaceId.get(targetId) : undefined;
-    return apiProposalToGovernanceDto(p, maybeProfile, maybeTargetProfile);
+    return apiProposalToGovernanceDto(p, getProposalBucket(p.status), maybeProfile, maybeTargetProfile);
   });
 
   return { proposals, hasMore };
diff --git a/apps/web/partials/governance/optimistic-voted-atom.ts b/apps/web/partials/governance/optimistic-voted-atom.ts
new file mode 100644
index 0000000000..1e7ccc0313
--- /dev/null
+++ b/apps/web/partials/governance/optimistic-voted-atom.ts
@@ -0,0 +1,22 @@
+'use client';
+
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+const optimisticVotedIdsAtom = atom<Set<string>>(new Set<string>());
+
+export function useAddOptimisticVote() {
+  const setter = useSetAtom(optimisticVotedIdsAtom);
+  return (proposalId: string) => {
+    setter(prev => {
+      if (prev.has(proposalId)) return prev;
+      const next = new Set(prev);
+      next.add(proposalId);
+      return next;
+    });
+  };
+}
+
+export function useIsOptimisticallyVoted(proposalId: string): boolean {
+  const set = useAtomValue(optimisticVotedIdsAtom);
+  return set.has(proposalId);
+}
diff --git a/apps/web/partials/governance/proposal-list-item.tsx b/apps/web/partials/governance/proposal-list-item.tsx
new file mode 100644
index 0000000000..41612e4bef
--- /dev/null
+++ b/apps/web/partials/governance/proposal-list-item.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+
+import { useIsOptimisticallyVoted } from './optimistic-voted-atom';
+
+interface Props {
+  proposalId: string;
+  baseOrder: number;
+  canSink: boolean;
+  children: React.ReactNode;
+}
+
+const OPTIMISTIC_VOTE_ORDER_BUMP = 5000;
+
+export function ProposalListItem({ proposalId, baseOrder, canSink, children }: Props) {
+  const isOptimistic = useIsOptimisticallyVoted(proposalId);
+  const order = isOptimistic && canSink ? baseOrder + OPTIMISTIC_VOTE_ORDER_BUMP : baseOrder;
+  return <div style={{ order }}>{children}</div>;
+}

From 6ad6e7d9e8e71cc7cabb90fb4256596e9b8c1510 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 13:23:14 -0700
Subject: [PATCH 07/14] fix: make vote reorder instant by firing optimistic
 update on click

Previously the optimistic vote fired in the mutation's onSuccess, which
still waits for the wallet transaction to submit. Fire it at click time
instead so the card sinks to the bottom immediately, and roll back in
onError if the transaction fails.
---
 .../active-proposal/accept-or-reject.tsx         | 14 ++++++++++----
 .../partials/governance/optimistic-voted-atom.ts | 16 ++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/web/partials/active-proposal/accept-or-reject.tsx b/apps/web/partials/active-proposal/accept-or-reject.tsx
index 325f9462cb..0e96f25a30 100644
--- a/apps/web/partials/active-proposal/accept-or-reject.tsx
+++ b/apps/web/partials/active-proposal/accept-or-reject.tsx
@@ -12,7 +12,7 @@ import { SubstreamVote } from '~/core/io/substream-schema';
 
 import { Button } from '~/design-system/button';
 import { Pending } from '~/design-system/pending';
-import { useAddOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
+import { useAddOptimisticVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 import { GovernanceReopenEditButton } from '~/partials/governance/governance-reopen-edit-button';
 
 import { Execute } from './execute';
@@ -53,20 +53,26 @@ export function AcceptOrReject({
 
   const { smartAccount } = useSmartAccount();
   const addOptimisticVote = useAddOptimisticVote();
+  const removeOptimisticVote = useRemoveOptimisticVote();
 
   const onVoteSuccess = () => {
-    addOptimisticVote(proposalId);
     router.refresh();
   };
 
+  const onVoteError = () => {
+    removeOptimisticVote(proposalId);
+  };
+
   const onApprove = () => {
     setHasApproved(true);
-    vote('ACCEPT', { onSuccess: onVoteSuccess });
+    addOptimisticVote(proposalId);
+    vote('ACCEPT', { onSuccess: onVoteSuccess, onError: onVoteError });
   };
 
   const onReject = () => {
     setHasRejected(true);
-    vote('REJECT', { onSuccess: onVoteSuccess });
+    addOptimisticVote(proposalId);
+    vote('REJECT', { onSuccess: onVoteSuccess, onError: onVoteError });
   };
 
   if (isProposalEnded) {
diff --git a/apps/web/partials/governance/optimistic-voted-atom.ts b/apps/web/partials/governance/optimistic-voted-atom.ts
index 1e7ccc0313..d4eeca8bf2 100644
--- a/apps/web/partials/governance/optimistic-voted-atom.ts
+++ b/apps/web/partials/governance/optimistic-voted-atom.ts
@@ -16,7 +16,23 @@ export function useAddOptimisticVote() {
   };
 }
 
+export function useRemoveOptimisticVote() {
+  const setter = useSetAtom(optimisticVotedIdsAtom);
+  return (proposalId: string) => {
+    setter(prev => {
+      if (!prev.has(proposalId)) return prev;
+      const next = new Set(prev);
+      next.delete(proposalId);
+      return next;
+    });
+  };
+}
+
 export function useIsOptimisticallyVoted(proposalId: string): boolean {
   const set = useAtomValue(optimisticVotedIdsAtom);
   return set.has(proposalId);
 }
+
+export function useOptimisticallyVotedIds(): Set<string> {
+  return useAtomValue(optimisticVotedIdsAtom);
+}

From 1edf138b0025139a4a59b274a42b316b387211a0 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 13:23:48 -0700
Subject: [PATCH 08/14] fix: clear governance red dot optimistically on last
 pending vote

The red dot's server-computed hasPendingVotes boolean waited on
backend indexing, so it stayed visible after the user voted on the
last pending proposal until a full page refresh.

Return the list of pending proposal ids from the sidebar data fetch
instead of a boolean, and compute the dot's visibility client-side by
filtering out ids already present in the optimistic-vote atom. Once
the user votes on every pending proposal the dot disappears instantly;
if a future server refresh brings new pending ids, the dot reappears.
---
 .../core/browse/fetch-browse-sidebar-data.ts  | 58 +++++++++----------
 .../browse-sidebar/browse-sidebar.tsx         | 10 +++-
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/apps/web/core/browse/fetch-browse-sidebar-data.ts b/apps/web/core/browse/fetch-browse-sidebar-data.ts
index 2a3ea3357a..919b6256ad 100644
--- a/apps/web/core/browse/fetch-browse-sidebar-data.ts
+++ b/apps/web/core/browse/fetch-browse-sidebar-data.ts
@@ -27,7 +27,8 @@ export type BrowseSidebarData = {
   editorOf: BrowseSpaceRow[];
   memberOf: BrowseSpaceRow[];
   documentationImage: string | null;
-  hasPendingVotes: boolean;
+  /** Proposal ids the user can still vote on across their editor spaces. Empty when nothing is pending. */
+  pendingVoteProposalIds: string[];
   /** Personal space id used for membership/editor GraphQL (same as browse “member space”). */
   personalSpaceId: string | null;
 };
@@ -36,17 +37,15 @@ const GOVERNANCE_PROPOSAL_PAGE_SIZE = 100;
 const GOVERNANCE_PROPOSAL_MAX_PAGES = 40;
 const GOVERNANCE_PROPOSAL_SPACE_CONCURRENCY = 4;
 
-async function hasPendingVoteInSpace(
+async function collectPendingVoteIdsInSpace(
   memberSpaceId: string,
   spaceId: string,
-  apiEndpoint: string,
-  shouldStop: () => boolean
-): Promise<boolean> {
+  apiEndpoint: string
+): Promise<string[]> {
+  const ids: string[] = [];
   let cursor: string | null = null;
 
   for (let page = 0; page < GOVERNANCE_PROPOSAL_MAX_PAGES; page++) {
-    if (shouldStop()) return false;
-
     const params = new URLSearchParams();
     params.set('limit', String(GOVERNANCE_PROPOSAL_PAGE_SIZE));
     params.set('status', 'PROPOSED');
@@ -70,55 +69,52 @@ async function hasPendingVoteInSpace(
 
     if (Either.isLeft(result)) {
       console.error(`Failed to fetch governance proposals for space ${spaceId}:`, result.left);
-      return false;
+      return ids;
     }
 
     const decoded = Schema.decodeUnknownEither(ApiProposalListResponseSchema)(result.right);
     if (Either.isLeft(decoded)) {
       console.error(`Failed to decode governance proposals for space ${spaceId}:`, decoded.left);
-      return false;
+      return ids;
     }
 
-    if (decoded.right.proposals.some(proposal => proposal.userVote == null)) {
-      return true;
+    for (const proposal of decoded.right.proposals) {
+      if (proposal.userVote == null) {
+        ids.push(proposal.proposalId);
+      }
     }
 
     cursor = decoded.right.nextCursor;
     if (!cursor) break;
   }
 
-  return false;
+  return ids;
 }
 
-async function hasPendingVotesInEditorSpaces(memberSpaceId: string, editorSpaceIds: string[]): Promise<boolean> {
-  if (editorSpaceIds.length === 0) return false;
+async function collectPendingVoteIdsInEditorSpaces(
+  memberSpaceId: string,
+  editorSpaceIds: string[]
+): Promise<string[]> {
+  if (editorSpaceIds.length === 0) return [];
 
   const apiEndpoint = Environment.getConfig().api;
   const concurrency = Math.min(GOVERNANCE_PROPOSAL_SPACE_CONCURRENCY, editorSpaceIds.length);
   let nextIndex = 0;
-  let foundPendingVote = false;
+  const collected: string[] = [];
 
   const worker = async () => {
-    while (!foundPendingVote) {
+    while (true) {
       const currentIndex = nextIndex++;
       if (currentIndex >= editorSpaceIds.length) return;
 
-      const result = await hasPendingVoteInSpace(
-        memberSpaceId,
-        editorSpaceIds[currentIndex],
-        apiEndpoint,
-        () => foundPendingVote
-      );
-      if (result) {
-        foundPendingVote = true;
-        return;
-      }
+      const ids = await collectPendingVoteIdsInSpace(memberSpaceId, editorSpaceIds[currentIndex], apiEndpoint);
+      if (ids.length > 0) collected.push(...ids);
     }
   };
 
   await Promise.all(Array.from({ length: concurrency }, () => worker()));
 
-  return foundPendingVote;
+  return collected;
 }
 
 async function fetchSpaceRows(ids: string[]): Promise<Map<string, BrowseSpaceRow>> {
@@ -231,7 +227,7 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
       editorOf: [],
       memberOf: [],
       documentationImage: featuredOnly.get(DOCUMENTATION_SPACE_ID)?.image ?? null,
-      hasPendingVotes: false,
+      pendingVoteProposalIds: [],
       personalSpaceId: null,
     };
   }
@@ -251,7 +247,7 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
     ),
   ]);
 
-  const pendingVotesPromise = hasPendingVotesInEditorSpaces(memberSpaceId, editorIds);
+  const pendingVoteIdsPromise = collectPendingVoteIdsInEditorSpaces(memberSpaceId, editorIds);
 
   const editorIdSet = new Set(editorIds);
   const pendingMemberIds = new Set<string>();
@@ -322,14 +318,14 @@ export async function fetchBrowseSidebarData(memberSpaceId: string | null | unde
     })
   );
 
-  const hasPendingVotes = await pendingVotesPromise;
+  const pendingVoteProposalIds = await pendingVoteIdsPromise;
 
   return {
     featured,
     editorOf,
     memberOf,
     documentationImage: rows.get(DOCUMENTATION_SPACE_ID)?.image ?? null,
-    hasPendingVotes,
+    pendingVoteProposalIds,
     personalSpaceId: memberSpaceId,
   };
 }
diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index f24c7df7d7..e904d1ed0f 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -20,6 +20,8 @@ import { ChevronRight } from '~/design-system/icons/chevron-right';
 import { ThumbGeoImage } from '~/design-system/geo-image';
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 
+import { useOptimisticallyVotedIds } from '~/partials/governance/optimistic-voted-atom';
+
 import { loadBrowseSidebarData } from './load-browse-sidebar-data';
 
 /** Open on first visit; after the user toggles, `browseSidebarOpen` in localStorage wins. */
@@ -59,15 +61,17 @@ function BrowseNavIcon({ src }: { src: string }) {
 function BrowseNavPrimaryLinks({
   personalSpaceId,
   documentationImage,
-  hasPendingVotes,
+  pendingVoteProposalIds,
 }: {
   personalSpaceId: string | null;
   documentationImage: string | null;
-  hasPendingVotes: boolean;
+  pendingVoteProposalIds: string[];
 }) {
   const { smartAccount } = useSmartAccount();
   const address = smartAccount?.account.address;
   const { profile } = useGeoProfile(address);
+  const optimisticVotedIds = useOptimisticallyVotedIds();
+  const hasPendingVotes = pendingVoteProposalIds.some(id => !optimisticVotedIds.has(id));
 
   return (
     <>
@@ -252,7 +256,7 @@ export function BrowseSidebar() {
           <BrowseNavPrimaryLinks
             personalSpaceId={personalSpaceId}
             documentationImage={data?.documentationImage ?? null}
-            hasPendingVotes={data?.hasPendingVotes ?? false}
+            pendingVoteProposalIds={data?.pendingVoteProposalIds ?? []}
           />
         </nav>
 

From 9e24a0b6b036f5c148f65cfb6daf26257f9303ee Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 13:24:43 -0700
Subject: [PATCH 09/14] =?UTF-8?q?fix:=20governance=20home=20dropdowns=20?=
 =?UTF-8?q?=E2=80=94=20optimistic=20label=20and=20no=20click=20outline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The GovernanceFilterMenu trigger showed the URL-derived label, so
after clicking an item the trigger kept the old value for 3-4s while
the server refetched. Track a local pendingLabel, override the trigger
immediately on click, and clear it once the server-derived label
catches up.

Also switch secondary/ghost/transparent/primary button focus styles
from focus: to focus-visible: so the thick inset border only appears
on keyboard focus — a mouse click on a dropdown trigger no longer
paints a lingering bold outline.
---
 apps/web/app/home/personal-home-dashboard.tsx | 19 +++++++++++++++++--
 apps/web/design-system/button.tsx             |  8 ++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/home/personal-home-dashboard.tsx b/apps/web/app/home/personal-home-dashboard.tsx
index 37a21ffc34..8ec00330be 100644
--- a/apps/web/app/home/personal-home-dashboard.tsx
+++ b/apps/web/app/home/personal-home-dashboard.tsx
@@ -227,12 +227,24 @@ function GovernanceFilterMenu({
   maxHeightClass?: string;
 }) {
   const [open, setOpen] = React.useState(false);
+  const [pendingLabel, setPendingLabel] = React.useState<string | null>(null);
+  const prevLabelRef = React.useRef(label);
+
+  React.useEffect(() => {
+    if (prevLabelRef.current !== label) {
+      prevLabelRef.current = label;
+      setPendingLabel(null);
+    }
+  }, [label]);
+
+  const displayLabel = pendingLabel ?? label;
+
   return (
     <Menu
       open={open}
       onOpenChange={setOpen}
       asChild
-      trigger={<SmallButton icon={<ChevronDownSmall />}>{label}</SmallButton>}
+      trigger={<SmallButton icon={<ChevronDownSmall />}>{displayLabel}</SmallButton>}
       align="start"
     >
       <div className={maxHeightClass}>
@@ -240,7 +252,10 @@ function GovernanceFilterMenu({
           <Link
             key={item.href}
             href={item.href}
-            onClick={() => setOpen(false)}
+            onClick={() => {
+              if (item.label !== label) setPendingLabel(item.label);
+              setOpen(false);
+            }}
             className="flex w-full cursor-pointer items-center gap-2 bg-white px-3 py-2.5 hover:bg-bg"
           >
             {showImages && item.showImage !== false ? (
diff --git a/apps/web/design-system/button.tsx b/apps/web/design-system/button.tsx
index f879a25614..076b9cd238 100644
--- a/apps/web/design-system/button.tsx
+++ b/apps/web/design-system/button.tsx
@@ -30,14 +30,14 @@ const buttonClassNames = (className = '') =>
       variants: {
         variant: {
           primary:
-            'border-transparent bg-ctaPrimary text-white hover:bg-ctaHover focus:border-ctaHover focus:shadow-inner-ctaHover',
+            'border-transparent bg-ctaPrimary text-white hover:bg-ctaHover focus-visible:border-ctaHover focus-visible:shadow-inner-ctaHover',
           secondary:
-            'border-grey-02 bg-white text-text shadow-button hover:border-text hover:bg-bg hover:text-text! focus:border-text focus:shadow-inner-text',
+            'border-grey-02 bg-white text-text shadow-button hover:border-text hover:bg-bg hover:text-text! focus-visible:border-text focus-visible:shadow-inner-text',
           tertiary: 'border-white bg-text text-white shadow-none',
           ghost:
-            'border-transparent bg-white text-grey-04! shadow-none hover:border-text hover:bg-bg hover:text-text! hover:shadow-button focus:border-text focus:shadow-inner-text',
+            'border-transparent bg-white text-grey-04! shadow-none hover:border-text hover:bg-bg hover:text-text! hover:shadow-button focus-visible:border-text focus-visible:shadow-inner-text',
           transparent:
-            'border-text bg-transparent text-text! shadow-none hover:border-text hover:text-text! focus:border-text focus:shadow-inner-text',
+            'border-text bg-transparent text-text! shadow-none hover:border-text hover:text-text! focus-visible:border-text focus-visible:shadow-inner-text',
           success: 'border-white bg-green text-white shadow-none transition-colors duration-150 hover:bg-green/80',
           error: 'border-white bg-red-01 text-white shadow-none transition-colors duration-150 hover:bg-red-01/80',
           done: 'border-green bg-green text-text transition-colors duration-150 hover:bg-green/80',

From 702c55eb959d186cf8d4a8c837a845586d53ee7e Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 13:33:55 -0700
Subject: [PATCH 10/14] fix: update remaining BrowseSidebarData call sites for
 renamed field

Three synthesized BrowseSidebarData fallbacks in explore and activity
routes still referenced the old hasPendingVotes boolean; rename them
to pendingVoteProposalIds to match the updated type.
---
 apps/web/app/api/activity/feed/route.ts | 2 +-
 apps/web/app/api/explore/feed/route.ts  | 2 +-
 apps/web/app/explore/page.tsx           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/api/activity/feed/route.ts b/apps/web/app/api/activity/feed/route.ts
index 2763c8a040..518e04385c 100644
--- a/apps/web/app/api/activity/feed/route.ts
+++ b/apps/web/app/api/activity/feed/route.ts
@@ -53,7 +53,7 @@ export async function GET(request: Request) {
     editorOf: [],
     memberOf: [],
     documentationImage: null,
-    hasPendingVotes: false,
+    pendingVoteProposalIds: [],
     personalSpaceId: null,
   };
 
diff --git a/apps/web/app/api/explore/feed/route.ts b/apps/web/app/api/explore/feed/route.ts
index 38a6a86c31..99fe1b37b8 100644
--- a/apps/web/app/api/explore/feed/route.ts
+++ b/apps/web/app/api/explore/feed/route.ts
@@ -68,7 +68,7 @@ export async function GET(request: Request) {
         editorOf: [],
         memberOf: [],
         documentationImage: null,
-        hasPendingVotes: false,
+        pendingVoteProposalIds: [],
         personalSpaceId: null,
       };
     }
diff --git a/apps/web/app/explore/page.tsx b/apps/web/app/explore/page.tsx
index ae21e31de4..0423be55ba 100644
--- a/apps/web/app/explore/page.tsx
+++ b/apps/web/app/explore/page.tsx
@@ -27,7 +27,7 @@ export default async function ExploreRoutePage() {
         editorOf: [],
         memberOf: [],
         documentationImage: null,
-        hasPendingVotes: false,
+        pendingVoteProposalIds: [],
         personalSpaceId: null,
       };
     }

From 8cd60484862ec84a111e2393e0ae032b5fd82727 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 14:15:06 -0700
Subject: [PATCH 11/14] feat: show skeleton during governance dropdown
 navigation

Dropdown changes on /home kick off a full server fetch for the
proposal list and sidebar counts, which can take a couple of seconds.
The previous UI kept the old content on screen during the fetch,
making selections feel unresponsive.

Wrap dropdown navigation in useTransition and swap content to
skeletons when isPending stays true beyond 150ms. Cached/fast
responses resolve before the delay fires, so there is no skeleton
flash when data is already warm.
---
 apps/web/app/home/personal-home-dashboard.tsx | 73 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/home/personal-home-dashboard.tsx b/apps/web/app/home/personal-home-dashboard.tsx
index 8ec00330be..0ba00161ad 100644
--- a/apps/web/app/home/personal-home-dashboard.tsx
+++ b/apps/web/app/home/personal-home-dashboard.tsx
@@ -19,7 +19,7 @@ import { CheckCloseSmall } from '~/design-system/icons/check-close-small';
 import { ThumbGeoImage } from '~/design-system/geo-image';
 import { Member } from '~/design-system/icons/member';
 import { Menu } from '~/design-system/menu';
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 import { tabGroupTabLinkStyles } from '~/design-system/tab-group';
@@ -139,6 +139,51 @@ function GovernanceTabsRow({
   );
 }
 
+const SKELETON_DELAY_MS = 150;
+
+function useDelayedPending(isPending: boolean): boolean {
+  const [delayed, setDelayed] = React.useState(false);
+  React.useEffect(() => {
+    if (!isPending) {
+      setDelayed(false);
+      return;
+    }
+    const t = setTimeout(() => setDelayed(true), SKELETON_DELAY_MS);
+    return () => clearTimeout(t);
+  }, [isPending]);
+  return delayed;
+}
+
+function ProposalsListSkeleton() {
+  return (
+    <div className="flex animate-pulse flex-col divide-y divide-grey-01">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="flex flex-col gap-3 py-4">
+          <div className="h-5 w-2/3 rounded bg-grey-01" />
+          <div className="flex items-center justify-between gap-4">
+            <div className="h-4 w-1/3 rounded bg-grey-01" />
+            <div className="h-6 w-20 rounded bg-grey-01" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SidebarSkeleton() {
+  return (
+    <div className="animate-pulse space-y-2">
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} className="space-y-2 rounded border border-grey-02 p-3">
+          <div className="h-4 w-1/2 rounded bg-grey-01" />
+          <div className="h-4 w-3/4 rounded bg-grey-01" />
+          <div className="h-4 w-2/3 rounded bg-grey-01" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function PersonalHomeDashboard({
   sidebarCounts,
   proposalsList,
@@ -147,6 +192,17 @@ export function PersonalHomeDashboard({
   editorSpaceOptions,
   myProposalSpaceOptions,
 }: PersonalHomeDashboardProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = React.useTransition();
+  const showSkeleton = useDelayedPending(isPending);
+
+  const navigate = React.useCallback(
+    (href: string) => {
+      startTransition(() => router.push(href));
+    },
+    [router]
+  );
+
   const spaceOptions = governanceTab === 'review' ? editorSpaceOptions : myProposalSpaceOptions;
 
   const spaceLabel =
@@ -173,6 +229,7 @@ export function PersonalHomeDashboard({
           label={spaceLabel}
           showImages
           maxHeightClass="max-h-[25rem] overflow-y-auto"
+          onNavigate={navigate}
           items={[
             {
               label: 'All spaces',
@@ -189,6 +246,7 @@ export function PersonalHomeDashboard({
         />
         <GovernanceFilterMenu
           label={categoryLabel}
+          onNavigate={navigate}
           items={(Object.keys(categoryLabels) as GovernanceHomeReviewCategory[]).map(key => ({
             label: categoryLabels[key],
             href: buildHomeHref({ tab: governanceTab, ...filterState, category: key }),
@@ -196,6 +254,7 @@ export function PersonalHomeDashboard({
         />
         <GovernanceFilterMenu
           label={statusLabel}
+          onNavigate={navigate}
           items={(Object.keys(statusLabels) as GovernanceHomeStatusFilter[]).map(key => ({
             label: statusLabels[key],
             href: buildHomeHref({ tab: governanceTab, ...filterState, status: key }),
@@ -205,10 +264,10 @@ export function PersonalHomeDashboard({
       <div className="mt-4 flex gap-8">
         <div className="w-2/3">
           <Notices />
-          {proposalsList}
+          {showSkeleton ? <ProposalsListSkeleton /> : proposalsList}
         </div>
         <div className="w-1/3">
-          <Sidebar counts={sidebarCounts} />
+          {showSkeleton ? <SidebarSkeleton /> : <Sidebar counts={sidebarCounts} />}
         </div>
       </div>
     </>
@@ -220,11 +279,13 @@ function GovernanceFilterMenu({
   items,
   showImages,
   maxHeightClass,
+  onNavigate,
 }: {
   label: string;
   items: { label: string; href: string; image?: string | null; showImage?: boolean }[];
   showImages?: boolean;
   maxHeightClass?: string;
+  onNavigate?: (href: string) => void;
 }) {
   const [open, setOpen] = React.useState(false);
   const [pendingLabel, setPendingLabel] = React.useState<string | null>(null);
@@ -252,9 +313,13 @@ function GovernanceFilterMenu({
           <Link
             key={item.href}
             href={item.href}
-            onClick={() => {
+            onClick={e => {
               if (item.label !== label) setPendingLabel(item.label);
               setOpen(false);
+              if (onNavigate) {
+                e.preventDefault();
+                onNavigate(item.href);
+              }
             }}
             className="flex w-full cursor-pointer items-center gap-2 bg-white px-3 py-2.5 hover:bg-bg"
           >

From 109a70ba3f78b7d6574ab45aafa0070cab312fb9 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 14:47:49 -0700
Subject: [PATCH 12/14] fix: single skeleton, keep sidebar, wire optimistic
 vote to home components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three follow-up fixes on the governance home loading behavior:

- Drop the Suspense key that forced a remount on every filter change.
  Without it, useTransition can keep the old proposal cards visible
  during navigation and only the useTransition-driven skeleton shows
  after the 150ms delay — no more double-skeleton flash between the
  Suspense fallback and the transition skeleton.
- Align the transition skeleton's layout with the real cards so
  it doesn't visually jump when content swaps in.
- Always render the right-rail Sidebar. Its counts don't change
  with filter selections, so it shouldn't flicker to a skeleton.
- Wire AcceptOrRejectEditor and AcceptOrRejectMember into the same
  optimistic-vote atom as the space-level AcceptOrReject. Voting from
  the governance home review list now clears the red dot as soon as
  the last pending proposal is approved/rejected, with error
  rollback on failed transactions.
---
 apps/web/app/home/accept-or-reject-editor.tsx | 13 ++++++--
 apps/web/app/home/accept-or-reject-member.tsx | 13 ++++++--
 apps/web/app/home/component.tsx               |  4 ---
 apps/web/app/home/personal-home-dashboard.tsx | 30 +++++--------------
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/apps/web/app/home/accept-or-reject-editor.tsx b/apps/web/app/home/accept-or-reject-editor.tsx
index 8620688365..2493e31680 100644
--- a/apps/web/app/home/accept-or-reject-editor.tsx
+++ b/apps/web/app/home/accept-or-reject-editor.tsx
@@ -12,6 +12,7 @@ import { SmallButton } from '~/design-system/button';
 import { Pending } from '~/design-system/pending';
 
 import { Execute } from '~/partials/active-proposal/execute';
+import { useAddOptimisticVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 
 interface Props {
   spaceId: string;
@@ -46,19 +47,27 @@ export function AcceptOrRejectEditor({
   const isPendingRejection = hasRejected && voteStatus === 'pending';
 
   const { smartAccount } = useSmartAccount();
+  const addOptimisticVote = useAddOptimisticVote();
+  const removeOptimisticVote = useRemoveOptimisticVote();
 
   const onVoteSuccess = () => {
     router.refresh();
   };
 
+  const onVoteError = () => {
+    removeOptimisticVote(proposalId);
+  };
+
   const onApprove = () => {
     setHasApproved(true);
-    vote('ACCEPT', { onSuccess: onVoteSuccess });
+    addOptimisticVote(proposalId);
+    vote('ACCEPT', { onSuccess: onVoteSuccess, onError: onVoteError });
   };
 
   const onReject = () => {
     setHasRejected(true);
-    vote('REJECT', { onSuccess: onVoteSuccess });
+    addOptimisticVote(proposalId);
+    vote('REJECT', { onSuccess: onVoteSuccess, onError: onVoteError });
   };
 
   // Terminal / post-vote states on the proposal must win over "You accepted" so we match space
diff --git a/apps/web/app/home/accept-or-reject-member.tsx b/apps/web/app/home/accept-or-reject-member.tsx
index 38a9420bee..2ac178117f 100644
--- a/apps/web/app/home/accept-or-reject-member.tsx
+++ b/apps/web/app/home/accept-or-reject-member.tsx
@@ -24,6 +24,7 @@ import { Pending } from '~/design-system/pending';
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 
 import { Execute } from '~/partials/active-proposal/execute';
+import { useAddOptimisticVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 
 interface Props {
   spaceId: string;
@@ -79,19 +80,27 @@ export function AcceptOrRejectMember({
   const isPendingRejection = selectedVote === 'REJECT' && voteStatus === 'pending';
 
   const { smartAccount } = useSmartAccount();
+  const addOptimisticVote = useAddOptimisticVote();
+  const removeOptimisticVote = useRemoveOptimisticVote();
 
   const onVoteSuccess = () => {
     router.refresh();
   };
 
+  const onVoteError = () => {
+    removeOptimisticVote(proposalId);
+  };
+
   const onApprove = () => {
     setSelectedVote('ACCEPT');
-    vote('ACCEPT', { onSuccess: onVoteSuccess });
+    addOptimisticVote(proposalId);
+    vote('ACCEPT', { onSuccess: onVoteSuccess, onError: onVoteError });
   };
 
   const onReject = () => {
     setSelectedVote('REJECT');
-    vote('REJECT', { onSuccess: onVoteSuccess });
+    addOptimisticVote(proposalId);
+    vote('REJECT', { onSuccess: onVoteSuccess, onError: onVoteError });
   };
 
   const { hours, minutes } = getProposalTimeRemaining(endTime);
diff --git a/apps/web/app/home/component.tsx b/apps/web/app/home/component.tsx
index 990d8fa5fe..78da9ca6a7 100644
--- a/apps/web/app/home/component.tsx
+++ b/apps/web/app/home/component.tsx
@@ -44,8 +44,6 @@ export async function Component({
   myProposalSpaceOptions,
   myProposalSpaceIds,
 }: Props) {
-  const listKey = `${governanceTab}-${governanceFilters.spaceId}-${governanceFilters.category}-${governanceFilters.status}-${proposalType}-${connectedAddress}`;
-
   return (
     <>
       <div className="mx-auto w-full max-w-[880px]">
@@ -60,7 +58,6 @@ export async function Component({
               <p className="text-body text-grey-04">Sign in to see your proposals.</p>
             ) : governanceTab === 'my' && connectedSpaceId ? (
               <React.Suspense
-                key={listKey}
                 fallback={
                   <div className="space-y-2">
                     <LoadingSkeleton />
@@ -81,7 +78,6 @@ export async function Component({
               </React.Suspense>
             ) : (
               <React.Suspense
-                key={listKey}
                 fallback={
                   <div className="space-y-2">
                     <LoadingSkeleton />
diff --git a/apps/web/app/home/personal-home-dashboard.tsx b/apps/web/app/home/personal-home-dashboard.tsx
index 0ba00161ad..044c7e3045 100644
--- a/apps/web/app/home/personal-home-dashboard.tsx
+++ b/apps/web/app/home/personal-home-dashboard.tsx
@@ -156,28 +156,14 @@ function useDelayedPending(isPending: boolean): boolean {
 
 function ProposalsListSkeleton() {
   return (
-    <div className="flex animate-pulse flex-col divide-y divide-grey-01">
-      {Array.from({ length: 4 }).map((_, i) => (
-        <div key={i} className="flex flex-col gap-3 py-4">
-          <div className="h-5 w-2/3 rounded bg-grey-01" />
-          <div className="flex items-center justify-between gap-4">
-            <div className="h-4 w-1/3 rounded bg-grey-01" />
-            <div className="h-6 w-20 rounded bg-grey-01" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function SidebarSkeleton() {
-  return (
-    <div className="animate-pulse space-y-2">
+    <div className="space-y-2">
       {Array.from({ length: 3 }).map((_, i) => (
-        <div key={i} className="space-y-2 rounded border border-grey-02 p-3">
-          <div className="h-4 w-1/2 rounded bg-grey-01" />
-          <div className="h-4 w-3/4 rounded bg-grey-01" />
-          <div className="h-4 w-2/3 rounded bg-grey-01" />
+        <div key={i} className="space-y-4 rounded-lg border border-grey-02 p-4">
+          <div className="space-y-2">
+            <div className="h-5 w-36 animate-pulse rounded bg-grey-01" />
+            <div className="h-4 w-20 animate-pulse rounded bg-grey-01" />
+          </div>
+          <div className="h-5 w-48 animate-pulse rounded bg-grey-01" />
         </div>
       ))}
     </div>
@@ -267,7 +253,7 @@ export function PersonalHomeDashboard({
           {showSkeleton ? <ProposalsListSkeleton /> : proposalsList}
         </div>
         <div className="w-1/3">
-          {showSkeleton ? <SidebarSkeleton /> : <Sidebar counts={sidebarCounts} />}
+          <Sidebar counts={sidebarCounts} />
         </div>
       </div>
     </>

From 87442076f0963c58166f0e96c77e0356d4fbcd75 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 15:32:56 -0700
Subject: [PATCH 13/14] fix: single skeleton, confirm-only dot clear, sidebar
 auto-refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four related fixes for governance loading + vote feedback:

- Drop the custom transition-driven skeleton and its 150ms delay.
  The double-shade flicker was the custom skeleton (bg-grey-01) briefly
  replacing the real Suspense fallback (bg-grey-02). With useTransition
  doing the right thing, the Suspense fallback only fires on an actual
  suspend — instant/prefetched navigations show no skeleton at all.
- Split the optimistic-vote atom into two: optimistic (click-driven,
  drives list reorder) and confirmed (mutation-success-driven, drives
  sidebar dot). Clicking 'Reject' no longer clears the dot prematurely;
  the dot clears the moment 'You rejected' appears.
- Wire useConfirmVote into all three AcceptOrReject components on
  vote success.
- Poll the browse sidebar data every 30s and refetch on window focus
  so a newly published proposal starts showing the red dot without a
  hard refresh.
---
 apps/web/app/home/accept-or-reject-editor.tsx |  4 +-
 apps/web/app/home/accept-or-reject-member.tsx |  4 +-
 apps/web/app/home/personal-home-dashboard.tsx | 57 +------------------
 .../active-proposal/accept-or-reject.tsx      |  4 +-
 .../browse-sidebar/browse-sidebar.tsx         | 20 +++++--
 .../governance/optimistic-voted-atom.ts       | 20 ++++++-
 6 files changed, 44 insertions(+), 65 deletions(-)

diff --git a/apps/web/app/home/accept-or-reject-editor.tsx b/apps/web/app/home/accept-or-reject-editor.tsx
index 2493e31680..2442c00b57 100644
--- a/apps/web/app/home/accept-or-reject-editor.tsx
+++ b/apps/web/app/home/accept-or-reject-editor.tsx
@@ -12,7 +12,7 @@ import { SmallButton } from '~/design-system/button';
 import { Pending } from '~/design-system/pending';
 
 import { Execute } from '~/partials/active-proposal/execute';
-import { useAddOptimisticVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
+import { useAddOptimisticVote, useConfirmVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 
 interface Props {
   spaceId: string;
@@ -49,8 +49,10 @@ export function AcceptOrRejectEditor({
   const { smartAccount } = useSmartAccount();
   const addOptimisticVote = useAddOptimisticVote();
   const removeOptimisticVote = useRemoveOptimisticVote();
+  const confirmVote = useConfirmVote();
 
   const onVoteSuccess = () => {
+    confirmVote(proposalId);
     router.refresh();
   };
 
diff --git a/apps/web/app/home/accept-or-reject-member.tsx b/apps/web/app/home/accept-or-reject-member.tsx
index 2ac178117f..110f4dadc0 100644
--- a/apps/web/app/home/accept-or-reject-member.tsx
+++ b/apps/web/app/home/accept-or-reject-member.tsx
@@ -24,7 +24,7 @@ import { Pending } from '~/design-system/pending';
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 
 import { Execute } from '~/partials/active-proposal/execute';
-import { useAddOptimisticVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
+import { useAddOptimisticVote, useConfirmVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 
 interface Props {
   spaceId: string;
@@ -82,8 +82,10 @@ export function AcceptOrRejectMember({
   const { smartAccount } = useSmartAccount();
   const addOptimisticVote = useAddOptimisticVote();
   const removeOptimisticVote = useRemoveOptimisticVote();
+  const confirmVote = useConfirmVote();
 
   const onVoteSuccess = () => {
+    confirmVote(proposalId);
     router.refresh();
   };
 
diff --git a/apps/web/app/home/personal-home-dashboard.tsx b/apps/web/app/home/personal-home-dashboard.tsx
index 044c7e3045..8ec00330be 100644
--- a/apps/web/app/home/personal-home-dashboard.tsx
+++ b/apps/web/app/home/personal-home-dashboard.tsx
@@ -19,7 +19,7 @@ import { CheckCloseSmall } from '~/design-system/icons/check-close-small';
 import { ThumbGeoImage } from '~/design-system/geo-image';
 import { Member } from '~/design-system/icons/member';
 import { Menu } from '~/design-system/menu';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 import { tabGroupTabLinkStyles } from '~/design-system/tab-group';
@@ -139,37 +139,6 @@ function GovernanceTabsRow({
   );
 }
 
-const SKELETON_DELAY_MS = 150;
-
-function useDelayedPending(isPending: boolean): boolean {
-  const [delayed, setDelayed] = React.useState(false);
-  React.useEffect(() => {
-    if (!isPending) {
-      setDelayed(false);
-      return;
-    }
-    const t = setTimeout(() => setDelayed(true), SKELETON_DELAY_MS);
-    return () => clearTimeout(t);
-  }, [isPending]);
-  return delayed;
-}
-
-function ProposalsListSkeleton() {
-  return (
-    <div className="space-y-2">
-      {Array.from({ length: 3 }).map((_, i) => (
-        <div key={i} className="space-y-4 rounded-lg border border-grey-02 p-4">
-          <div className="space-y-2">
-            <div className="h-5 w-36 animate-pulse rounded bg-grey-01" />
-            <div className="h-4 w-20 animate-pulse rounded bg-grey-01" />
-          </div>
-          <div className="h-5 w-48 animate-pulse rounded bg-grey-01" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export function PersonalHomeDashboard({
   sidebarCounts,
   proposalsList,
@@ -178,17 +147,6 @@ export function PersonalHomeDashboard({
   editorSpaceOptions,
   myProposalSpaceOptions,
 }: PersonalHomeDashboardProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = React.useTransition();
-  const showSkeleton = useDelayedPending(isPending);
-
-  const navigate = React.useCallback(
-    (href: string) => {
-      startTransition(() => router.push(href));
-    },
-    [router]
-  );
-
   const spaceOptions = governanceTab === 'review' ? editorSpaceOptions : myProposalSpaceOptions;
 
   const spaceLabel =
@@ -215,7 +173,6 @@ export function PersonalHomeDashboard({
           label={spaceLabel}
           showImages
           maxHeightClass="max-h-[25rem] overflow-y-auto"
-          onNavigate={navigate}
           items={[
             {
               label: 'All spaces',
@@ -232,7 +189,6 @@ export function PersonalHomeDashboard({
         />
         <GovernanceFilterMenu
           label={categoryLabel}
-          onNavigate={navigate}
           items={(Object.keys(categoryLabels) as GovernanceHomeReviewCategory[]).map(key => ({
             label: categoryLabels[key],
             href: buildHomeHref({ tab: governanceTab, ...filterState, category: key }),
@@ -240,7 +196,6 @@ export function PersonalHomeDashboard({
         />
         <GovernanceFilterMenu
           label={statusLabel}
-          onNavigate={navigate}
           items={(Object.keys(statusLabels) as GovernanceHomeStatusFilter[]).map(key => ({
             label: statusLabels[key],
             href: buildHomeHref({ tab: governanceTab, ...filterState, status: key }),
@@ -250,7 +205,7 @@ export function PersonalHomeDashboard({
       <div className="mt-4 flex gap-8">
         <div className="w-2/3">
           <Notices />
-          {showSkeleton ? <ProposalsListSkeleton /> : proposalsList}
+          {proposalsList}
         </div>
         <div className="w-1/3">
           <Sidebar counts={sidebarCounts} />
@@ -265,13 +220,11 @@ function GovernanceFilterMenu({
   items,
   showImages,
   maxHeightClass,
-  onNavigate,
 }: {
   label: string;
   items: { label: string; href: string; image?: string | null; showImage?: boolean }[];
   showImages?: boolean;
   maxHeightClass?: string;
-  onNavigate?: (href: string) => void;
 }) {
   const [open, setOpen] = React.useState(false);
   const [pendingLabel, setPendingLabel] = React.useState<string | null>(null);
@@ -299,13 +252,9 @@ function GovernanceFilterMenu({
           <Link
             key={item.href}
             href={item.href}
-            onClick={e => {
+            onClick={() => {
               if (item.label !== label) setPendingLabel(item.label);
               setOpen(false);
-              if (onNavigate) {
-                e.preventDefault();
-                onNavigate(item.href);
-              }
             }}
             className="flex w-full cursor-pointer items-center gap-2 bg-white px-3 py-2.5 hover:bg-bg"
           >
diff --git a/apps/web/partials/active-proposal/accept-or-reject.tsx b/apps/web/partials/active-proposal/accept-or-reject.tsx
index 0e96f25a30..619bf37f9e 100644
--- a/apps/web/partials/active-proposal/accept-or-reject.tsx
+++ b/apps/web/partials/active-proposal/accept-or-reject.tsx
@@ -12,7 +12,7 @@ import { SubstreamVote } from '~/core/io/substream-schema';
 
 import { Button } from '~/design-system/button';
 import { Pending } from '~/design-system/pending';
-import { useAddOptimisticVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
+import { useAddOptimisticVote, useConfirmVote, useRemoveOptimisticVote } from '~/partials/governance/optimistic-voted-atom';
 import { GovernanceReopenEditButton } from '~/partials/governance/governance-reopen-edit-button';
 
 import { Execute } from './execute';
@@ -54,8 +54,10 @@ export function AcceptOrReject({
   const { smartAccount } = useSmartAccount();
   const addOptimisticVote = useAddOptimisticVote();
   const removeOptimisticVote = useRemoveOptimisticVote();
+  const confirmVote = useConfirmVote();
 
   const onVoteSuccess = () => {
+    confirmVote(proposalId);
     router.refresh();
   };
 
diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index e904d1ed0f..efc957131d 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -20,7 +20,7 @@ import { ChevronRight } from '~/design-system/icons/chevron-right';
 import { ThumbGeoImage } from '~/design-system/geo-image';
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 
-import { useOptimisticallyVotedIds } from '~/partials/governance/optimistic-voted-atom';
+import { useConfirmedVotedIds } from '~/partials/governance/optimistic-voted-atom';
 
 import { loadBrowseSidebarData } from './load-browse-sidebar-data';
 
@@ -70,8 +70,8 @@ function BrowseNavPrimaryLinks({
   const { smartAccount } = useSmartAccount();
   const address = smartAccount?.account.address;
   const { profile } = useGeoProfile(address);
-  const optimisticVotedIds = useOptimisticallyVotedIds();
-  const hasPendingVotes = pendingVoteProposalIds.some(id => !optimisticVotedIds.has(id));
+  const confirmedVotedIds = useConfirmedVotedIds();
+  const hasPendingVotes = pendingVoteProposalIds.some(id => !confirmedVotedIds.has(id));
 
   return (
     <>
@@ -196,11 +196,19 @@ export function BrowseSidebar() {
 
   React.useEffect(() => {
     let cancelled = false;
-    void loadBrowseSidebarData(walletAddress).then(d => {
-      if (!cancelled) setData(d);
-    });
+    const load = () => {
+      void loadBrowseSidebarData(walletAddress).then(d => {
+        if (!cancelled) setData(d);
+      });
+    };
+    load();
+    const interval = setInterval(load, 30_000);
+    const onFocus = () => load();
+    window.addEventListener('focus', onFocus);
     return () => {
       cancelled = true;
+      clearInterval(interval);
+      window.removeEventListener('focus', onFocus);
     };
   }, [walletAddress]);
 
diff --git a/apps/web/partials/governance/optimistic-voted-atom.ts b/apps/web/partials/governance/optimistic-voted-atom.ts
index d4eeca8bf2..a43898d82c 100644
--- a/apps/web/partials/governance/optimistic-voted-atom.ts
+++ b/apps/web/partials/governance/optimistic-voted-atom.ts
@@ -2,8 +2,12 @@
 
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 
+/** Proposal ids whose card should already appear as "voted" (sunk to bottom of list). Written on click. */
 const optimisticVotedIdsAtom = atom<Set<string>>(new Set<string>());
 
+/** Proposal ids whose vote mutation resolved successfully. Written when useVote reports success. */
+const confirmedVotedIdsAtom = atom<Set<string>>(new Set<string>());
+
 export function useAddOptimisticVote() {
   const setter = useSetAtom(optimisticVotedIdsAtom);
   return (proposalId: string) => {
@@ -28,11 +32,23 @@ export function useRemoveOptimisticVote() {
   };
 }
 
+export function useConfirmVote() {
+  const setter = useSetAtom(confirmedVotedIdsAtom);
+  return (proposalId: string) => {
+    setter(prev => {
+      if (prev.has(proposalId)) return prev;
+      const next = new Set(prev);
+      next.add(proposalId);
+      return next;
+    });
+  };
+}
+
 export function useIsOptimisticallyVoted(proposalId: string): boolean {
   const set = useAtomValue(optimisticVotedIdsAtom);
   return set.has(proposalId);
 }
 
-export function useOptimisticallyVotedIds(): Set<string> {
-  return useAtomValue(optimisticVotedIdsAtom);
+export function useConfirmedVotedIds(): Set<string> {
+  return useAtomValue(confirmedVotedIdsAtom);
 }

From 5d54f095092f72726d6532cf46be261eb8bef991 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Tue, 21 Apr 2026 17:21:04 -0700
Subject: [PATCH 14/14] feat(sidebar): webhook-backed pending-votes cache for
 red dot

Replace the per-tab full sidebar rescan with a Redis-backed cache kept
in sync by gaia notification-service webhooks:

- POST /api/geo-notifications: receives per-editor fan-out webhooks,
  verifies HMAC-SHA256 on raw body bytes, dedupes by idempotency_key,
  and mutates a per-user pending-vote set in Upstash:
    proposal_created          -> SADD
    proposal_voted (self)     -> SREM
    proposal_executed|rejected -> SREM
  Bounty/unhandled events are 2xxed so the delivery worker stops
  retrying. Redis failures return 503 so the worker retries.

- GET /api/pending-votes: resolves the caller's user_space_id from
  the WALLET_ADDRESS cookie (cached in Redis for 24h) and returns
  {proposalIds}. Redis miss falls back to the authoritative REST
  scan and seeds the cache.

- Sidebar: initial full load unchanged. Pending-vote polling split
  into its own effect, bumped to 60s, and routed to /api/pending-votes
  when NEXT_PUBLIC_USE_NOTIFICATION_SERVICE=true. Poll is skipped when
  the user is not an editor of any space or the tab is hidden.

Per-poll cost drops from ~5+ GraphQL + N-space REST scan to one Redis
SMEMBERS. Self-heals on the 24h TTL if a webhook is ever missed.

Requires gaia to register the webhook URL + shared secret in its
app_webhooks table before the flag is flipped on.
---
 apps/web/.env.example                         |  8 ++
 apps/web/app/api/geo-notifications/route.ts   | 97 +++++++++++++++++++
 apps/web/app/api/pending-votes/route.ts       | 63 ++++++++++++
 .../core/browse/fetch-browse-sidebar-data.ts  |  7 ++
 .../core/notifications/pending-votes-store.ts | 79 +++++++++++++++
 .../core/notifications/verify-signature.ts    | 31 ++++++
 .../notifications/webhook-payload-schema.ts   | 57 +++++++++++
 .../browse-sidebar/browse-sidebar.tsx         | 57 +++++++++--
 8 files changed, 391 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/app/api/geo-notifications/route.ts
 create mode 100644 apps/web/app/api/pending-votes/route.ts
 create mode 100644 apps/web/core/notifications/pending-votes-store.ts
 create mode 100644 apps/web/core/notifications/verify-signature.ts
 create mode 100644 apps/web/core/notifications/webhook-payload-schema.ts

diff --git a/apps/web/.env.example b/apps/web/.env.example
index e52437ecc9..499b0c17a5 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -27,6 +27,14 @@ NEXT_PUBLIC_ONBOARD_CODE=
 # Features (optional)
 # NEXT_PUBLIC_MAPBOX_TOKEN=
 
+# Governance red-dot via gaia notification-service (optional)
+# When enabled, the browse sidebar polls /api/pending-votes (Redis-backed, driven
+# by webhooks from gaia) instead of rescanning all editor spaces each tick.
+# Requires UPSTASH_REDIS_REST_URL/TOKEN to be set and the webhook URL registered
+# in gaia's app_webhooks table with the matching secret.
+# NEXT_PUBLIC_USE_NOTIFICATION_SERVICE=true
+# GEO_NOTIFICATIONS_WEBHOOK_SECRET=         # HMAC-SHA256 shared secret; generate with `openssl rand -hex 32`
+
 # Build (optional)
 # DISABLE_REACT_COMPILER=1
 # DISABLE_SENTRY=1
diff --git a/apps/web/app/api/geo-notifications/route.ts b/apps/web/app/api/geo-notifications/route.ts
new file mode 100644
index 0000000000..9a335bbc3a
--- /dev/null
+++ b/apps/web/app/api/geo-notifications/route.ts
@@ -0,0 +1,97 @@
+import { Either, Schema } from 'effect';
+import { NextResponse } from 'next/server';
+
+import { addPendingVote, markNotificationSeen, removePendingVote } from '~/core/notifications/pending-votes-store';
+import { verifyGeoSignature } from '~/core/notifications/verify-signature';
+import {
+  RedDotWebhookPayloadSchema,
+  type RedDotWebhookPayload,
+} from '~/core/notifications/webhook-payload-schema';
+
+/**
+ * Webhook receiver for the gaia notification-service.
+ *
+ * Registration: gaia's `app_webhooks` table holds the URL + shared secret.
+ * The service fans out one POST per (editor, event); we update a per-user
+ * pending-vote set in Redis that the sidebar reads via /api/pending-votes.
+ *
+ * Responses:
+ *  - 200: accepted (including unhandled event types, which we intentionally
+ *    drop so the delivery worker doesn't retry)
+ *  - 401: missing or bad signature
+ *  - 500: misconfigured secret (never reached in prod if env is set)
+ */
+export async function POST(request: Request) {
+  const secret = process.env.GEO_NOTIFICATIONS_WEBHOOK_SECRET;
+  if (!secret) {
+    console.error('[geo-notifications] GEO_NOTIFICATIONS_WEBHOOK_SECRET not set');
+    return new NextResponse('webhook secret not configured', { status: 500 });
+  }
+
+  // Read the raw body once — HMAC must verify the exact bytes sent, not a re-serialized JSON.
+  const rawBody = await request.text();
+
+  const valid = verifyGeoSignature({
+    rawBody,
+    signatureHeader: request.headers.get('X-Geo-Signature'),
+    secret,
+  });
+  if (!valid) {
+    return new NextResponse('invalid signature', { status: 401 });
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(rawBody);
+  } catch {
+    // Signature was valid but body isn't JSON. 2xx so it doesn't get retried; log and move on.
+    console.error('[geo-notifications] signed body was not valid JSON');
+    return NextResponse.json({ ok: true });
+  }
+
+  const decoded = Schema.decodeUnknownEither(RedDotWebhookPayloadSchema)(parsed);
+  if (Either.isLeft(decoded)) {
+    // Unhandled event_type (bounty_*, proposal_updated, proposal_settings_updated, etc.) —
+    // acknowledge so the service stops retrying.
+    return NextResponse.json({ ok: true });
+  }
+
+  const payload = decoded.right;
+  const firstTime = await markNotificationSeen(payload.idempotency_key);
+  if (!firstTime) {
+    return NextResponse.json({ ok: true, deduped: true });
+  }
+
+  try {
+    await handleEvent(payload);
+  } catch (error) {
+    // Redis transient failure: return 5xx so the delivery worker retries per its schedule.
+    console.error('[geo-notifications] failed to update pending-vote cache', error);
+    return new NextResponse('transient cache error', { status: 503 });
+  }
+
+  return NextResponse.json({ ok: true });
+}
+
+async function handleEvent(payload: RedDotWebhookPayload) {
+  switch (payload.event_type) {
+    case 'proposal_created':
+      await addPendingVote(payload.user_space_id, payload.proposal_id);
+      return;
+
+    case 'proposal_voted':
+      // The service fans out proposal_voted to every editor in the space. For the red
+      // dot we only care when the recipient *is* the voter — then this user's pending
+      // item clears. All other recipients' pending state is unchanged by this vote.
+      if (payload.voter_id && payload.voter_id === payload.user_space_id) {
+        await removePendingVote(payload.user_space_id, payload.proposal_id);
+      }
+      return;
+
+    case 'proposal_executed':
+    case 'proposal_rejected':
+      // Proposal is closed → nobody needs to vote on it anymore.
+      await removePendingVote(payload.user_space_id, payload.proposal_id);
+      return;
+  }
+}
diff --git a/apps/web/app/api/pending-votes/route.ts b/apps/web/app/api/pending-votes/route.ts
new file mode 100644
index 0000000000..25e2db8575
--- /dev/null
+++ b/apps/web/app/api/pending-votes/route.ts
@@ -0,0 +1,63 @@
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+import { fetchPendingVoteProposalIds } from '~/core/browse/fetch-browse-sidebar-data';
+import { resolveMemberSpaceFromWalletSafe } from '~/core/browse/resolve-member-space-from-wallet';
+import { WALLET_ADDRESS } from '~/core/cookie';
+import { fetchEditorSpaceIds } from '~/core/io/subgraph/fetch-editor-space-ids';
+import {
+  getCachedWalletSpace,
+  getPendingVotes,
+  seedPendingVotes,
+  setCachedWalletSpace,
+} from '~/core/notifications/pending-votes-store';
+
+/**
+ * Lightweight endpoint the browse sidebar polls for the red-dot state.
+ *
+ * Fast path: Redis SMEMBERS on pending_votes:{user_space_id}. Single-digit ms.
+ *
+ * Fallback: if the cache has no entry (cold start or TTL'd out), run the
+ * authoritative REST scan once and seed the cache. Subsequent polls hit
+ * the fast path until webhooks or TTL expire the key again.
+ *
+ * Never accepts a userSpaceId from the caller — the caller can only see
+ * their own state, resolved from the WALLET_ADDRESS cookie.
+ */
+export async function GET() {
+  const walletAddress = (await cookies()).get(WALLET_ADDRESS)?.value;
+  if (!walletAddress) {
+    return NextResponse.json({ proposalIds: [] });
+  }
+
+  const userSpaceId = await resolveUserSpaceId(walletAddress);
+  if (!userSpaceId) {
+    return NextResponse.json({ proposalIds: [] });
+  }
+
+  const cached = await getPendingVotes(userSpaceId);
+  if (cached.hit) {
+    return NextResponse.json({ proposalIds: cached.proposalIds });
+  }
+
+  // Cold cache: rebuild from authoritative source, then seed Redis so subsequent polls hit fast path.
+  const editorSpaceIds = await fetchEditorSpaceIds(userSpaceId);
+  if (editorSpaceIds.length === 0) {
+    await seedPendingVotes(userSpaceId, []);
+    return NextResponse.json({ proposalIds: [] });
+  }
+
+  const proposalIds = await fetchPendingVoteProposalIds(userSpaceId, editorSpaceIds);
+  await seedPendingVotes(userSpaceId, proposalIds);
+  return NextResponse.json({ proposalIds });
+}
+
+async function resolveUserSpaceId(walletAddress: string): Promise<string | null> {
+  const cached = await getCachedWalletSpace(walletAddress);
+  if (cached !== null) {
+    return cached === '' ? null : cached;
+  }
+  const resolved = await resolveMemberSpaceFromWalletSafe(walletAddress);
+  await setCachedWalletSpace(walletAddress, resolved);
+  return resolved;
+}
diff --git a/apps/web/core/browse/fetch-browse-sidebar-data.ts b/apps/web/core/browse/fetch-browse-sidebar-data.ts
index 919b6256ad..6d626629b9 100644
--- a/apps/web/core/browse/fetch-browse-sidebar-data.ts
+++ b/apps/web/core/browse/fetch-browse-sidebar-data.ts
@@ -91,6 +91,13 @@ async function collectPendingVoteIdsInSpace(
   return ids;
 }
 
+export async function fetchPendingVoteProposalIds(
+  memberSpaceId: string,
+  editorSpaceIds: string[]
+): Promise<string[]> {
+  return collectPendingVoteIdsInEditorSpaces(memberSpaceId, editorSpaceIds);
+}
+
 async function collectPendingVoteIdsInEditorSpaces(
   memberSpaceId: string,
   editorSpaceIds: string[]
diff --git a/apps/web/core/notifications/pending-votes-store.ts b/apps/web/core/notifications/pending-votes-store.ts
new file mode 100644
index 0000000000..c8ce0ce3fb
--- /dev/null
+++ b/apps/web/core/notifications/pending-votes-store.ts
@@ -0,0 +1,79 @@
+import { Redis } from '@upstash/redis';
+
+const redis = Redis.fromEnv();
+
+const PENDING_VOTES_TTL_SECONDS = 24 * 60 * 60; // 24h — self-heal if a webhook is missed
+const NOTIF_SEEN_TTL_SECONDS = 7 * 24 * 60 * 60; // 7d — idempotency deduplication window
+const WALLET_SPACE_TTL_SECONDS = 24 * 60 * 60; // 24h — maps wallet → user_space_id to avoid a subgraph hit per poll
+
+const pendingVotesKey = (userSpaceId: string) => `pending_votes:${userSpaceId}`;
+const notifSeenKey = (idempotencyKey: string) => `notif_seen:${idempotencyKey}`;
+const walletSpaceKey = (walletAddress: string) => `wallet_space:${walletAddress.toLowerCase()}`;
+
+/** Records a webhook as already processed. Returns false if it was already seen. */
+export async function markNotificationSeen(idempotencyKey: string): Promise<boolean> {
+  const res = await redis.set(notifSeenKey(idempotencyKey), '1', {
+    nx: true,
+    ex: NOTIF_SEEN_TTL_SECONDS,
+  });
+  return res === 'OK';
+}
+
+/** Adds a proposal id to the user's pending-vote set and refreshes TTL. Ignores no-op on duplicate. */
+export async function addPendingVote(userSpaceId: string, proposalId: string): Promise<void> {
+  const key = pendingVotesKey(userSpaceId);
+  const pipeline = redis.pipeline();
+  pipeline.sadd(key, proposalId);
+  pipeline.expire(key, PENDING_VOTES_TTL_SECONDS);
+  await pipeline.exec();
+}
+
+/** Removes a proposal id from the user's pending-vote set. */
+export async function removePendingVote(userSpaceId: string, proposalId: string): Promise<void> {
+  await redis.srem(pendingVotesKey(userSpaceId), proposalId);
+}
+
+type PendingVotesCache =
+  | { hit: true; proposalIds: string[] }
+  | { hit: false };
+
+/** Returns the cached pending-vote ids for a user, or `hit: false` if no cache exists. */
+export async function getPendingVotes(userSpaceId: string): Promise<PendingVotesCache> {
+  const key = pendingVotesKey(userSpaceId);
+  const exists = await redis.exists(key);
+  if (exists === 0) return { hit: false };
+  const ids = await redis.smembers(key);
+  return { hit: true, proposalIds: ids as string[] };
+}
+
+/**
+ * Replaces the cached set for a user with the given ids. Used by the read endpoint's
+ * fallback path when no cache entry exists — repopulates from the authoritative scan.
+ */
+export async function seedPendingVotes(userSpaceId: string, proposalIds: string[]): Promise<void> {
+  const key = pendingVotesKey(userSpaceId);
+  const pipeline = redis.pipeline();
+  pipeline.del(key);
+  if (proposalIds.length > 0) {
+    const [first, ...rest] = proposalIds;
+    pipeline.sadd(key, first, ...rest);
+  }
+  pipeline.expire(key, PENDING_VOTES_TTL_SECONDS);
+  await pipeline.exec();
+}
+
+/** Cached wallet → user_space_id lookup so polls don't hit the subgraph every time. */
+export async function getCachedWalletSpace(walletAddress: string): Promise<string | null> {
+  const value = await redis.get<string>(walletSpaceKey(walletAddress));
+  return value ?? null;
+}
+
+/** Persists the wallet → user_space_id mapping. Stores the empty string when the wallet has no space. */
+export async function setCachedWalletSpace(
+  walletAddress: string,
+  userSpaceId: string | null
+): Promise<void> {
+  await redis.set(walletSpaceKey(walletAddress), userSpaceId ?? '', {
+    ex: WALLET_SPACE_TTL_SECONDS,
+  });
+}
diff --git a/apps/web/core/notifications/verify-signature.ts b/apps/web/core/notifications/verify-signature.ts
new file mode 100644
index 0000000000..8cc9e21892
--- /dev/null
+++ b/apps/web/core/notifications/verify-signature.ts
@@ -0,0 +1,31 @@
+import { createHmac, timingSafeEqual } from 'node:crypto';
+
+/**
+ * Verifies a gaia notification-service webhook signature.
+ *
+ * Gaia sends `X-Geo-Signature: sha256=<hex>` where the hex is HMAC-SHA256 of the
+ * raw request body bytes (per notification-service/TECH_DESIGN.md). The signature
+ * must be verified against the exact bytes received — never a re-serialized JSON.
+ */
+export function verifyGeoSignature({
+  rawBody,
+  signatureHeader,
+  secret,
+}: {
+  rawBody: string;
+  signatureHeader: string | null;
+  secret: string;
+}): boolean {
+  if (!signatureHeader) return false;
+
+  const prefix = 'sha256=';
+  if (!signatureHeader.startsWith(prefix)) return false;
+
+  const provided = signatureHeader.slice(prefix.length).trim();
+  if (provided.length === 0) return false;
+
+  const expected = createHmac('sha256', secret).update(rawBody, 'utf8').digest('hex');
+  if (expected.length !== provided.length) return false;
+
+  return timingSafeEqual(Buffer.from(expected, 'hex'), Buffer.from(provided, 'hex'));
+}
diff --git a/apps/web/core/notifications/webhook-payload-schema.ts b/apps/web/core/notifications/webhook-payload-schema.ts
new file mode 100644
index 0000000000..6c5d951340
--- /dev/null
+++ b/apps/web/core/notifications/webhook-payload-schema.ts
@@ -0,0 +1,57 @@
+import { Schema } from 'effect';
+
+/**
+ * Minimal schemas for the gaia notification-service governance events we actually
+ * act on. Only the fields we read are required; the service may add more fields
+ * without breaking us. Bounty events and any other `event_type` values are
+ * accepted + ignored at the route level (we 2xx them so the delivery worker
+ * doesn't retry).
+ *
+ * Source: gaia/notification-service/WEBHOOK_INTEGRATION.md
+ */
+
+const ProposalCreatedSchema = Schema.Struct({
+  version: Schema.Number,
+  event_type: Schema.Literal('proposal_created'),
+  category: Schema.Literal('governance'),
+  user_space_id: Schema.String,
+  proposal_id: Schema.String,
+  idempotency_key: Schema.String,
+});
+
+const ProposalVotedSchema = Schema.Struct({
+  version: Schema.Number,
+  event_type: Schema.Literal('proposal_voted'),
+  category: Schema.Literal('governance'),
+  user_space_id: Schema.String,
+  proposal_id: Schema.String,
+  idempotency_key: Schema.String,
+  voter_id: Schema.optional(Schema.NullOr(Schema.String)),
+});
+
+const ProposalExecutedSchema = Schema.Struct({
+  version: Schema.Number,
+  event_type: Schema.Literal('proposal_executed'),
+  category: Schema.Literal('governance'),
+  user_space_id: Schema.String,
+  proposal_id: Schema.String,
+  idempotency_key: Schema.String,
+});
+
+const ProposalRejectedSchema = Schema.Struct({
+  version: Schema.Number,
+  event_type: Schema.Literal('proposal_rejected'),
+  category: Schema.Literal('governance'),
+  user_space_id: Schema.String,
+  proposal_id: Schema.String,
+  idempotency_key: Schema.String,
+});
+
+export const RedDotWebhookPayloadSchema = Schema.Union(
+  ProposalCreatedSchema,
+  ProposalVotedSchema,
+  ProposalExecutedSchema,
+  ProposalRejectedSchema
+);
+
+export type RedDotWebhookPayload = Schema.Schema.Type<typeof RedDotWebhookPayloadSchema>;
diff --git a/apps/web/partials/browse-sidebar/browse-sidebar.tsx b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
index efc957131d..79b0d56846 100644
--- a/apps/web/partials/browse-sidebar/browse-sidebar.tsx
+++ b/apps/web/partials/browse-sidebar/browse-sidebar.tsx
@@ -196,21 +196,62 @@ export function BrowseSidebar() {
 
   React.useEffect(() => {
     let cancelled = false;
-    const load = () => {
-      void loadBrowseSidebarData(walletAddress).then(d => {
-        if (!cancelled) setData(d);
-      });
+    void loadBrowseSidebarData(walletAddress).then(d => {
+      if (!cancelled) setData(d);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [walletAddress]);
+
+  // Pending-vote polling. Uses /api/pending-votes (backed by Redis + webhooks from
+  // gaia's notification-service) when the feature flag is on — one Redis SMEMBERS
+  // per poll instead of a multi-space REST scan. Falls back to refetching the full
+  // sidebar data when the flag is off, which is the legacy behavior.
+  React.useEffect(() => {
+    if (!data) return;
+    const editorCount = data.editorOf.filter(row => !row.pendingLabel).length;
+    if (editorCount === 0) return;
+    if (typeof window === 'undefined') return;
+
+    const useWebhookBackedPoll = process.env.NEXT_PUBLIC_USE_NOTIFICATION_SERVICE === 'true';
+    let cancelled = false;
+
+    const refreshPendingVotes = async () => {
+      if (document.visibilityState === 'hidden') return;
+      if (useWebhookBackedPoll) {
+        try {
+          const res = await fetch('/api/pending-votes', { cache: 'no-store' });
+          if (!res.ok || cancelled) return;
+          const { proposalIds } = (await res.json()) as { proposalIds: string[] };
+          if (cancelled) return;
+          setData(prev => (prev ? { ...prev, pendingVoteProposalIds: proposalIds } : prev));
+        } catch {
+          // Network hiccup — next tick will retry.
+        }
+        return;
+      }
+      // Legacy path: rerun the full sidebar loader.
+      try {
+        const next = await loadBrowseSidebarData(walletAddress);
+        if (!cancelled) setData(next);
+      } catch {
+        // Silently ignore — next tick will retry.
+      }
+    };
+
+    const interval = setInterval(refreshPendingVotes, 60_000);
+    const onFocus = () => {
+      void refreshPendingVotes();
     };
-    load();
-    const interval = setInterval(load, 30_000);
-    const onFocus = () => load();
     window.addEventListener('focus', onFocus);
     return () => {
       cancelled = true;
       clearInterval(interval);
       window.removeEventListener('focus', onFocus);
     };
-  }, [walletAddress]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data?.editorOf.length, walletAddress]);
 
   React.useEffect(() => {
     if (!data) return;