feed selector on all feed pages

packages/app/src/Element/Feed/RootTabs.tsx

@@ -1,11 +1,12 @@
 import "./RootTabs.css";
-import { useState, ReactNode, useEffect } from "react";
+import { useState, ReactNode, useEffect, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Menu, MenuItem } from "@szhsin/react-menu";
 import { FormattedMessage } from "react-intl";
 
 import useLogin from "@/Hooks/useLogin";
 import Icon from "@/Icons/Icon";
+import { Newest } from "@/Login";
 
 export type RootTab =
   | "following"
@@ -16,12 +17,7 @@ export type RootTab =
   | "tags"
   | "global";
 
-export function RootTabs({ base }: { base?: string }) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { publicKey: pubKey, tags } = useLogin();
-  const [rootType, setRootType] = useState<RootTab>("following");
-
+export function rootTabItems(base: string, pubKey: string | undefined, tags: Newest<Array<string>>) {
   const menuItems = [
     {
       tab: "following",
@@ -117,13 +113,24 @@ export function RootTabs({ base }: { base?: string }) {
     show: boolean;
     element: ReactNode;
   }>;
+  return menuItems;
+}
+
+export function RootTabs({ base }: { base?: string }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { publicKey: pubKey, tags } = useLogin();
+  const [rootType, setRootType] = useState<RootTab>("following");
+
+  const menuItems = useMemo(() => rootTabItems(base, pubKey, tags), [base, pubKey, tags]);
 
   useEffect(() => {
-    const currentTab = menuItems.find(a => a.path === location.pathname)?.tab;
+    const pathname = location.pathname === "/" ? `${base}/notes` : location.pathname;
+    const currentTab = menuItems.find(a => a.path === pathname)?.tab;
     if (currentTab) {
       setRootType(currentTab);
     }
-  }, [location]);
+  }, [location, menuItems]);
 
   function currentMenuItem() {
     if (location.pathname.startsWith(`${base}/t/`)) {
@@ -160,6 +167,7 @@ export function RootTabs({ base }: { base?: string }) {
               key={a.tab}
               onClick={() => {
                 navigate(a.path);
+                window.scrollTo({ top: 0, behavior: "instant" });
               }}>
               {a.element}
             </MenuItem>

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

@@ -1,20 +1,25 @@
 import { useLocation } from "react-router-dom";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { LogoHeader } from "@/Pages/Layout/LogoHeader";
-import { RootTabs } from "@/Element/Feed/RootTabs";
+import { rootTabItems, 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";
+import useLogin from "@/Hooks/useLogin";
 
 export function Header() {
   const location = useLocation();
-  const showRootTabs = location.pathname === "/";
   const pageName = location.pathname.split("/")[1];
   const [nostrLink, setNostrLink] = useState<NostrLink | undefined>();
+  const { publicKey, tags } = useLogin();
+
+  const isRootTab = useMemo(() => {
+    return location.pathname === "/" || rootTabItems("", publicKey, tags).some(item => item.path === location.pathname);
+  }, [location.pathname, publicKey, tags]);
 
   const scrollUp = useCallback(() => {
     window.scrollTo({ top: 0, behavior: "instant" });
@@ -46,8 +51,8 @@ export function Header() {
       <div className="md:hidden">
         <LogoHeader showText={false} />
       </div>
-      {showRootTabs && <RootTabs base="" />}
-      {!showRootTabs && (
+      {isRootTab && <RootTabs base="" />}
+      {!isRootTab && (
         <div
           onClick={scrollUp}
           className="cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">