From 7194ffc6d4571b72703e2a16a01e28a05343a3c8 Mon Sep 17 00:00:00 2001
From: Ivan <ivan@quad4.io>
Date: Sun, 12 Apr 2026 19:12:35 -0500
Subject: [PATCH] refactor(components): format

---
 .../src/frontend/components/map/MapPage.vue   |  4 +-
 .../frontend/components/tools/BotsPage.vue    | 88 +++++++++++--------
 .../components/tools/PaperMessagePage.vue     | 41 ++++++---
 .../frontend/components/tools/RNPathPage.vue  | 17 +++-
 .../components/tools/RNPathTracePage.vue      | 13 ++-
 .../components/tools/RNodeFlasherPage.vue     |  4 +-
 6 files changed, 109 insertions(+), 58 deletions(-)

diff --git a/meshchatx/src/frontend/components/map/MapPage.vue b/meshchatx/src/frontend/components/map/MapPage.vue
index 4f3aa2d..103e9f6 100644
--- a/meshchatx/src/frontend/components/map/MapPage.vue
+++ b/meshchatx/src/frontend/components/map/MapPage.vue
@@ -15,9 +15,7 @@
                 class="flex flex-wrap items-center gap-x-1.5 gap-y-2 sm:ml-auto sm:flex-nowrap sm:gap-2 sm:justify-end min-w-0"
             >
                 <!-- offline/online toggle -->
-                <div
-                    class="flex items-center bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5 sm:p-1 min-w-0 max-w-full"
-                >
+                <div class="flex items-center bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5 sm:p-1 min-w-0 max-w-full">
                     <button
                         class="p-1.5 sm:p-2 rounded-lg text-gray-500 hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors shrink-0"
                         title="Map Discovered Interfaces"
diff --git a/meshchatx/src/frontend/components/tools/BotsPage.vue b/meshchatx/src/frontend/components/tools/BotsPage.vue
index 76ac562..9636d06 100644
--- a/meshchatx/src/frontend/components/tools/BotsPage.vue
+++ b/meshchatx/src/frontend/components/tools/BotsPage.vue
@@ -44,7 +44,10 @@
                                 class="rounded-lg border border-dashed border-gray-300 dark:border-zinc-700 bg-gray-50/50 dark:bg-zinc-900/50 p-4 flex flex-col items-center justify-center min-h-[140px] opacity-70"
                             >
                                 <div class="p-2 bg-gray-100 dark:bg-zinc-800 rounded-lg mb-2">
-                                    <MaterialDesignIcon icon-name="plus" class="size-6 text-gray-400 dark:text-gray-500" />
+                                    <MaterialDesignIcon
+                                        icon-name="plus"
+                                        class="size-6 text-gray-400 dark:text-gray-500"
+                                    />
                                 </div>
                                 <div class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
                                     {{ $t("bots.more_bots_coming") }}
@@ -75,7 +78,9 @@
                                         />
                                     </div>
                                     <div class="min-w-0">
-                                        <div class="font-bold text-gray-900 dark:text-white truncate">{{ bot.name }}</div>
+                                        <div class="font-bold text-gray-900 dark:text-white truncate">
+                                            {{ bot.name }}
+                                        </div>
                                         <div class="text-xs font-mono text-gray-500 break-all">
                                             {{ bot.address || runningMap[bot.id]?.address || "Not running" }}
                                         </div>
@@ -87,42 +92,44 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-wrap items-center gap-1.5 sm:gap-2 justify-end sm:shrink-0 pt-1 sm:pt-0 border-t border-gray-100 dark:border-zinc-800 sm:border-0">
-                                        <template v-if="runningMap[bot.id]">
-                                            <button
-                                                class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                                :title="$t('bots.stop_bot')"
-                                                @click="stopBot(bot.id)"
-                                            >
-                                                <MaterialDesignIcon icon-name="stop" class="size-5" />
-                                            </button>
-                                            <button
-                                                class="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
-                                                :title="$t('bots.restart_bot')"
-                                                @click="restartExisting(bot)"
-                                            >
-                                                <MaterialDesignIcon icon-name="refresh" class="size-5" />
-                                            </button>
-                                        </template>
-                                        <template v-else>
-                                            <button class="primary-chip px-3 py-1 text-xs" @click="startExisting(bot)">
-                                                {{ $t("bots.start_bot") }}
-                                            </button>
-                                        </template>
-                                        <button
-                                            class="p-2 text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
-                                            :title="$t('bots.export_identity')"
-                                            @click="exportIdentity(bot.id)"
-                                        >
-                                            <MaterialDesignIcon icon-name="export" class="size-5" />
-                                        </button>
+                                <div
+                                    class="flex flex-wrap items-center gap-1.5 sm:gap-2 justify-end sm:shrink-0 pt-1 sm:pt-0 border-t border-gray-100 dark:border-zinc-800 sm:border-0"
+                                >
+                                    <template v-if="runningMap[bot.id]">
                                         <button
                                             class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                            :title="$t('bots.delete_bot')"
