From 393e6896ecf0aa246997fb33de4c637208943da2 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 18 Jul 2021 13:17:58 +0530
Subject: [PATCH] refactor(ui): more pages

---
 components/http/Parameters.vue    |   2 +-
 components/realtime/Log.vue       |  16 +-
 components/realtime/Mqtt.vue      | 224 +++++++++-----------
 components/realtime/Socketio.vue  | 272 ++++++++++++------------
 components/realtime/Sse.vue       | 101 ++++-----
 components/realtime/Websocket.vue | 330 +++++++++++++++---------------
 components/smart/Tabs.vue         |   1 -
 components/teams/index.vue        |   2 +-
 pages/doc.vue                     |  13 +-
 pages/graphql.vue                 | 263 ++++++++++++------------
 pages/realtime.vue                |  30 ++-
 11 files changed, 628 insertions(+), 626 deletions(-)

diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 62c891a4e..eab0d8703 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -13,7 +13,7 @@
         justify-between
       "
     >
-      <label for="paramList" class="font-semibold text-xs">
+      <label class="font-semibold text-xs">
         {{ $t("parameter_list") }}
       </label>
       <div>
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index a573cfb2d..48c22d93e 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -1,6 +1,20 @@
 <template>
   <div class="flex flex-col">
-    <label for="log">{{ title }}</label>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
+        top-0
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label for="log" class="font-semibold text-xs py-2">{{ title }}</label>
+    </div>
     <div ref="log" name="log" class="realtime-log">
       <span v-if="log">
         <span
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 7343acf85..eb82e5156 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,130 +1,110 @@
 <template>
-  <div>
-    <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
-        <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="overflow-auto">
-            <AppSection label="request">
-              <ul>
-                <li>
-                  <label for="mqtt-url">{{ $t("url") }}</label>
-                  <input
-                    id="mqtt-url"
-                    v-model="url"
-                    type="url"
-                    spellcheck="false"
-                    class="input md:rounded-bl-lg"
-                    :placeholder="$t('url')"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <ButtonSecondary
-                      id="connect"
-                      :disabled="!validUrl"
-                      class="
-                        rounded-b-lg
-                        button
-                        md:rounded-bl-none md:rounded-br-lg
-                      "
-                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
-                      :label="
-                        connectionState ? $t('disconnect') : $t('connect')
-                      "
-                      reverse
-                      @click.native="toggleConnection"
-                    />
-                  </li>
-                </div>
-              </ul>
-            </AppSection>
-          </Pane>
-          <Pane class="overflow-auto">
-            <AppSection label="response">
-              <ul>
-                <li>
-                  <RealtimeLog :title="$t('log')" :log="log" />
-                </li>
-              </ul>
-            </AppSection>
-          </Pane>
-        </Splitpanes>
-      </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto">
-        <AppSection label="messages">
-          <ul>
-            <li>
-              <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
-              <input
-                id="pub_topic"
-                v-model="pub_topic"
-                class="input"
-                type="text"
-                spellcheck="false"
-              />
-            </li>
-            <li>
-              <label for="mqtt-message">{{ $t("message") }}</label>
-              <input
-                id="mqtt-message"
-                v-model="msg"
-                type="text"
-                spellcheck="false"
-                class="border-dashed border-divider input md:border-l"
-              />
-            </li>
-            <div>
-              <li>
-                <ButtonSecondary
-                  id="publish"
-                  class="button"
-                  name="get"
-                  :disabled="!canpublish"
-                  icon="send"
-                  :label="$t('mqtt_publish')"
-                  @click.native="publish"
-                />
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
-              <input
-                id="sub_topic"
-                v-model="sub_topic"
-                type="text"
-                spellcheck="false"
-                class="input md:rounded-bl-lg"
-              />
-            </li>
-            <div>
-              <li>
-                <ButtonSecondary
-                  id="subscribe"
-                  name="get"
-                  :disabled="!cansubscribe"
+  <Splitpanes vertical :dbl-click-splitter="false">
+    <Pane class="overflow-auto hide-scrollbar">
+      <Splitpanes horizontal :dbl-click-splitter="false">
+        <Pane class="overflow-auto hide-scrollbar">
+          <AppSection label="request">
+            <div class="bg-primary flex p-4 top-0 z-10 sticky">
+              <div class="flex-1 inline-flex">
+                <input
+                  id="mqtt-url"
+                  v-model="url"
+                  type="url"
+                  spellcheck="false"
                   class="
