Use separate routes instead of anchors

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' }"
+        :to="{ name: 'admin-settings-info' }"
       >
         <Icon name="settings" />
         <div
@@ -33,7 +33,12 @@
       </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-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}`" />

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

@@ -18,8 +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 +31,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>

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

@@ -11,7 +11,8 @@ 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;
   iconClass?: string;
@@ -22,17 +23,18 @@ 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,
     iconClass: props.iconClass,
   };
 
   // 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>

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" />
@@ -22,25 +22,16 @@
 </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) {
+  if (tab.to === undefined) {
     return;
   }
 
-  activeTab.value = tab.id;
-
-  if (!disableUrlHashMode.value) {
-    await router.replace({ params: route.params, hash: `#${tab.id}` });
-  }
+  activeTab.value = tab.to;
 }
 </script>

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;
+  to: 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].to;
+    },
+    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.to;
+      }
     }
-
-    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 };
 }