Add unread Signal-view thread count badge to email sidebar

apps/web/src/components/app/app-sidebar/sidebar.tsx

@@ -90,6 +90,7 @@ import UsersThreeIcon from '@phosphor/users-three.svg';
 import XIcon from '@phosphor/x.svg';
 import { isRealNamePart, useOwnUserName } from '@queries/auth/user-name-self';
 import { useEmailLinksQuery } from '@queries/email/link';
+import { useEmailUnreadCounts } from '@queries/email/unread-counts';
 import {
   useJoinTeamMutation,
   useRejectInvitationMutation,
@@ -1599,6 +1600,11 @@ interface SidebarLinkProps extends SidebarItem {
    * Email link's expand chevron.
    */
   trailingWhenActive?: JSX.Element;
+  /**
+   * Unread count shown as a badge at the row's right edge, or over the icon in
+   * slim mode. `0` (or omitted) renders nothing.
+   */
+  unreadCount?: number;
   /**
    * Swaps the icon for an X while the row is hovered (expanded sidebar only —
    * in slim mode the icon is the whole row, so the swap would hijack
@@ -1607,6 +1613,36 @@ interface SidebarLinkProps extends SidebarItem {
   removeAction?: { tooltip: string; onRemove: () => void };
 }
 
+/**
+ * Unread-count badge for a sidebar row. Renders nothing at zero, so callers can
+ * pass a count unconditionally.
+ *
+ * `slim` is the compact variant that sits over a rail icon, where there is only
+ * room for a single digit before the count becomes an "attention" marker.
+ */
+const SidebarUnreadBadge = (props: { count: number; slim?: boolean }) => {
+  const label = () => {
+    if (props.slim) return props.count > 9 ? '9+' : `${props.count}`;
+    return props.count > 99 ? '99+' : `${props.count}`;
+  };
+
+  return (
+    <Show when={props.count > 0}>
+      <span
+        aria-label={`${props.count} unread`}
+        class={cn(
+          'rounded-full bg-accent/15 text-accent font-medium tabular-nums text-center',
+          props.slim
+            ? 'absolute -top-1 -right-1 min-w-3.5 px-0.5 text-[8px] leading-3.5'
+            : 'min-w-4 px-1 text-xxs leading-4'
+        )}
+      >
+        {label()}
+      </span>
+    </Show>
+  );
+};
+
 /** Which action of {@link SidebarOpenInSplitMenu} placed the content. */
 type SidebarOpenAction = 'current-split' | 'new-split' | 'fullscreen';
 
@@ -1780,6 +1816,12 @@ const SidebarLink = (props: SidebarLinkProps) => {
           globalSplitManager()?.returnFocus();
         }}
       >
+        {/* Slim rail has no room for a trailing badge, so the count rides the
+            icon. Top-right keeps it clear of the bottom-right hotkey chip. */}
+        <Show when={props.sidebarState === 'slim'}>
+          <SidebarUnreadBadge count={props.unreadCount ?? 0} slim />
+        </Show>
+
         <Show when={props.icon}>
           <div class="size-5 shrink-0 flex items-center justify-center [&_svg]:size-3.5">
             <Show
@@ -1836,14 +1878,22 @@ const SidebarLink = (props: SidebarLinkProps) => {
           <span class="whitespace-nowrap">{props.label}</span>
         </div>
 
+        {/* Sits before the chevron and hotkey hints so the count keeps its
+            place as those come and go with hover and active state. */}
+        <Show when={!props.hotkeyVisible}>
+          <div class="group-data-[slim=true]/sidebar:hidden ml-auto flex items-center">
+            <SidebarUnreadBadge count={props.unreadCount ?? 0} />
+          </div>
+        </Show>
+
         <Show
           when={
             isActive() &&
             props.trailingWhenActive !== undefined &&
             !props.hotkeyVisible
           }
         >
-          <div class="group-data-[slim=true]/sidebar:hidden ml-auto flex items-center text-ink-muted">
+          <div class="group-data-[slim=true]/sidebar:hidden ml-1 flex items-center text-ink-muted">
             {props.trailingWhenActive}
           </div>
         </Show>
@@ -1855,7 +1905,7 @@ const SidebarLink = (props: SidebarLinkProps) => {
             !(isActive() && props.trailingWhenActive !== undefined)
           }
         >
-          <div class="group-data-[slim=true]/sidebar:hidden ml-auto">
+          <div class="group-data-[slim=true]/sidebar:hidden ml-1">
             <div class="flex gap-1 items-center text-ink-extra-muted font-normal text-xxs">
               <Show when={!props.standaloneHotkey}>
                 <div class="text-xxs text-ink-extra-muted rounded-sm ml-auto border border-ink/5 px-1.5 py-0.5 -my-1">
@@ -1909,6 +1959,11 @@ const SidebarLink = (props: SidebarLinkProps) => {
  * Each row carries the same right-click menu as the parent link (open in the
  * current split, a new split, or fullscreen), scoping whichever split it opens
  * to that inbox.
+ *
+ * Unread Signal counts follow the same fan-out: while the rows are collapsed
+ * the Email link badges the total across every inbox, and once they expand each
+ * inbox badges its own. Noise is never counted, so the badge always matches the
+ * Signal tab a click lands on.
  */
 const SidebarMailLink = (props: SidebarLinkProps) => {
   const layout = useSplitLayout();
@@ -1923,6 +1978,9 @@ const SidebarMailLink = (props: SidebarLinkProps) => {
     )
   );
 
+  // Only worth asking once we know the user has an inbox at all.
+  const unread = useEmailUnreadCounts(() => links().length > 0);
+
   const isMailList = (content: SplitContent | undefined) =>
     content?.type === 'component' && content.id === 'mail';
 
@@ -1987,6 +2045,9 @@ const SidebarMailLink = (props: SidebarLinkProps) => {
     <>
       <SidebarLink
         {...props}
+        // Once the rows are out, each inbox badges itself — a total here on top
+        // of them would report the same mail twice.
+        unreadCount={showAccounts() ? 0 : unread.total()}
         suppressActiveStyle={showAccounts() && onlySelectedId() !== undefined}
         onActiveClick={() => {
           if (!canShow()) return;
@@ -2064,6 +2125,9 @@ const SidebarMailLink = (props: SidebarLinkProps) => {
                         showTooltip={false}
                       />
                       <span class="truncate">{link.email_address}</span>
+                      <div class="ml-auto pl-1 flex items-center">
+                        <SidebarUnreadBadge count={unread.forLink(link.id)} />
+                      </div>
                     </NavRow>
                   </SidebarOpenInSplitMenu>
                 </li>

apps/web/src/lib/queries/email/keys.ts

@@ -6,6 +6,7 @@ export const emailKeys = createQueryKeys('email', {
   labels: null,
   links: null,
   linksHealthProbe: null,
+  unreadCounts: null,
   backfillJobs: null,
   threads: null,
   thread: (threadId: string) => ({

apps/web/src/lib/queries/email/thread.ts

@@ -25,6 +25,7 @@ import { invalidateAllSoup } from '../soup/normalized-cache';
 import { type UndoHandle, useUndoableMutation } from '../undo';
 import { type MutationCallbacks, withCallbacks } from '../utils';
 import { emailKeys } from './keys';
+import { invalidateEmailUnreadCounts } from './unread-counts';
 
 const THREAD_STALE_TIME = 5 * 60 * 1000;
 
@@ -216,6 +217,11 @@ export function useMarkThreadAsSeenMutation(
         // Note: We intentionally don't invalidate thread messages in onSuccess.
         // The optimistic update already sets isRead in soup, and invalidating
         // thread messages triggers Suspense which resets scroll position.
+        //
+        // The sidebar badge counts unread signal threads, so reading one moves
+        // it. Refetched once the server has actually applied the read — doing
+        // it in onMutate would race the write and re-cache the old count.
+        onSettled: invalidateEmailUnreadCounts,
       },
       callbacks
     ),
@@ -285,7 +291,10 @@ export function useMarkThreadAsUnreadMutation(
       );
     },
     ...withCallbacks<void, Error, MarkThreadAsUnreadParams>(
-      { onMutate: threadUnreadOnMutate },
+      {
+        onMutate: threadUnreadOnMutate,
+        onSettled: invalidateEmailUnreadCounts,
+      },
       callbacks
     ),
   }));
@@ -640,6 +649,9 @@ async function upsertSenderFilterWithToast(
 
   const filterId = result.value.filter.id;
   invalidateAllSoup();
+  // Reclassifying a sender moves their threads between Signal and Noise, so
+  // the Signal-only badge count changes with them.
+  invalidateEmailUnreadCounts();
 
   toast.success(`Sender marked as ${label}`, {
     subtext: `Messages from ${senderEmail} will appear in ${label}`,
@@ -655,6 +667,7 @@ async function upsertSenderFilterWithToast(
             toast.failure('Failed to undo', { subtext: senderEmail });
           } else {
             invalidateAllSoup();
+            invalidateEmailUnreadCounts();
             toast.success('Sender filter removed');
           }
         },

apps/web/src/lib/queries/email/unread-counts.ts

@@ -0,0 +1,77 @@
+import { throwOnErr } from '@core/util/result';
+import { queryClient } from '@queries/client';
+import { emailClient } from '@service-email/client';
+import { useQuery } from '@tanstack/solid-query';
+import { type Accessor, createMemo } from 'solid-js';
+import { emailKeys } from './keys';
+
+/**
+ * How long a fetched count stays fresh. Short, because the badge is a
+ * "there is something waiting" signal — a stale one is worse than a late one.
+ */
+const UNREAD_COUNTS_STALE_TIME = 30 * 1000;
+
+/**
+ * Background refresh cadence. Mail arriving from the provider doesn't
+ * invalidate this query (the notification-driven soup refresh doesn't know
+ * about it), so a poll is what turns new mail into a badge while the tab
+ * stays open. Reads and unreads made in-app invalidate directly and don't
+ * wait for it.
+ */
+const UNREAD_COUNTS_REFETCH_INTERVAL = 60 * 1000;
+
+const queryEnabled = () => true;
+
+/**
+ * Unread Signal-view thread counts per connected inbox, as the sidebar's Email
+ * badge renders them. Counts are Signal only — Noise is deliberately excluded,
+ * so the number always matches the tab a click lands on.
+ *
+ * The server returns one entry per accessible inbox, including inboxes with
+ * nothing unread, so an inbox missing from the response means "not linked"
+ * rather than "caught up".
+ */
+export function useEmailUnreadCountsQuery(
+  enabled: Accessor<boolean> = queryEnabled
+) {
+  return useQuery(() => ({
+    queryKey: emailKeys.unreadCounts.queryKey,
+    queryFn: async () =>
+      throwOnErr(async () => await emailClient.getUnreadCounts()),
+    enabled: enabled(),
+    staleTime: UNREAD_COUNTS_STALE_TIME,
+    refetchInterval: UNREAD_COUNTS_REFETCH_INTERVAL,
+    refetchOnWindowFocus: 'always' as const,
+  }));
+}
+
+/**
+ * Unread Signal counts keyed by email link id, plus the cross-inbox total the
+ * collapsed Email row shows. Both are `0`-safe before the query resolves, so
+ * the badge simply doesn't render rather than flashing a placeholder.
+ */
+export function useEmailUnreadCounts(enabled?: Accessor<boolean>) {
+  const query = useEmailUnreadCountsQuery(enabled);
+
+  const byLinkId = createMemo(() => {
+    const counts = new Map<string, number>();
+    for (const entry of query.data?.counts ?? []) {
+      counts.set(entry.link_id, entry.unread_count);
+    }
+    return counts;
+  });
+
+  return {
+    /** Unread Signal count for one inbox; `0` while the query is loading. */
+    forLink: (linkId: string) => byLinkId().get(linkId) ?? 0,
+    /** Unread Signal count summed across every connected inbox. */
+    total: () => query.data?.total ?? 0,
+  };
+}
+
+/** Refetch the unread counts — call after anything that reads or unreads mail. */
+export function invalidateEmailUnreadCounts() {
+  queryClient.invalidateQueries({
+    queryKey: emailKeys.unreadCounts.queryKey,
+  });
+}

apps/web/src/lib/service-clients/service-email/client.ts

@@ -20,6 +20,7 @@ import type {
   ListEmailFiltersResponse,
   ListLabelsResponse,
   ListLinksResponse,
+  ListUnreadCountsResponse,
   PatchSettingsRequest,
   PatchSettingsResponse,
   ResyncResponse,
@@ -298,6 +299,14 @@ export const emailClient = {
     ).map((result) => result);
   },
 
+  async getUnreadCounts() {
+    return (
+      await emailFetch<ListUnreadCountsResponse>('/email/links/unread-counts', {
+        method: 'GET',
+      })
+    ).map((result) => result);
+  },
+
   async listBackfillJobs() {
     return (
       await emailFetch<ListBackfillJobsResponse>('/email/backfill/gmail', {