From 4e900be128afeab3f86b46bf1ca4ad15a0c9ddd0 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sun, 22 Dec 2024 22:30:16 -0800
Subject: [PATCH] ui: Show breadcrumbs on deeper pages

- Don't show them on section pages: home, apps, system and help pages.

- Tweak the appearance so that home icon is bigger, spacing between crumbs is
larger and to use '>' as separator.

- Change the name of the help menu item to show the value in breadcrumbs.

- Change the URLs for anchors in the help page so that they don't appear as part
of the breadcrumbs.

Tests:

- Section pages: home, apps, system and help pages don't have breadcrumbs.

- Visit various pages. Breadcrumbs are shown and all the links in the
breadcrumbs work as expected.

- Mobile view looks good.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 plinth/modules/help/__init__.py    |  2 +-
 plinth/templates/base.html         |  2 ++
 plinth/templates/breadcrumbs.html  | 25 +++++++++++++++++++++++++
 plinth/urls.py                     | 11 +++++------
 static/themes/default/css/main.css | 13 +++++++++++++
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 plinth/templates/breadcrumbs.html

diff --git a/plinth/modules/help/__init__.py b/plinth/modules/help/__init__.py
index e634df881..f8582a528 100644
--- a/plinth/modules/help/__init__.py
+++ b/plinth/modules/help/__init__.py
@@ -30,7 +30,7 @@ class HelpApp(app_module.App):
                                is_essential=True)
         self.add(info)
 
-        menu_item = menu.Menu('menu-help', _('Documentation'), None, 'fa-book',
+        menu_item = menu.Menu('menu-help', _('Help'), None, 'fa-book',
                               'help:index', parent_url_name='index')
         self.add(menu_item)
         menu_item = menu.Menu('menu-help-manual',
diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index c1b274648..c57ab5faa 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -252,6 +252,8 @@
         {% block content_row %}
             {% include 'messages.html' %}
 
+            {% include 'breadcrumbs.html' %}
+
             {% block content %}
               {# main content goes here #}
             {% endblock %}
diff --git a/plinth/templates/breadcrumbs.html b/plinth/templates/breadcrumbs.html
new file mode 100644
index 000000000..1f82c72ed
--- /dev/null
+++ b/plinth/templates/breadcrumbs.html
@@ -0,0 +1,25 @@
+{% comment %}
+# SPDX-License-Identifier: AGPL-3.0-or-later
+{% endcomment %}
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    {% for url, breadcrumb in breadcrumbs.items reversed %}
+      {% if breadcrumb.is_active %}
+        <li class="breadcrumb-item active" aria-current="page">
+          {{ breadcrumb.name }}
+        </li>
+      {% else %}
+        <li class="breadcrumb-item">
+          <a href="{{ url }}">
+            {% if breadcrumb.url_name == 'index' %}
+              <span class="fa fa-home"></span>
+            {% else %}
+              {{ breadcrumb.name }}
+            {% endif %}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ol>
+</nav>
diff --git a/plinth/urls.py b/plinth/urls.py
index c53710caf..a1bc7bfb1 100644
--- a/plinth/urls.py
+++ b/plinth/urls.py
@@ -9,12 +9,11 @@ from stronghold.decorators import public
 from . import views
 
 system_urlpatterns = [
-    re_path(r'^sys/#visibility$', views.system_index, name='visibility'),
-    re_path(r'^sys/#data$', views.system_index, name='data'),
-    re_path(r'^sys/#system$', views.system_index, name='system'),
-    re_path(r'^sys/#security$', views.system_index, name='security'),
-    re_path(r'^sys/#administration$', views.system_index,
-            name='administration'),
+    re_path(r'^sys/$', views.system_index, name='visibility'),
+    re_path(r'^sys/$', views.system_index, name='data'),
+    re_path(r'^sys/$', views.system_index, name='system'),
+    re_path(r'^sys/$', views.system_index, name='security'),
+    re_path(r'^sys/$', views.system_index, name='administration'),
 ]
 
 urlpatterns = [
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 9d4b9e662..1e9a8813f 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -554,6 +554,19 @@ footer {
     border-bottom: var(--freedombox-navbar-color) 3px solid;
 }
 
+/* Breadcrumbs */
+.breadcrumb-item {
+    --bs-breadcrumb-divider: ">";
+}
+
+.breadcrumb-item .fa-home {
+    font-size: 1.5rem;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+    margin: 0 0.5rem;
+}
+
 /* Cards in Index, Apps, System and Help pages */
 .card-list {
     display: flex;