Multiple refactors

- Use aria-labelledby instead of aria-label where possible
- Replace magic numbers with explicitly defined constants
- Add input textboxes for values previously only changed with sliders

src/lib/layouts/write/WriteButton.svelte

@@ -4,6 +4,7 @@
   import { toast } from 'svelte-sonner'
   import { getDeviceContext } from '$lib/contexts/device.svelte'
   import { getRenderedContext } from '$lib/contexts/rendered.svelte'
+  import { BYTES_IN_A_ROW, INKCLIP_HEIGHT, INKCLIP_WIDTH, WRITE_TIME } from '$lib/constants'
 
   interface Props {
     onprogress: (inPropgress: boolean) => void
@@ -31,15 +32,15 @@
       }
     }
 
-    const buffer = new Uint8Array(5000)
-    for (let y = 0; y < 200; y++) {
-      for (let xStride = 0; xStride < 25; xStride++) {
+    const buffer = new Uint8Array(INKCLIP_HEIGHT * BYTES_IN_A_ROW)
+    for (let y = 0; y < INKCLIP_HEIGHT; y++) {
+      for (let xStride = 0; xStride < BYTES_IN_A_ROW; xStride++) {
         let cell = 0x0
         for (let xStroll = 0; xStroll < 8; xStroll++) {
-          const index = y * 200 + xStride * 8 + xStroll
+          const index = y * INKCLIP_WIDTH + xStride * 8 + xStroll
           cell |= renderedCtx.rendered[index] << xStroll
         }
-        buffer[y * 25 + xStride] = cell
+        buffer[y * BYTES_IN_A_ROW + xStride] = cell
       }
     }
 
@@ -53,7 +54,7 @@
     } finally {
       setTimeout(() => {
         inProgress = false
-      }, 2000)
+      }, WRITE_TIME)
     }
 
     toast.success('Wrote pattern to device')