From 04d619eb2df768a8dd56b3de538e2c8ff5217ef6 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Fri, 13 Mar 2026 08:45:12 -0400
Subject: [PATCH] fix: replace PrimeVue dialogs with plain Tailwind modals

PrimeVue Dialog wasn't rendering regardless of theme config.
Rewrote both Host and Group edit dialogs using Teleport + Tailwind,
matching the rest of the app's styling pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../connections/GroupEditDialog.vue           |  77 +++---
 .../components/connections/HostEditDialog.vue | 241 +++++++++---------
 2 files changed, 169 insertions(+), 149 deletions(-)

diff --git a/frontend/components/connections/GroupEditDialog.vue b/frontend/components/connections/GroupEditDialog.vue
index 333fdef..116585a 100644
--- a/frontend/components/connections/GroupEditDialog.vue
+++ b/frontend/components/connections/GroupEditDialog.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Dialog, InputText, Select, Button } from 'primevue'
-
 const props = defineProps<{
   visible: boolean
   group?: any | null
@@ -25,8 +23,7 @@ const isEdit = computed(() => !!props.group?.id)
 const title = computed(() => isEdit.value ? 'Edit Group' : 'New Group')
 
 const parentOptions = computed(() => {
-  const options = [{ label: 'No Parent (top-level)', value: null }]
-  // Flatten groups for parent selection, excluding self if editing
+  const options: { label: string; value: number | null }[] = [{ label: 'No Parent (top-level)', value: null }]
   const addGroups = (groups: any[], prefix = '') => {
     for (const g of groups) {
       if (isEdit.value && g.id === props.group?.id) continue
@@ -48,6 +45,10 @@ watch(() => props.visible, (v) => {
   }
 })
 
+function close() {
+  emit('update:visible', false)
+}
+
 async function save() {
   error.value = ''
   saving.value = true
@@ -58,7 +59,7 @@ async function save() {
       await connections.createGroup(form.value)
     }
     emit('saved')
-    emit('update:visible', false)
+    close()
   } catch (e: any) {
     error.value = e.data?.message || 'Failed to save group'
   } finally {
@@ -68,36 +69,42 @@ async function save() {
 </script>
 
 <template>
-  <Dialog
-    :visible="visible"
-    @update:visible="emit('update:visible', $event)"
-    :header="title"
-    :modal="true"
-    :closable="true"
-    :style="{ width: '380px' }"
-  >
-    <div class="space-y-4 pt-2">
-      <!-- Name -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Group Name *</label>
-        <InputText v-model="form.name" placeholder="Production Servers" class="w-full" autofocus />
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center">
+      <!-- Backdrop -->
+      <div class="absolute inset-0 bg-black/60" @click="close" />
+      <!-- Dialog -->
+      <div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-xl w-[380px] max-h-[90vh] overflow-y-auto">
+        <!-- Header -->
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <h3 class="text-lg font-semibold text-white">{{ title }}</h3>
+          <button @click="close" class="text-gray-500 hover:text-white text-xl leading-none">&times;</button>
+        </div>
+        <!-- Body -->
+        <div class="px-5 py-4 space-y-4">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Group Name *</label>
+            <input v-model="form.name" type="text" placeholder="Production Servers" autofocus
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none" />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Parent Group</label>
+            <select v-model="form.parentId"
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none">
+              <option v-for="opt in parentOptions" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
+            </select>
+          </div>
+          <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
+        </div>
+        <!-- Footer -->
+        <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-800">
+          <button @click="close" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded">Cancel</button>
+          <button @click="save" :disabled="saving || !form.name"
+            class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded disabled:opacity-50">
+            {{ saving ? 'Saving...' : 'Save' }}
+          </button>
+        </div>
       </div>
-
-      <!-- Parent -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Parent Group</label>
-        <Select v-model="form.parentId" :options="parentOptions" optionLabel="label" optionValue="value" class="w-full" />
-      </div>
-
-      <!-- Error -->
-      <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
     </div>
-
-    <template #footer>
-      <div class="flex justify-end gap-2">
-        <Button label="Cancel" severity="secondary" @click="emit('update:visible', false)" />
-        <Button :label="saving ? 'Saving...' : 'Save'" :disabled="saving || !form.name" @click="save" />
-      </div>
-    </template>
-  </Dialog>
+  </Teleport>
 </template>
diff --git a/frontend/components/connections/HostEditDialog.vue b/frontend/components/connections/HostEditDialog.vue
index f90c49b..aff5753 100644
--- a/frontend/components/connections/HostEditDialog.vue
+++ b/frontend/components/connections/HostEditDialog.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Dialog, InputText, Select, Textarea, InputGroup, InputGroupAddon, ToggleSwitch, Tag, Button } from 'primevue'
-
 const props = defineProps<{
   visible: boolean
   host: any | null
@@ -33,22 +31,22 @@ const error = ref('')
 const isEdit = computed(() => !!props.host?.id)
 const title = computed(() => isEdit.value ? 'Edit Host' : 'New Host')
 
-const protocolOptions = [
-  { label: 'SSH', value: 'ssh' },
-  { label: 'RDP', value: 'rdp' },
-]
+const groupOptions = computed(() => {
+  const opts: { label: string; value: number | null }[] = [{ label: 'No Group', value: null }]
+  for (const g of connections.groups) {
+    opts.push({ label: g.name, value: g.id })
+  }
+  return opts
+})
 
-const groupOptions = computed(() => [
-  { label: 'No Group', value: null },
-  ...connections.groups.map((g: any) => ({ label: g.name, value: g.id })),
-])
-
-// Load credentials for dropdown
 const credentials = ref<any[]>([])
-const credentialOptions = computed(() => [
-  { label: 'No Credential', value: null },
-  ...credentials.value.map((c: any) => ({ label: c.name, value: c.id })),
-])
+const credentialOptions = computed(() => {
+  const opts: { label: string; value: number | null }[] = [{ label: 'No Credential', value: null }]
+  for (const c of credentials.value) {
+    opts.push({ label: c.name, value: c.id })
+  }
+  return opts
+})
 
 async function loadCredentials() {
   try {
@@ -64,7 +62,6 @@ watch(() => props.visible, (v) => {
   if (v) {
     loadCredentials()
     if (props.host?.id) {
-      // Edit mode — populate form
       form.value = {
         name: props.host.name || '',
         hostname: props.host.hostname || '',
@@ -77,11 +74,10 @@ watch(() => props.visible, (v) => {
         color: props.host.color || '',
       }
     } else {
-      // New host — reset with optional groupId pre-fill
       form.value = {
         name: '',
         hostname: '',
-        port: props.host?.groupId ? 22 : 22,
+        port: 22,
         protocol: 'ssh',
         groupId: props.host?.groupId ?? null,
         credentialId: null,
@@ -94,7 +90,6 @@ watch(() => props.visible, (v) => {
   }
 })
 
-// Auto-set default port when protocol changes
 watch(() => form.value.protocol, (proto) => {
   if (proto === 'rdp' && form.value.port === 22) form.value.port = 3389
   if (proto === 'ssh' && form.value.port === 3389) form.value.port = 22
@@ -112,6 +107,10 @@ function removeTag(tag: string) {
   form.value.tags = form.value.tags.filter((t) => t !== tag)
 }
 
+function close() {
+  emit('update:visible', false)
+}
+
 async function save() {
   error.value = ''
   saving.value = true
@@ -130,7 +129,7 @@ async function save() {
     }
 
     emit('saved')
-    emit('update:visible', false)
+    close()
   } catch (e: any) {
     error.value = e.data?.message || 'Failed to save host'
   } finally {
@@ -140,101 +139,115 @@ async function save() {
 </script>
 
 <template>
-  <Dialog
-    :visible="visible"
-    @update:visible="emit('update:visible', $event)"
-    :header="title"
-    :modal="true"
-    :closable="true"
-    :style="{ width: '480px' }"
-    class="bg-gray-900"
-  >
-    <div class="space-y-4 pt-2">
-      <!-- Name -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Name *</label>
-        <InputText v-model="form.name" placeholder="My Server" class="w-full" />
-      </div>
-
-      <!-- Hostname + Port -->
-      <div class="flex gap-3">
-        <div class="flex-1">
-          <label class="block text-sm text-gray-400 mb-1">Hostname / IP *</label>
-          <InputText v-model="form.hostname" placeholder="192.168.1.1" class="w-full" />
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center">
+      <!-- Backdrop -->
+      <div class="absolute inset-0 bg-black/60" @click="close" />
+      <!-- Dialog -->
+      <div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-xl w-[480px] max-h-[90vh] overflow-y-auto">
+        <!-- Header -->
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <h3 class="text-lg font-semibold text-white">{{ title }}</h3>
+          <button @click="close" class="text-gray-500 hover:text-white text-xl leading-none">&times;</button>
         </div>
-        <div class="w-24">
-          <label class="block text-sm text-gray-400 mb-1">Port</label>
-          <InputText v-model.number="form.port" type="number" class="w-full" />
+        <!-- Body -->
+        <div class="px-5 py-4 space-y-4">
+          <!-- Name -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Name *</label>
+            <input v-model="form.name" type="text" placeholder="My Server" autofocus
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none" />
+          </div>
+
+          <!-- Hostname + Port -->
+          <div class="flex gap-3">
+            <div class="flex-1">
+              <label class="block text-sm text-gray-400 mb-1">Hostname / IP *</label>
+              <input v-model="form.hostname" type="text" placeholder="192.168.1.1"
+                class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none" />
+            </div>
+            <div class="w-24">
+              <label class="block text-sm text-gray-400 mb-1">Port</label>
+              <input v-model.number="form.port" type="number"
+                class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none" />
+            </div>
+          </div>
+
+          <!-- Protocol -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Protocol</label>
+            <select v-model="form.protocol"
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none">
+              <option value="ssh">SSH</option>
+              <option value="rdp">RDP</option>
+            </select>
+          </div>
+
+          <!-- Group -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Group</label>
+            <select v-model="form.groupId"
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none">
+              <option v-for="opt in groupOptions" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
+            </select>
+          </div>
+
+          <!-- Credential -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Credential</label>
+            <select v-model="form.credentialId"
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none">
+              <option v-for="opt in credentialOptions" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
+            </select>
+          </div>
+
+          <!-- Color -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Color (optional)</label>
+            <div class="flex items-center gap-2">
+              <input v-model="form.color" type="color" class="h-8 w-12 rounded cursor-pointer bg-gray-800 border-0" />
+              <span class="text-xs text-gray-500">{{ form.color || 'None' }}</span>
+              <button v-if="form.color" @click="form.color = ''" class="text-xs text-gray-600 hover:text-red-400">Clear</button>
+            </div>
+          </div>
+
+          <!-- Tags -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Tags</label>
+            <div class="flex gap-2 mb-2">
+              <input v-model="tagInput" type="text" placeholder="Add tag..."
+                class="flex-1 px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white text-sm focus:border-sky-500 focus:outline-none"
+                @keydown.enter.prevent="addTag" />
+              <button @click="addTag" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-sm rounded text-gray-300">Add</button>
+            </div>
+            <div class="flex flex-wrap gap-1">
+              <span v-for="tag in form.tags" :key="tag"
+                class="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-1 rounded">
+                {{ tag }}
+                <button @click="removeTag(tag)" class="text-gray-500 hover:text-red-400">&times;</button>
+              </span>
+            </div>
+          </div>
+
+          <!-- Notes -->
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Notes</label>
+            <textarea v-model="form.notes" rows="3" placeholder="Optional notes..."
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white text-sm focus:border-sky-500 focus:outline-none resize-none" />
+          </div>
+
+          <!-- Error -->
+          <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
+        </div>
+        <!-- Footer -->
+        <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-800">
+          <button @click="close" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded">Cancel</button>
+          <button @click="save" :disabled="saving || !form.name || !form.hostname"
+            class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded disabled:opacity-50">
+            {{ saving ? 'Saving...' : 'Save' }}
+          </button>
         </div>
       </div>
-
-      <!-- Protocol -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Protocol</label>
-        <Select v-model="form.protocol" :options="protocolOptions" optionLabel="label" optionValue="value" class="w-full" />
-      </div>
-
-      <!-- Group -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Group</label>
-        <Select v-model="form.groupId" :options="groupOptions" optionLabel="label" optionValue="value" class="w-full" />
-      </div>
-
-      <!-- Credential -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Credential</label>
-        <Select v-model="form.credentialId" :options="credentialOptions" optionLabel="label" optionValue="value" class="w-full" />
-      </div>
-
-      <!-- Color -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Color (optional)</label>
-        <div class="flex items-center gap-2">
-          <input v-model="form.color" type="color" class="h-8 w-12 rounded cursor-pointer bg-gray-800 border-0" />
-          <span class="text-xs text-gray-500">{{ form.color || 'None' }}</span>
-          <button v-if="form.color" @click="form.color = ''" class="text-xs text-gray-600 hover:text-red-400">Clear</button>
-        </div>
-      </div>
-
-      <!-- Tags -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Tags</label>
-        <div class="flex gap-2 mb-2">
-          <InputText
-            v-model="tagInput"
-            placeholder="Add tag..."
-            class="flex-1 text-sm"
-            @keydown.enter.prevent="addTag"
-          />
-          <button @click="addTag" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-sm rounded text-gray-300">Add</button>
-        </div>
-        <div class="flex flex-wrap gap-1">
-          <span
-            v-for="tag in form.tags"
-            :key="tag"
-            class="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-1 rounded"
-          >
-            {{ tag }}
-            <button @click="removeTag(tag)" class="text-gray-500 hover:text-red-400">&times;</button>
-          </span>
-        </div>
-      </div>
-
-      <!-- Notes -->
-      <div>
-        <label class="block text-sm text-gray-400 mb-1">Notes</label>
-        <Textarea v-model="form.notes" rows="3" class="w-full text-sm" placeholder="Optional notes..." />
-      </div>
-
-      <!-- Error -->
-      <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
     </div>
-
-    <template #footer>
-      <div class="flex justify-end gap-2">
-        <Button label="Cancel" severity="secondary" @click="emit('update:visible', false)" />
-        <Button :label="saving ? 'Saving...' : 'Save'" :disabled="saving || !form.name || !form.hostname" @click="save" />
-      </div>
-    </template>
-  </Dialog>
+  </Teleport>
 </template>