From 5bbac3adfcefadee2de7c9145bfded0309ff5e79 Mon Sep 17 00:00:00 2001
From: Dominic Kempf <dominic.kempf@iwr.uni-heidelberg.de>
Date: Thu, 25 Jul 2024 13:28:26 +0200
Subject: [PATCH] WIP bracket list

---
 .../logic/RecursiveEasyDBDetailView.svelte    |  5 ++--
 src/components/utils/BracketList.svelte       | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/components/utils/BracketList.svelte

diff --git a/src/components/logic/RecursiveEasyDBDetailView.svelte b/src/components/logic/RecursiveEasyDBDetailView.svelte
index 038b825..5e206b5 100644
--- a/src/components/logic/RecursiveEasyDBDetailView.svelte
+++ b/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}/>
diff --git a/src/components/utils/BracketList.svelte b/src/components/utils/BracketList.svelte
new file mode 100644
index 0000000..2ac9e0f
--- /dev/null
+++ b/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>