feat(mobile): side-nav settings + scroll drawer + aide refondue settings-style (v7.59.0)

- Sidebar mobile: display:block du breakpoint ≤768px cassait flex:1 de .sidebar-scroll → molette/touch incapables de scroller le drawer. Flex restauré. Gate: wheel scroll scrollTop > 0. - Settings mobile: nav horizontale remplacée par une side-navigation gauche drawer (hamburger .settings-menu-btn + backdrop, fermeture auto au choix). Squelette panneau extrait vers static/css/settings.css (partagé). - /help refaite au complet: template help.html (13 sections couvrant toute l'app — éditeur, databases/vues, tâches, workspaces, collab, agent IA, API v2, PWA, SSO, raccourcis, tips) avec le même panneau 2 colonnes + drawer mobile; route réduite à un render; help.js (Alpine.data helpInit). E2E mobile_regression 6/6 + smoke 2/2 · pytest app+pwa 230/230
2026-10-07 15:36:05 -04:00
parent 992200a90a
commit efa3d57e93
13 changed files with 486 additions and 245 deletions
@@ -186,7 +186,7 @@ async def lifespan(_app: FastAPI):

 app = FastAPI(
    title="FlowDeck",
-    version="7.58.0",
+    version="7.59.0",
    docs_url="/docs",
    redoc_url="/redoc",
    lifespan=lifespan,
@@ -251,209 +251,10 @@ def accounts_page(request: Request):

@router.get("/help", response_class=HTMLResponse)
 def help_page(request: Request):
-    """Comprehensive help & documentation page."""
+    """Help & documentation page — settings-style panel with side navigation."""
    from app.templating import ENV
-    env = ENV
    sidebar = _sidebar_data(request, [])
-    # Render via a block-based template so content_html lands in {% block content %}
-    block_tpl = env.from_string(
-        '{% extends "base.html" %}{% block content %}{{ content_html|safe }}{% endblock %}'
-    )
-    return HTMLResponse(block_tpl.render(
-        **sidebar,
-        request=request,
-        page_title="Help",
-        title_prefix="Help",
-        page_icon="❓",
-        content_html="""<style>
-.help-page{max-width:900px;margin:0 auto;padding:40px 24px 80px;}
-.help-hero{text-align:center;margin-bottom:48px;}
-.help-hero h1{font-size:32px;font-weight:800;margin:0 0 8px;}
-.help-hero p{font-size:16px;color:var(--text-dim);max-width:500px;margin:0 auto;}
-.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:48px;}
-.help-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;transition:border-color .15s;}
-.help-card:hover{border-color:rgba(255,255,255,.12);}
-.help-card h3{font-size:15px;font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:8px;}
-.help-card .icon{font-size:20px;}
-.help-card p{font-size:13px;color:var(--text-dim);line-height:1.5;margin:8px 0 0;}
-.help-card ul{list-style:none;padding:0;margin:12px 0 0;}
-.help-card li{font-size:13px;padding:3px 0;color:var(--text-dim);}
-.help-card li::before{content:'• ';color:var(--accent);}
-.help-section{margin-bottom:48px;}
-.help-section h2{font-size:20px;font-weight:700;margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);}
-.help-kbd{display:inline-block;padding:2px 8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;font-family:monospace;font-size:12px;color:var(--text);min-width:16px;text-align:center;}
-.help-shortcut-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;margin-bottom:2px;}
-.help-shortcut-row:hover{background:var(--bg-hover);}
-.help-shortcut-row .keys{display:flex;gap:4px;min-width:140px;}
-.help-shortcut-row .desc{font-size:13px;color:var(--text-dim);}
-.help-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;}
-.help-badge.local{background:rgba(35,131,226,.15);color:#2C8CEB;}
-.help-badge.gitea{background:rgba(0,200,100,.15);color:#00CC66;}
-.help-badge.github{background:rgba(130,80,220,.15);color:#A060F0;}
-.help-badge.sso{background:rgba(217,115,13,.18);color:#E0952B;}
-</style>
-<div class="help-page">
-<div class="help-hero">
-<h1>❓ FlowDeck Help</h1>
-<p>Everything you need to know about your Notion-style workspace with Gitea & GitHub integration.</p>
-</div>
-
-<div class="help-grid">
-<div class="help-card">
-<h3><span class="icon">🚀</span>Getting Started</h3>
-<p>FlowDeck is your private, self-hosted workspace. Create pages, organize projects, and integrate with your Git forge.</p>
-<ul>
-<li>Create a workspace from the <b>Workspaces</b> page</li>
-<li>Click <b>📄 New Page</b> in the sidebar to start writing</li>
-<li>Use <span class="help-kbd">Ctrl+N</span> anywhere to create a page</li>
-</ul>
-</div>
-
-<div class="help-card">
-<h3><span class="icon">📝</span>Pages & Editor</h3>
-<p>Notion-style block editor with slash commands, markdown shortcuts, and rich formatting.</p>
-<ul>
-<li>Type <span class="help-kbd">/</span> for the slash command menu</li>
-<li>Drag & drop pages in the sidebar to reorganize</li>
-<li>Right-click for context menu (duplicate, rename, delete)</li>
-</ul>
-</div>
-
-<div class="help-card">
-<h3><span class="icon">{{ fd_icon("folder",16) }}</span>Workspaces</h3>
-<p>Organize your work into separate workspaces. Each has its own pages and files.</p>
-<ul>
-<li><span class="help-badge local">Local</span> Files stored on your server</li>
-<li><span class="help-badge gitea">Gitea</span> Connect to browse & edit repos</li>
-<li><span class="help-badge github">GitHub</span> Connect via Settings → Integrations</li>
-</ul>
-</div>
-
-<div class="help-card">
-<h3><span class="icon">🦎</span>Gitea Integration</h3>
-<p>Connect your Gitea account to access repositories directly from FlowDeck.</p>
-<ul>
-<li>Go to <b>Settings → Integrations</b> to connect</li>
-<li>Browse repo file trees in the sidebar</li>
-<li>Create & edit files with commit messages</li>
-<li>Sync labels as tags</li>
-</ul>
-</div>
-
-<div class="help-card">
-<h3><span class="icon">🌐</span>Sharing & Publishing</h3>
-<p>Share pages with collaborators or publish them to the web.</p>
-<ul>
-<li>Click <b>Share</b> in the page editor top-right</li>
-<li>Share with specific users or get a public link</li>
-<li>Publish to make a page visible at <code>/p/your-slug</code></li>
-</ul>
-</div>
-
-<div class="help-card">
-<h3><span class="icon">📚</span>Library, Trash & Tasks</h3>
-<p>Find all your content in one place with powerful filtering.</p>
-<ul>
-<li><b>Library</b> — Tabs for Recents, Favorites, Shared, Published</li>
-<li><b>Trash</b> — Soft-deleted pages (30-day retention)</li>
-<li><b>My Tasks</b> — Aggregated tasks from all collections</li>
-</ul>
-</div>
-
-<div class="help-card">
-<h3><span class="icon">📶</span>Offline & PWA</h3>
-<p>Install FlowDeck as an app and keep working without a connection.</p>
-<ul>
-<li><b>Install</b> — browser menu → <i>Install app</i> / <i>Add to Home Screen</i></li>
-<li>Edits made offline are queued locally and synced automatically</li>
-<li>A <b>⟳</b> marker shows pages with pending changes</li>
-</ul>
-</div>
-</div>
-
-<div class="help-section">
-<h2>⌨️ Keyboard Shortcuts</h2>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">N</span></div><div class="desc">Create new page</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">K</span></div><div class="desc">Quick find / command palette</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">S</span></div><div class="desc">Save current page</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">F2</span></div><div class="desc">Rename selected item</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Delete</span></div><div class="desc">Move selected item to trash</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Escape</span></div><div class="desc">Close modal / cancel editing</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Enter</span></div><div class="desc">Open selected page</div></div>
-<div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">O</span></div><div class="desc">New AI chat (in footer)</div></div>
-</div>
-
-<div class="help-section">
-<h2>🔐 Authentication</h2>
-<p style="color:var(--text-dim);font-size:14px;line-height:1.6;">
-FlowDeck supports three authentication methods:<br>
-<span class="help-badge local">Local</span> Email + password — create an account on the login page.<br>
-<span class="help-badge gitea">Gitea OAuth</span> Login with your Gitea account. Your repos appear as workspaces.<br>
-<span class="help-badge github">GitHub OAuth</span> Login or link your GitHub account in Settings → Integrations.<br><br>
-<b>Tip:</b> You can connect Gitea/GitHub to an existing local account — your identity stays as your local user.
-</p>
-<p style="color:var(--text-dim);font-size:14px;line-height:1.6;">
-<span class="help-badge sso">SSO</span> <b>Enterprise SSO</b> (v6.7.0) — sign in with your organization account.<br>
-<i>For administrators:</i> open <b>Settings → Admin → SSO / Enterprise</b> and pick a provider:<br>
-• <b>SAML 2.0</b> — paste the IdP <i>Entity ID</i>, <i>SSO URL</i> and signing certificate, then give the IdP this
-<code>/auth/saml/metadata</code> link (it contains the SP Entity ID, ACS URL and certificate).<br>
-• <b>OpenID Connect</b> — paste the <i>Issuer URL</i>, <i>Client ID</i> and <i>Client Secret</i> (PKCE is used, scopes default to <code>openid profile email</code>).<br>
-• <b>Provisioning</b> — accounts are created automatically on first login, groups from the IdP map to workspace roles,
-and <i>SSO only</i> disables local login (admins keep their local door). Every attempt is audited in
-<b>Settings → Admin → SSO / Enterprise</b> (login history).
-</p>
-</div>
-
-<div class="help-section">
-<h2>📶 Offline mode (PWA)</h2>
-<p style="color:var(--text-dim);font-size:14px;line-height:1.6;">
-FlowDeck is a Progressive Web App: pages you visited stay available offline and your
-edits are saved locally, then synchronised when the connection returns.<br><br>
-<b>Install:</b> open your browser menu and choose <i>Install app</i> (Chrome/Edge) or
-<i>Add to Home Screen</i> (Safari/iOS). FlowDeck then opens in its own window.<br>
-<b>Offline editing:</b> while offline, the editor stores changes in the browser
-(IndexedDB) and shows an offline banner with the number of pending changes. A
-<b>⟳</b> icon appears next to pages that have unsynced edits.<br>
-<b>Reconnection:</b> the queue is replayed automatically (and via Background Sync).
-A spinner badge appears while syncing, followed by a confirmation toast.<br>
-<b>Conflicts:</b> if a page changed on the server, the latest edit wins and a notice is
-shown. If a page was deleted server-side, your offline copy is recreated as an orphan
-page. If a page with the same title already exists, the offline copy is renamed
-<i>“Title (copie offline)”</i>.
-</p>
-</div>
-
-<div class="help-section">
-<h2>🔌 API publique v2</h2>
-<p style="color:var(--text-dim);font-size:14px;line-height:1.6;">
-FlowDeck exposes a full REST API under <b>/api/v2</b> for third-party integrations.<br>
-<b>Auth:</b> create a token in Settings → API tokens, then send it as
-<code>Authorization: Bearer &lt;token&gt;</code>. Tokens carry scopes
-<code>read</code>, <code>write</code> or <code>admin</code> (a higher scope implies the lower ones).<br>
-<b>Features:</b> CRUD on collections, pages, properties, views, comments, notifications,
-favorites, tags, sharing, sprints and templates; pagination (<code>?limit=&amp;offset=</code> +
-<code>X-Total-Count</code>), filters (<code>filter[prop]=value</code>), sorting, full-text search
-(<code>/api/v2/search</code>), idempotency (<code>Idempotency-Key</code>) and RFC 7807 error bodies.<br>
-<b>Reference:</b> interactive OpenAPI docs at <a href="/docs" target="_blank" rel="noopener">/docs</a>
-(also <code>/redoc</code>, <code>docs/openapi-v2.json</code>).
-</p>
-</div>
-
-<div class="help-section">
-<h2>💡 Tips</h2>
-<p style="color:var(--text-dim);font-size:14px;line-height:1.6;">
-• Toggle the sidebar with the <b>«</b> button in the top-left corner.<br>
-• Switch between workspaces using the dropdown menu in the sidebar header.<br>
-• The <b>Private</b> section appears when a remote workspace is active — files here stay local.<br>
-• Hover over any sidebar item to see action buttons (favorite, share, delete).<br>
-• Use <b>Ctrl+Click</b> or <b>Shift+Click</b> to multi-select items in the sidebar.
-</p>
-</div>
-
-</div>"""
-    ))
-
-
+    return ENV.get_template("help.html").render(**sidebar, request=request)


@router.get("/accounts/settings", response_class=HTMLResponse)
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/static/css/app.css?v={{ asset_version }}">
  <link rel="stylesheet" href="/static/css/design-tokens.css?v={{ asset_version }}">
  <link rel="stylesheet" href="/static/css/components.css?v={{ asset_version }}">
+  <link rel="stylesheet" href="/static/css/settings.css?v={{ asset_version }}">
  <!-- My Tasks + page « /db » : lies dans le SHELL et non dans la zone
       swappée. Un <link> à l'intérieur de `.main-wrapper` peut être retiré par
       htmx lors d'une navigation partielle : la page revenait alors sans
@@ -0,0 +1,248 @@
+{% extends "base.html" %}
+{% block page_title %}Help{% endblock %}
+{% block title_prefix %}Help{% endblock %}
+{% block page_icon %}{{ fd_icon("help-circle",18) }}{% endblock %}
+
+{% block topbar %}
+{% set page_icon = "help-circle" %}
+{% set page_title = "Help" %}
+{% include '_header.html' %}
+{% endblock %}
+
+{% block content %}
+{# Same panel skeleton as settings (shared /static/css/settings.css) #}
+<style>
+.help-body{margin-bottom:24px;max-width:760px;}
+.help-body p{font-size:14px;color:var(--text-secondary);line-height:1.65;margin:0 0 10px;}
+.help-body ul{margin:0 0 14px;padding-left:18px;}
+.help-body li{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:4px;}
+.help-body code{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:12.5px;}
+.help-body h3{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin:22px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
+.help-kbd{display:inline-block;padding:2px 8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;font-family:monospace;font-size:12px;color:var(--text);min-width:16px;text-align:center;}
+.help-shortcut-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;margin-bottom:2px;}
+.help-shortcut-row:hover{background:var(--bg-hover);}
+.help-shortcut-row .keys{display:flex;gap:4px;min-width:140px;}
+.help-shortcut-row .desc{font-size:13px;color:var(--text-dim);}
+.help-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;}
+.help-badge.local{background:rgba(35,131,226,.15);color:#2C8CEB;}
+.help-badge.gitea{background:rgba(0,200,100,.15);color:#00CC66;}
+.help-badge.github{background:rgba(130,80,220,.15);color:#A060F0;}
+.help-badge.sso{background:rgba(217,115,13,.18);color:#E0952B;}
+</style>
+
+<div class="settings-overlay" x-data="helpInit()" style="background:none;backdrop-filter:none;position:static;z-index:1;padding:0;">
+  <div class="settings-panel" style="width:100%;max-width:1050px;height:calc(100vh - 120px);margin:0 auto;" @keydown.escape="navOpen = false">
+    <button class="settings-menu-btn" @click="navOpen = !navOpen" title="Sections" aria-label="Open sections menu">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+    </button>
+
+    <!-- Mobile drawer backdrop -->
+    <div class="settings-nav-backdrop" x-show="navOpen" x-cloak @click="navOpen = false"></div>
+
+    <!-- Left navigation -->
+    <div class="settings-nav" :class="{ 'nav-open': navOpen }" @click.capture="closeNavOnMobile()">
+      <div class="settings-nav-header">Basics</div>
+      <div class="settings-nav-item" :class="{ active: section==='start' }" @click="go('start')">🚀 Getting Started</div>
+      <div class="settings-nav-item" :class="{ active: section==='editor' }" @click="go('editor')">📝 Pages &amp; Editor</div>
+      <div class="settings-nav-item" :class="{ active: section==='databases' }" @click="go('databases')">🗄️ Databases &amp; Views</div>
+      <div class="settings-nav-item" :class="{ active: section==='tasks' }" @click="go('tasks')">✅ Tasks &amp; Dependencies</div>
+      <div class="settings-nav-header">Workspace</div>
+      <div class="settings-nav-item" :class="{ active: section==='workspaces' }" @click="go('workspaces')">📁 Workspaces &amp; Forges</div>
+      <div class="settings-nav-item" :class="{ active: section==='collab' }" @click="go('collab')">👥 Collaboration</div>
+      <div class="settings-nav-item" :class="{ active: section==='nav' }" @click="go('nav')">📚 Library, Trash &amp; Search</div>
+      <div class="settings-nav-header">Features</div>
+      <div class="settings-nav-item" :class="{ active: section==='agent' }" @click="go('agent')">🤖 AI Agent &amp; Automations</div>
+      <div class="settings-nav-item" :class="{ active: section==='integrations' }" @click="go('integrations')">🔌 Integrations &amp; API</div>
+      <div class="settings-nav-item" :class="{ active: section==='pwa' }" @click="go('pwa')">📶 Offline &amp; PWA</div>
+      <div class="settings-nav-item" :class="{ active: section==='auth' }" @click="go('auth')">🔐 Accounts &amp; SSO</div>
+      <div class="settings-nav-header">Reference</div>
+      <div class="settings-nav-item" :class="{ active: section==='shortcuts' }" @click="go('shortcuts')">⌨️ Keyboard Shortcuts</div>
+      <div class="settings-nav-item" :class="{ active: section==='tips' }" @click="go('tips')">💡 Tips</div>
+    </div>
+
+    <!-- Content -->
+    <div class="settings-content">
+
+      <div class="help-body" x-show="section==='start'">
+        <h2>Getting Started</h2>
+        <p>FlowDeck is your private, self-hosted Notion-style workspace — pages, databases, and Git-forge (Gitea / GitHub) integration in one app.</p>
+        <h3>First steps</h3>
+        <ul>
+          <li>Open <b>Workspaces</b> (<code>/workspaces</code>) to pick or create a workspace — local or connected to a forge.</li>
+          <li>Click <b>+ New page</b> in the sidebar to start writing, or press <span class="help-kbd">Ctrl</span>+<span class="help-kbd">N</span>.</li>
+          <li>Use the <b>Agent &amp; IA</b> section in Settings to plug an LLM provider (OpenAI, Ollama, DeepInfra…) if you want AI features.</li>
+        </ul>
+        <h3>The sidebar</h3>
+        <ul>
+          <li>The workspace header (top-left) switches workspaces and opens your account menu.</li>
+          <li>Tabs <b>Home / Chat / Meetings / Inbox</b> swap the sidebar content; pages are a drag-and-drop tree.</li>
+          <li>On mobile the sidebar is a drawer: open it with the hamburger button, close it by tapping outside or swiping left.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='editor'">
+        <h2>Pages &amp; Editor</h2>
+        <p>Notion-style block editor: every line is a block you can drag, convert, and nest.</p>
+        <h3>Blocks</h3>
+        <ul>
+          <li>Type <code>/</code> for the slash menu — headings, callouts, toggles, code, math (KaTeX), tables, images, embeds, ToC…</li>
+          <li>Markdown shortcuts as you type: <code># </code> heading, <code>- </code> bullet, <code>1. </code> numbered, <code>&gt; </code> quote, <code>[] </code> todo, <code>``` </code> code.</li>
+          <li>Drag the handle left of a block to move or nest it; <span class="help-kbd">Tab</span>/<span class="help-kbd">Shift+Tab</span> indent/outdent.</li>
+          <li>Inline formatting: bold, italic, code, links, colors via the selection toolbar.</li>
+        </ul>
+        <h3>Page features</h3>
+        <ul>
+          <li>Cover image and icon on every page (click the top of the page).</li>
+          <li>Inline databases: add a table/board/calendar collection directly in a page.</li>
+          <li>Comments (threaded), page history with snapshots, backlinks.</li>
+          <li>Right-click any sidebar item for context menu: duplicate, rename, move, delete.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='databases'">
+        <h2>Databases &amp; Views</h2>
+        <p>Collections are databases with a JSON schema, independent of Gitea. <b>21 property types</b>: title, text, number, select, multi-select, status, date, person, checkbox, url, email, phone, files, unique_id, relation, rollup, formula, and auto-properties.</p>
+        <h3>Views</h3>
+        <ul>
+          <li><b>Table</b> — sortable columns, inline editing.</li>
+          <li><b>Board (Kanban)</b> — group by select/status, drag &amp; drop between columns.</li>
+          <li><b>Calendar</b> — month grid by date property.</li>
+          <li><b>Gallery</b> — visual cards, configurable card size.</li>
+          <li><b>List</b> — compact rows with preview.</li>
+          <li><b>Timeline</b> — Gantt bars from date ranges.</li>
+          <li><b>Status Overview / Team Load</b> — donut + stacked-bar dashboards.</li>
+        </ul>
+        <h3>Relations, rollups, formulas</h3>
+        <ul>
+          <li>Relations are bidirectional: link rows across collections.</li>
+          <li>Rollups aggregate related rows (12 aggregations: sum, count, average, min, max…).</li>
+          <li>Formulas support 19 functions over row properties.</li>
+          <li>Filters, sorts and grouping apply per-view.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='tasks'">
+        <h2>Tasks &amp; Dependencies</h2>
+        <ul>
+          <li>Todo blocks anywhere in pages become checkboxes; the <b>My Tasks</b> page aggregates every task in every collection you can access.</li>
+          <li>My Tasks views: <b>All / Today / Overdue / Next 7 days</b>.</li>
+          <li><b>Sub-items</b>: unlimited hierarchy — a parent row is Done when all children are Done (status aggregate).</li>
+          <li><b>Dependencies</b>: Blocking / Blocked by between rows; transitioning a blocked task is refused until its blocker is done.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='workspaces'">
+        <h2>Workspaces &amp; Forges</h2>
+        <p>Organize work into separate workspaces, each with its own page tree, collections and members.</p>
+        <ul>
+          <li><span class="help-badge local">Local</span> Pages and files stored on your server (SQLite under <code>/data</code>).</li>
+          <li><span class="help-badge gitea">Gitea</span> Connect your Gitea account (Settings → Integrations): repos appear as workspaces, browse the file tree in the sidebar, create/edit files with commit messages, sync labels as tags.</li>
+          <li><span class="help-badge github">GitHub</span> Connect via Settings → Integrations for repo browsing.</li>
+          <li>Gitea legacy boards are auto-adapted into FlowDeck collections (GiteaBoardCompat).</li>
+          <li>The <b>Private</b> section appears when a remote workspace is active — those pages stay local.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='collab'">
+        <h2>Collaboration</h2>
+        <ul>
+          <li><b>Roles</b>: workspace members are admin / editor / commenter / viewer.</li>
+          <li><b>Sharing</b>: the Share button (top-right of a page) — share with specific users or publish a read-only public link (<code>/p/your-slug</code>).</li>
+          <li><b>Teamspaces</b> (wiki): shared knowledge spaces with their own pages.</li>
+          <li><b>Meetings</b>: meeting notes with an action-items panel.</li>
+          <li><b>Sprints</b>: time-box collections of tasks, with burndown-ready statuses.</li>
+          <li><b>Notifications</b>: bell in the topbar for mentions, assignments, comments.</li>
+          <li>Live editing: changes propagate to other open tabs (real-time sync).</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='nav'">
+        <h2>Library, Trash &amp; Search</h2>
+        <ul>
+          <li><b>Library</b> (<code>/library</code>) — tabs for Recents, Favorites, Shared, Published, with filtering.</li>
+          <li><b>Trash</b> (<code>/trash</code>) — soft-deleted pages, 30-day retention, restore or purge.</li>
+          <li><b>Ctrl+K</b> — command palette: fuzzy search across pages, jump anywhere, start an AI answer.</li>
+          <li>Full-text search API: <code>/api/v2/search</code>.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='agent'">
+        <h2>AI Agent &amp; Automations</h2>
+        <ul>
+          <li><b>Chat sidebar</b> (Chat tab): conversations with your configured LLM; pages can be attached as context.</li>
+          <li><b>Agent panel</b> on pages: propose edits, generate content, answer questions about the workspace.</li>
+          <li><b>Skill marketplace</b>: export/import portable skills, install presets from the <code>/</code> gallery.</li>
+          <li><b>Automations</b> (Settings → Automations): visual pipeline of trigger → condition → delay → action (webhook, notification, page update…), with run history and legacy JSON conversion.</li>
+          <li>Configure providers in <b>Settings → Agent &amp; IA</b>: per-provider API keys, model lists, offline mode without any provider.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='integrations'">
+        <h2>Integrations &amp; API</h2>
+        <ul>
+          <li><b>Public API v2</b> — <code>/api/v2</code>: CRUD on collections, pages, properties, views, comments, notifications, favorites, tags, sharing, sprints, templates. Bearer tokens (Settings → API tokens) with scopes <code>read</code>/<code>write</code>/<code>admin</code>, pagination, filters, sorting, idempotency keys, RFC 7807 errors. Interactive docs at <a href="/docs" target="_blank" rel="noopener">/docs</a>.</li>
+          <li><b>Agent API</b> — <code>/api/v2/agents/*</code>: agents, conversations, synchronous JSON run, action journal with rollback, external trigger.</li>
+          <li><b>Webhooks</b>: outgoing events (create/update/delete) managed in Settings → Integrations; incoming Gitea webhooks keep boards in sync.</li>
+          <li><b>Web Clipper</b> — browser extension (Manifest V3): clip article / selection / bookmark / screenshot straight into FlowDeck.</li>
+          <li><b>Import / Export</b>: CSV import, JSON/CSV/Markdown export.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='pwa'">
+        <h2>Offline mode (PWA)</h2>
+        <p>FlowDeck is a Progressive Web App: pages you visited stay available offline and your edits are saved locally, then synchronised when the connection returns.</p>
+        <ul>
+          <li><b>Install:</b> browser menu → <i>Install app</i> (Chrome/Edge) or <i>Add to Home Screen</i> (Safari/iOS).</li>
+          <li><b>Offline editing:</b> while offline, the editor stores changes in the browser (IndexedDB) and shows an offline banner with the number of pending changes. A ⟳ icon marks pages with unsynced edits.</li>
+          <li><b>Reconnection:</b> the queue is replayed automatically (and via Background Sync); a spinner badge appears while syncing, then a confirmation toast.</li>
+          <li><b>Conflicts:</b> the latest edit wins with a notice; server-side-deleted pages are recreated as orphan pages; title collisions get an <i>“…(copie offline)”</i> suffix.</li>
+        </ul>
+      </div>
+
+      <div class="help-body" x-show="section==='auth'">
+        <h2>Accounts &amp; SSO</h2>
+        <p>
+          <span class="help-badge local">Local</span> Email + password — create an account on the login page.<br><br>
+          <span class="help-badge gitea">Gitea OAuth</span> / <span class="help-badge github">GitHub OAuth</span> — sign in with your forge; your repos become workspaces. You can link a forge to an existing local account — your identity stays local.<br><br>
+          <span class="help-badge sso">SSO</span> <b>Enterprise SSO</b> — in <b>Settings → Admin → SSO / Enterprise</b>:
+        </p>
+        <ul>
+          <li><b>SAML 2.0</b> — paste IdP Entity ID, SSO URL and signing certificate; give the IdP your <code>/auth/saml/metadata</code> link.</li>
+          <li><b>OpenID Connect</b> — Issuer URL, Client ID and Client Secret (PKCE, scopes <code>openid profile email</code>).</li>
+          <li>Just-in-time provisioning, IdP groups mapped to workspace roles, <i>SSO only</i> mode disables local login (admins keep their door). Every attempt is audited in the login history.</li>
+        </ul>
+        <p>Sessions and API tokens are managed in Settings → Sessions / API tokens.</p>
+      </div>
+
+      <div class="help-body" x-show="section==='shortcuts'">
+        <h2>Keyboard Shortcuts</h2>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">K</span></div><div class="desc">Command palette / quick find</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">N</span></div><div class="desc">Create new page</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">S</span></div><div class="desc">Save current page</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Ctrl</span>+<span class="help-kbd">O</span></div><div class="desc">New AI chat (footer)</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">/</span></div><div class="desc">Slash command menu (in editor)</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">F2</span></div><div class="desc">Rename selected item</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Delete</span></div><div class="desc">Move selected item to trash</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Enter</span></div><div class="desc">Open selected page</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Tab</span> / <span class="help-kbd">Shift</span>+<span class="help-kbd">Tab</span></div><div class="desc">Indent / outdent block</div></div>
+        <div class="help-shortcut-row"><div class="keys"><span class="help-kbd">Escape</span></div><div class="desc">Close modal / cancel editing</div></div>
+      </div>
+
+      <div class="help-body" x-show="section==='tips'">
+        <h2>Tips</h2>
+        <ul>
+          <li>Toggle the desktop sidebar with the « button; collapsed, hover the left edge to peek it.</li>
+          <li><b>Ctrl+Click</b> / <b>Shift+Click</b> multi-select in the sidebar tree.</li>
+          <li>Hover any sidebar item for quick actions (favorite, share, delete).</li>
+          <li>Drag pages into the tree to reorganize; drop onto a page to nest it.</li>
+          <li>The section <b>⋮</b> menus reorder or hide sidebar sections to taste.</li>
+          <li>Dark/light theme toggle is in the topbar and persists across reloads.</li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<script data-cfasync="false" src="/static/js/help.js?v={{ asset_version }}"></script>
+{% endblock %}
@@ -11,16 +11,6 @@

 {% block content %}
 <style>
-.settings-overlay{position:fixed;inset:0;z-index:500;display:flex;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);}
-.settings-panel{display:flex;width:1050px;max-width:98vw;height:85vh;margin:auto;background:var(--bg-primary);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow-modal);overflow:hidden;}
-.settings-nav{width:200px;min-width:200px;background:var(--bg-sidebar);border-right:1px solid var(--border);padding:8px 0;overflow-y:auto;}
-.settings-nav-header{padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
-.settings-nav-item{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background 100ms;border-radius:0;}
-.settings-nav-item:hover{background:var(--bg-hover);}
-.settings-nav-item.active{background:rgba(35,131,226,.12);color:var(--text);font-weight:500;}
-.settings-content{flex:1;overflow-y:auto;padding:24px 32px;}
-.settings-content h2{font-size:18px;font-weight:600;margin-bottom:4px;}
-.settings-content .section-desc{font-size:12px;color:var(--text-dim);margin-bottom:24px;}
 .setting-group{margin-bottom:28px;}
 .setting-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
 .setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
@@ -69,9 +59,7 @@
 .status-dot.active{background:var(--toast-success-bg);}
 .status-dot.inactive{background:var(--danger);}

-/* Close button */
-.settings-close{position:absolute;top:12px;right:12px;width:32px;height:32px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;}
-.settings-close:hover{background:var(--bg-hover);color:var(--text);}
+/* Close button — shared styles in /static/css/settings.css */

 /* Agent & IA — status summary + provider cards */
 .llm-summary{display:flex;gap:14px;align-items:flex-start;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:22px;flex-wrap:wrap;}
@@ -126,28 +114,19 @@
 .llm-detail-empty{display:flex;align-items:center;justify-content:center;height:260px;font-size:13px;color:var(--text-dim);text-align:center;padding:0 20px;}
@media (max-width:760px){.llm-layout{grid-template-columns:1fr;}.llm-list{max-height:220px;}}

-/* ── Mobile: full-screen panel + horizontal nav tabs ── */
-@media (max-width:768px){
-  .settings-overlay{background:var(--bg-primary);backdrop-filter:none;}
-  .settings-panel{flex-direction:column;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:none;border-radius:0;box-shadow:none;}
-  .settings-nav{width:auto;min-width:0;flex-direction:row;flex-shrink:0;display:flex;align-items:center;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:6px 8px;gap:4px;overscroll-behavior-x:contain;}
-  .settings-nav-header{display:none;}
-  .settings-nav-item{white-space:nowrap;padding:8px 12px;border-radius:8px;flex-shrink:0;}
-  .settings-content{padding:16px;}
-  .settings-close{top:8px;right:8px;width:44px;height:44px;background:var(--bg-tertiary);}
-  .setting-row{flex-wrap:wrap;}
-  .setting-control{margin-left:0;width:100%;}
-  .prov-grid{grid-template-columns:1fr;}
-  .avatar-section{gap:10px;}
-}
+/* ── Mobile side-nav drawer: shared settings.css handles overlay/nav/panel ── */
 </style>

-<div class="settings-overlay" x-data="settingsInit()" @keydown.escape="historyBack()">
-  <div class="settings-panel" style="position:relative;">
+<div class="settings-overlay" x-data="settingsInit()">
+  <div class="settings-panel" style="position:relative;" @keydown.escape="historyBack()">
+    <button class="settings-menu-btn" @click="navOpen = !navOpen" title="Sections" aria-label="Open sections menu">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+    </button>
    <button class="settings-close" @click="closeSettings()" title="Close">×</button>

-    <!-- Left navigation -->
-    <div class="settings-nav">
+    <!-- Left navigation (mobile: side-navigation drawer via hamburger + backdrop) -->
+    <div class="settings-nav-backdrop" x-show="navOpen" x-cloak @click="navOpen = false"></div>
+    <div class="settings-nav" :class="{ 'nav-open': navOpen }" @click.capture="closeNavOnMobile()">
      <div class="settings-nav-header">Account</div>
      <div class="settings-nav-item" :class="{ active: activeSection==='account' }" @click="activeSection='account'"><span class="nav-icon-inline">{{ fd_icon("user",14) }}</span> My account</div>
      <div class="settings-nav-item" :class="{ active: activeSection==='notifications' }" @click="activeSection='notifications'"><span class="nav-icon-inline">{{ fd_icon("bell",14) }}</span> Notifications</div>