Update UI and improve archive handling: add reading mode message, adjust button label, and enhance styles for better layout

frontend/app.js

@@ -518,6 +518,7 @@ function renderArchive(notes) {
   elements['archive-list'].replaceChildren();
   elements['archive-empty'].hidden = notes.length > 0;
   if (!navigator.onLine) elements['archive-empty'].textContent = 'Reconnect to view saved notes.';
+  else if (elements['main'].classList.contains('reading')) elements['archive-empty'].textContent = 'No stored transcriptions yet.';
   else elements['archive-empty'].textContent = 'No saved notes yet.';
   if (notes.some((note) => note.status === 'transcribing')) {
     if (!transcriptionPoll) {

frontend/index.html

@@ -45,7 +45,7 @@
       </form>
     </dialog>
 
-    <main>
+    <main id="main">
       <section class="capture" aria-labelledby="capture-title">
         <div class="capture-modes" role="tablist" aria-label="Note type">
           <button id="voice-mode" class="capture-mode active" type="button" role="tab" aria-selected="true" aria-controls="voice-panel">Voice</button>
@@ -78,7 +78,7 @@
           <textarea id="written-note" class="written-note" placeholder="What’s on your mind?" rows="7"></textarea>
           <div class="write-actions">
             <span id="draft-status" class="draft-status" role="status">Draft stays on this device until you save it.</span>
-            <button id="save-written-note" class="save-written-note" type="button" disabled>Save note</button>
+            <button id="save-written-note" class="save-written-note" type="button" disabled>Upload note</button>
           </div>
         </div>
       </section>

frontend/styles.css

@@ -33,6 +33,7 @@ main { max-width: 1040px; margin: auto; padding: 0 24px; }
 .reading #archive-section { min-height: calc(100vh - 190px); padding-top: 24px; border-top: 1px solid var(--line); }
 .reading .archive-list { margin-top: 24px; }
 .reading .archive-item { padding: 22px 0; }
+.reading #archive-empty { text-align: center; }
 .reading .archive-transcript { min-height: 180px; resize: vertical; border: 1px solid var(--line); padding: 14px; background: #fffefa; }
 .original-transcript { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
 .original-transcript summary { width: fit-content; font: 10px var(--mono); cursor: pointer; }

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'faerro-kb-shell-v4';
+const CACHE_NAME = 'faerro-kb-shell-v5';
 const APP_SHELL = ['/', '/styles.css', '/app.js', '/manifest.webmanifest', '/favicon.svg'];
 
 self.addEventListener('install', (event) => {