-                                            @click="deleteBot(bot.id)"
+                                            :title="$t('bots.stop_bot')"
+                                            @click="stopBot(bot.id)"
                                         >
-                                            <MaterialDesignIcon icon-name="delete" class="size-5" />
+                                            <MaterialDesignIcon icon-name="stop" class="size-5" />
                                         </button>
+                                        <button
+                                            class="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
+                                            :title="$t('bots.restart_bot')"
+                                            @click="restartExisting(bot)"
+                                        >
+                                            <MaterialDesignIcon icon-name="refresh" class="size-5" />
+                                        </button>
+                                    </template>
+                                    <template v-else>
+                                        <button class="primary-chip px-3 py-1 text-xs" @click="startExisting(bot)">
+                                            {{ $t("bots.start_bot") }}
+                                        </button>
+                                    </template>
+                                    <button
+                                        class="p-2 text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                                        :title="$t('bots.export_identity')"
+                                        @click="exportIdentity(bot.id)"
+                                    >
+                                        <MaterialDesignIcon icon-name="export" class="size-5" />
+                                    </button>
+                                    <button
+                                        class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                        :title="$t('bots.delete_bot')"
+                                        @click="deleteBot(bot.id)"
+                                    >
+                                        <MaterialDesignIcon icon-name="delete" class="size-5" />
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -168,10 +175,19 @@
                     </div>
 
                     <div class="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 sm:justify-end pt-2">
-                        <button type="button" class="secondary-chip px-6 py-2 w-full sm:w-auto" @click="selectedTemplate = null">
+                        <button
+                            type="button"
+                            class="secondary-chip px-6 py-2 w-full sm:w-auto"
+                            @click="selectedTemplate = null"
+                        >
                             {{ $t("bots.cancel") }}
                         </button>
-                        <button type="button" class="primary-chip px-6 py-2 w-full sm:w-auto" :disabled="isStarting" @click="startBot">
+                        <button
+                            type="button"
+                            class="primary-chip px-6 py-2 w-full sm:w-auto"
+                            :disabled="isStarting"
+                            @click="startBot"
+                        >
                             <span
                                 v-if="isStarting"
                                 class="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"
diff --git a/meshchatx/src/frontend/components/tools/PaperMessagePage.vue b/meshchatx/src/frontend/components/tools/PaperMessagePage.vue
index 66097e6..66b00a4 100644
--- a/meshchatx/src/frontend/components/tools/PaperMessagePage.vue
+++ b/meshchatx/src/frontend/components/tools/PaperMessagePage.vue
@@ -5,7 +5,9 @@
                 <!-- header -->
                 <div class="border-b border-gray-200 dark:border-zinc-800 pb-4">
                     <div class="flex items-start gap-3 min-w-0">
-                        <div class="p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg shrink-0">
+                        <div
+                            class="p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg shrink-0"
+                        >
                             <MaterialDesignIcon icon-name="qrcode" class="size-6" />
                         </div>
                         <div class="min-w-0">
@@ -22,10 +24,19 @@
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                     <!-- composer -->
                     <div class="space-y-4 min-w-0">
-                        <section class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950">
-                            <div class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50">
-                                <h2 class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white">
-                                    <MaterialDesignIcon icon-name="pencil-outline" class="size-5 text-gray-400 shrink-0" />
+                        <section
+                            class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950"
+                        >
+                            <div
+                                class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50"
+                            >
+                                <h2
+                                    class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white"
+                                >
+                                    <MaterialDesignIcon
+                                        icon-name="pencil-outline"
+                                        class="size-5 text-gray-400 shrink-0"
+                                    />
                                     Compose Message
                                 </h2>
                             </div>
@@ -91,9 +102,15 @@
                         </section>
 
                         <!-- read / ingest section -->
-                        <section class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950">
-                            <div class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50">
-                                <h2 class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white">
+                        <section
+                            class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950"
+                        >
+                            <div
+                                class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50"
+                            >
+                                <h2
+                                    class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white"
+                                >
                                     <MaterialDesignIcon icon-name="qrcode-scan" class="size-5 text-gray-400 shrink-0" />
                                     Ingest Paper Message
                                 </h2>
@@ -137,8 +154,12 @@
                             v-if="generatedUri"
                             class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950"
                         >
