feat: make the contact methods more presentable, and clarify exact types

src/views/ContactEditView.vue

@@ -55,56 +55,70 @@
 
     <!-- Contact Methods -->
     <div class="mt-4">
-      <h2 class="text-lg font-medium text-gray-700">Contact Methods</h2>
-      <div
-        v-for="(method, index) in contactMethods"
-        :key="index"
-        class="flex mt-2"
-      >
-        <input
-          v-model="method.label"
-          type="text"
-          class="block w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
-          placeholder="Label"
-        />
-        <input
-          v-model="method.type"
-          type="text"
-          class="block ml-2 w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
-          placeholder="Type"
-        />
-        <div class="relative">
-          <button
-            class="px-2 py-1 bg-gray-200 rounded-md"
-            @click="toggleDropdown(index)"
-          >
-            <font-awesome icon="caret-down" class="fa-fw" />
-          </button>
-          <div
-            v-if="dropdownIndex === index"
-            class="absolute bg-white border border-gray-300 rounded-md mt-1"
-          >
-            <div
-              v-for="methodType in contactMethodTypes"
-              :key="methodType.value"
-              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, methodType.value)"
+      <div v-for="(method, index) in contactMethods" :key="index" class="mt-4">
+        <!-- Type and Value Row -->
+        <div class="flex gap-2">
+          <div class="flex-none w-32">
+            <label class="block text-xs font-medium text-gray-700 mb-1">
+              Type
+            </label>
+            <select
+              v-model="method.type"
+              class="block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
             >
-              {{ methodType.label }}
-            </div>
+              <option value="">—</option>
+              <option
+                v-for="methodType in contactMethodTypes"
+                :key="methodType.value"
+                :value="methodType.value"
+              >
+                {{ methodType.label }}
+              </option>
+            </select>
           </div>
+          <div class="flex-1">
+            <label class="block text-xs font-medium text-gray-700 mb-1">
+              Value
+            </label>
+            <input
+              v-model="method.value"
+              type="text"
+              class="block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="Number, email, etc."
+            />
+          </div>
+          <button
+            class="self-end pb-0.5 text-red-500"
+            @click="removeContactMethod(index)"
+          >
+            <font-awesome icon="trash-can" class="fa-fw" />
+          </button>
+        </div>
+
+        <!-- WhatsApp Help Text -->
+        <div
+          v-if="method.type === 'WHATSAPP'"
+          class="mt-1 ml-[calc(8rem+0.5rem)] text-xs text-gray-600 italic"
+        >
+          Must include country code and only numbers (e.g., 12225551234)
+        </div>
+
+        <!-- Label Row -->
+        <div class="mt-2 flex justify-end">
+          <div class="flex-1 ml-[calc(8rem+0.5rem)]">
+            <label class="block text-xs font-medium text-gray-700 mb-1">
+            </label>
+            <input
+              v-model="method.label"
+              type="text"
+              class="block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="Label / Note"
+            />
+          </div>
+          <div class="w-[2.5rem]"></div>
         </div>
-        <input
-          v-model="method.value"
-          type="text"
-          class="block ml-2 w-1/2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
-          placeholder="Number, email, etc."
-        />
-        <button class="ml-2 text-red-500" @click="removeContactMethod(index)">
-          <font-awesome icon="trash-can" class="fa-fw" />
-        </button>
       </div>
-      <button class="mt-2" @click="addContactMethod">
+      <button class="mt-4" @click="addContactMethod">
         <font-awesome
           icon="plus"
           class="fa-fw px-2 py-2.5 bg-green-500 text-green-100 rounded-full"
@@ -210,12 +224,10 @@ export default class ContactEditView extends Vue {
   contactNotes = "";
   /** Array of editable contact methods */
   contactMethods: Array<ContactMethod> = [];
-  /** Currently open dropdown index, null if none open */
-  dropdownIndex: number | null = null;
 
   /** App string constants */
   AppString = AppString;
-  /** Contact method types for dropdown */
+  /** Contact method types for datalist suggestions */
   contactMethodTypes = CONTACT_METHOD_TYPES;
 
   /**
@@ -273,29 +285,6 @@ export default class ContactEditView extends Vue {
     this.contactMethods.splice(index, 1);
   }
 
-  /**
-   * Toggles the type selection dropdown for a contact method
-   *
-   * If the clicked dropdown is already open, closes it.
-   * If another dropdown is open, closes it and opens the clicked one.
-   *
-   * @param index The array index of the method whose dropdown to toggle
-   */
-  toggleDropdown(index: number) {
-    this.dropdownIndex = this.dropdownIndex === index ? null : index;
-  }
-
-  /**
-   * Sets the type for a contact method and closes the dropdown
-   *
-   * @param index The array index of the method to update
-   * @param type The new type value (CELL, EMAIL, WHATSAPP)
-   */
-  setMethodType(index: number, type: string) {
-    this.contactMethods[index].type = type;
-    this.dropdownIndex = null;
-  }
-
   /**
    * Saves the edited contact information to the database
    *