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

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

web/src/components/misc/SectionHeading.svelte

@@ -8,6 +8,9 @@
     export let title: string;
     export let sectionId: string;
     export let beta = false;
+    export let copyData = "";
+
+    const sectionURL = `${$page.url.origin}${$page.url.pathname}#${sectionId}`;
 
     let copied = false;
 
@@ -19,19 +22,27 @@
 </script>
 
 <div class="heading-container">
-    <h3 class="content-title">{title}</h3>
+    <h3 class="content-title">
+        {title}
+    </h3>
+
     {#if beta}
-        <div class="beta-label">{$t("general.beta")}</div>
+        <div class="beta-label">
+            {$t("general.beta")}
+        </div>
     {/if}
+
     <button
         class="link-copy"
-        aria-label={copied ? $t("button.copied") : $t("button.copy.section")}
+        aria-label={copied
+            ? $t("button.copied")
+            : $t(`button.copy${copyData ? "" : ".section"}`)}
         on:click={() => {
             copied = true;
-            copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
+            copyURL(copyData || sectionURL);
         }}
     >
-        <CopyIcon check={copied} />
+        <CopyIcon check={copied} regularIcon={!!copyData} />
     </button>
 </div>
 

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;