refactor: minoe fixes and improvements

assets/scss/styles.scss

@@ -152,6 +152,7 @@ a {
 [interactive] > div {
   @apply flex;
   @apply flex-1;
+  @apply h-full;
 }
 
 .tippy-content > div {
@@ -338,23 +339,6 @@ input[type="checkbox"] {
   @apply text-secondaryLight;
 }
 
-#response-details-wrapper {
-  @apply relative;
-
-  textarea {
-    @apply m-0;
-    @apply w-full;
-  }
-
-  .covers-response {
-    @apply absolute;
-    @apply inset-0;
-    @apply bg-white;
-    @apply h-full;
-    @apply w-full;
-  }
-}
-
 .toasted-container {
   .toasted {
     &.toasted-primary {

components/collections/graphql/index.vue

@@ -73,7 +73,6 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>

components/environments/index.vue

@@ -80,7 +80,6 @@
       v-if="environments.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">library_add</i>
       <span class="text-center pb-4">
         {{ $t("empty.environments") }}
       </span>

components/graphql/RequestOptions.vue

@@ -62,6 +62,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
             @update-query="updateQuery"
           />
         </AppSection>
@@ -105,6 +106,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
           />
         </AppSection>
       </SmartTab>

components/graphql/Response.vue

@@ -47,6 +47,7 @@
         showPrintMargin: false,
         useWorker: false,
       }"
+      styles="border-b border-dividerLight"
     />
     <div
       v-else

components/graphql/Sidebar.vue

@@ -196,6 +196,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
           />
           <div
             v-else

components/http/CodegenModal.vue

@@ -57,7 +57,7 @@
             showPrintMargin: false,
             useWorker: false,
           }"
-          styles="rounded"
+          styles="border rounded border-dividerLight"
         />
       </div>
     </template>

components/http/RawBody.vue

@@ -66,6 +66,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -42,7 +42,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'html'"
@@ -54,6 +54,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
       <iframe
         ref="previewFrame"
@@ -135,3 +136,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.covers-response {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-primary;
+  @apply h-full;
+  @apply w-full;
+  @apply border;
+  @apply border-dividerLight;
+}
+</style>

components/lenses/renderers/ImageLensRenderer.vue

@@ -27,8 +27,11 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="flex relative">
-      <img class="max-w-full" :src="imageSource" />
+      <img
+        class="border-b border-dividerLight flex max-w-full flex-1"
+        :src="imageSource"
+      />
     </div>
   </div>
 </template>
@@ -46,7 +49,11 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },

components/lenses/renderers/JSONLensRenderer.vue

@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="jsonBodyText"
         :lang="'json'"
@@ -48,6 +48,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -78,7 +79,11 @@ export default {
       }
     },
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },

components/lenses/renderers/RawLensRenderer.vue

@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'plain_text'"
@@ -47,6 +47,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -69,13 +70,18 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },
   },
   methods: {
     downloadResponse() {
+      console.log(this.responseType)
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
       const a = document.createElement("a")

components/lenses/renderers/XMLLensRenderer.vue

@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'xml'"
@@ -47,6 +47,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -69,7 +70,11 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },

components/smart/AutoComplete.vue

@@ -186,6 +186,7 @@ export default {
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
+  @apply relative;
   @apply contents;
 
   input:focus + ul.suggestions,

components/smart/DeletableChip.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <i class="opacity-75 material-icons">attachment</i>
-    <span class="px-2"><slot></slot></span>
+    <span class="max-w-64 px-2 truncate"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
       icon="close"

components/smart/Item.vue

@@ -57,10 +57,10 @@
     </span>
     <SmartSpinner v-else class="mr-4" />
     <div
-      class="flex-1 inline-flex items-start"
+      class="flex-1 inline-flex truncate items-start"
       :class="{ 'flex-col': description }"
     >
-      <div>
+      <div class="truncate">
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">

layouts/default.vue

@@ -19,7 +19,7 @@
                 <AppHeader />
               </Pane>
               <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
-                <main class="flex flex-1">
+                <main class="flex flex-1 w-full">
                   <nuxt class="flex flex-1" />
                 </main>
               </Pane>

newstore/RESTSession.ts

@@ -587,7 +587,10 @@ export const restParams$ = restSessionStore.subject$.pipe(
 )
 
 export const restActiveParamsCount$ = restParams$.pipe(
-  map((params) => params.filter((x) => x.active).length)
+  map(
+    (params) =>
+      params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
+  )
 )
 
 export const restMethod$ = restSessionStore.subject$.pipe(
@@ -601,7 +604,10 @@ export const restHeaders$ = restSessionStore.subject$.pipe(
 )
 
 export const restActiveHeadersCount$ = restHeaders$.pipe(
-  map((params) => params.filter((x) => x.active).length)
+  map(
+    (params) =>
+      params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
+  )
 )
 
 export const restAuth$ = restRequest$.pipe(pluck("auth"))

pages/documentation.vue

@@ -72,6 +72,7 @@
             <div
               class="
                 bg-primary
+                border-t border-b border-dividerLight
                 flex
                 p-4
                 bottom-0

pages/index.vue

@@ -14,7 +14,7 @@
               <HttpParameters />
             </SmartTab>
 
-            <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
+            <SmartTab :id="'bodyParams'" :label="$t('body')">
               <HttpBody />
             </SmartTab>