Add page title to every page

src/components/MissingPage/MissingPage.tsx

@@ -3,6 +3,7 @@ import { Component, JSXElement, Show } from 'solid-js';
 import { hookForDev } from '../../lib/devTools';
 import { placeholders as t } from '../../translations';
 import Branding from '../Branding/Branding';
+import PageTitle from '../PageTitle/PageTitle';
 import Search from '../Search/Search';
 import Wormhole from '../Wormhole/Wormhole';
 import styles from './MissingPage.module.scss';
@@ -14,6 +15,12 @@ const MissingPage: Component<{ title: string, children?: JSXElement, id?: string
 
   return (
     <div id={props.id}>
+      <PageTitle title={intl.formatMessage(
+          t.pageWIPTitle,
+          { title: props.title },
+        )}
+      />
+
       <Wormhole
         to="search_section"
       >

src/pages/Downloads.tsx

@@ -16,6 +16,7 @@ import StickySidebar from '../components/StickySidebar/StickySidebar';
 import { andVersion, andRD, iosVersion, iosRD, today } from '../constants';
 import ExternalLink from '../components/ExternalLink/ExternalLink';
 import PageCaption from '../components/PageCaption/PageCaption';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 const Downloads: Component = () => {
 
@@ -92,6 +93,8 @@ const Downloads: Component = () => {
         </div>
       </StickySidebar>
 
+      <PageTitle title={intl.formatMessage(t.title)} />
+
       <PageCaption title={intl.formatMessage(t.title)} />
 
       <div class={styles.promoHolder}>

src/pages/EditProfile.tsx

@@ -23,6 +23,7 @@ import Loader from '../components/Loader/Loader';
 import { useNavigate } from '@solidjs/router';
 import Branding from '../components/Branding/Branding';
 import Wormhole from '../components/Wormhole/Wormhole';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 type AutoSizedTextArea = HTMLTextAreaElement & { _baseScrollHeight: number };
 
@@ -267,6 +268,8 @@ const EditProfile: Component = () => {
 
   return (
     <div class={styles.container}>
+      <PageTitle title={intl.formatMessage(tSettings.profile.title)} />
+
       <PageCaption title={intl.formatMessage(tSettings.profile.title)} />
 
       <div id="central_header" class={styles.fullHeader}>

src/pages/Explore.tsx

@@ -18,6 +18,7 @@ import PageCaption from '../components/PageCaption/PageCaption';
 import { titleCase } from '../utils';
 import AddToHomeFeedButton from '../components/AddToHomeFeedButton/AddToHomeFeedButton';
 import { setShowNav } from '../components/Layout/Layout';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 
 const scopes = ['follows', 'tribe', 'network', 'global'];
@@ -70,6 +71,8 @@ const Explore: Component = () => {
 
     return (
       <>
+        <PageTitle title={intl.formatMessage(tExplore.pageTitle)} />
+
         <Wormhole
           to="search_section"
         >

src/pages/Home.tsx

@@ -27,9 +27,10 @@ import { PrimalUser } from '../types/primal';
 import Avatar from '../components/Avatar/Avatar';
 import { userName } from '../stores/profile';
 import { useAccountContext } from '../contexts/AccountContext';
-import { feedNewPosts, placeholders } from '../translations';
+import { feedNewPosts, placeholders, branding } from '../translations';
 import Search from '../components/Search/Search';
 import { setIsHome } from '../components/Layout/Layout';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 
 const Home: Component = () => {
@@ -118,6 +119,7 @@ const Home: Component = () => {
 
   return (
     <div class={styles.homeContent}>
+      <PageTitle title={intl.formatMessage(branding)} />
       <Wormhole
         to="search_section"
       >

src/pages/Messages.tsx

@@ -34,6 +34,7 @@ import {
 } from '../translations';
 import PageCaption from '../components/PageCaption/PageCaption';
 import { useMediaContext } from '../contexts/MediaContext';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 type AutoSizedTextArea = HTMLTextAreaElement & { _baseScrollHeight: number };
 
@@ -876,6 +877,8 @@ const Messages: Component = () => {
 
   return (
     <div>
+      <PageTitle title={intl.formatMessage(tMessages.title)} />
+
       <Wormhole
         to="search_section"
       >

src/pages/Mutelist.tsx

@@ -18,6 +18,7 @@ import { useIntl } from '@cookbook/solid-intl';
 import { useToastContext } from '../components/Toaster/Toaster';
 import Branding from '../components/Branding/Branding';
 import Wormhole from '../components/Wormhole/Wormhole';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 const lists: Record<string, string> = {
   primal_nsfw: 'nsfw_list',
@@ -105,6 +106,14 @@ const Mutelist: Component = () => {
 
   return (
     <div class={styles.settingsContainer}>
+      <PageTitle title={
+        specialAlgos.includes(params.npub) ?
+          // @ts-ignore
+          intl.formatMessage(t.moderation.algos[params.npub]) :
+          intl.formatMessage(t.moderation.moderationItem, { name: userName(author()) })
+        }
+      />
+
       <PageCaption>
         <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
           <div style="display: flex; align-items: center;">

src/pages/Notifications.tsx

@@ -25,6 +25,7 @@ import { notifications as t } from '../translations';
 
 import styles from './Notifications.module.scss';
 import PageCaption from '../components/PageCaption/PageCaption';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 const Notifications: Component = () => {
 
@@ -999,9 +1000,9 @@ const Notifications: Component = () => {
     const knownUsers = Object.keys(users);
 
     const rUsers: Record<string, PrimalNotifUser[]> = notes.reduce((acc, note) => {
-      const pk = note.user.pubkey;
+      const pk: string = note.user.pubkey;
 
-      const rUser = knownUsers.includes(pk) ?
+      const rUser: PrimalUser = knownUsers.includes(pk) ?
         convertToUser(users[pk]) :
         emptyUser(pk);
 
@@ -1050,6 +1051,10 @@ const Notifications: Component = () => {
 
   return (
     <div>
+      <PageTitle title={
+        intl.formatMessage(t.title)}
+      />
+
       <Wormhole
         to="search_section"
       >

src/pages/Search.tsx

@@ -22,6 +22,7 @@ import SearchComponent from '../components/Search/Search';
 import { toast as t, search as tSearch, actions as tActions  } from '../translations';
 import PageCaption from '../components/PageCaption/PageCaption';
 import AddToHomeFeedButton from '../components/AddToHomeFeedButton/AddToHomeFeedButton';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 const Search: Component = () => {
   const params = useParams();
@@ -67,6 +68,13 @@ const Search: Component = () => {
 
   return (
     <>
+      <PageTitle title={
+        intl.formatMessage(
+          tSearch.title,
+          { query: query() || '' },
+        )}
+      />
+
       <StickySidebar>
         <SearchSidebar users={search?.contentUsers || []} />
       </StickySidebar>

src/pages/Settings/Appearance.tsx

@@ -6,6 +6,7 @@ import { useIntl } from '@cookbook/solid-intl';
 import { settings as t } from '../../translations';
 import PageCaption from '../../components/PageCaption/PageCaption';
 import { Link } from '@solidjs/router';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 const Appearance: Component = () => {
 
@@ -13,6 +14,8 @@ const Appearance: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.appearance.title)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.appearance.title)}</div>

src/pages/Settings/HomeFeeds.tsx

@@ -8,6 +8,7 @@ import { Link } from '@solidjs/router';
 import ConfirmModal from '../../components/ConfirmModal/ConfirmModal';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import FeedSorter from '../../components/FeedSorter/FeedSorter';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 const HomeFeeds: Component = () => {
 
@@ -23,6 +24,8 @@ const HomeFeeds: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.homeFeeds.title)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.homeFeeds.title)}</div>

src/pages/Settings/Moderation.tsx

@@ -7,6 +7,7 @@ import Avatar from '../../components/Avatar/Avatar';
 import Checkbox from '../../components/Checkbox/Checkbox';
 import HelpTip from '../../components/HelpTip/HelpTip';
 import PageCaption from '../../components/PageCaption/PageCaption';
+import PageTitle from '../../components/PageTitle/PageTitle';
 import VerificationCheck from '../../components/VerificationCheck/VerificationCheck';
 import { contentScope, Kind, specialAlgos, trendingScope } from '../../constants';
 import { useAccountContext } from '../../contexts/AccountContext';
@@ -175,6 +176,8 @@ const Moderation: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.moderation.title)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.moderation.title)}</div>

src/pages/Settings/Muted.tsx

@@ -15,6 +15,7 @@ import { createStore } from 'solid-js/store';
 import { PrimalUser } from '../../types/primal';
 import Avatar from '../../components/Avatar/Avatar';
 import { hexToNpub } from '../../lib/keys';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 const Muted: Component = () => {
 
@@ -63,6 +64,8 @@ const Muted: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.muted.title)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.muted.title)}</div>

src/pages/Settings/Network.tsx

@@ -22,6 +22,7 @@ import ConfirmModal from '../../components/ConfirmModal/ConfirmModal';
 import { interpretBold } from '../../translationHelpers';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import HelpTip from '../../components/HelpTip/HelpTip';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 
 const Network: Component = () => {
@@ -172,6 +173,8 @@ const Network: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.network.title)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.network.title)}</div>

src/pages/Settings/Notifications.tsx

@@ -6,6 +6,7 @@ import { settings as t } from '../../translations';
 import PageCaption from '../../components/PageCaption/PageCaption';
 import { Link } from '@solidjs/router';
 import SettingsNotifications from '../../components/SettingsNotifications/SettingsNotifications';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 const Notifications: Component = () => {
 
@@ -13,6 +14,8 @@ const Notifications: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.notifications.title)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.notifications.title)}</div>

src/pages/Settings/Settings.tsx

@@ -12,14 +12,16 @@ import { Link, Outlet } from '@solidjs/router';
 import HomeSidebar from '../../components/HomeSidebar/HomeSidebar';
 import StickySidebar from '../../components/StickySidebar/StickySidebar';
 import SettingsSidebar from '../../components/SettingsSidebar/SettingsSidebar';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 const Settings: Component = () => {
 
   const intl = useIntl();
-  const settings = useSettingsContext();
 
   return (
     <div class={styles.settingsContainer}>
+      <PageTitle title={intl.formatMessage(t.title)} />
+
       <Wormhole to="search_section">
         <Search />
       </Wormhole>

src/pages/Settings/Zaps.tsx

@@ -6,6 +6,7 @@ import { settings as t } from '../../translations';
 import PageCaption from '../../components/PageCaption/PageCaption';
 import { Link } from '@solidjs/router';
 import SettingsZap from '../../components/SettingsZap/SettingsZap';
+import PageTitle from '../../components/PageTitle/PageTitle';
 
 const Zaps: Component = () => {
 
@@ -13,6 +14,8 @@ const Zaps: Component = () => {
 
   return (
     <div>
+      <PageTitle title={`${intl.formatMessage(t.zaps)} ${intl.formatMessage(t.title)}`} />
+
       <PageCaption>
         <Link href='/settings' >{intl.formatMessage(t.index.title)}</Link>:&nbsp;
         <div>{intl.formatMessage(t.zaps)}</div>

src/pages/Thread.tsx

@@ -18,6 +18,8 @@ import { useIntl } from '@cookbook/solid-intl';
 import Search from '../components/Search/Search';
 import { thread as t } from '../translations';
 import { setShowNav } from '../components/Layout/Layout';
+import { userName } from '../stores/profile';
+import PageTitle from '../components/PageTitle/PageTitle';
 
 
 const Thread: Component = () => {
@@ -129,6 +131,12 @@ const Thread: Component = () => {
 
   return (
     <div>
+      <PageTitle title={
+        intl.formatMessage(
+          t.pageTitle,
+          { name: userName(primaryNote()?.user) },
+        )}
+      />
 
       <Wormhole
         to="search_section"

src/translations.ts

@@ -349,6 +349,11 @@ export const explore = {
     defaultMessage: 'explore nostr',
     description: 'Generic caption for the explore page',
   },
+  pageTitle: {
+    id: 'explore.pageTitle',
+    defaultMessage: 'Explore Nostr',
+    description: 'Title of the explore page',
+  },
   title: {
     id: 'explore.title',
     defaultMessage: '{timeframe}: {scope}',
@@ -1372,6 +1377,11 @@ export const thread = {
     defaultMessage: 'People in this thread',
     description: 'Title of the Thread page sidebar',
   },
+  pageTitle: {
+    id: 'thread.page.title',
+    defaultMessage: 'Note by {name}',
+    description: 'Title of the Thread page sidebar',
+  },
 };
 
 export const toast = {