diff --git a/src/components/tabs/TabsMenu.tsx b/src/components/tabs/TabsMenu.tsx index 63c8eddb..1baa5ae6 100644 --- a/src/components/tabs/TabsMenu.tsx +++ b/src/components/tabs/TabsMenu.tsx @@ -25,10 +25,7 @@ const StyledTabsMenu = styled(Tabs)(({ theme }) => ({ })); export const TabsMenu = forwardRef( - ( - { children, tabsCount, sx, ...props }: TabsProps & { tabsCount: number }, - ref: ForwardedRef, - ) => { + ({ children, sx, ...props }: TabsProps, ref: ForwardedRef) => { const { appBarHeight } = useNavBarContext(); return ( diff --git a/src/screens/Browse.tsx b/src/screens/Browse.tsx index 10527234..bcf40f00 100644 --- a/src/screens/Browse.tsx +++ b/src/screens/Browse.tsx @@ -9,6 +9,7 @@ import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react'; import Tab from '@mui/material/Tab'; import { useTranslation } from 'react-i18next'; +import { StringParam, useQueryParam } from 'use-query-params'; import { Sources } from '@/screens/Sources'; import { Extensions } from '@/screens/Extensions'; import { TabPanel } from '@/components/tabs/TabPanel.tsx'; @@ -18,10 +19,20 @@ import { Migration } from '@/screens/Migration.tsx'; import { NavBarContext } from '@/components/context/NavbarContext.tsx'; import { useResizeObserver } from '@/util/useResizeObserver.tsx'; +enum Tabs { + SOURCE = 'source', + EXTENSIONS = 'extensions', + MIGRATE = 'migrate', +} + export function Browse() { const { t } = useTranslation(); const { setTitle } = useContext(NavBarContext); + useLayoutEffect(() => { + setTitle(t('global.label.browse')); + }, [t]); + const tabsMenuRef = useRef(null); const [tabsMenuHeight, setTabsMenuHeight] = useState(0); useResizeObserver( @@ -29,32 +40,32 @@ export function Browse() { useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef.current]), ); - const [tabNum, setTabNum] = useState(0); + const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', StringParam, {}); + const tabName = (tabSearchParam as Tabs) ?? Tabs.SOURCE; - useLayoutEffect(() => { - setTitle(t('global.label.browse')); - }, [t]); + if (!tabSearchParam) { + setTabSearchParam(tabName, 'replaceIn'); + } return ( setTabNum(newTab)} + value={tabName} + onChange={(_, newTab) => setTabSearchParam(newTab, 'replaceIn')} > - - - + + + - + - + - +