back button in header

packages/app/src/Element/Event/Thread.tsx

@@ -307,11 +307,6 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
     id: "ADmfQT",
     description: "Link to parent note in thread",
   });
-  const backText = formatMessage({
-    defaultMessage: "Back",
-    id: "jfV8Wr",
-    description: "Navigate back button on threads view",
-  });
 
   const debug = window.location.search.includes("debug=true");
   return (
@@ -336,9 +331,11 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
           <pre>{JSON.stringify(thread.reactions, undefined, "  ")}</pre>
         </div>
       )}
+      {parent && (
         <div className="main-content p">
-        <BackButton onClick={goBack} text={parent ? parentText : backText} />
+          <BackButton onClick={goBack} text={parentText} />
         </div>
+      )}
       <div className="main-content">
         {thread.root && renderRoot(thread.root)}
         {thread.root && renderChain(chainKey(thread.root))}

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

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { LogoHeader } from "@/Pages/Layout/LogoHeader";
@@ -10,8 +10,10 @@ import { useEventFeed } from "@snort/system-react";
 import { FormattedMessage } from "react-intl";
 import DisplayName from "@/Element/User/DisplayName";
 import useLogin from "@/Hooks/useLogin";
+import Icon from "@/Icons/Icon";
 
 export function Header() {
+  const navigate = useNavigate();
   const location = useLocation();
   const pageName = location.pathname.split("/")[1];
   const [nostrLink, setNostrLink] = useState<NostrLink | undefined>();
@@ -33,6 +35,16 @@ export function Header() {
     }
   }, [pageName]);
 
+  const handleBackButtonClick = () => {
+    const idx = window.history.state?.idx;
+    if (idx === undefined || idx > 0) {
+      navigate(-1);
+    } else {
+      navigate("/");
+    }
+  };
+  const showBackButton = location.pathname !== "/" && !isRootTab;
+
   let title: React.ReactNode = <span className="capitalize">{pageName}</span>;
   if (location.pathname.startsWith("/search/")) {
     const searchTerm = location.pathname.split("/search/")[1];
@@ -59,11 +71,17 @@ export function Header() {
     <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",
+        "flex justify-between items-center self-stretch gap-6 sticky top-0 z-10 bg-bg-color md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
       )}>
-      <div className="md:hidden">
+      {showBackButton ? (
+        <span onClick={handleBackButtonClick} className="p-3 cursor-pointer">
+          <Icon name="arrowBack" />
+        </span>
+      ) : (
+        <div className="md:hidden p-3">
           <LogoHeader showText={false} />
         </div>
+      )}
       {isRootTab && <RootTabs base="" />}
       {!isRootTab && (
         <div
@@ -72,7 +90,7 @@ export function Header() {
           {title}
         </div>
       )}
-      <div className="md:hidden">
+      <div className="md:invisible">
         <NotificationsHeader />
       </div>
     </header>

packages/app/src/lang.json

@@ -1227,10 +1227,6 @@
   "jTrbGf": {
     "defaultMessage": "{n} km - {location}"
   },
-  "jfV8Wr": {
-    "defaultMessage": "Back",
-    "description": "Navigate back button on threads view"
-  },
   "jvo0vs": {
     "defaultMessage": "Save"
   },

packages/app/src/translations/en.json

@@ -404,7 +404,6 @@
   "jHa/ko": "Clean up your feed",
   "jMzO1S": "Internal error: {msg}",
   "jTrbGf": "{n} km - {location}",
-  "jfV8Wr": "Back",
   "jvo0vs": "Save",
   "jzgQ2z": "{n} Reactions",
   "k2veDA": "Write",