WIP: QuickNav notification badges

- Cleanup of unused mockups
- Minor tweaks

src/components/QuickNav.vue

@@ -14,11 +14,20 @@
           'text-slate-500': selected !== 'Home',
         }"
       >
-        <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
+        <router-link
+          :to="{ name: 'home' }"
+          class="relative block text-center py-2 px-1"
+        >
           <div class="flex flex-col items-center">
             <font-awesome icon="house-chimney" class="fa-fw" />
             <span class="text-xs mt-1">feed</span>
           </div>
+
+          <!-- Notification dot - show while the user has unread notifications -->
+          <font-awesome
+            icon="circle"
+            class="absolute left-1/2 top-1 translate-x-2 text-rose-500 text-[10px] border border-white rounded-full"
+          ></font-awesome>
         </router-link>
       </li>
       <!-- Search -->
@@ -89,7 +98,7 @@
       >
         <router-link
           :to="{ name: 'account' }"
-          class="block text-center py-2 px-1"
+          class="relative block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
             <font-awesome icon="circle-user" class="fa-fw" />
@@ -102,6 +111,12 @@
             -->
             <span class="text-xs mt-1">profile</span>
           </div>
+
+          <!-- Notification dot - show while the user has not yet backed up their seed phrase -->
+          <font-awesome
+            icon="circle"
+            class="absolute left-1/2 top-1 translate-x-2 text-rose-500 text-[10px] border border-white rounded-full"
+          ></font-awesome>
         </router-link>
       </li>
     </ul>

src/views/HomeView.vue

@@ -139,87 +139,6 @@ Raymer * @version 1.0.0 */
 
     <!-- Results List -->
     <div class="mt-4 mb-4">
-      <!-- ALTERNATIVE UI: Feed + Notification Accordion -->
-      <div v-if="false" class="text-lg font-semibold border-t border-slate-300">
-        <button
-          class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
-        >
-          <font-awesome
-            icon="chevron-right"
-            class="fa-fw text-xs text-slate-500"
-          />
-          <font-awesome icon="scroll" class="fa-fw text-slate-500" />
-          <div class="me-auto text-base">Feed</div>
-        </button>
-        <button
-          class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
-        >
-          <font-awesome
-            icon="chevron-right"
-            class="fa-fw text-xs text-slate-500"
-          />
-          <font-awesome
-            icon="hand-holding-heart"
-            class="fa-fw text-slate-500"
-          />
-          <div class="me-auto text-base">Offers</div>
-
-          <!-- Unread count -->
-          <span
-            class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
-            >2</span
-          >
-        </button>
-        <button
-          class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
-        >
-          <font-awesome
-            icon="chevron-right"
-            class="fa-fw text-xs text-slate-500"
-          />
-          <font-awesome icon="folder-open" class="fa-fw text-slate-500" />
-          <div class="me-auto text-base">Projects</div>
-
-          <!-- Unread count -->
-          <span
-            class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
-            >50+</span
-          >
-        </button>
-        <button
-          class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
-        >
-          <font-awesome
-            icon="chevron-right"
-            class="fa-fw text-xs text-slate-500"
-          />
-          <font-awesome icon="users" class="fa-fw text-slate-500" />
-          <div class="me-auto text-base">People</div>
-
-          <!-- Unread count -->
-          <span
-            class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
-            >4</span
-          >
-        </button>
-        <button
-          class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
-        >
-          <font-awesome
-            icon="chevron-right"
-            class="fa-fw text-xs text-slate-500"
-          />
-          <font-awesome icon="image" class="fa-fw text-slate-500" />
-          <div class="me-auto text-base">Items</div>
-
-          <!-- Unread count -->
-          <span
-            class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
-            >7</span
-          >
-        </button>
-      </div>
-
       <!-- ALTERNATIVE UI: Feed + Notification Tabs -->
       <div
         class="sticky top-0 z-50 grid grid-cols-5 text-xl sm:text-2xl pt-4 pb-1 px-1 -mt-3 -mx-1 mb-4 bg-white rounded-b-[10px]"
@@ -301,66 +220,6 @@ Raymer * @version 1.0.0 */
       </div>
       <FeedFilters ref="feedFilters" />
 
-      <!-- Notification Counts -->
-      <div
-        v-if="false"
-        class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-2 rounded-lg text-white cursor-pointer"
-        @click="goToActivityToUserPage()"
-      >
-        <div class="flex items-center justify-center gap-0.5">
-          <!-- Offers -->
-          <div
-            v-if="numNewOffersToUser"
-            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
-          >
-            <span
-              class="text-2xl sm:text-3xl font-bold leading-none"
-              data-testId="newDirectOffersActivityNumber"
-            >
-              {{ numNewOffersToUser
-              }}<span class="font-normal text-xl leading-none">{{
-                newOffersToUserHitLimit ? "+" : ""
-              }}</span>
-            </span>
-            <font-awesome icon="hand-holding-heart" class="text-xs" />
-          </div>
-          <!-- Project Activity -->
-          <div
-            v-if="numNewOffersToUserProjects"
-            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
-          >
-            <span
-              class="text-2xl sm:text-3xl font-bold leading-none"
-              data-testId="newOffersToUserProjectsActivityNumber"
-            >
-              {{ numNewOffersToUserProjects
-              }}<span class="font-normal text-xl leading-none">{{
-                newOffersToUserProjectsHitLimit ? "+" : ""
-              }}</span>
-            </span>
-            <font-awesome icon="folder-open" class="text-xs" />
-          </div>
-          <!-- Contact Activity -->
-          <div
-            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
-          >
-            <span class="text-2xl sm:text-3xl font-bold leading-none"> 4 </span>
-            <font-awesome icon="user" class="text-xs" />
-          </div>
-          <!-- Item Activity -->
-          <div
-            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
-          >
-            <span class="text-2xl sm:text-3xl font-bold leading-none"> 7 </span>
-            <font-awesome icon="image" class="text-xs" />
-          </div>
-        </div>
-        <div
-          class="text-center mt-1.5 leading-none text-xs sm:text-sm uppercase"
-        >
-          View Notifications
-        </div>
-      </div>
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul id="listLatestActivity" class="space-y-4">
           <ActivityListItem

src/views/NewActivityView.vue

@@ -29,7 +29,7 @@
 
           <!-- 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] -me-1.5"
+            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 -mt-[2px]"
             >3</span
           >
         </li>
@@ -43,7 +43,7 @@
 
           <!-- 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] -me-1.5"
+            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 -mt-[2px]"
             >9+</span
           >
         </li>
@@ -79,16 +79,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.15em] -me-1.5"
+            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 -mt-[2px]"
-            >3</span
+            >2</span
+          >
+        </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"
           >
+            Your Projects
+          </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"
           >
-            To Your Projects
+            Favorites
           </a>
         </li>
       </ul>