WIP bracket list

src/components/logic/RecursiveEasyDBDetailView.svelte

@@ -16,6 +16,7 @@
   import FieldLabel from "../fields/FieldLabel.svelte";
   import NotImplemented from "../utils/NotImplemented.svelte";
   import Waiting from "../utils/Waiting.svelte";
+  import BracketList from "../utils/BracketList.svelte";
 
   export let fields;
   export let data;
@@ -114,13 +115,13 @@
         </P>
       {/if}
       <LinkedTable>
-        <List>
+        <svelte:component this={decideCondense(firstField) ? List : BracketList}>
           {#each linkedSubData(data, table, firstField) as subdata}
             <Li>
               <svelte:self fields={firstField.mask.fields} data={subdata} table={firstField.other_table_name_hint} condensed={decideCondense(firstField)} output={output}/>
             </Li>
           {/each}
-        </List>
+          </svelte:component>
       </LinkedTable>
     {/if}
     <svelte:self fields={fields.slice(1)} data={data} table={table} condensed={condensed} output={output}/>

src/components/utils/BracketList.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { List } from "flowbite-svelte";
+</script>
+
+<style>
+  .bracket-list {
+    list-style-type: none;
+    padding-left: 1.5rem;
+  }
+  .bracket-list li::before {
+    content: "";
+    position: absolute;
+    left: -2rem; /* Positioning the border to the left of the list item */
+    top: 0;
+    bottom: 0;
+    border-left: 2px solid black; /* Non-continuous border styling */
+    height: 2rem; /* Height of the bracket line */
+    margin-top: 0.5rem; /* Centering the line vertically */
+  }
+  .bracket-list li {
+    position: relative;
+    margin-left: 1rem;
+  }
+</style>
+
+<List>
+  <div class="bracket-list">
+    <slot />
+  </div>
+</List>