Show and copy paired client UUIDs

src_assets/common/assets/web/troubleshooting.html

@@ -135,10 +135,21 @@
       </div>
       <ul class="list-group list-group-flush" v-if="clients && clients.length > 0">
         <li v-for="client in clients" :key="client.uuid" class="list-group-item d-flex align-items-center">
-          <div class="flex-grow-1">{{ client.name !== "" ? client.name : $t('troubleshooting.unpair_single_unknown') }}</div>
+          <div class="flex-grow-1">
-          <button class="btn btn-danger ms-auto" @click="unpairSingle(client.uuid)">
+            <div>{{ client.name !== "" ? client.name : $t('troubleshooting.unpair_single_unknown') }}</div>
+            <div class="text-muted" style="font-size: 0.8em">
+              <span class="font-monospace">{{ client.uuid }}</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-2 ms-auto">
+            <button class="btn btn-outline-secondary btn-sm" @click="copyClientUuid(client.uuid)">
+              <copy :size="16" class="icon"></copy>
+              Copy UUID
+            </button>
+            <button class="btn btn-danger" @click="unpairSingle(client.uuid)">
               <trash-2 :size="18" class="icon"></trash-2>
             </button>
+          </div>
         </li>
       </ul>
       <ul v-else class="list-group list-group-flush">
@@ -677,6 +688,15 @@
         clickedApplyBanner() {
           this.showApplyMessage = false;
         },
+        copyClientUuid(uuid) {
+          if (!uuid) {
+            return;
+          }
+
+          navigator.clipboard.writeText(uuid).catch(() => {
+            window.prompt("Copy client UUID", uuid);
+          });
+        },
         copyLogs() {
           // Copy the filtered view if a filter is active.
           navigator.clipboard.writeText(this.actualLogs);