refactor: revamped tab system

packages/hoppscotch-app/components/smart/Tab.vue

@@ -4,31 +4,49 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import {
+  onMounted,
+  onBeforeUnmount,
+  inject,
+  computed,
+  watch,
+} from "@nuxtjs/composition-api"
+import { TabMeta, TabProvider } from "./Tabs.vue"
 
-export default defineComponent({
-  name: "SmartTab",
-  props: {
-    label: { type: String, default: null },
-    info: { type: String, default: null },
-    indicator: { type: Boolean, default: false },
-    icon: { type: String, default: null },
-    id: { type: String, default: null, required: true },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      active: false,
-    }
-  },
-
-  mounted() {
-    this.active = this.selected
+const props = defineProps({
+  label: { type: String, default: null },
+  info: { type: String, default: null },
+  indicator: { type: Boolean, default: false },
+  icon: { type: String, default: null },
+  id: { type: String, default: null, required: true },
+  selected: {
+    type: Boolean,
+    default: false,
   },
 })
+
+const tabMeta = computed<TabMeta>(() => ({
+  icon: props.icon,
+  indicator: props.indicator,
+  info: props.info,
+  label: props.label,
+}))
+
+const { activeTabID, addTabEntry, updateTabEntry, removeTabEntry } =
+  inject<TabProvider>("tabs-system")!
+
+const active = computed(() => activeTabID.value === props.id)
+
+onMounted(() => {
+  addTabEntry(props.id, tabMeta.value)
+})
+
+watch(tabMeta, (newMeta) => {
+  updateTabEntry(props.id, newMeta)
+})
+
+onBeforeUnmount(() => {
+  removeTabEntry(props.id)
+})
 </script>