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/components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     DocsLink: typeof import('./src/components/atomic/DocsLink.vue')['default']
     FluidContainer: typeof import('./src/components/layout/FluidContainer.vue')['default']
     GeneralTab: typeof import('./src/components/repo/settings/GeneralTab.vue')['default']
+    Header: typeof import('./src/components/layout/scaffold/Header.vue')['default']
     IBxBxPowerOff: typeof import('~icons/bx/bx-power-off')['default']
     ICarbonCloseOutline: typeof import('~icons/carbon/close-outline')['default']
     IClarityDeployLine: typeof import('~icons/clarity/deploy-line')['default']
@@ -84,12 +85,13 @@ declare module '@vue/runtime-core' {
     RegistriesTab: typeof import('./src/components/repo/settings/RegistriesTab.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Scaffold: typeof import('./src/components/layout/scaffold/Scaffold.vue')['default']
     SecretEdit: typeof import('./src/components/secrets/SecretEdit.vue')['default']
     SecretList: typeof import('./src/components/secrets/SecretList.vue')['default']
     SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
     SelectField: typeof import('./src/components/form/SelectField.vue')['default']
-    Tab: typeof import('./src/components/tabs/Tab.vue')['default']
-    Tabs: typeof import('./src/components/tabs/Tabs.vue')['default']
+    Tab: typeof import('./src/components/layout/scaffold/Tab.vue')['default']
+    Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
     TextField: typeof import('./src/components/form/TextField.vue')['default']
     Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }