web/debug: add a copy button, fix page padding, refactor (#782)

Co-authored-by: wukko <me@wukko.me>

web/src/routes/settings/debug/+page.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { goto } from "$app/navigation";
-
     import { version } from "$lib/version";
     import { device, app } from "$lib/device";
     import { defaultNavPage } from "$lib/subnav";
     import settings, { storedSettings } from "$lib/state/settings";
 
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
+
+    $: sections = [
+        { title: "device", data: device },
+        { title: "app", data: app },
+        { title: "settings", data: $storedSettings },
+        { title: "version", data: $version },
+    ];
+
     onMount(() => {
         if (!$settings.advanced.debug) {
             goto(defaultNavPage("settings"), { replaceState: true });
@@ -15,38 +23,37 @@
 </script>
 
 {#if $settings.advanced.debug}
-    <div id="advanced-page">
-        <h3>device:</h3>
-        <div class="message-container subtext">
-            {JSON.stringify(device, null, 2)}
-        </div>
-
-        <h3>app:</h3>
-        <div class="message-container subtext">
-            {JSON.stringify(app, null, 2)}
-        </div>
-
-        <h3>settings:</h3>
-        <div class="message-container subtext">
-            {JSON.stringify($storedSettings, null, 2)}
-        </div>
-
-        <h3>version:</h3>
-        <div class="message-container subtext">
-            {JSON.stringify($version, null, 2)}
-        </div>
+    <div id="debug-page">
+        {#each sections as { title, data }, i}
+            <div class="debug-section">
+                <SectionHeading
+                    sectionId={title}
+                    {title}
+                    copyData={JSON.stringify(data)}
+                />
+                <div class="json-block subtext">
+                    {JSON.stringify(data, null, 2)}
+                </div>
+            </div>
+        {/each}
     </div>
 {/if}
 
 <style>
-    #advanced-page {
+    #debug-page {
         display: flex;
         flex-direction: column;
-        padding: var(--padding);
+        padding: calc(var(--subnav-padding) / 2);
         gap: var(--padding);
     }
 
-    .message-container {
+    .debug-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--padding);
+    }
+
+    .json-block {
         display: flex;
         flex-direction: column;
         line-break: anywhere;