feat: improve mobile standup experience (#5986)

Author: idoshamun

packages/shared/src/components/fields/RichTextInput.tsx

@@ -146,6 +146,7 @@ interface RichTextInputProps {
   allowBlockFormatting?: boolean;
   minHeightClassName?: string;
   markdownToHtml?: (markdown: string) => string;
+  hideToolbar?: boolean;
 }
 
 export interface RichTextInputRef {
@@ -181,6 +182,7 @@ function RichTextInput(
     allowBlockFormatting = true,
     minHeightClassName = 'min-h-[8rem]',
     markdownToHtml = markdownToHtmlBasic,
+    hideToolbar = false,
   }: RichTextInputProps,
   ref: ForwardedRef<RichTextInputRef>,
 ): ReactElement {
@@ -780,48 +782,53 @@ function RichTextInput(
             </>
           ) : (
             <>
-              <RichTextToolbar
-                ref={toolbarRef}
-                editor={editor}
-                allowBlockFormatting={allowBlockFormatting}
-                onLinkAdd={(url, label) => {
-                  if (!editor) {
-                    return;
-                  }
-                  if (!editor.state.selection.empty) {
-                    editor.chain().focus().setLink({ href: url }).run();
-                    return;
+              {hideToolbar ? null : (
+                <RichTextToolbar
+                  ref={toolbarRef}
+                  editor={editor}
+                  allowBlockFormatting={allowBlockFormatting}
+                  onLinkAdd={(url, label) => {
+                    if (!editor) {
+                      return;
+                    }
+                    if (!editor.state.selection.empty) {
+                      editor.chain().focus().setLink({ href: url }).run();
+                      return;
+                    }
+                    const linkText = label || url;
+                    editor
+                      .chain()
+                      .focus()
+                      .insertContent({
+                        type: 'text',
+                        text: linkText,
+                        marks: [{ type: 'link', attrs: { href: url } }],
+                      })
+                      .run();
+                  }}
+                  inlineActions={hasToolbarActions ? toolbarActions : null}
+                  rightActions={
+                    <div className="flex items-center gap-0">
+                      {savingLabel}
+                      <SimpleTooltip content="Switch to Markdown Editor">
+                        <Button
+                          type="button"
+                          variant={ButtonVariant.Tertiary}
+                          size={ButtonSize.Small}
+                          icon={<MarkdownIcon />}
+                          onClick={switchToMarkdownMode}
+                        />
+                      </SimpleTooltip>
+                      {onClose && (
+                        <CloseButton
+                          size={ButtonSize.Small}
+                          onClick={onClose}
+                        />
+                      )}
+                    </div>
                   }
-                  const linkText = label || url;
-                  editor
-                    .chain()
-                    .focus()
-                    .insertContent({
-                      type: 'text',
-                      text: linkText,
-                      marks: [{ type: 'link', attrs: { href: url } }],
-                    })
-                    .run();
-                }}
-                inlineActions={hasToolbarActions ? toolbarActions : null}
-                rightActions={
-                  <div className="flex items-center gap-0">
-                    {savingLabel}
-                    <SimpleTooltip content="Switch to Markdown Editor">
-                      <Button
-                        type="button"
-                        variant={ButtonVariant.Tertiary}
-                        size={ButtonSize.Small}
-                        icon={<MarkdownIcon />}
-                        onClick={switchToMarkdownMode}
-                      />
-                    </SimpleTooltip>
-                    {onClose && (
-                      <CloseButton size={ButtonSize.Small} onClick={onClose} />
-                    )}
-                  </div>
-                }
-              />
+                />
+              )}
               {isUploadEnabled && (
                 <input
                   type="file"

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

@@ -20,6 +20,7 @@ const mockUsePushNotificationContext = jest.fn();
 const mockSubscribeToLiveRoom = jest.fn();
 const mockUnsubscribeFromLiveRoom = jest.fn();
 const mockEnablePush = jest.fn();
+const mockUseViewSize = jest.fn<boolean, [unknown]>(() => true);
 const mockUseQueries = useQueries as jest.Mock;
 
 jest.mock('@tanstack/react-query', () => {
@@ -73,6 +74,14 @@ jest.mock('../../hooks/useToastNotification', () => ({
   useToastNotification: () => ({ displayToast: mockDisplayToast }),
 }));
 
+jest.mock('../../hooks', () => {
+  const actual = jest.requireActual('../../hooks');
+  return {
+    ...actual,
+    useViewSize: (size: unknown) => mockUseViewSize(size),
+  };
+});
+
 jest.mock('../../graphql/users', () => ({
   getUserShortInfo: jest.fn(),
 }));
@@ -257,6 +266,7 @@ const createParticipant = (
 describe('LiveRoom', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUseViewSize.mockReturnValue(true);
     mockUseLiveRoomParticipantStreams.mockReturnValue(new Map());
     mockSubscribeToLiveRoom.mockResolvedValue({});
     mockUnsubscribeFromLiveRoom.mockResolvedValue({});
@@ -946,6 +956,49 @@ describe('LiveRoom', () => {
     expect(screen.getAllByTestId('live-room-tile')).toHaveLength(12);
   });
 
+  it('limits stage pagination to four visible speakers on mobile', () => {
+    mockUseViewSize.mockReturnValue(false);
+    const activeSpeakerParticipantIds = Array.from(
+      { length: 12 },
+      (_, index) => `speaker-${index + 1}`,
+    );
+    const participants = activeSpeakerParticipantIds.reduce<
+      NonNullable<LiveRoomContextValue['roomState']>['participants']
+    >(
+      (acc, participantId) => ({
+        ...acc,
+        [participantId]: createParticipant(participantId),
+      }),
+      {
+        host: createParticipant('host', 'host'),
+      },
+    );
+
+    mockUseLiveRoomConnection.mockReturnValue(
+      createContextValue({
+        roomState: {
+          ...createContextValue().roomState!,
+          participants,
+          stage: {
+            speakerQueueParticipantIds: [],
+            activeSpeakerParticipantIds,
+            raisedHandParticipantIds: [],
+          },
+        },
+      }),
+    );
+
+    renderLiveRoom();
+
+    expect(screen.getByText('Page 1 / 4')).toBeInTheDocument();
+    expect(screen.getAllByTestId('live-room-tile')).toHaveLength(4);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+
+    expect(screen.getByText('Page 2 / 4')).toBeInTheDocument();
+    expect(screen.getAllByTestId('live-room-tile')).toHaveLength(4);
+  });
+
   it('logs a room query error only once for the same failure', () => {
     let contextValue = createContextValue({ selectedMicId: 'mic-1' });