feat: highlight queue tab when host has unseen joins

Persistent warning-colored tab with rippling glow and waving raise-hand icon
while a host or co-host has new queue arrivals they haven't viewed. Clears
when the queue tab is opened or the queue empties.

Author: idoshamun

packages/shared/src/components/liveRooms/LiveRoom.tsx

@@ -104,6 +104,8 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => {
   const [focusedSpeakerIndex, setFocusedSpeakerIndex] = useState<number | null>(
     null,
   );
+  const [hasUnseenQueueJoins, setHasUnseenQueueJoins] = useState(false);
+  const previousQueueLengthRef = useRef<number | null>(null);
   const lastLoggedRoomErrorRef = useRef<string | null>(null);
   const { buildStandupExtra, logStandupAction } = useLiveRoomStandupAnalytics({
     roomId,
@@ -405,6 +407,45 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => {
     }
   }, [activeTab, isFreeForAll]);
 
+  useEffect(() => {
+    if (!roomState) {
+      return;
+    }
+    const queueLength = queuedParticipantIds.length;
+    const previousLength = previousQueueLengthRef.current;
+    previousQueueLengthRef.current = queueLength;
+
+    if (queueLength === 0) {
+      setHasUnseenQueueJoins(false);
+      return;
+    }
+    if (previousLength === null) {
+      return;
+    }
+    if (!hasHostPrivileges || isFreeForAll) {
+      return;
+    }
+    if (activeTab === 'queue') {
+      return;
+    }
+    if (queueLength <= previousLength) {
+      return;
+    }
+    setHasUnseenQueueJoins(true);
+  }, [
+    roomState,
+    queuedParticipantIds.length,
+    hasHostPrivileges,
+    isFreeForAll,
+    activeTab,
+  ]);
+
+  useEffect(() => {
+    if (activeTab === 'queue') {
+      setHasUnseenQueueJoins(false);
+    }
+  }, [activeTab]);
+
   useEffect(() => {
     setStagePage((currentPage) => Math.min(currentPage, stagePageCount - 1));
   }, [stagePageCount]);
@@ -638,6 +679,8 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => {
             active={activeTab}
             tabs={sidePanelTabs}
             onChange={handleTabChange}
+            attentionTabId="queue"
+            hasAttention={hasUnseenQueueJoins}
           />
           <div {...sidePanelSwipeHandlers} className="min-h-0 flex-1">
             {activeTab === 'chat' ? (

packages/shared/src/components/liveRooms/LiveRoomSidePanelTabs.tsx

@@ -1,19 +1,25 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import { RaiseHandIcon } from '../icons/RaiseHand';
+import { IconSize } from '../Icon';
 
 export type LiveRoomSidePanelTab = 'chat' | 'queue' | 'audience';
 
 interface LiveRoomSidePanelTabsProps {
   active: LiveRoomSidePanelTab;
   tabs: { id: LiveRoomSidePanelTab; label: string; count?: number }[];
   onChange: (tab: LiveRoomSidePanelTab) => void;
+  attentionTabId?: LiveRoomSidePanelTab;
+  hasAttention?: boolean;
 }
 
 export const LiveRoomSidePanelTabs = ({
   active,
   tabs,
   onChange,
+  attentionTabId,
+  hasAttention = false,
 }: LiveRoomSidePanelTabsProps): ReactElement => (
   <div
     role="tablist"
@@ -22,6 +28,8 @@ export const LiveRoomSidePanelTabs = ({
   >
     {tabs.map((tab) => {
       const isActive = tab.id === active;
+      const showAttention =
+        hasAttention && attentionTabId === tab.id && !isActive;
 
       return (
         <button
@@ -31,25 +39,45 @@ export const LiveRoomSidePanelTabs = ({
           aria-selected={isActive}
           onClick={() => onChange(tab.id)}
           className={classNames(
-            'flex flex-1 items-center justify-center gap-1.5 rounded-8 px-2 py-1 transition-colors typo-footnote tablet:gap-2 tablet:rounded-10 tablet:px-3 tablet:py-2 tablet:typo-callout',
-            isActive
-              ? 'bg-surface-float font-bold text-text-primary'
-              : 'text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
+            'relative flex flex-1 items-center justify-center gap-1.5 rounded-8 px-2 py-1 transition-colors typo-footnote tablet:gap-2 tablet:rounded-10 tablet:px-3 tablet:py-2 tablet:typo-callout',
+            isActive && 'bg-surface-float font-bold text-text-primary',
+            !isActive &&
+              !showAttention &&
+              'text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
+            showAttention &&
+              'bg-status-warning font-bold text-white hover:brightness-110',
           )}
         >
+          {showAttention ? (
+            <RaiseHandIcon
+              secondary
+              size={IconSize.XSmall}
+              className="origin-bottom animate-queue-attention-wave"
+            />
+          ) : null}
           {tab.label}
           {tab.count !== undefined && tab.count > 0 ? (
             <span
               className={classNames(
                 'rounded-full px-1.5 typo-caption2',
-                isActive
+                showAttention && 'bg-white text-status-warning',
+                !showAttention && isActive
                   ? 'bg-action-upvote-float text-action-upvote-default'
-                  : 'bg-surface-float text-text-tertiary',
+                  : null,
+                !showAttention && !isActive
+                  ? 'bg-surface-float text-text-tertiary'
+                  : null,
               )}
             >
               {tab.count}
             </span>
           ) : null}
+          {showAttention ? (
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 animate-queue-attention rounded-8 tablet:rounded-10"
+            />
+          ) : null}
         </button>
       );
     })}

packages/shared/tailwind.config.ts

@@ -278,6 +278,17 @@ export default {
           '60%': { transform: 'rotate(-10deg)' },
           '80%': { transform: 'rotate(6deg)' },
         },
+        'queue-attention': {
+          '0%': { boxShadow: '0 0 0 0 var(--status-warning)' },
+          '70%': { boxShadow: '0 0 0 8px transparent' },
+          '100%': { boxShadow: '0 0 0 0 transparent' },
+        },
+        'queue-attention-wave': {
+          '0%, 60%, 100%': { transform: 'rotate(0deg)' },
+          '15%': { transform: 'rotate(-18deg)' },
+          '30%': { transform: 'rotate(14deg)' },
+          '45%': { transform: 'rotate(-8deg)' },
+        },
       },
       animation: {
         'scale-down-pulse':
@@ -289,6 +300,10 @@ export default {
         'raise-hand-pop':
           'raise-hand-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both',
         'raise-hand-wave': 'raise-hand-wave 700ms ease-in-out 240ms both',
+        'queue-attention':
+          'queue-attention 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'queue-attention-wave':
+          'queue-attention-wave 1.6s ease-in-out infinite',
       },
     },
     lineClamp: {