diff --git a/app/templates/_header.html b/app/templates/_header.html new file mode 100644 index 0000000..2ac9cc5 --- /dev/null +++ b/app/templates/_header.html @@ -0,0 +1,47 @@ +{# ── Unified Header (Notion-inspired) ── + Parameters available in calling context: + breadcrumb_items: list of {label: str, url: str|None} — last item = current page + page_icon: str — emoji icon + right_actions: str — raw HTML for right-side action buttons + hamburger_click: str — Alpine expression for hamburger button (default: opens sidebar) + hide_hamburger: bool — if truthy, hides the hamburger button +#} +
+ {% if not hide_hamburger %} + + {% endif %} + +
+ {% if page_icon %} + {{ page_icon }} + {% endif %} + + {% if breadcrumb_items %} + {% for item in breadcrumb_items %} + {% if item.url and not loop.last %} + {{ item.label }} + / + {% elif loop.last %} + {{ item.label }} + {% else %} + {{ item.label }} + / + {% endif %} + {% endfor %} + {% else %} + {{ page_title|default('FlowDeck') }} + {% endif %} +
+ +
+ {{ right_actions|safe if right_actions else '' }} +
+
diff --git a/app/templates/base.html b/app/templates/base.html index 06e84e9..cc1cb4d 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -329,47 +329,7 @@ {% block topbar %} -
- - -
-
- - / - -
-
- -
-
- - -
-
- 🔒 Private - ▾ -
-
- -
- Edited - - - - - - -
-
+ {% include '_header.html' %} {% endblock %} diff --git a/app/templates/gitea_workspace.html b/app/templates/gitea_workspace.html index 9eda4fa..d3b455c 100644 --- a/app/templates/gitea_workspace.html +++ b/app/templates/gitea_workspace.html @@ -4,22 +4,10 @@ {% block page_icon %}🔗{% endblock %} {% block topbar %} -
- -
- Home - {{ owner }}/{{ repo }} -
-
- - - - - -
-
+{% set breadcrumb_items = [{"label": "Home", "url": "/workspaces"}, {"label": owner ~ "/" ~ repo, "url": None}] %} +{% set page_icon = "🔗" %} +{% set right_actions = '⚙' %} +{% include '_header.html' %} {% endblock %} {% block content %} diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html index f8bd1d8..b281808 100644 --- a/app/templates/local_workspace.html +++ b/app/templates/local_workspace.html @@ -4,20 +4,9 @@ {% block page_icon %}📁{% endblock %} {% block topbar %} -
- -
- - {% if breadcrumb %} - {% for b in breadcrumb %} - / {{ b.name }} - {% endfor %} - {% endif %} - -
-
+{% set page_icon = "📁" %} +{% set page_title = workspace_name %} +{% include '_header.html' %} {% endblock %} {% block content %} diff --git a/app/templates/page_editor.html b/app/templates/page_editor.html index c5fac7b..10edb5e 100644 --- a/app/templates/page_editor.html +++ b/app/templates/page_editor.html @@ -1,13 +1,9 @@ {% extends "base.html" %} {% block page_icon %}📄{% endblock %} {% block page_title %}{{ page.title }}{% endblock %} {% block topbar %} -
- -
- {{ page.title }} -
-
+{% set page_icon = "📄" %} +{% set page_title = page.title %} +{% set right_actions = 'Edited just now' %} +{% include '_header.html' %} {% endblock %} {% block content %}
diff --git a/app/templates/settings.html b/app/templates/settings.html index f86bae4..ae19065 100644 --- a/app/templates/settings.html +++ b/app/templates/settings.html @@ -4,14 +4,9 @@ {% block page_icon %}⚙️{% endblock %} {% block topbar %} -
- -
- ⚙️ Settings -
-
+{% set page_icon = "⚙" %} +{% set page_title = "Settings" %} +{% include '_header.html' %} {% endblock %} {% block content %} diff --git a/app/templates/workspace.html b/app/templates/workspace.html index 067db61..f4579d7 100644 --- a/app/templates/workspace.html +++ b/app/templates/workspace.html @@ -4,19 +4,10 @@ {% block page_icon %}🏠{% endblock %} {% block topbar %} -
- -
- Workspace - Projects -
-
- - -
-
+{% set page_icon = "🏠" %} +{% set page_title = "Workspace — Projects" %} +{% set right_actions = '🔑⚙' %} +{% include '_header.html' %} {% endblock %} {% block content %} diff --git a/app/templates/workspaces.html b/app/templates/workspaces.html index 508e107..f18541a 100644 --- a/app/templates/workspaces.html +++ b/app/templates/workspaces.html @@ -4,18 +4,10 @@ {% block page_icon %}🏠{% endblock %} {% block topbar %} -
- -
- Home - Workspaces -
-
- -
-
+{% set breadcrumb_items = [{"label": "Home", "url": "/workspaces"}, {"label": "Workspaces", "url": None}] %} +{% set page_icon = "🏠" %} +{% set right_actions = '🔑⚙' %} +{% include '_header.html' %} {% endblock %} {% block content %} diff --git a/static/css/app.css b/static/css/app.css index 7d1eec9..d40e5f6 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -807,6 +807,104 @@ input, select, textarea { font-family: inherit; color: inherit; } color: var(--text-secondary); } +/* ── Unified Header Breadcrumb ── */ +.header-breadcrumb { + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + overflow: hidden; + flex: 1; + min-width: 0; +} + +.header-page-icon { + font-size: 16px; + flex-shrink: 0; + margin-right: 2px; +} + +.breadcrumb-link { + color: var(--text-secondary); + text-decoration: none; + white-space: nowrap; + flex-shrink: 0; + padding: 2px 4px; + border-radius: 4px; + transition: background 100ms, color 100ms; +} + +.breadcrumb-link:hover { + background: var(--bg-hover); + color: var(--text-primary); +} + +.breadcrumb-link.disabled { + cursor: default; + opacity: 0.6; +} + +.breadcrumb-sep { + color: var(--text-tertiary); + flex-shrink: 0; + font-size: 12px; + margin: 0 1px; +} + +.breadcrumb-current { + color: var(--text-primary); + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.header-actions { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; +} + +/* ── Dropdown panel (reusable) ── */ +.dropdown-panel { + position: absolute; + display: none; + background: var(--bg-secondary); + border: 1px solid var(--border-strong); + border-radius: 8px; + box-shadow: 0 8px 24px rgba(0,0,0,.4); + z-index: 1000; + padding: 4px; + min-width: 160px; +} + +.dropdown-panel.visible { + display: block; +} + +.dropdown-option { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 10px; + border-radius: 4px; + cursor: pointer; + font-size: 13px; + color: var(--text-primary); + white-space: nowrap; +} + +.dropdown-option:hover { + background: var(--bg-hover); +} + +.option-icon { + font-size: 16px; + width: 20px; + text-align: center; +} + .topbar-breadcrumb a:hover { color: var(--text-primary); }