refactor: cleanup

src/env.d.ts

@@ -7,11 +7,11 @@ interface ImportMetaEnv {
   readonly TAURI_ARCH?: string
   readonly TAURI_DEBUG?: boolean
   readonly TAURI_PLATFORM_TYPE?: string
+
+  readonly VITE_HOMEPAGE_URL: string
+  readonly VITE_BUGS_URL: string
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
-
-declare const HOMEPAGE_URL: string
-declare const BUGS_URL: string

src/lib/components/layout/Layout.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
-  import {deviceLayout, serialPort} from "$lib/serial/connection"
+  import {serialPort} from "$lib/serial/connection"
   import {action} from "$lib/title"
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte"
   import {getContext} from "svelte"
   import type {Writable} from "svelte/store"
-  import {csvLayoutToJson, isCsvLayout} from "$lib/backup/compat/legacy-layout"
-  import type {CharaLayoutFile} from "$lib/share/chara-file"
-
-  export let layoutOverride: "ONE" | "LITE" | undefined = undefined
+  import type {VisualLayout} from "$lib/serialization/visual-layout"
 
   $: device = $serialPort?.device ?? "ONE"
   const activeLayer = getContext<Writable<number>>("active-layer")
@@ -19,20 +16,10 @@
   ] as const
 
   const layouts = {
-    ONE: () => import("$lib/assets/layouts/one.yml"),
-    LITE: () => import("$lib/assets/layouts/lite.yml"),
-    X: () => import("$lib/assets/layouts/generic/103-key.yml"),
+    ONE: () => import("$lib/assets/layouts/one.yml").then(it => it.default as VisualLayout),
+    LITE: () => import("$lib/assets/layouts/lite.yml").then(it => it.default as VisualLayout),
+    X: () => import("$lib/assets/layouts/generic/103-key.yml").then(it => it.default as VisualLayout),
   }
-
-  async function importLayout() {
-    const file = await fileInput.files?.item(0)?.text()
-    if (!file) return
-    const importedLayout = isCsvLayout(file) ? csvLayoutToJson(file) : (JSON.parse(file) as CharaLayoutFile)
-    if (importedLayout.type === "layout" && importedLayout.charaVersion === 1)
-      $deviceLayout = importedLayout.layout
-  }
-
-  let fileInput: HTMLInputElement
 </script>
 
 <div class="container">
@@ -49,21 +36,12 @@
     {/each}
   </fieldset>
 
-  {#await layouts[layoutOverride || device]() then { default: visualLayout }}
+  {#await layouts[device]() then visualLayout}
     <GenericLayout {visualLayout} />
   {/await}
 </div>
 
 <style lang="scss">
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-  }
-
   .container {
     display: flex;
     flex-direction: column;

src/lib/dialogs/ConfirmDialog.svelte

@@ -27,26 +27,9 @@
     text-align: center;
   }
 
-  dialog {
-    min-width: 300px;
-    max-width: 512px;
-
-    color: var(--md-sys-color-on-background);
-
-    background: var(--md-sys-color-background);
-    border: none;
-    border-radius: 38px;
-    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
-  }
-
   .buttons {
     display: flex;
     justify-content: flex-end;
     width: 100%;
   }
-
-  dialog::backdrop {
-    opacity: 0.5;
-    background: black;
-  }
 </style>

src/lib/dialogs/confirm-dialog.ts

@@ -15,7 +15,6 @@ export async function askForConfirmation(
       abortTitle,
     },
   })
-  dialog.show()
 
   let resolvePromise: (value: boolean) => void
   const resultPromise = new Promise<boolean>(resolve => {

src/routes/+layout.ts

@@ -6,9 +6,9 @@ export const prerender = true
 export const trailingSlash = "always"
 
 export const load = (async ({url, data, fetch}) => {
-  const importFile = new URLSearchParams(url.search).get("import")
+  const importFile = browser && new URLSearchParams(url.search).get("import")
   return {
     ...data,
-    importFile: browser && importFile ? await charaFileFromUriComponent(importFile, fetch) : undefined,
+    importFile: importFile ? await charaFileFromUriComponent(importFile, fetch) : undefined,
   }
 }) satisfies LayoutLoad

src/routes/ConnectionPopup.svelte

@@ -57,7 +57,16 @@
       </div>
     </div>
     {#if powerDialog}
-      <div class="backdrop" transition:fade={{duration: 250}} on:click={() => (powerDialog = !powerDialog)} />
+      <div
+        class="backdrop"
+        role="button"
+        tabindex="-1"
+        transition:fade={{duration: 250}}
+        on:click={() => (powerDialog = !powerDialog)}
+        on:keypress={event => {
+          if (event.key === "Enter") powerDialog = !powerDialog
+        }}
+      />
       <dialog open transition:slide={{duration: 250}}>
         <h3>{$LL.deviceManager.bootMenu.TITLE()}</h3>
         <button

src/routes/Footer.svelte

@@ -34,10 +34,13 @@
 <footer>
   <ul>
     <li>
-      <a href={HOMEPAGE_URL} rel="noreferrer" target="_blank"><span class="icon">commit</span> v{version}</a>
+      <!-- svelte-ignore not-defined -->
+      <a href={import.meta.env.VITE_HOMEPAGE_URL} rel="noreferrer" target="_blank"
+        ><span class="icon">commit</span> v{version}</a
+      >
     </li>
     <li>
-      <a href={BUGS_URL} rel="noreferrer" target="_blank"
+      <a href={import.meta.env.VITE_BUGS_URL} rel="noreferrer" target="_blank"
         ><span class="icon">bug_report</span> File an issue</a
       >
     </li>

src/routes/config/layout/+page.svelte

@@ -65,8 +65,4 @@
     width: 100%;
     height: 100%;
   }
-
-  input[type="file"] {
-    display: none;
-  }
 </style>

src/routes/config/settings/+page.svelte

@@ -97,7 +97,7 @@
     </fieldset>
 
     <fieldset>
-      <legend><label>Device</label></legend>
+      <legend>Device</legend>
       <label>Boot message<input type="checkbox" use:setting={{id: 93}} /></label>
       <label>Realtime Feedback<input type="checkbox" use:setting={{id: 92}} /></label>
       <label>
@@ -118,7 +118,7 @@
       <fieldset>
         <legend><label><input type="checkbox" />RGB</label></legend>
         <label>Brightness<input type="range" min="0" max="50" step="1" /></label>
-        <label>Color</label>
+        Color
         <label>Reactive Keys<input type="checkbox" /></label>
       </fieldset>
     {/if}
@@ -141,10 +141,6 @@
   legend > label {
     font-size: 24px;
     font-weight: bold;
-
-    > input {
-      font-size: 12px;
-    }
   }
 
   fieldset {
@@ -230,6 +226,7 @@
     }
   }
 
+  // stylelint-disable-next-line
   form label:has(:global(.pending-changes)) {
     color: var(--md-sys-color-tertiary);
   }

vite.config.ts

@@ -13,6 +13,9 @@ const {homepage, bugs} = JSON.parse(
   await readFile(fileURLToPath(new URL("package.json", import.meta.url)), "utf8"),
 )
 
+process.env.VITE_HOMEPAGE_URL = homepage
+process.env.VITE_BUGS_URL = bugs.url
+
 export default defineConfig({
   build: {
     // we rely on the serial api, so just chrome is fine
@@ -21,11 +24,7 @@ export default defineConfig({
       external: isTauri ? [/virtual:pwa.*/] : [],
     },
   },
-  define: {
-    HOMEPAGE_URL: `"${homepage}"`,
-    BUGS_URL: `"${bugs.url}"`,
-  },
-  envPrefix: "TAURI_",
+  envPrefix: ["TAURI_", "VITE_"],
   plugins: [
     ViteYaml(),
     sveltekit(),