Add "ui login" support

src/base/components/AvatarSpinner.tsx

@@ -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>
+);

src/base/components/lists/cards/ListCardAvatar.tsx

@@ -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>
-);
+    );
+};