-                    rounded-b-lg
-                    button
-                    md:rounded-bl-none md:rounded-br-lg
+                    bg-primaryLight
+                    border border-divider
+                    rounded-l-lg
+                    font-mono
+                    text-secondaryDark
+                    w-full
+                    py-1
+                    px-4
+                    transition
+                    truncate
+                    focus:outline-none focus:border-accent
                   "
-                  :icon="subscriptionState ? 'sync_disabled' : 'sync'"
-                  :label="
-                    subscriptionState
-                      ? $t('mqtt_unsubscribe')
-                      : $t('mqtt_subscribe')
-                  "
-                  reverse
-                  @click.native="toggleSubscription"
+                  :placeholder="$t('url')"
                 />
-              </li>
+                <ButtonPrimary
+                  id="connect"
+                  :disabled="!validUrl"
+                  class="rounded-l-none"
+                  :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                  :label="connectionState ? $t('disconnect') : $t('connect')"
+                  reverse
+                  @click.native="toggleConnection"
+                />
+              </div>
             </div>
-          </ul>
-        </AppSection>
-      </Pane>
-    </Splitpanes>
-  </div>
+          </AppSection>
+        </Pane>
+        <Pane class="overflow-auto hide-scrollbar">
+          <AppSection label="response">
+            <RealtimeLog :title="$t('log')" :log="log" />
+          </AppSection>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      max-size="30"
+      size="25"
+      min-size="20"
+      class="overflow-auto hide-scrollbar"
+    >
+      <AppSection label="messages">
+        <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
+        <input
+          id="pub_topic"
+          v-model="pub_topic"
+          class="input"
+          type="text"
+          spellcheck="false"
+        />
+        <label for="mqtt-message">{{ $t("message") }}</label>
+        <input
+          id="mqtt-message"
+          v-model="msg"
+          type="text"
+          spellcheck="false"
+          class="border-dashed border-divider input md:border-l"
+        />
+        <div>
+          <ButtonSecondary
+            id="publish"
+            class="button"
+            name="get"
+            :disabled="!canpublish"
+            icon="send"
+            :label="$t('mqtt_publish')"
+            @click.native="publish"
+          />
+        </div>
+        <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
+        <input
+          id="sub_topic"
+          v-model="sub_topic"
+          type="text"
+          spellcheck="false"
+          class="input md:rounded-bl-lg"
+        />
+        <div>
+          <ButtonSecondary
+            id="subscribe"
+            name="get"
+            :disabled="!cansubscribe"
+            class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
+            :icon="subscriptionState ? 'sync_disabled' : 'sync'"
+            :label="
+              subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
+            "
+            reverse
+            @click.native="toggleSubscription"
+          />
+        </div>
+      </AppSection>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script>
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index c969c2ccb..5ed083abd 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,148 +1,136 @@
 <template>
