From c6e7fcb43a54126d780f44f3d4de7df135867e8c Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Wed, 5 Nov 2025 02:48:19 +0100
Subject: [PATCH] Refactor Tab Styling and Highlight Animation in AreaTabs
 Component

- Updated tab styling to include a relative positioning for better layout control.
- Introduced a new highlight animation for newly added tabs, replacing the previous background gradient with an opacity fade effect for improved visual feedback.
- Enhanced the tab-highlight class to include a pseudo-element for a more dynamic appearance during animations.
---
 app/components/navigation/AreaTabs.vue | 35 +++++++++++++++-----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/components/navigation/AreaTabs.vue b/app/components/navigation/AreaTabs.vue
index b43e757..d653c15 100644
--- a/app/components/navigation/AreaTabs.vue
+++ b/app/components/navigation/AreaTabs.vue
@@ -214,7 +214,7 @@ function setTabRef(areaId: string, el: any) {
         <TransitionGroup name="tab" tag="div" class="flex items-center gap-1">
           <TabsTrigger v-for="area in visibleAreas" :key="area.id" :ref="(el) => setTabRef(area.id, el)"
             :value="area.id" :disabled="!area.enabled" :class="[
-              'gap-2 py-3 md:py-4 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-300',
+              'relative gap-2 py-3 md:py-4 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-300',
               !area.enabled && 'opacity-50 cursor-not-allowed',
               newlyAddedAreaIds.includes(area.id) && 'tab-highlight',
             ]" @click="navigateToArea(area)">
@@ -239,7 +239,7 @@ function setTabRef(areaId: string, el: any) {
         <TransitionGroup name="tab" tag="div" class="inline-flex items-center gap-2">
           <button v-for="area in visibleAreas" :key="area.id" :ref="(el) => setTabRef(area.id, el)"
             :disabled="!area.enabled" :class="[
-              'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-3 text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 duration-300',
+              'relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-3 text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 duration-300',
               currentArea === area.id
                 ? 'bg-accent text-white shadow-md'
                 : 'text-white/70 hover:text-white',
@@ -327,6 +327,7 @@ function setTabRef(areaId: string, el: any) {
 }
 
 @keyframes highlight-pulse {
+
   0%,
   100% {
     transform: scale(1);
@@ -337,35 +338,41 @@ function setTabRef(areaId: string, el: any) {
   }
 }
 
-/* Background gradient - stay visible during blinks, then fade out slowly */
-@keyframes highlight-background {
+/* Opacity fade for background (Chrome-compatible workaround) */
+@keyframes highlight-opacity {
   0% {
-    background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+    opacity: 1;
   }
 
   /* Stay visible during first blink */
   25% {
-    background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+    opacity: 1;
   }
 
-  /* Start fading slowly after first blink (over 1s instead of 0.5s) */
+  /* Start fading slowly after first blink */
   50% {
-    background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+    opacity: 1;
   }
 
   /* Fade to transparent gradually */
   100% {
-    background: transparent;
+    opacity: 0;
   }
 }
 
 .tab-highlight {
-  /* Initial background state (will be animated) */
-  background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
-
   /* Animations */
   animation: highlight-glow 2s ease-in-out 1 forwards,
-    highlight-pulse 0.5s ease-in-out 2,
-    highlight-background 2s ease-in-out 1 forwards;
+    highlight-pulse 0.5s ease-in-out 2;
+}
+
+.tab-highlight::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+  pointer-events: none;
+  animation: highlight-opacity 2s ease-in-out 1 forwards;
 }
 </style>