fix: comprehensive restoration of PR 738 features and UI stabilization

- Restored 'My Vault' feature and synced its color scheme to the global theme
- Standardized header, footer, and active link states across all HTML pages
- Fixed PWA banner layout issues (position fixed) and repaired broken icon paths
- Ensured pwa.css and ambient.js are loaded correctly on all pages
- Removed conflicting CSS resets in chat.html to restore header visibility
- Corrected footer.js relative pathing and removed hardcoded footers
- Updated build_netlify.py to correctly stage manifest.json for production builds

Author: devanshi14malhotra

build_netlify.py

@@ -40,6 +40,8 @@ def rewrite_html(content: str) -> str:
         'src="script/header-scroll.js"': 'src="script/header-scroll.js"',
         'src="js/header-scroll.js"': 'src="script/header-scroll.js"',
         '../assets/biblioDrift_favicon.png': 'assets/images/biblioDrift_favicon.png',
+        'href="../manifest.json"': 'href="manifest.json"',
+        'href="/manifest.json"': 'href="manifest.json"',
     }
 
     for pattern, replacement in replacements.items():
@@ -71,6 +73,11 @@ def main() -> None:
     reset_dist()
     for folder in ("css", "js", "assets", "script"):
         copy_tree(folder)
+        
+    manifest_src = SOURCE / "manifest.json"
+    if manifest_src.exists():
+        shutil.copy2(manifest_src, DIST / "manifest.json")
+        
     build_html()
     inject_api_base_override()
 

frontend/css/pwa.css

@@ -1,12 +1,18 @@
 /* pwa.css */
 
 .pwa-install-banner {
-    position: relative;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
     justify-content: center;
     align-items: center;
-
     padding: 16px 24px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    z-index: 10000;
 }
 
 .pwa-banner-icon {

frontend/css/style.css

@@ -14,6 +14,8 @@
     --input-border: rgba(0, 0, 0, 0.1);
     --book-bg: #fff;
     --paper-color: #fffdf9;
+    --nav-active-color: #3a241c;
+    --nav-active-ring: rgba(58, 36, 28, 0.18);
 
     /* Vibe Colors */
     --vibe-mystery: #78909c;
@@ -53,6 +55,8 @@
     --input-border: rgba(255, 255, 255, 0.1);
     --book-bg: #2c2420;
     --paper-color: #e0d5cb;
+    --nav-active-color: #fff2df;
+    --nav-active-ring: rgba(255, 242, 223, 0.22);
 }
 
 * {
@@ -73,9 +77,15 @@ body {
     /* Classic serif for books */
     overflow-x: hidden;
     min-height: 100vh;
+    display: flex;
+    flex-direction: column;
     transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
 }
 
+main {
+    flex: 1;
+}
+
 /* Explicit night-mode overrides — bulletproof fallback */
 [data-theme="night"] body,
 html[data-theme="night"],
@@ -190,16 +200,52 @@ header {
     gap: 0.5rem;
 }
 
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
 .nav-links a {
     text-decoration: none;
     color: var(--text-muted);
-    margin-left: 2rem;
-    transition: color 0.3s ease;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 30px;
+    padding-bottom: 10px;
+    transition: color 0.25s ease;
 }
 
 .nav-links a:hover,
 .nav-links a.active {
-    color: var(--text-main);
+    color: var(--nav-active-color);
+}
+
+.nav-links a::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--nav-active-color);
+    box-shadow: 0 0 0 3px var(--nav-active-ring);
+    opacity: 0;
+    transform: translateX(-50%) scale(0.35);
+    transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.nav-links a:hover::after {
+    opacity: 0.45;
+    transform: translateX(-50%) scale(0.75);
+}
+
+.nav-links a.active::after {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
 }
 
 /* === ANIMATED HOVER TOOLTIPS FOR NAVIGATION (NEW) === */
@@ -209,48 +255,19 @@ header {
 }
 
 .tooltip-text {
-    position: absolute;
-    left: 50%;
-    bottom: calc(100% + 8px);
-    transform: translateX(-50%) scale(0.95) translateY(6px);
-    padding: 10px 14px;
-    background: #fffaf3;
-    color: #2b2b2b;
-    font-size: 13px;
-    font-weight: 500;
-    white-space: nowrap;
-    border-radius: 10px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transition: all 0.25s ease;
-    z-index: 9999;
+    display: none;
 }
 
 .tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-    width: 12px;
-    height: 12px;
-    background: #fffaf3;
-    border-left: 1px solid rgba(0, 0, 0, 0.08);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    display: none;
 }
 
 .tooltip:hover .tooltip-text {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-40%) scale(1) translateY(0);
+    display: none;
 }
 
 .tooltip-text i {
-    margin-right: 5px;
-    color: var(--accent-gold);
+    display: none;
 }
 
 main {

frontend/js/footer.js

@@ -17,10 +17,11 @@ const createFooter = () => {
         <nav class="footer-nav" aria-label="Footer Navigation">
           <h3>Explore</h3>
           <ul>
-            <li><a href="../index.html">Discovery</a></li>
-            <li><a href="../library.html">My Library</a></li>
-            <li><a href="../chat.html">Literary Chat</a></li>
-            <li><a href="../auth.html">Account</a></li>
+            <li><a href="index.html">Discovery</a></li>
+            <li><a href="vault.html">My Vault</a></li>
+            <li><a href="library.html">My Library</a></li>
+            <li><a href="chat.html">Literary Chat</a></li>
+            <li><a href="auth.html">Account</a></li>
             <li>
           <a href="https://github.com/devanshi14malhotra/BiblioDrift" target="_blank">
            Repository

frontend/js/pwa.js

@@ -108,7 +108,7 @@
         banner.setAttribute('aria-label', 'Install BiblioDrift app');
         banner.innerHTML = `
             <div class="pwa-banner-content">
-                <img src="/frontend/assets/images/biblioDrift_favicon.png"
+                <img src="../assets/images/biblioDrift_favicon.png"
                      alt="BiblioDrift icon" class="pwa-banner-icon">
                 <div class="pwa-banner-text">
                     <strong>Install BiblioDrift.</strong>