jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-27 12:40:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): adding ui state into the history stack (#967)

Browse Source 
Signed-off-by: tho <80c5f18be5aafa62cf6198c6335963ba3306b595288117c8ea2f805fc9bdc94a@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: tho <80c5f18be5aafa62cf6198c6335963ba3306b595288117c8ea2f805fc9bdc94a@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
Taylor Ho
2026-06-16 23:37:09 -07:00
committed by GitHub
parent c22c54e7ae
commit 538f33341f
24 changed files with 1083 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
desktop/playwright.config.ts
View File

@@ -20,6 +20,7 @@ export default defineConfig({
name: "smoke",
testMatch: [
"**/smoke.spec.ts",
"**/navigation.spec.ts",
"**/channels.spec.ts",
"**/badge.spec.ts",
"**/channel-browser.spec.ts",

41
desktop/src/app/AppShell.tsx
View File

@@ -62,6 +62,7 @@ import { useProfileQuery } from "@/features/profile/hooks";
import {
DEFAULT_SETTINGS_SECTION,
type SettingsSection,
isSettingsSection,
} from "@/features/settings/ui/SettingsPanels";
import { HuddleBar, HuddleProvider } from "@/features/huddle";
import { AppSidebar } from "@/features/sidebar/ui/AppSidebar";
@@ -95,11 +96,6 @@ export function AppShell() {
const workspacesHook = useWorkspaces();
const [isAddWorkspaceOpen, setIsAddWorkspaceOpen] = React.useState(false);
const [settingsOpen, setSettingsOpen] = React.useState(false);
const [settingsSection, setSettingsSection] = React.useState<SettingsSection>(
DEFAULT_SETTINGS_SECTION,
);
const [isChannelManagementOpen, setIsChannelManagementOpen] =
React.useState(false);
const [searchFocusRequest, setSearchFocusRequest] = React.useState(0);
@@ -119,7 +115,9 @@ export function AppShell() {
goHome,
goProjects,
goPulse,
goSettings,
goWorkflows,
closeSettings,
openSearchHit,
} = useAppNavigation();
const { canGoBack, canGoForward, goBack, goForward } =
@@ -128,6 +126,17 @@ export function AppShell() {
() => deriveShellRoute(location.pathname),
[location.pathname],
);
// Settings lives in the history stack: /settings?section=… opens it, back
// (or "Back to app") returns to the previous entry — panels and all — and
// reloads restore the open section from the URL.
const settingsOpen = location.pathname === "/settings";
const locationSearchSection = (location.search as { section?: unknown })
.section;
const settingsSection: SettingsSection = isSettingsSection(
locationSearchSection,
)
? locationSearchSection
: DEFAULT_SETTINGS_SECTION;
const startupReady = useDeferredStartup();
@@ -336,7 +345,7 @@ export function AppShell() {
identityQuery.data?.pubkey,
notificationSettings.settings,
notificationSettings.setDesktopEnabled,
selectedView === "home",
selectedView === "home" && !settingsOpen,
getChannelReadAt,
readStateVersion,
highPriorityUnreadChannelIds,
@@ -420,15 +429,23 @@ export function AppShell() {
const handleOpenSettings = React.useCallback(
(section: SettingsSection = DEFAULT_SETTINGS_SECTION) => {
setIsChannelManagementOpen(false);
setSettingsSection(section);
setSettingsOpen(true);
void goSettings(section);
},
[],
[goSettings],
);
const handleCloseSettings = React.useCallback(() => {
setSettingsOpen(false);
}, []);
closeSettings();
}, [closeSettings]);
// Section switches rewrite the settings entry rather than stacking one
// history entry per section, so back always exits settings in one step.
const handleSettingsSectionChange = React.useCallback(
(section: SettingsSection) => {
void goSettings(section, { replace: true });
},
[goSettings],
);
const handleOpenSearchResult = React.useCallback(
(hit: SearchHit) => {
@@ -725,7 +742,7 @@ export function AppShell() {
notificationPermission={notificationSettings.permission}
notificationSettings={notificationSettings.settings}
onClose={handleCloseSettings}
onSectionChange={setSettingsSection}
onSectionChange={handleSettingsSectionChange}
onSetDesktopNotificationsEnabled={
notificationSettings.setDesktopEnabled
}

23
desktop/src/app/navigation/useAppNavigation.ts
View File

@@ -185,6 +185,27 @@ export function useAppNavigation() {
[commitNavigation],
);
const goSettings = React.useCallback(
(section?: string, behavior?: NavigationBehavior) =>
commitNavigation(
{
to: "/settings",
search: section ? { section } : {},
},
behavior,
),
[commitNavigation],
);
const closeSettings = React.useCallback(() => {
if (canGoBack) {
router.history.back();
return;
}
void goHome({ replace: true });
}, [canGoBack, goHome, router.history]);
const closeWorkflowDetail = React.useCallback(() => {
if (canGoBack) {
router.history.back();
@@ -231,6 +252,7 @@ export function useAppNavigation() {
return {
closeForumPost,
closeSettings,
closeWorkflowDetail,
goAgents,
goChannel,
@@ -239,6 +261,7 @@ export function useAppNavigation() {
goProject,
goProjects,
goPulse,
goSettings,
goWorkflow,
goWorkflows,
openSearchHit,

21
desktop/src/app/routeTree.gen.ts
View File

@@ -6,6 +6,7 @@
import { Route as rootRouteImport } from "./routes/root";
import { Route as workflowsRouteImport } from "./routes/workflows";
import { Route as settingsRouteImport } from "./routes/settings";
import { Route as pulseRouteImport } from "./routes/pulse";
import { Route as projectsRouteImport } from "./routes/projects";
import { Route as agentsRouteImport } from "./routes/agents";
@@ -20,6 +21,11 @@ const workflowsRoute = workflowsRouteImport.update({
path: "/workflows",
getParentRoute: () => rootRouteImport,
} as any);
const settingsRoute = settingsRouteImport.update({
id: "/settings",
path: "/settings",
getParentRoute: () => rootRouteImport,
} as any);
const pulseRoute = pulseRouteImport.update({
id: "/pulse",
path: "/pulse",
@@ -67,6 +73,7 @@ export interface FileRoutesByFullPath {
"/agents": typeof agentsRoute;
"/projects": typeof projectsRoute;
"/pulse": typeof pulseRoute;
"/settings": typeof settingsRoute;
"/workflows": typeof workflowsRoute;
"/channels/$channelId": typeof channelsDotchannelIdRoute;
"/projects/$projectId": typeof projectsDotprojectIdRoute;
@@ -78,6 +85,7 @@ export interface FileRoutesByTo {
"/agents": typeof agentsRoute;
"/projects": typeof projectsRoute;
"/pulse": typeof pulseRoute;
"/settings": typeof settingsRoute;
"/workflows": typeof workflowsRoute;
"/channels/$channelId": typeof channelsDotchannelIdRoute;
"/projects/$projectId": typeof projectsDotprojectIdRoute;
@@ -90,6 +98,7 @@ export interface FileRoutesById {
"/agents": typeof agentsRoute;
"/projects": typeof projectsRoute;
"/pulse": typeof pulseRoute;
"/settings": typeof settingsRoute;
"/workflows": typeof workflowsRoute;
"/channels/$channelId": typeof channelsDotchannelIdRoute;
"/projects/$projectId": typeof projectsDotprojectIdRoute;
@@ -103,6 +112,7 @@ export interface FileRouteTypes {
| "/agents"
| "/projects"
| "/pulse"
| "/settings"
| "/workflows"
| "/channels/$channelId"
| "/projects/$projectId"
@@ -114,6 +124,7 @@ export interface FileRouteTypes {
| "/agents"
| "/projects"
| "/pulse"
| "/settings"
| "/workflows"
| "/channels/$channelId"
| "/projects/$projectId"
@@ -125,6 +136,7 @@ export interface FileRouteTypes {
| "/agents"
| "/projects"
| "/pulse"
| "/settings"
| "/workflows"
| "/channels/$channelId"
| "/projects/$projectId"
@@ -137,6 +149,7 @@ export interface RootRouteChildren {
agentsRoute: typeof agentsRoute;
projectsRoute: typeof projectsRoute;
pulseRoute: typeof pulseRoute;
settingsRoute: typeof settingsRoute;
workflowsRoute: typeof workflowsRoute;
channelsDotchannelIdRoute: typeof channelsDotchannelIdRoute;
projectsDotprojectIdRoute: typeof projectsDotprojectIdRoute;
@@ -153,6 +166,13 @@ declare module "@tanstack/react-router" {
preLoaderRoute: typeof workflowsRouteImport;
parentRoute: typeof rootRouteImport;
};
"/settings": {
id: "/settings";
path: "/settings";
fullPath: "/settings";
preLoaderRoute: typeof settingsRouteImport;
parentRoute: typeof rootRouteImport;
};
"/pulse": {
id: "/pulse";
path: "/pulse";
@@ -217,6 +237,7 @@ const rootRouteChildren: RootRouteChildren = {
agentsRoute: agentsRoute,
projectsRoute: projectsRoute,
pulseRoute: pulseRoute,
settingsRoute: settingsRoute,
workflowsRoute: workflowsRoute,
channelsDotchannelIdRoute: channelsDotchannelIdRoute,
projectsDotprojectIdRoute: projectsDotprojectIdRoute,

1
desktop/src/app/routes.ts
View File

@@ -4,6 +4,7 @@ export const routes = rootRoute("root.tsx", [
index("index.tsx"),
route("/agents", "agents.tsx"),
route("/pulse", "pulse.tsx"),
route("/settings", "settings.tsx"),
route("/workflows", "workflows.tsx"),
route("/workflows/$workflowId", "workflows.$workflowId.tsx"),
route("/projects", "projects.tsx"),

2
desktop/src/app/routes/ChannelRouteScreen.tsx
View File

@@ -42,7 +42,7 @@ export function ChannelRouteScreen({
React.useEffect(() => {
let isCancelled = false;
if (!targetMessageId || selectedPostId) {
if ((!targetMessageId && !targetThreadRootId) || selectedPostId) {
setTargetMessageEvents([]);
return () => {
isCancelled = true;

28
desktop/src/app/routes/channels.$channelId.tsx
View File

@@ -4,22 +4,32 @@ import { createFileRoute } from "@tanstack/react-router";
import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
type ChannelRouteSearch = {
agentSession?: string;
messageId?: string;
profile?: string;
profileView?: "memories" | "channels";
thread?: string;
threadRootId?: string;
};
function nonEmptyString(value: unknown): string | undefined {
return typeof value === "string" && value.length > 0 ? value : undefined;
}
function profileViewValue(value: unknown): "memories" | "channels" | undefined {
return value === "memories" || value === "channels" ? value : undefined;
}
function validateChannelSearch(
search: Record<string, unknown>,
): ChannelRouteSearch {
return {
messageId:
typeof search.messageId === "string" && search.messageId.length > 0
? search.messageId
: undefined,
threadRootId:
typeof search.threadRootId === "string" && search.threadRootId.length > 0
? search.threadRootId
: undefined,
agentSession: nonEmptyString(search.agentSession),
messageId: nonEmptyString(search.messageId),
profile: nonEmptyString(search.profile),
profileView: profileViewValue(search.profileView),
thread: nonEmptyString(search.thread),
threadRootId: nonEmptyString(search.threadRootId),
};
}
@@ -46,7 +56,7 @@ function ChannelRouteComponent() {
selectedPostId={null}
targetMessageId={search.messageId ?? null}
targetReplyId={null}
targetThreadRootId={search.threadRootId ?? null}
targetThreadRootId={search.threadRootId ?? search.thread ?? null}
/>
</React.Suspense>
);

14
desktop/src/app/routes/index.tsx
View File

@@ -10,7 +10,21 @@ import {
} from "@/features/onboarding/welcome";
import { useIdentityQuery } from "@/shared/api/hooks";
type HomeRouteSearch = {
item?: string;
};
function validateHomeSearch(search: Record<string, unknown>): HomeRouteSearch {
return {
item:
typeof search.item === "string" && search.item.length > 0
? search.item
: undefined,
};
}
export const Route = createFileRoute("/")({
validateSearch: validateHomeSearch,
component: HomeRouteComponent,
});

21
desktop/src/app/routes/pulse.tsx
View File

@@ -9,7 +9,28 @@ const PulseScreen = React.lazy(async () => {
return { default: module.PulseScreen };
});
type PulseRouteSearch = {
profile?: string;
profileView?: "memories" | "channels";
};
function validatePulseSearch(
search: Record<string, unknown>,
): PulseRouteSearch {
return {
profile:
typeof search.profile === "string" && search.profile.length > 0
? search.profile
: undefined,
profileView:
search.profileView === "memories" || search.profileView === "channels"
? search.profileView
: undefined,
};
}
export const Route = createFileRoute("/pulse")({
validateSearch: validatePulseSearch,
component: PulseRouteComponent,
});

31
desktop/src/app/routes/settings.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { createFileRoute } from "@tanstack/react-router";
import {
type SettingsSection,
isSettingsSection,
} from "@/features/settings/ui/SettingsPanels";
type SettingsRouteSearch = {
section?: SettingsSection;
};
function validateSettingsSearch(
search: Record<string, unknown>,
): SettingsRouteSearch {
return {
section: isSettingsSection(search.section) ? search.section : undefined,
};
}
export const Route = createFileRoute("/settings")({
validateSearch: validateSettingsSearch,
component: SettingsRouteComponent,
});
// Settings renders at the AppShell level (it replaces the sidebar, top
// chrome, and router outlet wholesale), keyed off this route's presence —
// see AppShell. The outlet is unmounted while settings is open, so this
// component never actually renders.
function SettingsRouteComponent() {
return null;
}

14
desktop/src/features/channels/ui/ChannelPane.tsx
View File

@@ -18,7 +18,10 @@ import {
import { useComposerHeightPadding } from "@/features/messages/ui/useComposerHeightPadding";
import { TypingIndicatorRow } from "@/features/messages/ui/TypingIndicatorRow";
import type { TypingIndicatorEntry } from "@/features/messages/useChannelTyping";
import { UserProfilePanel } from "@/features/profile/ui/UserProfilePanel";
import {
type ProfilePanelView,
UserProfilePanel,
} from "@/features/profile/ui/UserProfilePanel";
import { ChannelFindBar } from "@/features/search/ui/ChannelFindBar";
import { AgentSessionThreadPanel } from "@/features/channels/ui/AgentSessionThreadPanel";
import { RightAuxiliaryPane } from "@/features/channels/ui/RightAuxiliaryPane";
@@ -134,7 +137,12 @@ type ChannelPaneProps = {
profiles?: UserProfileLookup;
openThreadHeadId: string | null;
openAgentSessionPubkey: string | null;
onProfilePanelViewChange: (
view: ProfilePanelView,
options?: { replace?: boolean },
) => void;
profilePanelPubkey?: string | null;
profilePanelView: ProfilePanelView;
threadHeadMessage: TimelineMessage | null;
threadMessages: MainTimelineEntry[];
threadPanelWidthPx: number;
@@ -215,7 +223,9 @@ export const ChannelPane = React.memo(function ChannelPane({
profiles,
openThreadHeadId,
openAgentSessionPubkey,
onProfilePanelViewChange,
profilePanelPubkey,
profilePanelView,
targetMessageId,
threadHeadMessage,
threadMessages,
@@ -919,8 +929,10 @@ export const ChannelPane = React.memo(function ChannelPane({
layout={useSplitAuxiliaryPane ? "split" : "standalone"}
onClose={onCloseProfilePanel}
onOpenDm={onOpenDm}
onViewChange={onProfilePanelViewChange}
pubkey={profilePanelPubkey}
splitPaneClamp
view={profilePanelView}
widthPx={threadPanelWidthPx}
/>
);

384
desktop/src/features/channels/ui/ChannelScreen.tsx
View File

@@ -2,14 +2,6 @@ import * as React from "react";
import { useAppShell } from "@/app/AppShellContext";
import { useActiveChannelHeader } from "@/features/channels/useActiveChannelHeader";
import { useChannelPaneHandlers } from "@/features/channels/useChannelPaneHandlers";
import {
buildCreatedAtByMessageId,
buildDirectReplyIdsByParentId,
collectReplyDescendantIds,
directRepliesMaxCreatedAt,
subtreeMaxCreatedAt,
} from "@/features/channels/lib/subtreeCreatedAt";
import { computeThreadReplyUnreadCounts } from "@/features/channels/lib/threadReplyUnreadCounts";
import {
useChannelMembersQuery,
useJoinChannelMutation,
@@ -41,15 +33,7 @@ import {
collectMessageMentionPubkeys,
formatTimelineMessages,
} from "@/features/messages/lib/formatTimelineMessages";
import {
buildThreadPanelDataFromIndex,
buildThreadPanelIndex,
} from "@/features/messages/lib/threadPanel";
import { getThreadReference } from "@/features/messages/lib/threading";
import {
computeChannelUnreadMarker,
computeThreadUnreadMarker,
} from "@/features/messages/lib/unreadMarker";
import { imetaMediaFromTags } from "@/features/messages/lib/imetaMediaMarkdown";
import { useFetchOlderMessages } from "@/features/messages/useFetchOlderMessages";
import { useLoadMissingAncestors } from "@/features/messages/useLoadMissingAncestors";
@@ -75,9 +59,10 @@ import {
useChannelActivityTyping,
} from "./useChannelActivityTyping";
import { useChannelAgentSessions } from "./useChannelAgentSessions";
import { useChannelPanelHistoryState } from "./useChannelPanelHistoryState";
import { useChannelProfilePanel } from "./useChannelProfilePanel";
import { useChannelRouteTarget } from "./useChannelRouteTarget";
import { useWelcomeInitialUnreadSuppression } from "./useWelcomeInitialUnreadSuppression";
import { useChannelUnreadState } from "./useChannelUnreadState";
import type { ChannelScreenProps } from "./ChannelScreen.types";
const HEADER_ACTIONS_COMPACT_BREAKPOINT_PX = 760;
@@ -108,9 +93,16 @@ export function ChannelScreen({
isNotifiedForThread,
setTopbarSearchHidden,
} = useAppShell();
const [profilePanelPubkey, setProfilePanelPubkey] = React.useState<
string | null
>(null);
const {
openAgentSessionPubkey,
openThreadHeadId,
profilePanelPubkey,
profilePanelView,
setOpenAgentSessionPubkey,
setOpenThreadHeadId,
setProfilePanelPubkey,
setProfilePanelView,
} = useChannelPanelHistoryState();
const {
canReset: canResetThreadPanelWidth,
onResetWidth: handleThreadPanelWidthReset,
@@ -121,9 +113,6 @@ export function ChannelScreen({
const [isAddBotOpen, setIsAddBotOpen] = React.useState(false);
const [channelContentRef, channelContentWidthPx] =
useElementWidth<HTMLDivElement>();
const [openThreadHeadId, setOpenThreadHeadId] = React.useState<string | null>(
null,
);
const isNotifiedForCurrentThread =
openThreadHeadId != null ? isNotifiedForThread(openThreadHeadId) : false;
const [expandedThreadReplyIds, setExpandedThreadReplyIds] = React.useState(
@@ -170,55 +159,6 @@ export function ChannelScreen({
const activeReadAt = latestActiveMessage
? new Date(latestActiveMessage.created_at * 1_000).toISOString()
: null;
// Capture the read frontier as it stood the instant this channel was opened,
// BEFORE the mark-read effect below advances it to latest. Written during
// render (not in an effect) so the value is read prior to any effect for
// this commit — the divider must reflect "what was unread on open", not the
// post-open frontier. Keyed per channel and recomputed only when the channel
// id changes, never when activeReadAt advances, or the divider would vanish
// the moment the open marks the channel read.
const openFrontierRef = React.useRef(new Map<string, number | null>());
if (activeChannelId && !openFrontierRef.current.has(activeChannelId)) {
openFrontierRef.current.set(
activeChannelId,
getChannelReadAt(activeChannelId),
);
}
const openFrontierSeconds = activeChannelId
? (openFrontierRef.current.get(activeChannelId) ?? null)
: null;
// Channels the user manually marked unread this session. A deliberate
// mark-unread has no meaningful "new" boundary inside the timeline — the
// open-time snapshot already covers every message — so the pill and divider
// would otherwise render nothing while the sidebar dot says unread. Suppress
// the marker for such channels to avoid that visible contradiction. The flag
// is cleared on re-open (a fresh snapshot is recomputed for the channel).
const forcedUnreadRef = React.useRef(new Set<string>());
const [, forceUnreadRender] = React.useReducer((n: number) => n + 1, 0);
const isActiveChannelForcedUnread =
!!activeChannelId && forcedUnreadRef.current.has(activeChannelId);
const isActiveWelcomeInitialUnreadSuppressed =
useWelcomeInitialUnreadSuppression(activeChannelId, forceUnreadRender);
// Drop the forced-unread flag when the user leaves a channel, so reopening
// it recomputes a normal marker rather than staying suppressed forever.
React.useEffect(() => {
const channelId = activeChannelId;
if (!channelId) return;
return () => {
forcedUnreadRef.current.delete(channelId);
};
}, [activeChannelId]);
// Clear the open-time frontier on channel leave so re-visiting captures a
// fresh read position. Without this, switching away and back would reuse the
// stale frontier from the first open, producing a phantom "New" divider over
// already-read messages.
React.useEffect(() => {
const channelId = activeChannelId;
if (!channelId) return;
return () => {
openFrontierRef.current.delete(channelId);
};
}, [activeChannelId]);
React.useEffect(() => {
if (!activeChannelId || activeChannel?.isMember === false) {
return;
@@ -403,245 +343,33 @@ export function ChannelScreen({
channelId: activeChannelId,
messages: timelineMessages,
});
// Oldest unread top-level message + count from the open-time frontier.
// Keyed per channel so the pill/divider survive the mark-read effect.
const { firstUnreadMessageId, unreadCount } = React.useMemo(
() =>
computeChannelUnreadMarker(
timelineMessages,
openFrontierSeconds,
isActiveChannelForcedUnread || isActiveWelcomeInitialUnreadSuppressed,
currentPubkey,
),
[
currentPubkey,
isActiveChannelForcedUnread,
isActiveWelcomeInitialUnreadSuppressed,
openFrontierSeconds,
timelineMessages,
],
);
const directReplyIdsByParentId = React.useMemo(
() => buildDirectReplyIdsByParentId(timelineMessages),
[timelineMessages],
);
const getFirstReplyIdForMessage = React.useCallback(
(messageId: string) => directReplyIdsByParentId.get(messageId)?.[0] ?? null,
[directReplyIdsByParentId],
);
const getReplyDescendantIdsForMessage = React.useCallback(
(messageId: string) =>
collectReplyDescendantIds(messageId, directReplyIdsByParentId),
[directReplyIdsByParentId],
);
const createdAtByMessageId = React.useMemo(
() => buildCreatedAtByMessageId(timelineMessages),
[timelineMessages],
);
// Newest createdAt across an expanded branch (the message itself plus every
// descendant). Drilling into a branch advances the thread frontier to this,
// consuming everything chronologically up to the deepest reply read. Returns
// null when the message is absent so the caller skips the read-state write.
const getSubtreeMaxCreatedAt = React.useCallback(
(messageId: string) =>
subtreeMaxCreatedAt(
messageId,
directReplyIdsByParentId,
createdAtByMessageId,
),
[createdAtByMessageId, directReplyIdsByParentId],
);
const threadPanelIndex = React.useMemo(
() => buildThreadPanelIndex(timelineMessages),
[timelineMessages],
);
const threadPanelData = React.useMemo(
() =>
buildThreadPanelDataFromIndex(
threadPanelIndex,
openThreadHeadId,
threadReplyTargetId,
expandedThreadReplyIds,
),
[
expandedThreadReplyIds,
openThreadHeadId,
threadReplyTargetId,
threadPanelIndex,
],
);
const openThreadHeadMessage = threadPanelData.threadHead;
const threadMessages = threadPanelData.visibleReplies;
const threadReplyTargetMessage = threadPanelData.replyTargetMessage;
// --- Thread unread state ---
// Capture the thread read frontier on open (same pattern as channel frontier).
// Keyed per thread root so switching threads captures a fresh frontier.
const threadOpenFrontierRef = React.useRef(new Map<string, number | null>());
if (
openThreadHeadId &&
!threadOpenFrontierRef.current.has(openThreadHeadId)
) {
threadOpenFrontierRef.current.set(
openThreadHeadId,
getThreadReadAt(openThreadHeadId),
);
}
const threadOpenFrontierSeconds = openThreadHeadId
? (threadOpenFrontierRef.current.get(openThreadHeadId) ?? null)
: null;
// Clear the thread frontier when the thread closes so re-opening captures fresh.
React.useEffect(() => {
const rootId = openThreadHeadId;
if (!rootId) return;
return () => {
threadOpenFrontierRef.current.delete(rootId);
};
}, [openThreadHeadId]);
// Mark thread read when the panel opens, advancing the frontier to the max
// createdAt over the head and its DIRECT replies — the content visible
// without expanding anything. This mirrors channel-open parity: opening
// consumes what you can see, clearing the channel-level badge for unread that
// lived in the visible direct replies, while deeper collapsed branches stay
// unread until drilled into (expand advances the frontier further from here).
// Only persist read state for threads the user has notification interest in
// (participated, authored, or followed) to avoid bloating the context blob.
React.useEffect(() => {
if (!openThreadHeadId) return;
if (!isNotifiedForCurrentThread) return;
const openReadCeiling = directRepliesMaxCreatedAt(
openThreadHeadId,
directReplyIdsByParentId,
createdAtByMessageId,
);
if (openReadCeiling === null) return;
markThreadRead(openThreadHeadId, openReadCeiling);
}, [
openThreadHeadId,
directReplyIdsByParentId,
createdAtByMessageId,
markThreadRead,
isNotifiedForCurrentThread,
]);
// Compute the in-thread "New" divider position from the open-time frontier.
const { firstUnreadReplyId: threadFirstUnreadReplyId } = React.useMemo(() => {
if (!openThreadHeadId || threadMessages.length === 0) {
return { firstUnreadReplyId: null, unreadCount: 0 };
}
const replies = threadMessages.map((entry) => entry.message);
return computeThreadUnreadMarker(
replies,
threadOpenFrontierSeconds,
currentPubkey,
);
}, [
const {
firstUnreadMessageId,
getFirstReplyIdForMessage,
getReplyDescendantIdsForMessage,
getSubtreeMaxCreatedAt,
handleMarkUnread,
openThreadHeadMessage,
threadFirstUnreadReplyId,
threadMessages,
threadReplyTargetMessage,
threadReplyUnreadCounts,
threadUnreadCounts,
unreadCount,
} = useChannelUnreadState({
activeChannelId,
timelineMessages,
currentPubkey,
openThreadHeadId,
threadMessages,
threadOpenFrontierSeconds,
]);
// Per-row subtree unread counts for the in-panel thread summary rows. Scoped
// to the open thread's subtree and measured against the open-time frontier
// snapshot (threadOpenFrontierSeconds) — the same boundary the in-thread
// divider uses (above). The LIVE root marker can't be used here: on
// channel-open markChannelRead advances the channel marker to the newest
// top-level message, and effective(thread) = max(thread_own, channel_marker),
// so a channel marker past the nested replies would zero every badge the
// instant the panel opens. The snapshot reflects "what was unread on open."
// Expand-clears-badge is preserved independently: it's driven by the
// expandedSubtreeReplyIds gate inside computeThreadReplyUnreadCounts, not by
// the frontier.
const threadReplyUnreadCounts = React.useMemo(
() =>
openThreadHeadId
? computeThreadReplyUnreadCounts({
timelineMessages,
subtreeReplyIds: getReplyDescendantIdsForMessage(openThreadHeadId),
visibleReplyIds: threadMessages.map((entry) => entry.message.id),
expandedReplyIds: expandedThreadReplyIds,
expandedSubtreeReplyIds: new Set(
[...expandedThreadReplyIds].flatMap((id) =>
getReplyDescendantIdsForMessage(id),
),
),
frontierSeconds: threadOpenFrontierSeconds,
currentPubkey,
})
: new Map<string, number>(),
[
openThreadHeadId,
threadMessages,
timelineMessages,
threadOpenFrontierSeconds,
expandedThreadReplyIds,
getReplyDescendantIdsForMessage,
currentPubkey,
],
);
// Snapshot per-thread read frontiers at channel-open time. Same pattern as
// openFrontierRef: captured during render (before the mark-read effect) so
// the badge reflects "what was unread on open" rather than the post-advance
// frontier. Keyed by activeChannelId → rootId → frontier value.
const threadBadgeFrontiersRef = React.useRef(
new Map<string, Map<string, number | null>>(),
);
if (activeChannelId) {
let channelFrontiers = threadBadgeFrontiersRef.current.get(activeChannelId);
if (!channelFrontiers) {
channelFrontiers = new Map();
threadBadgeFrontiersRef.current.set(activeChannelId, channelFrontiers);
}
for (const message of timelineMessages) {
if (message.parentId) continue;
if (!isNotifiedForThread(message.id)) continue;
if (channelFrontiers.has(message.id)) continue;
// Only capture for messages that have thread replies
const hasReplies = timelineMessages.some(
(m) => m.parentId === message.id,
);
if (!hasReplies) continue;
channelFrontiers.set(message.id, getThreadReadAt(message.id));
}
}
// Clear the thread badge frontiers on channel leave (same cleanup as
// openFrontierRef) so re-visiting captures fresh snapshots.
React.useEffect(() => {
const channelId = activeChannelId;
if (!channelId) return;
return () => {
threadBadgeFrontiersRef.current.delete(channelId);
};
}, [activeChannelId]);
// Compute per-thread unread counts for summary rows in the main timeline.
// Only compute for threads the user has notification interest in — this
// aligns the badge display with the read-state write path. Uses the
// snapshotted frontier (threadBadgeFrontiersRef) so badges are stable for
// the session and don't flash when markChannelRead advances the channel
// marker.
const threadUnreadCounts = React.useMemo(() => {
const counts = new Map<string, number>();
const channelFrontiers = activeChannelId
? threadBadgeFrontiersRef.current.get(activeChannelId)
: undefined;
for (const message of timelineMessages) {
if (message.parentId) continue;
if (!isNotifiedForThread(message.id)) continue;
const directReplies = timelineMessages.filter(
(m) => m.parentId === message.id,
);
if (directReplies.length === 0) continue;
const frontier = channelFrontiers?.get(message.id) ?? null;
const { unreadCount } = computeThreadUnreadMarker(
directReplies,
frontier,
currentPubkey,
);
if (unreadCount > 0) {
counts.set(message.id, unreadCount);
}
}
return counts;
}, [activeChannelId, currentPubkey, timelineMessages, isNotifiedForThread]);
threadReplyTargetId,
expandedThreadReplyIds,
isNotifiedForCurrentThread,
getChannelReadAt,
getThreadReadAt,
markChannelUnread,
markThreadRead,
isNotifiedForThread,
});
const editTargetMessage = React.useMemo(
() =>
timelineMessages.find((message) => message.id === editTargetId) ?? null,
@@ -707,27 +435,28 @@ export function ChannelScreen({
activeChannel && !activeChannel.archivedAt && activeChannel.isMember
? handleSendVideoReviewComment
: undefined;
const handleMarkUnread = React.useCallback(() => {
if (!activeChannelId) return;
// Mirror the deliberate mark-unread locally so the timeline marker is
// suppressed (see forcedUnreadRef above). Re-render so the memo re-runs.
forcedUnreadRef.current.add(activeChannelId);
forceUnreadRender();
markChannelUnread(activeChannelId);
}, [activeChannelId, markChannelUnread]);
const {
channelAgentSessionAgents,
closeAgentSession: handleCloseAgentSession,
openAgentSession: handleOpenAgentSession,
openAgentSessionPubkey,
openThreadAndCloseAgentSession: handleOpenThreadAndCloseAgentSession,
} = useChannelAgentSessions({
activeChannel,
activeChannelId,
// The agent list comes from three queries; treat it as loaded only once
// none of them are in their initial fetch, so a channel with genuinely
// zero agents can still auto-close a stale agentSession param. A disabled
// query (e.g. no active channel) reports isLoading=false, which is fine.
agentsLoaded:
!channelMembersQuery.isLoading &&
!managedAgentsQuery.isLoading &&
!relayAgentsQuery.isLoading,
channelMembers,
handleOpenThread,
managedAgents: activeChannelAgentSessionAgents,
openAgentSessionPubkey,
setExpandedThreadReplyIds,
setOpenAgentSessionPubkey,
setOpenThreadHeadId,
setProfilePanelPubkey,
setThreadReplyTargetId,
@@ -749,17 +478,17 @@ export function ChannelScreen({
!hasTimelineData &&
messagesQuery.isPending;
const shouldShowInitialChannelLoading = isTimelineLoading;
// Panel identity (thread/profile/agent session) lives in the URL search
// params, so channel changes and back/forward traversals carry it per
// history entry — only the local ephemeral targets need resetting here.
const resetComposerTargets = React.useCallback(
(_channelId: string | null) => {
setOpenThreadHeadId(null);
setExpandedThreadReplyIds(new Set());
setThreadScrollTargetId(null);
setThreadReplyTargetId(null);
handleCloseAgentSession();
setEditTargetId(null);
setProfilePanelPubkey(null);
},
[handleCloseAgentSession],
[],
);
const handleThreadScrollTargetResolved = React.useCallback(() => {
setThreadScrollTargetId(null);
@@ -782,7 +511,12 @@ export function ChannelScreen({
});
React.useEffect(() => {
if (openThreadHeadId && !openThreadHeadMessage) {
setOpenThreadHeadId(null);
// While the timeline is still loading (e.g. a reload restoring the
// thread param from the URL) the head simply hasn't arrived yet.
if (isTimelineLoading) {
return;
}
setOpenThreadHeadId(null, { replace: true });
setExpandedThreadReplyIds(new Set());
setThreadScrollTargetId(null);
return;
@@ -802,8 +536,10 @@ export function ChannelScreen({
}, [
editTargetId,
editTargetMessage,
isTimelineLoading,
openThreadHeadId,
openThreadHeadMessage,
setOpenThreadHeadId,
threadReplyTargetId,
threadReplyTargetMessage,
]);
@@ -960,7 +696,9 @@ export function ChannelScreen({
onToggleReaction={effectiveToggleReaction}
openAgentSessionPubkey={openAgentSessionPubkey}
openThreadHeadId={openThreadHeadId}
onProfilePanelViewChange={setProfilePanelView}
profilePanelPubkey={profilePanelPubkey}
profilePanelView={profilePanelView}
personaLookup={personaLookup}
profiles={messageProfiles}
firstUnreadMessageId={firstUnreadMessageId}

39
desktop/src/features/channels/ui/useChannelAgentSessions.ts
View File

@@ -8,6 +8,7 @@ import type {
RelayAgent,
} from "@/shared/api/types";
import { normalizePubkey } from "@/shared/lib/pubkey";
import type { PanelValueSetter } from "./useChannelPanelHistoryState";
export type ChannelAgentSessionAgent = Pick<
ManagedAgent,
@@ -22,10 +23,13 @@ export type ChannelAgentSessionAgent = Pick<
type UseChannelAgentSessionsOptions = {
activeChannel: Channel | null;
activeChannelId: string | null;
agentsLoaded: boolean;
channelMembers?: ChannelMember[];
handleOpenThread: (message: TimelineMessage) => void;
managedAgents: ChannelAgentSessionAgent[];
openAgentSessionPubkey: string | null;
setExpandedThreadReplyIds: (value: Set<string>) => void;
setOpenAgentSessionPubkey: PanelValueSetter;
setOpenThreadHeadId: (value: string | null) => void;
setProfilePanelPubkey: (value: string | null) => void;
setThreadReplyTargetId: (value: string | null) => void;
@@ -150,19 +154,18 @@ export function getChannelAgentSessionAgents({
export function useChannelAgentSessions({
activeChannel,
activeChannelId,
agentsLoaded,
channelMembers,
handleOpenThread,
managedAgents,
openAgentSessionPubkey,
setExpandedThreadReplyIds,
setOpenAgentSessionPubkey,
setOpenThreadHeadId,
setProfilePanelPubkey,
setThreadReplyTargetId,
setThreadScrollTargetId,
}: UseChannelAgentSessionsOptions) {
const [openAgentSessionPubkey, setOpenAgentSessionPubkey] = React.useState<
string | null
>(null);
const channelAgentSessionAgents = React.useMemo(
() =>
getChannelAgentSessionAgents({
@@ -176,7 +179,7 @@ export function useChannelAgentSessions({
const closeAgentSession = React.useCallback(() => {
setOpenAgentSessionPubkey(null);
}, []);
}, [setOpenAgentSessionPubkey]);
const openAgentSession = React.useCallback(
(pubkey: string) => {
@@ -189,6 +192,7 @@ export function useChannelAgentSessions({
},
[
setExpandedThreadReplyIds,
setOpenAgentSessionPubkey,
setOpenThreadHeadId,
setProfilePanelPubkey,
setThreadReplyTargetId,
@@ -196,9 +200,12 @@ export function useChannelAgentSessions({
],
);
const selectAgentSession = React.useCallback((pubkey: string) => {
setOpenAgentSessionPubkey(pubkey);
}, []);
const selectAgentSession = React.useCallback(
(pubkey: string) => {
setOpenAgentSessionPubkey(pubkey);
},
[setOpenAgentSessionPubkey],
);
const openThreadAndCloseAgentSession = React.useCallback(
(message: TimelineMessage) => {
@@ -206,21 +213,31 @@ export function useChannelAgentSessions({
setProfilePanelPubkey(null);
handleOpenThread(message);
},
[handleOpenThread, setProfilePanelPubkey],
[handleOpenThread, setOpenAgentSessionPubkey, setProfilePanelPubkey],
);
React.useEffect(() => {
// An empty agent list can mean the queries behind it are still loading
// (e.g. a reload restoring the agentSession URL param), so wait until the
// agent queries have settled. Once loaded, a channel that legitimately has
// zero agents will still auto-close a stale param.
if (
openAgentSessionPubkey &&
agentsLoaded &&
!channelAgentSessionAgents.some(
(agent) =>
normalizePubkey(agent.pubkey) ===
normalizePubkey(openAgentSessionPubkey),
)
) {
setOpenAgentSessionPubkey(null);
setOpenAgentSessionPubkey(null, { replace: true });
}
}, [channelAgentSessionAgents, openAgentSessionPubkey]);
}, [
agentsLoaded,
channelAgentSessionAgents,
openAgentSessionPubkey,
setOpenAgentSessionPubkey,
]);
return {
channelAgentSessionAgents,

74
desktop/src/features/channels/ui/useChannelPanelHistoryState.ts Normal file
View File

@@ -0,0 +1,74 @@
import * as React from "react";
import type { ProfilePanelView } from "@/features/profile/ui/UserProfilePanel";
import {
type HistorySearchSetterOptions,
useHistorySearchState,
} from "@/shared/hooks/useHistorySearchState";
/**
* Auxiliary-panel state for the channel routes, backed by URL search params
* via useHistorySearchState: back/forward restores the panel a given entry
* was showing, and reloads restore the panel from the URL.
*
* Params: `thread` (open thread head id), `profile` (profile panel pubkey),
* `profileView` (profile panel sub-view), `agentSession` (agent session
* panel pubkey).
*/
export type PanelSetterOptions = HistorySearchSetterOptions;
export type PanelValueSetter = (
value: string | null,
options?: PanelSetterOptions,
) => void;
const PANEL_SEARCH_KEYS = [
"agentSession",
"profile",
"profileView",
"thread",
] as const;
function asProfilePanelView(value: string | null): ProfilePanelView {
return value === "memories" || value === "channels" ? value : "summary";
}
export function useChannelPanelHistoryState() {
const { applyPatch, values } = useHistorySearchState(PANEL_SEARCH_KEYS);
const setOpenThreadHeadId = React.useCallback<PanelValueSetter>(
(value, options) => applyPatch({ thread: value }, options),
[applyPatch],
);
// Opening, switching, or closing a profile always resets its sub-view —
// the carried `profileView` would otherwise leak onto the next profile.
const setProfilePanelPubkey = React.useCallback<PanelValueSetter>(
(value, options) =>
applyPatch({ profile: value, profileView: null }, options),
[applyPatch],
);
const setProfilePanelView = React.useCallback(
(value: ProfilePanelView, options?: PanelSetterOptions) =>
applyPatch({ profileView: value === "summary" ? null : value }, options),
[applyPatch],
);
const setOpenAgentSessionPubkey = React.useCallback<PanelValueSetter>(
(value, options) => applyPatch({ agentSession: value }, options),
[applyPatch],
);
return {
openAgentSessionPubkey: values.agentSession,
openThreadHeadId: values.thread,
profilePanelPubkey: values.profile,
profilePanelView: asProfilePanelView(values.profileView),
setOpenAgentSessionPubkey,
setOpenThreadHeadId,
setProfilePanelPubkey,
setProfilePanelView,
};
}

11
desktop/src/features/channels/ui/useChannelRouteTarget.ts
View File

@@ -3,6 +3,7 @@ import * as React from "react";
import type { TimelineMessage } from "@/features/messages/types";
import { isBroadcastReply } from "@/features/messages/lib/threading";
import type { Channel } from "@/shared/api/types";
import type { PanelValueSetter } from "./useChannelPanelHistoryState";
function getThreadRouteTarget(
targetMessage: TimelineMessage,
@@ -69,8 +70,8 @@ export function useChannelRouteTarget({
closeAgentSession: () => void;
setEditTargetId: React.Dispatch<React.SetStateAction<string | null>>;
setExpandedThreadReplyIds: React.Dispatch<React.SetStateAction<Set<string>>>;
setOpenThreadHeadId: React.Dispatch<React.SetStateAction<string | null>>;
setProfilePanelPubkey: React.Dispatch<React.SetStateAction<string | null>>;
setOpenThreadHeadId: PanelValueSetter;
setProfilePanelPubkey: PanelValueSetter;
setThreadReplyTargetId: React.Dispatch<React.SetStateAction<string | null>>;
setThreadScrollTargetId: React.Dispatch<React.SetStateAction<string | null>>;
targetMessageId: string | null;
@@ -125,9 +126,11 @@ export function useChannelRouteTarget({
}
closeAgentSession();
setProfilePanelPubkey(null);
// Replace so the deep-link entry itself carries the opened thread —
// back should leave the deep link, not strip the panel from it.
setProfilePanelPubkey(null, { replace: true });
setEditTargetId(null);
setOpenThreadHeadId(routeTarget.threadHeadId);
setOpenThreadHeadId(routeTarget.threadHeadId, { replace: true });
setThreadReplyTargetId(routeTarget.threadHeadId);
setThreadScrollTargetId(targetMessageId);
setExpandedThreadReplyIds(routeTarget.expandedReplyIds);

380
desktop/src/features/channels/ui/useChannelUnreadState.ts Normal file
View File

@@ -0,0 +1,380 @@
import * as React from "react";
import {
buildCreatedAtByMessageId,
buildDirectReplyIdsByParentId,
collectReplyDescendantIds,
directRepliesMaxCreatedAt,
subtreeMaxCreatedAt,
} from "@/features/channels/lib/subtreeCreatedAt";
import { computeThreadReplyUnreadCounts } from "@/features/channels/lib/threadReplyUnreadCounts";
import {
buildThreadPanelDataFromIndex,
buildThreadPanelIndex,
} from "@/features/messages/lib/threadPanel";
import {
computeChannelUnreadMarker,
computeThreadUnreadMarker,
} from "@/features/messages/lib/unreadMarker";
import type { TimelineMessage } from "@/features/messages/types";
import { useWelcomeInitialUnreadSuppression } from "./useWelcomeInitialUnreadSuppression";
type UseChannelUnreadStateOptions = {
activeChannelId: string | null;
timelineMessages: TimelineMessage[];
currentPubkey: string | undefined;
openThreadHeadId: string | null;
threadReplyTargetId: string | null;
expandedThreadReplyIds: ReadonlySet<string>;
isNotifiedForCurrentThread: boolean;
getChannelReadAt: (channelId: string) => number | null;
getThreadReadAt: (rootId: string) => number | null;
markChannelUnread: (channelId: string) => void;
markThreadRead: (rootId: string, timestamp: number) => void;
isNotifiedForThread: (rootId: string) => boolean;
};
/**
* All read-state derivation for an active channel that is computed from the
* formatted timeline: the open-time read frontiers (channel / thread / per-row
* thread badges), the thread-panel projection, and every unread marker and
* unread-count the channel surface renders.
*
* Extracted from ChannelScreen so the screen stays under the file-size cap and
* the NIP-RS read-state machinery lives as one cohesive unit. Behavior is
* unchanged — the only inputs are the formatted timeline plus the AppShell
* read-state accessors, and the hook owns the refs/effects that snapshot the
* "what was unread on open" frontiers.
*/
export function useChannelUnreadState({
activeChannelId,
timelineMessages,
currentPubkey,
openThreadHeadId,
threadReplyTargetId,
expandedThreadReplyIds,
isNotifiedForCurrentThread,
getChannelReadAt,
getThreadReadAt,
markChannelUnread,
markThreadRead,
isNotifiedForThread,
}: UseChannelUnreadStateOptions) {
// Capture the read frontier as it stood the instant this channel was opened,
// BEFORE the mark-read effect (in ChannelScreen) advances it to latest.
// Written during render (not in an effect) so the value is read prior to any
// effect for this commit — the divider must reflect "what was unread on
// open", not the post-open frontier. Keyed per channel and recomputed only
// when the channel id changes, never when the frontier advances, or the
// divider would vanish the moment the open marks the channel read.
const openFrontierRef = React.useRef(new Map<string, number | null>());
if (activeChannelId && !openFrontierRef.current.has(activeChannelId)) {
openFrontierRef.current.set(
activeChannelId,
getChannelReadAt(activeChannelId),
);
}
const openFrontierSeconds = activeChannelId
? (openFrontierRef.current.get(activeChannelId) ?? null)
: null;
// Channels the user manually marked unread this session. A deliberate
// mark-unread has no meaningful "new" boundary inside the timeline — the
// open-time snapshot already covers every message — so the pill and divider
// would otherwise render nothing while the sidebar dot says unread. Suppress
// the marker for such channels to avoid that visible contradiction. The flag
// is cleared on re-open (a fresh snapshot is recomputed for the channel).
const forcedUnreadRef = React.useRef(new Set<string>());
const [, forceUnreadRender] = React.useReducer((n: number) => n + 1, 0);
const isActiveChannelForcedUnread =
!!activeChannelId && forcedUnreadRef.current.has(activeChannelId);
const isActiveWelcomeInitialUnreadSuppressed =
useWelcomeInitialUnreadSuppression(activeChannelId, forceUnreadRender);
// Drop the forced-unread flag when the user leaves a channel, so reopening
// it recomputes a normal marker rather than staying suppressed forever.
React.useEffect(() => {
const channelId = activeChannelId;
if (!channelId) return;
return () => {
forcedUnreadRef.current.delete(channelId);
};
}, [activeChannelId]);
// Clear the open-time frontier on channel leave so re-visiting captures a
// fresh read position. Without this, switching away and back would reuse the
// stale frontier from the first open, producing a phantom "New" divider over
// already-read messages.
React.useEffect(() => {
const channelId = activeChannelId;
if (!channelId) return;
return () => {
openFrontierRef.current.delete(channelId);
};
}, [activeChannelId]);
const directReplyIdsByParentId = React.useMemo(
() => buildDirectReplyIdsByParentId(timelineMessages),
[timelineMessages],
);
const getFirstReplyIdForMessage = React.useCallback(
(messageId: string) => directReplyIdsByParentId.get(messageId)?.[0] ?? null,
[directReplyIdsByParentId],
);
const getReplyDescendantIdsForMessage = React.useCallback(
(messageId: string) =>
collectReplyDescendantIds(messageId, directReplyIdsByParentId),
[directReplyIdsByParentId],
);
const createdAtByMessageId = React.useMemo(
() => buildCreatedAtByMessageId(timelineMessages),
[timelineMessages],
);
// Newest createdAt across an expanded branch (the message itself plus every
// descendant). Drilling into a branch advances the thread frontier to this,
// consuming everything chronologically up to the deepest reply read. Returns
// null when the message is absent so the caller skips the read-state write.
const getSubtreeMaxCreatedAt = React.useCallback(
(messageId: string) =>
subtreeMaxCreatedAt(
messageId,
directReplyIdsByParentId,
createdAtByMessageId,
),
[createdAtByMessageId, directReplyIdsByParentId],
);
const threadPanelIndex = React.useMemo(
() => buildThreadPanelIndex(timelineMessages),
[timelineMessages],
);
const threadPanelData = React.useMemo(
() =>
buildThreadPanelDataFromIndex(
threadPanelIndex,
openThreadHeadId,
threadReplyTargetId,
expandedThreadReplyIds,
),
[
expandedThreadReplyIds,
openThreadHeadId,
threadReplyTargetId,
threadPanelIndex,
],
);
const openThreadHeadMessage = threadPanelData.threadHead;
const threadMessages = threadPanelData.visibleReplies;
const threadReplyTargetMessage = threadPanelData.replyTargetMessage;
// Oldest unread top-level message + count from the open-time frontier.
// Keyed per channel so the pill/divider survive the mark-read effect.
const { firstUnreadMessageId, unreadCount } = React.useMemo(
() =>
computeChannelUnreadMarker(
timelineMessages,
openFrontierSeconds,
isActiveChannelForcedUnread || isActiveWelcomeInitialUnreadSuppressed,
currentPubkey,
),
[
currentPubkey,
isActiveChannelForcedUnread,
isActiveWelcomeInitialUnreadSuppressed,
openFrontierSeconds,
timelineMessages,
],
);
// --- Thread unread state ---
// Capture the thread read frontier on open (same pattern as channel frontier).
// Keyed per thread root so switching threads captures a fresh frontier.
const threadOpenFrontierRef = React.useRef(new Map<string, number | null>());
if (
openThreadHeadId &&
!threadOpenFrontierRef.current.has(openThreadHeadId)
) {
threadOpenFrontierRef.current.set(
openThreadHeadId,
getThreadReadAt(openThreadHeadId),
);
}
const threadOpenFrontierSeconds = openThreadHeadId
? (threadOpenFrontierRef.current.get(openThreadHeadId) ?? null)
: null;
// Clear the thread frontier when the thread closes so re-opening captures fresh.
React.useEffect(() => {
const rootId = openThreadHeadId;
if (!rootId) return;
return () => {
threadOpenFrontierRef.current.delete(rootId);
};
}, [openThreadHeadId]);
// Mark thread read when the panel opens, advancing the frontier to the max
// createdAt over the head and its DIRECT replies — the content visible
// without expanding anything. This mirrors channel-open parity: opening
// consumes what you can see, clearing the channel-level badge for unread that
// lived in the visible direct replies, while deeper collapsed branches stay
// unread until drilled into (expand advances the frontier further from here).
// Only persist read state for threads the user has notification interest in
// (participated, authored, or followed) to avoid bloating the context blob.
React.useEffect(() => {
if (!openThreadHeadId) return;
if (!isNotifiedForCurrentThread) return;
const openReadCeiling = directRepliesMaxCreatedAt(
openThreadHeadId,
directReplyIdsByParentId,
createdAtByMessageId,
);
if (openReadCeiling === null) return;
markThreadRead(openThreadHeadId, openReadCeiling);
}, [
openThreadHeadId,
directReplyIdsByParentId,
createdAtByMessageId,
markThreadRead,
isNotifiedForCurrentThread,
]);
// Compute the in-thread "New" divider position from the open-time frontier.
const { firstUnreadReplyId: threadFirstUnreadReplyId } = React.useMemo(() => {
if (!openThreadHeadId || threadMessages.length === 0) {
return { firstUnreadReplyId: null, unreadCount: 0 };
}
const replies = threadMessages.map((entry) => entry.message);
return computeThreadUnreadMarker(
replies,
threadOpenFrontierSeconds,
currentPubkey,
);
}, [
currentPubkey,
openThreadHeadId,
threadMessages,
threadOpenFrontierSeconds,
]);
// Per-row subtree unread counts for the in-panel thread summary rows. Scoped
// to the open thread's subtree and measured against the open-time frontier
// snapshot (threadOpenFrontierSeconds) — the same boundary the in-thread
// divider uses (above). The LIVE root marker can't be used here: on
// channel-open markChannelRead advances the channel marker to the newest
// top-level message, and effective(thread) = max(thread_own, channel_marker),
// so a channel marker past the nested replies would zero every badge the
// instant the panel opens. The snapshot reflects "what was unread on open."
// Expand-clears-badge is preserved independently: it's driven by the
// expandedSubtreeReplyIds gate inside computeThreadReplyUnreadCounts, not by
// the frontier.
const threadReplyUnreadCounts = React.useMemo(
() =>
openThreadHeadId
? computeThreadReplyUnreadCounts({
timelineMessages,
subtreeReplyIds: getReplyDescendantIdsForMessage(openThreadHeadId),
visibleReplyIds: threadMessages.map((entry) => entry.message.id),
expandedReplyIds: expandedThreadReplyIds,
expandedSubtreeReplyIds: new Set(
[...expandedThreadReplyIds].flatMap((id) =>
getReplyDescendantIdsForMessage(id),
),
),
frontierSeconds: threadOpenFrontierSeconds,
currentPubkey,
})
: new Map<string, number>(),
[
openThreadHeadId,
threadMessages,
timelineMessages,
threadOpenFrontierSeconds,
expandedThreadReplyIds,
getReplyDescendantIdsForMessage,
currentPubkey,
],
);
// Snapshot per-thread read frontiers at channel-open time. Same pattern as
// openFrontierRef: captured during render (before the mark-read effect) so
// the badge reflects "what was unread on open" rather than the post-advance
// frontier. Keyed by activeChannelId → rootId → frontier value.
const threadBadgeFrontiersRef = React.useRef(
new Map<string, Map<string, number | null>>(),
);
if (activeChannelId) {
let channelFrontiers = threadBadgeFrontiersRef.current.get(activeChannelId);
if (!channelFrontiers) {
channelFrontiers = new Map();
threadBadgeFrontiersRef.current.set(activeChannelId, channelFrontiers);
}
for (const message of timelineMessages) {
if (message.parentId) continue;
if (!isNotifiedForThread(message.id)) continue;
if (channelFrontiers.has(message.id)) continue;
// Only capture for messages that have thread replies
const hasReplies = timelineMessages.some(
(m) => m.parentId === message.id,
);
if (!hasReplies) continue;
channelFrontiers.set(message.id, getThreadReadAt(message.id));
}
}
// Clear the thread badge frontiers on channel leave (same cleanup as
// openFrontierRef) so re-visiting captures fresh snapshots.
React.useEffect(() => {
const channelId = activeChannelId;
if (!channelId) return;
return () => {
threadBadgeFrontiersRef.current.delete(channelId);
};
}, [activeChannelId]);
// Compute per-thread unread counts for summary rows in the main timeline.
// Only compute for threads the user has notification interest in — this
// aligns the badge display with the read-state write path. Uses the
// snapshotted frontier (threadBadgeFrontiersRef) so badges are stable for
// the session and don't flash when markChannelRead advances the channel
// marker.
const threadUnreadCounts = React.useMemo(() => {
const counts = new Map<string, number>();
const channelFrontiers = activeChannelId
? threadBadgeFrontiersRef.current.get(activeChannelId)
: undefined;
for (const message of timelineMessages) {
if (message.parentId) continue;
if (!isNotifiedForThread(message.id)) continue;
const directReplies = timelineMessages.filter(
(m) => m.parentId === message.id,
);
if (directReplies.length === 0) continue;
const frontier = channelFrontiers?.get(message.id) ?? null;
const { unreadCount } = computeThreadUnreadMarker(
directReplies,
frontier,
currentPubkey,
);
if (unreadCount > 0) {
counts.set(message.id, unreadCount);
}
}
return counts;
}, [activeChannelId, currentPubkey, timelineMessages, isNotifiedForThread]);
const handleMarkUnread = React.useCallback(() => {
if (!activeChannelId) return;
// Mirror the deliberate mark-unread locally so the timeline marker is
// suppressed (see forcedUnreadRef above). Re-render so the memo re-runs.
forcedUnreadRef.current.add(activeChannelId);
forceUnreadRender();
markChannelUnread(activeChannelId);
}, [activeChannelId, markChannelUnread]);
return {
createdAtByMessageId,
directReplyIdsByParentId,
firstUnreadMessageId,
getFirstReplyIdForMessage,
getReplyDescendantIdsForMessage,
getSubtreeMaxCreatedAt,
handleMarkUnread,
openThreadHeadMessage,
threadFirstUnreadReplyId,
threadMessages,
threadReplyTargetMessage,
threadReplyUnreadCounts,
threadUnreadCounts,
unreadCount,
};
}

2
desktop/src/features/channels/useChannelPaneHandlers.ts
View File

@@ -46,7 +46,7 @@ export function useChannelPaneHandlers({
sendMessageMutation: ReturnType<typeof useSendMessageMutation>;
setExpandedThreadReplyIds: React.Dispatch<React.SetStateAction<Set<string>>>;
setEditTargetId: React.Dispatch<React.SetStateAction<string | null>>;
setOpenThreadHeadId: React.Dispatch<React.SetStateAction<string | null>>;
setOpenThreadHeadId: (value: string | null) => void;
setThreadReplyTargetId: React.Dispatch<React.SetStateAction<string | null>>;
setThreadScrollTargetId: React.Dispatch<React.SetStateAction<string | null>>;
threadReplyTargetId: string | null;

41
desktop/src/features/home/ui/HomeView.tsx
View File

@@ -44,8 +44,11 @@ import { topChromeInset } from "@/shared/layout/chromeLayout";
import { cn } from "@/shared/lib/cn";
import { resolveMentionNames } from "@/shared/lib/resolveMentionNames";
import { useElementWidth } from "@/shared/hooks/use-mobile";
import { useHistorySearchState } from "@/shared/hooks/useHistorySearchState";
import { Button } from "@/shared/ui/button";
const INBOX_SEARCH_KEYS = ["item"] as const;
type HomeViewProps = {
feed?: HomeFeedResponse;
isLoading?: boolean;
@@ -72,8 +75,25 @@ export function HomeView({
homeInboxWidthPx > 0 &&
homeInboxWidthPx < INBOX_SINGLE_COLUMN_BREAKPOINT_PX;
const [filter, setFilter] = React.useState<InboxFilter>("all");
// Explicit selections are mirrored to the URL (`?item=`), so back/forward
// restores the detail pane each history entry was showing and reloads
// restore it from the URL. Default/automatic selection stays local-only —
// background data loads must never trigger navigations.
const { applyPatch: applyInboxSearchPatch, values: inboxSearchValues } =
useHistorySearchState(INBOX_SEARCH_KEYS);
const urlSelectedItemId = inboxSearchValues.item;
const [selectedItemId, setSelectedItemId] = React.useState<string | null>(
null,
urlSelectedItemId,
);
React.useEffect(() => {
setSelectedItemId(urlSelectedItemId);
}, [urlSelectedItemId]);
const handleUserSelectItem = React.useCallback(
(itemId: string | null) => {
setSelectedItemId(itemId);
applyInboxSearchPatch({ item: itemId });
},
[applyInboxSearchPatch],
);
const [isDeletingMessage, setIsDeletingMessage] = React.useState(false);
const [isSendingReply, setIsSendingReply] = React.useState(false);
@@ -231,6 +251,12 @@ export function HomeView({
return localReplies.filter((reply) => !contextIds.has(reply.id));
}, [contextMessages, localRepliesByItemId, selectedItem]);
React.useEffect(() => {
// While the feed is loading (e.g. a reload restoring `?item=` from the
// URL) the selected item simply hasn't arrived yet — don't clobber it.
if (isLoading || !feed) {
return;
}
if (filteredItems.length === 0) {
setSelectedItemId(null);
return;
@@ -247,7 +273,14 @@ export function HomeView({
isNarrowHomeViewport ? null : (filteredItems[0]?.id ?? null),
);
}
}, [filteredItems, homeInboxWidthPx, isNarrowHomeViewport, selectedItemId]);
}, [
feed,
filteredItems,
homeInboxWidthPx,
isLoading,
isNarrowHomeViewport,
selectedItemId,
]);
React.useEffect(() => {
void selectedItemId;
@@ -355,7 +388,7 @@ export function HomeView({
items={filteredItems}
onFilterChange={setFilter}
onSelect={(itemId) => {
setSelectedItemId(itemId);
handleUserSelectItem(itemId);
markItemRead(itemId);
}}
selectedId={selectedItemId}
@@ -410,7 +443,7 @@ export function HomeView({
onBack={
isSinglePanelDetailView
? () => {
setSelectedItemId(null);
handleUserSelectItem(null);
}
: undefined
}

22
desktop/src/features/profile/ui/UserProfilePanel.tsx
View File

@@ -58,6 +58,10 @@ type UserProfilePanelProps = {
onOpenDm?: (pubkeys: string[]) => void;
onResetWidth?: () => void;
onResizeStart?: (event: React.PointerEvent<HTMLButtonElement>) => void;
onViewChange: (
view: ProfilePanelView,
options?: { replace?: boolean },
) => void;
pubkey: string;
/**
* When true, the panel sits beside a sibling pane managed by a single-panel
@@ -67,10 +71,11 @@ type UserProfilePanelProps = {
* directly — otherwise `calc(100% - 300px)` would wrongly shrink the panel.
*/
splitPaneClamp?: boolean;
view: ProfilePanelView;
widthPx: number;
};
type ProfilePanelView = "summary" | "memories" | "channels";
export type ProfilePanelView = "summary" | "memories" | "channels";
const VIEW_TITLES: Record<ProfilePanelView, string> = {
summary: "Profile",
@@ -133,8 +138,10 @@ export function UserProfilePanel({
onOpenDm,
onResetWidth,
onResizeStart,
onViewChange,
pubkey,
splitPaneClamp = false,
view,
widthPx,
}: UserProfilePanelProps) {
const isOverlay = useIsThreadPanelOverlay();
@@ -142,7 +149,6 @@ export function UserProfilePanel({
const isSplitLayout = layout === "split";
useEscapeKey(onClose, isOverlay || isSinglePanelView);
const [view, setView] = React.useState<ProfilePanelView>("summary");
const [editAgentOpen, setEditAgentOpen] = React.useState(false);
const profileQuery = useUserProfileQuery(pubkey);
@@ -223,12 +229,6 @@ export function UserProfilePanel({
return map;
}, [channelsQuery.data]);
const prevPubkeyRef = React.useRef(pubkey);
if (prevPubkeyRef.current !== pubkey) {
prevPubkeyRef.current = pubkey;
setView("summary");
}
const handleMessage = React.useCallback(() => {
onOpenDm?.([pubkey]);
onClose();
@@ -276,7 +276,7 @@ export function UserProfilePanel({
aria-label="Back to profile"
className="shrink-0"
data-testid="user-profile-panel-back"
onClick={() => setView("summary")}
onClick={() => onViewChange("summary")}
size="icon"
type="button"
variant="outline"
@@ -335,8 +335,8 @@ export function UserProfilePanel({
memoryCount={memoryCount}
ownerDisplayName={ownerDisplayName}
ownerHandle={ownerHandle}
onOpenChannels={() => setView("channels")}
onOpenMemories={() => setView("memories")}
onOpenChannels={() => onViewChange("channels")}
onOpenMemories={() => onViewChange("memories")}
onOpenDm={onOpenDm}
presenceLoaded={presenceQuery.isSuccess}
presenceStatus={presenceStatus}

36
desktop/src/features/pulse/ui/PulseScreen.tsx
View File

@@ -2,17 +2,39 @@ import * as React from "react";
import { useAppNavigation } from "@/app/navigation/useAppNavigation";
import { useOpenDmMutation } from "@/features/channels/hooks";
import { UserProfilePanel } from "@/features/profile/ui/UserProfilePanel";
import {
type ProfilePanelView,
UserProfilePanel,
} from "@/features/profile/ui/UserProfilePanel";
import { PulseView } from "@/features/pulse/ui/PulseView";
import { useIdentityQuery } from "@/shared/api/hooks";
import { ProfilePanelProvider } from "@/shared/context/ProfilePanelContext";
import { useHistorySearchState } from "@/shared/hooks/useHistorySearchState";
import { useThreadPanelWidth } from "@/shared/hooks/useThreadPanelWidth";
const PULSE_PANEL_SEARCH_KEYS = ["profile", "profileView"] as const;
export function PulseScreen() {
const identityQuery = useIdentityQuery();
const [profilePanelPubkey, setProfilePanelPubkey] = React.useState<
string | null
>(null);
const { applyPatch, values } = useHistorySearchState(PULSE_PANEL_SEARCH_KEYS);
const profilePanelPubkey = values.profile;
const profilePanelView: ProfilePanelView =
values.profileView === "memories" || values.profileView === "channels"
? values.profileView
: "summary";
const handleOpenProfilePanel = React.useCallback(
(pubkey: string) => applyPatch({ profile: pubkey, profileView: null }),
[applyPatch],
);
const handleCloseProfilePanel = React.useCallback(
() => applyPatch({ profile: null, profileView: null }),
[applyPatch],
);
const handleProfilePanelViewChange = React.useCallback(
(view: ProfilePanelView, options?: { replace?: boolean }) =>
applyPatch({ profileView: view === "summary" ? null : view }, options),
[applyPatch],
);
const threadPanelWidth = useThreadPanelWidth();
const openDmMutation = useOpenDmMutation();
const { goChannel } = useAppNavigation();
@@ -25,7 +47,7 @@ export function PulseScreen() {
);
return (
<ProfilePanelProvider onOpenProfilePanel={setProfilePanelPubkey}>
<ProfilePanelProvider onOpenProfilePanel={handleOpenProfilePanel}>
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
<div className="flex min-h-0 min-w-0 flex-1 flex-row overflow-hidden">
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
@@ -35,11 +57,13 @@ export function PulseScreen() {
<UserProfilePanel
canResetWidth={threadPanelWidth.canReset}
currentPubkey={identityQuery.data?.pubkey}
onClose={() => setProfilePanelPubkey(null)}
onClose={handleCloseProfilePanel}
onOpenDm={handleOpenDm}
onResetWidth={threadPanelWidth.onResetWidth}
onResizeStart={threadPanelWidth.onResizeStart}
onViewChange={handleProfilePanelViewChange}
pubkey={profilePanelPubkey}
view={profilePanelView}
widthPx={threadPanelWidth.widthPx}
/>
) : null}

23
desktop/src/features/settings/ui/SettingsPanels.tsx
View File

@@ -61,6 +61,29 @@ export type SettingsSection =
export const DEFAULT_SETTINGS_SECTION: SettingsSection = "profile";
const SETTINGS_SECTION_VALUES: readonly SettingsSection[] = [
"profile",
"notifications",
"experimental",
"agents",
"channel-templates",
"compute",
"appearance",
"shortcuts",
"relay-members",
"custom-emoji",
"mobile",
"updates",
"doctor",
];
export function isSettingsSection(value: unknown): value is SettingsSection {
return (
typeof value === "string" &&
(SETTINGS_SECTION_VALUES as readonly string[]).includes(value)
);
}
export type SettingsSectionDescriptor = {
value: SettingsSection;
label: string;

99
desktop/src/shared/hooks/useHistorySearchState.ts Normal file
View File

@@ -0,0 +1,99 @@
import * as React from "react";
import { useNavigate, useSearch } from "@tanstack/react-router";
/**
* URL-search-param-backed UI state, so it lives in the history stack:
* back/forward restores the value a given entry carried, and reloads
* restore it from the URL.
*
* Patch calls made synchronously within one event handler are coalesced
* into a single navigation, so each user action produces exactly one
* history entry even when a handler updates several keys.
*/
export type HistorySearchSetterOptions = {
/** Rewrite the current entry instead of pushing a new one. */
replace?: boolean;
};
export function useHistorySearchState<K extends string>(keys: readonly K[]) {
const navigate = useNavigate();
const search = useSearch({ strict: false } as never) as Partial<
Record<K, string>
>;
const values = {} as Record<K, string | null>;
for (const key of keys) {
values[key] = search[key] ?? null;
}
const currentValuesRef = React.useRef(values);
currentValuesRef.current = values;
const keysRef = React.useRef(keys);
keysRef.current = keys;
const pendingRef = React.useRef<{
patch: Partial<Record<K, string | null>>;
replace: boolean;
} | null>(null);
const applyPatch = React.useCallback(
(
patch: Partial<Record<K, string | null>>,
options?: HistorySearchSetterOptions,
) => {
const pending = pendingRef.current;
if (pending) {
Object.assign(pending.patch, patch);
pending.replace = pending.replace || Boolean(options?.replace);
return;
}
pendingRef.current = {
patch: { ...patch },
replace: Boolean(options?.replace),
};
queueMicrotask(() => {
const flush = pendingRef.current;
pendingRef.current = null;
if (!flush) {
return;
}
const currentValues = currentValuesRef.current;
const isChanged = keysRef.current.some(
(key) =>
flush.patch[key] !== undefined &&
(flush.patch[key] ?? null) !== currentValues[key],
);
if (!isChanged) {
return;
}
void navigate({
to: ".",
search: (previousSearch: Record<string, unknown>) => {
const nextSearch = { ...previousSearch };
for (const key of keysRef.current) {
const value = flush.patch[key];
if (value === undefined) {
continue;
}
if (value === null) {
delete nextSearch[key];
} else {
nextSearch[key] = value;
}
}
return nextSearch;
},
replace: flush.replace,
resetScroll: false,
} as never);
});
},
[navigate],
);
return { applyPatch, values };
}

6
desktop/tests/e2e/mesh-compute.spec.ts
View File

@@ -130,10 +130,12 @@ test("Share compute model draft persists across reload", async ({ page }) => {
await page.getByTestId("mesh-share-compute-vram").fill("42");
await page.reload({ waitUntil: "domcontentloaded" });
await expect(page.getByTestId("open-agents-view")).toBeVisible({
// Settings now lives in the history stack (/settings?section=…), so a reload
// restores the open section straight from the URL — no need to navigate back
// through the app shell.
await expect(page.getByTestId("settings-view")).toBeVisible({
timeout: 10_000,
});
await openSettings(page, "compute");
await expect(page.getByTestId("mesh-share-compute-model")).toHaveValue(
"unsloth/Qwen3.6-35B-A3B-GGUF@main:UD-Q4_K_S",

155
desktop/tests/e2e/navigation.spec.ts
View File

@@ -1,6 +1,7 @@
import { expect, test } from "@playwright/test";
import { installMockBridge } from "../helpers/bridge";
import { openSettings } from "../helpers/settings";
const ENGINEERING_CHANNEL_ID = "1c7e1c02-87bb-5e88-b2da-5a7a9432d0c9";
const WATERCOLOR_CHANNEL_ID = "a27e1ee9-76a6-5bdf-a5d5-1d85610dad11";
@@ -47,7 +48,11 @@ test("global back and forward move across channel routes", async ({ page }) => {
await expect(page.getByTestId("chat-title")).toHaveText("random");
});
test("direct forum thread links close back to the forum route", async ({
// FIXME: the forum post "Back to posts" header renders under the fixed top
// chrome drag region, which intercepts the click. Pre-existing breakage —
// this spec file was never registered in playwright.config.ts until now.
// The header-chrome rework (PR #941) covers this overlap class.
test.fixme("direct forum thread links close back to the forum route", async ({
page,
}) => {
await page.goto(
@@ -113,6 +118,154 @@ test("forum reply deep links survive reload", async ({ page }) => {
).toBeVisible();
});
test("back and forward restore open thread panels", async ({ page }) => {
await page.goto("/");
await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general");
const rootMessage = page
.getByTestId("message-timeline")
.getByTestId("message-row")
.first();
await rootMessage.hover();
await rootMessage.getByRole("button", { name: "Reply" }).click();
const threadPanel = page.getByTestId("message-thread-panel");
await expect(threadPanel).toBeVisible();
await expect(page).toHaveURL(/thread=/);
await page.getByTestId("channel-random").click();
await expect(page.getByTestId("chat-title")).toHaveText("random");
await expect(threadPanel).not.toBeVisible();
await page.getByTestId("global-back").click();
await expect(page.getByTestId("chat-title")).toHaveText("general");
await expect(threadPanel).toBeVisible();
await page.getByTestId("global-forward").click();
await expect(page.getByTestId("chat-title")).toHaveText("random");
await expect(threadPanel).not.toBeVisible();
});
test("back undoes closing a thread panel", async ({ page }) => {
await page.goto("/");
await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general");
const rootMessage = page
.getByTestId("message-timeline")
.getByTestId("message-row")
.first();
await rootMessage.hover();
await rootMessage.getByRole("button", { name: "Reply" }).click();
const threadPanel = page.getByTestId("message-thread-panel");
await expect(threadPanel).toBeVisible();
await threadPanel.getByRole("button", { name: "Close thread" }).click();
await expect(threadPanel).not.toBeVisible();
await page.getByTestId("global-back").click();
await expect(threadPanel).toBeVisible();
});
test("open thread panels survive reload", async ({ page }) => {
await page.goto("/");
await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general");
const rootMessage = page
.getByTestId("message-timeline")
.getByTestId("message-row")
.first();
await rootMessage.hover();
await rootMessage.getByRole("button", { name: "Reply" }).click();
const threadPanel = page.getByTestId("message-thread-panel");
await expect(threadPanel).toBeVisible();
await expect(page).toHaveURL(/thread=/);
await page.reload();
await expect(page.getByTestId("chat-title")).toHaveText("general");
await expect(threadPanel).toBeVisible();
});
test("home inbox selection survives reload and back restores it", async ({
page,
}) => {
await page.goto("/");
const inboxList = page.getByTestId("home-inbox-list");
await expect(inboxList).toBeVisible();
const items = inboxList.locator('[data-testid^="home-inbox-item-"]');
await expect(items.first()).toBeVisible();
// The wide-viewport default selection stays local-only — the URL records
// explicit selections, so background loads never touch the history stack.
await expect(page.getByTestId("home-inbox-detail")).toBeVisible();
expect(page.url()).not.toContain("item=");
const defaultUrl = page.url();
const secondItem = items.nth(1);
const secondTestId = await secondItem.getAttribute("data-testid");
const secondItemId = secondTestId?.replace("home-inbox-item-", "");
expect(secondItemId).toBeTruthy();
await secondItem.click();
await expect
.poll(() => page.url())
.toContain(`item=${encodeURIComponent(secondItemId ?? "")}`);
await page.reload();
await expect(inboxList).toBeVisible();
await expect(page.getByTestId("home-inbox-detail")).toBeVisible();
expect(page.url()).toContain(
`item=${encodeURIComponent(secondItemId ?? "")}`,
);
await page.getByTestId("global-back").click();
await expect.poll(() => page.url()).toBe(defaultUrl);
});
test("settings is a route: section survives reload, closing returns to the previous panel state", async ({
page,
}) => {
await page.goto("/");
// Open a channel with a thread panel so there's panel state to come back to.
await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general");
const rootMessage = page
.getByTestId("message-timeline")
.getByTestId("message-row")
.first();
await rootMessage.hover();
await rootMessage.getByRole("button", { name: "Reply" }).click();
const threadPanel = page.getByTestId("message-thread-panel");
await expect(threadPanel).toBeVisible();
const channelUrl = page.url();
await openSettings(page);
await expect(page).toHaveURL(/#\/settings/);
// Section switches rewrite the settings entry (replace, not push).
await page.getByTestId("settings-nav-notifications").click();
await expect(page).toHaveURL(/section=notifications/);
await page.reload();
await expect(page.getByTestId("settings-view")).toBeVisible();
await expect(page).toHaveURL(/section=notifications/);
await page.getByTestId("settings-back-to-app").click();
await expect.poll(() => page.url()).toBe(channelUrl);
await expect(page.getByTestId("chat-title")).toHaveText("general");
await expect(threadPanel).toBeVisible();
});
test("message deep links survive reload", async ({ page }) => {
await page.goto(
`/#/channels/${ENGINEERING_CHANNEL_ID}?messageId=mock-engineering-shipped`,