From 5af0359725e70cc6345745d8c17aaddf69b1c725 Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Sat, 2 Nov 2024 16:15:34 +0200
Subject: [PATCH 01/10] Use separate routes instead of anchors

---
 web/src/components/layout/header/Navbar.vue   |   9 +-
 web/src/router.ts                             | 148 +++++++++++++++++-
 web/src/views/User.vue                        |  35 -----
 .../admin/AdminAgents.vue}                    |   0
 .../admin/AdminInfo.vue}                      |   0
 .../admin/AdminOrgs.vue}                      |   0
 .../admin/AdminQueue.vue}                     |   3 +-
 .../admin/AdminRegistries.vue}                |   0
 .../admin/AdminRepos.vue}                     |   0
 .../admin/AdminSecrets.vue}                   |   0
 web/src/views/admin/AdminSettings.vue         |  67 --------
 web/src/views/admin/AdminSettingsWrapper.vue  |  92 +++++++++++
 .../admin/AdminUsers.vue}                     |   0
 web/src/views/org/OrgRepos.vue                |   2 +-
 web/src/views/org/OrgWrapper.vue              |   2 +-
 .../org/settings/OrgAgents.vue}               |   0
 .../org/settings/OrgRegistries.vue}           |   0
 .../org/settings/OrgSecrets.vue}              |   0
 .../OrgSettingsWrapper.vue}                   |  50 ++++--
 web/src/views/repo/RepoWrapper.vue            |   2 +-
 .../repo/settings/Actions.vue}                |   0
 .../repo/settings/Badge.vue}                  |   0
 .../repo/settings/Crons.vue}                  |   0
 .../repo/settings/General.vue}                |   0
 .../repo/settings/Registries.vue}             |   0
 .../repo/{ => settings}/RepoSettings.vue      |  75 +++++----
 .../repo/settings/Secrets.vue}                |   0
 .../user/UserAgents.vue}                      |   0
 .../user/UserCLIAndAPI.vue}                   |   0
 .../user/UserGeneral.vue}                     |   0
 .../user/UserRegistries.vue}                  |   0
 .../user/UserSecrets.vue}                     |   0
 web/src/views/user/UserWrapper.vue            |  60 +++++++
 33 files changed, 389 insertions(+), 156 deletions(-)
 delete mode 100644 web/src/views/User.vue
 rename web/src/{components/admin/settings/AdminAgentsTab.vue => views/admin/AdminAgents.vue} (100%)
 rename web/src/{components/admin/settings/AdminInfoTab.vue => views/admin/AdminInfo.vue} (100%)
 rename web/src/{components/admin/settings/AdminOrgsTab.vue => views/admin/AdminOrgs.vue} (100%)
 rename web/src/{components/admin/settings/AdminQueueTab.vue => views/admin/AdminQueue.vue} (98%)
 rename web/src/{components/admin/settings/AdminRegistriesTab.vue => views/admin/AdminRegistries.vue} (100%)
 rename web/src/{components/admin/settings/AdminReposTab.vue => views/admin/AdminRepos.vue} (100%)
 rename web/src/{components/admin/settings/AdminSecretsTab.vue => views/admin/AdminSecrets.vue} (100%)
 delete mode 100644 web/src/views/admin/AdminSettings.vue
 create mode 100644 web/src/views/admin/AdminSettingsWrapper.vue
 rename web/src/{components/admin/settings/AdminUsersTab.vue => views/admin/AdminUsers.vue} (100%)
 rename web/src/{components/org/settings/OrgAgentsTab.vue => views/org/settings/OrgAgents.vue} (100%)
 rename web/src/{components/org/settings/OrgRegistriesTab.vue => views/org/settings/OrgRegistries.vue} (100%)
 rename web/src/{components/org/settings/OrgSecretsTab.vue => views/org/settings/OrgSecrets.vue} (100%)
 rename web/src/views/org/{OrgSettings.vue => settings/OrgSettingsWrapper.vue} (53%)
 rename web/src/{components/repo/settings/ActionsTab.vue => views/repo/settings/Actions.vue} (100%)
 rename web/src/{components/repo/settings/BadgeTab.vue => views/repo/settings/Badge.vue} (100%)
 rename web/src/{components/repo/settings/CronTab.vue => views/repo/settings/Crons.vue} (100%)
 rename web/src/{components/repo/settings/GeneralTab.vue => views/repo/settings/General.vue} (100%)
 rename web/src/{components/repo/settings/RegistriesTab.vue => views/repo/settings/Registries.vue} (100%)
 rename web/src/views/repo/{ => settings}/RepoSettings.vue (53%)
 rename web/src/{components/repo/settings/SecretsTab.vue => views/repo/settings/Secrets.vue} (100%)
 rename web/src/{components/user/UserAgentsTab.vue => views/user/UserAgents.vue} (100%)
 rename web/src/{components/user/UserCLIAndAPITab.vue => views/user/UserCLIAndAPI.vue} (100%)
 rename web/src/{components/user/UserGeneralTab.vue => views/user/UserGeneral.vue} (100%)
 rename web/src/{components/user/UserRegistriesTab.vue => views/user/UserRegistries.vue} (100%)
 rename web/src/{components/user/UserSecretsTab.vue => views/user/UserSecrets.vue} (100%)
 create mode 100644 web/src/views/user/UserWrapper.vue

diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 59a869ba75..c578f672f7 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -20,7 +20,7 @@
     </div>
     <div class="flex ml-auto -m-1.5 items-center space-x-2">
       <div v-if="user?.admin" class="relative">
-        <IconButton class="navbar-icon" :title="$t('settings')" :to="{ name: 'admin-settings' }" icon="settings" />
+        <IconButton class="navbar-icon" :title="$t('settings')" :to="{ name: 'admin-settings-info' }" icon="settings" />
         <div
           v-if="version?.needsUpdate"
           class="absolute top-2 right-2 bg-int-wp-state-error-100 rounded-full w-3 h-3"
@@ -28,7 +28,12 @@
       </div>
 
       <ActivePipelines v-if="user" class="navbar-icon" />
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
+      <IconButton
+        v-if="user"
+        :to="{ name: 'user-general' }"
+        :title="$t('user.settings.settings')"
+        class="navbar-icon !p-1.5"
+      >
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <Button v-else :text="$t('login')" :to="`/login?url=${route.fullPath}`" />
diff --git a/web/src/router.ts b/web/src/router.ts
index ad807561bb..da8b37e0bf 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -104,9 +104,47 @@ const routes: RouteRecordRaw[] = [
           {
             path: 'settings',
             name: 'repo-settings',
-            component: (): Component => import('~/views/repo/RepoSettings.vue'),
+            component: (): Component => import('~/views/repo/settings/RepoSettings.vue'),
             meta: { authentication: 'required' },
             props: true,
+            children: [
+              {
+                path: '',
+                name: 'repo-settings-general',
+                component: (): Component => import('~/views/repo/settings/General.vue'),
+                props: true,
+              },
+              {
+                path: 'secrets',
+                name: 'repo-settings-secrets',
+                component: (): Component => import('~/views/repo/settings/Secrets.vue'),
+                props: true,
+              },
+              {
+                path: 'registries',
+                name: 'repo-settings-registries',
+                component: (): Component => import('~/views/repo/settings/Registries.vue'),
+                props: true,
+              },
+              {
+                path: 'crons',
+                name: 'repo-settings-crons',
+                component: (): Component => import('~/views/repo/settings/Crons.vue'),
+                props: true,
+              },
+              {
+                path: 'badge',
+                name: 'repo-settings-badge',
+                component: (): Component => import('~/views/repo/settings/Badge.vue'),
+                props: true,
+              },
+              {
+                path: 'actions',
+                name: 'repo-settings-actions',
+                component: (): Component => import('~/views/repo/settings/Actions.vue'),
+                props: true,
+              },
+            ],
           },
           {
             path: 'manual',
@@ -137,9 +175,29 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'settings',
         name: 'org-settings',
-        component: (): Component => import('~/views/org/OrgSettings.vue'),
+        component: (): Component => import('~/views/org/settings/OrgSettingsWrapper.vue'),
         meta: { authentication: 'required' },
         props: true,
+        children: [
+          {
+            path: 'secrets',
+            name: 'org-settings-secrets',
+            component: (): Component => import('~/views/org/settings/OrgSecrets.vue'),
+            props: true,
+          },
+          {
+            path: 'registries',
+            name: 'org-settings-registries',
+            component: (): Component => import('~/views/org/settings/OrgRegistries.vue'),
+            props: true,
+          },
+          {
+            path: 'agents',
+            name: 'org-settings-agents',
+            component: (): Component => import('~/views/org/settings/OrgAgents.vue'),
+            props: true,
+          },
+        ],
       },
     ],
   },
