Open last browse tab on back navigation

src/components/tabs/TabsMenu.tsx

@@ -25,10 +25,7 @@ const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
 }));
 
 export const TabsMenu = forwardRef(
-    (
+    ({ children, sx, ...props }: TabsProps, ref: ForwardedRef<HTMLDivElement | null>) => {
-        { children, tabsCount, sx, ...props }: TabsProps & { tabsCount: number },
-        ref: ForwardedRef<HTMLDivElement | null>,
-    ) => {
         const { appBarHeight } = useNavBarContext();
 
         return (

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<HTMLDivElement | null>(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<number>(0);
+    const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', StringParam, {});
+    const tabName = (tabSearchParam as Tabs) ?? Tabs.SOURCE;
 
-    useLayoutEffect(() => {
+    if (!tabSearchParam) {
-        setTitle(t('global.label.browse'));
+        setTabSearchParam(tabName, 'replaceIn');
-    }, [t]);
+    }
 
     return (
         <TabsWrapper>
             <TabsMenu
                 ref={tabsMenuRef}
                 variant="fullWidth"
-                value={tabNum}
+                value={tabName}
-                tabsCount={2}
+                onChange={(_, newTab) => setTabSearchParam(newTab, 'replaceIn')}
-                onChange={(e, newTab) => setTabNum(newTab)}
             >
-                <Tab sx={{ textTransform: 'none' }} label={t('source.title_one')} />
+                <Tab value={Tabs.SOURCE} sx={{ textTransform: 'none' }} label={t('source.title_one')} />
-                <Tab sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
+                <Tab value={Tabs.EXTENSIONS} sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
-                <Tab sx={{ textTransform: 'none' }} label={t('migrate.title')} />
+                <Tab value={Tabs.MIGRATE} sx={{ textTransform: 'none' }} label={t('migrate.title')} />
             </TabsMenu>
-            <TabPanel index={0} currentIndex={tabNum}>
+            <TabPanel index={Tabs.SOURCE} currentIndex={tabName}>
                 <Sources />
             </TabPanel>
-            <TabPanel index={1} currentIndex={tabNum}>
+            <TabPanel index={Tabs.EXTENSIONS} currentIndex={tabName}>
                 <Extensions tabsMenuHeight={tabsMenuHeight} />
             </TabPanel>
-            <TabPanel index={2} currentIndex={tabNum}>
+            <TabPanel index={Tabs.MIGRATE} currentIndex={tabName}>
                 <Migration tabsMenuHeight={tabsMenuHeight} />
             </TabPanel>
         </TabsWrapper>