- Added device syncing (uses PeerJS and Google STUN server)

- Also removed some dead code and updated a few other things

Author: jd-code76

README.md

@@ -16,13 +16,14 @@ This project was developed with assistance from AI tools including [Gab AI](http
 - **Verse Highlighting**: Right-click verses to highlight in one of six colors for study emphasis
 - **Reference Bible**: Use the reference Bible to select from multiple translation options to compare with (ASV, BSB, CSB, ESV, GNV, KJV, LSB, NASB 1995, NASB 2020, NET, NIV, NKJV, NLT); this also sets the translation for Bible Gateway searches and the Verse Analysis popup
 - **Search Integration**: Built-in [Bible Gateway search](https://www.biblegateway.com/usage/) functionality to search for any word or passage
+- **Theming**: Dark/light mode with six color themes
 
 ### Advanced Features
 - **Highlights Management**: Search and filter highlighted verses by color/content
 - **Keyboard Navigation**: Extensive keyboard shortcuts (F1 to toggle help)
 - **Data Portability**: Import/export highlights, notes, and settings
+- **Local Device Syncing**: Pair devices on your local network to sync your highlights, notes, and settings using a simple, 8-digit code
 - **Responsive Design**: Optimized for both desktop and mobile devices (mobile has limited features)
-- **Theming**: Dark/light mode with six color themes
 
 ## Markdown Keyboard Shortcuts
 ### Basic Formatting (Ctrl/Cmd + Key)
@@ -63,12 +64,13 @@ This project was developed with assistance from AI tools including [Gab AI](http
 | `Alt + E` | Export Data |
 | `Alt + I` | Import Data |
 | `Alt + M` | Export Notes |
+| `Alt + D` | Manual Sync (if devices paired) |
 | `F1` | Show Help Modal |
 
 *Note: Hotkeys can be customized in the settings menu*
 
 ### Study Resources Integration
-The sidebar provides organized access to extensive theological resources (Reformed Theology/Calvinism focused) including:
+The sidebar provides organized access to extensive theological resources (Reformed Theology/Calvinism) including:
 - Online Bible platforms
 - Christian doctrine references
 - Theological resources
@@ -80,8 +82,10 @@ The sidebar provides organized access to extensive theological resources (Reform
 
 - **Frontend**: Pure HTML5, CSS3, and Vanilla JavaScript (ES6+)
 - **Libraries**: 
-  - Marked.js for Markdown processing
   - Font Awesome for icons
+  - Marked.js for Markdown processing
+  - PeerJS for discovery (local device syncing)
+  - Google for STUN servers (local device syncing)
 - **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
@@ -109,15 +113,19 @@ The sidebar provides organized access to extensive theological resources (Reform
 
 ## Privacy & Data
 
-Highlights, notes, and settings are stored locally in your browser. 
+No cloud storage: Highlights, notes, and settings are stored locally in your browser and never pass through servers (only signaling for discovery). Device sync is optional.
 
 Data that is transmitted to external servers:
 - Bible passage requests are handled by bible.helloao.org
 - Bible Hub (interlinear) and STEP Bible (both when using Verse Analysis popup)
 - Bible Gateway searches
 - Reference Bible websites while the panel is opened
 - Resource links opened in external sites via the sidebar
-- Third-party library usage for Font Awesome and Marked.js
+- Third-party libraries:
+  - Font Awesome
+  - Marked.js
+  - PeerJS
+  - Google STUN servers
 
 ## Attribution
 
@@ -126,6 +134,8 @@ Data that is transmitted to external servers:
 - 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/)
+- Local device syncing by [PeerJS](https://unpkg.com)
+- STUN servers by [Google]("stun.l.google.com" and "stun1.l.google.com")
 - **Reference Bible websites**
   - [Bible Gateway](https://www.biblegateway.com)
   - [Bible.com (YouVersion)](https://www.bible.com)

dev_tools/Minify-JS.ps1

@@ -11,6 +11,7 @@ $files = @(
     "../src/modules/settings.js",
     "../src/modules/state.js",
     "../src/modules/strongs.js",
+    "../src/modules/sync.js",
     "../src/modules/ui.js",
     "../src/sw.js"
 )

dev_tools/minify-js.py

@@ -80,6 +80,7 @@ def main():
         "../src/modules/settings.js",
         "../src/modules/state.js",
         "../src/modules/strongs.js",
+        "../src/modules/sync.js",
         "../src/modules/ui.js"
     ]
 

index.html

@@ -2,9 +2,10 @@ import { isKJV, playChapterAudio, pauseChapterAudio, resumeChapterAudio, stopCha
 import { applyHighlight, clearHighlights, closeHighlightsModal, renderHighlights, showColorPicker, showHighlightsModal } from './modules/highlights.js';
 import { showHelpModal } from './modules/hotkeys.js';
 import { initBookChapterControls, loadSelectedChapter, navigateFromURL, nextPassage, prevPassage, randomPassage, setupNavigationWithURL, setupPopStateListener } from './modules/navigation.js'
-import { clearCache, closeSettings, deleteAllData, exportData, importData, initializeAudioControls, initialiseNarratorSelect, openSettings, saveSettings } from './modules/settings.js'
+import { clearCache, closeSettings, deleteAllData, exportData, importData, initializeAudioControls, initialiseNarratorSelect, openSettings, saveSettings, updateAudioControlsVisibility } from './modules/settings.js'
 import { APP_VERSION, BOOK_ORDER, updateBibleGatewayVersion, loadFromCookies, loadFromStorage, saveToStorage, state } from './modules/state.js'
 import { closeStrongsPopup, showStrongsReference } from './modules/strongs.js'
+import { initSync, syncManager } from './modules/sync.js';
 import { exportNotes, initResizeHandles, insertMarkdown, restoreBookChapterUI, restorePanelStates, restoreSidebarState, switchNotesView, togglePanelCollapse, toggleReferencePanel, toggleSection, 
     updateMarkdownPreview, updateReferencePanel, updateNotesFontSize, updateScriptureFontSize } from './modules/ui.js'
 const OFFLINE_STYLES = `
@@ -30,10 +31,11 @@ let touchStartTime = 0;
 let longPressTimer = null;
 let touchStartY = 0;
 let isScrolling = false;
+let syncResumedToastShown = false;
 if (typeof marked !== 'undefined') {
     marked.setOptions({ 
-        breaks: true,       
-        gfm: true          
+        breaks: true,
+        gfm: true
     });
 }
 class AppError extends Error {
@@ -46,6 +48,11 @@ class AppError extends Error {
 }
 export function handleError(error, context, userFriendlyMessage) {
     console.error(`Error in ${context}:`, error);
+    if (error.type === 'unavailable-id') {
+        console.warn('[Sync] Peer ID unavailable – regenerating');
+        const syncEvent = new CustomEvent('sync:regenerateId');
+        document.dispatchEvent(syncEvent);
+    }
     const rawMsg = userFriendlyMessage ?? 
         (error instanceof AppError ? error.message : 'An unexpected error occurred');
     const escapedMsg = escapeHTML(rawMsg);
@@ -117,8 +124,9 @@ function updateOfflineStatus(isOffline) {
         `;
         document.body.appendChild(indicator);
     }
-    indicator.textContent = isOffline ? 'Offline Mode' : 'Online';
+    indicator.textContent = isOffline ? 'Offline Mode (Sync Paused)' : 'Online';
     indicator.style.background = isOffline ? '#ff6b6b' : '#51cf66';
+    document.dispatchEvent(new CustomEvent('offlineStatus', { detail: { isOffline } }));
     setTimeout(() => {
         indicator.style.opacity = '0';
         setTimeout(() => indicator.remove(), 300);
@@ -234,6 +242,7 @@ function setupEventListeners() {
     setupModalControls();
     setupMarkdownShortcuts();
     setupTouchEvents();
+    setupSyncManagement();
 }
 function setupHeaderButtons() {
     const buttons = {
@@ -264,15 +273,9 @@ function setupAudioControls() {
         const playBtn = document.querySelector('.play-audio-btn');
         const pauseBtn = document.querySelector('.pause-audio-btn');
         const stopBtn = document.querySelector('.stop-audio-btn');
-        if (playBtn) {
-            playBtn.addEventListener('click', handleAudioPlayback);
-        }
-        if (pauseBtn) {
-            pauseBtn.addEventListener('click', pauseChapterAudio);
-        }
-        if (stopBtn) {
-            stopBtn.addEventListener('click', stopChapterAudio);
-        }
+        if (playBtn) playBtn.addEventListener('click', handleAudioPlayback);
+        if (pauseBtn) pauseBtn.addEventListener('click', pauseChapterAudio);
+        if (stopBtn) stopBtn.addEventListener('click', stopChapterAudio);
     });
 }
 function handleAudioPlayback() {
@@ -455,10 +458,91 @@ function setupTouchEvents() {
     document.addEventListener('touchend', handleTouchEnd);
     document.addEventListener('touchcancel', handleTouchCancel);
 }
+function setupSyncManagement() {
+    initSync();
+    if (state.settings.connectedDevices?.length > 0) {
+        syncManager.initPeer().catch(err => {
+            console.error('[App] Failed to init peer on load:', err);
+        });
+    }
+    document.addEventListener('sync:peerConnected', (ev) => {
+        console.log('[App] Peer connected:', ev.detail.peerId);
+        if (!syncResumedToastShown) {
+            const notification = document.createElement('div');
+            notification.textContent = 'Device connected!';
+            notification.style.cssText = `
+                position: fixed;
+                top: 70px;
+                right: 10px;
+                padding: 12px 20px;
+                background: #4caf50;
+                color: white;
+                border-radius: 5px;
+                z-index: 10000;
+                font-size: 14px;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+            `;
+            document.body.appendChild(notification);
+            setTimeout(() => notification.remove(), 3000);
+            syncResumedToastShown = true;
+        } else {
+            syncResumedToastShown = false;
+        }
+    });
+    document.addEventListener('sync:merged', (ev) => {
+        if (!ev.detail.changesMade) return;
+        console.log('[App] Applying real-time sync changes from', ev.detail.peerId);
+        const currentBook = state.settings.manualBook;
+        const currentChapter = state.settings.manualChapter;
+        document.querySelectorAll('.verse').forEach(verseEl => {
+            const ref = verseEl.dataset.verse;
+            if (!ref) return;
+            const versePattern = new RegExp(`^${currentBook.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')} ${currentChapter}:`);
+            if (!versePattern.test(ref)) return; 
+            const newColor = state.highlights[ref];
+            const currentClasses = Array.from(verseEl.classList);
+            const currentHighlight = currentClasses.find(c => c.startsWith('highlight-'));
+            if (newColor && currentHighlight !== `highlight-${newColor}`) {
+                currentClasses.filter(c => c.startsWith('highlight-'))
+                            .forEach(c => verseEl.classList.remove(c));
+                verseEl.classList.add(`highlight-${newColor}`);
+                console.log(`[App] Updated highlight for ${ref} to ${newColor}`);
+            } else if (!newColor && currentHighlight) {
+                verseEl.classList.remove(currentHighlight);
+                console.log(`[App] Removed highlight for ${ref}`);
+            }
+        });
+        const notesInput = document.getElementById('notesInput');
+        if (notesInput && document.activeElement !== notesInput) {
+            notesInput.value = state.notes;
+            if (state.settings.notesView === 'markdown') {
+                updateMarkdownPreview();
+            }
+            console.log('[App] Updated notes from sync');
+        }
+        applyTheme();
+        applyColorTheme();
+        updateBibleGatewayVersion();
+        initialiseNarratorSelect();
+        updateAudioControlsVisibility();
+        console.log('[App] UI updated from sync');
+    });
+    document.addEventListener('sync:error', (ev) => {
+        console.error('[App] Sync error:', ev.detail.error);
+        alert('Sync error: ' + ev.detail.error);
+    });
+    document.addEventListener('offlineStatus', (ev) => {
+        if (ev.detail.isOffline) {
+            console.log('[App] Pausing sync due to offline');
+            document.dispatchEvent(new CustomEvent('sync:pauseReconnect'));
+        }
+    });
+}
 async function init() {
     try {
+        showLoading(true);
         await loadFromStorage();
-        loadFromCookies();
+        await loadFromCookies();
         const style = document.createElement('style');
         style.textContent = OFFLINE_STYLES;
         document.head.appendChild(style);
@@ -494,10 +578,8 @@ async function init() {
         setupEventListeners();
         if ('serviceWorker' in navigator) {
             navigator.serviceWorker.register('/sw.js')
+                .then(reg => navigator.serviceWorker.ready)
                 .then(reg => {
-                    return navigator.serviceWorker.ready;
-                })
-            .then(reg => {
                     reg.active.postMessage({ type: 'VERSION', version: APP_VERSION });
                     console.log('Sent version to SW:', APP_VERSION);
                 })
@@ -506,6 +588,8 @@ async function init() {
         console.log('App initialized successfully');
     } catch (error) {
         handleError(error, 'app initialization');
+    } finally {
+        showLoading(false);
     }
 }
 if (document.readyState === 'loading') {

main.js

@@ -1,6 +1,6 @@
-import { clearError, handleError, showError, showLoading } from '../main.js';
+import { handleError, showError } from '../main.js';
 import { nextPassage } from './navigation.js';
-import { afterContentLoad, displayPassage, extractVerseText } from './passage.js';
+import { extractVerseText } from './passage.js';
 import { bookNameMapping, state, saveToStorage } from './state.js';
 const API_BASE_URL = 'https://bible.helloao.org/api';
 const AUDIO_TIMEOUT_MS = 10000; 
@@ -329,39 +329,6 @@ export function cleanupAudioPlayer() {
     }
     state.audioPlayer = null;
 }
-export async function loadPassageFromAPI(passageInfo) {
-    try {
-        showLoading(true);
-        const { book, chapter, startVerse, endVerse, displayRef, translation } = passageInfo;
-        state.currentPassageReference = displayRef;
-        const apiTranslation = translation ? apiTranslationCode(translation) : apiTranslationCode(state.settings.bibleTranslation);
-        const apiBook = getApiBookCode(book);
-        const chapterData = await fetchChapter(apiTranslation, apiBook, chapter);
-        state.currentChapterData = chapterData;
-        const chapterFootnotes = chapterData.chapter.footnotes || [];
-        const footnoteCounter = { value: 1 };
-        const contentItems = processChapterContent(
-            chapterData.chapter.content, 
-            book, 
-            chapter, 
-            startVerse, 
-            endVerse, 
-            chapterFootnotes, 
-            footnoteCounter
-        );
-        if (contentItems.length === 0) {
-            throw new Error('No content found in the requested range');
-        }
-        displayPassage(contentItems);
-        afterContentLoad();
-        clearError();
-        updateAudioControls(chapterData.thisChapterAudioLinks);
-    } catch (error) {
-        handleError(error, 'loadPassageFromAPI');
-    } finally {
-        showLoading(false);
-    }
-}
 function processChapterContent(content, book, chapter, startVerse, endVerse, footnotes, footnoteCounter) {
     return content
         .filter(item => {

modules/api.js

@@ -42,8 +42,17 @@ export function applyHighlight(color) {
         if (color !== 'none') {
             state.currentVerse.classList.add(`highlight-${color}`);
             state.highlights[verseRef] = color;
+            if (!state._syncMeta.highlights[verseRef]) {
+                state._syncMeta.highlights[verseRef] = {};
+            }
+            state._syncMeta.highlights[verseRef].ts = Date.now();
         } else {
             delete state.highlights[verseRef];
+            if (!state._syncMeta.highlights[verseRef]) {
+                state._syncMeta.highlights[verseRef] = {};
+            }
+            state._syncMeta.highlights[verseRef].deleted = true;
+            state._syncMeta.highlights[verseRef].ts = Date.now();
         }
         saveToStorage();
         const picker = document.getElementById('colorPicker');
@@ -57,6 +66,14 @@ export function clearHighlights() {
         if (!confirm('Are you sure you want to delete ALL highlights? This cannot be undone.')) {
             return;
         }
+        const now = Date.now();
+        Object.keys(state.highlights).forEach(ref => {
+            if (!state._syncMeta.highlights) state._syncMeta.highlights = {};
+            state._syncMeta.highlights[ref] = {
+                deleted: true,
+                ts: now
+            };
+        });
         state.highlights = {};
         document.querySelectorAll('.verse').forEach(verse => {
             verse.classList.remove(...HIGHLIGHT_COLORS.map(col => `highlight-${col}`));
@@ -66,6 +83,7 @@ export function clearHighlights() {
         if (modal?.classList.contains('active')) {
             renderHighlights('all', '');
         }
+        console.log('[Highlights] Cleared all highlights with sync tombstones');
     } catch (error) {
         console.error('Error clearing highlights:', error);
     }