WIP: notification view improvements

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

src/views/NewActivityView.vue

@@ -3,107 +3,192 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div class="mb-2">
-      <h1 class="text-lg text-center font-light 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 -top-1"
+          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 top-[0.2em]"
           @click="$router.back()"
         />
-        New Activity For You
+
+        Notifications
       </h1>
     </div>
 
-    <!-- Display a single row with the name of "New Offers To You" with a count. -->
+    <!-- Main Tabs -->
-    <div class="flex justify-between" data-testId="showOffersToUser">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2">
-      <div>
+      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
-        <span class="text-lg font-medium"
+        <li class="flex items-center gap-1">
-          >{{ newOffersToUser.length
+          <a
-          }}{{ newOffersToUserHitLimit ? "+" : "" }}</span
+            href="#"
-        >
+            class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
-        <span class="text-lg font-medium ml-4"
+          >
-          >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
+            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 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 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"
+          >
+            Favorites
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 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">
+          <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 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"
+          >
+            To Your Projects
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 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>
+        <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"
         >
-        <font-awesome
+          Mark all as read
-          v-if="newOffersToUser.length > 0"
+          <font-awesome icon="check"></font-awesome>
-          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+        </a>
-          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserAndMarkRead()"
-        />
       </div>
-      <router-link to="/recent-offers-to-user" class="text-blue-500">
+      <ul class="text-sm border-t border-slate-300">
-        See&nbsp;all
+        <!-- Sample unread item -->
-      </router-link>
+        <li
-    </div>
+          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>
 
-    <div v-if="showOffersDetails" class="ml-4 mt-4">
+          <!-- Unread indicator -->
-      <ul class="list-disc ml-4">
+          <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"
-          class="mt-4 relative group"
+          class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
         >
-          <span>{{
-            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
-          }}</span>
-          offered
-          <span v-if="offer.objectDescription">{{
-            offer.objectDescription
-          }}</span
-          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
-          <span v-if="offer.amount">{{
-            displayAmount(offer.unit, offer.amount)
-          }}</span>
           <router-link
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
-            class="text-blue-500"
+            class="block"
           >
-            <font-awesome
+            <span class="font-semibold">{{
-              icon="file-lines"
+              didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
-              class="pl-2 text-blue-500 cursor-pointer"
+            }}</span>
-            />
+            offered
+            <span
+              v-if="offer.objectDescription"
+              class="font-semibold text-blue-600"
+              >{{ offer.objectDescription }}</span
+            >{{ offer.objectDescription && offer.amount ? " and " : "" }}
+            <span v-if="offer.amount" class="font-semibold text-blue-600">{{
+              displayAmount(offer.unit, offer.amount)
+            }}</span>
           </router-link>
-          <!-- New line that appears on hover or when the offer is clicked -->
+
-          <div
+          <!-- Unread indicator -->
-            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+          <font-awesome
-            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            icon="circle"
-          >
+            class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
-            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+          ></font-awesome>
-            Click to keep all above as new offers
-          </div>
         </li>
       </ul>
     </div>
 
-    <!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
-    <div
-      class="mt-4 flex justify-between"
-      data-testId="showOffersToUserProjects"
-    >
-      <div>
-        <span class="text-lg font-medium"
-          >{{ newOffersToUserProjects.length
-          }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
-        >
-        <span class="text-lg font-medium ml-4"
-          >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
-          Your Projects</span
-        >
-        <font-awesome
-          v-if="newOffersToUserProjects.length > 0"
-          :icon="
-            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
-          "
-          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
-        />
-      </div>
-      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
-        See&nbsp;all
-      </router-link>
-    </div>
-
     <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
       <ul class="list-disc ml-4">
         <li
@@ -191,7 +276,7 @@ export default class NewActivityView extends Vue {
   newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
   newOffersToUserProjectsHitLimit = false;
 
-  showOffersDetails = false;
+  showOffersDetails = true;
   showOffersToUserProjectsDetails = false;
   didInfo = didInfo;
   displayAmount = displayAmount;