Add document title support for lemmy pages (#1638)

aeharding · Oct 26, 2024 · 55ebcc0 · 55ebcc0
1 parent 2d28d33
commit 55ebcc0
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 9 deletions.
diff --git a/src/features/post/inFeed/Post.tsx b/src/features/post/inFeed/Post.tsx
@@ -125,7 +125,6 @@ function Post(props: PostProps) {
         className={props.className}
         onHide={() => setShouldHide(true)}
       >
-        {/* href=undefined: Prevent drag failure on firefox */}
         <CustomIonItem
           mode="ios" // Use iOS style activatable tap highlight
           className={cx(isTouchDevice() && "ion-activatable")}
@@ -143,6 +142,7 @@ function Post(props: PostProps) {
             // and doesn't cause rerender, so do it now.
             autohidePostIfNeeded(props.post);
           }}
+          // href=undefined: Prevent drag failure on firefox
           href={undefined}
           ref={targetIntersectionRef}
           {...bind()}

diff --git a/src/features/shared/DocumentTitle.tsx b/src/features/shared/DocumentTitle.tsx
@@ -0,0 +1,32 @@
+import { useIonViewDidEnter, useIonViewDidLeave } from "@ionic/react";
+import { useState } from "react";
+import { isInstalled } from "../../helpers/device";
+
+interface TitleProps {
+  children: string;
+}
+
+function WebDocumentTitle({ children }: TitleProps) {
+  const [show, setShow] = useState(true);
+
+  useIonViewDidLeave(() => {
+    setShow(false);
+  });
+
+  useIonViewDidEnter(() => {
+    setShow(true);
+  });
+
+  if (!show) return null;
+
+  return <title>{children}</title>;
+}
+
+/**
+ * no-op for installed (title not relevant/supported)
+ */
+function NativeDocumentTitle() {
+  return null;
+}
+
+export default isInstalled() ? NativeDocumentTitle : WebDocumentTitle;
diff --git a/src/helpers/device.ts b/src/helpers/device.ts
@@ -16,7 +16,7 @@ export const isNative = memoize(() => {
 });
 
 export function isInstalled(): boolean {
-  return window.matchMedia("(display-mode: standalone)").matches || isNative();
+  return isNative() || window.matchMedia("(display-mode: standalone)").matches;
 }
 
 export const ua = new UAParser(navigator.userAgent);

diff --git a/src/routes/pages/posts/PostPage.tsx b/src/routes/pages/posts/PostPage.tsx
@@ -29,6 +29,7 @@ import AppHeader from "../../../features/shared/AppHeader";
 import useFeedSort from "../../../features/feed/sort/useFeedSort";
 import { getRemoteHandleFromHandle } from "../../../helpers/lemmy";
 import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
+import DocumentTitle from "../../../features/shared/DocumentTitle";
 
 export const AnnouncementIcon = styled(IonIcon)`
   font-size: 1.1rem;
@@ -138,12 +139,15 @@ function PostPageContent({
     if (!sort) return;
 
     return (
-      <PostDetail
-        post={post}
-        sort={sort}
-        commentPath={commentPath}
-        threadCommentId={threadCommentId}
-      />
+      <>
+        <DocumentTitle>{post.post.name}</DocumentTitle>
+        <PostDetail
+          post={post}
+          sort={sort}
+          commentPath={commentPath}
+          threadCommentId={threadCommentId}
+        />
+      </>
     );
   }
 

diff --git a/src/routes/pages/profile/ProfilePage.tsx b/src/routes/pages/profile/ProfilePage.tsx
@@ -22,6 +22,7 @@ import { useSetActivePage } from "../../../features/auth/AppContext";
 import AppHeader from "../../../features/shared/AppHeader";
 import { swapHorizontalSharp } from "ionicons/icons";
 import { isIosTheme } from "../../../helpers/device";
+import DocumentTitle from "../../../features/shared/DocumentTitle";
 
 export default function ProfilePage() {
   const pageRef = useRef<HTMLElement>(null);
@@ -37,6 +38,8 @@ export default function ProfilePage() {
 
   useSetActivePage(pageRef, !handle);
 
+  const title = handle ?? connectedInstance;
+
   return (
     <IonPage className="grey-bg" ref={pageRef}>
       <AppHeader>
@@ -53,7 +56,8 @@ export default function ProfilePage() {
             </IonButtons>
           )}
 
-          <IonTitle>{handle ?? connectedInstance}</IonTitle>
+          <DocumentTitle>{title}</DocumentTitle>
+          <IonTitle>{title}</IonTitle>
 
           {loggedIn && (
             <IonButtons slot="end">

diff --git a/src/routes/pages/profile/UserPage.tsx b/src/routes/pages/profile/UserPage.tsx
@@ -17,6 +17,7 @@ import {
 import FeedContent from "../shared/FeedContent";
 import { memo } from "react";
 import AppHeader from "../../../features/shared/AppHeader";
+import DocumentTitle from "../../../features/shared/DocumentTitle";
 
 interface UserPageProps {
   handle: string;
@@ -43,6 +44,7 @@ const UserPageContent = memo(function UserPageContent({
             <IonBackButton />
           </IonButtons>
 
+          <DocumentTitle>{handle}</DocumentTitle>
           <IonTitle>{handle}</IonTitle>
 
           <IonButtons slot="end">

diff --git a/src/routes/pages/shared/CommunityPage.tsx b/src/routes/pages/shared/CommunityPage.tsx
@@ -47,6 +47,7 @@ import PostAppearanceProvider, {
 } from "../../../features/post/appearance/PostAppearanceProvider";
 import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 import useFeedUpdate from "../../../features/feed/useFeedUpdate";
+import DocumentTitle from "../../../features/shared/DocumentTitle";
 
 const StyledFeedContent = styled(FeedContent)`
   .ios & {
@@ -277,6 +278,11 @@ const CommunityPageContent = memo(function CommunityPageContent({
                         defaultHref={buildGeneralBrowseLink("/")}
                       />
                     </IonButtons>
+                    {communityView && (
+                      <DocumentTitle>
+                        {communityView.community.title}
+                      </DocumentTitle>
+                    )}
                     <TitleSearch name={community}>
                       <IonButtons slot="end">
                         <ModActions

diff --git a/src/routes/pages/shared/SpecialFeedPage.tsx b/src/routes/pages/shared/SpecialFeedPage.tsx
@@ -30,6 +30,7 @@ import PostAppearanceProvider, {
 import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 import useFeedUpdate from "../../../features/feed/useFeedUpdate";
 import { ShowSubscribedIconContext } from "../../../features/labels/links/CommunityLink";
+import DocumentTitle from "../../../features/shared/DocumentTitle";
 
 interface SpecialFeedProps {
   type: ListingType;
@@ -124,6 +125,9 @@ export default function SpecialFeedPage({ type }: SpecialFeedProps) {
                   />
                 </IonButtons>
 
+                {site && (
+                  <DocumentTitle>{site.site_view.site.name}</DocumentTitle>
+                )}
                 <TitleSearch name={listingTypeTitle(type)}>
                   <IonButtons slot="end">
                     {type === "ModeratorView" && <ModActions type={type} />}