From 1a92d2f46622294be63726a674127a19983103e0 Mon Sep 17 00:00:00 2001
From: Kevin Jablonski <kevjablonski@gmail.com>
Date: Thu, 18 Jun 2026 21:50:18 +0000
Subject: [PATCH 1/2] chore(tooltips): standardize auth tooltips with UTooltip

Signed-off-by: Kevin Jablonski <kevjablonski@gmail.com>
---
 components/UI/RemoveProviderConfirm.vue | 18 +++++----
 components/auth/OAuthProvider.vue       | 54 ++++++++++++++++---------
 components/auth/OIDCProvider.vue        | 54 ++++++++++++++++---------
 3 files changed, 79 insertions(+), 47 deletions(-)

diff --git a/components/UI/RemoveProviderConfirm.vue b/components/UI/RemoveProviderConfirm.vue
index a672c57..72d6537 100644
--- a/components/UI/RemoveProviderConfirm.vue
+++ b/components/UI/RemoveProviderConfirm.vue
@@ -4,15 +4,19 @@
     class="relative"
   >
     <!-- Trigger -->
-    <button
+    <UTooltip
       v-if="asIcon"
-      type="button"
-      title="Remove provider"
-      class="inline-flex items-center justify-center rounded-md p-1.5 text-gray-500 transition hover:bg-gray-100 hover:text-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-red-400"
-      @click="open = !open"
+      text="Remove provider"
     >
-      <TrashIcon class="h-4 w-4" />
-    </button>
+      <button
+        type="button"
+        aria-label="Remove provider"
+        class="inline-flex items-center justify-center rounded-md p-1.5 text-gray-500 transition hover:bg-gray-100 hover:text-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-red-400"
+        @click="open = !open"
+      >
+        <TrashIcon class="h-4 w-4" />
+      </button>
+    </UTooltip>
     <button
       v-else
       type="button"
diff --git a/components/auth/OAuthProvider.vue b/components/auth/OAuthProvider.vue
index 6b91538..de7e7ae 100644
--- a/components/auth/OAuthProvider.vue
+++ b/components/auth/OAuthProvider.vue
@@ -152,18 +152,19 @@
               type="text"
               class="flex-1"
             />
-            <button
-              type="button"
-              class="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
-              title="Fill with this server's callback URL"
-              @click="provider.callback = callbackUrl()"
-            >
-              <UIcon
-                name="i-heroicons-arrow-path"
-                class="h-3 w-3"
-              />
-              Fill
-            </button>
+            <UTooltip text="Fill with this server's callback URL">
+              <button
+                type="button"
+                class="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
+                @click="provider.callback = callbackUrl()"
+              >
+                <UIcon
+                  name="i-heroicons-arrow-path"
+                  class="h-3 w-3"
+                />
+                Fill
+              </button>
+            </UTooltip>
           </div>
           <p class="text-xs text-gray-400">
             The default value usually works as-is. Register this URL as an allowed callback/redirect URL with your
@@ -220,15 +221,28 @@
         >
           {{ connectionTest?.loading ? "Testing…" : "Test Connection" }}
         </button>
-        <button
-          type="button"
-          :disabled="loginTest?.loading"
-          class="rounded border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-          title="Requires saved config — opens a popup to run the full OAuth login flow without affecting your current session"
-          @click="testLogin"
+        <UTooltip
+          :ui="{
+            width: 'max-w-none'
+          }"
         >
-          {{ loginTest?.loading ? "Waiting…" : "Test Login" }}
-        </button>
+          <span class="inline-flex">
+            <button
+              type="button"
+              :disabled="loginTest?.loading"
+              class="rounded border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
+              @click="testLogin"
+            >
+              {{ loginTest?.loading ? "Waiting…" : "Test Login" }}
+            </button>
+          </span>
+
+          <template #text>
+            <span class="whitespace-nowrap">
+              Requires saved config — opens a popup to run the full OAuth login flow without affecting your current session
+            </span>
+          </template>
+        </UTooltip>
       </div>
 
       <AuthConnectionTestResult :result="connectionTest" />
diff --git a/components/auth/OIDCProvider.vue b/components/auth/OIDCProvider.vue
index 58d364b..bb3554a 100644
--- a/components/auth/OIDCProvider.vue
+++ b/components/auth/OIDCProvider.vue
@@ -98,18 +98,19 @@
               type="text"
               class="flex-1"
             />
-            <button
-              type="button"
-              class="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
-              title="Fill with this server's callback URL"
-              @click="provider.callback = callbackUrl()"
-            >
-              <UIcon
-                name="i-heroicons-arrow-path"
-                class="h-3 w-3"
-              />
-              Fill
-            </button>
+            <UTooltip text="Fill with this server's callback URL">
+              <button
+                type="button"
+                class="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
+                @click="provider.callback = callbackUrl()"
+              >
+                <UIcon
+                  name="i-heroicons-arrow-path"
+                  class="h-3 w-3"
+                />
+                Fill
+              </button>
+            </UTooltip>
           </div>
           <p class="text-xs text-gray-400">
             The default value usually works as-is. Register this URL as an allowed callback/redirect URL with your
@@ -203,15 +204,28 @@
         >
           {{ connectionTest?.loading ? "Testing…" : "Test Connection" }}
         </button>
-        <button
-          type="button"
-          :disabled="loginTest?.loading"
-          class="rounded border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-          title="Requires saved config — opens a popup to run the full OIDC login flow without affecting your current session"
-          @click="testLogin"
+        <UTooltip
+          :ui="{
+            width: 'max-w-none',
+          }"
         >
