Reworked runners selection list

src/components/RunnerSelectionList.svelte

@@ -3,16 +3,18 @@
 
     export let recommendable = true;
 
-    import Runners from '../ts/core/Runners';
-
     import type { Runner, RunnerFamily } from '../ts/types/Runners';
 
+    import Runners from '../ts/core/Runners';
+
     import Delete from '../assets/images/delete.png';
     import Download from '../assets/images/download.png';
+    import Arrow from '../assets/svgs/arrow.svg';
     
     let runners: RunnerFamily[] = [],
         installedRunners = {},
         disabledRunners = {},
+        openedFamily,
         selectedVersion;
 
     Runners.list().then((list) => {
@@ -26,7 +28,12 @@
             }
     });
 
-    Runners.current().then((current) => selectedVersion = current?.name);
+    Runners.current().then((current) => {
+        selectedVersion = current;
+
+        if (current)
+            openedFamily = current.family;
+    });
 
     let progress = {}, applying = {};
 
@@ -48,7 +55,7 @@
 
                 progress[runner.name] = undefined;
 
-                selectedVersion = runner.name;
+                selectedVersion = runner;
 
                 Runners.current(runner);
             });
@@ -69,22 +76,31 @@
 
 <div class="list">
     {#each runners as family}
-        <h2>{ family.title }</h2>
+        <div
+            class="list-title"
+            class:list-title-open={openedFamily === family.title}
+            on:click={() => openedFamily = openedFamily != family.title ? family.title : null}
+        >
+            <span>{family.title}</span>
 
+            <img src={Arrow} alt="" />
+        </div>
+
+        {#if openedFamily === family.title}
             {#each family.runners as runner}
                 <div
                     class="list-item"
                     class:list-item-downloaded={installedRunners[runner.name]}
-                class:list-item-active={runner.name === selectedVersion}
+                    class:list-item-active={runner.name === selectedVersion.name}
                     class:list-item-hidden={recommendable && !runner.recommended}
                     class:list-item-downloading={progress[runner.name]}
                     class:list-item-applying={applying[runner.name]}
                     class:list-item-disabled={disabledRunners[runner.name]}
 
                     on:click|self={() => {
-                    if (installedRunners[runner.name] && selectedVersion !== runner.name)
+                        if (installedRunners[runner.name] && selectedVersion.name !== runner.name)
                         {
-                        selectedVersion = runner.name;
+                            selectedVersion = runner;
 
                             Runners.current(runner);
                         }
@@ -103,5 +119,6 @@
                     </div>
                 </div>
             {/each}
+        {/if}
     {/each}
 </div>

src/components/SelectionBox.svelte

@@ -68,7 +68,6 @@
     >
         <span>{ $_(items[selectedValue]) }</span>
 
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <img src={Arrow} />
+        <img src={Arrow} alt="" />
     </div>
 </div>

src/sass/components/selectionList.sass

@@ -2,6 +2,45 @@
 
 @mixin themable($theme-name, $theme-map)
     body[data-theme=#{$theme-name}]
+        .list-title
+            display: inline-flex
+            align-items: center
+
+            background-color: map.get($theme-map, "background2")
+
+            width: calc(100% - 32px)
+            height: 48px
+
+            border-radius: 16px
+            margin: 4px 0
+            padding: 0 16px
+
+            cursor: pointer
+
+            &:first-child
+                margin-top: 16px
+
+            &:last-child
+                margin-bottom: 16px
+
+            span
+                font-size: larger
+
+            img
+                height: 12px
+                width: 12px
+
+                margin: 0 16px 0 auto
+
+                @if $theme-name == dark
+                    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+        .list-title-open
+            margin: 16px 0
+
+            img
+                transform: rotate(90deg)
+
         .list-item
             display: flex
             align-items: center