WIP: notification view improvements

- Notification count badge per tab
- "Unread only" filter toggle
- Notification dot size adjustment

src/views/NewActivityView.vue

@@ -4,11 +4,11 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div class="mb-2">
-      <h1 class="text-xl text-center font-semibold relative px-7">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
         <!-- Back -->
         <font-awesome
           icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2"
+          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 top-[0.2em]"
           @click="$router.back()"
         />
 
@@ -19,23 +19,35 @@
     <!-- Main Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
-        <li>
+        <li class="flex items-center gap-1">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
           >
             Offers
           </a>
+
+          <!-- Unread count -->
+          <span
+            class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >3</span
+          >
         </li>
-        <li>
+        <li class="flex items-center gap-1">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
           >
             Projects
           </a>
+
+          <!-- Unread count -->
+          <span
+            class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.2em]"
+            >10+</span
+          >
         </li>
-        <li>
+        <li class="flex items-center gap-1">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@@ -49,15 +61,21 @@
     <!-- Sub Tabs - Offers -->
     <div class="text-center text-slate-500 border-b border-slate-300 mb-2">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
-        <li>
+        <li class="flex items-center gap-1">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
           >
             To You
           </a>
+
+          <!-- Unread count -->
+          <span
+            class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >3</span
+          >
         </li>
-        <li>
+        <li class="flex items-center gap-1">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@@ -70,10 +88,26 @@
 
     <!-- Offers to You -->
     <div v-if="showOffersDetails" class="mt-4">
-      <div class="flex justify-end mb-2">
+      <div class="flex justify-between items-center text-sm mb-2">
+        <label class="flex items-center justify-between gap-1.5 cursor-pointer">
+          <!-- toggle -->
+          <div class="relative">
+            <!-- input -->
+            <input type="checkbox" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-10 h-6 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition"
+            ></div>
+          </div>
+          <!-- label -->
+          <span class="sm:hidden">Unread only</span>
+          <span class="hidden sm:block">Show unread only</span>
+        </label>
         <a
           href="#"
-          class="flex items-center justify-end gap-2 text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1 rounded"
+          class="flex items-center justify-end gap-2 bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1 rounded"
         >
           Mark all as read
           <font-awesome icon="check"></font-awesome>
@@ -98,7 +132,7 @@
           <!-- Unread indicator -->
           <font-awesome
             icon="circle"
-            class="text-rose-500 text-[10px] border border-rose-500 rounded-full"
+            class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
           ></font-awesome>
         </li>
 
@@ -120,7 +154,7 @@
           <!-- Read indicator -->
           <font-awesome
             icon="circle"
-            class="text-transparent text-[10px] border border-slate-300 rounded-full"
+            class="text-transparent text-[8px] border border-slate-300 rounded-full"
           ></font-awesome>
         </li>
         <li
@@ -149,7 +183,7 @@
           <!-- Unread indicator -->
           <font-awesome
             icon="circle"
-            class="text-rose-500 text-[10px] border border-rose-500 rounded-full"
+            class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
           ></font-awesome>
         </li>
       </ul>