feat(ui): three-level header visibility toggle + read-only pill to bottom-right

Author: ijbo

README.md

@@ -459,6 +459,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-03-17** | | 🎨 **Three-Level Header & Read-Only Pill** — new three-level header visibility toggle (Full → Compact QAB → fully Hidden with floating "TextAgent" restore pill at top-center, 35% opacity, hover to reveal); header level persists via `localStorage`; "Read-only" shared-view pill repositioned from top-right to bottom-right corner with upward slide-in animation |
 | **2026-03-17** | | 🎨 **Shared Banner Auto-Dismiss UX** — green "Viewing shared markdown (read-only)" banner now auto-hides after 4s with smooth slide-up animation; collapses to a floating green "🔒 Read-only" pill in the top-right corner; clicking the editor or pill re-expands the full banner with Edit Copy/Close buttons (auto-hides again after 5s); dynamic `SHARE_BASE_URL` uses `localhost` in dev and `textagent.github.io` in production |
 | **2026-03-17** | | 🚀 **AI Worker Limits Upgrade** — raised all task-specific token limits to industry-standard values (e.g. `chat`/`generate`/`markdown` 512→8192, `expand`/`elaborate` 512→4096, `summarize` 256→2048, `autocomplete` 128→512); unified document context limits to 16K/32K chars across Qwen, Gemini, and Common workers; expanded chat history from 10→30 messages with 8x per-message content (500→4000 chars) |
 | **2026-03-16** | | 🐛 **Hiragana Quiz & Kana Master Fix** — fixed Hiragana Quiz showing black screen due to double-escaped `</script>` tag preventing script execution; fixed Kana Master hearts (♥) and celebration emoji (🎌) rendering as literal escape sequences instead of Unicode characters |

changelogs/CHANGELOG-header-ui.md

@@ -0,0 +1,25 @@
+# Changelog — Header UI & Shared View Pill
+
+## Three-Level Header Visibility Toggle
+
+- Added three-level header visibility system (Full → Compact → Hidden):
+  - **Level 0 (Full)**: Default — app-header + dropzone visible
+  - **Level 1 (Compact)**: Quick Action Bar visible, header hidden (existing behavior)
+  - **Level 2 (Hidden)**: Everything hidden, floating "TextAgent" restore pill at top-center
+- Floating restore pill (`header-restore-pill`) appears at 35% opacity, fully visible on hover
+- QAB header toggle now transitions from level 1 → 2 (hide everything) instead of restoring full header
+- Header level persists across page reloads via `localStorage` (`ta-header-level`)
+
+### Files Modified
+- `css/header.css` — added `.header-restore-pill` styles and `body.header-hidden` rules
+- `index.html` — added `#header-restore-pill` button element
+- `js/app-init.js` — rewired header toggle logic with `setHeaderLevel()` function and localStorage persistence
+
+## Shared View Pill Repositioned to Bottom-Right
+
+- Moved the "Read-only" shared-view pill from top-right to bottom-right corner
+- Updated entrance animation direction (`translateY(10px)` instead of `-10px`) for upward slide-in
+
+### Files Modified
+- `css/modals.css` — changed `top: 10px; right: 16px` → `bottom: 10px; right: 16px`
+- `styles.css` — same positional change

css/header.css

@@ -887,4 +887,56 @@ a:focus {
     margin-top: 2px;
     padding: 4px;
   }
