From ecb08e96ca089a23924078d40520e082351f9e05 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Wed, 22 Jul 2026 18:26:10 +0300
Subject: [PATCH 01/21] feat: add label structure navigator

---
 enferno/admin/templates/nav-bar.html          |  19 ++
 enferno/admin/views/labels.py                 |   2 +-
 enferno/static/css/app.css                    |   9 +
 .../js/components/LabelStructureNavigator.js  | 225 ++++++++++++++++++
 enferno/static/js/mixins/global-mixin.js      |   1 +
 enferno/templates/layout.html                 |   1 +
 tests/test_label_tree.py                      |  64 +++++
 7 files changed, 320 insertions(+), 1 deletion(-)
 create mode 100644 enferno/static/js/components/LabelStructureNavigator.js
 create mode 100644 tests/test_label_tree.py

diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index e7c36c8ac..623a8d4e7 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -11,6 +11,25 @@
   <v-spacer></v-spacer>
 
   <template v-slot:append>
+    {% if current_user.roles_in(['Admin', 'Mod', 'DA']) %}
+    <label-structure-navigator
+      :can-manage="{{ current_user.roles_in(['Admin', 'Mod'])|tojson }}"
+      :translations='{{ {
+        "labelStructure": _("Label Structure"),
+        "readOnly": _("Read only"),
+        "search": _("Search labels"),
+        "close": _("Close"),
+        "loadError": _("Could not load labels"),
+        "retry": _("Retry"),
+        "noLabels": _("No labels found"),
+        "manageLabels": _("Manage Labels"),
+        "bulletins": _("Bulletins"),
+        "actors": _("Actors"),
+        "incidents": _("Incidents"),
+        "offline": _("Offline")
+      }|tojson }}'
+    ></label-structure-navigator>
+    {% endif %}
     <update-banner></update-banner>
     {% if config.OCR_PROVIDER == 'google_vision' %}
     <v-tooltip location="bottom">
diff --git a/enferno/admin/views/labels.py b/enferno/admin/views/labels.py
index dddfabcbe..cdfb0ca4f 100644
--- a/enferno/admin/views/labels.py
+++ b/enferno/admin/views/labels.py
@@ -108,7 +108,7 @@ def api_labels() -> Response:
 
 
 @admin.route("/api/labels/tree")
-@roles_accepted("Admin", "Mod")
+@roles_accepted("Admin", "Mod", "DA")
 def api_labels_tree() -> Response:
     """Return labels as nested tree structure for admin tree view."""
     verified_param = request.args.get("verified", None)
diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 4db89966f..97700bbd1 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -759,6 +759,15 @@ div.jsondiffpatch-child-node-type-array:after {
     max-height: calc(100vh - 80px - 0.75rem);
 }
 
