From c4c4b76973aa1dd6fb32486c7531732e09f7f522 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 30 Apr 2025 10:23:40 +0700
Subject: [PATCH 1/2] refactor: adjust button sizes and padding for improved
 layout consistency

---
 src/pages/00_notification/MainPage.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
index a3506813..a2a37e65 100644
--- a/src/pages/00_notification/MainPage.vue
+++ b/src/pages/00_notification/MainPage.vue
@@ -94,21 +94,21 @@ onMounted(async () => {
 <template>
   <main class="column full-height no-wrap">
     <div class="surface-1 col bordered rounded column">
-      <div class="q-px-lg q-py-xs row items-center">
+      <div class="q-py-xs row items-center" style="padding-inline: 38px">
         <q-checkbox
           size="xs"
           :model-value="selectedNoti.length === noti.length"
-          class="q-px-sm"
           @click="toggleSelection('', true)"
         />
+        <q-separator vertical inset spaced="md" />
         <q-btn
           v-if="selectedNoti.length === 0"
           icon="mdi-refresh"
           rounded
           flat
           dense
-          size="xs"
-          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          size="sm"
+          class="app-text-muted-2 q-mt-xs"
           @click="async () => await fetchNoti()"
         >
           <q-tooltip>Refresh</q-tooltip>
@@ -119,8 +119,8 @@ onMounted(async () => {
           rounded
           flat
           dense
-          size="xs"
-          class="app-text-muted-2 q-ml-sm"
+          size="sm"
+          class="app-text-muted-2"
           @click="async () => await deleteNoti()"
         >
           <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
@@ -131,7 +131,7 @@ onMounted(async () => {
           rounded
           flat
           dense
-          size="xs"
+          size="sm"
           class="app-text-muted-2 q-mx-sm"
           @click="async () => await markAsRead()"
         >

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 2/2] 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'