chore: improve UI flow and add i18n

packages/hoppscotch-common/assets/themes/base-themes.scss

@@ -17,6 +17,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
+  --properties-primary-sticky-fold: 2.05rem;
 }
 
 @mixin light-theme {

packages/hoppscotch-common/locales/en.json

@@ -356,6 +356,8 @@
     "offline_short": "You're using Hoppscotch offline.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
+    "collection_properties_authorization": " This authorization will be set for every request in this collection.",
+    "collection_properties_header": "This header will be set for every request in this collection.",
     "script_fail": "It seems there is a glitch in the pre-request script. Check the error below and fix the script accordingly.",
     "test_script_fail": "There seems to be an error with test script. Please fix the errors and run tests again",
     "tests": "Write a test script to automate debugging."

packages/hoppscotch-common/src/components/collections/Properties.vue

@@ -3,19 +3,44 @@
     v-if="show"
     dialog
     :title="t('collection.properties')"
+    :full-width-body="true"
     @close="hideModal"
   >
     <template #body>
       <HoppSmartTabs
         v-model="selectedOptionTab"
-        styles="sticky overflow-x-auto flex-shrink-0 bg-primary  z-10"
+        styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10 !-py-4"
         render-inactive-tabs
       >
         <HoppSmartTab :id="'headers'" :label="`${t('tab.headers')}`">
           <HttpHeaders
             v-model="editableCollection"
+            :is-collection-property="true"
             @change-tab="changeOptionTab"
           />
+          <AppBanner
+            :banner="{
+              type: 'info',
+              alternateText: 'This is an alternate text',
+            }"
+            class="sticky bottom-0 z-10"
+          >
+            <span>
+              {{ t("helpers.collection_properties_header") }}
+              <a href="hopp.sh" target="_blank" class="underline">{{
+                t("action.learn_more")
+              }}</a>
+            </span>
+          </AppBanner>
+        </HoppSmartTab>
+        <HoppSmartTab
+          :id="'authorization'"
+          :label="`${t('tab.authorization')}`"
+        >
+          <HttpAuthorization
+            v-model="editableCollection.auth"
+            :is-collection-property="true"
+          />
           <AppBanner
             :banner="{
               type: 'info',
@@ -23,26 +48,10 @@
             }"
           >
             <span>
-              This header will be set for every request in this collection.
+              {{ t("helpers.collection_properties_authorization") }}
-              <a href="hopp.sh" class="underline">Learn More</a>
+              <a href="hopp.sh" target="_blank" class="underline">{{
-            </span>
+                t("action.learn_more")
-          </AppBanner>
+              }}</a>
-        </HoppSmartTab>
-        <HoppSmartTab
-          :id="'authorization'"
-          :label="`${t('tab.authorization')}`"
-        >
-          <HttpAuthorization v-model="editableCollection.auth" />
-          <AppBanner
-            :banner="{
-              type: 'info',
-              alternateText: 'This is an alternate text',
-            }"
-          >
-            <span>
-              This authorization will be set for every request in this
-              collection.
-              <a href="hopp.sh" class="underline">Learn More</a>
             </span>
           </AppBanner>
         </HoppSmartTab>
@@ -72,6 +81,7 @@ import { watch, ref } from "vue"
 import { useI18n } from "@composables/i18n"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { TeamCollection } from "~/helpers/backend/graphql"
+import { RESTOptionTabs } from "../http/RequestOptions.vue"
 
 const t = useI18n()
 
@@ -103,13 +113,11 @@ const editableCollection = ref({
     authType: "none",
     authActive: false,
   },
-})
+}) as any
-
-type Tab = "headers" | "authorization"
 
 const selectedOptionTab = ref("headers")
 
-const changeOptionTab = (tab: Tab) => {
+const changeOptionTab = (tab: RESTOptionTabs) => {
   selectedOptionTab.value = tab
 }
 

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -2,6 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      :class="{
+        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
+          !isCollectionProperty,
+        'top-propertiesPrimaryStickyFold': isCollectionProperty,
+      }"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">
@@ -188,6 +193,7 @@ const colorMode = useColorMode()
 
 const props = defineProps<{
   modelValue: HoppRESTAuth
+  isCollectionProperty?: boolean
 }>()
 
 const emit = defineEmits<{

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -2,6 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      :class="{
+        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
+          !isCollectionProperty,
+        'top-propertiesPrimaryStickyFold': isCollectionProperty,
+      }"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
@@ -288,9 +293,10 @@ const linewrapEnabled = ref(true)
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
 // v-model integration with props and emit
-const props = defineProps<{ modelValue: HoppRESTRequest }>()
+const props = defineProps<{
-
+  modelValue: HoppRESTRequest
-console.log(props.modelValue)
+  isCollectionProperty?: boolean
+}>()
 
 const emit = defineEmits<{
   (e: "change-tab", value: RESTOptionTabs): void

packages/hoppscotch-ui/src/assets/scss/histoire.scss

@@ -22,6 +22,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
+  --properties-primary-sticky-fold: 2.05rem;
 }
 
 @mixin dark-theme {

packages/hoppscotch-ui/src/components/smart/Modal.vue

@@ -59,7 +59,7 @@
             </div>
             <div
               class="flex flex-col overflow-y-auto max-h-[55vh]"
-              :class="{ 'p-4': !fullWidth }"
+              :class="{ 'p-4': !fullWidth && !fullWidthBody }"
             >
               <slot name="body"></slot>
             </div>
@@ -117,6 +117,7 @@ withDefaults(
     dimissible: boolean
     placement: string
     fullWidth: boolean
+    fullWidthBody: boolean
     styles: string
     closeText: string | null
   }>(),
@@ -126,6 +127,7 @@ withDefaults(
     dimissible: true,
     placement: "top",
     fullWidth: false,
+    fullWidthBody: false,
     styles: "sm:max-w-lg",
     closeText: null,
   }