feat: replace Radio page button descriptions with info-icon tooltips

web-ui/src/components/InfoTip.vue

@@ -0,0 +1,77 @@
+<script setup>
+// A small circled-"i" info icon. Shows `text` on hover/focus; clicking pins it
+// open (so it works on touch and stays put while reading).
+import { ref } from 'vue'
+
+defineProps({ text: { type: String, default: '' } })
+const pinned = ref(false)
+</script>
+
+<template>
+  <span
+    class="infotip"
+    :class="{ pinned }"
+    tabindex="0"
+    role="button"
+    :aria-label="text"
+    @click="pinned = !pinned"
+    @keydown.enter.prevent="pinned = !pinned"
+    @keydown.space.prevent="pinned = !pinned"
+    @blur="pinned = false"
+  >
+    <span class="dot" aria-hidden="true">i</span>
+    <span class="bubble">{{ text }}</span>
+  </span>
+</template>
+
+<style scoped>
+.infotip {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
+}
+.dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--muted);
+  color: var(--muted);
+  font: italic 700 11px/1 Georgia, "Times New Roman", serif;
+  user-select: none;
+}
+.infotip:hover .dot,
+.infotip:focus .dot,
+.infotip.pinned .dot {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.bubble {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: 30;
+  width: max-content;
+  max-width: 300px;
+  padding: 6px 9px;
+  background: var(--panel2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+  font-size: 12px;
+  line-height: 1.35;
+  white-space: normal;
+  text-align: left;
+}
+.infotip:hover .bubble,
+.infotip:focus .bubble,
+.infotip.pinned .bubble {
+  display: block;
+}
+</style>

web-ui/src/views/Manage.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { api } from '../api.js'
 import { fmtDateTime } from '../time.js'
+import InfoTip from '../components/InfoTip.vue'
 
 const tabs = [
   { key: 'stats', label: 'Overview' },
@@ -692,9 +693,7 @@ onMounted(() => loadTab('stats'))
             <button :disabled="advertSending" @click="sendAdvert">
               {{ advertSending ? 'Sending…' : 'Advert' }}
             </button>
-            <span class="muted">
-              Zero-hop reaches direct neighbors only; flood propagates through the mesh.
-            </span>
+            <InfoTip text="Zero-hop reaches direct neighbors only; flood propagates through the mesh." />
           </div>
 
           <div class="toolbar">
@@ -708,10 +707,7 @@ onMounted(() => loadTab('stats'))
               />
             </label>
             <button @click="applyAdvertInterval">Apply</button>
-            <span class="muted">
-              0 = disabled. Bot sends a flood advert every N hours; persists in the
-              database (mcbot.conf only seeds the first-run default).
-            </span>
+            <InfoTip text="0 = disabled. Bot sends a flood advert every N hours; persists in the database (mcbot.conf only seeds the first-run default)." />
           </div>
 
           <!-- Contact-table rollover -->
@@ -721,7 +717,7 @@ onMounted(() => loadTab('stats'))
               <button :disabled="statusLoading" @click="loadContactStatus">
                 {{ statusLoading ? 'Checking…' : 'Check contact table' }}
               </button>
-              <span class="muted">Reads the radio's contact list (takes a few seconds).</span>
+              <InfoTip text="Reads the radio's contact list (takes a few seconds)." />
             </div>
             <div v-if="contactStatus" class="decoded">
               <div class="kv">
@@ -748,13 +744,8 @@ onMounted(() => loadTab('stats'))
                 <button :disabled="evictBusy" @click="evictNow">
                   {{ evictBusy ? 'Evicting…' : 'Evict to headroom now' }}
                 </button>
+                <InfoTip text="Evicts the stalest contacts from the radio (bot users, owners, and recent DM peers are protected; the bot's database keeps the full archive). Policy changes here are runtime only — set radio_evict_* in mcbot.conf to persist across restarts." />
               </div>
-              <p class="muted" style="margin: 4px 12px 8px">
-                Evicts the stalest contacts from the radio (bot users, owners, and
-                recent DM peers are protected; the bot's database keeps the full
-                archive). Policy changes here are runtime only — set radio_evict_*
-                in mcbot.conf to persist across restarts.
-              </p>
             </div>
           </div>
 

webapi/static/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>mcbot admin</title>
-    <script type="module" crossorigin src="/assets/index-0UQo_2i_.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DGkh-RoD.css">
+    <script type="module" crossorigin src="/assets/index-Bo8_j3y1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CkEm1YS-.css">
   </head>
   <body>
     <div id="app"></div>