-  <div>
-    <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
-        <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="overflow-auto">
-            <AppSection label="request">
-              <ul>
-                <li>
-                  <label for="socketio-url">{{ $t("url") }}</label>
-                  <input
-                    id="socketio-url"
-                    v-model="url"
-                    type="url"
-                    spellcheck="false"
-                    :class="{ error: !urlValid }"
-                    class="input md:rounded-bl-lg"
-                    :placeholder="$t('url')"
-                    @keyup.enter="urlValid ? toggleConnection() : null"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <label for="socketio-path">{{ $t("path") }}</label>
-                    <input
-                      id="socketio-path"
-                      v-model="path"
-                      class="input"
-                      spellcheck="false"
-                    />
-                  </li>
-                </div>
-                <div>
-                  <li>
-                    <ButtonSecondary
-                      id="connect"
-                      :disabled="!urlValid"
-                      name="connect"
-                      class="
-                        rounded-b-lg
-                        button
-                        md:rounded-bl-none md:rounded-br-lg
-                      "
-                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
-                      :label="
-                        !connectionState ? $t('connect') : $t('disconnect')
-                      "
-                      reverse
-                      @click.native="toggleConnection"
-                    />
-                  </li>
-                </div>
-              </ul>
-            </AppSection>
-          </Pane>
-          <Pane class="overflow-auto">
-            <AppSection label="response">
-              <ul>
-                <li>
-                  <RealtimeLog :title="$t('log')" :log="communication.log" />
-                </li>
-              </ul>
-            </AppSection>
-          </Pane>
-        </Splitpanes>
-      </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto">
-        <AppSection label="messages">
-          <ul>
-            <li>
-              <label for="event_name">{{ $t("event_name") }}</label>
-              <input
-                id="event_name"
-                v-model="communication.eventName"
-                class="input"
-                name="event_name"
-                type="text"
-                :readonly="!connectionState"
-              />
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <div class="flex flex-1">
-                <label>{{ $t("message") }}s</label>
+  <Splitpanes vertical :dbl-click-splitter="false">
+    <Pane class="overflow-auto hide-scrollbar">
+      <Splitpanes horizontal :dbl-click-splitter="false">
+        <Pane class="overflow-auto hide-scrollbar">
+          <AppSection label="request">
+            <div class="bg-primary flex p-4 top-0 z-10 sticky">
+              <div class="flex-1 inline-flex">
+                <input
+                  id="socketio-url"
+                  v-model="url"
+                  type="url"
+                  spellcheck="false"
+                  :class="{ error: !urlValid }"
+                  class="
+                    bg-primaryLight
+                    border border-divider
+                    rounded-l-lg
+                    font-mono
+                    text-secondaryDark
+                    w-full
+                    py-1
+                    px-4
+                    transition
+                    truncate
+                    focus:outline-none focus:border-accent
+                  "
+                  :placeholder="$t('url')"
+                  @keyup.enter="urlValid ? toggleConnection() : null"
+                />
+                <input
+                  id="socketio-path"
+                  v-model="path"
+                  class="
+                    bg-primaryLight
+                    border border-divider
+                    font-mono
+                    text-secondaryDark
+                    w-full
+                    py-1
+                    px-4
+                    transition
+                    truncate
+                    focus:outline-none focus:border-accent
+                  "
+                  spellcheck="false"
+                />
+                <ButtonPrimary
+                  id="connect"
+                  :disabled="!urlValid"
+                  name="connect"
+                  class="rounded-l-none"
+                  :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                  :label="!connectionState ? $t('connect') : $t('disconnect')"
+                  reverse
+                  @click.native="toggleConnection"
+                />
               </div>
-            </li>
-          </ul>
-          <ul
-            v-for="(input, index) of communication.inputs"
-            :key="`input-${index}`"
-            :class="{ 'border-t': index == 0 }"
-            class="
-              divide-y divide-dashed divide-divider
-              border-b border-dashed border-divider
-              md:divide-x md:divide-y-0
-            "
-          >
-            <li>
-              <input
-                v-model="communication.inputs[index]"
-                class="input"
-                name="message"
-                type="text"
-                :readonly="!connectionState"
-                @keyup.enter="connectionState ? sendMessage() : null"
-              />
-            </li>
-            <div v-if="index + 1 !== communication.inputs.length">
-              <li>
-                <ButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('delete')"
-                  icon="delete"
-                  @click.native="removeCommunicationInput({ index })"
-                />
-              </li>
             </div>
-            <div v-if="index + 1 === communication.inputs.length">
-              <li>
-                <ButtonSecondary
-                  id="send"
-                  class="button"
-                  name="send"
-                  :disabled="!connectionState"
-                  icon="send"
-                  :label="$t('send')"
-                  @click.native="sendMessage"
-                />
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <ButtonSecondary
-                icon="add"
-                :label="$t('add_new')"
-                @click.native="addCommunicationInput"
-              />
-            </li>
-          </ul>
-        </AppSection>
-      </Pane>
-    </Splitpanes>
-  </div>
+          </AppSection>
+        </Pane>
+        <Pane class="overflow-auto hide-scrollbar">
+          <AppSection label="response">
+            <RealtimeLog :title="$t('log')" :log="communication.log" />
+          </AppSection>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      max-size="30"
+      size="25"
+      min-size="20"
+      class="overflow-auto hide-scrollbar"
+    >
+      <AppSection label="messages">
+        <label for="event_name">{{ $t("event_name") }}</label>
+        <input
+          id="event_name"
+          v-model="communication.eventName"
+          class="input"
+          name="event_name"
+          type="text"
+          :readonly="!connectionState"
+        />
+        <div class="flex flex-1">
+          <label>{{ $t("message") }}s</label>
+        </div>
+        <div
+          v-for="(input, index) of communication.inputs"
+          :key="`input-${index}`"
+          :class="{ 'border-t': index == 0 }"
+          class="
+            divide-y divide-dashed divide-divider
+            border-b border-dashed border-divider
+            md:divide-x md:divide-y-0
+          "
+        >
+          <input
+            v-model="communication.inputs[index]"
+            class="input"
+            name="message"
+            type="text"
+            :readonly="!connectionState"
+            @keyup.enter="connectionState ? sendMessage() : null"
+          />
+          <div v-if="index + 1 !== communication.inputs.length">
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
+              icon="delete"
+              @click.native="removeCommunicationInput({ index })"
+            />
+          </div>
+          <div v-if="index + 1 === communication.inputs.length">
+            <ButtonSecondary
+              id="send"
+              class="button"
+              name="send"
+              :disabled="!connectionState"
+              icon="send"
+              :label="$t('send')"
+              @click.native="sendMessage"
+            />
+          </div>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addCommunicationInput"
+          />
+        </div>
+      </AppSection>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script>
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index ac75235d2..60924e82a 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,54 +1,55 @@
 <template>
