From 65dcdebd5cd63c1953971b515a3be6b1b1d001994e6934a63c05d66e618aea95 Mon Sep 17 00:00:00 2001
From: Claude Dev <support+claude@ezscale.cloud>
Date: Sat, 14 Mar 2026 17:21:22 -0400
Subject: [PATCH] Fix code review issues: flash toast dedup, sidebar CSS,
 pricing card colors

- Fix duplicate flash-to-toast watchers by tracking last shown flash JSON
- Replace inline sidebar margin styles with CSS class-driven approach
- Fix navbar left position to respond to sidebar collapse via CSS nesting
- Replace hardcoded white colors in PricingCard with theme-aware classes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 website/resources/styles/_layouts.scss         | 11 ++++++-----
 .../ts/Components/Marketing/PricingCard.vue    | 12 ++++++------
 website/resources/ts/Layouts/AccountLayout.vue | 16 ++++++++++------
 website/resources/ts/Layouts/AdminLayout.vue   | 18 +++++++++++-------
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/website/resources/styles/_layouts.scss b/website/resources/styles/_layouts.scss
index 8d5cc08..24dd0f0 100644
--- a/website/resources/styles/_layouts.scss
+++ b/website/resources/styles/_layouts.scss
@@ -150,10 +150,6 @@
   align-items: center;
   padding-inline: 24px;
   transition: left $transition-base;
-
-  .app-sidebar--collapsed ~ .app-content-wrapper & {
-    left: $sidebar-collapsed-width;
-  }
 }
 
 // Content wrapper
@@ -165,8 +161,13 @@
   display: flex;
   flex-direction: column;
 
-  .app-sidebar--collapsed ~ & {
+  // Collapsed sidebar — class-driven from Vue
+  &--collapsed {
     margin-left: $sidebar-collapsed-width;
+
+    .app-navbar {
+      left: $sidebar-collapsed-width;
+    }
   }
 }
 
diff --git a/website/resources/ts/Components/Marketing/PricingCard.vue b/website/resources/ts/Components/Marketing/PricingCard.vue
index e2a886e..fbfce91 100644
--- a/website/resources/ts/Components/Marketing/PricingCard.vue
+++ b/website/resources/ts/Components/Marketing/PricingCard.vue
@@ -43,15 +43,15 @@ withDefaults(defineProps<Props>(), {
     </VChip>
 
     <!-- Plan name -->
-    <h3 class="text-h6 font-weight-bold mb-2" style="color: #fff;">{{ name }}</h3>
-    <p v-if="description" class="text-body-2 mb-4" style="color: rgba(255,255,255,0.6);">
+    <h3 class="text-h6 font-weight-bold mb-2">{{ name }}</h3>
+    <p v-if="description" class="text-body-2 text-medium-emphasis mb-4">
       {{ description }}
     </p>
 
     <!-- Price -->
     <div class="mb-6">
-      <span class="text-h3 font-weight-bold" style="color: #fff;">{{ price }}</span>
-      <span class="text-body-2" style="color: rgba(255,255,255,0.5);">{{ period }}</span>
+      <span class="text-h3 font-weight-bold">{{ price }}</span>
+      <span class="text-body-2 text-medium-emphasis">{{ period }}</span>
     </div>
 
     <!-- Features -->
@@ -63,14 +63,14 @@ withDefaults(defineProps<Props>(), {
       >
         <VIcon
           :icon="feature.included ? 'tabler-check' : 'tabler-x'"
-          :color="feature.included ? '#10b981' : undefined"
+          :color="feature.included ? 'success' : undefined"
           :style="{ opacity: feature.included ? 1 : 0.3 }"
           size="18"
           class="me-3"
         />
         <span
           class="text-body-2"
-          :style="{ color: feature.included ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.35)' }"
+          :class="feature.included ? '' : 'text-disabled'"
         >
           {{ feature.text }}
         </span>
diff --git a/website/resources/ts/Layouts/AccountLayout.vue b/website/resources/ts/Layouts/AccountLayout.vue
index 7fc1fea..176ea1e 100644
--- a/website/resources/ts/Layouts/AccountLayout.vue
+++ b/website/resources/ts/Layouts/AccountLayout.vue
@@ -43,11 +43,15 @@ watch(sidebarCollapsed, (val) => {
 })
 
 const toastStore = useToastStore()
-watch(() => page.props, () => {
-  const flash = (page.props as unknown as PageProps).flash
-  if (flash?.success) toastStore.success(flash.success)
-  if (flash?.error) toastStore.error(flash.error)
-  if (flash?.info) toastStore.info(flash.info)
+let lastFlash = ''
+watch(() => (page.props as unknown as PageProps).flash, (flash) => {
+  if (!flash) return
+  const key = JSON.stringify(flash)
+  if (key === lastFlash) return
+  lastFlash = key
+  if (flash.success) toastStore.success(flash.success)
+  if (flash.error) toastStore.error(flash.error)
+  if (flash.info) toastStore.info(flash.info)
 }, { immediate: true })
 
 const paletteItems = computed(() => {
@@ -73,7 +77,7 @@ const paletteItems = computed(() => {
 
       <div
         class="app-content-wrapper"
-        :style="{ marginLeft: sidebarCollapsed ? '72px' : '260px' }"
+        :class="{ 'app-content-wrapper--collapsed': sidebarCollapsed }"
       >
         <AppTopNavbar
           @toggle-sidebar="mobileOpen = !mobileOpen"
diff --git a/website/resources/ts/Layouts/AdminLayout.vue b/website/resources/ts/Layouts/AdminLayout.vue
index 5a2b5bf..95f4a8e 100644
--- a/website/resources/ts/Layouts/AdminLayout.vue
+++ b/website/resources/ts/Layouts/AdminLayout.vue
@@ -41,13 +41,17 @@ watch(sidebarCollapsed, (val) => {
   localStorage.setItem('ezscale-nav-collapsed', String(val))
 })
 
-// Flash messages to toasts
+// Flash messages → toasts (track last shown to avoid duplicates)
 const toastStore = useToastStore()
-watch(() => page.props, () => {
-  const flash = (page.props as unknown as PageProps).flash
-  if (flash?.success) toastStore.success(flash.success)
-  if (flash?.error) toastStore.error(flash.error)
-  if (flash?.info) toastStore.info(flash.info)
+let lastFlash = ''
+watch(() => (page.props as unknown as PageProps).flash, (flash) => {
+  if (!flash) return
+  const key = JSON.stringify(flash)
+  if (key === lastFlash) return
+  lastFlash = key
+  if (flash.success) toastStore.success(flash.success)
+  if (flash.error) toastStore.error(flash.error)
+  if (flash.info) toastStore.info(flash.info)
 }, { immediate: true })
 
 // Command palette items
@@ -74,7 +78,7 @@ const paletteItems = computed(() => {
 
       <div
         class="app-content-wrapper"
-        :style="{ marginLeft: sidebarCollapsed ? '72px' : '260px' }"
+        :class="{ 'app-content-wrapper--collapsed': sidebarCollapsed }"
       >
         <AppTopNavbar
           @toggle-sidebar="mobileOpen = !mobileOpen"