feat: improve profile UI/UX and migrate to Mantine modals

This commit is contained in:
bipproduction
2026-02-07 15:05:28 +08:00
parent b9abcaadde
commit 718e7603d1
14 changed files with 752 additions and 760 deletions

View File

@@ -7,14 +7,12 @@
/** biome-ignore-all lint/style/noNonNullAssertion: <explanation */
/** biome-ignore-all lint/suspicious/noAssignInExpressions: <explanation */
import { MantineProvider } from "@mantine/core";
import { RouterProvider } from "@tanstack/react-router";
import { createTheme, MantineProvider } from "@mantine/core";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { Inspector } from "react-dev-inspector";
import { createRoot } from "react-dom/client";
import { createTheme } from "@mantine/core";
import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { ModalsProvider } from "@mantine/modals";
// Create a new router instance
export const router = createRouter({
@@ -29,45 +27,46 @@ declare module "@tanstack/react-router" {
}
}
const theme = createTheme({
/** Theme customization here */
/** Theme customization here */
});
const InspectorWrapper = import.meta.env.DEV
? Inspector
: ({ children }: { children: React.ReactNode }) => <>{children}</>;
? Inspector
: ({ children }: { children: React.ReactNode }) => <>{children}</>;
const elem = document.getElementById("root")!;
const app = (
<InspectorWrapper
keys={["shift", "a"]}
onClickElement={(e) => {
if (!e.codeInfo) return;
<InspectorWrapper
keys={["shift", "a"]}
onClickElement={(e) => {
if (!e.codeInfo) return;
const url = import.meta.env.VITE_PUBLIC_URL;
fetch(`${url}/__open-in-editor`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
relativePath: e.codeInfo.relativePath,
lineNumber: e.codeInfo.lineNumber,
columnNumber: e.codeInfo.columnNumber,
}),
});
}}
>
<MantineProvider theme={theme}>
<RouterProvider router={router} />
</MantineProvider>
</InspectorWrapper>
const url = import.meta.env.VITE_PUBLIC_URL;
fetch(`${url}/__open-in-editor`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
relativePath: e.codeInfo.relativePath,
lineNumber: e.codeInfo.lineNumber,
columnNumber: e.codeInfo.columnNumber,
}),
});
}}
>
<MantineProvider theme={theme}>
<ModalsProvider>
<RouterProvider router={router} />
</ModalsProvider>
</MantineProvider>
</InspectorWrapper>
);
if (import.meta.hot) {
// With hot module reloading, `import.meta.hot.data` is persisted.
const root = (import.meta.hot.data.root ??= createRoot(elem));
root.render(app);
// With hot module reloading, `import.meta.hot.data` is persisted.
const root = (import.meta.hot.data.root ??= createRoot(elem));
root.render(app);
} else {
// The hot module reloading API is not available in production.
createRoot(elem).render(app);
// The hot module reloading API is not available in production.
createRoot(elem).render(app);
}