From 7a2be56ef4668357d8633fc93656ab7c992a91e3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 30 Apr 2025 11:13:45 +0700
Subject: [PATCH] refactor: improve checkbox and badge behavior based on
 notification state

---
 src/pages/00_notification/MainPage.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
index a2a37e65..bc4cee01 100644
--- a/src/pages/00_notification/MainPage.vue
+++ b/src/pages/00_notification/MainPage.vue
@@ -97,7 +97,8 @@ onMounted(async () => {
       <div class="q-py-xs row items-center" style="padding-inline: 38px">
         <q-checkbox
           size="xs"
-          :model-value="selectedNoti.length === noti.length"
+          :model-value="noti.length > 0 && selectedNoti.length === noti.length"
+          :disable="noti.length === 0"
           @click="toggleSelection('', true)"
         />
         <q-separator vertical inset spaced="md" />
@@ -177,7 +178,13 @@ onMounted(async () => {
             <q-badge
               rounded
               class="q-ml-md"
-              style="background: hsl(var(--info-bg))"
+              :color="
+                (tab.value === 'all'
+                  ? noti.length
+                  : noti.filter((v) => !v.read).length) > 0
+                  ? 'info'
+                  : 'grey'
+              "
             >
               {{
                 tab.value === 'all'