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

Add "ui login" support

Browse Source
This commit is contained in:
schroda
2025-07-27 00:03:51 +02:00
parent 403cab7d80
commit 4aad410957
33 changed files with 1270 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/base/AppRoute.constants.ts
View File

@@ -38,13 +38,23 @@ export const AppRoutes = {
matchAll: {
match: '*',
},
authentication: {
match: 'auth',
path: '/auth',
childRoutes: {
login: {
match: 'login',
path: '/auth/login',
},
},
},
about: {
match: 'about',
path: '/about',
},
settings: {
path: '/settings',
match: 'settings',
path: '/settings',
childRoutes: {
categories: {
match: 'categories',

1
src/base/Base.types.ts
View File

@@ -71,4 +71,5 @@ export enum ScrollDirection {
export enum SearchParam {
TAB = 'tab',
QUERY = 'query',
REDIRECT = 'redirect',
}

30
src/base/components/AvatarSpinner.tsx Normal file
View File

@@ -0,0 +1,30 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Avatar, { AvatarProps } from '@mui/material/Avatar';
import { SpinnerImage, SpinnerImageProps } from '@/base/components/SpinnerImage.tsx';
export const AvatarSpinner = ({
iconUrl,
alt,
slots,
}: {
iconUrl: string;
alt: string;
slots?: { avatarProps?: Partial<AvatarProps>; spinnerImageProps?: Partial<SpinnerImageProps> };
}) => (
<Avatar variant="rounded" alt={alt} {...slots?.avatarProps}>
<SpinnerImage
alt={alt}
src={iconUrl}
{...slots?.spinnerImageProps}
spinnerStyle={{ small: true, ...slots?.spinnerImageProps?.spinnerStyle }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%', ...slots?.spinnerImageProps?.imgStyle }}
/>
</Avatar>
);

54
src/base/components/lists/cards/ListCardAvatar.tsx
View File

@@ -6,36 +6,28 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Avatar, { AvatarProps } from '@mui/material/Avatar';
import { SpinnerImage, SpinnerImageProps } from '@/base/components/SpinnerImage.tsx';
import { ComponentProps } from 'react';
import { AvatarSpinner } from '@/base/components/AvatarSpinner.tsx';
export const ListCardAvatar = ({
iconUrl,
alt,
slots,
}: {
iconUrl: string;
alt: string;
slots?: { avatarProps?: Partial<AvatarProps>; spinnerImageProps?: Partial<SpinnerImageProps> };
}) => (
<Avatar
variant="rounded"
alt={alt}
{...slots?.avatarProps}
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
background: 'transparent',
...slots?.avatarProps?.sx,
}}
>
<SpinnerImage
alt={alt}
src={iconUrl}
{...slots?.spinnerImageProps}
spinnerStyle={{ small: true, ...slots?.spinnerImageProps?.spinnerStyle }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%', ...slots?.spinnerImageProps?.imgStyle }}
export const ListCardAvatar = (props: ComponentProps<typeof AvatarSpinner>) => {
const { slots } = props;
return (
<AvatarSpinner
{...props}
slots={{
...slots,
avatarProps: {
...slots?.avatarProps,
sx: {
width: 56,
height: 56,
flex: '0 0 auto',
background: 'transparent',
...slots?.avatarProps?.sx,
},
},
}}
/>
</Avatar>
);
);
};

57
src/base/contexts/AppContext.tsx
View File

@@ -19,37 +19,40 @@ import { SnackbarWithDescription } from '@/base/components/feedback/SnackbarWith
import { AppPageHistoryContextProvider } from '@/base/contexts/AppPageHistoryContext.tsx';
import { AppThemeContextProvider } from '@/features/theme/AppThemeContext.tsx';
import { NavBarContextProvider } from '@/features/navigation-bar/NavbarContext.tsx';
import { SessionContextProvider } from '@/features/authentication/SessionContext.tsx';
interface Props {
children: React.ReactNode;
}
export const AppContext: React.FC<Props> = ({ children }) => (
<Router>
<StyledEngineProvider injectFirst>
<AppThemeContextProvider>
<QueryParamProvider adapter={ReactRouter6Adapter}>
<NavBarContextProvider>
<AppPageHistoryContextProvider>
<ActiveDeviceContextProvider>
<SnackbarProvider
Components={{
default: SnackbarWithDescription,
info: SnackbarWithDescription,
success: SnackbarWithDescription,
warning: SnackbarWithDescription,
error: SnackbarWithDescription,
}}
>
<ReaderContextProvider>
<AppHotkeysProvider>{children}</AppHotkeysProvider>
</ReaderContextProvider>
</SnackbarProvider>
</ActiveDeviceContextProvider>
</AppPageHistoryContextProvider>
</NavBarContextProvider>
</QueryParamProvider>
</AppThemeContextProvider>
</StyledEngineProvider>
</Router>
<SessionContextProvider>
<Router>
<StyledEngineProvider injectFirst>
<AppThemeContextProvider>
<QueryParamProvider adapter={ReactRouter6Adapter}>
<NavBarContextProvider>
<AppPageHistoryContextProvider>
<ActiveDeviceContextProvider>
<SnackbarProvider
Components={{
default: SnackbarWithDescription,
info: SnackbarWithDescription,
success: SnackbarWithDescription,
warning: SnackbarWithDescription,
error: SnackbarWithDescription,
}}
>
<ReaderContextProvider>
<AppHotkeysProvider>{children}</AppHotkeysProvider>
</ReaderContextProvider>
</SnackbarProvider>
</ActiveDeviceContextProvider>
</AppPageHistoryContextProvider>
</NavBarContextProvider>
</QueryParamProvider>
</AppThemeContextProvider>
</StyledEngineProvider>
</Router>
</SessionContextProvider>
);