-  <div>
-    <Splitpanes horizontal :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
-        <AppSection label="request">
-          <ul>
-            <li>
-              <label for="server">{{ $t("server") }}</label>
-              <input
-                id="server"
-                v-model="server"
-                type="url"
-                :class="{ error: !serverValid }"
-                class="input md:rounded-bl-lg"
-                :placeholder="$t('url')"
-                @keyup.enter="serverValid ? toggleSSEConnection() : null"
-              />
-            </li>
-            <div>
-              <li>
-                <ButtonSecondary
-                  id="start"
-                  :disabled="!serverValid"
-                  name="start"
-                  class="
-                    rounded-b-lg
-                    button
-                    md:rounded-bl-none md:rounded-br-lg
-                  "
-                  :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
-                  :label="!connectionSSEState ? $t('start') : $t('stop')"
-                  reverse
-                  @click.native="toggleSSEConnection"
-                />
-              </li>
-            </div>
-          </ul>
-        </AppSection>
-      </Pane>
-      <Pane class="overflow-auto">
-        <AppSection label="response">
-          <ul>
-            <li>
-              <RealtimeLog :title="$t('events')" :log="events.log" />
-              <div id="result"></div>
-            </li>
-          </ul>
-        </AppSection>
-      </Pane>
-    </Splitpanes>
-  </div>
+  <Splitpanes horizontal :dbl-click-splitter="false">
+    <Pane class="overflow-auto hide-scrollbar">
+      <AppSection label="request">
+        <div class="bg-primary flex p-4 top-0 z-10 sticky">
+          <div class="flex-1 inline-flex">
+            <input
+              id="server"
+              v-model="server"
+              type="url"
+              :class="{ error: !serverValid }"
+              class="
+                bg-primaryLight
+                border border-divider
+                rounded-l-lg
+                font-mono
+                text-secondaryDark
+                w-full
+                py-1
+                px-4
+                transition
+                truncate
+                focus:outline-none focus:border-accent
+              "
+              :placeholder="$t('url')"
+              @keyup.enter="serverValid ? toggleSSEConnection() : null"
+            />
+            <ButtonPrimary
+              id="start"
+              :disabled="!serverValid"
+              name="start"
+              class="rounded-l-none"
+              :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              :label="!connectionSSEState ? $t('start') : $t('stop')"
+              reverse
+              @click.native="toggleSSEConnection"
+            />
+          </div>
+        </div>
+      </AppSection>
+    </Pane>
+    <Pane class="overflow-auto hide-scrollbar">
+      <AppSection label="response">
+        <ul>
+          <li>
+            <RealtimeLog :title="$t('events')" :log="events.log" />
+            <div id="result"></div>
+          </li>
+        </ul>
+      </AppSection>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script>
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index de3d4d36d..ba0d13ea0 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,167 +1,177 @@
 <template>
