add settings pane for info

src/View/Components/infoTile.tsx

@@ -1,18 +1,24 @@
 import * as React from "bloatless-react";
 
-export function InfoTile(icon: string, label: string, content: string|React.State<string>) {
-    let contentState: React.State<string>
+export function InfoTile(
+    icon: string,
+    label: string,
+    content: string | React.State<string>,
+) {
+    let contentState: React.State<string>;
     if (typeof content == "string") {
         contentState = new React.State(content);
     } else {
         contentState = content;
     }
 
-    return <div class="tile">
-        <span class="icon">{icon}</span>
-        <div>
-            <span>{label}</span>
-            <b class="break-word" subscribe:innerText={contentState}></b>
+    return (
+        <div class="tile">
+            <span class="icon">{icon}</span>
+            <div>
+                <span>{label}</span>
+                <b class="break-word" subscribe:innerText={contentState}></b>
+            </div>
         </div>
-    </div>;
+    );
 }

src/View/Components/splitModal.css

@@ -1,4 +1,4 @@
-.modal>div:has(.split-modal[extended]) {
+.modal > div:has(.split-modal[extended]) {
     max-width: 64rem;
 }
 

src/View/Components/splitModal.tsx

@@ -13,7 +13,10 @@ export function SplitModal(
         <div class="split-modal" toggle:extended={extendedStyle}>
             <div>
                 <div class="scroll-area" children:set={leftView}></div>
-                <div class="detail-button-wrapper" toggle:hidden={navigationState != undefined}>
+                <div
+                    class="detail-button-wrapper"
+                    toggle:hidden={navigationState != undefined}
+                >
                     <button class="ghost" on:click={scrollToDetails}>
                         <span
                             class="ellipsis"