feat: update stuff

src/lib/components/layout/ActionList.svelte

@@ -9,7 +9,7 @@
   import { onMount } from "svelte";
   import ActionListItem from "$lib/components/ActionListItem.svelte";
   import LL from "$i18n/i18n-svelte";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { get } from "svelte/store";
   import type { KeymapCategory } from "$lib/meta/types/actions";
   import Action from "../Action.svelte";
@@ -26,7 +26,7 @@
     currentAction?: number;
     nextAction?: number;
     autofocus?: boolean;
-    onselect: (id: number) => void;
+    onselect?: (id: number) => void;
     onclose?: () => void;
   } = $props();
 
@@ -84,13 +84,13 @@
 
   function select(id?: number) {
     if (id !== undefined) {
-      onselect(id);
+      onselect?.(id);
     }
   }
 
   function keyboardNavigation(event: KeyboardEvent) {
     if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
-      onselect(exact);
+      onselect?.(exact);
     } else if (event.key === "ArrowDown") {
       const element =
         resultList.querySelector("li:focus-within")?.nextSibling ??
@@ -131,11 +131,11 @@
       placeholder={$LL.actionSearch.PLACEHOLDER()}
     />
     {#if onclose}
-      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
+      <button onclick={() => select(0)} {@attach actionTooltip("", "shift+esc")}
         >{$LL.actionSearch.DELETE()}</button
       >
       <button
-        use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
+        {@attach actionTooltip($LL.modal.CLOSE(), "esc")}
         class="icon"
         onclick={onclose}>close</button
       >
@@ -176,9 +176,9 @@
             {#each actions as action (action.code)}
               <button
                 class="action-item"
-                draggable="true"
+                draggable={!onclose}
                 onclick={() => select(action.code)}
-                ondragstart={onselect === undefined
+                ondragstart={onclose === undefined
                   ? (event) => {
                       if (!event.dataTransfer) return;
                       event.stopPropagation();
@@ -202,50 +202,15 @@
 </div>
 
 <style lang="scss">
-  .filters {
-    display: flex;
-    gap: 4px;
-    border: none;
-
-    label {
-      border: 1px solid currentcolor;
-      border-radius: 6px;
-      padding-inline: 4px;
-      padding-block: 2px;
-      height: unset;
-
-      font-size: 14px;
-
-      &:has(:checked) {
-        background: var(--md-sys-color-secondary);
-        color: var(--md-sys-color-on-secondary);
-      }
-
-      input {
-        display: none;
-      }
-    }
-  }
-
   .action-item {
-    cursor: grab;
     margin: 0;
     padding: 0;
     height: auto;
     font: inherit;
-  }
 
-  dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    border: none;
-
-    background: rgba(0 0 0 / 60%);
-
-    width: 100%;
-    height: 100%;
+    &[draggable="true"] {
+      cursor: grab;
+    }
   }
 
   aside {

src/lib/components/layout/GenericLayout.svelte

@@ -28,7 +28,7 @@
     console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer");
   }
 
-  let { layoutInfo }: { layout: CompiledLayout } = $props();
+  let { layoutInfo }: { layoutInfo: CompiledLayout } = $props();
 
   function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
     return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2];

src/lib/components/layout/KeyText.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
-  import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
+  import type { CompiledLayoutKey } from "$lib/assets/layouts/layout.d.ts";
   import { layout } from "$lib/undo-redo.js";
   import { osLayout } from "$lib/os-layout.js";
   import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { activeProfile, activeLayer } from "$lib/serial/connection";
   import { getContext } from "svelte";
 
@@ -28,7 +28,12 @@
     middle: [number, number];
     pos: [number, number];
     rotate: number;
-    positions: [[number, number], [number, number], [number, number]];
+    positions: [
+      [number, number],
+      [number, number],
+      [number, number],
+      [number, number],
+    ];
   } = $props();
 </script>
 
@@ -67,7 +72,7 @@
       ? "0 0 0"
       : `${direction[0]?.toPrecision(2)}px ${direction[1]?.toPrecision(2)}px 0`}
     style:rotate="{rotate}deg"
-    use:action={{ title: tooltip }}
+    {@attach actionTooltip(tooltip)}
   >
     {#if code !== 0 && code != 1023}
       {dynamicMapping || icon || display || id || `0x${code.toString(16)}`}

src/lib/components/layout/KeyboardKey.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
+  import type { CompiledLayoutKey } from "$lib/assets/layouts/layout.d.ts";
   import { getContext } from "svelte";
   import type { VisualLayoutConfig } from "./visual-layout.js";
   import KeyText from "$lib/components/layout/KeyText.svelte";
@@ -64,6 +64,7 @@
         [-1, 1],
         [-1, -1],
         [1, -1],
+        [1, 1],
       ]}
     />
   {:else if key.shape === "quarter-circle"}

src/lib/components/layout/Layout.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { deviceMeta, serialPort } from "$lib/serial/connection";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte";
   import { activeProfile, activeLayer } from "$lib/serial/connection";
   import { fade, fly } from "svelte/transition";
   import { restoreFromFile } from "$lib/backup/backup";
   import type { CompiledLayout } from "$lib/assets/layouts/layout.d.ts";
 
-  const layouts = {
+  const layouts: Record<string, (() => Promise<CompiledLayout>) | undefined> = {
     ONE: () =>
       import("$lib/assets/layouts/one.layout.yml").then(
         (it) => it.default as CompiledLayout,
@@ -45,7 +45,7 @@
 
 <div class="container">
   {#if $serialPort}
-    {#await layouts[$serialPort.device]() then layoutInfo}
+    {#await layouts[$serialPort.device]?.() then layoutInfo}
       <fieldset transition:fade>
         <div class="layers">
           {#each Array.from({ length: $serialPort.layerCount }, (_, i) => i) as layer}
@@ -65,7 +65,7 @@
         </div>
         {#if $deviceMeta?.factoryDefaults?.layout}
           <button
-            use:action={{ title: "Reset Layout" }}
+            {@attach actionTooltip("Reset Layout")}
             transition:fly={{ x: -8 }}
             class="icon reset-layout"
             onclick={() =>
@@ -75,7 +75,9 @@
         {/if}
       </fieldset>
 
-      <GenericLayout {layoutInfo} />
+      {#if layoutInfo}
+        <GenericLayout {layoutInfo} />
+      {/if}
     {/await}
   {/if}
 </div>