From ef25dbc1bbcddbe7e495cb6166d20339f9a8f3aa Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 10 Feb 2025 21:55:12 -0800
Subject: [PATCH] Cute visual indicator

---
 .../management-list.component.html            |  5 ++-
 .../management-list.component.scss            | 32 +++++++------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.html b/src-ui/src/app/components/manage/management-list/management-list.component.html
index 349e1cfe8..345839efb 100644
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -83,7 +83,10 @@
         <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
       </div>
     </td>
-    <td scope="row" class="depth-{{depth}}">
+    <td scope="row" class="name-cell" style="--depth: {{depth}}">
+      @if (depth > 0) {
+        <div class="indicator"></div>
+      }
       <button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button>
     </td>
     <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.scss b/src-ui/src/app/components/manage/management-list/management-list.component.scss
index 98809b59f..de99b6584 100644
--- a/src-ui/src/app/components/manage/management-list/management-list.component.scss
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.scss
@@ -11,26 +11,16 @@ tbody tr:last-child td {
     min-height: 0;
 }
 
-.depth-0 {
-    padding-left: 0;
-}
+td.name-cell {
+    padding-left: calc(calc(var(--depth) - 1) * 1.1rem);
 
-.depth-1 {
-    padding-left: 20px;
-}
-
-.depth-2 {
-    padding-left: 40px;
-}
-
-.depth-3 {
-    padding-left: 60px;
-}
-
-.depth-4 {
-    padding-left: 80px;
-}
-
-.depth-5 {
-    padding-left: 100px;
+    .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;
+    }
 }