Chapter audio only hides bottom bar if scripture text is shown

This fixes an issue where "hide text" projects couldn't navigate questions on mobile, since the bottom bar is now being hidden.

So now, we don't hide the bottom bar if "hide text" is enabled. We will instead only hide the bar if the "hide text" is disabled and the chapter audio is shown. Effectively, this is when "the user opens the chapter audio."

The second case where we hide the bar remains. I did a slight refactoring to make all this clear and readable.

The original reason for the hiding behavior is still intact, that being to free up space on mobile and keep users focused on their intended task.

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html

@@ -199,7 +199,7 @@ <h2 matSubheader>{{ t("filter_questions") }}</h2>
         </div>
       </div>
       @if (projectDoc && totalVisibleQuestions() > 0) {
-        <div id="question-nav" [ngClass]="{ hide: (textHasFocus && isScreenSmall) || showScriptureAudioPlayer }">
+        <div id="question-nav" [ngClass]="{ hide: textboxIsShownMobile || userOpenedChapterAudio }">
           @if (!isQuestionListPermanent) {
             <button mat-button type="button" (click)="setQuestionsOverlayVisibility(true)">
               {{ t("view_questions") }}

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts

@@ -252,6 +252,20 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
     return this.projectDoc?.data?.checkingConfig.hideCommunityCheckingText ?? false;
   }
 
+  get userOpenedChapterAudio(): boolean {
+    return this.showScriptureAudioPlayer && !this.hideChapterText;
+  }
+
+  get textboxIsShown(): boolean {
+    const isAnswering = this.answersPanel?.answerInput != null;
+    const isCommenting = this.answersPanel?.allComments?.find(c => c.inputComponent != null) != null;
+    return isAnswering || isCommenting;
+  }
+
+  get textboxIsShownMobile(): boolean {
+    return this.textboxIsShown && this.isScreenSmall;
+  }
+
   get isRightToLeft(): boolean {
     if (this.projectDoc?.data?.isRightToLeft != null) {
       return this.projectDoc.data.isRightToLeft;
@@ -1082,12 +1096,6 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
     }
   }
 
-  get textHasFocus(): boolean {
-    const isAnswering = this.answersPanel?.answerInput != null;
-    const isCommenting = this.answersPanel?.allComments?.find(c => c.inputComponent != null) != null;
-    return isAnswering || isCommenting;
-  }
-
   /**
    * Retrieves the adjacent question based on the active question and the direction.
    * Adjacent question might be outside the current filtered scope.