Merge develop

src/UI/Base/FileSelector.svelte

@@ -12,28 +12,30 @@
   let id = Math.random() * 1000000000 + ""
 </script>
 
-<form  on:change|preventDefault={() => {
-      drawAttention = false
-      dispatcher("submit", inputElement.files)
-    }}
-       on:dragend={() => {
-      console.log("Drag end")
-      drawAttention = false
-    }}
-       on:dragenter|preventDefault|stopPropagation={(e) => {
-      console.log("Dragging enter")
-      drawAttention = true
-      e.dataTransfer.drop = "copy"
-    }}
-       on:dragstart={() => {
-      console.log("DragStart")
-      drawAttention = false
-    }}
-       on:drop|preventDefault|stopPropagation={(e) => {
-      console.log("Got a 'drop'")
-      drawAttention = false
-      dispatcher("submit", e.dataTransfer.files)
-    }}>
+<form
+  on:change|preventDefault={() => {
+    drawAttention = false
+    dispatcher("submit", inputElement.files)
+  }}
+  on:dragend={() => {
+    console.log("Drag end")
+    drawAttention = false
+  }}
+  on:dragenter|preventDefault|stopPropagation={(e) => {
+    console.log("Dragging enter")
+    drawAttention = true
+    e.dataTransfer.drop = "copy"
+  }}
+  on:dragstart={() => {
+    console.log("DragStart")
+    drawAttention = false
+  }}
+  on:drop|preventDefault|stopPropagation={(e) => {
+    console.log("Got a 'drop'")
+    drawAttention = false
+    dispatcher("submit", e.dataTransfer.files)
+  }}
+>
   <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} for={"fileinput" + id}>
     <slot />
   </label>
@@ -44,7 +46,6 @@
     id={"fileinput" + id}
     {multiple}
     name="file-input"
-   
     type="file"
   />
 </form>

src/UI/Base/FloatOver.svelte

@@ -11,7 +11,9 @@
 <div
   class="absolute top-0 right-0 h-screen w-screen p-4 md:p-6"
   style="background-color: #00000088; z-index: 20"
-  on:click={() => {dispatch("close")}}
+  on:click={() => {
+    dispatch("close")
+  }}
 >
   <div class="content normal-background" on:click|stopPropagation={() => {}}>
     <div class="h-full rounded-xl">

src/UI/Base/Hotkeys.ts

@@ -23,11 +23,11 @@ export default class Hotkeys {
     >([])
 
     private static textElementSelected(event: KeyboardEvent): boolean {
-        if(event.ctrlKey || event.altKey){
+        if (event.ctrlKey || event.altKey) {
             // This is an event with a modifier-key, lets not ignore it
             return false
         }
-        if(event.key === "Escape"){
+        if (event.key === "Escape") {
             return false // Another not-printable character that should not be ignored
         }
         return ["input", "textarea"].includes(document?.activeElement?.tagName?.toLowerCase())

src/UI/Base/TabbedGroup.svelte

@@ -12,21 +12,20 @@
    * E.g.
    * condition3 = new ImmutableStore(false) will always hide tab3 (the fourth tab)
    */
-  let tr = new ImmutableStore(true);
-  export let condition0: Store<boolean> = tr;
-  export let condition1: Store<boolean> = tr;
-  export let condition2: Store<boolean> = tr;
-  export let condition3: Store<boolean> = tr;
-  export let condition4: Store<boolean> = tr;
-  export let condition5: Store<boolean> = tr;
-
-  export let condition6: Store<boolean> = tr;
-  export let tab: UIEventSource<number> = new UIEventSource<number>(0);
-  let tabElements: HTMLElement[] = [];
-  $: tabElements[$tab]?.click();
+  const tr = new ImmutableStore(true)
+  export let condition0: Store<boolean> = tr
+  export let condition1: Store<boolean> = tr
+  export let condition2: Store<boolean> = tr
+  export let condition3: Store<boolean> = tr
+  export let condition4: Store<boolean> = tr
+  export let condition5: Store<boolean> = tr
+  export let condition6: Store<boolean> = tr
+  export let tab: UIEventSource<number> = new UIEventSource<number>(0)
+  let tabElements: HTMLElement[] = []
+  $: tabElements[$tab]?.click()
   $: {
     if (tabElements[tab.data]) {
-      window.setTimeout(() => tabElements[tab.data].click(), 50);
+      window.setTimeout(() => tabElements[tab.data].click(), 50)
     }
   }
 </script>
@@ -138,44 +137,44 @@
 </div>
 
 <style>
-    .tabbedgroup {
-        max-height: 100vh;
-        height: 100%;
-    }
+  .tabbedgroup {
+    max-height: 100vh;
+    height: 100%;
+  }
 
-    :global(.tabpanel) {
-        height: 100%;
-    }
+  :global(.tabpanel) {
+    height: 100%;
+  }
 
-    :global(.tabpanels) {
-        height: calc(100% - 2rem);
-    }
+  :global(.tabpanels) {
+    height: calc(100% - 2rem);
+  }
 
-    :global(.tab) {
-        margin: 0.25rem;
-        padding: 0.25rem;
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-        border-radius: 1rem;
-    }
+  :global(.tab) {
+    margin: 0.25rem;
+    padding: 0.25rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    border-radius: 1rem;
+  }
 
-    :global(.tab .flex) {
-        align-items: center;
-        gap: 0.25rem;
-    }
+  :global(.tab .flex) {
+    align-items: center;
+    gap: 0.25rem;
+  }
 
-    :global(.tab span|div) {
-        align-items: center;
-        gap: 0.25rem;
-        display: flex;
-    }
+  :global(.tab span|div) {
+    align-items: center;
+    gap: 0.25rem;
+    display: flex;
+  }
 
-    :global(.tab-selected svg) {
-        fill: var(--catch-detail-color-contrast);
-    }
+  :global(.tab-selected svg) {
+    fill: var(--catch-detail-color-contrast);
+  }
 
-    :global(.tab-unselected) {
-        background-color: var(--background-color) !important;
-        color: var(--foreground-color) !important;
-    }
+  :global(.tab-unselected) {
+    background-color: var(--background-color) !important;
+    color: var(--foreground-color) !important;
+  }
 </style>