TT-6814-17, TT-6428 Add Phrase Back Translation mobile layout

- Introduced Cypress component testing takeaways to guide best practices in testing setups and assertions.
- Added Jest testing takeaways for unit tests, emphasizing mocking strategies and edge case coverage.
- Refactored MediaRecord, WSAudioPlayer, and related components to improve props handling and mobile responsiveness.
- Updated UserMenu and PlanTabs components to utilize new mobile utility functions for better layout management.
- feedback fixes

Author: Greg Trihus

src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileContext.cy.tsx

@@ -176,20 +176,22 @@ describe('PassageDetailMobileContext', () => {
   });
 
   it('falls back to book code when book data is missing', () => {
+    const baseAttributes = createPassageDetailState().passage.attributes;
     mountContext({
       bookDataOverrides: [],
       passageOverrides: {
-        attributes: { book: 'EXO', reference: '2:3' },
+        attributes: { ...baseAttributes, book: 'EXO', reference: '2:3' },
       },
     });
 
     cy.contains('EXO 2:3').should('be.visible');
   });
 
   it('renders empty reference when passage reference is missing', () => {
+    const baseAttributes = createPassageDetailState().passage.attributes;
     mountContext({
       passageOverrides: {
-        attributes: { book: '', reference: '' },
+        attributes: { ...baseAttributes, book: '', reference: '' },
       },
     });
 

src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileLayout.cy.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import PassageDetailMobileLayout from './PassageDetailMobileLayout';
+
+const mountLayout = ({
+  withFooterAbove = false,
+  contentSx,
+}: {
+  withFooterAbove?: boolean;
+  contentSx?: Record<string, unknown>;
+} = {}) => {
+  const theme = createTheme();
+  cy.mount(
+    <ThemeProvider theme={theme}>
+      <PassageDetailMobileLayout
+        header={<div data-cy="layout-header">Header</div>}
+        footer={<div data-cy="layout-footer">Footer</div>}
+        footerAbove={
+          withFooterAbove ? (
+            <div data-cy="layout-footer-above">Footer Above</div>
+          ) : undefined
+        }
+        contentSx={contentSx}
+      >
+        <div>Content body</div>
+      </PassageDetailMobileLayout>
+    </ThemeProvider>
+  );
+};
+
+describe('PassageDetailMobileLayout', () => {
+  it('renders header, content, and footer', () => {
+    mountLayout();
+
+    cy.get('[data-cy="layout-header"]').should('contain.text', 'Header');
+    cy.contains('Content body').should('be.visible');
+    cy.get('[data-cy="layout-footer"]').should('contain.text', 'Footer');
+  });
+
+  it('renders footerAbove when provided', () => {
+    mountLayout({ withFooterAbove: true });
+
+    cy.get('[data-cy="layout-footer-above"]')
+      .should('be.visible')
+      .and('contain.text', 'Footer Above');
+  });
+
+  it('applies contentSx overrides', () => {
+    mountLayout({ contentSx: { pt: 4 } });
+
+    cy.contains('Content body')
+      .parent()
+      .should('have.css', 'padding-top', '32px');
+  });
+});

src/renderer/src/components/WSAudioPlayer.tsx

@@ -1571,7 +1571,7 @@ function WSAudioPlayer(props: IProps) {
                               />
                             </MenuItem>
                           )}
-                          {allowRecord && (
+                          {allowRecord === true && (
                             <>
                               {noiseRemovalControl() && (
                                 <MenuItem onClick={handleMoreMenuClose}>

src/renderer/src/crud/prevPasId.ts

@@ -15,7 +15,10 @@ export const prevPasId = (
   if (Array.isArray(passRecIds)) {
     const passages: PassageD[] = passRecIds
       .map((p) => findRecord(memory, 'passage', p.id) as PassageD)
-      .sort((a, b) => a.attributes.sequencenum - b.attributes.sequencenum);
+      .sort(
+        (a, b) =>
+          (a?.attributes?.sequencenum ?? 0) - (b?.attributes?.sequencenum ?? 0)
+      );
     let curIndex = passages.findIndex((p) => p.id === curPass);
     if (curIndex !== -1) {
       for (curIndex -= 1; curIndex >= 0; curIndex--) {