Merge remote-tracking branch 'nyanpasu/main'

src/components/base/base-dialog.tsx

@@ -8,6 +8,7 @@ import {
   type SxProps,
   type Theme,
 } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
 
 interface Props {
   title: ReactNode;
@@ -19,6 +20,7 @@ interface Props {
   disableFooter?: boolean;
   contentSx?: SxProps<Theme>;
   children?: ReactNode;
+  loading?: boolean;
   onOk?: () => void;
   onCancel?: () => void;
   onClose?: () => void;
@@ -40,6 +42,7 @@ export const BaseDialog: React.FC<Props> = (props) => {
     disableCancel,
     disableOk,
     disableFooter,
+    loading,
   } = props;
 
   return (
@@ -56,9 +59,13 @@ export const BaseDialog: React.FC<Props> = (props) => {
             </Button>
           )}
           {!disableOk && (
-            <Button variant="contained" onClick={props.onOk}>
+            <LoadingButton
+              loading={loading}
+              variant="contained"
+              onClick={props.onOk}
+            >
               {okBtn}
-            </Button>
+            </LoadingButton>
           )}
         </DialogActions>
       )}

src/components/base/base-page.tsx

@@ -23,11 +23,13 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
-        <section>
-          <div className="base-content" style={contentStyle} data-windrag>
-            {children}
-          </div>
-        </section>
+        <div className="base-container">
+          <section>
+            <div className="base-content" style={contentStyle} data-windrag>
+              {children}
+            </div>
+          </section>
+        </div>
       </div>
     </BaseErrorBoundary>
   );

src/components/layout/layout-item.tsx

@@ -15,7 +15,7 @@ export const LayoutItem = (props: LinkProps) => {
         selected={!!match}
         sx={[
           {
-            borderRadius: 2,
+            borderRadius: 8,
             textAlign: "center",
             "& .MuiListItemText-primary": { color: "text.secondary" },
           },

src/components/layout/use-custom-theme.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
-import { createTheme, Theme } from "@mui/material";
+import { alpha, createTheme, Theme } from "@mui/material";
 import { appWindow } from "@tauri-apps/api/window";
 import { atomThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
@@ -84,13 +84,19 @@ export const useCustomTheme = () => {
     }
 
     // css
+    const backgroundColor = mode === "light" ? "#ffffff" : "#121212";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
 
     const rootEle = document.documentElement;
+    rootEle.style.setProperty("--background-color", backgroundColor);
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);
     rootEle.style.setProperty("--primary-main", theme.palette.primary.main);
+    rootEle.style.setProperty(
+      "--background-color-alpha",
+      alpha(theme.palette.primary.main, 0.1)
+    );
 
     // inject css
     let style = document.querySelector("style#verge-theme");

src/components/profile/profile-viewer.tsx

@@ -40,6 +40,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
     const { t } = useTranslation();
     const [open, setOpen] = useState(false);
     const [openType, setOpenType] = useState<"new" | "edit">("new");
+    const [loading, setLoading] = useState(false);
 
     // file input
     const fileDataRef = useRef<string | null>(null);
@@ -87,6 +88,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
 
     const handleOk = useLockFn(
       formIns.handleSubmit(async (form) => {
+        setLoading(true);
         try {
           if (!form.type) throw new Error("`Type` should not be null");
           if (form.type === "remote" && !form.url) {
@@ -111,11 +113,13 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
             await patchProfile(form.uid, item);
           }
           setOpen(false);
+          setLoading(false);
           setTimeout(() => formIns.reset(), 500);
           fileDataRef.current = null;
           props.onChange();
         } catch (err: any) {
           Notice.error(err.message || err.toString());
+          setLoading(false);
         }
       })
     );
@@ -149,6 +153,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
         onClose={handleClose}
         onCancel={handleClose}
         onOk={handleOk}
+        loading={loading}
       >
         <Controller
           name="type"