refactor: simplify links and fix z-index of popper

Author: simonwep

.husky/commit-msg

@@ -1,5 +1,5 @@
 message="$(cat $1)"
-regex="^(fix|feat|chore|docs): [a-z].*$"
+regex="^(fix|feat|chore|refactor|docs): [a-z].*$"
 
 if ! [[ $message =~ $regex ]]; then
   echo "Commit message does not follow Conventional Commits format: <type>: <lowercase message>"

src/app/components/base/context-menu/ContextMenu.vue

@@ -123,7 +123,7 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
   display: flex;
   position: absolute;
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--context-menu-z-index);
 
   &.visible {
     pointer-events: all;

src/app/components/base/link/Link.vue

@@ -1,8 +1,8 @@
 <template>
   <a
-    v-if="isExternalLink"
+    v-if="to.startsWith('http')"
     v-tooltip="{ text: tooltip, position: tooltipPosition }"
-    :href="href"
+    :href="to"
     :class="classes"
     rel="noopener,noreferrer,nofollow"
     target="_blank"
@@ -13,8 +13,8 @@
   <RouterLink
     v-else
     v-tooltip="{ text: tooltip, position: tooltipPosition }"
-    :data-testid="testId ? `${testId}-${name}` : undefined"
-    :to="href"
+    :data-testid="testId ? `${testId}-${to}` : undefined"
+    :to="to"
     :class="classes"
   >
     <component :is="icon" v-if="icon" :class="$style.icon" />
@@ -38,8 +38,7 @@ const props = withDefaults(
     custom?: boolean;
     tooltip?: string;
     tooltipPosition?: Placement;
-    name?: string;
-    to?: string;
+    to: string;
     testId?: string;
   }>(),
   {
@@ -52,13 +51,10 @@ const styles = useCssModule();
 const router = useRouter();
 const theme = useThemeStyles(() =>
   typeof props.color === 'function'
-    ? props.color(router.currentRoute.value.name === props.name)
+    ? props.color(router.currentRoute.value.name === props.to)
     : (props.color ?? 'primary')
 );
 
-const href = computed(() => (props.name ? router.resolve({ name: props.name }).href : (props.to ?? '')));
-const isExternalLink = computed(() => href.value.startsWith('http'));
-
 const classes = computed(() => [
   props.class,
   styles.link,

src/app/pages/Frame.vue

@@ -15,7 +15,7 @@
         :class="$style.btn"
         :color="(currentRoute) => (currentRoute ? 'primary' : 'dimmed')"
         :icon="button.icon"
-        :name="button.name"
+        :to="button.name"
       />
 
       <div v-if="media !== 'mobile'" style="flex-grow: 1" />

src/directives/v-tooltip/vTooltip.module.scss

@@ -8,6 +8,7 @@
   box-shadow: var(--tooltip-shadow);
   transition: opacity var(--transition-s);
   opacity: 0;
+  z-index: var(--tooltip-z-index);
 
   &.show {
     opacity: 1;

src/styles/themes/dark.scss

@@ -148,6 +148,7 @@
   --context-menu-item-background-hover: #00000080;
   --context-menu-backdrop: blur(4px) brightness(0.25);
   --context-menu-shadow: 0 1px 5px #0c0b0e;
+  --context-menu-z-index: 2;
 
   --cell-menu-backdrop: blur(3px) brightness(0.3);
   --cell-menu-shadow: 0 1px 5px #0c0b0e;
@@ -166,4 +167,5 @@
 
   --tooltip-backdrop: var(--context-menu-backdrop);
   --tooltip-shadow: 0 1px 2px #141416;
+  --tooltip-z-index: 1;
 }

src/styles/themes/light.scss

@@ -148,6 +148,7 @@
   --context-menu-item-background-hover: #0000000d;
   --context-menu-backdrop: brightness(10);
   --context-menu-shadow: 0 2px 10px #c5c3db;
+  --context-menu-z-index: 2;
 
   --cell-menu-backdrop: blur(3px) brightness(0.15);
   --cell-menu-shadow: 0 1px 2px #46434d;
@@ -166,4 +167,5 @@
 
   --tooltip-backdrop: var(--context-menu-backdrop);
   --tooltip-shadow: 0 1px 2px #e0e0e0;
+  --tooltip-z-index: 1;
 }