From b0b5541bc5139e6752a9fd0dc6537ba62a5d97ef Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Tue, 26 May 2026 20:43:15 -0400
Subject: [PATCH] Style shared page with SVG icons and theme-aware banner

---
 backend/main.py | 38 +++++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index abf1068..fb29520 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -2815,15 +2815,18 @@ async def public_share_view(token: str):
     return HTMLResponse(f"""<!DOCTYPE html><html lang="fr" data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>{title} — ObsiGate Share</title>
 <style>
-:root {{ --bg:#1a1a2e; --bg-card:#16213e; --text:#e0e0e0; --text-muted:#888; --accent:#6366f1; --border:#2a2a4a; }}
-[data-theme="light"] {{ --bg:#f8f9fa; --bg-card:#fff; --text:#1a1a2e; --text-muted:#666; --accent:#4f46e5; --border:#ddd; }}
+:root {{ --bg:#1a1a2e; --bg-card:#16213e; --text:#e0e0e0; --text-muted:#888; --accent:#6366f1; --border:#2a2a4a; --banner-bg:var(--accent); --banner-text:#fff; }}
+[data-theme="light"] {{ --bg:#f8f9fa; --bg-card:#fff; --text:#1a1a2e; --text-muted:#666; --accent:#4f46e5; --border:#ddd; --banner-bg:#eef2ff; --banner-text:#4338ca; }}
 *{{box-sizing:border-box;margin:0;padding:0}}
 body{{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh}}
 .toolbar{{position:sticky;top:0;z-index:10;background:var(--bg-card);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}}
 .toolbar-title{{font-weight:600;font-size:0.9rem;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
-.toolbar-btn{{padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer;font-size:0.8rem;display:flex;align-items:center;gap:4px;transition:all .15s}}
+.toolbar-btn{{padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer;font-size:0.8rem;display:flex;align-items:center;gap:5px;transition:all .15s}}
 .toolbar-btn:hover{{background:var(--accent);color:#fff;border-color:var(--accent)}}
-.share-banner{{background:var(--accent);color:#fff;padding:6px 16px;font-size:0.8rem;text-align:center}}
+.toolbar-btn svg{{width:15px;height:15px;flex-shrink:0}}
+.toolbar-btn:hover svg{{stroke:#fff}}
+.share-banner{{background:var(--banner-bg);color:var(--banner-text);padding:6px 16px;font-size:0.8rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}}
+.share-banner svg{{width:14px;height:14px;flex-shrink:0}}
 .content{{max-width:820px;margin:0 auto;padding:24px 20px 60px}}
 .content h1{{font-size:1.8rem;margin-bottom:16px;border-bottom:2px solid var(--border);padding-bottom:8px}}
 .content h2{{font-size:1.4rem;margin:24px 0 12px}}
@@ -2837,22 +2840,35 @@ body{{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:
 .content table{{border-collapse:collapse;width:100%;margin:12px 0}}
 .content th,.content td{{border:1px solid var(--border);padding:8px 12px;text-align:left}}
 .content th{{background:var(--bg-card)}}
+@media print{{.toolbar,.share-banner{{display:none}}body{{background:#fff;color:#000}}}}
 @media(max-width:600px){{.content{{padding:16px 12px 40px}}.toolbar{{gap:4px}}.toolbar-btn{{padding:4px 8px;font-size:0.7rem}}}}
 </style></head>
 <body>
-<div class="share-banner">📄 Document partagé via ObsiGate</div>
+<div class="share-banner">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+  Document partagé via ObsiGate
+</div>
 <div class="toolbar">
   <span class="toolbar-title">{title}</span>
-  <button class="toolbar-btn" onclick="toggleTheme()" title="Thème clair/sombre">🌓</button>
-  <button class="toolbar-btn" onclick="exportMD()" title="Exporter en Markdown">📥 .md</button>
-  <button class="toolbar-btn" onclick="exportPDF()" title="Exporter en PDF">📄 PDF</button>
+  <button class="toolbar-btn" onclick="toggleTheme()" title="Thème clair/sombre">
+    <svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+    <svg id="theme-icon-light" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+  </button>
+  <button class="toolbar-btn" onclick="exportMD()" title="Télécharger en Markdown">
+    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+    .md
+  </button>
+  <button class="toolbar-btn" onclick="exportPDF()" title="Télécharger en PDF">
+    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+    PDF
+  </button>
 </div>
 <div class="content" id="content">{html}</div>
 <script>
-function toggleTheme(){{var t=document.documentElement;t.dataset.theme=t.dataset.theme==="light"?"dark":"light";localStorage.setItem("obsigate-share-theme",t.dataset.theme)}}
-(function(){{var s=localStorage.getItem("obsigate-share-theme");if(s)document.documentElement.dataset.theme=s}})();
+function toggleTheme(){{var t=document.documentElement;var isDark=t.dataset.theme==="dark";t.dataset.theme=isDark?"light":"dark";document.getElementById("theme-icon-dark").style.display=isDark?"none":"";document.getElementById("theme-icon-light").style.display=isDark?"":"none";localStorage.setItem("obsigate-share-theme",t.dataset.theme)}}
+(function(){{var s=localStorage.getItem("obsigate-share-theme");if(!s)s="dark";document.documentElement.dataset.theme=s;var isDark=s==="dark";document.getElementById("theme-icon-dark").style.display=isDark?"":"none";document.getElementById("theme-icon-light").style.display=isDark?"none":""}})();
 function exportMD(){{var t=document.getElementById("content").innerText;var b=new Blob([t],{{type:"text/markdown"}});var a=document.createElement("a");a.href=URL.createObjectURL(b);a.download="{title}.md";a.click()}}
-function exportPDF(){{window.print()}}
+function exportPDF(){{document.title="{title}";window.print()}}
 </script></body></html>""")