From 6190f3cd9d06fe51df6c7eff8cbf93372cbeb275 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Mon, 27 Nov 2023 21:20:29 +0200
Subject: [PATCH] HasNotificationsMarker for left nav

---
 packages/app/src/Pages/Layout/AccountHeader.tsx |  8 ++++++--
 packages/app/src/Pages/Layout/Layout.css        | 12 +-----------
 packages/app/src/Pages/Layout/NavSidebar.tsx    |  5 ++---
 packages/app/src/Pages/Layout/RightColumn.tsx   |  4 +++-
 packages/app/src/Pages/Layout/index.tsx         |  4 +---
 5 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/Pages/Layout/AccountHeader.tsx b/packages/app/src/Pages/Layout/AccountHeader.tsx
index 360a41a2..46f1ae88 100644
--- a/packages/app/src/Pages/Layout/AccountHeader.tsx
+++ b/packages/app/src/Pages/Layout/AccountHeader.tsx
@@ -96,7 +96,7 @@ const AccountHeader = () => {
   );
 };
 
-function HasNotificationsMarker() {
+export function HasNotificationsMarker() {
   const readNotifications = useLogin(s => s.readNotifications);
   const notifications = useSyncExternalStore(
     c => Notifications.hook(c, "*"),
@@ -112,7 +112,11 @@ function HasNotificationsMarker() {
   );
 
   if (hasNotifications) {
-    return <span className="has-unread"></span>;
+    return (
+      <div className="relative">
+        <span className="has-unread absolute top-0 right-0 rounded-full "></span>
+      </div>
+    );
   }
 }
 
diff --git a/packages/app/src/Pages/Layout/Layout.css b/packages/app/src/Pages/Layout/Layout.css
index 780e7837..73d1ee0d 100644
--- a/packages/app/src/Pages/Layout/Layout.css
+++ b/packages/app/src/Pages/Layout/Layout.css
@@ -43,21 +43,11 @@ header {
   padding: 5px;
 }
 
-.header-actions .btn .has-unread {
+.has-unread {
   background: var(--highlight);
   border-radius: 100%;
   width: 9px;
   height: 9px;
-  position: relative;
-  top: -4px;
-  right: 7px;
-}
-
-@media (max-width: 520px) {
-  .header-actions .btn .has-unread {
-    top: 2px;
-    right: 2px;
-  }
 }
 
 .stalker {
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index f6a06014..abf7b0cd 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -8,6 +8,7 @@ import { useUserProfile } from "@snort/system-react";
 import { NoteCreatorButton } from "../../Element/Event/NoteCreatorButton";
 import { FormattedMessage } from "react-intl";
 import classNames from "classnames";
+import { HasNotificationsMarker } from "@/Pages/Layout/AccountHeader";
 
 const MENU_ITEMS = [
   {
@@ -58,9 +59,6 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
 export default function NavSidebar({ narrow = false }) {
   const { publicKey } = useLogin(s => ({
     publicKey: s.publicKey,
-    latestNotification: s.latestNotification,
-    readNotifications: s.readNotifications,
-    readonly: s.readonly,
   }));
   const profile = useUserProfile(publicKey);
   const navigate = useNavigate();
@@ -82,6 +80,7 @@ export default function NavSidebar({ narrow = false }) {
             return (
               <NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive, narrow)}>
                 <Icon name={item.icon} size={24} />
+                {item.label === "Notifications" && <HasNotificationsMarker />}
                 {!narrow && <span className="hidden xl:inline ml-3">{item.label}</span>}
               </NavLink>
             );
diff --git a/packages/app/src/Pages/Layout/RightColumn.tsx b/packages/app/src/Pages/Layout/RightColumn.tsx
index 8db43f44..721a0b8f 100644
--- a/packages/app/src/Pages/Layout/RightColumn.tsx
+++ b/packages/app/src/Pages/Layout/RightColumn.tsx
@@ -5,7 +5,9 @@ import TrendingNotes from "@/Element/TrendingPosts";
 import { FormattedMessage } from "react-intl";
 import classNames from "classnames";
 
-export default function RightColumn({ show = true }) {
+export default function RightColumn() {
+  const hideRightColumnPaths = ["/login", "/new", "/messages", "/settings"];
+  const show = !hideRightColumnPaths.some(path => location.pathname.startsWith(path));
   return (
     <div
       className={classNames("flex-col hidden lg:w-1/3 sticky top-0 h-screen p-2 border-l border-neutral-900", {
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 9133591a..fc6f66ce 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -29,9 +29,7 @@ export default function Index() {
   useLoginFeed();
 
   const hideHeaderPaths = ["/login", "/new"];
-  const hideRightColumnPaths = ["/login", "/new", "/messages", "/settings"];
   const shouldHideHeader = hideHeaderPaths.some(path => location.pathname.startsWith(path));
-  const shouldHideRightColumn = hideRightColumnPaths.some(path => location.pathname.startsWith(path));
 
   const pageClassPaths = useMemo(
     () => ({
@@ -69,7 +67,7 @@ export default function Index() {
               <Outlet />
             </ErrorBoundary>
           </div>
-          <RightColumn show={!shouldHideRightColumn} />
+          <RightColumn />
         </div>
         <div className="md:hidden">
           <NoteCreatorButton className="note-create-button" />