Header and Tabs UI Improvements (#1290)

Some improvements to the Page Header and Tab UI.

Original |  New
:--------:|:-------:

![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png)
|
![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png)

![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png)
|
![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png)

![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png)
|
![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png)

![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png)
|
![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png)

![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png)
|
![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png)


What?
- Create a new Scaffold component, which includes the header and tabs
required for a page.
- Use this component to wrap all the views that have a header.
- Ensures consistency in headers between different pages.
- [x] Add support to use custom html/component in place of title (for
repo page, pipeline page, etc)
- [x] Add support of right icon buttons (for repo page, pipeline page,
etc)
- [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient)
- [x] Make new header ui resposive

web/src/components/layout/scaffold/Tabs.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-wrap">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
+      :class="{
+        'border-gray-400 dark:border-gray-600': activeTab === tab.id,
+        'border-transparent': activeTab !== tab.id,
+      }"
+      type="button"
+      @click="selectTab(tab)"
+    >
+      <Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
+      <Icon v-else name="blank" class="md:hidden" />
+      <span>{{ tab.title }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+
+import { Tab, useTabsClient } from '~/compositions/useTabs';
+
+const router = useRouter();
+const route = useRoute();
+
+const { activeTab, tabs, disableHashMode } = useTabsClient();
+
+async function selectTab(tab: Tab) {
+  if (tab.id === undefined) {
+    return;
+  }
+
+  activeTab.value = tab.id;
+  if (!disableHashMode.value) {
+    await router.replace({ params: route.params, hash: `#${tab.id}` });
+  }
+}
+</script>