diff --git a/packages/app/src/Element/Feed/RootTabs.tsx b/packages/app/src/Element/Feed/RootTabs.tsx index af8c0346..4ef3bcaa 100644 --- a/packages/app/src/Element/Feed/RootTabs.tsx +++ b/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("following"); - +export function rootTabItems(base: string, pubKey: string | undefined, tags: Newest>) { 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("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} diff --git a/packages/app/src/Pages/Layout/Header.tsx b/packages/app/src/Pages/Layout/Header.tsx index adea3fc5..77ec54cf 100644 --- a/packages/app/src/Pages/Layout/Header.tsx +++ b/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(); + 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() {
- {showRootTabs && } - {!showRootTabs && ( + {isRootTab && } + {!isRootTab && (