gloomberb 0.7.1 → 0.7.3

package/src/plugins/builtin/chat.tsx

@@ -3,7 +3,7 @@ import { memo, useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { useShortcut } from "../../react/input";
 import { TextAttributes, type ScrollBoxRenderable, type TextareaRenderable } from "../../ui";
 import type { GloomPlugin, PaneProps } from "../../types/plugin";
-import { useAppDispatch, useAppSelector, useAppStateRef, usePaneInstance, usePaneInstanceId } from "../../state/app-context";
+import { syncConfigActiveLayoutState, useAppDispatch, useAppSelector, useAppStateRef, usePaneInstance, usePaneInstanceId } from "../../state/app-context";
 import { useInlineTickers, type InlineTickerCatalogEntry } from "../../state/use-inline-tickers";
 import { ExternalLinkText, getMessageComposerBlockHeight, MessageComposer } from "../../components/ui";
 import { TickerBadgeText } from "../../components/ticker-badge-text";
@@ -12,6 +12,7 @@ import { blendHex, colors, hoverBg } from "../../theme/colors";
 import { apiClient, type ChatChannel, type ChatMessage } from "../../utils/api-client";
 import { formatTimeAgo } from "../../utils/format";
 import { tokenizeInlineContent } from "../../utils/inline-content-tokenizer";
+import { isPlainKey } from "../../utils/keyboard";
 import { getSharedRegistry } from "../../plugins/registry";
 import { usePluginAppActions } from "../../plugins/plugin-runtime";
 import { setPaneSetting } from "../../pane-settings";
@@ -34,6 +35,8 @@ interface ChatContentProps {
     | "attachChannelView"
     | "getSnapshot"
     | "refreshChannels"
+    | "refreshChatState"
+    | "refreshPresence"
     | "loadOlderMessages"
     | "loadOlderChannelMessages"
     | "refreshMessages"
@@ -43,6 +46,7 @@ interface ChatContentProps {
     | "sendToChannel"
     | "setDraft"
     | "setChannelDraft"
+    | "setChannelNotificationsEnabled"
     | "setReplyToId"
     | "setChannelReplyToId"
     | "subscribe"
@@ -61,10 +65,17 @@ const MESSAGE_SELECTION_BOTTOM_INSET = 1;
 const DESKTOP_MESSAGE_RIGHT_PADDING = 2;
 const CHANNEL_SIDEBAR_MIN_WIDTH = 18;
 const CHANNEL_SIDEBAR_MAX_WIDTH = 24;
+const DESKTOP_CHANNEL_SIDEBAR_MIN_WIDTH = 14;
+const DESKTOP_CHANNEL_SIDEBAR_MAX_WIDTH = 19;
+const DESKTOP_CHANNEL_SIDEBAR_WIDTH_RATIO = 0.192;
 const CHANNEL_SIDEBAR_BREAKPOINT = 72;
+const DESKTOP_NOTIFICATION_ICON_WIDTH = 3;
+const DESKTOP_ONLINE_COUNT_PADDING_X = 1;
+const DESKTOP_CHAT_INPUT_TOP_MARGIN_PX = 6;
 const DEFAULT_CHAT_CHANNEL_ID = "everyone";
 const LAST_VISITED_CHAT_CHANNEL_KEY = "lastChatChannelId";
 const CHAT_CHANNEL_MOUSE_HANDLED = "__gloomberbChatChannelHandled";
+const SCROLL_BOTTOM_THRESHOLD_PX = 2;
 
 function isGroupedWithPrevious(messages: ChatMessage[], index: number) {
   if (index === 0) return false;
@@ -170,6 +181,15 @@ function scrollToBottom(scrollBox: ScrollBoxRenderable | null, preferPixels = fa
   );
 }
 
+function isScrolledToBottom(scrollBox: ScrollBoxRenderable | null, preferPixels = false) {
+  if (!scrollBox) return true;
+  const exactPixels = preferPixels && hasPixelScrollMetrics(scrollBox);
+  const scrollTop = getScrollTop(scrollBox, exactPixels);
+  const maxScrollTop = Math.max(0, getScrollHeight(scrollBox, exactPixels) - getViewportHeight(scrollBox, exactPixels));
+  const threshold = exactPixels ? SCROLL_BOTTOM_THRESHOLD_PX : 0;
+  return maxScrollTop - scrollTop <= threshold;
+}
+
 function runAfterLayout(callback: () => void) {
   if (typeof requestAnimationFrame === "function") {
     requestAnimationFrame(callback);
@@ -311,6 +331,73 @@ function CloudStatusIcon() {
   );
 }
 
+function ChannelNotificationIcon({
+  enabled,
+  onMouseDown,
+}: {
+  enabled: boolean;
+  onMouseDown?: (event: any) => void;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
+  const iconColor = enabled ? colors.positive : colors.textMuted;
+
+  if (!nativePaneChrome) {
+    return (
+      <Text fg={iconColor} selectable={false} onMouseDown={onMouseDown}>
+        {enabled ? "◖)" : "◖·"}
+      </Text>
+    );
+  }
+
+  return (
+    <Span
+      fg={iconColor}
+      onMouseDown={onMouseDown}
+      style={{
+        color: iconColor,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 16,
+        height: 16,
+      }}
+    >
+      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" aria-hidden="true">
+        <path
+          d="M4.5 9.5v5h3.2l4.8 4v-13l-4.8 4H4.5Z"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        {enabled ? (
+          <>
+            <path
+              d="M16 8.5a5 5 0 0 1 0 7"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+            />
+            <path
+              d="M18.8 5.8a9 9 0 0 1 0 12.4"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+            />
+          </>
+        ) : (
+          <path
+            d="M19 5 5 19"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+          />
+        )}
+      </svg>
+    </Span>
+  );
+}
+
 function ChatActionChip({
   label,
   width,
@@ -752,35 +839,46 @@ const DesktopChatMessage = memo(function DesktopChatMessage({
 
 function ChannelSidebar({
   channels,
+  channelStates,
   activeChannelId,
+  onlineCount,
   width,
   height,
   focused,
   keyboardFocused,
   loading,
+  canManageNotifications,
   onSelect,
   onFocusRequest,
+  onToggleNotifications,
 }: {
   channels: ChatChannel[];
+  channelStates: ReturnType<ChatController["getSnapshot"]>["channelStates"];
   activeChannelId: string;
+  onlineCount: number;
   width: number;
   height: number;
   focused: boolean;
   keyboardFocused: boolean;
   loading: boolean;
+  canManageNotifications: boolean;
   onSelect?: (channelId: string) => void;
   onFocusRequest?: () => void;
+  onToggleNotifications?: (channelId: string, enabled: boolean) => void;
 }) {
   const { nativePaneChrome } = useUiCapabilities();
   const borderWidth = nativePaneChrome ? 0 : width > 1 ? 1 : 0;
   const listWidth = Math.max(width - borderWidth, 1);
-  const labelWidth = Math.max(listWidth - 3, 1);
+  const notificationWidth = canManageNotifications ? (nativePaneChrome ? DESKTOP_NOTIFICATION_ICON_WIDTH : 2) : 0;
+  const onlineCountPaddingX = nativePaneChrome ? DESKTOP_ONLINE_COUNT_PADDING_X : 0;
+  const labelWidth = Math.max(listWidth - 3 - notificationWidth, 1);
   const dividerColor = focused ? colors.borderFocused : colors.border;
   const sidebarBg = keyboardFocused ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel;
   const activeBg = keyboardFocused
     ? blendHex(colors.selected, colors.borderFocused, 0.32)
     : blendHex(colors.panel, colors.selected, 0.35);
   const [hoveredChannelId, setHoveredChannelId] = useState<string | null>(null);
+  const channelStateById = useMemo(() => new Map(channelStates.map((state) => [state.channelId, state])), [channelStates]);
   const sidebarLayoutHeight = nativePaneChrome ? "100%" : height;
   const nativeFillStyle = nativePaneChrome ? { minHeight: 0 } : undefined;
   const sidebarBorder = borderWidth > 0
@@ -810,6 +908,9 @@ function ChannelSidebar({
       >
         {channels.map((channel) => {
           const active = channel.id === activeChannelId;
+          const channelState = channelStateById.get(channel.id);
+          const notificationsEnabled = channelState?.notificationsEnabled === true;
+          const unread = (channelState?.unreadCount ?? 0) > 0;
           const hovered = hoveredChannelId === channel.id && !active;
           const fg = active ? colors.selectedText : keyboardFocused ? colors.text : colors.textDim;
           const bg = active ? activeBg : hovered ? hoverBg() : sidebarBg;
@@ -824,6 +925,14 @@ function ChannelSidebar({
             onFocusRequest?.();
             onSelect?.(channel.id);
           };
+          const toggleNotifications = (event: any) => {
+            event?.preventDefault?.();
+            event?.stopPropagation?.();
+            if (event) {
+              event[CHAT_CHANNEL_MOUSE_HANDLED] = true;
+            }
+            onToggleNotifications?.(channel.id, !notificationsEnabled);
+          };
           return (
             <Box
               key={channel.id}
@@ -837,9 +946,21 @@ function ChannelSidebar({
               style={{ cursor: "pointer" }}
             >
               <Text fg={fg} selectable={false} onMouseDown={selectChannel}> </Text>
-              <Text fg={fg} selectable={false} onMouseDown={selectChannel}>{active ? "#" : " "}</Text>
-              <Text fg={fg} selectable={false} onMouseDown={selectChannel}>{truncateChannelLabel(label, labelWidth)}</Text>
+              <Text fg={fg} attributes={unread ? TextAttributes.BOLD : 0} selectable={false} onMouseDown={selectChannel}>{active ? "#" : " "}</Text>
+              <Text fg={fg} attributes={unread ? TextAttributes.BOLD : 0} selectable={false} onMouseDown={selectChannel}>{truncateChannelLabel(label, labelWidth)}</Text>
               <Box flexGrow={1} onMouseDown={selectChannel} />
+              {canManageNotifications && (
+                <Box
+                  width={notificationWidth}
+                  height={1}
+                  alignItems="center"
+                  justifyContent="center"
+                  onMouseDown={toggleNotifications}
+                  style={{ cursor: "pointer" }}
+                >
+                  <ChannelNotificationIcon enabled={notificationsEnabled} onMouseDown={toggleNotifications} />
+                </Box>
+              )}
             </Box>
           );
         })}
@@ -849,6 +970,12 @@ function ChannelSidebar({
             <Text fg={colors.textDim}> syncing</Text>
           </Box>
         )}
+        <Box height={1} width={listWidth} flexDirection="row" paddingX={onlineCountPaddingX}>
+          <Text fg={colors.positive}>●</Text>
+          <Text fg={colors.textDim}>
+            {` ${truncateChannelLabel(`${onlineCount} online`, Math.max(listWidth - 2 - onlineCountPaddingX * 2, 1))}`}
+          </Text>
+        </Box>
       </Box>
       {sidebarBorder}
       {nativePaneChrome && (
@@ -888,16 +1015,20 @@ export function ChatContent({
   const [channels, setChannels] = useState<ChatChannel[]>(initialSnapshot.channels);
   const [channelsLoading, setChannelsLoading] = useState(initialSnapshot.channelsLoading);
   const showChannelSidebar = channels.length > 1 && width >= CHANNEL_SIDEBAR_BREAKPOINT && height >= 8;
+  const sidebarMinWidth = nativePaneChrome ? DESKTOP_CHANNEL_SIDEBAR_MIN_WIDTH : CHANNEL_SIDEBAR_MIN_WIDTH;
+  const sidebarMaxWidth = nativePaneChrome ? DESKTOP_CHANNEL_SIDEBAR_MAX_WIDTH : CHANNEL_SIDEBAR_MAX_WIDTH;
+  const sidebarWidthRatio = nativePaneChrome ? DESKTOP_CHANNEL_SIDEBAR_WIDTH_RATIO : 0.24;
   const channelSidebarWidth = showChannelSidebar
-    ? Math.min(CHANNEL_SIDEBAR_MAX_WIDTH, Math.max(CHANNEL_SIDEBAR_MIN_WIDTH, Math.floor(width * 0.24)))
+    ? Math.min(sidebarMaxWidth, Math.max(sidebarMinWidth, Math.floor(width * sidebarWidthRatio)))
     : 0;
-  const compactChannelHeaderHeight = nativePaneChrome && !showChannelSidebar && channels.length > 1 ? 1 : 0;
   const chatWidth = Math.max(width - channelSidebarWidth, 1);
   const contentWidth = Math.max(chatWidth - 2, 1);
   const composerPrefixWidth = nativePaneChrome ? 0 : 3;
   const composerTextWidth = Math.max(contentWidth - composerPrefixWidth, 1);
   const inputValueRef = useRef(initialSnapshot.draft);
   const [messages, setMessages] = useState<ChatMessage[]>(initialSnapshot.messages);
+  const [channelStates, setChannelStates] = useState(initialSnapshot.channelStates);
+  const [onlineCount, setOnlineCount] = useState(initialSnapshot.onlineCount);
   const [hasSavedSession, setHasSavedSession] = useState(initialSnapshot.hasSavedSession);
   const [user, setUser] = useState<{ id: string; username: string; emailVerified: boolean } | null>(initialSnapshot.user);
   const [loading, setLoading] = useState(initialSnapshot.loading);
@@ -937,6 +1068,7 @@ export function ChatContent({
     : 0;
   const selectionActive = selectedIdx >= 0 && selectedIdx < messages.length;
   const stickyTranscript = followMessages && !selectionActive;
+  const latestMessageId = messages[messages.length - 1]?.id ?? null;
   const updateComposerRows = useCallback((draft: string) => {
     const nextRows = estimateComposerHeight(draft, composerTextWidth);
     setComposerRows((current) => (current === nextRows ? current : nextRows));
@@ -952,6 +1084,7 @@ export function ChatContent({
 
   useEffect(() => {
     void controller.refreshChannels().catch(() => {});
+    void controller.refreshPresence().catch(() => {});
     void controller.refreshSession().catch(() => {});
   }, [controller]);
 
@@ -962,6 +1095,8 @@ export function ChatContent({
     const snapshot = controller.getSnapshot(channelId);
     setMessages(snapshot.messages);
     setChannels(snapshot.channels);
+    setChannelStates(snapshot.channelStates);
+    setOnlineCount(snapshot.onlineCount);
     setChannelsLoading(snapshot.channelsLoading);
     setHasSavedSession(snapshot.hasSavedSession);
     setUser(snapshot.user);
@@ -987,6 +1122,8 @@ export function ChatContent({
     function handleSnapshot(snapshot: ReturnType<ChatController["getSnapshot"]>) {
       setMessages(snapshot.messages);
       setChannels(snapshot.channels);
+      setChannelStates(snapshot.channelStates);
+      setOnlineCount(snapshot.onlineCount);
       setChannelsLoading(snapshot.channelsLoading);
       setHasSavedSession(snapshot.hasSavedSession);
       setUser(snapshot.user);
@@ -1132,7 +1269,7 @@ export function ChatContent({
       oldestMessageId: messages[0]?.id ?? null,
       scrollHeight: getScrollHeight(scrollBox, exactPixels),
       scrollTop: getScrollTop(scrollBox, exactPixels),
-      selectedMessageId: selectedIdx >= 0 ? messages[selectedIdx]?.id ?? null : null,
+      selectedMessageId: selectedIdx >= 0 ? messages[selectedIdx]?.id ?? null : messages[0]?.id ?? null,
     };
     setFollowMessages(false);
     const request = useDefaultControllerChannel
@@ -1149,6 +1286,23 @@ export function ChatContent({
     requestOlderMessages();
   }, [requestOlderMessages]);
 
+  const handleTranscriptScrollActivity = useCallback((event?: { scroll?: { direction?: "up" | "down" | "left" | "right" } }) => {
+    const direction = event?.scroll?.direction;
+    runAfterLayout(() => {
+      requestOlderMessagesIfNeeded();
+
+      const scrollBox = scrollRef.current;
+      if (!scrollBox) return;
+      const atBottom = isScrolledToBottom(scrollBox, nativePaneChrome);
+      if (direction === "up" && !atBottom) {
+        setFollowMessages(false);
+        return;
+      }
+
+      setFollowMessages(atBottom);
+    });
+  }, [nativePaneChrome, requestOlderMessagesIfNeeded]);
+
   const scrollToLoadedMessage = useCallback((messageId: string) => {
     const targetIndex = messages.findIndex((message) => message.id === messageId);
     if (targetIndex < 0) return false;
@@ -1307,20 +1461,20 @@ export function ChatContent({
     const isEnterKey = event.name === "return" || event.name === "enter";
 
     if (sidebarFocusedRef.current && showChannelSidebar) {
-      if (event.name === "left") {
+      if (isPlainKey(event, "left")) {
         event.preventDefault?.();
         event.stopPropagation?.();
         return;
       }
 
-      if (event.name === "right") {
+      if (isPlainKey(event, "right")) {
         event.preventDefault?.();
         event.stopPropagation?.();
         focusChatContent();
         return;
       }
 
-      if (event.name === "up" || event.name === "down") {
+      if (isPlainKey(event, "up", "down")) {
         event.preventDefault?.();
         event.stopPropagation?.();
         moveSidebarChannelSelection(event.name);
@@ -1329,7 +1483,7 @@ export function ChatContent({
     }
 
     if (
-      event.name === "left" &&
+      isPlainKey(event, "left") &&
       showChannelSidebar &&
       (!inputFocused || inputValueRef.current.length === 0) &&
       focusChannelSidebar()
@@ -1351,7 +1505,7 @@ export function ChatContent({
         return;
       }
 
-      if ((event.name === "up" || event.name === "down") && shouldLeaveComposerForSelection(event.name)) {
+      if (isPlainKey(event, "up", "down") && shouldLeaveComposerForSelection(event.name)) {
         const moved = moveMessageSelection(event.name);
         if (moved) {
           event.preventDefault?.();
@@ -1364,12 +1518,12 @@ export function ChatContent({
       return;
     }
 
-    if ((event.name === "]" || event.sequence === "]") && cycleChannel(1)) {
+    if (isPlainKey(event, "]") && cycleChannel(1)) {
       event.preventDefault?.();
       event.stopPropagation?.();
       return;
     }
-    if ((event.name === "[" || event.sequence === "[") && cycleChannel(-1)) {
+    if (isPlainKey(event, "[") && cycleChannel(-1)) {
       event.preventDefault?.();
       event.stopPropagation?.();
       return;
@@ -1382,7 +1536,7 @@ export function ChatContent({
       return;
     }
 
-    if ((isEnterKey || event.name === "i") && canSend) {
+    if ((isEnterKey || isPlainKey(event, "i")) && canSend) {
       event.preventDefault?.();
       event.stopPropagation?.();
       queueMicrotask(() => focusComposer());
@@ -1399,7 +1553,7 @@ export function ChatContent({
       return;
     }
 
-    if (event.name === "j" || event.name === "down") {
+    if (isPlainKey(event, "j", "down")) {
       event.preventDefault?.();
       event.stopPropagation?.();
       if (selectedIdx === messages.length - 1) {
@@ -1409,7 +1563,7 @@ export function ChatContent({
       moveMessageSelection("down");
       return;
     }
-    if (event.name === "k" || event.name === "up") {
+    if (isPlainKey(event, "k", "up")) {
       event.preventDefault?.();
       event.stopPropagation?.();
       if (selectedIdx === 0 && hasOlderMessages && !loadingOlderMessages) {
@@ -1420,14 +1574,14 @@ export function ChatContent({
       return;
     }
 
-    if (canSend && event.name === "r" && selectedIdx >= 0 && selectedIdx < messages.length) {
+    if (canSend && isPlainKey(event, "r") && selectedIdx >= 0 && selectedIdx < messages.length) {
       event.preventDefault?.();
       event.stopPropagation?.();
       beginReplyTo(selectedIdx, { deferFocus: true });
       return;
     }
 
-    if (event.name === "g" && !event.shift) {
+    if (isPlainKey(event, "g")) {
       event.preventDefault?.();
       event.stopPropagation?.();
       setSelectedIdx(0);
@@ -1453,7 +1607,7 @@ export function ChatContent({
   const inputAreaHeight = canSend ? composerBlockHeight + inputMetaHeight : 2;
   const topSeparatorHeight = nativePaneChrome ? 0 : 1;
   const footerSeparatorHeight = !nativePaneChrome && !canSend ? 1 : 0;
-  const messageAreaHeight = Math.max(1, height - compactChannelHeaderHeight - topSeparatorHeight - footerSeparatorHeight - inputAreaHeight);
+  const messageAreaHeight = Math.max(1, height - topSeparatorHeight - footerSeparatorHeight - inputAreaHeight);
   const composerWidth = nativePaneChrome ? chatWidth : contentWidth;
 
   useEffect(() => {
@@ -1464,36 +1618,38 @@ export function ChatContent({
   useEffect(() => {
     if (!stickyTranscript) return;
     queueMicrotask(() => scrollToBottom(scrollRef.current, nativePaneChrome));
-  }, [contentWidth, height, messages, messageAreaHeight, nativePaneChrome, stickyTranscript]);
+  }, [channelId, contentWidth, height, latestMessageId, messageAreaHeight, nativePaneChrome, stickyTranscript]);
 
   useEffect(() => {
     const anchor = prependAnchorRef.current;
     if (!anchor || loadingOlderMessages) return;
 
+    const currentAnchor = anchor;
+    const scrollBox = scrollRef.current;
+    if (!scrollBox) return;
+    if (pendingJumpMessageIdRef.current) {
+      prependAnchorRef.current = null;
+      return;
+    }
+
+    const previousOldestIndex = currentAnchor.oldestMessageId
+      ? messages.findIndex((message) => message.id === currentAnchor.oldestMessageId)
+      : -1;
+    const exactPixels = nativePaneChrome === true && hasPixelScrollMetrics(scrollBox);
+    const addedRows = !exactPixels && previousOldestIndex > 0
+      ? getMessageTopOffset(messages, previousOldestIndex, contentWidth)
+      : Math.max(0, getScrollHeight(scrollBox, exactPixels) - currentAnchor.scrollHeight);
+    scrollToPosition(scrollBox, currentAnchor.scrollTop + addedRows, exactPixels);
+    if (currentAnchor.selectedMessageId) {
+      const selectedMessageIndex = messages.findIndex((message) => message.id === currentAnchor.selectedMessageId);
+      if (selectedMessageIndex >= 0) {
+        setSelectedIdx(selectedMessageIndex);
+      }
+    }
     queueMicrotask(() => {
-      const currentAnchor = prependAnchorRef.current;
-      const scrollBox = scrollRef.current;
-      if (!currentAnchor || !scrollBox) return;
-      if (pendingJumpMessageIdRef.current) {
+      if (prependAnchorRef.current === currentAnchor) {
         prependAnchorRef.current = null;
-        return;
       }
-
-      const previousOldestIndex = currentAnchor.oldestMessageId
-        ? messages.findIndex((message) => message.id === currentAnchor.oldestMessageId)
-        : -1;
-      const exactPixels = nativePaneChrome === true && hasPixelScrollMetrics(scrollBox);
-      const addedRows = !exactPixels && previousOldestIndex > 0
-        ? getMessageTopOffset(messages, previousOldestIndex, contentWidth)
-        : Math.max(0, getScrollHeight(scrollBox, exactPixels) - currentAnchor.scrollHeight);
-      scrollToPosition(scrollBox, currentAnchor.scrollTop + addedRows, exactPixels);
-      if (currentAnchor.selectedMessageId) {
-        const selectedMessageIndex = messages.findIndex((message) => message.id === currentAnchor.selectedMessageId);
-        if (selectedMessageIndex >= 0) {
-          setSelectedIdx(selectedMessageIndex);
-        }
-      }
-      prependAnchorRef.current = null;
     });
   }, [contentWidth, loadingOlderMessages, messages, nativePaneChrome]);
 
@@ -1506,6 +1662,7 @@ export function ChatContent({
     const sb = scrollRef.current;
     if (!sb) return;
     if (!selectionActive) return;
+    if (prependAnchorRef.current) return;
     if (nativePaneChrome) {
       const selectedMessageId = messages[selectedIdx]?.id ?? "";
       runAfterLayout(() => scrollElementIntoScrollBoxView(scrollRef.current, messageElementsRef.current.get(selectedMessageId)));
@@ -1531,8 +1688,6 @@ export function ChatContent({
     )
     : "";
   const inputPlaceholder = replyTo ? `Reply to @${replyTo.user.username}...` : "Type a message...";
-  const activeChannel = channels.find((channel) => channel.id === channelId);
-  const activeChannelLabel = formatChannelLabel(activeChannel, channelId);
   const chatContentBg = focused && showChannelSidebar && !sidebarFocused
     ? blendHex(colors.bg, colors.borderFocused, 0.08)
     : undefined;
@@ -1550,14 +1705,20 @@ export function ChatContent({
       {showChannelSidebar && (
         <ChannelSidebar
           channels={channels}
+          channelStates={channelStates}
           activeChannelId={channelId}
+          onlineCount={onlineCount}
           width={channelSidebarWidth}
           height={height}
           focused={focused}
           keyboardFocused={sidebarFocused}
           loading={channelsLoading}
+          canManageNotifications={!!user?.emailVerified}
           onSelect={changeChannel}
           onFocusRequest={() => setSidebarFocused(true)}
+          onToggleNotifications={(nextChannelId, enabled) => {
+            controller.setChannelNotificationsEnabled(nextChannelId, enabled);
+          }}
         />
       )}
 
@@ -1570,15 +1731,6 @@ export function ChatContent({
         onMouseDown={() => setSidebarFocused(false)}
         style={nativeFillStyle}
       >
-      {compactChannelHeaderHeight > 0 && (
-        <Box height={1} width={contentWidth} flexDirection="row">
-          <Text fg={colors.textDim}>#</Text>
-          <Text fg={colors.positive} attributes={TextAttributes.BOLD}>
-            {truncateChannelLabel(activeChannelLabel, Math.max(contentWidth - 1, 1))}
-          </Text>
-        </Box>
-      )}
-
       {!nativePaneChrome && (
         <Box height={1} width={contentWidth}>
           <Text fg={colors.border}>{"-".repeat(contentWidth)}</Text>
@@ -1593,7 +1745,7 @@ export function ChatContent({
         focusable={false}
         stickyScroll={stickyTranscript}
         stickyStart="bottom"
-        onMouseScroll={() => queueMicrotask(requestOlderMessagesIfNeeded)}
+        onMouseScroll={handleTranscriptScrollActivity}
         style={nativePaneChrome ? { minHeight: 0 } : undefined}
       >
         {loadingOlderMessages && (
@@ -1655,6 +1807,17 @@ export function ChatContent({
 
       {canSend ? (
         <>
+          {nativePaneChrome && (
+            <Box
+              width={composerWidth}
+              style={{
+                flex: `0 0 ${DESKTOP_CHAT_INPUT_TOP_MARGIN_PX}px`,
+                height: DESKTOP_CHAT_INPUT_TOP_MARGIN_PX,
+                minHeight: DESKTOP_CHAT_INPUT_TOP_MARGIN_PX,
+              }}
+            />
+          )}
+
           {replyTo && (
             <Box height={1} width={contentWidth} flexDirection="row">
               <Text fg={colors.textMuted}> replying to </Text>
@@ -1735,9 +1898,6 @@ function ChatPane({ focused, width, height, close }: PaneProps) {
   const persistChannelId = useCallback((nextChannelId: string) => {
     const currentState = stateRef.current;
     const layout = setPaneSetting(currentState.config.layout, paneId, "channelId", nextChannelId);
-    const layouts = currentState.config.layouts.map((savedLayout, index) => (
-      index === currentState.config.activeLayoutIndex ? { ...savedLayout, layout } : savedLayout
-    ));
     const pluginConfig = {
       ...currentState.config.pluginConfig,
       "gloomberb-cloud": {
@@ -1748,11 +1908,16 @@ function ChatPane({ focused, width, height, close }: PaneProps) {
     const nextConfig = {
       ...currentState.config,
       layout,
-      layouts,
       pluginConfig,
     };
-    dispatch({ type: "SET_CONFIG", config: nextConfig });
-    scheduleConfigSave(nextConfig);
+    const syncedConfig = syncConfigActiveLayoutState(
+      nextConfig,
+      currentState.paneState,
+      currentState.focusedPaneId,
+      currentState.activePanel,
+    );
+    dispatch({ type: "SET_CONFIG", config: syncedConfig });
+    scheduleConfigSave(syncedConfig);
   }, [dispatch, paneId, stateRef]);
   const [channelId, setLocalChannelId] = useState(initialChannelIdRef.current);
   const pendingChannelIdRef = useRef<string | null>(null);