From a0ea3c20e83f489e192c50bbb665a445e0a86955 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 29 Jun 2023 22:21:12 +0100
Subject: [PATCH] feat: hide navigation and search in post modal

---
 src/app/@modal/(.)post/[site]/[slug]/page.tsx |  7 ++++-
 src/components/home/PostModal.tsx             |  1 +
 src/components/site/SiteHeader.tsx            | 30 ++++++++++++-------
 src/components/site/SiteHeaderMenu.tsx        | 26 +++++++++-------
 src/components/ui/UniLink.tsx                 |  6 +++-
 src/lib/helpers.ts                            |  6 ++--
 6 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/app/@modal/(.)post/[site]/[slug]/page.tsx b/src/app/@modal/(.)post/[site]/[slug]/page.tsx
index 3c47c162..602bd660 100644
--- a/src/app/@modal/(.)post/[site]/[slug]/page.tsx
+++ b/src/app/@modal/(.)post/[site]/[slug]/page.tsx
@@ -57,7 +57,12 @@ export default async function SiteModal({
   return (
     <PostModal>
       <div className="pb-16">
-        <SiteHeader handle={params.site} full={true} />
+        <SiteHeader
+          handle={params.site}
+          full={true}
+          hideNavigation={true}
+          hideSearch={true}
+        />
         <main
           className={cn(
             `xlog-post-id-${page?.characterId}-${page?.noteId}`,
diff --git a/src/components/home/PostModal.tsx b/src/components/home/PostModal.tsx
index f3db2d0b..db325e9d 100644
--- a/src/components/home/PostModal.tsx
+++ b/src/components/home/PostModal.tsx
@@ -8,6 +8,7 @@ import { Modal } from "~/components/ui/Modal"
 export default function SiteModal({ children }: { children: JSX.Element }) {
   const router = useRouter()
   const [open, setOpen] = useState(false)
+
   useEffect(() => {
     setOpen(true)
   }, [])
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index fd944f14..e181557d 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -15,9 +15,13 @@ import { SiteHeaderMenu } from "./SiteHeaderMenu"
 export const SiteHeader = async ({
   handle,
   full,
+  hideNavigation,
+  hideSearch,
 }: {
   handle: string
   full?: boolean
+  hideNavigation?: boolean
+  hideSearch?: boolean
 }) => {
   const queryClient = getQueryClient()
 
@@ -97,7 +101,11 @@ export const SiteHeader = async ({
                     site?.metadata?.content?.name}
                 </h1>
                 <div className="ml-0 sm:ml-8 space-x-3 sm:space-x-4 flex items-center sm:static absolute -bottom-0 right-0">
-                  <SiteHeaderMenu handle={site?.handle} owner={site?.owner} />
+                  <SiteHeaderMenu
+                    handle={site?.handle}
+                    owner={site?.owner}
+                    hideSearch={hideSearch}
+                  />
                   <div className="xlog-site-follow-button">
                     <FollowingButton site={site || undefined} />
                   </div>
@@ -119,16 +127,18 @@ export const SiteHeader = async ({
             </div>
           </div>
         </div>
-        <div className="text-gray-500 flex items-center justify-between w-full mt-auto">
-          <div className="xlog-site-navigation flex items-center gap-1 mx-[-.5rem] min-w-0 text-sm sm:text-base overflow-x-auto">
-            {leftLinks.map((link, i) => {
-              return <HeaderLink link={link} key={`${link.label}${i}`} />
-            })}
+        {!hideNavigation && (
+          <div className="text-gray-500 flex items-center justify-between w-full mt-auto">
+            <div className="xlog-site-navigation flex items-center gap-1 mx-[-.5rem] min-w-0 text-sm sm:text-base overflow-x-auto">
+              {leftLinks.map((link, i) => {
+                return <HeaderLink link={link} key={`${link.label}${i}`} />
+              })}
+            </div>
+            <div className="xlog-site-connect pl-1">
+              <ConnectButton variant="text" mobileSimplification={true} />
+            </div>
           </div>
-          <div className="xlog-site-connect pl-1">
-            <ConnectButton variant="text" mobileSimplification={true} />
-          </div>
-        </div>
+        )}
       </div>
     </header>
   )
diff --git a/src/components/site/SiteHeaderMenu.tsx b/src/components/site/SiteHeaderMenu.tsx
index 7c2ce0c9..c00e53bf 100644
--- a/src/components/site/SiteHeaderMenu.tsx
+++ b/src/components/site/SiteHeaderMenu.tsx
@@ -37,9 +37,11 @@ function MoreActions({ children }: React.PropsWithChildren<{}>) {
 export const SiteHeaderMenu = ({
   handle,
   owner,
+  hideSearch,
 }: {
   handle?: string
   owner?: string
+  hideSearch?: boolean
 }) => {
   const { t } = useTranslation("site")
   const [searchOpen, setSearchOpen] = useState(false)
@@ -98,16 +100,20 @@ export const SiteHeaderMenu = ({
       })}/feed?format=xml`,
       out: true,
     },
-    {
-      text: "Search on this site",
-      icon: (
-        <span className="text-stone-400">
-          <i className="icon-[mingcute--search-line] block" />
-        </span>
-      ),
-      onClick: () => setSearchOpen(true),
-      out: true,
-    },
+    ...(hideSearch
+      ? []
+      : [
+          {
+            text: "Search on this site",
+            icon: (
+              <span className="text-stone-400">
+                <i className="icon-[mingcute--search-line] block" />
+              </span>
+            ),
+            onClick: () => setSearchOpen(true),
+            out: true,
+          },
+        ]),
   ]
 
   return (
diff --git a/src/components/ui/UniLink.tsx b/src/components/ui/UniLink.tsx
index 986b179a..4565c48f 100644
--- a/src/components/ui/UniLink.tsx
+++ b/src/components/ui/UniLink.tsx
@@ -35,7 +35,11 @@ export const UniLink = ({
   const isExternal =
     href && (/^https?:\/\//.test(href) || href.startsWith("/feed"))
 
-  if (isExternal) {
+  const isInModal =
+    typeof window !== "undefined" &&
+    window.location.pathname.startsWith("/post/")
+
+  if (isExternal || isInModal) {
     return (
       <a
         {...props}
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
index 91fd3a60..8d705038 100644
--- a/src/lib/helpers.ts
+++ b/src/lib/helpers.ts
@@ -75,13 +75,13 @@ export const getSiteRelativeUrl = (pathname: string, address: string) => {
   if (!address.startsWith("/")) {
     address = `/${address}`
   }
-  const reg = /\/site\/[^/]*/
+  const reg = /\/(site|post)\/([^/]*)/
   if (address.match(reg) || address.match(/^https?:\/\//)) {
     return address
   } else {
     const match = pathname.match(reg)
-    if (match?.[0]) {
-      return `${match[0]}${address === "/" ? "" : address}`
+    if (match?.[2]) {
+      return `/site/${match[2]}${address === "/" ? "" : address}`
     } else {
       return address
     }