-  <div>
-    <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
-        <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="overflow-auto">
-            <AppSection label="request">
-              <ul>
-                <li>
-                  <label for="websocket-url">{{ $t("url") }}</label>
-                  <input
-                    id="websocket-url"
-                    v-model="url"
-                    class="input"
-                    type="url"
-                    spellcheck="false"
-                    :class="{ error: !urlValid }"
-                    :placeholder="$t('url')"
-                    @keyup.enter="urlValid ? toggleConnection() : null"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <ButtonSecondary
-                      id="connect"
-                      :disabled="!urlValid"
-                      class="button"
-                      name="connect"
-                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
-                      :label="
-                        !connectionState ? $t('connect') : $t('disconnect')
-                      "
-                      reverse
-                      @click.native="toggleConnection"
-                    />
-                  </li>
-                </div>
-              </ul>
-              <ul>
-                <li>
-                  <div class="flex flex-1">
-                    <label>{{ $t("protocols") }}</label>
-                  </div>
-                </li>
-              </ul>
-              <ul
-                v-for="(protocol, index) of protocols"
-                :key="`protocol-${index}`"
-                :class="{ 'border-t': index == 0 }"
-                class="
-                  divide-y divide-dashed divide-divider
-                  border-b border-dashed border-divider
-                  md:divide-x md:divide-y-0
-                "
-              >
-                <li>
-                  <input
-                    v-model="protocol.value"
-                    class="input"
-                    :placeholder="$t('protocol_count', { count: index + 1 })"
-                    name="message"
-                    type="text"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <ButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="
-                        protocol.hasOwnProperty('active')
-                          ? protocol.active
-                            ? $t('turn_off')
-                            : $t('turn_on')
-                          : $t('turn_off')
-                      "
-                      @click.native="
-                        protocol.active = protocol.hasOwnProperty('active')
-                          ? !protocol.active
-                          : false
-                      "
-                    />
-                    <i class="material-icons">
-                      {{
-                        protocol.hasOwnProperty("active")
-                          ? protocol.active
-                            ? "check_box"
-                            : "check_box_outline_blank"
-                          : "check_box"
-                      }}
-                    </i>
-                  </li>
-                </div>
-                <div>
-                  <li>
-                    <ButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="$t('delete')"
-                      icon="delete"
-                      @click.native="deleteProtocol({ index })"
-                    />
-                  </li>
-                </div>
-              </ul>
-              <ul>
-                <li>
-                  <ButtonSecondary
-                    icon="add"
-                    :label="$t('add_new')"
-                    @click.native="addProtocol"
-                  />
-                </li>
-              </ul>
-            </AppSection>
-          </Pane>
-          <Pane class="overflow-auto">
-            <AppSection label="response">
-              <ul>
-                <li>
-                  <RealtimeLog :title="$t('log')" :log="communication.log" />
-                </li>
-              </ul>
-            </AppSection>
-          </Pane>
-        </Splitpanes>
-      </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto">
-        <AppSection label="messages">
-          <ul>
-            <li>
-              <label for="websocket-message">{{ $t("message") }}</label>
+  <Splitpanes vertical :dbl-click-splitter="false">
+    <Pane class="overflow-auto hide-scrollbar">
+      <Splitpanes horizontal :dbl-click-splitter="false">
+        <Pane class="overflow-auto hide-scrollbar">
+          <AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
+            <div class="flex-1 inline-flex">
               <input
-                id="websocket-message"
-                v-model="communication.input"
-                name="message"
-                type="text"
-                :readonly="!connectionState"
-                class="input md:rounded-bl-lg"
-                @keyup.enter="connectionState ? sendMessage() : null"
-                @keyup.up="connectionState ? walkHistory('up') : null"
-                @keyup.down="connectionState ? walkHistory('down') : null"
+                id="websocket-url"
+                v-model="url"
+                class="
+                  bg-primaryLight
+                  border border-divider
+                  rounded-l-lg
+                  font-mono
+                  text-secondaryDark
+                  w-full
+                  py-1
+                  px-4
+                  transition
+                  truncate
+                  focus:outline-none focus:border-accent
+                "
+                type="url"
+                spellcheck="false"
+                :class="{ error: !urlValid }"
+                :placeholder="$t('url')"
+                @keyup.enter="urlValid ? toggleConnection() : null"
+              />
+              <ButtonPrimary
+                id="connect"
+                :disabled="!urlValid"
+                class="rounded-l-none"
+                name="connect"
+                :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                :label="!connectionState ? $t('connect') : $t('disconnect')"
+                reverse
+                @click.native="toggleConnection"
               />
-            </li>
-            <div>
-              <li>
-                <ButtonSecondary
-                  id="send"
-                  name="send"
-                  :disabled="!connectionState"
-                  class="
-                    rounded-b-lg
-                    button
-                    md:rounded-bl-none md:rounded-br-lg
-                  "
-                  icon="send"
-                  :label="$t('send')"
-                  @click.native="sendMessage"
-                />
-              </li>
             </div>