-          {{ loginTest?.loading ? "Waiting…" : "Test Login" }}
-        </button>
+          <span class="inline-flex">
+            <button
+              type="button"
+              :disabled="loginTest?.loading"
+              class="rounded border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
+              @click="testLogin"
+            >
+              {{ loginTest?.loading ? "Waiting…" : "Test Login" }}
+            </button>
+          </span>
+
+          <template #text>
+            <span class="whitespace-nowrap">
+              Requires saved config — opens a popup to run the full OIDC login flow without affecting your current session
+            </span>
+          </template>
+        </UTooltip>
       </div>
 
       <AuthConnectionTestResult :result="connectionTest" />

From d2a497b5b6cbf81dfd633a92587e520a50cac546 Mon Sep 17 00:00:00 2001
From: Mark Rivera <mcrivera@gmail.com>
Date: Wed, 1 Jul 2026 14:29:07 +0000
Subject: [PATCH 2/2] feat(tooltips): add keyboard-focus support via UITooltip
 wrapper

Add a UITooltip wrapper that forwards attrs/slots to UTooltip and
translates focusin/focusout into the mouseenter/mouseleave event of
UTooltip.

Modified three auth tooltips to use UITooltip.

Signed-off-by: Mark Rivera <mcrivera@gmail.com>
---
 components/UI/RemoveProviderConfirm.vue |  4 ++--
 components/UI/Tooltip.vue               | 24 ++++++++++++++++++++++++
 components/auth/OAuthProvider.vue       |  8 ++++----
 components/auth/OIDCProvider.vue        |  8 ++++----
 4 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 components/UI/Tooltip.vue

diff --git a/components/UI/RemoveProviderConfirm.vue b/components/UI/RemoveProviderConfirm.vue
index 72d6537..1b62120 100644
--- a/components/UI/RemoveProviderConfirm.vue
+++ b/components/UI/RemoveProviderConfirm.vue
@@ -4,7 +4,7 @@
     class="relative"
   >
     <!-- Trigger -->
-    <UTooltip
+    <UITooltip
       v-if="asIcon"
       text="Remove provider"
     >
@@ -16,7 +16,7 @@
       >
         <TrashIcon class="h-4 w-4" />
       </button>
-    </UTooltip>
+    </UITooltip>
     <button
       v-else
       type="button"
diff --git a/components/UI/Tooltip.vue b/components/UI/Tooltip.vue
new file mode 100644
index 0000000..bee761a
--- /dev/null
+++ b/components/UI/Tooltip.vue
@@ -0,0 +1,24 @@
+<template>
+  <UTooltip
+    v-bind="$attrs"
+    @focusin="onFocusin"
+    @focusout="onFocusout"
+  >
+    <slot />
+    <template
+      v-if="$slots.text"
+      #text
+    >
+      <slot name="text" />
+    </template>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "UITooltip", inheritAttrs: false });
+
+const onFocusin = (e: FocusEvent) =>
+  (e.currentTarget as HTMLElement).dispatchEvent(new MouseEvent("mouseenter"));
+const onFocusout = (e: FocusEvent) =>
+  (e.currentTarget as HTMLElement).dispatchEvent(new MouseEvent("mouseleave"));
+</script>
diff --git a/components/auth/OAuthProvider.vue b/components/auth/OAuthProvider.vue
index de7e7ae..d10fdbc 100644
--- a/components/auth/OAuthProvider.vue
+++ b/components/auth/OAuthProvider.vue
@@ -152,7 +152,7 @@
               type="text"
               class="flex-1"
             />
-            <UTooltip text="Fill with this server's callback URL">
+            <UITooltip text="Fill with this server's callback URL">
               <button
                 type="button"
                 class="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
@@ -164,7 +164,7 @@
                 />
                 Fill
               </button>
-            </UTooltip>
+            </UITooltip>
           </div>
           <p class="text-xs text-gray-400">
             The default value usually works as-is. Register this URL as an allowed callback/redirect URL with your
@@ -221,7 +221,7 @@
         >
           {{ connectionTest?.loading ? "Testing…" : "Test Connection" }}
         </button>
-        <UTooltip
+        <UITooltip
           :ui="{
             width: 'max-w-none'
           }"
@@ -242,7 +242,7 @@
               Requires saved config — opens a popup to run the full OAuth login flow without affecting your current session
             </span>
           </template>
-        </UTooltip>
+        </UITooltip>
       </div>
 
       <AuthConnectionTestResult :result="connectionTest" />
diff --git a/components/auth/OIDCProvider.vue b/components/auth/OIDCProvider.vue
index bb3554a..aa11659 100644
--- a/components/auth/OIDCProvider.vue
+++ b/components/auth/OIDCProvider.vue
@@ -98,7 +98,7 @@
               type="text"
               class="flex-1"
             />
-            <UTooltip text="Fill with this server's callback URL">
+            <UITooltip text="Fill with this server's callback URL">
               <button
                 type="button"
                 class="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
@@ -110,7 +110,7 @@
                 />
                 Fill
               </button>
-            </UTooltip>
+            </UITooltip>
           </div>
           <p class="text-xs text-gray-400">
             The default value usually works as-is. Register this URL as an allowed callback/redirect URL with your
@@ -204,7 +204,7 @@
         >
           {{ connectionTest?.loading ? "Testing…" : "Test Connection" }}
         </button>
-        <UTooltip
+        <UITooltip
           :ui="{
             width: 'max-w-none',
           }"
@@ -225,7 +225,7 @@
               Requires saved config — opens a popup to run the full OIDC login flow without affecting your current session
             </span>
           </template>
-        </UTooltip>
+        </UITooltip>
       </div>
 
       <AuthConnectionTestResult :result="connectionTest" />