refactor: improve checkbox and badge behavior based on notification state

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'