From cb833822c3c343402e1990e7fc28d723b5c8d93d Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 5 May 2026 20:15:53 -0400
Subject: [PATCH] added new tab to the reader, decodeds urls in pickActiveTab
 function

---
 app/(home-pages)/(writer)/WriterShell.tsx     | 10 +++++-
 app/(home-pages)/p/[didOrHandle]/layout.tsx   |  1 +
 app/(home-pages)/reader/layout.tsx            |  1 +
 app/(home-pages)/tag/[tag]/layout.tsx         |  1 +
 components/ActionBar/DesktopNavigation.tsx    | 18 +++++++++--
 components/ActionBar/NavigationButtons.tsx    | 31 +++++++++----------
 .../PageLayouts/DashboardPageLayout.tsx       |  6 ++--
 7 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/app/(home-pages)/(writer)/WriterShell.tsx b/app/(home-pages)/(writer)/WriterShell.tsx
index 176dafe9..965406de 100644
--- a/app/(home-pages)/(writer)/WriterShell.tsx
+++ b/app/(home-pages)/(writer)/WriterShell.tsx
@@ -18,6 +18,7 @@ const PAGE_META = [
     prefix: "/looseleafs",
     id: "looseleafs",
     title: "Looseleafs",
+    showBackButton: true,
   },
   {
     prefix: "/notifications",
@@ -33,7 +34,14 @@ export function WriterShell(props: { children: React.ReactNode }) {
   return (
     <DashboardShell
       id={meta?.id ?? ""}
-      pageTitle={meta && <PageTitle pageTitle={meta.title} />}
+      pageTitle={
+        meta && (
+          <PageTitle
+            pageTitle={meta.title}
+            showBackButton={meta.showBackButton}
+          />
+        )
+      }
       actions={<Actions />}
     >
       {props.children}
diff --git a/app/(home-pages)/p/[didOrHandle]/layout.tsx b/app/(home-pages)/p/[didOrHandle]/layout.tsx
index 8ee3c992..b84cfe71 100644
--- a/app/(home-pages)/p/[didOrHandle]/layout.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/layout.tsx
@@ -89,6 +89,7 @@ export default async function ProfilePageLayout(props: {
       tabs={{
         Inbox: { href: "/reader" },
         Trending: { href: "/reader/trending" },
+        New: { href: "/reader/new" },
       }}
     >
       <DashboardPageLayout
diff --git a/app/(home-pages)/reader/layout.tsx b/app/(home-pages)/reader/layout.tsx
index daa500bc..c816dd38 100644
--- a/app/(home-pages)/reader/layout.tsx
+++ b/app/(home-pages)/reader/layout.tsx
@@ -10,6 +10,7 @@ export default async function ReaderLayout(props: {
   const tabs: { [name: string]: { href: string } } = {};
   if (identity?.atp_did) tabs.Inbox = { href: "/reader" };
   tabs.Trending = { href: "/reader/trending" };
+  tabs.New = { href: "/reader/new" };
 
   return (
     <DashboardShell
diff --git a/app/(home-pages)/tag/[tag]/layout.tsx b/app/(home-pages)/tag/[tag]/layout.tsx
index b44c4703..ba489e04 100644
--- a/app/(home-pages)/tag/[tag]/layout.tsx
+++ b/app/(home-pages)/tag/[tag]/layout.tsx
@@ -15,6 +15,7 @@ export default async function TagLayout(props: {
       tabs={{
         Inbox: { href: "/reader" },
         Trending: { href: "/reader/trending" },
+        New: { href: "/reader/new" },
       }}
     >
       {props.children}
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index feb1840b..027ed8a2 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -25,22 +25,34 @@ type NavigationProps = {
   tabs?: { [name: string]: { href: string; icon?: React.ReactNode } };
 };
 
+function safeDecode(p: string): string {
+  try {
+    return decodeURIComponent(p);
+  } catch {
+    return p;
+  }
+}
+
 function pickActiveTabHref(
   pathname: string,
   tabs: { [name: string]: { href: string } },
 ): string | null {
+  const decodedPathname = safeDecode(pathname);
   const hrefs = Object.values(tabs).map((t) => t.href);
   let best: string | null = null;
   for (const href of hrefs) {
+    const decodedHref = safeDecode(href);
     // If this href is a strict prefix of another tab's href, only allow exact
     // match — otherwise a parent tab would always swallow sibling-but-unmatched
     // paths (e.g. /reader/new highlighting /reader's Inbox tab).
     const isPrefixOfAnother = hrefs.some(
-      (other) => other !== href && other.startsWith(href + "/"),
+      (other) =>
+        other !== href && safeDecode(other).startsWith(decodedHref + "/"),
     );
     const matches = isPrefixOfAnother
-      ? pathname === href
-      : pathname === href || pathname.startsWith(href + "/");
+      ? decodedPathname === decodedHref
+      : decodedPathname === decodedHref ||
+        decodedPathname.startsWith(decodedHref + "/");
     if (matches) {
       if (!best || href.length > best.length) best = href;
     }
diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
index 0b643c92..1befbd88 100644
--- a/components/ActionBar/NavigationButtons.tsx
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -77,6 +77,7 @@ export const ReaderButton = (props: { subs: boolean }) => {
 export function NotificationButton() {
   let { identity } = useIdentityData();
   let unreads = identity?.notifications[0]?.count;
+
   let pathname = usePathname();
   let searchParams = useSearchParams();
   let router = useRouter();
@@ -94,24 +95,20 @@ export function NotificationButton() {
   }
 
   return (
-    <button
+    <ActionButton
       type="button"
       onClick={handleClick}
-      className="hover:no-underline!"
-    >
-      <ActionButton
-        labelOnMobile={false}
-        icon={
-          unreads ? (
-            <NotificationsUnreadSmall className="text-accent-contrast" />
-          ) : (
-            <NotificationsReadSmall />
-          )
-        }
-        label="Notifications"
-        active={active}
-        className={unreads ? "text-accent-contrast!" : ""}
-      />
-    </button>
+      labelOnMobile={false}
+      icon={
+        unreads ? (
+          <NotificationsUnreadSmall className="text-accent-contrast" />
+        ) : (
+          <NotificationsReadSmall />
+        )
+      }
+      label="Notifications"
+      active={active}
+      className={unreads ? "text-accent-contrast! font-bold" : ""}
+    />
   );
 }
diff --git a/components/PageLayouts/DashboardPageLayout.tsx b/components/PageLayouts/DashboardPageLayout.tsx
index 08cbc186..7042aafb 100644
--- a/components/PageLayouts/DashboardPageLayout.tsx
+++ b/components/PageLayouts/DashboardPageLayout.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { PageHeader } from "../PageHeader";
+import { PageHeader } from "components/PageHeader";
 import { MobileNavigation } from "../ActionBar/MobileNavigation";
 import { usePreserveScroll } from "src/hooks/usePreserveScroll";
 
@@ -21,9 +21,9 @@ export function DashboardPageLayout(props: {
       id="home-content"
     >
       <MobileNavigation
-        search={props.search}
-        mobileActions={props.mobileActions}
         pageTitle={props.pageTitle}
+        mobileActions={props.mobileActions}
+        search={props.search}
       />
 
       {props.showHeader && (
-- 
2.51.2