note and profile titles in header

packages/app/src/Pages/Layout/Header.tsx

@@ -0,0 +1,80 @@
+import { useLocation } from "react-router-dom";
+import React, { useCallback, useEffect, useState } from "react";
+import classNames from "classnames";
+import { LogoHeader } from "@/Pages/Layout/LogoHeader";
+import { RootTabs } from "@/Element/Feed/RootTabs";
+import NotificationsHeader from "@/Pages/Layout/NotificationsHeader";
+import { NostrLink, NostrPrefix, parseNostrLink } from "@snort/system";
+import { bech32ToHex } from "@/SnortUtils";
+import { useEventFeed } from "@snort/system-react";
+import { FormattedMessage } from "react-intl";
+import DisplayName from "@/Element/User/DisplayName";
+
+export function Header() {
+  const location = useLocation();
+  const showRootTabs = location.pathname === "/";
+  const pageName = location.pathname.split("/")[1];
+  const [nostrLink, setNostrLink] = useState<NostrLink | undefined>();
+
+  const scrollUp = useCallback(() => {
+    window.scrollTo({ top: 0, behavior: "instant" });
+  }, []);
+
+  useEffect(() => {
+    try {
+      setNostrLink(parseNostrLink(pageName));
+    } catch (e) {
+      setNostrLink(undefined);
+    }
+  }, [pageName]);
+
+  let title: React.ReactNode = <span className="capitalize">{pageName}</span>;
+  if (nostrLink) {
+    if (nostrLink.type === NostrPrefix.Event || nostrLink.type === NostrPrefix.Note) {
+      title = <NoteTitle link={nostrLink} />;
+    } else if (nostrLink.type === NostrPrefix.PublicKey || nostrLink.type === NostrPrefix.Profile) {
+      title = <DisplayName pubkey={bech32ToHex(pageName)} />;
+    }
+  }
+
+  return (
+    <header
+      className={classNames(
+        { "md:hidden": pageName === "messages" },
+        "flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 z-10 bg-bg-color py-1 md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
+      )}>
+      <div className="md:hidden">
+        <LogoHeader showText={false} />
+      </div>
+      {showRootTabs && <RootTabs base="" />}
+      {!showRootTabs && (
+        <div
+          onClick={scrollUp}
+          className="cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">
+          {title}
+        </div>
+      )}
+      <div className="md:hidden">
+        <NotificationsHeader />
+      </div>
+    </header>
+  );
+}
+
+function NoteTitle({ link }: { link: NostrLink }) {
+  const ev = useEventFeed(link);
+
+  if (!ev.data?.pubkey) {
+    return <FormattedMessage defaultMessage="Note" id="qMePPG" />;
+  }
+
+  return (
+    <>
+      <FormattedMessage
+        defaultMessage="Note by {name}"
+        id="ALdW69"
+        values={{ name: <DisplayName pubkey={ev.data.pubkey} /> }}
+      />
+    </>
+  );
+}

packages/app/src/Pages/Layout/index.tsx

@@ -12,14 +12,11 @@ import { LoginUnlock } from "@/Element/PinPrompt";
 import useKeyboardShortcut from "@/Hooks/useKeyboardShortcut";
 import { LoginStore } from "@/Login";
 import NavSidebar from "./NavSidebar";
-import NotificationsHeader from "./NotificationsHeader";
 import RightColumn from "./RightColumn";
-import { LogoHeader } from "./LogoHeader";
 import useLoginFeed from "@/Feed/LoginFeed";
 import ErrorBoundary from "@/Element/ErrorBoundary";
 import Footer from "@/Pages/Layout/Footer";
-import { RootTabs } from "@/Element/Feed/RootTabs";
-import classNames from "classnames";
+import { Header } from "@/Pages/Layout/Header";
 
 export default function Index() {
   const location = useLocation();
@@ -66,37 +63,6 @@ export default function Index() {
   );
 }
 
-function Header() {
-  const location = useLocation();
-  const showRootTabs = location.pathname === "/";
-  const pageName = location.pathname.split("/")[1];
-  const scrollUp = useCallback(() => {
-    window.scrollTo({ top: 0, behavior: "instant" });
-  }, []);
-  return (
-    <header
-      className={classNames(
-        { "md:hidden": pageName === "messages" },
-        "flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 z-10 bg-bg-color py-1 md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
-      )}>
-      <div className="md:hidden">
-        <LogoHeader showText={false} />
-      </div>
-      {showRootTabs && <RootTabs base="" />}
-      {!showRootTabs && (
-        <div
-          onClick={scrollUp}
-          className="capitalize cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">
-          {pageName}
-        </div>
-      )}
-      <div className="md:hidden">
-        <NotificationsHeader />
-      </div>
-    </header>
-  );
-}
-
 function StalkerModal({ id }) {
   return (
     <div className="stalker" onClick={() => LoginStore.removeSession(id)}>

packages/app/src/lang.json

@@ -319,6 +319,9 @@
   "AIgmDy": {
     "defaultMessage": "Add up to 4 hashtags"
   },
+  "ALdW69": {
+    "defaultMessage": "Note by {name}"
+  },
   "AN0Z7Q": {
     "defaultMessage": "Muted Words"
   },
@@ -1361,6 +1364,9 @@
   "qDwvZ4": {
     "defaultMessage": "Unknown error"
   },
+  "qMePPG": {
+    "defaultMessage": "Note"
+  },
   "qMx1sA": {
     "defaultMessage": "Default Zap amount"
   },

packages/app/src/translations/en.json

@@ -105,6 +105,7 @@
   "ABAQyo": "Chats",
   "ADmfQT": "Parent",
   "AIgmDy": "Add up to 4 hashtags",
+  "ALdW69": "Note by {name}",
   "AN0Z7Q": "Muted Words",
   "ASRK0S": "This author has been muted",
   "Ai8VHU": "Unlimited note retention on Snort relay",
@@ -448,6 +449,7 @@
   "pzTOmv": "Followers",
   "qD9EUF": "Email <> DM bridge for your Snort nostr address",
   "qDwvZ4": "Unknown error",
+  "qMePPG": "Note",
   "qMx1sA": "Default Zap amount",
   "qUJTsT": "Blocked",
   "qZsKBR": "Renew {tier}",