feat(ui): improve Bible reader interface and fix mobile bugs

- Enhanced unloaded highlights with clearer "Text not available, click to refresh" message
- Moved book/chapter reference up and removed date display
- Removed redundant "Currently selected translation" attribution for cleaner footer
- Fixed Unicode toggle bug on mobile by replacing with Font Awesome icons
- Updated README with explanations for "Provinent" term and added attribution links
- Modified audio player to only show stop button when audio is active
- Updated Bible Gateway search header styling

Author: jd-code76

README.md

@@ -2,6 +2,7 @@
 
 A comprehensive, feature-rich Bible study web application designed for serious scripture engagement with modern tools. 
 The entirety of this project was written using AI tools like [Gab AI](https://gab.ai) and [Lumo](https://lumo.proton.me).
+The meaning of "Provinent" is a portmanteau of "providence" and "covenant", each referring to God's divine sovereignty.
 
 Access the site here: [https://provinent.org](https://provinent.org)
 
@@ -12,7 +13,7 @@ Access the site here: [https://provinent.org](https://provinent.org)
 - **Study Notes**: Full Markdown support with live preview and export capabilities
 - **Verse Analysis**: Left-click any verse for analyis of a single verse with a side-by-side view of Strong's concordance (provided by [STEP Bible](https://www.stepbible.org)) and a Hebrew or Greek interlinear Bible (provided by [Bible Hub](https://biblehub.com/interlinear/))
 - **Verse Highlighting**: Right-click verses to highlight in one of six different colors for study emphasis
-- **Reference Bible**: Use the reference Bible to select from multiple translation options to compare with (NASB 1995, NASB 2020, ASV, KJV, ESV, GNV, BSB, NET, CSB, NIV, NKJV, and NLT)
+- **Reference Bible**: Use the reference Bible to select from multiple translation options to compare with (NASB 1995, NASB 2020, ASV, KJV, ESV, GNV, BSB, NET, CSB, NIV, NKJV, and NLT); this also sets the translation for Bible Gateway searches and the Verse Analysis popup
 
 ### Advanced Features
 - **Search Integration**: Built-in [Bible Gateway search](https://www.biblegateway.com/usage/) functionality
@@ -35,7 +36,7 @@ The sidebar provides organized access to extensive theological resources (Reform
 - **Libraries**: 
   - Marked.js for Markdown processing
   - Font Awesome for icons
-- **API**: Bible.helloao.org for scripture text
+- **API**: Bible.helloao.org for scripture text, footnotes, and BSB audio
 - **Storage**: LocalStorage for user data persistence
 - **Build**: Use the provided scripts for setup and consistency
 
@@ -78,7 +79,8 @@ Highlights, notes, and settings are stored locally in your browser. Data transmi
 
 - Scripture text provided by [bible.helloao.org](https://bible.helloao.org) API
 - Berean Standard Bible translation by [Berean Bible](https://berean.bible)
-- Icons by Font Awesome
+- Audio files hosted by [Open Bible](https://openbible.com/audio/)
+- Icons by [Font Awesome](https://fontawesome.com)
 - Markdown processing by [Marked.js](https://cdn.jsdelivr.net/npm/marked/)
 
 ## License

index.html

@@ -82,16 +82,6 @@ if (typeof marked !== 'undefined') {
         gfm: true          
     });
 }
-function updateDateTime() {
-    const now = new Date();
-    document.getElementById('currentDate').textContent =
-        now.toLocaleDateString('en-US', {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-        });
-}
 class AppError extends Error {
     constructor(message, type, originalError) {
         super(message);
@@ -530,7 +520,7 @@ function renderHighlights(filterColor = 'all') {
         if (filterColor !== 'all' && ref.color !== filterColor) {
             return;
         }
-        const verseText = getVerseTextFromStorage(ref.reference) || 'Verse text not available';
+        const verseText = getVerseTextFromStorage(ref.reference) || 'Text not available, click to refresh';
         html += `
             <div class="highlight-item ${ref.color}" data-reference="${ref.reference}" data-color="${ref.color}">
                 <div class="highlight-ref">${ref.reference}</div>
@@ -621,12 +611,10 @@ async function init() {
     restoreSidebarState();
     restorePanelStates();
     updateHeaderTitle();
-    updateDateTime();
     initResizeHandles();
     switchNotesView(state.settings.notesView || 'text');
     updateBibleGatewayVersion();
     setupEventListeners();
-    setInterval(updateDateTime, 1_000);
     console.log('App initialized successfully');
 }
 if (document.readyState === 'loading') {

main.js

@@ -223,8 +223,14 @@ function updateAudioPlayerUI(isPlaying, narrator = null) {
     if (!audioControls) return;
     const playBtn = audioControls.querySelector('.play-audio-btn');
     const pauseBtn = audioControls.querySelector('.pause-audio-btn');
+    const stopBtn = audioControls.querySelector('.stop-audio-btn');
     if (playBtn) playBtn.style.display = isPlaying ? 'none' : 'inline-block';
     if (pauseBtn) pauseBtn.style.display = isPlaying ? 'inline-block' : 'none';
+    if (stopBtn) {
+        const hasAudioStarted = state.audioPlayer && 
+                              (state.audioPlayer.isPlaying || state.audioPlayer.isPaused);
+        stopBtn.style.display = hasAudioStarted ? 'inline-block' : 'none';
+    }
     if (narrator && !isKJV(state.settings.bibleTranslation)) {
         const narratorSelect = audioControls.querySelector('.narrator-select');
         if (narratorSelect) {
@@ -327,10 +333,6 @@ export async function loadPassageFromAPI(passageInfo) {
         displayPassage(contentItems);
         afterContentLoad();
         clearError();
-        if (chapterData.translation && chapterData.translation.name) {
-            document.getElementById('bibleName').textContent =
-                chapterData.translation.name;
-        }
         updateAudioControls(chapterData.thisChapterAudioLinks);
     } catch (err) {
         handleError(err, 'loadPassageFromAPI');

modules/api.js

@@ -1,5 +1,5 @@
 import { handleError } from '../main.js'
-export const APP_VERSION = '1.3.2025.11.11';
+export const APP_VERSION = '1.3.01.2025.11.12';
 let saveTimeout = null;
 const SAVE_DEBOUNCE_MS = 500;
 export const BOOK_ORDER = [

modules/state.js

@@ -73,28 +73,30 @@ body {
 }
 
 .collapse-toggle::before {
-    content: '\2B9C'; /*   (left circle chevron) */
+    content: '\f100'; /* Font Awesome: fa-angle-double-left */
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
     transition: transform 0.3s ease;
 }
 
 .panel-collapsed .collapse-toggle::before {
-    content: '\2B9E'; /*  ⮞ (right circle chevron) */
+    content: '\f101'; /* Font Awesome: fa-angle-double-right */
 }
 
 #scriptureSection .collapse-toggle::before {
-    content: '\2B9E'; /*  ⮞ (right circle chevron) */
+    content: '\f101'; /* Font Awesome: fa-angle-double-right */
 }
 
 #scriptureSection.panel-collapsed .collapse-toggle::before {
-    content: '\2B9C'; /*  ⮜ (left circle chevron) */
+    content: '\f100'; /* Font Awesome: fa-angle-double-left */
 }
 
 #notesSection .collapse-toggle::before {
-    content: '\2B9E'; /*  (right circle chevron) */
+    content: '\f101'; /* Font Awesome: fa-angle-double-right */
 }
 
 #notesSection.panel-collapsed .collapse-toggle::before {
-    content: '\2B9C'; /*  ⮜ (left circle chevron) */
+    content: '\f100'; /* Font Awesome: fa-angle-double-left */
 }
 
 .scripture-section {

src/css/layout.css

@@ -32,7 +32,7 @@
 .passage-header {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
     color: white;
-    padding: 20px;
+    padding: 10px;
     border-radius: 8px;
     margin-bottom: 20px;
 }
@@ -44,16 +44,9 @@
     border: none;
 }
 
-.passage-header .date {
-    opacity: 0.9;
-    font-size: 0.9em;
-}
-
 .passage-reference {
     font-weight: bold;
     font-size: 1.2em;
-    margin-bottom: 15px;
-    color: var(--accent-color);
 }
 
 /* Verse Display & Styling */

src/css/scripture.css

@@ -84,7 +84,7 @@ <h2>Bible Study Resources</h2>
             <input type="hidden" name="version" id="bgVersion" value="NASB1995" />
             <div class="bible-gateway-container">
                 <div class="bible-gateway-header">
-                    Lookup a word or passage in the Bible
+                    Search the Bible
                 </div>
                 <div class="bible-gateway-content">
                     <div class="bible-gateway-inputs">
@@ -405,19 +405,18 @@ <h1>Provinent Scripture Study</h1>
                 <section class="scripture-section" id="scriptureSection">
                     <div id="errorContainer" role="alert"></div>
                     <div class="passage-header">
-                        <h2 id="passageHeaderTitle">Passage of the Day</h2>
-                        <div class="date" id="currentDate"></div>
+                        <h2 id="passageHeaderTitle"></h2>
+                        <div class="passage-reference" id="passageReference"></div>
                     </div>
 
-                    <div class="passage-reference" id="passageReference"></div>
                     <div id="scriptureContent"></div>
 
                     <div class="api-attribution">
                         <p><strong>Attribution</strong></p>
                         <p>Scripture quotations are provided by API from <a href="https://bible.helloao.org" target="_blank" rel="noopener noreferrer">bible.helloao.org</a>,
                             without which this app would not have been possible.
                             And a thank you to <a href="https://berean.bible" target="_blank" rel="noopener noreferrer">Berean Bible</a> for their excellent translation work.
-                           All copyrights reserved by their respective owners. Currently selected translation: <span id="bibleName">Berean Standard Bible</span>&copy</p>
+                           All copyrights reserved by their respective owners. 
                         <p style="margin-top: 10px;">
 
                         </p>

src/index.html

@@ -123,23 +123,6 @@ if (typeof marked !== 'undefined') {
     });
 }
 
-/* ====================================================================
-   DATE / TIME
-   Current date display (updates every second)
-==================================================================== */
-
-/* Update current date display */
-function updateDateTime() {
-    const now = new Date();
-    document.getElementById('currentDate').textContent =
-        now.toLocaleDateString('en-US', {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-        });
-}
-
 /* ====================================================================
    ERROR HANDLING
 ==================================================================== */
@@ -733,7 +716,7 @@ function renderHighlights(filterColor = 'all') {
             return;
         }
 
-        const verseText = getVerseTextFromStorage(ref.reference) || 'Verse text not available';
+        const verseText = getVerseTextFromStorage(ref.reference) || 'Text not available, click to refresh';
         html += `
             <div class="highlight-item ${ref.color}" data-reference="${ref.reference}" data-color="${ref.color}">
                 <div class="highlight-ref">${ref.reference}</div>
@@ -873,12 +856,10 @@ async function init() {
     restoreSidebarState();
     restorePanelStates();
     updateHeaderTitle();
-    updateDateTime();
     initResizeHandles();
     switchNotesView(state.settings.notesView || 'text');
     updateBibleGatewayVersion();
     setupEventListeners();
-    setInterval(updateDateTime, 1_000);
 
     console.log('App initialized successfully');
 }

src/main.js

@@ -302,10 +302,19 @@ function updateAudioPlayerUI(isPlaying, narrator = null) {
 
     const playBtn = audioControls.querySelector('.play-audio-btn');
     const pauseBtn = audioControls.querySelector('.pause-audio-btn');
+    const stopBtn = audioControls.querySelector('.stop-audio-btn');
 
+    // Show play/pause buttons based on playing state
     if (playBtn) playBtn.style.display = isPlaying ? 'none' : 'inline-block';
     if (pauseBtn) pauseBtn.style.display = isPlaying ? 'inline-block' : 'none';
 
+    // Show stop button only if audio has been started (playing OR paused)
+    if (stopBtn) {
+        const hasAudioStarted = state.audioPlayer && 
+                              (state.audioPlayer.isPlaying || state.audioPlayer.isPaused);
+        stopBtn.style.display = hasAudioStarted ? 'inline-block' : 'none';
+    }
+    
     // Only update narrator select for BSB
     if (narrator && !isKJV(state.settings.bibleTranslation)) {
         const narratorSelect = audioControls.querySelector('.narrator-select');
@@ -441,11 +450,6 @@ export async function loadPassageFromAPI(passageInfo) {
         afterContentLoad();
         clearError();
 
-        if (chapterData.translation && chapterData.translation.name) {
-            document.getElementById('bibleName').textContent =
-                chapterData.translation.name;
-        }
-
         updateAudioControls(chapterData.thisChapterAudioLinks);
 
     } catch (err) {