WIP: alternative notification UI

src/libs/fontawesome.ts

@@ -80,6 +80,7 @@ import {
   faQuestion,
   faRightFromBracket,
   faRotate,
+  faScroll,
   faShareNodes,
   faSpinner,
   faSquare,
@@ -169,6 +170,7 @@ library.add(
   faQrcode,
   faQuestion,
   faRotate,
+  faScroll,
   faRightFromBracket,
   faShareNodes,
   faSpinner,

src/views/HomeView.vue

@@ -142,7 +142,7 @@ Raymer * @version 1.0.0 */
 
     <!-- Results List -->
     <div class="mt-4 mb-4">
-      <div class="flex gap-2 items-center mb-2">
+      <div class="flex gap-2 items-center mb-3">
         <h2 class="text-xl font-bold">Latest Activity</h2>
         <button
           v-if="resultsAreFiltered()"
@@ -166,8 +166,148 @@ Raymer * @version 1.0.0 */
         </button>
       </div>
 
+      <!-- ALTERNATIVE UI: Feed + Notification Accordion -->
+      <div 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 v-if="false" class="grid grid-cols-5 text-xl">
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="scroll" />
+          <div class="text-xs mt-1">feed</div>
+        </button>
+        <button
+          class="relative text-center px-1 bg-slate-400 text-white pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="hand-holding-heart" />
+          <div class="text-xs mt-1">offers</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >2</span
+          >
+        </button>
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="folder-open" />
+          <div class="text-xs mt-1">projects</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >50+</span
+          >
+        </button>
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="users" />
+          <div class="text-xs mt-1">people</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >4</span
+          >
+        </button>
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="image" />
+          <div class="text-xs mt-1">items</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >7</span
+          >
+        </button>
+      </div>
+
       <!-- 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()"
       >