Add permanent responsive role navigation and breadcrumbs

app/ui/templates/components/breadcrumbs.html

@@ -0,0 +1,21 @@
+{% set crumb_path = request.url.path %}
+{% set crumb_parts = crumb_path.strip('/').split('/') if crumb_path != '/' else [] %}
+{% set crumb_labels = {
+  'system-admin':'System Administration','firm-admin':'Firm Administration','partner':'Partner','manager':'Manager','employee':'Employee','employees':'Team','consultant':'Consultant','consultants':'Consultants','client':'Client','clients':'Clients','services':'Services','engagements':'Engagements','documents':'Documents','billing':'Billing','system-settings':'Firm Setup','users':'Users','rbac':'Roles & Permissions','roles':'Roles','branches':'Branches','financial-years':'Financial Years','audit-logs':'Audit Logs','alerts':'Alerts','work':'Work','attendance':'Attendance','leave':'Leave','profile':'Profile','dashboard':'Dashboard','reviews':'Reviews','compliance':'Compliance','messages':'Messages','imports':'Imports','import':'Import','export':'Export','new':'New','edit':'Edit','settings':'Settings','domains':'Domains','email':'Email','aqmm':'AQMM','peer-review':'Peer Review','evidence':'Evidence'
+} %}
+<div id="af-page-context" class="mb-5 rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-soft" data-af-page-context>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <nav aria-label="Breadcrumb" class="min-w-0 overflow-x-auto">
+      <ol class="flex min-w-max items-center gap-2 text-xs text-slate-500">
+        <li><a href="/workspaces" class="font-semibold text-slate-600 hover:text-brand-700">Home</a></li>
+        {% for part in crumb_parts %}
+          {% set upto = '/' ~ '/'.join(crumb_parts[:loop.index]) %}
+          {% set label = crumb_labels.get(part, part.replace('-', ' ')|title) %}
+          <li aria-hidden="true" class="text-slate-300">›</li>
+          <li>{% if not loop.last %}<a href="{{ upto }}" class="hover:text-brand-700">{{ label }}</a>{% else %}<span class="font-semibold text-slate-800" aria-current="page">{{ title or label }}</span>{% endif %}</li>
+        {% endfor %}
+      </ol>
+    </nav>
+    <div id="af-shared-back-slot" class="shrink-0"></div>
+  </div>
+</div>