+}
+
+/* ========================================
+   HEADER-HIDDEN STATE (level 2)
+   ======================================== */
+
+body.header-hidden .app-header,
+body.header-hidden .quick-action-bar,
+body.header-hidden .formatting-toolbar,
+body.header-hidden .dropzone {
+  display: none !important;
+}
+
+/* Floating restore pill — small pill at top-center */
+.header-restore-pill {
+  position: fixed;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 14px;
+  background-color: var(--header-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+}
+
+/* Show the pill when body has header-hidden class */
+body.header-hidden .header-restore-pill {
+  display: inline-flex !important;
+  opacity: 0.35;
+  pointer-events: auto;
+}
+
+body.header-hidden .header-restore-pill:hover {
+  opacity: 1;
+  transform: translateX(-50%) translateY(1px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.header-restore-pill i {
+  font-size: 0.8rem;
 }

css/modals.css

@@ -544,7 +544,7 @@
 /* --- Shared View Pill (collapsed indicator) --- */
 .shared-view-pill {
   position: fixed;
-  top: 10px;
+  bottom: 10px;
   right: 16px;
   z-index: 1500;
   display: flex;
@@ -559,7 +559,7 @@
   cursor: pointer;
   box-shadow: 0 2px 12px rgba(26, 127, 55, 0.35);
   opacity: 0;
-  transform: translateY(-10px) scale(0.95);
+  transform: translateY(10px) scale(0.95);
   transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
   pointer-events: none;
   user-select: none;

index.html

@@ -590,6 +590,10 @@ <h5>Menu</h5>
 
             </div>
         </div>
+        <!-- Floating restore pill — visible only when header is fully hidden (level 2) -->
+        <button id="header-restore-pill" class="header-restore-pill" title="Show full header" style="display:none">
+            <i class="bi bi-chevron-down"></i> <span class="brand-label">TextAgent</span>
+        </button>
         <!-- Formatting Toolbar -->
         <div class="formatting-toolbar" id="formatting-toolbar">
             <button class="fmt-btn" data-action="undo" title="Undo (Ctrl+Z)"><i

js/app-init.js

@@ -145,17 +145,76 @@
     }
 
     // ========================================
-    // QUICK ACTION BAR WIRING
+    // THREE-LEVEL HEADER VISIBILITY TOGGLE
+    // Level 0 = Full header (app-header + dropzone visible)
+    // Level 1 = Compact (QAB visible, header hidden)
+    // Level 2 = Hidden (everything hidden, floating pill only)
     // ========================================
-    if (quickActionBar) {
-        // Header toggle — restore full header + dropzone view
-        var qabHeaderToggle = document.getElementById('qab-header-toggle');
-        if (qabHeaderToggle) qabHeaderToggle.addEventListener('click', function () {
+    var headerLevel = 0;
+    var HEADER_LEVEL_KEY = 'ta-header-level';
+    var restorePill = document.getElementById('header-restore-pill');
+
+    function setHeaderLevel(level) {
+        headerLevel = level;
+        localStorage.setItem(HEADER_LEVEL_KEY, String(level));
+
+        if (level === 0) {
+            // Full header — show header + dropzone, hide QAB, remove hidden class
+            document.body.classList.remove('header-hidden');
             dropzone.style.display = 'block';
-            quickActionBar.style.display = 'none';
+            if (quickActionBar) quickActionBar.style.display = 'none';
             if (siteHeader) siteHeader.style.display = '';
-        });
+        } else if (level === 1) {
+            // Compact — hide header + dropzone, show QAB
+            document.body.classList.remove('header-hidden');
+            dropzone.style.display = 'none';
+            if (siteHeader) siteHeader.style.display = 'none';
+            if (quickActionBar) quickActionBar.style.display = 'flex';
+            syncQabViewState();
+        } else if (level === 2) {
+            // Hidden — hide everything, show floating restore pill
+            dropzone.style.display = 'none';
+            if (siteHeader) siteHeader.style.display = 'none';
+            if (quickActionBar) quickActionBar.style.display = 'none';
+            document.body.classList.add('header-hidden');
+        }
+    }
 
+    // Collapse header button (in app-header) — level 0 → 1
+    var collapseHeaderBtn = document.getElementById('collapse-header-btn');
+    if (collapseHeaderBtn) collapseHeaderBtn.addEventListener('click', function () {
+        setHeaderLevel(1);
+    });
+
+    // QAB header toggle — level 1 → 2 (hide everything)
+    if (quickActionBar) {
+        var qabHeaderToggle = document.getElementById('qab-header-toggle');
+        if (qabHeaderToggle) {
+            // Update title/icon to indicate it will hide everything
+            qabHeaderToggle.title = 'Hide full header';
+            var qabIcon = qabHeaderToggle.querySelector('i');
+            if (qabIcon) qabIcon.className = 'bi bi-chevron-up';
+            qabHeaderToggle.addEventListener('click', function () {
+                setHeaderLevel(2);
+            });
+        }
+    }
+
+    // Floating restore pill — level 2 → 0 (restore full header)
+    if (restorePill) restorePill.addEventListener('click', function () {
+        setHeaderLevel(0);
+    });
+
+    // Restore saved header level on page load
+    var savedLevel = parseInt(localStorage.getItem(HEADER_LEVEL_KEY), 10);
+    if (savedLevel === 1 || savedLevel === 2) {
+        setHeaderLevel(savedLevel);
+    }
+
+    // ========================================
+    // QUICK ACTION BAR WIRING
+    // ========================================
+    if (quickActionBar) {
         // New — delegate to existing new-document button
         var qabNew = document.getElementById('qab-new');
         if (qabNew) qabNew.addEventListener('click', function () {
@@ -351,14 +410,6 @@
         });
     }
 
-    // Collapse header button — hide full header, show QAB
-    var collapseHeaderBtn = document.getElementById('collapse-header-btn');
-    if (collapseHeaderBtn) collapseHeaderBtn.addEventListener('click', function () {
-        dropzone.style.display = 'none';
-        syncQabVisibility();
-        syncQabViewState();
-    });
-
     // ========================================
     // GLOBAL KEYBOARD SHORTCUTS
     // ========================================

styles.css

@@ -2290,7 +2290,7 @@ a:focus {
 /* --- Shared View Pill (collapsed indicator) --- */
 .shared-view-pill {
   position: fixed;
-  top: 10px;
+  bottom: 10px;
   right: 16px;
   z-index: 1500;
   display: flex;
@@ -2305,7 +2305,7 @@ a:focus {
   cursor: pointer;
   box-shadow: 0 2px 12px rgba(26, 127, 55, 0.35);
   opacity: 0;
-  transform: translateY(-10px) scale(0.95);
+  transform: translateY(10px) scale(0.95);
   transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
   pointer-events: none;
   user-select: none;