From eb21d3c2475501c0e39b7840e94780f339443b7c Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 19 Sep 2025 23:41:03 +0800
Subject: [PATCH] WIP: notification system adjustments

- Re-organize tabs
- Remove unneeded "Unread only" toggle (limiting functionality to chronological isUnread)
- Added "read line"
---
 src/views/NewActivityView.vue | 142 +++++++++++++++++-----------------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/src/views/NewActivityView.vue b/src/views/NewActivityView.vue
index 919298ce..daddba2c 100644
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
@@ -19,7 +19,7 @@
     <!-- 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 class="flex items-center gap-1">
+        <li class="flex items-center gap-[0.175em]">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
@@ -29,11 +29,11 @@
 
           <!-- 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]"
+            class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
             >3</span
           >
         </li>
-        <li class="flex items-center gap-1">
+        <li class="flex items-center gap-[0.175em]">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@@ -43,16 +43,24 @@
 
           <!-- 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
+            class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
+            >9+</span
           >
         </li>
-        <li class="flex items-center gap-1">
+        <li class="flex items-center gap-[0.175em]">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
           >
-            Favorites
+            People
+          </a>
+        </li>
+        <li class="flex items-center gap-[0.175em]">
+          <a
+            href="#"
+            class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
+          >
+            Items
           </a>
         </li>
       </ul>
@@ -60,8 +68,8 @@
 
     <!-- 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 class="flex items-center gap-1">
+      <ul class="flex flex-wrap justify-center gap-4 text-sm -mb-px">
+        <li class="flex items-center gap-[0.175em]">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
@@ -71,11 +79,11 @@
 
           <!-- 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]"
+            class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
             >3</span
           >
         </li>
-        <li class="flex items-center gap-1">
+        <li class="flex items-center gap-[0.175em]">
           <a
             href="#"
             class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@@ -88,23 +96,7 @@
 
     <!-- Offers to You -->
     <div v-if="showOffersDetails" class="mt-4">
-      <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>
+      <div class="flex justify-end items-center text-sm mb-2">
         <a
           href="#"
           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"
@@ -114,49 +106,6 @@
         </a>
       </div>
       <ul class="text-sm border-t border-slate-300">
-        <!-- Sample unread item -->
-        <li
-          class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
-        >
-          <!-- Notification details -->
-          <a href="#" class="block">
-            <span class="font-semibold">John Doe</span>
-            offered
-            <span class="font-semibold text-blue-600"
-              >An unbelievably amazing new offer for you!</span
-            >
-            and
-            <span class="font-semibold text-blue-600">100 USD</span>
-          </a>
-
-          <!-- Unread indicator -->
-          <font-awesome
-            icon="circle"
-            class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
-          ></font-awesome>
-        </li>
-
-        <!-- Sample read item -->
-        <li
-          class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
-        >
-          <!-- Notification details -->
-          <a href="#" class="block text-slate-400">
-            <span class="font-semibold">Michael Smith</span>
-            offered
-            <span class="font-semibold"
-              >An unsurprisingly mediocre old offer for you</span
-            >
-            and
-            <span class="font-semibold">50 USD</span>
-          </a>
-
-          <!-- Read indicator -->
-          <font-awesome
-            icon="circle"
-            class="text-transparent text-[8px] border border-slate-300 rounded-full"
-          ></font-awesome>
-        </li>
         <li
           v-for="offer in newOffersToUser"
           :key="offer.jwtId"
@@ -186,6 +135,57 @@
             class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
           ></font-awesome>
         </li>
+
+        <!-- Sample read item -->
+        <li class="border-b border-slate-300 py-2">
+          <!-- Last viewed separator -->
+          <div
+            class="border-t border-dashed border-slate-300 text-orange-400 mt-4 mb-2 font-bold text-sm"
+          >
+            <span class="block w-fit mx-auto -mt-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
+
+            <hr class="border-slate-300 mt-4" />
+          </div>
+
+          <div class="flex justify-between items-center gap-4">
+            <!-- Notification details -->
+            <a href="#" class="block text-slate-400">
+              <span class="font-semibold">User One</span>
+              offered
+              <span class="font-semibold">Sample read notification item</span>
+              and
+              <span class="font-semibold">50 USD</span>
+            </a>
+
+            <!-- Read indicator -->
+            <font-awesome
+              icon="circle"
+              class="text-transparent text-[8px] border border-slate-300 rounded-full"
+            ></font-awesome>
+          </div>
+        </li>
+
+        <!-- Sample read item -->
+        <li class="border-b border-slate-300 py-2">
+          <div class="flex justify-between items-center gap-4">
+            <!-- Notification details -->
+            <a href="#" class="block text-slate-400">
+              <span class="font-semibold">User One</span>
+              offered
+              <span class="font-semibold">Sample read notification item</span>
+              and
+              <span class="font-semibold">50 USD</span>
+            </a>
+
+            <!-- Read indicator -->
+            <font-awesome
+              icon="circle"
+              class="text-transparent text-[8px] border border-slate-300 rounded-full"
+            ></font-awesome>
+          </div>
+        </li>
       </ul>
     </div>