chore(refactor): better inputs

components/realtime/mqtt.vue

@@ -10,6 +10,7 @@
             v-model="url"
             spellcheck="false"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>
@@ -44,7 +45,13 @@
         </li>
         <li>
           <label for="mqtt-message">{{ $t("message") }}</label>
-          <input id="mqtt-message" type="text" v-model="msg" spellcheck="false" />
+          <input
+            id="mqtt-message"
+            type="text"
+            v-model="msg"
+            spellcheck="false"
+            class="border-dashed md:border-l border-brdColor"
+          />
         </li>
         <div>
           <li>

components/realtime/socketio.vue

@@ -12,6 +12,7 @@
             v-model="url"
             @keyup.enter="urlValid ? toggleConnection() : null"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>
@@ -67,7 +68,12 @@
           </div>
         </li>
       </ul>
-      <ul v-for="(input, index) of communication.inputs" :key="`input-${index}`">
+      <ul
+        v-for="(input, index) of communication.inputs"
+        :key="`input-${index}`"
+        class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+        :class="{ 'border-t': index == 0 }"
+      >
         <li>
           <input
             name="message"

components/realtime/sse.vue

@@ -11,6 +11,7 @@
             v-model="server"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>

components/realtime/websocket.vue

@@ -12,6 +12,7 @@
             v-model="url"
             @keyup.enter="urlValid ? toggleConnection() : null"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>