feat(messages): polish sidebar interactions

src/bundled/channels/ChannelSidebarItem.test.tsx

@@ -57,8 +57,8 @@ it("keeps live unread updates and uses replacement session callbacks across row
     channel: { id: "alpha", name: "Alpha", channelType: "stream" as const },
     session: first.session,
     working: false,
+    sessionsEnabled: true,
     selected: undefined,
-    search: "",
     collapsed: false,
     onToggle: vi.fn(),
     draft: false,

src/bundled/channels/ChannelSidebarItem.tsx

@@ -19,6 +19,7 @@ export const ChannelSidebarItem = memo(function ChannelSidebarItem({
   channel,
   session,
   working,
+  sessionsEnabled,
   selected,
   collapsed,
   onToggle,
@@ -32,6 +33,7 @@ export const ChannelSidebarItem = memo(function ChannelSidebarItem({
   channel: ChannelSummary;
   session: RelaySession;
   working: boolean;
+  sessionsEnabled: boolean;
   selected: string | undefined;
   collapsed: boolean;
   onToggle: (key: string, open: boolean) => void;
@@ -79,6 +81,7 @@ export const ChannelSidebarItem = memo(function ChannelSidebarItem({
         />
       )}
       selected={selected}
+      sessionsEnabled={sessionsEnabled}
       collapsed={collapsed}
       onToggle={(open) => onToggle(`session-children:${channel.id}`, open)}
       draft={draft}

src/bundled/channels/ChannelSidebarRow.module.css

@@ -4,7 +4,20 @@
   align-items: center;
   width: 100%;
   min-width: 0;
-  border-radius: var(--radius-control);
+  border-radius: var(--channel-row-radius, var(--radius-row));
+  background: transparent;
+  transition:
+    color var(--duration-state) var(--easing-state),
+    background-color var(--duration-state) var(--easing-state);
+}
+.row:hover:not([data-selected]) {
+  background: var(--affordance-subtle);
+}
+.row[data-selected] {
+  background: var(--affordance-selected);
+}
+.row .select [data-buzz-ui][data-variant="row"] {
+  background: transparent;
 }
 .row .select {
   flex: 1;
@@ -54,7 +67,7 @@
 
 .row .disclosure {
   position: absolute;
-  left: var(--space-1);
+  left: calc(var(--space-control-inset) - (var(--size-row) - 17px) / 2);
   z-index: 1;
 }
 .hashIcon {

src/bundled/channels/ChannelSidebarRow.test.tsx

@@ -73,6 +73,7 @@ function mount(selected = "child") {
         draft={true}
         draftSelected={false}
         selected={selected}
+        sessionsEnabled
         onSelect={onSelect}
         onPrepare={() => {}}
         onNewSession={onNewSession}
@@ -115,6 +116,27 @@ it("opens a compact action menu independently of selecting its channel", async (
     expect(trigger).toHaveFocus();
   });
 });
+it("hides session actions when the Sessions plugin is unavailable", () => {
+  const onNewSession = vi.fn();
+  render(
+    <ChannelSidebarRow
+      channel={parent}
+      collapsed={false}
+      onToggle={() => {}}
+      icon={<svg />}
+      sessions={[]}
+      sessionsEnabled={false}
+      draft={false}
+      draftSelected={false}
+      onSelect={() => {}}
+      onPrepare={() => {}}
+      onNewSession={onNewSession}
+    />,
+  );
+  expect(
+    screen.queryByRole("button", { name: "More options for Engineering" }),
+  ).not.toBeInTheDocument();
+});
 it("opens saved child sessions and retained drafts without a channel icon", async () => {
   const user = userEvent.setup();
   const callbacks = mount();

src/bundled/channels/ChannelSidebarRow.tsx

@@ -18,6 +18,7 @@ export function ChannelSidebarRow({
   childContent,
   wrapSelect,
   selected,
+  sessionsEnabled,
   sessions,
   draft,
   draftSelected,
@@ -33,6 +34,7 @@ export function ChannelSidebarRow({
   childContent?: ((channel: ChannelSummary) => ReactNode) | undefined;
   wrapSelect?: ((trigger: ReactElement) => ReactNode) | undefined;
   selected?: string | undefined;
+  sessionsEnabled: boolean;
   sessions: readonly ChannelSummary[];
   draft: boolean;
   draftSelected: boolean;
@@ -47,13 +49,13 @@ export function ChannelSidebarRow({
   const hasChildren = draft || sessions.length > 0;
   const Chevron = collapsed ? CaretRightIcon : CaretDownIcon;
   const canParent =
+    sessionsEnabled &&
     channel.channelType !== "dm" &&
     channel.channelType !== "session" &&
     !channel.archived;
   const selectButton = (
     <NavigationItem
       type="button"
-      title={channel.name}
       data-channel-id={channel.id}
       aria-current={
         selected === channel.id && !draftSelected ? "page" : undefined
@@ -77,6 +79,7 @@ export function ChannelSidebarRow({
     <>
       <div
         className={styles.row}
+        data-channel-sidebar-row=""
         data-selected={(selected === channel.id && !draftSelected) || undefined}
       >
         {hasChildren && (
@@ -162,7 +165,7 @@ export function ChannelSidebarRow({
       <div id={childrenId} hidden={collapsed}>
         {draft && (
           <NavigationItem
-            inset
+            icon={<span className={styles.iconSpace} aria-hidden="true" />}
             label="New session"
             trailing={<small>Draft</small>}
             aria-label={`New session draft in ${channel.name}`}
@@ -172,10 +175,9 @@ export function ChannelSidebarRow({
         )}
         {sessions.map((child) => (
           <NavigationItem
-            inset
             key={child.id}
             type="button"
-            title={child.name}
+            icon={<span className={styles.iconSpace} aria-hidden="true" />}
             data-channel-id={child.id}
             aria-label={`${child.name}, session in ${channel.name}`}
             aria-current={selected === child.id ? "page" : undefined}