feat: init new response state system

components/smart/AutoComplete.vue

@@ -22,6 +22,7 @@
       @keyup="updateSuggestions"
       @click="updateSuggestions"
       @keydown="handleKeystroke"
+      @change="$emit('change', $event)"
     />
     <ul
       v-if="suggestions.length > 0 && suggestionsVisible"

components/smart/Item.vue

@@ -7,7 +7,8 @@
       inline-flex
       px-4
       py-2
-      text-sm
+      text-xs
+      font-semibold
       transition
       rounded-lg
       focus:bg-primaryDark focus:text-secondaryDark

components/smart/Tab.vue

@@ -8,6 +8,7 @@
 export default {
   props: {
     label: { type: String, default: null },
+    info: { type: String, default: null },
     icon: { type: String, default: null },
     id: { type: String, default: null, required: true },
     selected: {

components/smart/Tabs.vue

@@ -16,6 +16,9 @@
               {{ tab.icon }}
             </i>
             <span v-if="tab.label">{{ tab.label }}</span>
+            <span v-if="tab.info" class="tab-info">
+              {{ tab.info }}
+            </span>
           </button>
         </div>
       </div>
@@ -91,6 +94,20 @@ export default {
     @apply focus:outline-none;
     @apply relative;
 
+    .tab-info {
+      @apply inline-flex;
+      @apply items-center;
+      @apply justify-center;
+      @apply w-5;
+      @apply h-4;
+      @apply ml-2;
+      @apply text-8px;
+      @apply border border-divider;
+      @apply font-mono;
+      @apply rounded;
+      @apply text-secondaryLight;
+    }
+
     &::after {
       @apply absolute;
       @apply inset-x-0;
@@ -110,6 +127,11 @@ export default {
       @apply text-accent;
       @apply border-accent;
 
+      .tab-info {
+        @apply text-secondary;
+        @apply border-dividerDark;
+      }
+
       &::after {
         @apply bg-accent;
       }