-                            <div class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-blue-50/80 dark:bg-blue-900/20">
-                                <h2 class="text-base font-semibold text-blue-600 dark:text-blue-400">Generated QR Code</h2>
+                            <div
+                                class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-blue-50/80 dark:bg-blue-900/20"
+                            >
+                                <h2 class="text-base font-semibold text-blue-600 dark:text-blue-400">
+                                    Generated QR Code
+                                </h2>
                             </div>
                             <div class="px-4 py-4 sm:p-6 flex flex-col items-center text-gray-900 dark:text-gray-100">
                                 <div class="p-3 bg-white rounded-2xl shadow-inner border border-gray-100 mb-6">
diff --git a/meshchatx/src/frontend/components/tools/RNPathPage.vue b/meshchatx/src/frontend/components/tools/RNPathPage.vue
index 84357e4..469840c 100644
--- a/meshchatx/src/frontend/components/tools/RNPathPage.vue
+++ b/meshchatx/src/frontend/components/tools/RNPathPage.vue
@@ -6,7 +6,10 @@
         >
             <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                 <div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg shrink-0">
-                    <MaterialDesignIcon icon-name="route" class="size-5 sm:size-6 text-indigo-600 dark:text-indigo-400" />
+                    <MaterialDesignIcon
+                        icon-name="route"
+                        class="size-5 sm:size-6 text-indigo-600 dark:text-indigo-400"
+                    />
                 </div>
                 <div class="min-w-0">
                     <h1 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white truncate">RNPath</h1>
@@ -264,7 +267,9 @@
             <!-- manual actions -->
             <div v-if="tab === 'actions'" class="max-w-2xl mx-auto space-y-6">
                 <!-- request path -->
-                <section class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4">
+                <section
+                    class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4"
+                >
                     <h2 class="text-lg font-bold">Request Path</h2>
                     <p class="text-sm text-gray-500">Broadcast a path request for a destination hash.</p>
                     <div class="flex flex-col sm:flex-row gap-2">
@@ -286,7 +291,9 @@
                 </section>
 
                 <!-- drop all via -->
-                <section class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4">
+                <section
+                    class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4"
+                >
                     <h2 class="text-lg font-bold">Drop All Via</h2>
                     <p class="text-sm text-gray-500">
                         Remove all known paths routed through a specific transport instance.
@@ -310,7 +317,9 @@
                 </section>
 
                 <!-- drop queues -->
-                <section class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4">
+                <section
+                    class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4"
+                >
                     <h2 class="text-lg font-bold">Drop Announce Queues</h2>
                     <p class="text-sm text-gray-500">
                         Clear all outbound announce packets currently queued on all interfaces.
diff --git a/meshchatx/src/frontend/components/tools/RNPathTracePage.vue b/meshchatx/src/frontend/components/tools/RNPathTracePage.vue
index 0332f77..b380308 100644
--- a/meshchatx/src/frontend/components/tools/RNPathTracePage.vue
+++ b/meshchatx/src/frontend/components/tools/RNPathTracePage.vue
@@ -36,7 +36,9 @@
         <div class="flex-1 overflow-y-auto">
             <div class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6">
                 <!-- main input card -->
-                <div class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6">
+                <div
+                    class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6"
+                >
                     <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                         <div class="relative flex-1 min-w-0">
                             <input
@@ -109,7 +111,9 @@
                         class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"
                     >
                         <!-- compact summary bar -->
-                        <div class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1 overflow-hidden">
+                        <div
+                            class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1 overflow-hidden"
+                        >
                             <div class="flex flex-wrap items-center divide-x divide-gray-100 dark:divide-zinc-800">
                                 <div class="flex-1 min-w-[120px] p-3 md:p-4 flex flex-col items-center text-center">
                                     <div class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">
@@ -145,7 +149,9 @@
                         </div>
 
                         <!-- path visualization -->
-                        <div class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 md:p-10 lg:p-16">
+                        <div
+                            class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 md:p-10 lg:p-16"
+                        >
                             <!-- Desktop View (Horizontal) -->
                             <div class="hidden md:flex items-start justify-center min-w-fit py-4">
                                 <template v-for="(node, idx) in traceResult.path" :key="'d-' + idx">
@@ -374,4 +380,3 @@ export default {
     },
 };
 </script>
-
diff --git a/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
index 28ed1bf..46c611f 100644
--- a/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
+++ b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
@@ -40,7 +40,9 @@
         <!-- content -->
         <div class="flex-1 min-h-0 overflow-y-auto p-3 sm:p-6 space-y-4 sm:space-y-6">
             <!-- setup card: Select device & Firmware -->
-            <div class="border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 rounded-lg overflow-hidden">
+            <div
+                class="border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 rounded-lg overflow-hidden"
+            >
                 <div class="grid grid-cols-1 md:grid-cols-2">
                     <!-- Left: Device Selection -->
                     <div class="p-6 border-b md:border-b-0 md:border-r border-gray-100 dark:border-zinc-800 space-y-4">