Polish desktop sidebar navigation

desktop/src/app/AppShell.tsx

@@ -306,6 +306,7 @@ export function AppShell() {
     markChannelRead,
     markChannelUnread,
     unreadChannelIds,
+    unreadChannelCounts,
     highPriorityUnreadChannelIds,
     getEffectiveTimestamp: getChannelReadAt,
     readStateVersion,
@@ -406,10 +407,6 @@ export function AppShell() {
     setBrowseDialogType("stream");
     void refetchChannels();
   }, [refetchChannels]);
-  const handleOpenBrowseForums = React.useCallback(() => {
-    setBrowseDialogType("forum");
-    void refetchChannels();
-  }, [refetchChannels]);
   const handleOpenSearch = React.useCallback(() => {
     setSearchFocusRequest((request) => request + 1);
     void refetchChannels();
@@ -867,8 +864,6 @@ export function AppShell() {
                           onMarkAllChannelsRead={markAllChannelsRead}
                           onMarkChannelRead={markChannelRead}
                           onMarkChannelUnread={markChannelUnread}
-                          onOpenBrowseChannels={handleOpenBrowseChannels}
-                          onOpenBrowseForums={handleOpenBrowseForums}
                           onOpenDm={async ({ pubkeys }) => {
                             const directMessage =
                               await openDmMutation.mutateAsync({
@@ -908,6 +903,7 @@ export function AppShell() {
                           selectedChannelId={selectedChannelId}
                           selectedView={selectedView}
                           unreadChannelIds={unreadChannelIds}
+                          unreadChannelCounts={unreadChannelCounts}
                           mutedChannelIds={mutedChannelIds}
                           onMuteChannel={muteChannel}
                           onUnmuteChannel={unmuteChannel}

desktop/src/app/AppTopChrome.tsx

@@ -4,6 +4,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
 } from "lucide-react";
+import * as React from "react";
 
 import { TopbarSearch } from "@/features/search/ui/TopbarSearch";
 import type { Channel, SearchHit } from "@/shared/api/types";
@@ -98,6 +99,7 @@ function CenterColumnTopbarSearch({
 
 const TOP_CHROME_ICON_BUTTON_CLASS =
   "h-7 w-7 rounded-[4px] text-muted-foreground/70 hover:bg-border/45 hover:text-foreground [&_svg]:size-4";
+const TOP_CHROME_WHEEL_GUARD_HEIGHT = 40;
 
 function TopChromeSidebarTrigger() {
   const sidebar = useOptionalSidebar();
@@ -134,6 +136,22 @@ export function AppTopChrome({
   searchFocusRequest,
   searchLoading = false,
 }: AppTopChromeProps) {
+  React.useEffect(() => {
+    const handleWheel = (event: WheelEvent) => {
+      if (event.clientY <= TOP_CHROME_WHEEL_GUARD_HEIGHT) {
+        event.preventDefault();
+      }
+    };
+
+    document.addEventListener("wheel", handleWheel, {
+      capture: true,
+      passive: false,
+    });
+    return () => {
+      document.removeEventListener("wheel", handleWheel, { capture: true });
+    };
+  }, []);
+
   return (
     <>
       <div

desktop/src/features/channels/unreadChannelCounts.ts

@@ -0,0 +1,86 @@
+export type ObservedUnreadEvent = {
+  id: string;
+  createdAt: number;
+};
+
+export function mapsEqual(
+  a: ReadonlyMap<string, number>,
+  b: ReadonlyMap<string, number>,
+): boolean {
+  if (a.size !== b.size) return false;
+  for (const [key, value] of a) {
+    if (b.get(key) !== value) return false;
+  }
+  return true;
+}
+
+export function recordObservedUnreadEvent(
+  eventsByChannel: Map<string, Map<string, number>>,
+  channelId: string,
+  event: ObservedUnreadEvent,
+  limit: number,
+): void {
+  let eventsById = eventsByChannel.get(channelId);
+  if (!eventsById) {
+    eventsById = new Map<string, number>();
+    eventsByChannel.set(channelId, eventsById);
+  }
+  if (eventsById.has(event.id)) return;
+
+  eventsById.set(event.id, event.createdAt);
+  if (eventsById.size <= limit) return;
+
+  const oldest = [...eventsById.entries()].sort((a, b) => a[1] - b[1])[0]?.[0];
+  if (oldest) {
+    eventsById.delete(oldest);
+  }
+}
+
+export function countUnreadObservedEvents(
+  eventsById: ReadonlyMap<string, number> | undefined,
+  readAt: number | null,
+): number {
+  if (!eventsById) return 0;
+  let count = 0;
+  for (const createdAt of eventsById.values()) {
+    if (readAt === null || createdAt > readAt) count += 1;
+  }
+  return count;
+}
+
+export function buildChannelThreadRoots<
+  T extends { channelId: string; tags: string[][] },
+>(
+  items: readonly T[],
+  getRootId: (tags: string[][]) => string | null,
+): Map<string, Set<string>> {
+  const byChannel = new Map<string, Set<string>>();
+  for (const item of items) {
+    const rootId = getRootId(item.tags);
+    if (rootId === null) continue;
+    let roots = byChannel.get(item.channelId);
+    if (!roots) {
+      roots = new Set<string>();
+      byChannel.set(item.channelId, roots);
+    }
+    roots.add(rootId);
+  }
+  return byChannel;
+}
+
+export function channelUnreadFrontier(
+  channelMarker: number | null,
+  threadRoots: ReadonlySet<string> | undefined,
+  getThreadOwnMarker: (rootId: string) => number | null,
+): number | null {
+  let frontier = channelMarker;
+  if (threadRoots) {
+    for (const rootId of threadRoots) {
+      const own = getThreadOwnMarker(rootId);
+      if (own !== null && (frontier === null || own > frontier)) {
+        frontier = own;
+      }
+    }
+  }
+  return frontier;
+}

desktop/src/features/channels/unreadReadMarker.test.mjs

@@ -5,8 +5,8 @@ import { computeChannelUnreadMarker } from "../messages/lib/unreadMarker.ts";
 import {
   buildChannelThreadRoots,
   channelUnreadFrontier,
-  resolveChannelReadMarker,
-} from "./useUnreadChannels.ts";
+} from "./unreadChannelCounts.ts";
+import { resolveChannelReadMarker } from "./useUnreadChannels.ts";
 
 function topLevel(id, createdAt) {
   return { id, createdAt, author: "a", time: "", body: "", depth: 0 };