@@ -151,17 +209,99 @@ const routes: RouteRecordRaw[] = [
   {
     path: `${rootPath}/admin`,
     name: 'admin-settings',
-    component: (): Component => import('~/views/admin/AdminSettings.vue'),
+    component: (): Component => import('~/views/admin/AdminSettingsWrapper.vue'),
     props: true,
     meta: { authentication: 'required' },
+    children: [
+      {
+        path: '',
+        name: 'admin-settings-info',
+        component: (): Component => import('~/views/admin/AdminInfo.vue'),
+        props: true,
+      },
+      {
+        path: 'secrets',
+        name: 'admin-settings-secrets',
+        component: (): Component => import('~/views/admin/AdminSecrets.vue'),
+        props: true,
+      },
+      {
+        path: 'registries',
+        name: 'admin-settings-registries',
+        component: (): Component => import('~/views/admin/AdminRegistries.vue'),
+        props: true,
+      },
+      {
+        path: 'repos',
+        name: 'admin-settings-repos',
+        component: (): Component => import('~/views/admin/AdminRepos.vue'),
+        props: true,
+      },
+      {
+        path: 'users',
+        name: 'admin-settings-users',
+        component: (): Component => import('~/views/admin/AdminUsers.vue'),
+        props: true,
+      },
+      {
+        path: 'orgs',
+        name: 'admin-settings-orgs',
+        component: (): Component => import('~/views/admin/AdminOrgs.vue'),
+        props: true,
+      },
+      {
+        path: 'agents',
+        name: 'admin-settings-agents',
+        component: (): Component => import('~/views/admin/AdminAgents.vue'),
+        props: true,
+      },
+      {
+        path: 'queue',
+        name: 'admin-settings-queue',
+        component: (): Component => import('~/views/admin/AdminQueue.vue'),
+        props: true,
+      },
+    ],
   },
 
   {
     path: `${rootPath}/user`,
     name: 'user',
-    component: (): Component => import('~/views/User.vue'),
+    component: (): Component => import('~/views/user/UserWrapper.vue'),
     meta: { authentication: 'required' },
     props: true,
+    children: [
+      {
+        path: '',
+        name: 'user-general',
+        component: (): Component => import('~/views/user/UserGeneral.vue'),
+        props: true,
+      },
+      {
+        path: 'secrets',
+        name: 'user-secrets',
+        component: (): Component => import('~/views/user/UserSecrets.vue'),
+        props: true,
+      },
+      {
+        path: 'registries',
+        name: 'user-registries',
+        component: (): Component => import('~/views/user/UserRegistries.vue'),
+        props: true,
+      },
+      {
+        path: 'cli-and-api',
+        name: 'user-cli-and-api',
+        component: (): Component => import('~/views/user/UserCLIAndAPI.vue'),
+        props: true,
+      },
+      {
+        path: 'agents',
+        name: 'user-agents',
+        component: (): Component => import('~/views/user/UserAgents.vue'),
+        props: true,
+      },
+    ],
   },
   {
     path: `${rootPath}/login`,
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
deleted file mode 100644
index b196396189..0000000000
--- a/web/src/views/User.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <Scaffold enable-tabs>
-    <template #title>{{ $t('user.settings.settings') }}</template>
-    <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
-    <Tab id="general" :title="$t('user.settings.general.general')">
-      <UserGeneralTab />
-    </Tab>
-    <Tab id="secrets" :title="$t('secrets.secrets')">
-      <UserSecretsTab />
-    </Tab>
-    <Tab id="registries" :title="$t('registries.registries')">
-      <UserRegistriesTab />
-    </Tab>
-    <Tab id="cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')">
-      <UserCLIAndAPITab />
-    </Tab>
-    <Tab id="agents" :title="$t('admin.settings.agents.agents')">
-      <UserAgentsTab />
-    </Tab>
-  </Scaffold>
-</template>
-
-<script lang="ts" setup>
-import Button from '~/components/atomic/Button.vue';
-import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
-import Tab from '~/components/layout/scaffold/Tab.vue';
-import UserAgentsTab from '~/components/user/UserAgentsTab.vue';
-import UserCLIAndAPITab from '~/components/user/UserCLIAndAPITab.vue';
-import UserGeneralTab from '~/components/user/UserGeneralTab.vue';
-import UserRegistriesTab from '~/components/user/UserRegistriesTab.vue';
-import UserSecretsTab from '~/components/user/UserSecretsTab.vue';
-import useConfig from '~/compositions/useConfig';
-
-const address = `${window.location.protocol}//${window.location.host}${useConfig().rootPath}`; // port is included in location.host
-</script>
diff --git a/web/src/components/admin/settings/AdminAgentsTab.vue b/web/src/views/admin/AdminAgents.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminAgentsTab.vue
rename to web/src/views/admin/AdminAgents.vue
diff --git a/web/src/components/admin/settings/AdminInfoTab.vue b/web/src/views/admin/AdminInfo.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminInfoTab.vue
rename to web/src/views/admin/AdminInfo.vue
diff --git a/web/src/components/admin/settings/AdminOrgsTab.vue b/web/src/views/admin/AdminOrgs.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminOrgsTab.vue
rename to web/src/views/admin/AdminOrgs.vue
diff --git a/web/src/components/admin/settings/AdminQueueTab.vue b/web/src/views/admin/AdminQueue.vue
similarity index 98%
rename from web/src/components/admin/settings/AdminQueueTab.vue
rename to web/src/views/admin/AdminQueue.vue
index b11f8d5090..227e269bc0 100644
--- a/web/src/components/admin/settings/AdminQueueTab.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -78,6 +78,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import AdminQueueStats from '~/components/admin/settings/queue/AdminQueueStats.vue';
 import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
@@ -87,8 +88,6 @@ import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
 import type { QueueInfo } from '~/lib/api/types';
 
-import AdminQueueStats from './queue/AdminQueueStats.vue';
-
 const apiClient = useApiClient();
 const notifications = useNotifications();
 const { t } = useI18n();
diff --git a/web/src/components/admin/settings/AdminRegistriesTab.vue b/web/src/views/admin/AdminRegistries.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminRegistriesTab.vue
rename to web/src/views/admin/AdminRegistries.vue
diff --git a/web/src/components/admin/settings/AdminReposTab.vue b/web/src/views/admin/AdminRepos.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminReposTab.vue
rename to web/src/views/admin/AdminRepos.vue
diff --git a/web/src/components/admin/settings/AdminSecretsTab.vue b/web/src/views/admin/AdminSecrets.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminSecretsTab.vue
rename to web/src/views/admin/AdminSecrets.vue
diff --git a/web/src/views/admin/AdminSettings.vue b/web/src/views/admin/AdminSettings.vue
deleted file mode 100644
index 3ff1d36af4..0000000000
--- a/web/src/views/admin/AdminSettings.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <Scaffold enable-tabs>
-    <template #title>
-      {{ $t('settings') }}
-    </template>
-    <Tab id="info" :title="$t('info')">
-      <AdminInfoTab />
-    </Tab>
-    <Tab id="secrets" :title="$t('secrets.secrets')">
-      <AdminSecretsTab />
-    </Tab>
-    <Tab id="registries" :title="$t('registries.registries')">
-      <AdminRegistriesTab />
-    </Tab>
-    <Tab id="repos" :title="$t('admin.settings.repos.repos')">
-      <AdminReposTab />
-    </Tab>
-    <Tab id="users" :title="$t('admin.settings.users.users')">
-      <AdminUsersTab />
-    </Tab>
-    <Tab id="orgs" :title="$t('admin.settings.orgs.orgs')">
-      <AdminOrgsTab />
-    </Tab>
-    <Tab id="agents" :title="$t('admin.settings.agents.agents')">
-      <AdminAgentsTab />
-    </Tab>
-    <Tab id="queue" :title="$t('admin.settings.queue.queue')">
-      <AdminQueueTab />
-    </Tab>
-  </Scaffold>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import AdminAgentsTab from '~/components/admin/settings/AdminAgentsTab.vue';
-import AdminInfoTab from '~/components/admin/settings/AdminInfoTab.vue';
-import AdminOrgsTab from '~/components/admin/settings/AdminOrgsTab.vue';
-import AdminQueueTab from '~/components/admin/settings/AdminQueueTab.vue';
-import AdminRegistriesTab from '~/components/admin/settings/AdminRegistriesTab.vue';
-import AdminReposTab from '~/components/admin/settings/AdminReposTab.vue';
-import AdminSecretsTab from '~/components/admin/settings/AdminSecretsTab.vue';
-import AdminUsersTab from '~/components/admin/settings/AdminUsersTab.vue';
-import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
-import Tab from '~/components/layout/scaffold/Tab.vue';
-import useAuthentication from '~/compositions/useAuthentication';
-import useNotifications from '~/compositions/useNotifications';
-
-const notifications = useNotifications();
-const router = useRouter();
-const i18n = useI18n();
-const { user } = useAuthentication();
-
-onMounted(async () => {
-  if (!user?.admin) {
-    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
-    await router.replace({ name: 'home' });
-  }
-
-  if (!user?.admin) {
-    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
-    await router.replace({ name: 'home' });
-  }
-});
-</script>
diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
new file mode 100644
index 0000000000..c69386e783
--- /dev/null
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -0,0 +1,92 @@
+<template>
+  <Scaffold v-model:active-tab="activeTab" enable-tabs disable-tab-url-hash-mode>
+    <template #title>
+      {{ $t('settings') }}
+    </template>
+    <Tab id="info" :title="$t('info')" />
+    <Tab id="secrets" :title="$t('secrets.secrets')" />
+    <Tab id="registries" :title="$t('registries.registries')" />
+    <Tab id="repos" :title="$t('admin.settings.repos.repos')" />
+    <Tab id="users" :title="$t('admin.settings.users.users')" />
+    <Tab id="orgs" :title="$t('admin.settings.orgs.orgs')" />
+    <Tab id="agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab id="queue" :title="$t('admin.settings.queue.queue')" />
+
+    <router-view />
+  </Scaffold>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import Tab from '~/components/layout/scaffold/Tab.vue';
+import useAuthentication from '~/compositions/useAuthentication';
+import useNotifications from '~/compositions/useNotifications';
+
+const notifications = useNotifications();
+const router = useRouter();
+const route = useRoute();
+const i18n = useI18n();
+const { user } = useAuthentication();
+
+onMounted(async () => {
+  if (!user?.admin) {
+    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
+    await router.replace({ name: 'home' });
+  }
+
+  if (!user?.admin) {
+    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
+    await router.replace({ name: 'home' });
+  }
+});
+
+const activeTab = computed({
+  get() {
+    if (route.name === 'admin-settings-secrets') {
+      return 'secrets';
+    }
+    if (route.name === 'admin-settings-registries') {
+      return 'registries';
+    }
+    if (route.name === 'admin-settings-repos') {
+      return 'repos';
+    }
+    if (route.name === 'admin-settings-users') {
+      return 'users';
+    }
+    if (route.name === 'admin-settings-orgs') {
+      return 'orgs';
+    }
+    if (route.name === 'admin-settings-agents') {
+      return 'agents';
+    }
+    if (route.name === 'admin-settings-queue') {
+      return 'queue';
+    }
+    return 'info';
+  },
+  set(tab: string) {
+    if (tab === 'secrets') {
+      router.push({ name: 'admin-settings-secrets' });
+    } else if (tab === 'registries') {
+      router.push({ name: 'admin-settings-registries' });
+    } else if (tab === 'repos') {
+      router.push({ name: 'admin-settings-repos' });
+    } else if (tab === 'users') {
+      router.push({ name: 'admin-settings-users' });
+    } else if (tab === 'orgs') {
+      router.push({ name: 'admin-settings-orgs' });
+    } else if (tab === 'agents') {
+      router.push({ name: 'admin-settings-agents' });
+    } else if (tab === 'queue') {
+      router.push({ name: 'admin-settings-queue' });
+    } else {
+      router.push({ name: 'admin-settings-info' });
+    }
+  },
+});
+</script>
diff --git a/web/src/components/admin/settings/AdminUsersTab.vue b/web/src/views/admin/AdminUsers.vue
similarity index 100%
rename from web/src/components/admin/settings/AdminUsersTab.vue
rename to web/src/views/admin/AdminUsers.vue
diff --git a/web/src/views/org/OrgRepos.vue b/web/src/views/org/OrgRepos.vue
index c46de37919..6931345fed 100644
--- a/web/src/views/org/OrgRepos.vue
+++ b/web/src/views/org/OrgRepos.vue
@@ -8,7 +8,7 @@
       <IconButton
         v-if="orgPermissions.admin"
         icon="settings"
-        :to="{ name: org.is_user ? 'user' : 'org-settings' }"
+        :to="{ name: org.is_user ? 'user' : 'org-settings-secrets' }"
         :title="$t('settings')"
       />
     </template>
diff --git a/web/src/views/org/OrgWrapper.vue b/web/src/views/org/OrgWrapper.vue
index ffbc9b30a5..c6eb0e1aaf 100644
--- a/web/src/views/org/OrgWrapper.vue
+++ b/web/src/views/org/OrgWrapper.vue
@@ -7,7 +7,7 @@
     <template #titleActions>
       <IconButton
         v-if="orgPermissions.admin"
-        :to="{ name: org.is_user ? 'user' : 'repo-settings' }"
+        :to="{ name: org.is_user ? 'user' : 'org-settings-secrets' }"
         :title="$t('settings')"
         icon="settings"
       />
diff --git a/web/src/components/org/settings/OrgAgentsTab.vue b/web/src/views/org/settings/OrgAgents.vue
similarity index 100%
rename from web/src/components/org/settings/OrgAgentsTab.vue
rename to web/src/views/org/settings/OrgAgents.vue
diff --git a/web/src/components/org/settings/OrgRegistriesTab.vue b/web/src/views/org/settings/OrgRegistries.vue
similarity index 100%
rename from web/src/components/org/settings/OrgRegistriesTab.vue
rename to web/src/views/org/settings/OrgRegistries.vue
diff --git a/web/src/components/org/settings/OrgSecretsTab.vue b/web/src/views/org/settings/OrgSecrets.vue
similarity index 100%
rename from web/src/components/org/settings/OrgSecretsTab.vue
rename to web/src/views/org/settings/OrgSecrets.vue
diff --git a/web/src/views/org/OrgSettings.vue b/web/src/views/org/settings/OrgSettingsWrapper.vue
similarity index 53%
rename from web/src/views/org/OrgSettings.vue
rename to web/src/views/org/settings/OrgSettingsWrapper.vue
index 25d2e92e00..65bc95b9c3 100644
--- a/web/src/views/org/OrgSettings.vue
+++ b/web/src/views/org/settings/OrgSettingsWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <Scaffold v-if="org" enable-tabs :go-back="goBack">
+  <Scaffold v-if="org" v-model:active-tab="activeTab" enable-tabs :go-back="goBack" disable-tab-url-hash-mode>
     <template #title>
       <span>
         <router-link :to="{ name: 'org' }" class="hover:underline">
@@ -11,35 +11,27 @@
       </span>
     </template>
 
-    <Tab id="secrets" :title="$t('secrets.secrets')">
-      <OrgSecretsTab />
-    </Tab>
+    <Tab id="secrets" :title="$t('secrets.secrets')" />
+    <Tab id="registries" :title="$t('registries.registries')" />
+    <Tab id="agents" :title="$t('admin.settings.agents.agents')" />
 
-    <Tab id="registries" :title="$t('registries.registries')">
-      <OrgRegistriesTab />
-    </Tab>
-
-    <Tab id="agents" :title="$t('admin.settings.agents.agents')">
-      <OrgAgentsTab />
-    </Tab>
+    <router-view />
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
-import OrgAgentsTab from '~/components/org/settings/OrgAgentsTab.vue';
-import OrgRegistriesTab from '~/components/org/settings/OrgRegistriesTab.vue';
-import OrgSecretsTab from '~/components/org/settings/OrgSecretsTab.vue';
 import { inject } from '~/compositions/useInjectProvide';
 import useNotifications from '~/compositions/useNotifications';
 import { useRouteBack } from '~/compositions/useRouteBack';
 
 const notifications = useNotifications();
+const route = useRoute();
 const router = useRouter();
 const i18n = useI18n();
 
@@ -54,4 +46,30 @@ onMounted(async () => {
 });
 
 const goBack = useRouteBack({ name: 'org' });
+
+const activeTab = computed({
+  get() {
+    if (route.name === 'org-settings-secrets') {
+      return 'secrets';
+    }
+    if (route.name === 'org-settings-registries') {
+      return 'registries';
+    }
+    if (route.name === 'org-settings-agents') {
+      return 'agents';
+    }
+    return 'secrets';
+  },
+  set(tab: string) {
+    if (tab === 'secrets') {
+      router.push({ name: 'org-settings-secrets' });
+    } else if (tab === 'registries') {
+      router.push({ name: 'org-settings-registries' });
+    } else if (tab === 'agents') {
+      router.push({ name: 'org-settings-agents' });
+    } else {
+      router.push({ name: 'org-settings-secrets' });
+    }
+  },
+});
 </script>
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index 9bc9512504..50117f0eaf 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -22,7 +22,7 @@
       <IconButton :href="repo.forge_url" :title="$t('repo.open_in_forge')" :icon="forgeIcon" class="forge" />
       <IconButton
         v-if="repoPermissions.admin"
-        :to="{ name: 'repo-settings' }"
+        :to="{ name: 'repo-settings-general' }"
         :title="$t('settings')"
         icon="settings"
       />
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/views/repo/settings/Actions.vue
similarity index 100%
rename from web/src/components/repo/settings/ActionsTab.vue
rename to web/src/views/repo/settings/Actions.vue
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/views/repo/settings/Badge.vue
similarity index 100%
rename from web/src/components/repo/settings/BadgeTab.vue
rename to web/src/views/repo/settings/Badge.vue
diff --git a/web/src/components/repo/settings/CronTab.vue b/web/src/views/repo/settings/Crons.vue
similarity index 100%
rename from web/src/components/repo/settings/CronTab.vue
rename to web/src/views/repo/settings/Crons.vue
diff --git a/web/src/components/repo/settings/GeneralTab.vue b/web/src/views/repo/settings/General.vue
similarity index 100%
rename from web/src/components/repo/settings/GeneralTab.vue
rename to web/src/views/repo/settings/General.vue
diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/views/repo/settings/Registries.vue
similarity index 100%
rename from web/src/components/repo/settings/RegistriesTab.vue
rename to web/src/views/repo/settings/Registries.vue
diff --git a/web/src/views/repo/RepoSettings.vue b/web/src/views/repo/settings/RepoSettings.vue
similarity index 53%
rename from web/src/views/repo/RepoSettings.vue
rename to web/src/views/repo/settings/RepoSettings.vue
index 8079019760..50acaa0391 100644
--- a/web/src/views/repo/RepoSettings.vue
+++ b/web/src/views/repo/settings/RepoSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <Scaffold enable-tabs :go-back="goBack">
+  <Scaffold v-model:active-tab="activeTab" enable-tabs :go-back="goBack" disable-tab-url-hash-mode>
     <template #title>
       <span>
         <router-link :to="{ name: 'org', params: { orgId: repo!.org_id } }" class="hover:underline">{{
@@ -16,46 +16,31 @@
       </span>
     </template>
 
-    <Tab id="general" :title="$t('repo.settings.general.general')">
-      <GeneralTab />
-    </Tab>
-    <Tab id="secrets" :title="$t('secrets.secrets')">
-      <SecretsTab />
-    </Tab>
-    <Tab id="registries" :title="$t('registries.registries')">
-      <RegistriesTab />
-    </Tab>
-    <Tab id="crons" :title="$t('repo.settings.crons.crons')">
-      <CronTab />
-    </Tab>
-    <Tab id="badge" :title="$t('repo.settings.badge.badge')">
-      <BadgeTab />
-    </Tab>
-    <Tab id="actions" :title="$t('repo.settings.actions.actions')">
-      <ActionsTab />
-    </Tab>
+    <Tab id="general" :title="$t('repo.settings.general.general')" />
+    <Tab id="secrets" :title="$t('secrets.secrets')" />
+    <Tab id="registries" :title="$t('registries.registries')" />
+    <Tab id="crons" :title="$t('repo.settings.crons.crons')" />
+    <Tab id="badge" :title="$t('repo.settings.badge.badge')" />
+    <Tab id="actions" :title="$t('repo.settings.actions.actions')" />
+
+    <router-view />
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted, type Ref } from 'vue';
+import { computed, inject, onMounted, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
-import ActionsTab from '~/components/repo/settings/ActionsTab.vue';
-import BadgeTab from '~/components/repo/settings/BadgeTab.vue';
-import CronTab from '~/components/repo/settings/CronTab.vue';
-import GeneralTab from '~/components/repo/settings/GeneralTab.vue';
-import RegistriesTab from '~/components/repo/settings/RegistriesTab.vue';
-import SecretsTab from '~/components/repo/settings/SecretsTab.vue';
 import useNotifications from '~/compositions/useNotifications';
 import { useRouteBack } from '~/compositions/useRouteBack';
 import type { Repo, RepoPermissions } from '~/lib/api/types';
 
 const notifications = useNotifications();
 const router = useRouter();
+const route = useRoute();
 const i18n = useI18n();
 
 const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
@@ -76,4 +61,40 @@ onMounted(async () => {
 });
 
 const goBack = useRouteBack({ name: 'repo' });
+
+const activeTab = computed({
+  get() {
+    if (route.name === 'repo-settings-secrets') {
+      return 'secrets';
+    }
+    if (route.name === 'repo-settings-registries') {
+      return 'registries';
+    }
+    if (route.name === 'repo-settings-crons') {
+      return 'crons';
+    }
+    if (route.name === 'repo-settings-badge') {
+      return 'badge';
+    }
+    if (route.name === 'repo-settings-actions') {
+      return 'actions';
+    }
+    return 'general';
+  },
+  set(tab: string) {
+    if (tab === 'secrets') {
+      router.push({ name: 'repo-settings-secrets' });
+    } else if (tab === 'registries') {
+      router.push({ name: 'repo-settings-registries' });
+    } else if (tab === 'crons') {
+      router.push({ name: 'repo-settings-crons' });
+    } else if (tab === 'badge') {
+      router.push({ name: 'repo-settings-badge' });
+    } else if (tab === 'actions') {
+      router.push({ name: 'repo-settings-actions' });
+    } else {
+      router.push({ name: 'repo-settings-general' });
+    }
+  },
+});
 </script>
diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/views/repo/settings/Secrets.vue
similarity index 100%
rename from web/src/components/repo/settings/SecretsTab.vue
rename to web/src/views/repo/settings/Secrets.vue
diff --git a/web/src/components/user/UserAgentsTab.vue b/web/src/views/user/UserAgents.vue
similarity index 100%
rename from web/src/components/user/UserAgentsTab.vue
rename to web/src/views/user/UserAgents.vue
diff --git a/web/src/components/user/UserCLIAndAPITab.vue b/web/src/views/user/UserCLIAndAPI.vue
similarity index 100%
rename from web/src/components/user/UserCLIAndAPITab.vue
rename to web/src/views/user/UserCLIAndAPI.vue
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/views/user/UserGeneral.vue
similarity index 100%
rename from web/src/components/user/UserGeneralTab.vue
rename to web/src/views/user/UserGeneral.vue
diff --git a/web/src/components/user/UserRegistriesTab.vue b/web/src/views/user/UserRegistries.vue
similarity index 100%
rename from web/src/components/user/UserRegistriesTab.vue
rename to web/src/views/user/UserRegistries.vue
diff --git a/web/src/components/user/UserSecretsTab.vue b/web/src/views/user/UserSecrets.vue
similarity index 100%
rename from web/src/components/user/UserSecretsTab.vue
rename to web/src/views/user/UserSecrets.vue
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
new file mode 100644
index 0000000000..c57a0e94fb
--- /dev/null
+++ b/web/src/views/user/UserWrapper.vue
@@ -0,0 +1,60 @@
+<template>
+  <Scaffold v-model:active-tab="activeTab" enable-tabs disable-tab-url-hash-mode>
+    <template #title>{{ $t('user.settings.settings') }}</template>
+    <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
+
+    <Tab id="general" :title="$t('user.settings.general.general')" />
+    <Tab id="secrets" :title="$t('secrets.secrets')" />
+    <Tab id="registries" :title="$t('registries.registries')" />
+    <Tab id="cli_and_api" :title="$t('user.settings.cli_and_api.cli_and_api')" />
+    <Tab id="agents" :title="$t('admin.settings.agents.agents')" />
+
+    <router-view />
+  </Scaffold>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import Button from '~/components/atomic/Button.vue';
+import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import Tab from '~/components/layout/scaffold/Tab.vue';
+import useConfig from '~/compositions/useConfig';
+
+const route = useRoute();
+const router = useRouter();
+
+const address = `${window.location.protocol}//${window.location.host}${useConfig().rootPath}`; // port is included in location.host
+
+const activeTab = computed({
+  get() {
+    if (route.name === 'user-secrets') {
+      return 'secrets';
+    }
+    if (route.name === 'user-registries') {
+      return 'registries';
+    }
+    if (route.name === 'user-cli-and-api') {
+      return 'cli_and_api';
+    }
+    if (route.name === 'user-agents') {
+      return 'agents';
+    }
+    return 'general';
+  },
+  set(tab: string) {
+    if (tab === 'secrets') {
+      router.push({ name: 'user-secrets' });
+    } else if (tab === 'registries') {
+      router.push({ name: 'user-registries' });
+    } else if (tab === 'cli_and_api') {
+      router.push({ name: 'user-cli-and-api' });
+    } else if (tab === 'agents') {
+      router.push({ name: 'user-agents' });
+    } else {
+      router.push({ name: 'user-general' });
+    }
+  },
+});
+</script>

From ee5280ec2d423c94e5e3c0821ce74c1eebabec7c Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Fri, 8 Nov 2024 14:14:06 +0200
Subject: [PATCH 02/10] Completely remove hash mode

---
 .../components/layout/scaffold/Scaffold.vue   | 26 +------
 web/src/components/layout/scaffold/Tab.vue    |  2 +
 web/src/components/layout/scaffold/Tabs.vue   | 10 +--
 web/src/compositions/useTabs.ts               | 47 ++++++++-----
 web/src/views/admin/AdminSettingsWrapper.vue  | 69 +++----------------
 .../views/org/settings/OrgSettingsWrapper.vue | 39 ++---------
 web/src/views/repo/RepoWrapper.vue            | 39 +++--------
 .../views/repo/pipeline/PipelineWrapper.vue   | 61 +++-------------
 web/src/views/repo/settings/RepoSettings.vue  | 55 +++------------
 web/src/views/user/UserWrapper.vue            | 48 ++-----------
 10 files changed, 84 insertions(+), 312 deletions(-)

diff --git a/web/src/components/layout/scaffold/Scaffold.vue b/web/src/components/layout/scaffold/Scaffold.vue
index f211b16620..cdd1eea246 100644
--- a/web/src/components/layout/scaffold/Scaffold.vue
+++ b/web/src/components/layout/scaffold/Scaffold.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
 
 import Container from '~/components/layout/Container.vue';
 import { useTabsProvider } from '~/compositions/useTabs';
@@ -33,37 +32,16 @@ const props = defineProps<{
 
   // Tabs
   enableTabs?: boolean;
-  disableTabUrlHashMode?: boolean;
-  activeTab?: string;
 
   // Content
   fluidContent?: boolean;
 }>();
 
-const emit = defineEmits<{
-  (event: 'update:activeTab', value: string | undefined): void;
+defineEmits<{
   (event: 'update:search', value: string): void;
 }>();
 
 if (props.enableTabs) {
-  const internalActiveTab = ref(props.activeTab);
-
-  watch(
-    () => props.activeTab,
-    (activeTab) => {
-      internalActiveTab.value = activeTab;
-    },
-  );
-
-  useTabsProvider({
-    activeTab: computed({
-      get: () => internalActiveTab.value,
-      set: (value) => {
-        internalActiveTab.value = value;
-        emit('update:activeTab', value);
-      },
-    }),
-    disableUrlHashMode: computed(() => props.disableTabUrlHashMode || false),
-  });
+  useTabsProvider();
 }
 </script>
diff --git a/web/src/components/layout/scaffold/Tab.vue b/web/src/components/layout/scaffold/Tab.vue
index 23acb9799d..2cb1d78391 100644
--- a/web/src/components/layout/scaffold/Tab.vue
+++ b/web/src/components/layout/scaffold/Tab.vue
@@ -12,6 +12,7 @@ import { useTabsClient, type Tab } from '~/compositions/useTabs';
 
 const props = defineProps<{
   id?: string;
+  alternativeRoute?: string;
   title: string;
   icon?: IconNames;
   iconClass?: string;
@@ -23,6 +24,7 @@ const tab = ref<Tab>();
 onMounted(() => {
   tab.value = {
     id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
+    alternativeRoute: props.alternativeRoute,
     title: props.title,
     icon: props.icon,
     iconClass: props.iconClass,
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index d74cdc0f0e..96876ab215 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -22,15 +22,11 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router';
 
 import Icon from '~/components/atomic/Icon.vue';
 import { useTabsClient, type Tab } from '~/compositions/useTabs';
 
-const router = useRouter();
-const route = useRoute();
-
-const { activeTab, tabs, disableUrlHashMode } = useTabsClient();
+const { activeTab, tabs } = useTabsClient();
 
 async function selectTab(tab: Tab) {
   if (tab.id === undefined) {
@@ -38,9 +34,5 @@ async function selectTab(tab: Tab) {
   }
 
   activeTab.value = tab.id;
-
-  if (!disableUrlHashMode.value) {
-    await router.replace({ params: route.params, hash: `#${tab.id}` });
-  }
 }
 </script>
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index a9538979ad..e16e0cbe63 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -1,49 +1,58 @@
-import { inject, onMounted, provide, ref, type Ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, inject, onMounted, provide, ref, type Ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import type { IconNames } from '~/components/atomic/Icon.vue';
 
 export interface Tab {
   id: string;
+  alternativeRoute?: string;
   title: string;
   icon?: IconNames;
   iconClass?: string;
 }
 
-export function useTabsProvider({
-  activeTab,
-  disableUrlHashMode,
-}: {
-  activeTab: Ref<string | undefined>;
-  disableUrlHashMode: Ref<boolean>;
-}) {
+export function useTabsProvider() {
   const route = useRoute();
+  const router = useRouter();
+
+  const alternativeRoute: Record<string, string> = {};
 
   const tabs = ref<Tab[]>([]);
 
+  const activeTab = computed({
+    get() {
+      if (route.name !== undefined) {
+        if (route.name.toString() in alternativeRoute) {
+          return alternativeRoute[route.name.toString()];
+        }
+        return route.name.toString()
+      }
+      return tabs.value[0].id
+    },
+    set(tab) {
+      router.push({ name: tab }).catch(console.error);
+    },
+  });
+
   provide('tabs', tabs);
-  provide('disable-url-hash-mode', disableUrlHashMode);
   provide('active-tab', activeTab);
 
   onMounted(() => {
-    if (activeTab.value !== undefined) {
-      return;
+    for (const i of tabs.value) {
+      if (i.alternativeRoute !== undefined) {
+        alternativeRoute[i.alternativeRoute] = i.id;
+      }
     }
-
-    const hashTab = route.hash.replace(/^#/, '');
-
-    activeTab.value = hashTab || tabs.value[0].id;
   });
 }
 
 export function useTabsClient() {
   const tabs = inject<Ref<Tab[]>>('tabs');
-  const disableUrlHashMode = inject<Ref<boolean>>('disable-url-hash-mode');
   const activeTab = inject<Ref<string>>('active-tab');
 
-  if (activeTab === undefined || tabs === undefined || disableUrlHashMode === undefined) {
+  if (activeTab === undefined || tabs === undefined) {
     throw new Error('Please use this "useTabsClient" composition inside a component running "useTabsProvider".');
   }
 
-  return { activeTab, tabs, disableUrlHashMode };
+  return { activeTab, tabs };
 }
diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
index c69386e783..cead6bb173 100644
--- a/web/src/views/admin/AdminSettingsWrapper.vue
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -1,25 +1,25 @@
 <template>
-  <Scaffold v-model:active-tab="activeTab" enable-tabs disable-tab-url-hash-mode>
+  <Scaffold enable-tabs>
     <template #title>
       {{ $t('settings') }}
     </template>
-    <Tab id="info" :title="$t('info')" />
-    <Tab id="secrets" :title="$t('secrets.secrets')" />
-    <Tab id="registries" :title="$t('registries.registries')" />
-    <Tab id="repos" :title="$t('admin.settings.repos.repos')" />
-    <Tab id="users" :title="$t('admin.settings.users.users')" />
-    <Tab id="orgs" :title="$t('admin.settings.orgs.orgs')" />
-    <Tab id="agents" :title="$t('admin.settings.agents.agents')" />
-    <Tab id="queue" :title="$t('admin.settings.queue.queue')" />
+    <Tab id="admin-settings-info" :title="$t('info')" />
+    <Tab id="admin-settings-secrets" :title="$t('secrets.secrets')" />
+    <Tab id="admin-settings-registries" :title="$t('registries.registries')" />
+    <Tab id="admin-settings-repos" :title="$t('admin.settings.repos.repos')" />
+    <Tab id="admin-settings-users" :title="$t('admin.settings.users.users')" />
+    <Tab id="admin-settings-orgs" :title="$t('admin.settings.orgs.orgs')" />
+    <Tab id="admin-settings-agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab id="admin-settings-queue" :title="$t('admin.settings.queue.queue')" />
 
     <router-view />
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
@@ -28,7 +28,6 @@ import useNotifications from '~/compositions/useNotifications';
 
 const notifications = useNotifications();
 const router = useRouter();
-const route = useRoute();
 const i18n = useI18n();
 const { user } = useAuthentication();
 
@@ -43,50 +42,4 @@ onMounted(async () => {
     await router.replace({ name: 'home' });
   }
 });
-
-const activeTab = computed({
-  get() {
-    if (route.name === 'admin-settings-secrets') {
-      return 'secrets';
-    }
-    if (route.name === 'admin-settings-registries') {
-      return 'registries';
-    }
-    if (route.name === 'admin-settings-repos') {
-      return 'repos';
-    }
-    if (route.name === 'admin-settings-users') {
-      return 'users';
-    }
-    if (route.name === 'admin-settings-orgs') {
-      return 'orgs';
-    }
-    if (route.name === 'admin-settings-agents') {
-      return 'agents';
-    }
-    if (route.name === 'admin-settings-queue') {
-      return 'queue';
-    }
-    return 'info';
-  },
-  set(tab: string) {
-    if (tab === 'secrets') {
-      router.push({ name: 'admin-settings-secrets' });
-    } else if (tab === 'registries') {
-      router.push({ name: 'admin-settings-registries' });
-    } else if (tab === 'repos') {
-      router.push({ name: 'admin-settings-repos' });
-    } else if (tab === 'users') {
-      router.push({ name: 'admin-settings-users' });
-    } else if (tab === 'orgs') {
-      router.push({ name: 'admin-settings-orgs' });
-    } else if (tab === 'agents') {
-      router.push({ name: 'admin-settings-agents' });
-    } else if (tab === 'queue') {
-      router.push({ name: 'admin-settings-queue' });
-    } else {
-      router.push({ name: 'admin-settings-info' });
-    }
-  },
-});
 </script>
diff --git a/web/src/views/org/settings/OrgSettingsWrapper.vue b/web/src/views/org/settings/OrgSettingsWrapper.vue
index 65bc95b9c3..cf9851ed28 100644
--- a/web/src/views/org/settings/OrgSettingsWrapper.vue
+++ b/web/src/views/org/settings/OrgSettingsWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <Scaffold v-if="org" v-model:active-tab="activeTab" enable-tabs :go-back="goBack" disable-tab-url-hash-mode>
+  <Scaffold v-if="org" enable-tabs :go-back="goBack">
     <template #title>
       <span>
         <router-link :to="{ name: 'org' }" class="hover:underline">
@@ -11,18 +11,18 @@
       </span>
     </template>
 
-    <Tab id="secrets" :title="$t('secrets.secrets')" />
-    <Tab id="registries" :title="$t('registries.registries')" />
-    <Tab id="agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab id="org-settings-secrets" :title="$t('secrets.secrets')" />
+    <Tab id="org-settings-registries" :title="$t('registries.registries')" />
+    <Tab id="org-settings-agents" :title="$t('admin.settings.agents.agents')" />
 
     <router-view />
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
@@ -31,7 +31,6 @@ import useNotifications from '~/compositions/useNotifications';
 import { useRouteBack } from '~/compositions/useRouteBack';
 
 const notifications = useNotifications();
-const route = useRoute();
 const router = useRouter();
 const i18n = useI18n();
 
@@ -46,30 +45,4 @@ onMounted(async () => {
 });
 
 const goBack = useRouteBack({ name: 'org' });
-
-const activeTab = computed({
-  get() {
-    if (route.name === 'org-settings-secrets') {
-      return 'secrets';
-    }
-    if (route.name === 'org-settings-registries') {
-      return 'registries';
-    }
-    if (route.name === 'org-settings-agents') {
-      return 'agents';
-    }
-    return 'secrets';
-  },
-  set(tab: string) {
-    if (tab === 'secrets') {
-      router.push({ name: 'org-settings-secrets' });
-    } else if (tab === 'registries') {
-      router.push({ name: 'org-settings-registries' });
-    } else if (tab === 'agents') {
-      router.push({ name: 'org-settings-agents' });
-    } else {
-      router.push({ name: 'org-settings-secrets' });
-    }
-  },
-});
 </script>
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index 50117f0eaf..9cf7ca0d30 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -1,10 +1,5 @@
 <template>
-  <Scaffold
-    v-if="repo && repoPermissions && route.meta.repoHeader"
-    v-model:active-tab="activeTab"
-    enable-tabs
-    disable-tab-url-hash-mode
-  >
+  <Scaffold v-if="repo && repoPermissions && route.meta.repoHeader" enable-tabs>
     <template #title>
       <span class="flex">
         <router-link :to="{ name: 'org', params: { orgId: repo.org_id } }" class="hover:underline">{{
@@ -43,9 +38,14 @@
       />
     </template>
 
-    <Tab id="activity" :title="$t('repo.activity')" />
-    <Tab id="branches" :title="$t('repo.branches')" />
-    <Tab v-if="repo.pr_enabled && repo.allow_pr" id="pull_requests" :title="$t('repo.pull_requests')" />
+    <Tab id="repo" :title="$t('repo.activity')" />
+    <Tab id="repo-branches" alternative-route="repo-branch" :title="$t('repo.branches')" />
+    <Tab
+      v-if="repo.pr_enabled && repo.allow_pr"
+      id="repo-pull-requests"
+      alternative-route="repo-pull-request"
+      :title="$t('repo.pull_requests')"
+    />
 
     <router-view />
   </Scaffold>
@@ -132,25 +132,4 @@ watch([repositoryId], () => {
 });
 
 const badgeUrl = computed(() => repo.value && `${config.rootPath}/api/badges/${repo.value.id}/status.svg`);
-
-const activeTab = computed({
-  get() {
-    if (route.name === 'repo-branches' || route.name === 'repo-branch') {
-      return 'branches';
-    }
-    if (route.name === 'repo-pull-requests' || route.name === 'repo-pull-request') {
-      return 'pull_requests';
-    }
-    return 'activity';
-  },
-  set(tab: string) {
-    if (tab === 'branches') {
-      router.push({ name: 'repo-branches' });
-    } else if (tab === 'pull_requests') {
-      router.push({ name: 'repo-pull-requests' });
-    } else {
-      router.push({ name: 'repo' });
-    }
-  },
-});
 </script>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 5cbf6f7b24..aaae0094b1 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -1,11 +1,9 @@
 <template>
   <Scaffold
     v-if="pipeline && repo"
-    v-model:active-tab="activeTab"
     enable-tabs
-    disable-tab-url-hash-mode
     :go-back="goBack"
-    :fluid-content="activeTab === 'tasks'"
+    :fluid-content="route.name === 'repo-pipeline'"
     full-width-header
   >
     <template #title>
@@ -75,10 +73,10 @@
       </div>
     </template>
 
-    <Tab id="tasks" :title="$t('repo.pipeline.tasks')" />
+    <Tab id="repo-pipeline" :title="$t('repo.pipeline.tasks')" />
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
-      id="errors"
+      id="repo-pipeline-errors"
       icon="attention"
       :title="
         pipeline.errors.some((e) => !e.is_warning)
@@ -87,13 +85,17 @@
       "
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
     />
-    <Tab id="config" :title="$t('repo.pipeline.config')" />
+    <Tab id="repo-pipeline-config" :title="$t('repo.pipeline.config')" />
     <Tab
       v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
-      id="changed-files"
+      id="repo-pipeline-changed-files"
       :title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length })"
     />
-    <Tab v-if="repoPermissions && repoPermissions.push" id="debug" :title="$t('repo.pipeline.debug.title')" />
+    <Tab
+      v-if="repoPermissions && repoPermissions.push"
+      id="repo-pipeline-debug"
+      :title="$t('repo.pipeline.debug.title')"
+    />
 
     <router-view />
   </Scaffold>
@@ -206,48 +208,5 @@ onBeforeUnmount(() => {
   favicon.updateStatus('default');
 });
 
-const activeTab = computed({
-  get() {
-    if (route.name === 'repo-pipeline-changed-files') {
-      return 'changed-files';
-    }
-
-    if (route.name === 'repo-pipeline-config') {
-      return 'config';
-    }
-
-    if (route.name === 'repo-pipeline-errors') {
-      return 'errors';
-    }
-
-    if (route.name === 'repo-pipeline-debug' && repoPermissions.value?.push) {
-      return 'debug';
-    }
-
-    return 'tasks';
-  },
-  set(tab: string) {
-    if (tab === 'tasks') {
-      router.replace({ name: 'repo-pipeline' });
-    }
-
-    if (tab === 'changed-files') {
-      router.replace({ name: 'repo-pipeline-changed-files' });
-    }
-
-    if (tab === 'config') {
-      router.replace({ name: 'repo-pipeline-config' });
-    }
-
-    if (tab === 'errors') {
-      router.replace({ name: 'repo-pipeline-errors' });
-    }
-
-    if (tab === 'debug' && repoPermissions.value?.push) {
-      router.replace({ name: 'repo-pipeline-debug' });
-    }
-  },
-});
-
 const goBack = useRouteBack({ name: 'repo' });
 </script>
diff --git a/web/src/views/repo/settings/RepoSettings.vue b/web/src/views/repo/settings/RepoSettings.vue
index 50acaa0391..dda94087cb 100644
--- a/web/src/views/repo/settings/RepoSettings.vue
+++ b/web/src/views/repo/settings/RepoSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <Scaffold v-model:active-tab="activeTab" enable-tabs :go-back="goBack" disable-tab-url-hash-mode>
+  <Scaffold enable-tabs :go-back="goBack">
     <template #title>
       <span>
         <router-link :to="{ name: 'org', params: { orgId: repo!.org_id } }" class="hover:underline">{{
@@ -16,21 +16,21 @@
       </span>
     </template>
 
-    <Tab id="general" :title="$t('repo.settings.general.general')" />
-    <Tab id="secrets" :title="$t('secrets.secrets')" />
-    <Tab id="registries" :title="$t('registries.registries')" />
-    <Tab id="crons" :title="$t('repo.settings.crons.crons')" />
-    <Tab id="badge" :title="$t('repo.settings.badge.badge')" />
-    <Tab id="actions" :title="$t('repo.settings.actions.actions')" />
+    <Tab id="repo-settings-general" :title="$t('repo.settings.general.general')" />
+    <Tab id="repo-settings-secrets" :title="$t('secrets.secrets')" />
+    <Tab id="repo-settings-registries" :title="$t('registries.registries')" />
+    <Tab id="repo-settings-crons" :title="$t('repo.settings.crons.crons')" />
+    <Tab id="repo-settings-badge" :title="$t('repo.settings.badge.badge')" />
+    <Tab id="repo-settings-actions" :title="$t('repo.settings.actions.actions')" />
 
     <router-view />
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, type Ref } from 'vue';
+import { inject, onMounted, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
@@ -40,7 +40,6 @@ import type { Repo, RepoPermissions } from '~/lib/api/types';
 
 const notifications = useNotifications();
 const router = useRouter();
-const route = useRoute();
 const i18n = useI18n();
 
 const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
@@ -61,40 +60,4 @@ onMounted(async () => {
 });
 
 const goBack = useRouteBack({ name: 'repo' });
-
-const activeTab = computed({
-  get() {
-    if (route.name === 'repo-settings-secrets') {
-      return 'secrets';
-    }
-    if (route.name === 'repo-settings-registries') {
-      return 'registries';
-    }
-    if (route.name === 'repo-settings-crons') {
-      return 'crons';
-    }
-    if (route.name === 'repo-settings-badge') {
-      return 'badge';
-    }
-    if (route.name === 'repo-settings-actions') {
-      return 'actions';
-    }
-    return 'general';
-  },
-  set(tab: string) {
-    if (tab === 'secrets') {
-      router.push({ name: 'repo-settings-secrets' });
-    } else if (tab === 'registries') {
-      router.push({ name: 'repo-settings-registries' });
-    } else if (tab === 'crons') {
-      router.push({ name: 'repo-settings-crons' });
-    } else if (tab === 'badge') {
-      router.push({ name: 'repo-settings-badge' });
-    } else if (tab === 'actions') {
-      router.push({ name: 'repo-settings-actions' });
-    } else {
-      router.push({ name: 'repo-settings-general' });
-    }
-  },
-});
 </script>
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
index c57a0e94fb..9e446f4afa 100644
--- a/web/src/views/user/UserWrapper.vue
+++ b/web/src/views/user/UserWrapper.vue
@@ -1,60 +1,24 @@
 <template>
-  <Scaffold v-model:active-tab="activeTab" enable-tabs disable-tab-url-hash-mode>
+  <Scaffold enable-tabs>
     <template #title>{{ $t('user.settings.settings') }}</template>
     <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
 
-    <Tab id="general" :title="$t('user.settings.general.general')" />
-    <Tab id="secrets" :title="$t('secrets.secrets')" />
-    <Tab id="registries" :title="$t('registries.registries')" />
-    <Tab id="cli_and_api" :title="$t('user.settings.cli_and_api.cli_and_api')" />
-    <Tab id="agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab id="user-general" :title="$t('user.settings.general.general')" />
+    <Tab id="user-secrets" :title="$t('secrets.secrets')" />
+    <Tab id="user-registries" :title="$t('registries.registries')" />
+    <Tab id="user-cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')" />
+    <Tab id="user-agents" :title="$t('admin.settings.agents.agents')" />
 
     <router-view />
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
 import useConfig from '~/compositions/useConfig';
 
-const route = useRoute();
-const router = useRouter();
-
 const address = `${window.location.protocol}//${window.location.host}${useConfig().rootPath}`; // port is included in location.host
-
-const activeTab = computed({
-  get() {
-    if (route.name === 'user-secrets') {
-      return 'secrets';
-    }
-    if (route.name === 'user-registries') {
-      return 'registries';
-    }
-    if (route.name === 'user-cli-and-api') {
-      return 'cli_and_api';
-    }
-    if (route.name === 'user-agents') {
-      return 'agents';
-    }
-    return 'general';
-  },
-  set(tab: string) {
-    if (tab === 'secrets') {
-      router.push({ name: 'user-secrets' });
-    } else if (tab === 'registries') {
-      router.push({ name: 'user-registries' });
-    } else if (tab === 'cli_and_api') {
-      router.push({ name: 'user-cli-and-api' });
-    } else if (tab === 'agents') {
-      router.push({ name: 'user-agents' });
-    } else {
-      router.push({ name: 'user-general' });
-    }
-  },
-});
 </script>

From c911ad0276ea0d58511c7c1f1f42775a30e6aa1a Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Fri, 8 Nov 2024 14:16:44 +0200
Subject: [PATCH 03/10] Rename to `to`

---
 web/src/components/layout/scaffold/Tab.vue       |  8 ++++----
 web/src/components/layout/scaffold/Tabs.vue      | 12 ++++++------
 web/src/compositions/useTabs.ts                  |  6 +++---
 web/src/views/admin/AdminSettingsWrapper.vue     | 16 ++++++++--------
 .../views/org/settings/OrgSettingsWrapper.vue    |  6 +++---
 web/src/views/repo/RepoWrapper.vue               |  6 +++---
 web/src/views/repo/pipeline/PipelineWrapper.vue  | 10 +++++-----
 web/src/views/repo/settings/RepoSettings.vue     | 12 ++++++------
 web/src/views/user/UserWrapper.vue               | 10 +++++-----
 9 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/web/src/components/layout/scaffold/Tab.vue b/web/src/components/layout/scaffold/Tab.vue
index 2cb1d78391..02b6b7c2a2 100644
--- a/web/src/components/layout/scaffold/Tab.vue
+++ b/web/src/components/layout/scaffold/Tab.vue
@@ -11,7 +11,7 @@ import type { IconNames } from '~/components/atomic/Icon.vue';
 import { useTabsClient, type Tab } from '~/compositions/useTabs';
 
 const props = defineProps<{
-  id?: string;
+  to?: string;
   alternativeRoute?: string;
   title: string;
   icon?: IconNames;
@@ -23,7 +23,7 @@ const tab = ref<Tab>();
 
 onMounted(() => {
   tab.value = {
-    id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
+    to: props.to || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
     alternativeRoute: props.alternativeRoute,
     title: props.title,
     icon: props.icon,
@@ -31,10 +31,10 @@ onMounted(() => {
   };
 
   // don't add tab if tab id is already present
-  if (!tabs.value.find(({ id }) => id === props.id)) {
+  if (!tabs.value.find(({ to }) => to === props.to)) {
     tabs.value.push(tab.value);
   }
 });
 
-const isActive = computed(() => tab.value && tab.value.id === activeTab.value);
+const isActive = computed(() => tab.value && tab.value.to === activeTab.value);
 </script>
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 96876ab215..beeb6ea660 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -2,16 +2,16 @@
   <div class="flex flex-wrap">
     <button
       v-for="tab in tabs"
-      :key="tab.id"
+      :key="tab.to"
       class="w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :class="{
-        'border-wp-text-100': activeTab === tab.id,
-        'border-transparent': activeTab !== tab.id,
+        'border-wp-text-100': activeTab === tab.to,
+        'border-transparent': activeTab !== tab.to,
       }"
       type="button"
       @click="selectTab(tab)"
     >
-      <Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
+      <Icon v-if="activeTab === tab.to" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
       <span class="flex gap-2 items-center flex-row-reverse md:flex-row">
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
@@ -29,10 +29,10 @@ import { useTabsClient, type Tab } from '~/compositions/useTabs';
 const { activeTab, tabs } = useTabsClient();
 
 async function selectTab(tab: Tab) {
-  if (tab.id === undefined) {
+  if (tab.to === undefined) {
     return;
   }
 
-  activeTab.value = tab.id;
+  activeTab.value = tab.to;
 }
 </script>
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index e16e0cbe63..fb0219ed49 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import type { IconNames } from '~/components/atomic/Icon.vue';
 
 export interface Tab {
-  id: string;
+  to: string;
   alternativeRoute?: string;
   title: string;
   icon?: IconNames;
@@ -27,7 +27,7 @@ export function useTabsProvider() {
         }
         return route.name.toString()
       }
-      return tabs.value[0].id
+      return tabs.value[0].to
     },
     set(tab) {
       router.push({ name: tab }).catch(console.error);
@@ -40,7 +40,7 @@ export function useTabsProvider() {
   onMounted(() => {
     for (const i of tabs.value) {
       if (i.alternativeRoute !== undefined) {
-        alternativeRoute[i.alternativeRoute] = i.id;
+        alternativeRoute[i.alternativeRoute] = i.to;
       }
     }
   });
diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
index cead6bb173..303fa55097 100644
--- a/web/src/views/admin/AdminSettingsWrapper.vue
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -3,14 +3,14 @@
     <template #title>
       {{ $t('settings') }}
     </template>
-    <Tab id="admin-settings-info" :title="$t('info')" />
-    <Tab id="admin-settings-secrets" :title="$t('secrets.secrets')" />
-    <Tab id="admin-settings-registries" :title="$t('registries.registries')" />
-    <Tab id="admin-settings-repos" :title="$t('admin.settings.repos.repos')" />
-    <Tab id="admin-settings-users" :title="$t('admin.settings.users.users')" />
-    <Tab id="admin-settings-orgs" :title="$t('admin.settings.orgs.orgs')" />
-    <Tab id="admin-settings-agents" :title="$t('admin.settings.agents.agents')" />
-    <Tab id="admin-settings-queue" :title="$t('admin.settings.queue.queue')" />
+    <Tab to="admin-settings-info" :title="$t('info')" />
+    <Tab to="admin-settings-secrets" :title="$t('secrets.secrets')" />
+    <Tab to="admin-settings-registries" :title="$t('registries.registries')" />
+    <Tab to="admin-settings-repos" :title="$t('admin.settings.repos.repos')" />
+    <Tab to="admin-settings-users" :title="$t('admin.settings.users.users')" />
+    <Tab to="admin-settings-orgs" :title="$t('admin.settings.orgs.orgs')" />
+    <Tab to="admin-settings-agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab to="admin-settings-queue" :title="$t('admin.settings.queue.queue')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/org/settings/OrgSettingsWrapper.vue b/web/src/views/org/settings/OrgSettingsWrapper.vue
index cf9851ed28..bf2ffdceda 100644
--- a/web/src/views/org/settings/OrgSettingsWrapper.vue
+++ b/web/src/views/org/settings/OrgSettingsWrapper.vue
@@ -11,9 +11,9 @@
       </span>
     </template>
 
-    <Tab id="org-settings-secrets" :title="$t('secrets.secrets')" />
-    <Tab id="org-settings-registries" :title="$t('registries.registries')" />
-    <Tab id="org-settings-agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab to="org-settings-secrets" :title="$t('secrets.secrets')" />
+    <Tab to="org-settings-registries" :title="$t('registries.registries')" />
+    <Tab to="org-settings-agents" :title="$t('admin.settings.agents.agents')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index 9cf7ca0d30..a5761933b7 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -38,11 +38,11 @@
       />
     </template>
 
-    <Tab id="repo" :title="$t('repo.activity')" />
-    <Tab id="repo-branches" alternative-route="repo-branch" :title="$t('repo.branches')" />
+    <Tab to="repo" :title="$t('repo.activity')" />
+    <Tab to="repo-branches" alternative-route="repo-branch" :title="$t('repo.branches')" />
     <Tab
       v-if="repo.pr_enabled && repo.allow_pr"
-      id="repo-pull-requests"
+      to="repo-pull-requests"
       alternative-route="repo-pull-request"
       :title="$t('repo.pull_requests')"
     />
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index aaae0094b1..a6c09484c9 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -73,10 +73,10 @@
       </div>
     </template>
 
-    <Tab id="repo-pipeline" :title="$t('repo.pipeline.tasks')" />
+    <Tab to="repo-pipeline" :title="$t('repo.pipeline.tasks')" />
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
-      id="repo-pipeline-errors"
+      to="repo-pipeline-errors"
       icon="attention"
       :title="
         pipeline.errors.some((e) => !e.is_warning)
@@ -85,15 +85,15 @@
       "
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
     />
-    <Tab id="repo-pipeline-config" :title="$t('repo.pipeline.config')" />
+    <Tab to="repo-pipeline-config" :title="$t('repo.pipeline.config')" />
     <Tab
       v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
-      id="repo-pipeline-changed-files"
+      to="repo-pipeline-changed-files"
       :title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length })"
     />
     <Tab
       v-if="repoPermissions && repoPermissions.push"
-      id="repo-pipeline-debug"
+      to="repo-pipeline-debug"
       :title="$t('repo.pipeline.debug.title')"
     />
 
diff --git a/web/src/views/repo/settings/RepoSettings.vue b/web/src/views/repo/settings/RepoSettings.vue
index dda94087cb..b033027425 100644
--- a/web/src/views/repo/settings/RepoSettings.vue
+++ b/web/src/views/repo/settings/RepoSettings.vue
@@ -16,12 +16,12 @@
       </span>
     </template>
 
-    <Tab id="repo-settings-general" :title="$t('repo.settings.general.general')" />
-    <Tab id="repo-settings-secrets" :title="$t('secrets.secrets')" />
-    <Tab id="repo-settings-registries" :title="$t('registries.registries')" />
-    <Tab id="repo-settings-crons" :title="$t('repo.settings.crons.crons')" />
-    <Tab id="repo-settings-badge" :title="$t('repo.settings.badge.badge')" />
-    <Tab id="repo-settings-actions" :title="$t('repo.settings.actions.actions')" />
+    <Tab to="repo-settings-general" :title="$t('repo.settings.general.general')" />
+    <Tab to="repo-settings-secrets" :title="$t('secrets.secrets')" />
+    <Tab to="repo-settings-registries" :title="$t('registries.registries')" />
+    <Tab to="repo-settings-crons" :title="$t('repo.settings.crons.crons')" />
+    <Tab to="repo-settings-badge" :title="$t('repo.settings.badge.badge')" />
+    <Tab to="repo-settings-actions" :title="$t('repo.settings.actions.actions')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
index 9e446f4afa..ac70ae85a9 100644
--- a/web/src/views/user/UserWrapper.vue
+++ b/web/src/views/user/UserWrapper.vue
@@ -3,11 +3,11 @@
     <template #title>{{ $t('user.settings.settings') }}</template>
     <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
 
-    <Tab id="user-general" :title="$t('user.settings.general.general')" />
-    <Tab id="user-secrets" :title="$t('secrets.secrets')" />
-    <Tab id="user-registries" :title="$t('registries.registries')" />
-    <Tab id="user-cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')" />
-    <Tab id="user-agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab to="user-general" :title="$t('user.settings.general.general')" />
+    <Tab to="user-secrets" :title="$t('secrets.secrets')" />
+    <Tab to="user-registries" :title="$t('registries.registries')" />
+    <Tab to="user-cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')" />
+    <Tab to="user-agents" :title="$t('admin.settings.agents.agents')" />
 
     <router-view />
   </Scaffold>

From 1f09f76f2d7cc3e2897de45f4a7afe28ecc6fd40 Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Fri, 8 Nov 2024 14:22:02 +0200
Subject: [PATCH 04/10] format

---
 web/src/components/layout/scaffold/Scaffold.vue | 1 -
 web/src/components/layout/scaffold/Tabs.vue     | 1 -
 web/src/compositions/useTabs.ts                 | 4 ++--
 web/src/views/user/UserWrapper.vue              | 1 -
 4 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/src/components/layout/scaffold/Scaffold.vue b/web/src/components/layout/scaffold/Scaffold.vue
index cdd1eea246..c6fee08248 100644
--- a/web/src/components/layout/scaffold/Scaffold.vue
+++ b/web/src/components/layout/scaffold/Scaffold.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-
 import Container from '~/components/layout/Container.vue';
 import { useTabsProvider } from '~/compositions/useTabs';
 
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index beeb6ea660..ecd2ad2bff 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -22,7 +22,6 @@
 </template>
 
 <script setup lang="ts">
-
 import Icon from '~/components/atomic/Icon.vue';
 import { useTabsClient, type Tab } from '~/compositions/useTabs';
 
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index fb0219ed49..d60b587783 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -25,9 +25,9 @@ export function useTabsProvider() {
         if (route.name.toString() in alternativeRoute) {
           return alternativeRoute[route.name.toString()];
         }
-        return route.name.toString()
+        return route.name.toString();
       }
-      return tabs.value[0].to
+      return tabs.value[0].to;
     },
     set(tab) {
       router.push({ name: tab }).catch(console.error);
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
index ac70ae85a9..d90304f69f 100644
--- a/web/src/views/user/UserWrapper.vue
+++ b/web/src/views/user/UserWrapper.vue
@@ -14,7 +14,6 @@
 </template>
 
 <script lang="ts" setup>
-
 import Button from '~/components/atomic/Button.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';

From 81274e209690d2443421a87e87a027c1eef79b7e Mon Sep 17 00:00:00 2001
From: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Date: Sun, 10 Nov 2024 18:07:53 +0200
Subject: [PATCH 05/10] Update web/src/views/admin/AdminSettingsWrapper.vue

Co-authored-by: Anbraten <6918444+anbraten@users.noreply.github.com>
---
 web/src/views/admin/AdminSettingsWrapper.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
index 303fa55097..5956e5555a 100644
--- a/web/src/views/admin/AdminSettingsWrapper.vue
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -36,10 +36,5 @@ onMounted(async () => {
     notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
     await router.replace({ name: 'home' });
   }
-
-  if (!user?.admin) {
-    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
-    await router.replace({ name: 'home' });
-  }
 });
 </script>

From fe9c0eced8d9982c3235d82ab8a4298eefc89f5e Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Mon, 18 Nov 2024 16:32:51 +0200
Subject: [PATCH 06/10] No unnecessary route names

---
 web/src/components/layout/header/Navbar.vue  | 4 ++--
 web/src/router.ts                            | 9 +++------
 web/src/views/admin/AdminSettingsWrapper.vue | 2 +-
 web/src/views/repo/RepoWrapper.vue           | 2 +-
 web/src/views/repo/settings/RepoSettings.vue | 2 +-
 web/src/views/user/UserWrapper.vue           | 2 +-
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 733d27ddd4..73dbf3553c 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -23,7 +23,7 @@
         v-if="user?.admin"
         class="navbar-icon relative"
         :title="$t('settings')"
-        :to="{ name: 'admin-settings-info' }"
+        :to="{ name: 'admin-settings' }"
       >
         <Icon name="settings" />
         <div
@@ -35,7 +35,7 @@
       <ActivePipelines v-if="user" class="navbar-icon" />
       <IconButton
         v-if="user"
-        :to="{ name: 'user-general' }"
+        :to="{ name: 'user' }"
         :title="$t('user.settings.settings')"
         class="navbar-icon !p-1.5"
       >
diff --git a/web/src/router.ts b/web/src/router.ts
index da8b37e0bf..35fa948f81 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -103,14 +103,13 @@ const routes: RouteRecordRaw[] = [
           },
           {
             path: 'settings',
-            name: 'repo-settings',
             component: (): Component => import('~/views/repo/settings/RepoSettings.vue'),
             meta: { authentication: 'required' },
             props: true,
             children: [
               {
                 path: '',
-                name: 'repo-settings-general',
+                name: 'repo-settings',
                 component: (): Component => import('~/views/repo/settings/General.vue'),
                 props: true,
               },
@@ -208,14 +207,13 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: `${rootPath}/admin`,
-    name: 'admin-settings',
     component: (): Component => import('~/views/admin/AdminSettingsWrapper.vue'),
     props: true,
     meta: { authentication: 'required' },
     children: [
       {
         path: '',
-        name: 'admin-settings-info',
+        name: 'admin-settings',
         component: (): Component => import('~/views/admin/AdminInfo.vue'),
         props: true,
       },
@@ -266,14 +264,13 @@ const routes: RouteRecordRaw[] = [
 
   {
     path: `${rootPath}/user`,
-    name: 'user',
     component: (): Component => import('~/views/user/UserWrapper.vue'),
     meta: { authentication: 'required' },
     props: true,
     children: [
       {
         path: '',
-        name: 'user-general',
+        name: 'user',
         component: (): Component => import('~/views/user/UserGeneral.vue'),
         props: true,
       },
diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
index 5956e5555a..edd55d8492 100644
--- a/web/src/views/admin/AdminSettingsWrapper.vue
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -3,7 +3,7 @@
     <template #title>
       {{ $t('settings') }}
     </template>
-    <Tab to="admin-settings-info" :title="$t('info')" />
+    <Tab to="admin-settings" :title="$t('info')" />
     <Tab to="admin-settings-secrets" :title="$t('secrets.secrets')" />
     <Tab to="admin-settings-registries" :title="$t('registries.registries')" />
     <Tab to="admin-settings-repos" :title="$t('admin.settings.repos.repos')" />
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index d9538600e5..b3b18c3bc0 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -17,7 +17,7 @@
       <IconButton :href="repo.forge_url" :title="$t('repo.open_in_forge')" :icon="forgeIcon" class="forge" />
       <IconButton
         v-if="repoPermissions.admin"
-        :to="{ name: 'repo-settings-general' }"
+        :to="{ name: 'repo-settings' }"
         :title="$t('settings')"
         icon="settings"
       />
diff --git a/web/src/views/repo/settings/RepoSettings.vue b/web/src/views/repo/settings/RepoSettings.vue
index b033027425..537af21cb4 100644
--- a/web/src/views/repo/settings/RepoSettings.vue
+++ b/web/src/views/repo/settings/RepoSettings.vue
@@ -16,7 +16,7 @@
       </span>
     </template>
 
-    <Tab to="repo-settings-general" :title="$t('repo.settings.general.general')" />
+    <Tab to="repo-settings" :title="$t('repo.settings.general.general')" />
     <Tab to="repo-settings-secrets" :title="$t('secrets.secrets')" />
     <Tab to="repo-settings-registries" :title="$t('registries.registries')" />
     <Tab to="repo-settings-crons" :title="$t('repo.settings.crons.crons')" />
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
index 8e1102e9ab..e5e2bc30f0 100644
--- a/web/src/views/user/UserWrapper.vue
+++ b/web/src/views/user/UserWrapper.vue
@@ -3,7 +3,7 @@
     <template #title>{{ $t('user.settings.settings') }}</template>
     <template #headerActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
 
-    <Tab to="user-general" :title="$t('user.settings.general.general')" />
+    <Tab to="user" :title="$t('user.settings.general.general')" />
     <Tab to="user-secrets" :title="$t('secrets.secrets')" />
     <Tab to="user-registries" :title="$t('registries.registries')" />
     <Tab to="user-cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')" />

From 0be8bc6b828c980155f9e008158bf712ad60a8d6 Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Mon, 18 Nov 2024 17:43:50 +0200
Subject: [PATCH 07/10] use router-link

---
 web/src/components/layout/header/Navbar.vue   |  7 +--
 web/src/components/layout/scaffold/Tab.vue    | 36 ++++++---------
 web/src/components/layout/scaffold/Tabs.vue   | 32 +++++--------
 web/src/compositions/useTabs.ts               | 42 +++--------------
 web/src/router.ts                             | 45 +++++++++++--------
 web/src/views/admin/AdminSettingsWrapper.vue  | 16 +++----
 .../views/org/settings/OrgSettingsWrapper.vue | 10 +++--
 web/src/views/repo/RepoWrapper.vue            |  8 ++--
 .../views/repo/pipeline/PipelineWrapper.vue   |  8 ++--
 web/src/views/repo/settings/RepoSettings.vue  | 12 ++---
 web/src/views/user/UserWrapper.vue            | 14 +++---
 11 files changed, 97 insertions(+), 133 deletions(-)

diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 73dbf3553c..56aebb2914 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -33,12 +33,7 @@
       </IconButton>
 
       <ActivePipelines v-if="user" class="navbar-icon" />
-      <IconButton
-        v-if="user"
-        :to="{ name: 'user' }"
-        :title="$t('user.settings.settings')"
-        class="navbar-icon !p-1.5"
-      >
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <Button v-else :text="$t('login')" :to="`/login?url=${route.fullPath}`" />
diff --git a/web/src/components/layout/scaffold/Tab.vue b/web/src/components/layout/scaffold/Tab.vue
index 02b6b7c2a2..20fd372e09 100644
--- a/web/src/components/layout/scaffold/Tab.vue
+++ b/web/src/components/layout/scaffold/Tab.vue
@@ -1,40 +1,32 @@
-<template>
-  <div v-if="$slots.default" v-show="isActive" :aria-hidden="!isActive">
-    <slot />
-  </div>
-</template>
+<template><span /></template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
 import type { IconNames } from '~/components/atomic/Icon.vue';
-import { useTabsClient, type Tab } from '~/compositions/useTabs';
+import { useTabsClient } from '~/compositions/useTabs';
 
 const props = defineProps<{
-  to?: string;
-  alternativeRoute?: string;
+  to: RouteLocationRaw;
   title: string;
   icon?: IconNames;
   iconClass?: string;
+  matchChildren?: boolean;
 }>();
 
-const { tabs, activeTab } = useTabsClient();
-const tab = ref<Tab>();
+const { tabs } = useTabsClient();
 
 onMounted(() => {
-  tab.value = {
-    to: props.to || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
-    alternativeRoute: props.alternativeRoute,
-    title: props.title,
-    icon: props.icon,
-    iconClass: props.iconClass,
-  };
-
   // don't add tab if tab id is already present
   if (!tabs.value.find(({ to }) => to === props.to)) {
-    tabs.value.push(tab.value);
+    tabs.value.push({
+      to: props.to,
+      title: props.title,
+      icon: props.icon,
+      iconClass: props.iconClass,
+      matchChildren: props.matchChildren,
+    });
   }
 });
-
-const isActive = computed(() => tab.value && tab.value.to === activeTab.value);
 </script>
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index ecd2ad2bff..fb42fd4e1c 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -1,37 +1,27 @@
 <template>
   <div class="flex flex-wrap">
-    <button
+    <router-link
       v-for="tab in tabs"
-      :key="tab.to"
-      class="w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
-      :class="{
-        'border-wp-text-100': activeTab === tab.to,
-        'border-transparent': activeTab !== tab.to,
-      }"
-      type="button"
-      @click="selectTab(tab)"
+      :key="tab.title"
+      v-slot="{ isActive }"
+      :to="tab.to"
+      class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
+      :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
+      :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
-      <Icon v-if="activeTab === tab.to" name="chevron-right" class="md:hidden" />
+      <Icon v-if="isActive" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
       <span class="flex gap-2 items-center flex-row-reverse md:flex-row">
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
         <span>{{ tab.title }}</span>
       </span>
-    </button>
+    </router-link>
   </div>
 </template>
 
 <script setup lang="ts">
 import Icon from '~/components/atomic/Icon.vue';
-import { useTabsClient, type Tab } from '~/compositions/useTabs';
+import { useTabsClient } from '~/compositions/useTabs';
 
-const { activeTab, tabs } = useTabsClient();
-
-async function selectTab(tab: Tab) {
-  if (tab.to === undefined) {
-    return;
-  }
-
-  activeTab.value = tab.to;
-}
+const { tabs } = useTabsClient();
 </script>
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index d60b587783..74709b3b41 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -1,58 +1,28 @@
-import { computed, inject, onMounted, provide, ref, type Ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { inject, provide, ref, type Ref } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
 import type { IconNames } from '~/components/atomic/Icon.vue';
 
 export interface Tab {
-  to: string;
-  alternativeRoute?: string;
+  to: RouteLocationRaw;
   title: string;
   icon?: IconNames;
   iconClass?: string;
+  matchChildren?: boolean;
 }
 
 export function useTabsProvider() {
-  const route = useRoute();
-  const router = useRouter();
-
-  const alternativeRoute: Record<string, string> = {};
-
   const tabs = ref<Tab[]>([]);
 
-  const activeTab = computed({
-    get() {
-      if (route.name !== undefined) {
-        if (route.name.toString() in alternativeRoute) {
-          return alternativeRoute[route.name.toString()];
-        }
-        return route.name.toString();
-      }
-      return tabs.value[0].to;
-    },
-    set(tab) {
-      router.push({ name: tab }).catch(console.error);
-    },
-  });
-
   provide('tabs', tabs);
-  provide('active-tab', activeTab);
-
-  onMounted(() => {
-    for (const i of tabs.value) {
-      if (i.alternativeRoute !== undefined) {
-        alternativeRoute[i.alternativeRoute] = i.to;
-      }
-    }
-  });
 }
 
 export function useTabsClient() {
   const tabs = inject<Ref<Tab[]>>('tabs');
-  const activeTab = inject<Ref<string>>('active-tab');
 
-  if (activeTab === undefined || tabs === undefined) {
+  if (tabs === undefined) {
     throw new Error('Please use this "useTabsClient" composition inside a component running "useTabsProvider".');
   }
 
-  return { activeTab, tabs };
+  return { tabs };
 }
diff --git a/web/src/router.ts b/web/src/router.ts
index 35fa948f81..d36b4cce3c 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -42,29 +42,38 @@ const routes: RouteRecordRaw[] = [
           },
           {
             path: 'branches',
-            name: 'repo-branches',
-            component: (): Component => import('~/views/repo/RepoBranches.vue'),
             meta: { repoHeader: true },
+            children: [
+              {
+                path: '',
+                name: 'repo-branches',
+                component: (): Component => import('~/views/repo/RepoBranches.vue'),
+              },
+              {
+                path: ':branch',
+                name: 'repo-branch',
+                component: (): Component => import('~/views/repo/RepoBranch.vue'),
+                props: (route) => ({ branch: route.params.branch }),
+              },
+            ],
           },
-          {
-            path: 'branches/:branch',
-            name: 'repo-branch',
-            component: (): Component => import('~/views/repo/RepoBranch.vue'),
-            meta: { repoHeader: true },
-            props: (route) => ({ branch: route.params.branch }),
-          },
+
           {
             path: 'pull-requests',
-            name: 'repo-pull-requests',
-            component: (): Component => import('~/views/repo/RepoPullRequests.vue'),
             meta: { repoHeader: true },
-          },
-          {
-            path: 'pull-requests/:pullRequest',
-            name: 'repo-pull-request',
-            component: (): Component => import('~/views/repo/RepoPullRequest.vue'),
-            meta: { repoHeader: true },
-            props: (route) => ({ pullRequest: route.params.pullRequest }),
+            children: [
+              {
+                path: '',
+                name: 'repo-pull-requests',
+                component: (): Component => import('~/views/repo/RepoPullRequests.vue'),
+              },
+              {
+                path: ':pullRequest',
+                name: 'repo-pull-request',
+                component: (): Component => import('~/views/repo/RepoPullRequest.vue'),
+                props: (route) => ({ pullRequest: route.params.pullRequest }),
+              },
+            ],
           },
           {
             path: 'pipeline/:pipelineId',
diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
index edd55d8492..da9a0c44b9 100644
--- a/web/src/views/admin/AdminSettingsWrapper.vue
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -3,14 +3,14 @@
     <template #title>
       {{ $t('settings') }}
     </template>
-    <Tab to="admin-settings" :title="$t('info')" />
-    <Tab to="admin-settings-secrets" :title="$t('secrets.secrets')" />
-    <Tab to="admin-settings-registries" :title="$t('registries.registries')" />
-    <Tab to="admin-settings-repos" :title="$t('admin.settings.repos.repos')" />
-    <Tab to="admin-settings-users" :title="$t('admin.settings.users.users')" />
-    <Tab to="admin-settings-orgs" :title="$t('admin.settings.orgs.orgs')" />
-    <Tab to="admin-settings-agents" :title="$t('admin.settings.agents.agents')" />
-    <Tab to="admin-settings-queue" :title="$t('admin.settings.queue.queue')" />
+    <Tab :to="{ name: 'admin-settings' }" :title="$t('info')" />
+    <Tab :to="{ name: 'admin-settings-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab :to="{ name: 'admin-settings-registries' }" :title="$t('registries.registries')" />
+    <Tab :to="{ name: 'admin-settings-repos' }" :title="$t('admin.settings.repos.repos')" />
+    <Tab :to="{ name: 'admin-settings-users' }" :title="$t('admin.settings.users.users')" />
+    <Tab :to="{ name: 'admin-settings-orgs' }" :title="$t('admin.settings.orgs.orgs')" />
+    <Tab :to="{ name: 'admin-settings-agents' }" :title="$t('admin.settings.agents.agents')" />
+    <Tab :to="{ name: 'admin-settings-queue' }" :title="$t('admin.settings.queue.queue')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/org/settings/OrgSettingsWrapper.vue b/web/src/views/org/settings/OrgSettingsWrapper.vue
index a6082d7046..e1cf581d8c 100644
--- a/web/src/views/org/settings/OrgSettingsWrapper.vue
+++ b/web/src/views/org/settings/OrgSettingsWrapper.vue
@@ -11,9 +11,13 @@
       </span>
     </template>
 
-    <Tab to="org-settings-secrets" :title="$t('secrets.secrets')" />
-    <Tab to="org-settings-registries" :title="$t('registries.registries')" />
-    <Tab v-if="useConfig().userRegisteredAgents" to="org-settings-agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab :to="{ name: 'org-settings-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab :to="{ name: 'org-settings-registries' }" :title="$t('registries.registries')" />
+    <Tab
+      v-if="useConfig().userRegisteredAgents"
+      :to="{ name: 'org-settings-agents' }"
+      :title="$t('admin.settings.agents.agents')"
+    />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index b3b18c3bc0..522dbe411f 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -38,12 +38,12 @@
       />
     </template>
 
-    <Tab to="repo" :title="$t('repo.activity')" />
-    <Tab to="repo-branches" alternative-route="repo-branch" :title="$t('repo.branches')" />
+    <Tab :to="{ name: 'repo' }" :title="$t('repo.activity')" />
+    <Tab :to="{ name: 'repo-branches' }" match-children :title="$t('repo.branches')" />
     <Tab
       v-if="repo.pr_enabled && repo.allow_pr"
-      to="repo-pull-requests"
-      alternative-route="repo-pull-request"
+      :to="{ name: 'repo-pull-requests' }"
+      match-children
       :title="$t('repo.pull_requests')"
     />
 
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 7ff45088d8..b3a843ba7c 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -73,10 +73,10 @@
       </div>
     </template>
 
-    <Tab to="repo-pipeline" :title="$t('repo.pipeline.tasks')" />
+    <Tab :to="{ name: 'repo-pipeline' }" :title="$t('repo.pipeline.tasks')" />
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
-      to="repo-pipeline-errors"
+      :to="{ name: 'repo-pipeline-errors' }"
       icon="attention"
       :title="
         pipeline.errors.some((e) => !e.is_warning)
@@ -88,12 +88,12 @@
     <Tab to="repo-pipeline-config" :title="$t('repo.pipeline.config')" />
     <Tab
       v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
-      to="repo-pipeline-changed-files"
+      :to="{ name: 'repo-pipeline-changed-files' }"
       :title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length })"
     />
     <Tab
       v-if="repoPermissions && repoPermissions.push"
-      to="repo-pipeline-debug"
+      :to="{ name: 'repo-pipeline-debug' }"
       :title="$t('repo.pipeline.debug.title')"
     />
 
diff --git a/web/src/views/repo/settings/RepoSettings.vue b/web/src/views/repo/settings/RepoSettings.vue
index 537af21cb4..05c826a7ae 100644
--- a/web/src/views/repo/settings/RepoSettings.vue
+++ b/web/src/views/repo/settings/RepoSettings.vue
@@ -16,12 +16,12 @@
       </span>
     </template>
 
-    <Tab to="repo-settings" :title="$t('repo.settings.general.general')" />
-    <Tab to="repo-settings-secrets" :title="$t('secrets.secrets')" />
-    <Tab to="repo-settings-registries" :title="$t('registries.registries')" />
-    <Tab to="repo-settings-crons" :title="$t('repo.settings.crons.crons')" />
-    <Tab to="repo-settings-badge" :title="$t('repo.settings.badge.badge')" />
-    <Tab to="repo-settings-actions" :title="$t('repo.settings.actions.actions')" />
+    <Tab :to="{ name: 'repo-settings' }" :title="$t('repo.settings.general.general')" />
+    <Tab :to="{ name: 'repo-settings-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab :to="{ name: 'repo-settings-registries' }" :title="$t('registries.registries')" />
+    <Tab :to="{ name: 'repo-settings-crons' }" :title="$t('repo.settings.crons.crons')" />
+    <Tab :to="{ name: 'repo-settings-badge' }" :title="$t('repo.settings.badge.badge')" />
+    <Tab :to="{ name: 'repo-settings-actions' }" :title="$t('repo.settings.actions.actions')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
index e5e2bc30f0..43cf4afd22 100644
--- a/web/src/views/user/UserWrapper.vue
+++ b/web/src/views/user/UserWrapper.vue
@@ -3,11 +3,15 @@
     <template #title>{{ $t('user.settings.settings') }}</template>
     <template #headerActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
 
-    <Tab to="user" :title="$t('user.settings.general.general')" />
-    <Tab to="user-secrets" :title="$t('secrets.secrets')" />
-    <Tab to="user-registries" :title="$t('registries.registries')" />
-    <Tab to="user-cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')" />
-    <Tab v-if="useConfig().userRegisteredAgents" to="user-agents" :title="$t('admin.settings.agents.agents')" />
+    <Tab :to="{ name: 'user' }" :title="$t('user.settings.general.general')" />
+    <Tab :to="{ name: 'user-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab :to="{ name: 'user-registries' }" :title="$t('registries.registries')" />
+    <Tab :to="{ name: 'user-cli-and-api' }" :title="$t('user.settings.cli_and_api.cli_and_api')" />
+    <Tab
+      v-if="useConfig().userRegisteredAgents"
+      :to="{ name: 'user-agents' }"
+      :title="$t('admin.settings.agents.agents')"
+    />
 
     <router-view />
   </Scaffold>

From e6bfeb745d8893c307185bd932bfd015e92ff505 Mon Sep 17 00:00:00 2001
From: qwerty287 <qwerty287@posteo.de>
Date: Mon, 18 Nov 2024 17:46:28 +0200
Subject: [PATCH 08/10] fix chevron

---
 web/src/components/layout/scaffold/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index fb42fd4e1c..090389800a 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -3,13 +3,13 @@
     <router-link
       v-for="tab in tabs"
       :key="tab.title"
-      v-slot="{ isActive }"
+      v-slot="{ isActive, isExactActive }"
       :to="tab.to"
       class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
       :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
-      <Icon v-if="isActive" name="chevron-right" class="md:hidden" />
+      <Icon v-if="isExactActive || (isActive && tab.matchChildren)" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
       <span class="flex gap-2 items-center flex-row-reverse md:flex-row">
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />

From 53e39e5b5426042cccd97de2d2cb05fa4640573d Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Tue, 19 Nov 2024 11:43:05 +0100
Subject: [PATCH 09/10] fix route and inject / provide

---
 web/src/compositions/useInjectProvide.ts      |  4 +++-
 web/src/router.ts                             |  1 +
 .../views/repo/pipeline/PipelineConfig.vue    | 19 ++++++++++---------
 .../views/repo/pipeline/PipelineWrapper.vue   |  5 +++--
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/web/src/compositions/useInjectProvide.ts b/web/src/compositions/useInjectProvide.ts
index 5fc7685a8f..f2d4e46535 100644
--- a/web/src/compositions/useInjectProvide.ts
+++ b/web/src/compositions/useInjectProvide.ts
@@ -1,12 +1,14 @@
 import type { InjectionKey, Ref } from 'vue';
 import { inject as vueInject, provide as vueProvide } from 'vue';
 
-import type { Org, OrgPermissions, Repo } from '~/lib/api/types';
+import type { Org, OrgPermissions, Pipeline, PipelineConfig, Repo } from '~/lib/api/types';
 
 export interface InjectKeys {
   repo: Ref<Repo>;
   org: Ref<Org | undefined>;
   'org-permissions': Ref<OrgPermissions | undefined>;
+  pipeline: Ref<Pipeline | undefined>;
+  'pipeline-configs': Ref<PipelineConfig[] | undefined>;
 }
 
 export function inject<T extends keyof InjectKeys>(key: T): InjectKeys[T] {
diff --git a/web/src/router.ts b/web/src/router.ts
index d36b4cce3c..18d3d1edd0 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -107,6 +107,7 @@ const routes: RouteRecordRaw[] = [
                 path: 'debug',
                 name: 'repo-pipeline-debug',
                 component: (): Component => import('~/views/repo/pipeline/PipelineDebug.vue'),
+                props: true,
               },
             ],
           },
diff --git a/web/src/views/repo/pipeline/PipelineConfig.vue b/web/src/views/repo/pipeline/PipelineConfig.vue
index d77c1d6d07..982f5e37bc 100644
--- a/web/src/views/repo/pipeline/PipelineConfig.vue
+++ b/web/src/views/repo/pipeline/PipelineConfig.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-y-6">
     <Panel
-      v-for="pipelineConfig in pipelineConfigsDecoded || []"
+      v-for="pipelineConfig in pipelineConfigsDecoded"
       :key="pipelineConfig.hash"
       :collapsable="pipelineConfigsDecoded && pipelineConfigsDecoded.length > 1"
       collapsed-by-default
@@ -14,21 +14,22 @@
 
 <script lang="ts" setup>
 import { decode } from 'js-base64';
-import { computed, inject, type Ref } from 'vue';
+import { computed } from 'vue';
 
 import SyntaxHighlight from '~/components/atomic/SyntaxHighlight';
 import Panel from '~/components/layout/Panel.vue';
-import type { PipelineConfig } from '~/lib/api/types';
+import { inject } from '~/compositions/useInjectProvide';
 
-const pipelineConfigs = inject<Ref<PipelineConfig[]>>('pipeline-configs');
+const pipelineConfigs = inject('pipeline-configs');
 if (!pipelineConfigs) {
   throw new Error('Unexpected: "pipelineConfigs" should be provided at this place');
 }
 
-const pipelineConfigsDecoded = computed(() =>
-  pipelineConfigs.value.map((i) => ({
-    ...i,
-    data: decode(i.data),
-  })),
+const pipelineConfigsDecoded = computed(
+  () =>
+    pipelineConfigs.value?.map((i) => ({
+      ...i,
+      data: decode(i.data),
+    })) ?? [],
 );
 </script>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index b3a843ba7c..662ea936e5 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -85,7 +85,7 @@
       "
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
     />
-    <Tab to="repo-pipeline-config" :title="$t('repo.pipeline.config')" />
+    <Tab :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
     <Tab
       v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
       :to="{ name: 'repo-pipeline-changed-files' }"
@@ -102,7 +102,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, provide, ref, toRef, watch, type Ref } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, toRef, watch, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -115,6 +115,7 @@ import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vu
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import { useFavicon } from '~/compositions/useFavicon';
+import { provide } from '~/compositions/useInjectProvide';
 import useNotifications from '~/compositions/useNotifications';
 import usePipeline from '~/compositions/usePipeline';
 import { useRouteBack } from '~/compositions/useRouteBack';

From 10ad9e253824b126970219527e0dbd484f226446 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Tue, 19 Nov 2024 12:27:38 +0100
Subject: [PATCH 10/10] fix route comparison

---
 web/src/components/layout/scaffold/Tab.vue | 24 ++++++++++++++--------
 web/src/compositions/useInjectProvide.ts   |  3 +++
 web/src/compositions/useTabs.ts            | 12 ++++-------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/web/src/components/layout/scaffold/Tab.vue b/web/src/components/layout/scaffold/Tab.vue
index 20fd372e09..3bc833a3ea 100644
--- a/web/src/components/layout/scaffold/Tab.vue
+++ b/web/src/components/layout/scaffold/Tab.vue
@@ -17,16 +17,24 @@ const props = defineProps<{
 
 const { tabs } = useTabsClient();
 
+// TODO: find a better way to compare routes like
+// https://github.com/vuejs/router/blob/0eaaeb9697acd40ad524d913d0348748e9797acb/packages/router/src/utils/index.ts#L17
+function isSameRoute(a: RouteLocationRaw, b: RouteLocationRaw): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
 onMounted(() => {
   // don't add tab if tab id is already present
-  if (!tabs.value.find(({ to }) => to === props.to)) {
-    tabs.value.push({
-      to: props.to,
-      title: props.title,
-      icon: props.icon,
-      iconClass: props.iconClass,
-      matchChildren: props.matchChildren,
-    });
+  if (tabs.value.find(({ to }) => isSameRoute(to, props.to))) {
+    return;
   }
+
+  tabs.value.push({
+    to: props.to,
+    title: props.title,
+    icon: props.icon,
+    iconClass: props.iconClass,
+    matchChildren: props.matchChildren,
+  });
 });
 </script>
diff --git a/web/src/compositions/useInjectProvide.ts b/web/src/compositions/useInjectProvide.ts
index f2d4e46535..949950eaaf 100644
--- a/web/src/compositions/useInjectProvide.ts
+++ b/web/src/compositions/useInjectProvide.ts
@@ -3,12 +3,15 @@ import { inject as vueInject, provide as vueProvide } from 'vue';
 
 import type { Org, OrgPermissions, Pipeline, PipelineConfig, Repo } from '~/lib/api/types';
 
+import type { Tab } from './useTabs';
+
 export interface InjectKeys {
   repo: Ref<Repo>;
   org: Ref<Org | undefined>;
   'org-permissions': Ref<OrgPermissions | undefined>;
   pipeline: Ref<Pipeline | undefined>;
   'pipeline-configs': Ref<PipelineConfig[] | undefined>;
+  tabs: Ref<Tab[]>;
 }
 
 export function inject<T extends keyof InjectKeys>(key: T): InjectKeys[T] {
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index 74709b3b41..6f8bb626c1 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -1,8 +1,10 @@
-import { inject, provide, ref, type Ref } from 'vue';
+import { ref } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import type { IconNames } from '~/components/atomic/Icon.vue';
 
+import { inject, provide } from './useInjectProvide';
+
 export interface Tab {
   to: RouteLocationRaw;
   title: string;
@@ -13,16 +15,10 @@ export interface Tab {
 
 export function useTabsProvider() {
   const tabs = ref<Tab[]>([]);
-
   provide('tabs', tabs);
 }
 
 export function useTabsClient() {
-  const tabs = inject<Ref<Tab[]>>('tabs');
-
-  if (tabs === undefined) {
-    throw new Error('Please use this "useTabsClient" composition inside a component running "useTabsProvider".');
-  }
-
+  const tabs = inject('tabs');
   return { tabs };
 }