Merge branch 'svelte-check-fixes' of bajdev/mpckit into main

frontend/src/App.svelte

@@ -11,6 +11,8 @@
   onMount(refresh);
 
   const st = $derived(app.state);
+  // The bindings type Go slices as `T[] | null`; Go always sends arrays.
+  const pads = $derived(st?.pads ?? []);
 
   // Sequences by slot, for the grid and the panel.
   const seqBySlot = $derived(new Map((st?.sequences ?? []).map((q) => [q.slot, q])));
@@ -23,13 +25,13 @@
     });
   }
 
-  const padCounts = $derived(perBank((s) => (st?.pads[s]?.file ?? "") !== ""));
+  const padCounts = $derived(perBank((s) => (pads[s]?.file ?? "") !== ""));
   const seqCounts = $derived(perBank((s) => seqBySlot.has(s)));
 
   const padCells: Cell[] = $derived(
     st
       ? gridSlots(ui.padBank).map((slot) => {
-          const p = st.pads[slot];
+          const p = pads[slot];
           const badges = [tuneText(p.coarse, p.fine), p.muteGroup ? "M" + p.muteGroup : ""].filter(Boolean);
           return {
             slot,
@@ -46,7 +48,7 @@
     st
       ? gridSlots(ui.seqBank).map((slot) => {
           const q = seqBySlot.get(slot);
-          const label = st.pads[slot].label; // pad and sequence slots share labels
+          const label = pads[slot].label; // pad and sequence slots share labels
           return {
             slot,
             label,
@@ -98,7 +100,7 @@
 
   {#if st}
     {#if ui.tab === "pads"}
-      <main id="view-pads" class="panels" role="tabpanel" aria-labelledby="tab-pads">
+      <div id="view-pads" class="panels" role="tabpanel" aria-labelledby="tab-pads">
         <section class="panel grid-panel" aria-label="Pads">
           <div class="grid-head">
             <h2 class="eyebrow">Pad bank</h2>
@@ -116,10 +118,10 @@
           <SlotGrid cells={padCells} selected={ui.padSlot} onpick={(s) => (ui.padSlot = s)} />
           <p class="hint grid-hint">Click a pad to select and hear it. Drag a pad to move it, drag onto a filled pad to swap, hold Alt while dragging to copy. Drop a WAV file on any pad to assign it.</p>
         </section>
-        <PadPanel pad={st.pads[ui.padSlot]} limits={st.limits} />
-      </main>
+        <PadPanel pad={pads[ui.padSlot]} limits={st.limits} />
+      </div>
     {:else}
-      <main id="view-sequences" class="panels" role="tabpanel" aria-labelledby="tab-sequences">
+      <div id="view-sequences" class="panels" role="tabpanel" aria-labelledby="tab-sequences">
         <section class="panel grid-panel" aria-label="Sequence slots">
           <div class="grid-head">
             <h2 class="eyebrow">Sequence bank</h2>
@@ -138,7 +140,7 @@
           <p class="hint grid-hint">Each pad is one sequence slot, {st.limits.maxSequences} in total. Click an empty slot to add a sequence there.</p>
         </section>
         <SequencePanel slot={ui.seqSlot} seq={seqBySlot.get(ui.seqSlot)} limits={st.limits} />
-      </main>
+      </div>
     {/if}
 
     <footer class="mono">

frontend/src/lib/AboutModal.svelte

@@ -25,7 +25,7 @@
 
 <svelte:window onkeydown={keydown} />
 
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (clicking outside the dialog closes it; Escape and the Close button do the same from the keyboard) -->
 <div class="backdrop" onclick={(e) => e.target === e.currentTarget && onclose()}>
   <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="about-title">
     <h2 id="about-title">About mpckit</h2>

pull-requests/svelte-check-fixes/fix-svelte-check-errors-and-warnings.md

@@ -0,0 +1,21 @@
+# Fix svelte-check errors and warnings
+
+Branch: `svelte-check-fixes` → `main`
+
+## What changed
+
+bajdev's `npm run check` on the M4 code reported 4 errors and 3 warnings. This fixes all of them. (The fix was first pushed to `fit-window` after that PR had already been merged, so it comes as its own PR.)
+
+- **Errors** (`App.svelte`): the generated bindings type Go slices as `Pad[] | null`, because a nil Go slice encodes as `null`. Go always sends arrays, so `App.svelte` now reads `st?.pads ?? []` once and uses that everywhere.
+- **Warnings**:
+  - The Pads and Sequences panels were `<main role="tabpanel">`, which Svelte flags; they are now `<div>`s.
+  - The About backdrop (a click outside the dialog closes it) had a `svelte-ignore` with its two codes separated by a space. Svelte 5 needs a comma, so the ignore didn't apply. Escape and the Close button already cover the keyboard.
+
+No layout or behaviour changes.
+
+## Testing
+
+The server has no Node, so svelte-check hasn't been run there. Please run on the laptop:
+
+1. `npm run check` in `frontend`: 0 errors and 0 warnings.
+2. `wails3 dev`: the app looks and behaves as before (both tabs, About opens and closes).