fix(channels): keep ringing pins joinable and size pins like iMessage

apps/web/src/features/channels-view/components/ChannelPins.tsx

@@ -6,13 +6,16 @@ import { Show } from 'solid-js';
 /** How many favorites the mobile Channels list pins above its conversations. */
 export const MAX_PINNED_CHANNELS = 6;
 
-/** Three-across grid of pinned conversations, like iMessage pins. */
+/**
+ * Pinned conversations three across, like iMessage: a short last row
+ * centers rather than hugging the left edge. Each child takes a third.
+ */
 export function ChannelPinGrid(props: ParentProps) {
   return (
     <div
       role="group"
       aria-label="Pinned conversations"
-      class="grid grid-cols-3 gap-y-4 px-(--mobile-chrome-gutter) pt-1 pb-5"
+      class="flex flex-wrap justify-center gap-y-4 px-(--mobile-chrome-gutter) pt-2 pb-5"
     >
       {props.children}
     </div>
@@ -27,27 +30,31 @@ export function ChannelPin(props: {
   return (
     <button
       type="button"
-      class="flex w-full min-w-0 flex-col items-center gap-1.5 outline-none"
+      class="flex w-full min-w-0 flex-col items-center gap-2 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-accent"
       onClick={(event) => props.onActivate(event)}
     >
-      <span class="grid size-18 shrink-0 place-items-center overflow-hidden rounded-full border border-edge bg-surface-2 text-ink-muted [&_img]:size-full [&_img]:object-cover [&_svg]:size-8">
-        <Entity.Icon entity={props.channel} suppressClick showTooltip={false} />
-      </span>
-      <span class="flex max-w-full min-w-0 items-center gap-1 px-1">
+      <span class="relative size-22 shrink-0">
+        <span class="grid size-full place-items-center overflow-hidden rounded-full bg-surface-2 text-ink-muted [&_img]:size-full [&_img]:object-cover [&_svg]:size-9">
+          <Entity.Icon
+            entity={props.channel}
+            suppressClick
+            showTooltip={false}
+          />
+        </span>
         <Show when={props.unread}>
           <span
             aria-label="Unread"
-            class="size-2 shrink-0 rounded-full bg-accent"
+            class="absolute top-1 left-1 size-3.5 rounded-full border-2 border-panel bg-accent"
           />
         </Show>
-        <span
-          class={cn(
-            'min-w-0 truncate text-xs',
-            props.unread ? 'text-ink' : 'text-ink-muted'
-          )}
-        >
-          {props.channel.name}
-        </span>
+      </span>
+      <span
+        class={cn(
+          'max-w-full truncate px-1 text-xs',
+          props.unread ? 'text-ink' : 'text-ink-muted'
+        )}
+      >
+        {props.channel.name}
       </span>
     </button>
   );

apps/web/src/features/channels-view/components/ChannelsMobileView.test.tsx

@@ -27,6 +27,7 @@ const mocks = vi.hoisted(() => ({
   },
   handle: {},
   failure: vi.fn(),
+  incomingCallIds: new Map<string, string>(),
 }));
 vi.mock('@app/components/list', () => ({ createListController: () => ({}) }));
 vi.mock('@app/features/next-soup/actions', () => ({
@@ -100,7 +101,8 @@ vi.mock('@channel/Channel/channel-actions', () => ({
   CHANNEL_ACTION_VIEW_CONTEXT: {},
 }));
 vi.mock('./rail/ChannelRailItems', () => ({
-  IncomingCallActions: () => null,
+  IncomingCallActions: (props: { callId?: string }) =>
+    props.callId ? <button>Join {props.callId}</button> : null,
 }));
 vi.mock('./rail/hooks/useChannelCalls', () => ({
   useChannelCalls: () => ({}),
@@ -109,7 +111,7 @@ vi.mock('./rail/hooks/useChannelRailActivity', () => ({
   useChannelRailActivity: () => ({
     unreadChannelIds: () => new Set(['one']),
     callStatuses: () => new Map(),
-    incomingCallIds: () => new Map(),
+    incomingCallIds: () => mocks.incomingCallIds,
   }),
 }));
 
@@ -139,6 +141,7 @@ const source: ChannelsDataSource = {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  mocks.incomingCallIds = new Map();
   HTMLElement.prototype.scrollTo = vi.fn();
 });
 afterEach(() => {
@@ -295,6 +298,24 @@ describe('mobile channel pins', () => {
     );
   });
 
+  it('keeps a pinned conversation in the list while its call rings so it can be joined', () => {
+    mocks.incomingCallIds = new Map([['two', 'call-1']]);
+    render(() => (
+      <ChannelsMobileView
+        source={both}
+        pinned={[pinnedChannel]}
+        searchQuery=""
+        onClearSearch={() => {}}
+      />
+    ));
+
+    expect(
+      screen.getByRole('group', { name: 'Pinned conversations' })
+    ).toBeTruthy();
+    expect(screen.getAllByRole('button', { name: 'Two' })).toHaveLength(2);
+    expect(screen.getByRole('button', { name: 'Join call-1' })).toBeTruthy();
+  });
+
   it('lists pinned conversations normally while searching', () => {
     render(() => (
       <ChannelsMobileView

apps/web/src/features/channels-view/components/ChannelsMobileView.tsx

@@ -66,19 +66,28 @@ export function ChannelsMobileView(props: {
   );
   const channelCalls = useChannelCalls();
   const pinned = () => (props.searchQuery.trim() ? [] : props.pinned);
-  // Pinned conversations leave the list below, as in iMessage.
-  const visibleChannels = createMemo(() => {
-    const pinnedIds = new Set(pinned().map((channel) => channel.id));
-    return props.source.items().filter((channel) => !pinnedIds.has(channel.id));
-  });
+  const pinnedIds = createMemo(
+    () => new Set(pinned().map((channel) => channel.id))
+  );
   const activityChannels = createMemo(() => [
     ...pinned(),
-    ...visibleChannels(),
+    ...props.source.items().filter((channel) => !pinnedIds().has(channel.id)),
   ]);
   const channelActivity = useChannelRailActivity(
     activityChannels,
     channelCalls
   );
+  // Pinned conversations leave the list below, as in iMessage, except while
+  // a call rings: its Join and Decline actions live on the list row.
+  const visibleChannels = createMemo(() =>
+    props.source
+      .items()
+      .filter(
+        (channel) =>
+          !pinnedIds().has(channel.id) ||
+          channelActivity.incomingCallIds().has(channel.id)
+      )
+  );
   const isUnread = (channel: ChannelEntity) =>
     channelActivity.unreadChannelIds().has(channel.id);
   const actionController = createListController({
@@ -179,7 +188,7 @@ export function ChannelsMobileView(props: {
                     list={actionList}
                     selectedEntities={() => []}
                     viewContext={CHANNEL_ACTION_VIEW_CONTEXT}
-                    class="block min-w-0"
+                    class="block w-1/3 min-w-0"
                     onOpenChange={(open) => {
                       if (!open) return;
                       actionController.focus.set(channel.id, {
@@ -305,7 +314,6 @@ export function ChannelsMobileView(props: {
                         ...toInboxCardDisplayItem(channel),
                         unread: isUnread(channel),
                       }}
-                      focusable={false}
                       onClick={(event) =>
                         fireAndForget(
                           openChannel(channel, event),