feat: make smart url feild the default input

components/button/Primary.vue

@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-primary bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },

components/http/Request.vue

@@ -30,7 +30,6 @@
                 focus:outline-none focus:border-accent
               "
               :value="newMethod"
-              autofocus
               readonly
             />
           </template>
@@ -45,7 +44,13 @@
       </span>
     </div>
     <div class="flex-1 inline-flex">
+      <SmartUrlField
+        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+        v-model="newEndpoint"
+        @enter="newSendRequest()"
+      />
       <input
+        v-else
         id="url"
         v-model="newEndpoint"
         class="
@@ -65,10 +70,10 @@
         type="text"
         spellcheck="false"
         :placeholder="$t('url')"
+        autofocus
         @keyup.enter="newSendRequest()"
       />
     </div>
-    <!-- <SmartUrlField v-else v-model="uri" /> -->
     <div class="flex">
       <ButtonPrimary
         id="send"
@@ -200,6 +205,7 @@ import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { useStreamSubscriber, useStream } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { getSettingSubject } from "~/newstore/settings"
 
 const methods = [
   "GET",
@@ -356,5 +362,12 @@ export default defineComponent({
       ;(this.$refs.options as any).tippy().hide()
     },
   },
+  subscriptions() {
+    return {
+      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
+        "EXPERIMENTAL_URL_BAR_ENABLED"
+      ),
+    }
+  },
 })
 </script>

components/smart/UrlField.vue

@@ -5,7 +5,13 @@
 
 <template>
   <div class="url-field-container">
-    <div ref="editor" class="url-field" contenteditable="true"></div>
+    <div
+      ref="editor"
+      :placeholder="$t('url')"
+      class="url-field"
+      contenteditable="true"
+      @keyup.enter="$emit('enter')"
+    ></div>
   </div>
 </template>
 
@@ -35,7 +41,7 @@ export default {
       highlight: [
         {
           text: /(<<\w+>>)/g,
-          style: "VAR",
+          style: "text-white bg-accentDark rounded px-1.5 py-0.5 mx-0.5",
         },
       ],
       highlightEnabled: true,
@@ -389,18 +395,45 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-.VAR {
+[contenteditable="true"]:empty {
-  @apply font-bold;
+  @apply h-8;
-  @apply text-accent;
+
+  line-height: 1.9;
+
+  &::before {
+    @apply text-secondary;
+    @apply opacity-75;
+    @apply pointer-events-none;
+    @apply block;
+
+    content: attr(placeholder);
+  }
 }
 
 .url-field-container {
   @apply inline-grid;
+  @apply w-full;
 }
 
 .url-field {
-  @apply border-dashed border-divider;
+  @apply flex;
+  @apply items-center;
+  @apply justify-items-start;
+  @apply bg-primaryLight;
+  @apply border;
+  @apply border-divider;
+  @apply font-semibold;
+  @apply font-mono;
+  @apply flex-1;
+  @apply text-secondaryDark;
+  @apply py-1;
+  @apply px-4;
+  @apply transition;
+  @apply truncate;
+  @apply focus:outline-none;
+  @apply focus:border-accent;
+  @apply truncate;
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;

newstore/settings.ts

@@ -60,7 +60,7 @@ export const defaultSettings: SettingsType = {
   PROXY_URL: "https://proxy.hoppscotch.io/",
   PROXY_KEY: "",
   EXTENSIONS_ENABLED: true,
-  EXPERIMENTAL_URL_BAR_ENABLED: false,
+  EXPERIMENTAL_URL_BAR_ENABLED: true,
   URL_EXCLUDES: {
     auth: true,
     httpUser: true,