-          </ul>
-        </AppSection>
-      </Pane>
-    </Splitpanes>
-  </div>
+          </AppSection>
+          <div
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              pl-4
+              top-68px
+              z-10
+              sticky
+              items-center
+              justify-between
+            "
+          >
+            <label class="font-semibold text-xs">
+              {{ $t("protocols") }}
+            </label>
+            <div>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('clear_all')"
+                icon="clear_all"
+                @click.native="clearContent"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('add_new')"
+                icon="add"
+                @click.native="addProtocol"
+              />
+            </div>
+          </div>
+          <div
+            v-for="(protocol, index) of protocols"
+            :key="`protocol-${index}`"
+            class="
+              divide-x divide-dashed divide-divider
+              border-b border-dashed border-divider
+              flex
+            "
+            :class="{ 'border-t': index == 0 }"
+          >
+            <input
+              v-model="protocol.value"
+              class="
+                bg-primaryLight
+                flex
+                font-semibold
+                flex-1
+                text-xs
+                py-3
+                px-4
+                focus:outline-none
+              "
+              :placeholder="$t('protocol_count', { count: index + 1 })"
+              name="message"
+              type="text"
+            />
+            <div>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="
+                  protocol.hasOwnProperty('active')
+                    ? protocol.active
+                      ? $t('turn_off')
+                      : $t('turn_on')
+                    : $t('turn_off')
+                "
+                :icon="
+                  protocol.hasOwnProperty('active')
+                    ? protocol.active
+                      ? 'check_box'
+                      : 'check_box_outline_blank'
+                    : 'check_box'
+                "
+                @click.native="
+                  protocol.active = protocol.hasOwnProperty('active')
+                    ? !protocol.active
+                    : false
+                "
+              />
+            </div>
+            <div>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('delete')"
+                icon="delete"
+                @click.native="deleteProtocol({ index })"
+              />
+            </div>
+          </div>
+        </Pane>
+        <Pane class="overflow-auto hide-scrollbar">
+          <AppSection label="response">
+            <RealtimeLog :title="$t('log')" :log="communication.log" />
+          </AppSection>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      max-size="30"
+      size="25"
+      min-size="20"
+      class="overflow-auto hide-scrollbar"
+    >
+      <AppSection label="messages">
+        <label for="websocket-message" class="font-semibold text-xs">
+          {{ $t("message") }}
+        </label>
+        <input
+          id="websocket-message"
+          v-model="communication.input"
+          name="message"
+          type="text"
+          :readonly="!connectionState"
+          class="input md:rounded-bl-lg"
+          @keyup.enter="connectionState ? sendMessage() : null"
+          @keyup.up="connectionState ? walkHistory('up') : null"
+          @keyup.down="connectionState ? walkHistory('down') : null"
+        />
+        <div>
+          <ButtonSecondary
+            id="send"
+            name="send"
+            :disabled="!connectionState"
+            class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
+            icon="send"
+            :label="$t('send')"
+            @click.native="sendMessage"
+          />
+        </div>
+      </AppSection>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index ea2a92f84..113156e33 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -62,7 +62,6 @@ export default {
 <style scoped lang="scss">
 .tabs {
   @apply flex;
-  @apply flex-1;
   @apply whitespace-nowrap;
   @apply overflow-auto;
   @apply bg-primary;
diff --git a/components/teams/index.vue b/components/teams/index.vue
index a94cf16a4..e6c63be61 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -38,7 +38,7 @@
     <p v-if="myTeams.length === 0">
       <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
     </p>
-    <div v-else class="overflow-auto">
+    <div v-else class="overflow-auto hide-scrollbar">
       <ul class="flex-col">
         <li v-for="(team, index) in myTeams" :key="`team-${index}`">
           <TeamsTeam
diff --git a/pages/doc.vue b/pages/doc.vue
index 500376e7a..36545389e 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
+      <Pane class="overflow-auto hide-scrollbar">
         <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="overflow-auto">
+          <Pane class="overflow-auto hide-scrollbar">
             <AppSection label="import">
               <div class="flex flex-col">
                 <label>{{ $t("collection") }}</label>
@@ -57,7 +57,7 @@
               </div>
             </AppSection>
           </Pane>
-          <Pane class="overflow-auto">
+          <Pane class="overflow-auto hide-scrollbar">
             <AppSection label="documentation">
               <div class="flex flex-col">
                 <label>{{ $t("documentation") }}</label>
@@ -102,7 +102,12 @@
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto">
+      <Pane
+        max-size="30"
+        size="25"
+        min-size="20"
+        class="overflow-auto hide-scrollbar"
+      >
         <aside class="lg:max-w-md">
           <Collections
             :selected="selected"
diff --git a/pages/graphql.vue b/pages/graphql.vue
index b65826f25..34c7cd263 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,147 +1,154 @@
 <template>
   <div>
     <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
+      <Pane class="overflow-auto hide-scrollbar">
         <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="overflow-auto">
+          <Pane class="overflow-auto hide-scrollbar">
             <AppSection label="endpoint">
-              <ul>
-                <li>
-                  <label for="url">{{ $t("url") }}</label>
+              <div class="bg-primary flex p-4 top-0 z-10 sticky">
+                <div class="flex-1 inline-flex">
                   <input
                     id="url"
                     v-model="url"
                     type="url"
                     spellcheck="false"
-                    class="input md:rounded-bl-lg"
+                    class="
+                      bg-primaryLight
+                      border border-divider
+                      rounded-l-lg
+                      font-mono
+                      text-secondaryDark
+                      w-full
+                      py-1
+                      px-4
+                      transition
+                      truncate
+                      focus:outline-none focus:border-accent
+                    "
                     :placeholder="$t('url')"
                     @keyup.enter="onPollSchemaClick()"
                   />
-                </li>
-                <div>
-                  <li>
-                    <ButtonSecondary
-                      id="get"
-                      name="get"
-                      :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
-                      :label="
-                        !isPollingSchema ? $t('connect') : $t('disconnect')
-                      "
-                      @click.native="onPollSchemaClick"
-                    />
-                  </li>
+                  <ButtonPrimary
+                    id="get"
+                    name="get"
+                    :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
+                    :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
+                    class="rounded-l-none"
+                    @click.native="onPollSchemaClick"
+                  />
                 </div>
-              </ul>
+              </div>
             </AppSection>
             <AppSection label="headers">
-              <div class="flex flex-col">
-                <label>{{ $t("headers") }}</label>
-                <ul v-if="headers.length !== 0">
-                  <li>
-                    <div class="flex flex-1">
-                      <label for="headerList">{{ $t("header_list") }}</label>
-                      <div>
-                        <ButtonSecondary
-                          v-tippy="{ theme: 'tooltip' }"
-                          :title="$t('clear')"
-                          icon="clear_all"
-                          @click.native="headers = []"
-                        />
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-                <ul
-                  v-for="(header, index) in headers"
-                  :key="`header-${index}`"
-                  class="
-                    divide-y divide-dashed divide-divider
-                    border-b border-dashed border-divider
-                    md:divide-x md:divide-y-0
+              <div
+                class="
+                  bg-primary
+                  border-b border-dividerLight
+                  flex flex-1
+                  pl-4
+                  top-68px
+                  z-10
+                  sticky
+                  items-center
+                  justify-between
+                "
+              >
+                <label class="font-semibold text-xs">{{ $t("headers") }}</label>
+                <div>
+                  <ButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('clear')"
+                    icon="clear_all"
+                    @click.native="headers = []"
+                  />
+                  <ButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('add_new')"
+                    icon="add"
+                    @click.native="addRequestHeader"
+                  />
+                </div>
+              </div>
+              <div
+                v-for="(header, index) in headers"
+                :key="`header-${index}`"
+                class="
+                  divide-x divide-dashed divide-divider
+                  border-b border-dashed border-divider
+                  flex
+                "
+                :class="{ 'border-t': index == 0 }"
+              >
+                <SmartAutoComplete
+                  :placeholder="$t('header_count', { count: index + 1 })"
+                  :source="commonHeaders"
+                  :spellcheck="false"
+                  :value="header.key"
+                  autofocus
+                  @input="
+                    $store.commit('setGQLHeaderKey', {
+                      index,
+                      value: $event,
+                    })
                   "
-                  :class="{ 'border-t': index == 0 }"
-                >
-                  <li>
-                    <SmartAutoComplete
-                      :placeholder="$t('header_count', { count: index + 1 })"
-                      :source="commonHeaders"
-                      :spellcheck="false"
-                      :value="header.key"
-                      autofocus
-                      @input="
-                        $store.commit('setGQLHeaderKey', {
-                          index,
-                          value: $event,
-                        })
-                      "
-                    />
-                  </li>
-                  <li>
-                    <input
-                      class="input"
-                      :placeholder="$t('value_count', { count: index + 1 })"
-                      :name="`value ${index}`"
-                      :value="header.value"
-                      autofocus
-                      @change="
-                        $store.commit('setGQLHeaderValue', {
-                          index,
-                          value: $event.target.value,
-                        })
-                      "
-                    />
-                  </li>
-                  <div>
-                    <li>
-                      <ButtonSecondary
-                        v-tippy="{ theme: 'tooltip' }"
-                        :title="
-                          header.hasOwnProperty('active')
-                            ? header.active
-                              ? $t('turn_off')
-                              : $t('turn_on')
-                            : $t('turn_off')
-                        "
-                        @click.native="
-                          $store.commit('setActiveGQLHeader', {
-                            index,
-                            value: header.hasOwnProperty('active')
-                              ? !header.active
-                              : false,
-                          })
-                        "
-                      />
-                      <i class="material-icons">
-                        {{
-                          header.hasOwnProperty("active")
-                            ? header.active
-                              ? "check_box"
-                              : "check_box_outline_blank"
-                            : "check_box"
-                        }}
-                      </i>
-                    </li>
-                  </div>
-                  <div>
-                    <li>
-                      <ButtonSecondary
-                        v-tippy="{ theme: 'tooltip' }"
-                        :title="$t('delete')"
-                        icon="delete"
-                        @click.native="removeRequestHeader(index)"
-                      />
-                    </li>
-                  </div>
-                </ul>
-                <ul>
-                  <li>
-                    <ButtonSecondary
-                      icon="add"
-                      :label="$t('add_new')"
-                      @click.native="addRequestHeader"
-                    />
-                  </li>
-                </ul>
+                />
+                <input
+                  class="
+                    bg-primaryLight
+                    flex
+                    font-semibold
+                    flex-1
+                    text-xs
+                    py-3
+                    px-4
+                    focus:outline-none
+                  "
+                  :placeholder="$t('value_count', { count: index + 1 })"
+                  :name="`value ${index}`"
+                  :value="header.value"
+                  autofocus
+                  @change="
+                    $store.commit('setGQLHeaderValue', {
+                      index,
+                      value: $event.target.value,
+                    })
+                  "
+                />
+                <div>
+                  <ButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="
+                      header.hasOwnProperty('active')
+                        ? header.active
+                          ? $t('turn_off')
+                          : $t('turn_on')
+                        : $t('turn_off')
+                    "
+                    :icon="
+                      header.hasOwnProperty('active')
+                        ? header.active
+                          ? 'check_box'
+                          : 'check_box_outline_blank'
+                        : 'check_box'
+                    "
+                    @click.native="
+                      $store.commit('setActiveGQLHeader', {
+                        index,
+                        value: header.hasOwnProperty('active')
+                          ? !header.active
+                          : false,
+                      })
+                    "
+                  />
+                </div>
+                <div>
+                  <ButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('delete')"
+                    icon="delete"
+                    @click.native="removeRequestHeader(index)"
+                  />
+                </div>
               </div>
             </AppSection>
             <AppSection label="query">
@@ -212,7 +219,7 @@
               </div>
             </AppSection>
           </Pane>
-          <Pane class="overflow-auto">
+          <Pane class="overflow-auto hide-scrollbar">
             <AppSection ref="schema" label="schema">
               <div class="flex flex-1">
                 <label>{{ $t("schema") }}</label>
diff --git a/pages/realtime.vue b/pages/realtime.vue
index d1a22e555..725b5bb8f 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -1,20 +1,18 @@
 <template>
-  <div>
-    <SmartTabs>
-      <SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
-        <RealtimeWebsocket />
-      </SmartTab>
-      <SmartTab :id="'sse'" :label="$t('sse')">
-        <RealtimeSse />
-      </SmartTab>
-      <SmartTab :id="'socketio'" :label="$t('socketio')">
-        <RealtimeSocketio />
-      </SmartTab>
-      <SmartTab :id="'mqtt'" :label="$t('mqtt')">
-        <RealtimeMqtt />
-      </SmartTab>
-    </SmartTabs>
-  </div>
+  <SmartTabs>
+    <SmartTab id="websocket" :label="$t('websocket')" :selected="true">
+      <RealtimeWebsocket />
+    </SmartTab>
+    <SmartTab id="sse" :label="$t('sse')">
+      <RealtimeSse />
+    </SmartTab>
+    <SmartTab id="socketio" :label="$t('socketio')">
+      <RealtimeSocketio />
+    </SmartTab>
+    <SmartTab id="mqtt" :label="$t('mqtt')">
+      <RealtimeMqtt />
+    </SmartTab>
+  </SmartTabs>
 </template>
 
 <script>