feat(channels): show typing status on sidebar dm rows

src/bundled/channels/ChannelSidebarItem.test.tsx

@@ -17,6 +17,8 @@ import { ChannelSidebarItem } from "./ChannelSidebarItem";
 
 afterEach(cleanup);
 
+const noTyping = Object.freeze([]);
+
 function owner(profiles = new Map<string, Profile>()) {
   const listeners = new Set<() => void>();
   let snapshot: UnreadSnapshot = {
@@ -40,6 +42,7 @@ function owner(profiles = new Map<string, Profile>()) {
       snapshot: () => profiles,
       subscribe: () => () => {},
     },
+    typing: { snapshot: () => noTyping, subscribe: () => () => {} },
     unread: {
       snapshot: () => snapshot,
       subscribe: (_target: unknown, listener: () => void) => {

src/bundled/channels/ChannelSidebarItem.tsx

@@ -12,6 +12,7 @@ import { ChatCircleIcon } from "../../shared/design-system/icons/index";
 import { channelIcon } from "../../features/channels/channel-icon";
 import { ChannelActivityPopover } from "./ChannelActivityPopover";
 import { ChannelSidebarRow } from "./ChannelSidebarRow";
+import { DmTypingBadge } from "./DmTypingBadge";
 import { usePresenceStatus } from "../../features/presence/react";
 import { UnreadBadge } from "./UnreadBadge";
 import styles from "./Channels.module.css";
@@ -91,32 +92,37 @@ export const ChannelSidebarItem = memo(function ChannelSidebarItem({
       channel={channel}
       dmVisualSpacing={channel.channelType === "dm"}
       icon={
-        channel.channelType === "dm" && channel.participants?.length === 1 ? (
-          <span className={styles.dmAvatar} data-dm-identity="">
-            <Avatar
-              src={
-                profile?.picture
-                  ? session.media(profile.picture, "small")
-                  : undefined
-              }
-              alt=""
-              fallback={channel.name}
-              size="fill"
-              shape={profile?.isAgent ? "squircle" : "circle"}
-              statusBadge={presence === "unknown" ? undefined : presence}
-            />
-          </span>
-        ) : channel.channelType === "dm" &&
-          (channel.participants?.length ?? 0) > 1 ? (
-          <span
-            className={styles.dmCount}
-            data-dm-identity=""
-            data-dm-participant-count=""
-            title={`${channel.participants?.length} other participants`}
-            aria-hidden="true"
-          >
-            {channel.participants?.length}
-          </span>
+        channel.channelType === "dm" ? (
+          <DmTypingBadge session={session} channelId={channel.id}>
+            {channel.participants?.length === 1 ? (
+              <span className={styles.dmAvatar} data-dm-identity="">
+                <Avatar
+                  src={
+                    profile?.picture
+                      ? session.media(profile.picture, "small")
+                      : undefined
+                  }
+                  alt=""
+                  fallback={channel.name}
+                  size="fill"
+                  shape={profile?.isAgent ? "squircle" : "circle"}
+                  statusBadge={presence === "unknown" ? undefined : presence}
+                />
+              </span>
+            ) : (channel.participants?.length ?? 0) > 1 ? (
+              <span
+                className={styles.dmCount}
+                data-dm-identity=""
+                data-dm-participant-count=""
+                title={`${channel.participants?.length} other participants`}
+                aria-hidden="true"
+              >
+                {channel.participants?.length}
+              </span>
+            ) : (
+              <Icon size={16} />
+            )}
+          </DmTypingBadge>
         ) : (
           <Icon size={16} />
         )

src/bundled/channels/Channels.module.css

@@ -736,6 +736,42 @@
   background: var(--affordance-accent-prominent);
 }
 
+/* Occupies the DM identity box while it replaces the avatar or count; shares
+   the participant-count chip's subtle roles. */
+.typing {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-half);
+  border-radius: var(--radius-pill);
+  background: var(--affordance-subtle);
+}
+.typing > span {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--text-subtle);
+}
+@keyframes typing-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .typing > span {
+    animation: typing-pulse 1.4s ease-in-out infinite;
+  }
+  .typing > span:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  .typing > span:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}
+
 /* Match the adjacent small avatars without creating image/profile demand. */
 .dmAvatar {
   display: inline-grid;