HasNotificationsMarker for left nav

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>
+    );
   }
 }
 

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 {

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>
             );

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", {

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" />