Heirarchy in doc list dropdowns

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -114,6 +114,13 @@ export class FilterableDropdownSelectionModel {
           b.id == NEGATIVE_NULL_FILTER_VALUE)
       ) {
         return 1
+      }
+
+      // Preserve hierarchical order when provided (e.g., Tags)
+      const ao = (a as any)['orderIndex']
+      const bo = (b as any)['orderIndex']
+      if (ao !== undefined && bo !== undefined) {
+        return ao - bo
       } else if (
         this.getNonTemporary(a.id) == ToggleableItemState.NotSelected &&
         this.getNonTemporary(b.id) != ToggleableItemState.NotSelected

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html

@@ -15,12 +15,17 @@
       <i-bs width="1em" height="1em" name="x"></i-bs>
     }
   </div>
-  <div class="me-1">
-    @if (isTag) {
-      <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
-    } @else {
-      <small>{{item.name}}</small>
+  <div class="me-1 name-cell" [style.--depth]="isTag ? getDepth() + 1 : 1">
+    @if (isTag && getDepth() > 0) {
+      <div class="indicator"></div>
     }
+    <div>
+      @if (isTag) {
+        <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
+      } @else {
+        <small>{{item.name}}</small>
+      }
+    </div>
   </div>
   @if (!hideCount) {
     <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{currentCount}}</div>

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss

@@ -2,3 +2,19 @@
   min-width: 1em;
   min-height: 1em;
 }
+
+.name-cell {
+  padding-left: calc(calc(var(--depth) - 2) * 1rem);
+  display: flex;
+  align-items: center;
+
+  .indicator {
+    display: inline-block;
+    width: .8rem;
+    height: .8rem;
+    border-left: 1px solid var(--bs-secondary);
+    border-bottom: 1px solid var(--bs-secondary);
+    margin-right: .25rem;
+    margin-left: .5rem;
+  }
+}

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { MatchingModel } from 'src/app/data/matching-model'
+import { Tag } from 'src/app/data/tag'
 import { TagComponent } from '../../tag/tag.component'
 
 export enum ToggleableItemState {
@@ -18,7 +19,7 @@ export enum ToggleableItemState {
 })
 export class ToggleableDropdownButtonComponent {
   @Input()
-  item: MatchingModel
+  item: MatchingModel | Tag
 
   @Input()
   state: ToggleableItemState
@@ -45,6 +46,10 @@ export class ToggleableDropdownButtonComponent {
     return 'is_inbox_tag' in this.item
   }
 
+  getDepth(): number {
+    return (this.item as Tag).depth ?? 0
+  }
+
   get currentCount(): number {
     return this.count ?? this.item.document_count
   }