ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Open last browse tab on back navigation

Browse Source
This commit is contained in:
schroda
2024-09-30 05:39:29 +02:00
parent f7e5388e2a
commit f3d187dc2d
2 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/tabs/TabsMenu.tsx
View File

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

37
src/screens/Browse.tsx
View File

@@ -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(() => {
setTitle(t('global.label.browse'));
}, [t]);
if (!tabSearchParam) {
setTabSearchParam(tabName, 'replaceIn');
}
return (
<TabsWrapper>
<TabsMenu
ref={tabsMenuRef}
variant="fullWidth"
value={tabNum}
tabsCount={2}
onChange={(e, newTab) => setTabNum(newTab)}
value={tabName}
onChange={(_, newTab) => setTabSearchParam(newTab, 'replaceIn')}
>
<Tab sx={{ textTransform: 'none' }} label={t('source.title_one')} />
<Tab sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
<Tab sx={{ textTransform: 'none' }} label={t('migrate.title')} />
<Tab value={Tabs.SOURCE} sx={{ textTransform: 'none' }} label={t('source.title_one')} />
<Tab value={Tabs.EXTENSIONS} sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
<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>