add an empty state if no notifications

app/(home-pages)/notifications/NotificationList.tsx

···
   let { rootEntity } = useReplicache();
   let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
     .value;
+
+  if (notifications.length === 0)
+    return (
+      <div className="w-full container italic text-tertiary text-center sm:p-4 p-3">
+        no notifications yet...
+      </div>
+    );
   return (
     <div className="max-w-prose mx-auto w-full">
       <div className={`flex flex-col ${cardBorderHidden ? "gap-6" : "gap-2"}`}>

components/ActionBar/Navigation.tsx

···
   markAsRead,
 } from "app/(home-pages)/notifications/getNotifications";
 import { DotLoader } from "components/utils/DotLoader";
+import { NotificationList } from "app/(home-pages)/notifications/NotificationList";
 
 export type navPages = "home" | "reader" | "pub" | "discover" | "notifications";
 
···
         />
       }
     >
-      <div className="flex flex-col gap-5 text-sm">
-        {isLoading ? (
-          <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm mt-8">
-            <span>loading</span>
-            <DotLoader />
-          </div>
-        ) : (
-          notifications?.map((n) => {
-            if (n.type === "comment") {
-              n;
-              return (
-                <CommentNotification
-                  cardBorderHidden={true}
-                  key={n.id}
-                  {...n}
-                />
-              );
-            }
-          })
-        )}
-      </div>
-      <SpeedyLink
-        className="flex justify-end pt-2 text-sm"
-        href={"/notifications"}
-      >
-        See All
-      </SpeedyLink>
+      {isLoading ? (
+        <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm p-3 sm:p-4">
+          <span>loading</span>
+          <DotLoader />
+        </div>
+      ) : (
+        <>
+          <NotificationList notifications={notifications!} />
+          {notifications && notifications.length > 0 && (
+            <SpeedyLink
+              className="flex justify-end pt-2 text-sm"
+              href={"/notifications"}
+            >
+              See All
+            </SpeedyLink>
+          )}
+        </>
+      )}
     </Popover>
   );
 }