+.label-structure-panel {
+    width: min(430px, calc(100vw - 24px));
+}
+
+.label-structure-tree {
+    max-height: min(65vh, 560px);
+    overflow-y: auto;
+}
+
 
 /* steppers enhancements */
 .v-stepper > .v-window {
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
new file mode 100644
index 000000000..4a9cfa162
--- /dev/null
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -0,0 +1,225 @@
+const LabelStructureNavigator = Vue.defineComponent({
+  props: {
+    canManage: {
+      type: Boolean,
+      default: false,
+    },
+    translations: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      closeTimer: null,
+      error: false,
+      loaded: false,
+      loading: false,
+      menuOpen: false,
+      openTimer: null,
+      opened: [],
+      pinned: false,
+      query: '',
+      treeItems: [],
+    };
+  },
+  computed: {
+    filteredItems() {
+      const query = this.query.trim().toLocaleLowerCase();
+      if (!query) return this.treeItems;
+      return this.filterTree(this.treeItems, query);
+    },
+  },
+  watch: {
+    menuOpen(open) {
+      if (open) {
+        this.loadTree();
+      } else {
+        this.pinned = false;
+      }
+    },
+    query(value) {
+      if (value.trim()) this.opened = this.collectParentIds(this.filteredItems);
+    },
+  },
+  beforeUnmount() {
+    this.clearTimers();
+  },
+  methods: {
+    clearTimers() {
+      clearTimeout(this.openTimer);
+      clearTimeout(this.closeTimer);
+    },
+    collectParentIds(items) {
+      return items.flatMap((item) => [
+        ...(item.children?.length ? [item.id] : []),
+        ...this.collectParentIds(item.children || []),
+      ]);
+    },
+    filterTree(items, query) {
+      return items.reduce((matches, item) => {
+        const children = this.filterTree(item.children || [], query);
+        const title = `${item.title || ''} ${item.title_ar || ''}`.toLocaleLowerCase();
+
+        if (title.includes(query)) {
+          matches.push(item);
+        } else if (children.length) {
+          matches.push({...item, children});
+        }
+
+        return matches;
+      }, []);
+    },
+    holdOpen() {
+      this.clearTimers();
+    },
+    preview() {
+      this.clearTimers();
+      if (this.menuOpen) return;
+      this.openTimer = setTimeout(() => {
+        this.menuOpen = true;
+      }, 250);
+    },
+    scheduleClose() {
+      clearTimeout(this.closeTimer);
+      if (this.pinned) return;
+      this.closeTimer = setTimeout(() => {
+        this.menuOpen = false;
+      }, 300);
+    },
+    togglePinned() {
+      this.clearTimers();
+      if (this.menuOpen && this.pinned) {
+        this.menuOpen = false;
+        return;
+      }
+      this.pinned = true;
+      this.menuOpen = true;
+    },
+    async loadTree() {
+      if (this.loaded || this.loading) return;
+
+      this.error = false;
+      this.loading = true;
+      try {
+        const response = await api.get('/admin/api/labels/tree');
+        this.treeItems = response.data.items;
+        this.loaded = true;
+      } catch (_error) {
+        this.error = true;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  template: `
+    <v-menu
+      v-model="menuOpen"
+      :close-on-content-click="false"
+      :open-on-click="false"
+      location="bottom end"
+      offset="8"
+    >
+      <template #activator="{ props }">
+        <v-btn
+          v-bind="props"
+          icon="mdi-file-tree-outline"
+          :aria-label="translations.labelStructure"
+          :aria-expanded="menuOpen"
+          :title="translations.labelStructure"
+          @click.stop="togglePinned"
+          @focus="preview"
+          @mouseenter="preview"
+          @mouseleave="scheduleClose"
+        ></v-btn>
+      </template>
+
+      <v-card
+        class="label-structure-panel"
+        @focusin="holdOpen"
+        @focusout="scheduleClose"
+        @mouseenter="holdOpen"
+        @mouseleave="scheduleClose"
+      >
+        <v-card-title class="d-flex align-center ga-2 pe-2">
+          <v-icon icon="mdi-file-tree-outline"></v-icon>
+          <span>{{ translations.labelStructure }}</span>
+          <v-chip size="x-small" variant="tonal">{{ translations.readOnly }}</v-chip>
+          <v-spacer></v-spacer>
+          <v-btn
+            :aria-label="translations.close"
+            icon="mdi-close"
+            size="small"
+            variant="text"
+            @click="menuOpen = false"
+          ></v-btn>
+        </v-card-title>
+
+        <v-card-text class="pb-2">
+          <v-text-field
+            v-model="query"
+            :label="translations.search"
+            clearable
+            density="compact"
+            hide-details
+            prepend-inner-icon="mdi-magnify"
+            variant="outlined"
+          ></v-text-field>
+        </v-card-text>
+
+        <div class="label-structure-tree">
+          <div v-if="loading" class="d-flex justify-center pa-8">
+            <v-progress-circular indeterminate></v-progress-circular>
+          </div>
+
+          <v-alert v-else-if="error" class="ma-3" type="error" variant="tonal">
+            {{ translations.loadError }}
+            <template #append>
+              <v-btn size="small" variant="text" @click="loadTree">{{ translations.retry }}</v-btn>
+            </template>
+          </v-alert>
+
+          <div v-else-if="loaded && !filteredItems.length" class="pa-6 text-center text-medium-emphasis">
+            {{ translations.noLabels }}
+          </div>
+
+          <v-treeview
+            v-else
+            v-model:opened="opened"
+            :items="filteredItems"
+            density="compact"
+            item-children="children"
+            item-title="title"
+            item-value="id"
+            open-on-click
+          >
+            <template #title="{ item }">
+              <div class="d-flex flex-column py-1">
+                <span>{{ item.title }}</span>
+                <span v-if="item.title_ar" class="text-caption text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
+              </div>
+            </template>
+            <template #prepend="{ item }">
+              <v-icon :icon="item.children?.length ? 'mdi-folder-outline' : 'mdi-label-outline'" size="small"></v-icon>
+            </template>
+            <template #append="{ item }">
+              <div class="d-flex ga-1 ms-2">
+                <v-chip v-if="item.for_bulletin" :title="translations.bulletins" size="x-small">B</v-chip>
+                <v-chip v-if="item.for_actor" :title="translations.actors" size="x-small">A</v-chip>
+                <v-chip v-if="item.for_incident" :title="translations.incidents" size="x-small">I</v-chip>
+                <v-chip v-if="item.for_offline" :title="translations.offline" size="x-small">O</v-chip>
+              </div>
+            </template>
+          </v-treeview>
+        </div>
+
+        <v-card-actions v-if="canManage" class="border-t-sm">
+          <v-spacer></v-spacer>
+          <v-btn href="/admin/labels/" prepend-icon="mdi-cog-outline" variant="text">
+            {{ translations.manageLabels }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-menu>
+  `,
+});
diff --git a/enferno/static/js/mixins/global-mixin.js b/enferno/static/js/mixins/global-mixin.js
index 0858050a3..c741227e7 100644
--- a/enferno/static/js/mixins/global-mixin.js
+++ b/enferno/static/js/mixins/global-mixin.js
@@ -5,6 +5,7 @@ const globalMixin = {
     'Toast': Toast,
     'ProfileDropdown': ProfileDropdown,
     'UpdateBanner': UpdateBanner,
+    'LabelStructureNavigator': LabelStructureNavigator,
   },
   data: () => ({
     snackbar: false,
diff --git a/enferno/templates/layout.html b/enferno/templates/layout.html
index cae303ec5..f827a0cc2 100644
--- a/enferno/templates/layout.html
+++ b/enferno/templates/layout.html
@@ -136,6 +136,7 @@
 </script>
 <script src="/static/js/components/ProfileDropdown.js?v={{ config.VERSION }}"></script>
 <script src="/static/js/components/UpdateBanner.js?v={{ config.VERSION }}"></script>
+<script src="/static/js/components/LabelStructureNavigator.js?v={{ config.VERSION }}"></script>
 <script src="/static/js/components/NotificationsList.js?v={{ config.VERSION }}"></script>
 <script src="/static/js/components/ConfirmDialog.js?v={{ config.VERSION }}"></script>
 <script src="/static/js/components/Toast.js?v={{ config.VERSION }}"></script>
diff --git a/tests/test_label_tree.py b/tests/test_label_tree.py
new file mode 100644
index 000000000..ebe5321cd
--- /dev/null
+++ b/tests/test_label_tree.py
@@ -0,0 +1,64 @@
+import pytest
+
+from enferno.admin.models import Label
+
+
+@pytest.mark.parametrize(
+    ("client_fixture", "expected_status"),
+    [
+        ("admin_client", 200),
+        ("mod_client", 200),
+        ("da_client", 200),
+        ("roled_client", 403),
+        ("anonymous_client", 302),
+    ],
+)
+def test_label_tree_access_by_role(request, client_fixture, expected_status):
+    client = request.getfixturevalue(client_fixture)
+
+    response = client.get("/admin/api/labels/tree")
+
+    assert response.status_code == expected_status
+    if expected_status == 200:
+        assert isinstance(response.json["data"]["items"], list)
+
+
+def test_label_tree_includes_arabic_titles(admin_client, session):
+    label = Label(title="Detention", title_ar="الاحتجاز")
+    session.add(label)
+    session.commit()
+    label_id = label.id
+
+    response = admin_client.get("/admin/api/labels/tree")
+
+    assert response.status_code == 200
+    item = next(item for item in response.json["data"]["items"] if item["id"] == label_id)
+    assert item["title_ar"] == "الاحتجاز"
+
+
+@pytest.mark.parametrize(
+    ("client_fixture", "can_manage"),
+    [
+        ("admin_client", "true"),
+        ("mod_client", "true"),
+        ("da_client", "false"),
+    ],
+)
+def test_label_navigator_is_rendered_for_label_assignment_roles(
+    request, client_fixture, can_manage
+):
+    client = request.getfixturevalue(client_fixture)
+
+    response = client.get("/", follow_redirects=True)
+
+    assert response.status_code == 200
+    html = response.get_data(as_text=True)
+    assert "<label-structure-navigator" in html
+    assert f':can-manage="{can_manage}"' in html
+
+
+def test_label_navigator_is_hidden_from_other_roles(roled_client):
+    response = roled_client.get("/", follow_redirects=True)
+
+    assert response.status_code == 200
+    assert "<label-structure-navigator" not in response.get_data(as_text=True)

From 15557f74d2f863aaab153616c2285ea402c50a68 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Wed, 22 Jul 2026 21:18:02 +0300
Subject: [PATCH 02/21] style: compact label navigator

---
 enferno/static/css/app.css                    | 40 ++++++++++++++++++-
 .../js/components/LabelStructureNavigator.js  | 10 ++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 97700bbd1..3fd4763c8 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -760,7 +760,18 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-panel {
-    width: min(430px, calc(100vw - 24px));
+    width: min(390px, calc(100vw - 24px));
+    font-size: 13px;
+}
+
+.label-structure-panel .v-card-title {
+    min-height: 42px;
+    font-size: 1rem;
+}
+
+.label-structure-panel .v-field,
+.label-structure-panel .v-btn {
+    font-size: 13px;
 }
 
 .label-structure-tree {
@@ -768,6 +779,33 @@ div.jsondiffpatch-child-node-type-array:after {
     overflow-y: auto;
 }
 
+.label-structure-tree .v-list-item {
+    min-height: 30px;
+    padding-inline: 8px;
+}
+
+.label-structure-tree .v-list-item-title,
+.label-structure-title {
+    font-size: 13px;
+    line-height: 1.15rem;
+}
+
+.label-structure-title-ar {
+    font-size: 11px;
+    line-height: 1rem;
+}
+
+.label-structure-tree .v-chip {
+    height: 18px;
+    padding-inline: 5px;
+    font-size: 10px;
+}
+
+.label-structure-panel .v-card-actions {
+    min-height: 38px;
+    padding: 3px 8px;
+}
+
 
 /* steppers enhancements */
 .v-stepper > .v-window {
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 4a9cfa162..54af8ade2 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -141,8 +141,8 @@ const LabelStructureNavigator = Vue.defineComponent({
         @mouseenter="holdOpen"
         @mouseleave="scheduleClose"
       >
-        <v-card-title class="d-flex align-center ga-2 pe-2">
-          <v-icon icon="mdi-file-tree-outline"></v-icon>
+        <v-card-title class="d-flex align-center ga-2 py-2 pe-2">
+          <v-icon icon="mdi-file-tree-outline" size="small"></v-icon>
           <span>{{ translations.labelStructure }}</span>
           <v-chip size="x-small" variant="tonal">{{ translations.readOnly }}</v-chip>
           <v-spacer></v-spacer>
@@ -155,7 +155,7 @@ const LabelStructureNavigator = Vue.defineComponent({
           ></v-btn>
         </v-card-title>
 
-        <v-card-text class="pb-2">
+        <v-card-text class="px-3 py-2">
           <v-text-field
             v-model="query"
             :label="translations.search"
@@ -194,9 +194,9 @@ const LabelStructureNavigator = Vue.defineComponent({
             open-on-click
           >
             <template #title="{ item }">
-              <div class="d-flex flex-column py-1">
+              <div class="d-flex flex-column label-structure-title">
                 <span>{{ item.title }}</span>
-                <span v-if="item.title_ar" class="text-caption text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
+                <span v-if="item.title_ar" class="label-structure-title-ar text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
               </div>
             </template>
             <template #prepend="{ item }">

From d3ab58e11e9c9c54501cf7b83c4b78a3feade7b7 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Thu, 23 Jul 2026 19:27:33 +0300
Subject: [PATCH 03/21] style: simplify label tree rows

---
 enferno/static/js/components/LabelStructureNavigator.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 54af8ade2..642f3b91c 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -199,9 +199,6 @@ const LabelStructureNavigator = Vue.defineComponent({
                 <span v-if="item.title_ar" class="label-structure-title-ar text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
               </div>
             </template>
-            <template #prepend="{ item }">
-              <v-icon :icon="item.children?.length ? 'mdi-folder-outline' : 'mdi-label-outline'" size="small"></v-icon>
-            </template>
             <template #append="{ item }">
               <div class="d-flex ga-1 ms-2">
                 <v-chip v-if="item.for_bulletin" :title="translations.bulletins" size="x-small">B</v-chip>

From 076e0df77ddb3686c37e58412a1194204736fffe Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 13:42:04 +0300
Subject: [PATCH 04/21] fix(labels): accept path fields the edit form sends
 back

---
 enferno/admin/validation/models.py |  3 +++
 tests/test_lookup_crud.py          | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/enferno/admin/validation/models.py b/enferno/admin/validation/models.py
index c03ce2eeb..32f740122 100644
--- a/enferno/admin/validation/models.py
+++ b/enferno/admin/validation/models.py
@@ -829,6 +829,9 @@ class LabelValidationModel(StrictValidationModel):
     # sent by tree view edit (build_tree node shape), not used by from_json
     parent_label_id: Optional[int] = None
     children: Optional[List] = None
+    # computed by to_dict for hierarchy display, not used by from_json
+    path: Optional[str] = None
+    path_ar: Optional[str] = None
 
 
 class LabelRequestModel(BaseValidationModel):
diff --git a/tests/test_lookup_crud.py b/tests/test_lookup_crud.py
index 66f453e03..9acc4a4b4 100644
--- a/tests/test_lookup_crud.py
+++ b/tests/test_lookup_crud.py
@@ -518,6 +518,26 @@ def test_lookup_search_by_translated_title(request, session, entity, list_url, f
     assert item.id in ids
 
 
+def test_label_update_accepts_its_own_serialization(request, session):
+    """The edit form PUTs back what to_dict returned, path fields included."""
+    from enferno.admin.models import Label
+
+    parent = Label(title="Parent")
+    session.add(parent)
+    session.commit()
+    label = Label(title="Child", parent_label_id=parent.id)
+    session.add(label)
+    session.commit()
+
+    payload = label.to_dict()
+    assert "path" in payload and "path_ar" in payload
+    payload["title"] = "Renamed"
+
+    client = request.getfixturevalue("admin_client")
+    resp = client.put(f"/admin/api/label/{label.id}", json={"item": payload}, headers=HEADERS)
+    assert resp.status_code == 200
+
+
 def test_label_mode2_includes_translated_title_and_path(session):
     from enferno.admin.models import Label
 

From 56230e6c36445651a66b8afa68817f175df78d26 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 13:59:35 +0300
Subject: [PATCH 05/21] fix(labels): open the tree on click and mark
 grouping-only labels

---
 enferno/admin/templates/nav-bar.html          |  1 +
 .../js/components/LabelStructureNavigator.js  | 64 ++++---------------
 2 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index 623a8d4e7..bcea158bc 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -22,6 +22,7 @@
         "loadError": _("Could not load labels"),
         "retry": _("Retry"),
         "noLabels": _("No labels found"),
+        "categoryOnly": _("Grouping only, cannot be assigned"),
         "manageLabels": _("Manage Labels"),
         "bulletins": _("Bulletins"),
         "actors": _("Actors"),
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 642f3b91c..46ed9cdad 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -11,14 +11,11 @@ const LabelStructureNavigator = Vue.defineComponent({
   },
   data() {
     return {
-      closeTimer: null,
       error: false,
       loaded: false,
       loading: false,
       menuOpen: false,
-      openTimer: null,
       opened: [],
-      pinned: false,
       query: '',
       treeItems: [],
     };
@@ -32,24 +29,13 @@ const LabelStructureNavigator = Vue.defineComponent({
   },
   watch: {
     menuOpen(open) {
-      if (open) {
-        this.loadTree();
-      } else {
-        this.pinned = false;
-      }
+      if (open) this.loadTree();
     },
     query(value) {
       if (value.trim()) this.opened = this.collectParentIds(this.filteredItems);
     },
   },
-  beforeUnmount() {
-    this.clearTimers();
-  },
   methods: {
-    clearTimers() {
-      clearTimeout(this.openTimer);
-      clearTimeout(this.closeTimer);
-    },
     collectParentIds(items) {
       return items.flatMap((item) => [
         ...(item.children?.length ? [item.id] : []),
@@ -70,31 +56,8 @@ const LabelStructureNavigator = Vue.defineComponent({
         return matches;
       }, []);
     },
-    holdOpen() {
-      this.clearTimers();
-    },
-    preview() {
-      this.clearTimers();
-      if (this.menuOpen) return;
-      this.openTimer = setTimeout(() => {
-        this.menuOpen = true;
-      }, 250);
-    },
-    scheduleClose() {
-      clearTimeout(this.closeTimer);
-      if (this.pinned) return;
-      this.closeTimer = setTimeout(() => {
-        this.menuOpen = false;
-      }, 300);
-    },
-    togglePinned() {
-      this.clearTimers();
-      if (this.menuOpen && this.pinned) {
-        this.menuOpen = false;
-        return;
-      }
-      this.pinned = true;
-      this.menuOpen = true;
+    isCategory(item) {
+      return !(item.for_bulletin || item.for_actor || item.for_incident || item.for_offline);
     },
     async loadTree() {
       if (this.loaded || this.loading) return;
@@ -127,20 +90,10 @@ const LabelStructureNavigator = Vue.defineComponent({
           :aria-label="translations.labelStructure"
           :aria-expanded="menuOpen"
           :title="translations.labelStructure"
-          @click.stop="togglePinned"
-          @focus="preview"
-          @mouseenter="preview"
-          @mouseleave="scheduleClose"
         ></v-btn>
       </template>
 
-      <v-card
-        class="label-structure-panel"
-        @focusin="holdOpen"
-        @focusout="scheduleClose"
-        @mouseenter="holdOpen"
-        @mouseleave="scheduleClose"
-      >
+      <v-card class="label-structure-panel">
         <v-card-title class="d-flex align-center ga-2 py-2 pe-2">
           <v-icon icon="mdi-file-tree-outline" size="small"></v-icon>
           <span>{{ translations.labelStructure }}</span>
@@ -193,9 +146,16 @@ const LabelStructureNavigator = Vue.defineComponent({
             item-value="id"
             open-on-click
           >
+            <template #prepend="{ item }">
+              <v-icon
+                :icon="isCategory(item) ? 'mdi-folder-outline' : 'mdi-label'"
+                :title="isCategory(item) ? translations.categoryOnly : ''"
+                size="small"
+              ></v-icon>
+            </template>
             <template #title="{ item }">
               <div class="d-flex flex-column label-structure-title">
-                <span>{{ item.title }}</span>
+                <span :class="{'text-medium-emphasis': isCategory(item)}">{{ item.title }}</span>
                 <span v-if="item.title_ar" class="label-structure-title-ar text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
               </div>
             </template>

From e1af94612995e4bce0678e978bbb04c003a86d6a Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 14:02:28 +0300
Subject: [PATCH 06/21] fix(labels): let the activator open the label tree menu

---
 enferno/static/js/components/LabelStructureNavigator.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 46ed9cdad..e773451a7 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -79,7 +79,6 @@ const LabelStructureNavigator = Vue.defineComponent({
     <v-menu
       v-model="menuOpen"
       :close-on-content-click="false"
-      :open-on-click="false"
       location="bottom end"
       offset="8"
     >

From 13eb3f034e9977577954f8edcbc6f6cb2e70b282 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 14:07:27 +0300
Subject: [PATCH 07/21] style(labels): align the Arabic label line with the
 English one

---
 enferno/static/css/app.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 3fd4763c8..af47d4d96 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -793,6 +793,8 @@ div.jsondiffpatch-child-node-type-array:after {
 .label-structure-title-ar {
     font-size: 11px;
     line-height: 1rem;
+    /* dir=rtl keeps the bidi order correct; alignment follows the English line above */
+    text-align: left;
 }
 
 .label-structure-tree .v-chip {

From 37f53b580f3a6804fa67ea289cd1673cb870ccf2 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 15:27:48 +0300
Subject: [PATCH 08/21] fix(labels): distinguish retired labels from grouping
 nodes in the tree

---
 enferno/admin/templates/nav-bar.html          |  3 ++-
 .../js/components/LabelStructureNavigator.js  | 24 ++++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index bcea158bc..2957be82c 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -22,7 +22,8 @@
         "loadError": _("Could not load labels"),
         "retry": _("Retry"),
         "noLabels": _("No labels found"),
-        "categoryOnly": _("Grouping only, cannot be assigned"),
+        "groupingOnly": _("Grouping only, cannot be assigned"),
+        "retired": _("Retired, kept for existing records only"),
         "manageLabels": _("Manage Labels"),
         "bulletins": _("Bulletins"),
         "actors": _("Actors"),
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index e773451a7..7805cb899 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -56,8 +56,20 @@ const LabelStructureNavigator = Vue.defineComponent({
         return matches;
       }, []);
     },
-    isCategory(item) {
-      return !(item.for_bulletin || item.for_actor || item.for_incident || item.for_offline);
+    isAssignable(item) {
+      return Boolean(
+        item.for_bulletin || item.for_actor || item.for_incident || item.for_offline,
+      );
+    },
+    // not assignable + has children = a grouping node; without children it is a
+    // retired label that still carries historical tags
+    itemIcon(item) {
+      if (this.isAssignable(item)) return 'mdi-label';
+      return item.children?.length ? 'mdi-folder-outline' : 'mdi-label-off-outline';
+    },
+    itemIconHint(item) {
+      if (this.isAssignable(item)) return '';
+      return item.children?.length ? this.translations.groupingOnly : this.translations.retired;
     },
     async loadTree() {
       if (this.loaded || this.loading) return;
@@ -146,15 +158,11 @@ const LabelStructureNavigator = Vue.defineComponent({
             open-on-click
           >
             <template #prepend="{ item }">
-              <v-icon
-                :icon="isCategory(item) ? 'mdi-folder-outline' : 'mdi-label'"
-                :title="isCategory(item) ? translations.categoryOnly : ''"
-                size="small"
-              ></v-icon>
+              <v-icon :icon="itemIcon(item)" :title="itemIconHint(item)" size="small"></v-icon>
             </template>
             <template #title="{ item }">
               <div class="d-flex flex-column label-structure-title">
-                <span :class="{'text-medium-emphasis': isCategory(item)}">{{ item.title }}</span>
+                <span :class="{'text-medium-emphasis': !isAssignable(item)}">{{ item.title }}</span>
                 <span v-if="item.title_ar" class="label-structure-title-ar text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
               </div>
             </template>

From 933bbbedf73acb3220517126f7e78f2590425c03 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 15:35:25 +0300
Subject: [PATCH 09/21] feat(labels): pin the label tree as a side dock over
 the workspace

---
 enferno/static/css/app.css                    | 22 +++++++++-
 .../js/components/LabelStructureNavigator.js  | 41 ++++++++++---------
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index af47d4d96..876b2e405 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -775,10 +775,30 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-tree {
-    max-height: min(65vh, 560px);
+    flex: 1 1 auto;
     overflow-y: auto;
 }
 
+/* sits above Vuetify's overlay layer (2400) so it stays usable while a
+   fullscreen edit dialog is open */
+.label-structure-dock {
+    position: fixed;
+    top: 64px;
+    right: 0;
+    bottom: 0;
+    z-index: 2500;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0;
+}
+
+@media (max-width: 960px) {
+    .label-structure-dock {
+        width: 100vw;
+        top: 56px;
+    }
+}
+
 .label-structure-tree .v-list-item {
     min-height: 30px;
     padding-inline: 8px;
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 7805cb899..a4dc90be5 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -14,8 +14,8 @@ const LabelStructureNavigator = Vue.defineComponent({
       error: false,
       loaded: false,
       loading: false,
-      menuOpen: false,
-      opened: [],
+      menuOpen: localStorage.getItem('labelTreeDock') === 'open',
+      opened: JSON.parse(localStorage.getItem('labelTreeOpened') || '[]'),
       query: '',
       treeItems: [],
     };
@@ -29,12 +29,19 @@ const LabelStructureNavigator = Vue.defineComponent({
   },
   watch: {
     menuOpen(open) {
+      localStorage.setItem('labelTreeDock', open ? 'open' : 'closed');
       if (open) this.loadTree();
     },
+    opened(ids) {
+      localStorage.setItem('labelTreeOpened', JSON.stringify(ids));
+    },
     query(value) {
       if (value.trim()) this.opened = this.collectParentIds(this.filteredItems);
     },
   },
+  mounted() {
+    if (this.menuOpen) this.loadTree();
+  },
   methods: {
     collectParentIds(items) {
       return items.flatMap((item) => [
@@ -88,23 +95,18 @@ const LabelStructureNavigator = Vue.defineComponent({
     },
   },
   template: `
-    <v-menu
-      v-model="menuOpen"
-      :close-on-content-click="false"
-      location="bottom end"
-      offset="8"
-    >
-      <template #activator="{ props }">
-        <v-btn
-          v-bind="props"
-          icon="mdi-file-tree-outline"
-          :aria-label="translations.labelStructure"
-          :aria-expanded="menuOpen"
-          :title="translations.labelStructure"
-        ></v-btn>
-      </template>
+    <div>
+      <v-btn
+        icon="mdi-file-tree-outline"
+        :aria-label="translations.labelStructure"
+        :aria-expanded="menuOpen"
+        :color="menuOpen ? 'primary' : undefined"
+        :title="translations.labelStructure"
+        @click="menuOpen = !menuOpen"
+      ></v-btn>
 
-      <v-card class="label-structure-panel">
+      <teleport to="body">
+      <v-card v-if="menuOpen" class="label-structure-panel label-structure-dock" elevation="8">
         <v-card-title class="d-flex align-center ga-2 py-2 pe-2">
           <v-icon icon="mdi-file-tree-outline" size="small"></v-icon>
           <span>{{ translations.labelStructure }}</span>
@@ -184,6 +186,7 @@ const LabelStructureNavigator = Vue.defineComponent({
           </v-btn>
         </v-card-actions>
       </v-card>
-    </v-menu>
+      </teleport>
+    </div>
   `,
 });

From ab27898cfae499cad7c8d7e93d7b497c0f27c0f2 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 15:37:57 +0300
Subject: [PATCH 10/21] Revert "feat(labels): pin the label tree as a side dock
 over the workspace"

This reverts commit 933bbbedf73acb3220517126f7e78f2590425c03.
---
 enferno/static/css/app.css                    | 22 +---------
 .../js/components/LabelStructureNavigator.js  | 41 +++++++++----------
 2 files changed, 20 insertions(+), 43 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 876b2e405..af47d4d96 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -775,30 +775,10 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-tree {
-    flex: 1 1 auto;
+    max-height: min(65vh, 560px);
     overflow-y: auto;
 }
 
-/* sits above Vuetify's overlay layer (2400) so it stays usable while a
-   fullscreen edit dialog is open */
-.label-structure-dock {
-    position: fixed;
-    top: 64px;
-    right: 0;
-    bottom: 0;
-    z-index: 2500;
-    display: flex;
-    flex-direction: column;
-    border-radius: 0;
-}
-
-@media (max-width: 960px) {
-    .label-structure-dock {
-        width: 100vw;
-        top: 56px;
-    }
-}
-
 .label-structure-tree .v-list-item {
     min-height: 30px;
     padding-inline: 8px;
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index a4dc90be5..7805cb899 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -14,8 +14,8 @@ const LabelStructureNavigator = Vue.defineComponent({
       error: false,
       loaded: false,
       loading: false,
-      menuOpen: localStorage.getItem('labelTreeDock') === 'open',
-      opened: JSON.parse(localStorage.getItem('labelTreeOpened') || '[]'),
+      menuOpen: false,
+      opened: [],
       query: '',
       treeItems: [],
     };
@@ -29,19 +29,12 @@ const LabelStructureNavigator = Vue.defineComponent({
   },
   watch: {
     menuOpen(open) {
-      localStorage.setItem('labelTreeDock', open ? 'open' : 'closed');
       if (open) this.loadTree();
     },
-    opened(ids) {
-      localStorage.setItem('labelTreeOpened', JSON.stringify(ids));
-    },
     query(value) {
       if (value.trim()) this.opened = this.collectParentIds(this.filteredItems);
     },
   },
-  mounted() {
-    if (this.menuOpen) this.loadTree();
-  },
   methods: {
     collectParentIds(items) {
       return items.flatMap((item) => [
@@ -95,18 +88,23 @@ const LabelStructureNavigator = Vue.defineComponent({
     },
   },
   template: `
-    <div>
-      <v-btn
-        icon="mdi-file-tree-outline"
-        :aria-label="translations.labelStructure"
-        :aria-expanded="menuOpen"
-        :color="menuOpen ? 'primary' : undefined"
-        :title="translations.labelStructure"
-        @click="menuOpen = !menuOpen"
-      ></v-btn>
+    <v-menu
+      v-model="menuOpen"
+      :close-on-content-click="false"
+      location="bottom end"
+      offset="8"
+    >
+      <template #activator="{ props }">
+        <v-btn
+          v-bind="props"
+          icon="mdi-file-tree-outline"
+          :aria-label="translations.labelStructure"
+          :aria-expanded="menuOpen"
+          :title="translations.labelStructure"
+        ></v-btn>
+      </template>
 
-      <teleport to="body">
-      <v-card v-if="menuOpen" class="label-structure-panel label-structure-dock" elevation="8">
+      <v-card class="label-structure-panel">
         <v-card-title class="d-flex align-center ga-2 py-2 pe-2">
           <v-icon icon="mdi-file-tree-outline" size="small"></v-icon>
           <span>{{ translations.labelStructure }}</span>
@@ -186,7 +184,6 @@ const LabelStructureNavigator = Vue.defineComponent({
           </v-btn>
         </v-card-actions>
       </v-card>
-      </teleport>
-    </div>
+    </v-menu>
   `,
 });

From bcd821cf0bb4ddff6fb132f4cab18961a089bcd0 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 15:51:04 +0300
Subject: [PATCH 11/21] feat(labels): open the label tree from the labels field
 inside entity dialogs

---
 enferno/admin/templates/admin/jsapi.jinja2     | 18 ++++++++++++++++++
 .../templates/admin/partials/actor_dialog.html |  4 +++-
 .../admin/partials/bulletin_dialog.html        |  5 +++--
 .../admin/partials/incident_dialog.html        |  4 +++-
 enferno/admin/templates/nav-bar.html           | 17 +----------------
 .../js/components/LabelStructureNavigator.js   | 10 +++++++++-
 6 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/enferno/admin/templates/admin/jsapi.jinja2 b/enferno/admin/templates/admin/jsapi.jinja2
index 25226b0ff..e7f3cd811 100644
--- a/enferno/admin/templates/admin/jsapi.jinja2
+++ b/enferno/admin/templates/admin/jsapi.jinja2
@@ -756,6 +756,24 @@ thisFieldIsRequired_: "{{ _('This field is required.') }}",
 pleaseEnterAValidNumber_: "{{ _('Please enter a valid number.') }}",
 
 
+}
+
+// shared by the label tree in the app bar and inside the entity dialogs
+var labelTreeTranslations = {
+    labelStructure: "{{ _('Label Structure') }}",
+    readOnly: "{{ _('Read only') }}",
+    search: "{{ _('Search labels') }}",
+    close: "{{ _('Close') }}",
+    loadError: "{{ _('Could not load labels') }}",
+    retry: "{{ _('Retry') }}",
+    noLabels: "{{ _('No labels found') }}",
+    manageLabels: "{{ _('Manage Labels') }}",
+    bulletins: "{{ _('Bulletins') }}",
+    actors: "{{ _('Actors') }}",
+    incidents: "{{ _('Incidents') }}",
+    offline: "{{ _('Offline') }}",
+    groupingOnly: "{{ _('Grouping only, cannot be assigned') }}",
+    retired: "{{ _('Retired, kept for existing records only') }}",
 }
 
     // add localized configurations for lists with static values
diff --git a/enferno/admin/templates/admin/partials/actor_dialog.html b/enferno/admin/templates/admin/partials/actor_dialog.html
index 1bfce7140..78d7d1c48 100644
--- a/enferno/admin/templates/admin/partials/actor_dialog.html
+++ b/enferno/admin/templates/admin/partials/actor_dialog.html
@@ -387,9 +387,10 @@
                                                     </v-card-text>
 
 
-                                                    <v-card-text>
+                                                    <v-card-text class="d-flex align-start ga-1">
                                                         <!-- Labels -->
                                                         <label-search-field
+                                                                class="flex-grow-1"
                                                                 v-model="profile.labels"
                                                                 :query-params="{ typ: 'for_actor', mode: 2 }"
                                                                 :multiple="true"
@@ -397,6 +398,7 @@
                                                                 :retain-search="true"
                                                                 label="{{ _('Labels') }}"
                                                         ></label-search-field>
+                                                        <label-structure-navigator variant="inline" :translations="labelTreeTranslations" class="mt-2"></label-structure-navigator>
                                                     </v-card-text>
                                                     <v-card-text>
                                                         <!-- Verified Labels -->
diff --git a/enferno/admin/templates/admin/partials/bulletin_dialog.html b/enferno/admin/templates/admin/partials/bulletin_dialog.html
index a22fb3790..942040246 100644
--- a/enferno/admin/templates/admin/partials/bulletin_dialog.html
+++ b/enferno/admin/templates/admin/partials/bulletin_dialog.html
@@ -111,8 +111,9 @@
                                         <div class="text-subtitle-2 mb-2 mt-4">{{ _('Public Description') }}</div>
                                         <tinymce-editor :init="tinyConfig" :key="descKey + '-public-description'" v-model="editedItem.public_description"></tinymce-editor>
                                     </div>
-                                    <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <label-search-field v-model="editedItem.labels" :query-params="{ typ: 'for_bulletin', mode: 2 }" :multiple="true" :show-copy-icon="advFeatures" :retain-search="true" label="{{ _('Labels') }}"></label-search-field>
+                                    <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2 d-flex align-start ga-1']">
+                                        <label-search-field class="flex-grow-1" v-model="editedItem.labels" :query-params="{ typ: 'for_bulletin', mode: 2 }" :multiple="true" :show-copy-icon="advFeatures" :retain-search="true" label="{{ _('Labels') }}"></label-search-field>
+                                        <label-structure-navigator variant="inline" :translations="labelTreeTranslations" class="mt-2"></label-structure-navigator>
                                     </div>
                                     <div v-else-if="isFieldActive(field, 'ver_labels')" :class="[fieldClass(field), 'px-3 py-2']">
                                         <label-search-field v-model="editedItem.verLabels"
diff --git a/enferno/admin/templates/admin/partials/incident_dialog.html b/enferno/admin/templates/admin/partials/incident_dialog.html
index daff62663..df3b00e46 100644
--- a/enferno/admin/templates/admin/partials/incident_dialog.html
+++ b/enferno/admin/templates/admin/partials/incident_dialog.html
@@ -64,14 +64,16 @@
                                         label="{{ _('Claimed Violations Categories') }}"
                                     ></search-field>
                                 </div>
-                                <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2']">
+                                <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2 d-flex align-start ga-1']">
                                     <label-search-field
+                                        class="flex-grow-1"
                                         v-model="editedItem.labels"
                                         :query-params="{ typ: 'for_incident', mode: 2 }"
                                         :multiple="true"
                                         :retain-search="true"
                                         label="{{ _('Labels') }}"
                                     ></label-search-field>
+                                    <label-structure-navigator variant="inline" :translations="labelTreeTranslations" class="mt-2"></label-structure-navigator>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'locations')" :class="[fieldClass(field), 'px-3 py-2']">
                                     <location-search-field
diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index 2957be82c..ff39a83b3 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -14,22 +14,7 @@
     {% if current_user.roles_in(['Admin', 'Mod', 'DA']) %}
     <label-structure-navigator
       :can-manage="{{ current_user.roles_in(['Admin', 'Mod'])|tojson }}"
-      :translations='{{ {
-        "labelStructure": _("Label Structure"),
-        "readOnly": _("Read only"),
-        "search": _("Search labels"),
-        "close": _("Close"),
-        "loadError": _("Could not load labels"),
-        "retry": _("Retry"),
-        "noLabels": _("No labels found"),
-        "groupingOnly": _("Grouping only, cannot be assigned"),
-        "retired": _("Retired, kept for existing records only"),
-        "manageLabels": _("Manage Labels"),
-        "bulletins": _("Bulletins"),
-        "actors": _("Actors"),
-        "incidents": _("Incidents"),
-        "offline": _("Offline")
-      }|tojson }}'
+      :translations="labelTreeTranslations"
     ></label-structure-navigator>
     {% endif %}
     <update-banner></update-banner>
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 7805cb899..1b497f7b2 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -4,6 +4,11 @@ const LabelStructureNavigator = Vue.defineComponent({
       type: Boolean,
       default: false,
     },
+    // 'appbar' anchors the panel to the toolbar, 'inline' to the field it sits next to
+    variant: {
+      type: String,
+      default: 'appbar',
+    },
     translations: {
       type: Object,
       required: true,
@@ -91,7 +96,7 @@ const LabelStructureNavigator = Vue.defineComponent({
     <v-menu
       v-model="menuOpen"
       :close-on-content-click="false"
-      location="bottom end"
+      :location="variant === 'inline' ? 'bottom start' : 'bottom end'"
       offset="8"
     >
       <template #activator="{ props }">
@@ -100,6 +105,9 @@ const LabelStructureNavigator = Vue.defineComponent({
           icon="mdi-file-tree-outline"
           :aria-label="translations.labelStructure"
           :aria-expanded="menuOpen"
+          :density="variant === 'inline' ? 'comfortable' : 'default'"
+          :size="variant === 'inline' ? 'small' : undefined"
+          :variant="variant === 'inline' ? 'text' : undefined"
           :title="translations.labelStructure"
         ></v-btn>
       </template>

From 23c7967c1b5b16a95fa493622705c42e41ccbb87 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 15:55:29 +0300
Subject: [PATCH 12/21] fix(labels): read tree translations from the window
 global

---
 enferno/admin/templates/admin/partials/actor_dialog.html    | 2 +-
 enferno/admin/templates/admin/partials/bulletin_dialog.html | 2 +-
 enferno/admin/templates/admin/partials/incident_dialog.html | 2 +-
 enferno/admin/templates/nav-bar.html                        | 2 +-
 enferno/static/js/components/LabelStructureNavigator.js     | 5 +----
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/enferno/admin/templates/admin/partials/actor_dialog.html b/enferno/admin/templates/admin/partials/actor_dialog.html
index 78d7d1c48..8066fd5d2 100644
--- a/enferno/admin/templates/admin/partials/actor_dialog.html
+++ b/enferno/admin/templates/admin/partials/actor_dialog.html
@@ -398,7 +398,7 @@
                                                                 :retain-search="true"
                                                                 label="{{ _('Labels') }}"
                                                         ></label-search-field>
-                                                        <label-structure-navigator variant="inline" :translations="labelTreeTranslations" class="mt-2"></label-structure-navigator>
+                                                        <label-structure-navigator variant="inline" class="mt-2"></label-structure-navigator>
                                                     </v-card-text>
                                                     <v-card-text>
                                                         <!-- Verified Labels -->
diff --git a/enferno/admin/templates/admin/partials/bulletin_dialog.html b/enferno/admin/templates/admin/partials/bulletin_dialog.html
index 942040246..9840deacc 100644
--- a/enferno/admin/templates/admin/partials/bulletin_dialog.html
+++ b/enferno/admin/templates/admin/partials/bulletin_dialog.html
@@ -113,7 +113,7 @@
                                     </div>
                                     <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2 d-flex align-start ga-1']">
                                         <label-search-field class="flex-grow-1" v-model="editedItem.labels" :query-params="{ typ: 'for_bulletin', mode: 2 }" :multiple="true" :show-copy-icon="advFeatures" :retain-search="true" label="{{ _('Labels') }}"></label-search-field>
-                                        <label-structure-navigator variant="inline" :translations="labelTreeTranslations" class="mt-2"></label-structure-navigator>
+                                        <label-structure-navigator variant="inline" class="mt-2"></label-structure-navigator>
                                     </div>
                                     <div v-else-if="isFieldActive(field, 'ver_labels')" :class="[fieldClass(field), 'px-3 py-2']">
                                         <label-search-field v-model="editedItem.verLabels"
diff --git a/enferno/admin/templates/admin/partials/incident_dialog.html b/enferno/admin/templates/admin/partials/incident_dialog.html
index df3b00e46..7640e9377 100644
--- a/enferno/admin/templates/admin/partials/incident_dialog.html
+++ b/enferno/admin/templates/admin/partials/incident_dialog.html
@@ -73,7 +73,7 @@
                                         :retain-search="true"
                                         label="{{ _('Labels') }}"
                                     ></label-search-field>
-                                    <label-structure-navigator variant="inline" :translations="labelTreeTranslations" class="mt-2"></label-structure-navigator>
+                                    <label-structure-navigator variant="inline" class="mt-2"></label-structure-navigator>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'locations')" :class="[fieldClass(field), 'px-3 py-2']">
                                     <location-search-field
diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index ff39a83b3..074344111 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -14,7 +14,7 @@
     {% if current_user.roles_in(['Admin', 'Mod', 'DA']) %}
     <label-structure-navigator
       :can-manage="{{ current_user.roles_in(['Admin', 'Mod'])|tojson }}"
-      :translations="labelTreeTranslations"
+     
     ></label-structure-navigator>
     {% endif %}
     <update-banner></update-banner>
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 1b497f7b2..20baaf48e 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -9,13 +9,10 @@ const LabelStructureNavigator = Vue.defineComponent({
       type: String,
       default: 'appbar',
     },
-    translations: {
-      type: Object,
-      required: true,
-    },
   },
   data() {
     return {
+      translations: window.labelTreeTranslations,
       error: false,
       loaded: false,
       loading: false,

From ce62335fde5625ea1b7c2e66d32c86291236e156 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 16:19:23 +0300
Subject: [PATCH 13/21] feat(labels): float the label tree as a draggable panel
 with its own toggle

---
 .../admin/partials/actor_dialog.html          |   4 +-
 .../admin/partials/bulletin_dialog.html       |   5 +-
 .../admin/partials/incident_dialog.html       |   4 +-
 enferno/static/css/app.css                    |  27 ++++-
 .../js/components/LabelStructureNavigator.js  | 110 +++++++++++++-----
 5 files changed, 108 insertions(+), 42 deletions(-)

diff --git a/enferno/admin/templates/admin/partials/actor_dialog.html b/enferno/admin/templates/admin/partials/actor_dialog.html
index 8066fd5d2..1bfce7140 100644
--- a/enferno/admin/templates/admin/partials/actor_dialog.html
+++ b/enferno/admin/templates/admin/partials/actor_dialog.html
@@ -387,10 +387,9 @@
                                                     </v-card-text>
 
 
-                                                    <v-card-text class="d-flex align-start ga-1">
+                                                    <v-card-text>
                                                         <!-- Labels -->
                                                         <label-search-field
-                                                                class="flex-grow-1"
                                                                 v-model="profile.labels"
                                                                 :query-params="{ typ: 'for_actor', mode: 2 }"
                                                                 :multiple="true"
@@ -398,7 +397,6 @@
                                                                 :retain-search="true"
                                                                 label="{{ _('Labels') }}"
                                                         ></label-search-field>
-                                                        <label-structure-navigator variant="inline" class="mt-2"></label-structure-navigator>
                                                     </v-card-text>
                                                     <v-card-text>
                                                         <!-- Verified Labels -->
diff --git a/enferno/admin/templates/admin/partials/bulletin_dialog.html b/enferno/admin/templates/admin/partials/bulletin_dialog.html
index 9840deacc..a22fb3790 100644
--- a/enferno/admin/templates/admin/partials/bulletin_dialog.html
+++ b/enferno/admin/templates/admin/partials/bulletin_dialog.html
@@ -111,9 +111,8 @@
                                         <div class="text-subtitle-2 mb-2 mt-4">{{ _('Public Description') }}</div>
                                         <tinymce-editor :init="tinyConfig" :key="descKey + '-public-description'" v-model="editedItem.public_description"></tinymce-editor>
                                     </div>
-                                    <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2 d-flex align-start ga-1']">
-                                        <label-search-field class="flex-grow-1" v-model="editedItem.labels" :query-params="{ typ: 'for_bulletin', mode: 2 }" :multiple="true" :show-copy-icon="advFeatures" :retain-search="true" label="{{ _('Labels') }}"></label-search-field>
-                                        <label-structure-navigator variant="inline" class="mt-2"></label-structure-navigator>
+                                    <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2']">
+                                        <label-search-field v-model="editedItem.labels" :query-params="{ typ: 'for_bulletin', mode: 2 }" :multiple="true" :show-copy-icon="advFeatures" :retain-search="true" label="{{ _('Labels') }}"></label-search-field>
                                     </div>
                                     <div v-else-if="isFieldActive(field, 'ver_labels')" :class="[fieldClass(field), 'px-3 py-2']">
                                         <label-search-field v-model="editedItem.verLabels"
diff --git a/enferno/admin/templates/admin/partials/incident_dialog.html b/enferno/admin/templates/admin/partials/incident_dialog.html
index 7640e9377..daff62663 100644
--- a/enferno/admin/templates/admin/partials/incident_dialog.html
+++ b/enferno/admin/templates/admin/partials/incident_dialog.html
@@ -64,16 +64,14 @@
                                         label="{{ _('Claimed Violations Categories') }}"
                                     ></search-field>
                                 </div>
-                                <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2 d-flex align-start ga-1']">
+                                <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2']">
                                     <label-search-field
-                                        class="flex-grow-1"
                                         v-model="editedItem.labels"
                                         :query-params="{ typ: 'for_incident', mode: 2 }"
                                         :multiple="true"
                                         :retain-search="true"
                                         label="{{ _('Labels') }}"
                                     ></label-search-field>
-                                    <label-structure-navigator variant="inline" class="mt-2"></label-structure-navigator>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'locations')" :class="[fieldClass(field), 'px-3 py-2']">
                                     <location-search-field
diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index af47d4d96..4843964b6 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -775,10 +775,35 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-tree {
-    max-height: min(65vh, 560px);
+    flex: 1 1 auto;
     overflow-y: auto;
 }
 
+/* both sit above Vuetify's overlay layer (2400) so they survive a fullscreen dialog */
+/* clears the left icon rail (56px) so it never blends into the sidebar.
+   the app sets global v-btn defaults (text variant, no elevation), so the
+   shadow is restated here rather than relying on the elevation prop */
+.label-structure-fab {
+    position: fixed;
+    left: 88px;
+    bottom: 24px;
+    z-index: 2600;
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
+}
+
+.label-structure-dock {
+    position: fixed;
+    z-index: 2600;
+    max-height: min(70vh, 620px);
+    display: flex;
+    flex-direction: column;
+}
+
+.label-structure-handle {
+    cursor: move;
+    user-select: none;
+}
+
 .label-structure-tree .v-list-item {
     min-height: 30px;
     padding-inline: 8px;
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 20baaf48e..538dc1f4b 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -1,23 +1,24 @@
+const PANEL_WIDTH = 390;
+
 const LabelStructureNavigator = Vue.defineComponent({
   props: {
     canManage: {
       type: Boolean,
       default: false,
     },
-    // 'appbar' anchors the panel to the toolbar, 'inline' to the field it sits next to
-    variant: {
-      type: String,
-      default: 'appbar',
-    },
   },
   data() {
+    const saved = JSON.parse(localStorage.getItem('labelTreePos') || 'null');
     return {
       translations: window.labelTreeTranslations,
+      open: localStorage.getItem('labelTreeOpen') === '1',
+      x: saved?.x ?? 24,
+      y: saved?.y ?? Math.max(72, window.innerHeight - 640),
+      dragOffset: null,
       error: false,
       loaded: false,
       loading: false,
-      menuOpen: false,
-      opened: [],
+      opened: JSON.parse(localStorage.getItem('labelTreeOpened') || '[]'),
       query: '',
       treeItems: [],
     };
@@ -30,13 +31,31 @@ const LabelStructureNavigator = Vue.defineComponent({
     },
   },
   watch: {
-    menuOpen(open) {
-      if (open) this.loadTree();
+    open(open) {
+      localStorage.setItem('labelTreeOpen', open ? '1' : '0');
+      if (open) {
+        this.clampToViewport();
+        this.loadTree();
+      }
+    },
+    opened(ids) {
+      localStorage.setItem('labelTreeOpened', JSON.stringify(ids));
     },
     query(value) {
       if (value.trim()) this.opened = this.collectParentIds(this.filteredItems);
     },
   },
+  mounted() {
+    window.addEventListener('resize', this.clampToViewport);
+    if (this.open) {
+      this.clampToViewport();
+      this.loadTree();
+    }
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.clampToViewport);
+    this.stopDrag();
+  },
   methods: {
     collectParentIds(items) {
       return items.flatMap((item) => [
@@ -73,6 +92,30 @@ const LabelStructureNavigator = Vue.defineComponent({
       if (this.isAssignable(item)) return '';
       return item.children?.length ? this.translations.groupingOnly : this.translations.retired;
     },
+    // keep at least a corner of the panel on screen after drags and window resizes
+    clampToViewport() {
+      const edge = 80;
+      this.x = Math.min(Math.max(this.x, edge - PANEL_WIDTH), window.innerWidth - edge);
+      this.y = Math.min(Math.max(this.y, 0), window.innerHeight - 48);
+    },
+    startDrag(event) {
+      this.dragOffset = {x: event.clientX - this.x, y: event.clientY - this.y};
+      window.addEventListener('pointermove', this.onDrag);
+      window.addEventListener('pointerup', this.stopDrag);
+    },
+    onDrag(event) {
+      this.x = event.clientX - this.dragOffset.x;
+      this.y = event.clientY - this.dragOffset.y;
+      this.clampToViewport();
+    },
+    stopDrag() {
+      window.removeEventListener('pointermove', this.onDrag);
+      window.removeEventListener('pointerup', this.stopDrag);
+      if (this.dragOffset) {
+        localStorage.setItem('labelTreePos', JSON.stringify({x: this.x, y: this.y}));
+        this.dragOffset = null;
+      }
+    },
     async loadTree() {
       if (this.loaded || this.loading) return;
 
@@ -90,28 +133,31 @@ const LabelStructureNavigator = Vue.defineComponent({
     },
   },
   template: `
-    <v-menu
-      v-model="menuOpen"
-      :close-on-content-click="false"
-      :location="variant === 'inline' ? 'bottom start' : 'bottom end'"
-      offset="8"
-    >
-      <template #activator="{ props }">
-        <v-btn
-          v-bind="props"
-          icon="mdi-file-tree-outline"
-          :aria-label="translations.labelStructure"
-          :aria-expanded="menuOpen"
-          :density="variant === 'inline' ? 'comfortable' : 'default'"
-          :size="variant === 'inline' ? 'small' : undefined"
-          :variant="variant === 'inline' ? 'text' : undefined"
-          :title="translations.labelStructure"
-        ></v-btn>
-      </template>
+    <teleport to="body">
+      <v-btn
+        class="label-structure-fab"
+        :aria-label="translations.labelStructure"
+        :aria-expanded="open"
+        color="primary"
+        :title="translations.labelStructure"
+        :icon="open ? 'mdi-close' : 'mdi-file-tree-outline'"
+        variant="elevated"
+        rounded="circle"
+        size="large"
+        @click="open = !open"
+      ></v-btn>
 
-      <v-card class="label-structure-panel">
-        <v-card-title class="d-flex align-center ga-2 py-2 pe-2">
-          <v-icon icon="mdi-file-tree-outline" size="small"></v-icon>
+      <v-card
+        v-if="open"
+        class="label-structure-panel label-structure-dock"
+        :style="{left: x + 'px', top: y + 'px'}"
+        elevation="12"
+      >
+        <v-card-title
+          class="d-flex align-center ga-2 py-2 pe-2 label-structure-handle"
+          @pointerdown.prevent="startDrag"
+        >
+          <v-icon icon="mdi-drag-horizontal-variant" size="small"></v-icon>
           <span>{{ translations.labelStructure }}</span>
           <v-chip size="x-small" variant="tonal">{{ translations.readOnly }}</v-chip>
           <v-spacer></v-spacer>
@@ -120,7 +166,7 @@ const LabelStructureNavigator = Vue.defineComponent({
             icon="mdi-close"
             size="small"
             variant="text"
-            @click="menuOpen = false"
+            @click="open = false"
           ></v-btn>
         </v-card-title>
 
@@ -189,6 +235,6 @@ const LabelStructureNavigator = Vue.defineComponent({
           </v-btn>
         </v-card-actions>
       </v-card>
-    </v-menu>
+    </teleport>
   `,
 });

From c8111e303260c8cd5b4a4d7353c060f5b1b3283c Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 16:26:36 +0300
Subject: [PATCH 14/21] feat(labels): let the label tree button be dragged and
 remember where it sits

---
 enferno/static/css/app.css                    |  9 ++-
 .../js/components/LabelStructureNavigator.js  | 57 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 4843964b6..56ee70901 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -780,14 +780,13 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 /* both sit above Vuetify's overlay layer (2400) so they survive a fullscreen dialog */
-/* clears the left icon rail (56px) so it never blends into the sidebar.
-   the app sets global v-btn defaults (text variant, no elevation), so the
-   shadow is restated here rather than relying on the elevation prop */
+/* position comes from the component so it can be dragged. the app sets global
+   v-btn defaults (text variant, no elevation), so the shadow is restated here
+   rather than relying on the elevation prop */
 .label-structure-fab {
     position: fixed;
-    left: 88px;
-    bottom: 24px;
     z-index: 2600;
+    cursor: move;
     box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
 }
 
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 538dc1f4b..200e853c0 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -1,4 +1,5 @@
 const PANEL_WIDTH = 390;
+const FAB_SIZE = 52;
 
 const LabelStructureNavigator = Vue.defineComponent({
   props: {
@@ -9,12 +10,20 @@ const LabelStructureNavigator = Vue.defineComponent({
   },
   data() {
     const saved = JSON.parse(localStorage.getItem('labelTreePos') || 'null');
+    const savedFab = JSON.parse(localStorage.getItem('labelTreeFabPos') || 'null');
     return {
       translations: window.labelTreeTranslations,
       open: localStorage.getItem('labelTreeOpen') === '1',
       x: saved?.x ?? 24,
       y: saved?.y ?? Math.max(72, window.innerHeight - 640),
       dragOffset: null,
+      // right margin at mid height: clear of the app bar, the New Bulletin
+      // button and the edit dialog's own toolbar. draggable from there.
+      fabX: savedFab?.x ?? window.innerWidth - 72,
+      fabY: savedFab?.y ?? Math.round(window.innerHeight / 2) - 26,
+      fabDragged: false,
+      fabOffset: null,
+      fabPointer: null,
       error: false,
       loaded: false,
       loading: false,
@@ -47,6 +56,7 @@ const LabelStructureNavigator = Vue.defineComponent({
   },
   mounted() {
     window.addEventListener('resize', this.clampToViewport);
+    this.clampFab();
     if (this.open) {
       this.clampToViewport();
       this.loadTree();
@@ -97,6 +107,46 @@ const LabelStructureNavigator = Vue.defineComponent({
       const edge = 80;
       this.x = Math.min(Math.max(this.x, edge - PANEL_WIDTH), window.innerWidth - edge);
       this.y = Math.min(Math.max(this.y, 0), window.innerHeight - 48);
+      this.clampFab();
+    },
+    clampFab() {
+      this.fabX = Math.min(Math.max(this.fabX, 0), window.innerWidth - FAB_SIZE);
+      this.fabY = Math.min(Math.max(this.fabY, 64), window.innerHeight - FAB_SIZE);
+    },
+    startFabDrag(event) {
+      this.fabDragged = false;
+      this.fabPointer = event.pointerId;
+      this.fabOffset = {x: event.clientX - this.fabX, y: event.clientY - this.fabY};
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    onFabDrag(event) {
+      if (this.fabPointer !== event.pointerId || !this.fabOffset) return;
+      const next = {x: event.clientX - this.fabOffset.x, y: event.clientY - this.fabOffset.y};
+      // ignore jitter so a plain click is never read as a drag
+      if (Math.abs(next.x - this.fabX) + Math.abs(next.y - this.fabY) < 4) return;
+      this.fabDragged = true;
+      this.fabX = next.x;
+      this.fabY = next.y;
+      this.clampFab();
+    },
+    stopFabDrag(event) {
+      if (this.fabPointer !== event?.pointerId) return;
+      if (event.currentTarget?.hasPointerCapture?.(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      this.fabPointer = null;
+      this.fabOffset = null;
+      if (this.fabDragged) {
+        localStorage.setItem('labelTreeFabPos', JSON.stringify({x: this.fabX, y: this.fabY}));
+      }
+    },
+    // a drag ends in a click event too, so swallow that one
+    toggle() {
+      if (this.fabDragged) {
+        this.fabDragged = false;
+        return;
+      }
+      this.open = !this.open;
     },
     startDrag(event) {
       this.dragOffset = {x: event.clientX - this.x, y: event.clientY - this.y};
@@ -144,7 +194,12 @@ const LabelStructureNavigator = Vue.defineComponent({
         variant="elevated"
         rounded="circle"
         size="large"
-        @click="open = !open"
+        :style="{left: fabX + 'px', top: fabY + 'px'}"
+        @pointerdown="startFabDrag"
+        @pointermove="onFabDrag"
+        @pointerup="stopFabDrag"
+        @pointercancel="stopFabDrag"
+        @click="toggle"
       ></v-btn>
 
       <v-card

From 0a04fec5a249bfa19266c02600ec5254ac7f0e33 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 16:34:40 +0300
Subject: [PATCH 15/21] feat(labels): sit the label tree button in the app bar
 and free its drag range

---
 .../js/components/LabelStructureNavigator.js       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 200e853c0..a31d411be 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -1,5 +1,5 @@
 const PANEL_WIDTH = 390;
-const FAB_SIZE = 52;
+const FAB_SIZE = 48;
 
 const LabelStructureNavigator = Vue.defineComponent({
   props: {
@@ -17,10 +17,10 @@ const LabelStructureNavigator = Vue.defineComponent({
       x: saved?.x ?? 24,
       y: saved?.y ?? Math.max(72, window.innerHeight - 640),
       dragOffset: null,
-      // right margin at mid height: clear of the app bar, the New Bulletin
-      // button and the edit dialog's own toolbar. draggable from there.
-      fabX: savedFab?.x ?? window.innerWidth - 72,
-      fabY: savedFab?.y ?? Math.round(window.innerHeight / 2) - 26,
+      // sits in the app bar, left of the existing toolbar icons, and floats
+      // above dialogs so it stays reachable while editing. draggable anywhere.
+      fabX: savedFab?.x ?? window.innerWidth - 300,
+      fabY: savedFab?.y ?? 8,
       fabDragged: false,
       fabOffset: null,
       fabPointer: null,
@@ -111,7 +111,7 @@ const LabelStructureNavigator = Vue.defineComponent({
     },
     clampFab() {
       this.fabX = Math.min(Math.max(this.fabX, 0), window.innerWidth - FAB_SIZE);
-      this.fabY = Math.min(Math.max(this.fabY, 64), window.innerHeight - FAB_SIZE);
+      this.fabY = Math.min(Math.max(this.fabY, 0), window.innerHeight - FAB_SIZE);
     },
     startFabDrag(event) {
       this.fabDragged = false;
@@ -193,7 +193,7 @@ const LabelStructureNavigator = Vue.defineComponent({
         :icon="open ? 'mdi-close' : 'mdi-file-tree-outline'"
         variant="elevated"
         rounded="circle"
-        size="large"
+        size="default"
         :style="{left: fabX + 'px', top: fabY + 'px'}"
         @pointerdown="startFabDrag"
         @pointermove="onFabDrag"

From d35c304db6905d12e90e074314830e8f6f2992fe Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 19:21:04 +0300
Subject: [PATCH 16/21] feat(labels): show only the leaf segment of each label
 in the tree

---
 enferno/static/css/app.css                      | 10 ++++++++--
 .../js/components/LabelStructureNavigator.js    | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 56ee70901..324aa4ef8 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -760,7 +760,7 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-panel {
-    width: min(390px, calc(100vw - 24px));
+    width: min(720px, calc(100vw - 24px));
     font-size: 13px;
 }
 
@@ -793,9 +793,15 @@ div.jsondiffpatch-child-node-type-array:after {
 .label-structure-dock {
     position: fixed;
     z-index: 2600;
-    max-height: min(70vh, 620px);
+    max-height: min(80vh, 720px);
     display: flex;
     flex-direction: column;
+    /* native resize handle rather than a hand-rolled one, for the rare label that
+       still runs long */
+    resize: horizontal;
+    overflow: hidden;
+    min-width: 360px;
+    max-width: calc(100vw - 24px);
 }
 
 .label-structure-handle {
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index a31d411be..c32c02911 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -1,4 +1,4 @@
-const PANEL_WIDTH = 390;
+const PANEL_WIDTH = 720;
 const FAB_SIZE = 48;
 
 const LabelStructureNavigator = Vue.defineComponent({
@@ -67,6 +67,15 @@ const LabelStructureNavigator = Vue.defineComponent({
     this.stopDrag();
   },
   methods: {
+    // titles are stored as full comma-delimited paths ("Type, Martial, Air Strike"),
+    // so a row only needs the last segment: the tree itself shows the ancestry, and
+    // repeating it pushes the deeper levels off the panel
+    leafTitle(title) {
+      return String(title || '')
+        .split(/[,،]/)
+        .pop()
+        .trim();
+    },
     collectParentIds(items) {
       return items.flatMap((item) => [
         ...(item.children?.length ? [item.id] : []),
@@ -267,9 +276,9 @@ const LabelStructureNavigator = Vue.defineComponent({
               <v-icon :icon="itemIcon(item)" :title="itemIconHint(item)" size="small"></v-icon>
             </template>
             <template #title="{ item }">
-              <div class="d-flex flex-column label-structure-title">
-                <span :class="{'text-medium-emphasis': !isAssignable(item)}">{{ item.title }}</span>
-                <span v-if="item.title_ar" class="label-structure-title-ar text-medium-emphasis" dir="rtl">{{ item.title_ar }}</span>
+              <div class="d-flex flex-column label-structure-title" :title="item.title">
+                <span :class="{'text-medium-emphasis': !isAssignable(item)}">{{ leafTitle(item.title) }}</span>
+                <span v-if="item.title_ar" class="label-structure-title-ar text-medium-emphasis" dir="rtl">{{ leafTitle(item.title_ar) }}</span>
               </div>
             </template>
             <template #append="{ item }">

From 2ef2cd6ee22e05fb588670ae1174b38a6de4c54f Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 19:33:11 +0300
Subject: [PATCH 17/21] feat(labels): pin the selected label's full path above
 the tree and tighten its rows

---
 enferno/static/css/app.css                    | 52 ++++++++++++++-----
 .../js/components/LabelStructureNavigator.js  | 23 +++++++-
 2 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 324aa4ef8..7860b177b 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -765,8 +765,8 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-panel .v-card-title {
-    min-height: 42px;
-    font-size: 1rem;
+    min-height: 36px;
+    font-size: 0.95rem;
 }
 
 .label-structure-panel .v-field,
@@ -810,32 +810,58 @@ div.jsondiffpatch-child-node-type-array:after {
 }
 
 .label-structure-tree .v-list-item {
-    min-height: 30px;
-    padding-inline: 8px;
+    min-height: 26px;
+    padding-inline-end: 6px;
+}
+
+/* every level costs one indent step plus the width Vuetify reserves for the
+   prepend slot; both are trimmed so a six level path still fits */
+.label-structure-tree .v-list-group {
+    --list-indent-size: 12px;
+    --prepend-width: 24px;
+}
+
+.label-structure-tree .v-list-item__spacer {
+    width: 4px;
+}
+
+.label-structure-tree .v-list-item__prepend > .v-list-item-action {
+    margin-inline-end: 2px;
+}
+
+/* the selected row's full path, pinned under the search box */
+.label-structure-path {
+    flex: 0 0 auto;
+    font-size: 12px;
+    line-height: 1.1rem;
+    background: rgba(var(--v-theme-primary), 0.08);
+    border-block: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    overflow-x: auto;
+    white-space: nowrap;
 }
 
 .label-structure-tree .v-list-item-title,
 .label-structure-title {
-    font-size: 13px;
-    line-height: 1.15rem;
+    font-size: 12.5px;
+    line-height: 1.05rem;
 }
 
 .label-structure-title-ar {
-    font-size: 11px;
-    line-height: 1rem;
+    font-size: 10.5px;
+    line-height: 0.95rem;
     /* dir=rtl keeps the bidi order correct; alignment follows the English line above */
     text-align: left;
 }
 
 .label-structure-tree .v-chip {
-    height: 18px;
-    padding-inline: 5px;
-    font-size: 10px;
+    height: 16px;
+    padding-inline: 4px;
+    font-size: 9px;
 }
 
 .label-structure-panel .v-card-actions {
-    min-height: 38px;
-    padding: 3px 8px;
+    min-height: 32px;
+    padding: 2px 8px;
 }
 
 
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index c32c02911..2e599acbf 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -28,6 +28,7 @@ const LabelStructureNavigator = Vue.defineComponent({
       loaded: false,
       loading: false,
       opened: JSON.parse(localStorage.getItem('labelTreeOpened') || '[]'),
+      activated: [],
       query: '',
       treeItems: [],
     };
@@ -38,6 +39,19 @@ const LabelStructureNavigator = Vue.defineComponent({
       if (!query) return this.treeItems;
       return this.filterTree(this.treeItems, query);
     },
+    // the title already is the full path, so the picked row is the whole crumb
+    activePath() {
+      const id = this.activated[0];
+      if (!id) return '';
+      const find = (items) => {
+        for (const item of items) {
+          if (item.id === id) return item;
+          const match = find(item.children || []);
+          if (match) return match;
+        }
+      };
+      return find(this.treeItems)?.title || '';
+    },
   },
   watch: {
     open(open) {
@@ -234,7 +248,7 @@ const LabelStructureNavigator = Vue.defineComponent({
           ></v-btn>
         </v-card-title>
 
-        <v-card-text class="px-3 py-2">
+        <v-card-text class="px-2 py-1">
           <v-text-field
             v-model="query"
             :label="translations.search"
@@ -246,6 +260,10 @@ const LabelStructureNavigator = Vue.defineComponent({
           ></v-text-field>
         </v-card-text>
 
+        <div v-if="activePath" class="label-structure-path px-3 py-1" :title="activePath">
+          {{ activePath }}
+        </div>
+
         <div class="label-structure-tree">
           <div v-if="loading" class="d-flex justify-center pa-8">
             <v-progress-circular indeterminate></v-progress-circular>
@@ -265,6 +283,9 @@ const LabelStructureNavigator = Vue.defineComponent({
           <v-treeview
             v-else
             v-model:opened="opened"
+            v-model:activated="activated"
+            activatable
+            active-strategy="single-independent"
             :items="filteredItems"
             density="compact"
             item-children="children"

From 14a1853cd20c9017db750bd106fca0f6c3a89abf Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 19:37:39 +0300
Subject: [PATCH 18/21] feat(labels): render the selected path as a breadcrumb
 with the label emphasized

---
 enferno/static/css/app.css                    | 23 +++++++++++++++----
 .../js/components/LabelStructureNavigator.js  | 15 ++++++++++--
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 7860b177b..399ac8301 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -829,17 +829,30 @@ div.jsondiffpatch-child-node-type-array:after {
     margin-inline-end: 2px;
 }
 
-/* the selected row's full path, pinned under the search box */
+/* the selected row's full path, pinned under the search box. this is the one
+   line he reads, so it outranks the tree rows in size and colour */
 .label-structure-path {
+    display: flex;
+    align-items: center;
+    gap: 5px;
     flex: 0 0 auto;
-    font-size: 12px;
-    line-height: 1.1rem;
-    background: rgba(var(--v-theme-primary), 0.08);
-    border-block: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    font-size: 13.5px;
+    line-height: 1.25rem;
+    color: rgb(var(--v-theme-primary));
+    background: rgba(var(--v-theme-primary), 0.1);
+    border-block: thin solid rgba(var(--v-theme-primary), 0.25);
     overflow-x: auto;
     white-space: nowrap;
 }
 
+.label-structure-crumb-sep {
+    opacity: 0.5;
+}
+
+.label-structure-crumb-leaf {
+    font-weight: 600;
+}
+
 .label-structure-tree .v-list-item-title,
 .label-structure-title {
     font-size: 12.5px;
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 2e599acbf..2fd3570e6 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -52,6 +52,13 @@ const LabelStructureNavigator = Vue.defineComponent({
       };
       return find(this.treeItems)?.title || '';
     },
+    // ancestors read as context, the label itself is what he came to read
+    activeCrumbs() {
+      return this.activePath
+        .split(/[,،]/)
+        .map((part) => part.trim())
+        .filter(Boolean);
+    },
   },
   watch: {
     open(open) {
@@ -260,8 +267,12 @@ const LabelStructureNavigator = Vue.defineComponent({
           ></v-text-field>
         </v-card-text>
 
-        <div v-if="activePath" class="label-structure-path px-3 py-1" :title="activePath">
-          {{ activePath }}
+        <div v-if="activePath" class="label-structure-path px-3 py-2" :title="activePath">
+          <v-icon icon="mdi-label-outline" size="small"></v-icon>
+          <template v-for="(crumb, index) in activeCrumbs" :key="index">
+            <span v-if="index" class="label-structure-crumb-sep">›</span>
+            <span :class="index === activeCrumbs.length - 1 ? 'label-structure-crumb-leaf' : 'text-medium-emphasis'">{{ crumb }}</span>
+          </template>
         </div>
 
         <div class="label-structure-tree">

From 74d974ea08e6ca4c239c2e76393382bf34cf6980 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 19:39:42 +0300
Subject: [PATCH 19/21] style(labels): shrink the breadcrumb so long paths fit
 without scrolling

---
 enferno/static/css/app.css                              | 8 +++++---
 enferno/static/js/components/LabelStructureNavigator.js | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 399ac8301..6901f46da 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -834,10 +834,12 @@ div.jsondiffpatch-child-node-type-array:after {
 .label-structure-path {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 4px;
     flex: 0 0 auto;
-    font-size: 13.5px;
-    line-height: 1.25rem;
+    /* small enough that a six level path fits without scrolling sideways, which
+       is the point of showing it at all */
+    font-size: 11.5px;
+    line-height: 1.05rem;
     color: rgb(var(--v-theme-primary));
     background: rgba(var(--v-theme-primary), 0.1);
     border-block: thin solid rgba(var(--v-theme-primary), 0.25);
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 2fd3570e6..326e829bd 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -267,8 +267,8 @@ const LabelStructureNavigator = Vue.defineComponent({
           ></v-text-field>
         </v-card-text>
 
-        <div v-if="activePath" class="label-structure-path px-3 py-2" :title="activePath">
-          <v-icon icon="mdi-label-outline" size="small"></v-icon>
+        <div v-if="activePath" class="label-structure-path px-3 py-1" :title="activePath">
+          <v-icon icon="mdi-label-outline" size="x-small"></v-icon>
           <template v-for="(crumb, index) in activeCrumbs" :key="index">
             <span v-if="index" class="label-structure-crumb-sep">›</span>
             <span :class="index === activeCrumbs.length - 1 ? 'label-structure-crumb-leaf' : 'text-medium-emphasis'">{{ crumb }}</span>

From 0bc52c43c3b1b5bcaac1377b9030133fe17cabd6 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 21:54:35 +0300
Subject: [PATCH 20/21] feat(labels): split labels from verified labels in the
 tree and start it collapsed

---
 enferno/admin/templates/admin/jsapi.jinja2    |  2 +
 enferno/static/css/app.css                    |  7 +++
 .../js/components/LabelStructureNavigator.js  | 45 +++++++++++++++----
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/enferno/admin/templates/admin/jsapi.jinja2 b/enferno/admin/templates/admin/jsapi.jinja2
index e7f3cd811..7e25cdd52 100644
--- a/enferno/admin/templates/admin/jsapi.jinja2
+++ b/enferno/admin/templates/admin/jsapi.jinja2
@@ -772,6 +772,8 @@ var labelTreeTranslations = {
     actors: "{{ _('Actors') }}",
     incidents: "{{ _('Incidents') }}",
     offline: "{{ _('Offline') }}",
+    labels: "{{ _('Labels') }}",
+    verifiedLabels: "{{ _('Verified Labels') }}",
     groupingOnly: "{{ _('Grouping only, cannot be assigned') }}",
     retired: "{{ _('Retired, kept for existing records only') }}",
 }
diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 6901f46da..9218aea6e 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -847,6 +847,13 @@ div.jsondiffpatch-child-node-type-array:after {
     white-space: nowrap;
 }
 
+.label-structure-scope .v-btn {
+    height: 24px;
+    font-size: 11px;
+    letter-spacing: 0;
+    text-transform: none;
+}
+
 .label-structure-crumb-sep {
     opacity: 0.5;
 }
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index 326e829bd..f3c87d814 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -25,12 +25,16 @@ const LabelStructureNavigator = Vue.defineComponent({
       fabOffset: null,
       fabPointer: null,
       error: false,
-      loaded: false,
       loading: false,
-      opened: JSON.parse(localStorage.getItem('labelTreeOpened') || '[]'),
+      // labels and verified labels are two separate hierarchies in one table, and
+      // merging them puts the same label at two different depths
+      verified: localStorage.getItem('labelTreeVerified') === '1',
+      // he opens the branch he wants, so the tree always starts fully collapsed
+      opened: [],
       activated: [],
       query: '',
       treeItems: [],
+      cache: {},
     };
   },
   computed: {
@@ -68,11 +72,15 @@ const LabelStructureNavigator = Vue.defineComponent({
         this.loadTree();
       }
     },
-    opened(ids) {
-      localStorage.setItem('labelTreeOpened', JSON.stringify(ids));
+    verified(verified) {
+      localStorage.setItem('labelTreeVerified', verified ? '1' : '0');
+      this.opened = [];
+      this.activated = [];
+      this.loadTree();
     },
     query(value) {
-      if (value.trim()) this.opened = this.collectParentIds(this.filteredItems);
+      // a search expands what it matched; clearing it folds the tree back up
+      this.opened = value.trim() ? this.collectParentIds(this.filteredItems) : [];
     },
   },
   mounted() {
@@ -197,14 +205,22 @@ const LabelStructureNavigator = Vue.defineComponent({
       }
     },
     async loadTree() {
-      if (this.loaded || this.loading) return;
+      const key = this.verified ? 'verified' : 'labels';
+      if (this.cache[key]) {
+        this.treeItems = this.cache[key];
+        return;
+      }
+      if (this.loading) return;
 
       this.error = false;
       this.loading = true;
+      this.treeItems = [];
       try {
-        const response = await api.get('/admin/api/labels/tree');
+        const response = await api.get('/admin/api/labels/tree', {
+          params: {verified: this.verified},
+        });
+        this.cache[key] = response.data.items;
         this.treeItems = response.data.items;
-        this.loaded = true;
       } catch (_error) {
         this.error = true;
       } finally {
@@ -246,6 +262,17 @@ const LabelStructureNavigator = Vue.defineComponent({
           <span>{{ translations.labelStructure }}</span>
           <v-chip size="x-small" variant="tonal">{{ translations.readOnly }}</v-chip>
           <v-spacer></v-spacer>
+          <v-btn-toggle
+            v-model="verified"
+            class="label-structure-scope"
+            density="compact"
+            mandatory
+            variant="outlined"
+            @pointerdown.stop
+          >
+            <v-btn :value="false" size="small">{{ translations.labels }}</v-btn>
+            <v-btn :value="true" size="small">{{ translations.verifiedLabels }}</v-btn>
+          </v-btn-toggle>
           <v-btn
             :aria-label="translations.close"
             icon="mdi-close"
@@ -287,7 +314,7 @@ const LabelStructureNavigator = Vue.defineComponent({
             </template>
           </v-alert>
 
-          <div v-else-if="loaded && !filteredItems.length" class="pa-6 text-center text-medium-emphasis">
+          <div v-else-if="!filteredItems.length" class="pa-6 text-center text-medium-emphasis">
             {{ translations.noLabels }}
           </div>
 

From 64f5f2d3869bf6cebfb024e75f3304c6d756a856 Mon Sep 17 00:00:00 2001
From: level09 <level09@gmail.com>
Date: Sat, 25 Jul 2026 22:05:43 +0300
Subject: [PATCH 21/21] feat(labels): show the Arabic path under the English
 one in the breadcrumb

---
 enferno/static/css/app.css                    | 16 ++++++--
 .../js/components/LabelStructureNavigator.js  | 41 +++++++++++++------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 9218aea6e..ea3217519 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -832,9 +832,6 @@ div.jsondiffpatch-child-node-type-array:after {
 /* the selected row's full path, pinned under the search box. this is the one
    line he reads, so it outranks the tree rows in size and colour */
 .label-structure-path {
-    display: flex;
-    align-items: center;
-    gap: 4px;
     flex: 0 0 auto;
     /* small enough that a six level path fits without scrolling sideways, which
        is the point of showing it at all */
@@ -847,6 +844,19 @@ div.jsondiffpatch-child-node-type-array:after {
     white-space: nowrap;
 }
 
+.label-structure-path-line {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* dir=rtl orders the segments right to left; the line itself stays left aligned
+   so it reads as a second line under the English one */
+.label-structure-path-ar {
+    text-align: left;
+    white-space: nowrap;
+}
+
 .label-structure-scope .v-btn {
     height: 24px;
     font-size: 11px;
diff --git a/enferno/static/js/components/LabelStructureNavigator.js b/enferno/static/js/components/LabelStructureNavigator.js
index f3c87d814..192aa823d 100644
--- a/enferno/static/js/components/LabelStructureNavigator.js
+++ b/enferno/static/js/components/LabelStructureNavigator.js
@@ -44,9 +44,9 @@ const LabelStructureNavigator = Vue.defineComponent({
       return this.filterTree(this.treeItems, query);
     },
     // the title already is the full path, so the picked row is the whole crumb
-    activePath() {
+    activeItem() {
       const id = this.activated[0];
-      if (!id) return '';
+      if (!id) return null;
       const find = (items) => {
         for (const item of items) {
           if (item.id === id) return item;
@@ -54,14 +54,15 @@ const LabelStructureNavigator = Vue.defineComponent({
           if (match) return match;
         }
       };
-      return find(this.treeItems)?.title || '';
+      return find(this.treeItems) || null;
     },
     // ancestors read as context, the label itself is what he came to read
     activeCrumbs() {
-      return this.activePath
-        .split(/[,،]/)
-        .map((part) => part.trim())
-        .filter(Boolean);
+      return this.crumbs(this.activeItem?.title);
+    },
+    // title_ar is stored as a full path too, with the Arabic comma
+    activeCrumbsAr() {
+      return this.crumbs(this.activeItem?.title_ar);
     },
   },
   watch: {
@@ -105,6 +106,12 @@ const LabelStructureNavigator = Vue.defineComponent({
         .pop()
         .trim();
     },
+    crumbs(title) {
+      return String(title || '')
+        .split(/[,،]/)
+        .map((part) => part.trim())
+        .filter(Boolean);
+    },
     collectParentIds(items) {
       return items.flatMap((item) => [
         ...(item.children?.length ? [item.id] : []),
@@ -294,12 +301,20 @@ const LabelStructureNavigator = Vue.defineComponent({
           ></v-text-field>
         </v-card-text>
 
-        <div v-if="activePath" class="label-structure-path px-3 py-1" :title="activePath">
-          <v-icon icon="mdi-label-outline" size="x-small"></v-icon>
-          <template v-for="(crumb, index) in activeCrumbs" :key="index">
-            <span v-if="index" class="label-structure-crumb-sep">›</span>
-            <span :class="index === activeCrumbs.length - 1 ? 'label-structure-crumb-leaf' : 'text-medium-emphasis'">{{ crumb }}</span>
-          </template>
+        <div v-if="activeItem" class="label-structure-path px-3 py-1" :title="activeItem.title">
+          <div class="label-structure-path-line">
+            <v-icon icon="mdi-label-outline" size="x-small"></v-icon>
+            <template v-for="(crumb, index) in activeCrumbs" :key="index">
+              <span v-if="index" class="label-structure-crumb-sep">›</span>
+              <span :class="index === activeCrumbs.length - 1 ? 'label-structure-crumb-leaf' : 'text-medium-emphasis'">{{ crumb }}</span>
+            </template>
+          </div>
+          <div v-if="activeCrumbsAr.length" class="label-structure-path-ar" dir="rtl">
+            <template v-for="(crumb, index) in activeCrumbsAr" :key="index">
+              <span v-if="index" class="label-structure-crumb-sep"> › </span>
+              <span :class="index === activeCrumbsAr.length - 1 ? 'label-structure-crumb-leaf' : 'text-medium-emphasis'">{{ crumb }}</span>
+            </template>
+          </div>
         </div>
 
         <div class="label-structure-tree">