merge: develop → main (help page)

app/routers/dashboard.py

@@ -316,7 +316,7 @@ async def accounts_page(request: Request):
 
 @router.get("/help", response_class=HTMLResponse)
 async def help_page(request: Request):
-    """Simple help / about page."""
+    """Comprehensive help & documentation page."""
     from jinja2 import Environment, FileSystemLoader
     env = Environment(loader=FileSystemLoader("app/templates"))
     sidebar = _sidebar_data(request, [])
@@ -324,13 +324,138 @@ async def help_page(request: Request):
     return HTMLResponse(template.render(
         **sidebar,
         request=request,
-        content_html="""<div style="max-width:700px;margin:40px auto;padding:0 20px;">
-<h2>❓ FlowDeck Help</h2>
-<p style="color:var(--text-dim)">FlowDeck is a Notion-style workspace with Gitea/GitHub integration.</p>
-<h3>Getting Started</h3>
-<ul><li>Create a <b>Workspace</b> from the Workspaces page</li><li>Create <b>Pages</b> using the sidebar or <kbd>Ctrl+N</kbd></li><li>Connect <b>Gitea</b> or <b>GitHub</b> in Settings → Integrations</li></ul>
-<h3>Keyboard Shortcuts</h3>
-<table style="width:100%"><tr><td><kbd>Ctrl+N</kbd></td><td>New page</td></tr><tr><td><kbd>F2</kbd></td><td>Rename selected</td></tr><tr><td><kbd>Delete</kbd></td><td>Move to trash</td></tr><tr><td><kbd>Ctrl+K</kbd></td><td>Quick find</td></tr></table>
+        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;}
+</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">📁</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>
+
+<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>
+</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>"""
     ))