Convert context view to Tree from Accordion

src/lib/ui/learning-objects/layout/LoContextPanel.svelte

@@ -4,6 +4,7 @@
   import { currentLo, layout } from "$lib/stores";
   import { onDestroy } from "svelte";
   import LoContext from "../structure/LoContext.svelte";
+  import { TreeView } from "@skeletonlabs/skeleton";
 
   export let loContext: Lo;
 
@@ -33,6 +34,8 @@
     <figure class="flex justify-center p-2">
       <Image {lo} />
     </figure>
-    <LoContext lo={loContext} />
+    <TreeView padding="p-1">
+      <LoContext lo={loContext} />
+    </TreeView>
   </div>
 </div>

src/lib/ui/learning-objects/structure/CourseContext.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { isCompositeLo, type Course } from "$lib/services/models/lo-types";
+  import { type Course } from "$lib/services/models/lo-types";
   import LoContext from "./LoContext.svelte";
-  import { Accordion, AccordionItem } from "@skeletonlabs/skeleton";
+  import { TreeView, TreeViewItem } from "@skeletonlabs/skeleton";
 
   export let course: Course;
 </script>
 
-<Accordion regionPanel="space-y-0.5">
+<TreeView padding="p-1">
   {#each course.los as lo}
     {#if !lo.hide}
-      <AccordionItem>
-        <svelte:fragment slot="summary">{lo.title}</svelte:fragment>
-        <svelte:fragment slot="content">
+      <TreeViewItem>
+        {lo.title}
+        <svelte:fragment slot="children">
           <LoContext {lo} />
         </svelte:fragment>
-      </AccordionItem>
+      </TreeViewItem>
     {/if}
   {/each}
-</Accordion>
+</TreeView>

src/lib/ui/learning-objects/structure/LoContext.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Lo } from "$lib/services/models/lo-types";
-  import LoReference from "./LoReference.svelte";
+  import { TreeViewItem } from "@skeletonlabs/skeleton";
+  import Icon from "$lib/ui/themes/icons/Icon.svelte";
 
   export let lo: Lo;
   if (lo?.toc) {
@@ -10,12 +11,25 @@
       }
     });
   }
-  export let indent = 0;
 </script>
 
 {#each lo?.toc as lo}
-  <LoReference {lo} indent={indent + 4} />
-  {#if lo.toc}
-    <svelte:self {lo} indent={indent + 4} />
-  {/if}
+  <TreeViewItem open hideChildren>
+    <svelte:fragment slot="lead">
+      <Icon type={lo.type} />
+    </svelte:fragment>
+    <a href={lo?.route} class="flex">
+      {@html lo.title}
+      {#if lo.video && lo.type != "panelvideo"}
+        <a class="pl-4" href={lo.video}>
+          <Icon type="video" />
+        </a>
+      {/if}
+    </a>
+    <svelte:fragment slot="children">
+      {#if lo.toc}
+        <svelte:self {lo} />
+      {/if}
+    </svelte:fragment>
+  </TreeViewItem>
 {/each}