migrate to mantine v7 (fixes #71)

package.json

@@ -18,12 +18,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hello-pangea/dnd": "^16.3.0",
-    "@mantine/core": "^6.0.13",
-    "@mantine/dates": "^6.0.13",
-    "@mantine/form": "^6.0.13",
-    "@mantine/hooks": "^6.0.13",
-    "@mantine/notifications": "^6.0.13",
-    "@mantine/tiptap": "^6.0.13",
+    "@mantine/core": "^7.3.1",
+    "@mantine/dates": "^7.3.1",
+    "@mantine/form": "^7.3.1",
+    "@mantine/hooks": "^7.3.1",
+    "@mantine/notifications": "^7.3.1",
+    "@mantine/tiptap": "^7.3.1",
+    "@mantine/vanilla-extract": "^7.3.1",
     "@tabler/icons-react": "^2.22.0",
     "@tauri-apps/api": "^1.5.0",
     "@tiptap/extension-link": "2.1.13",
@@ -36,12 +37,13 @@
     "chess.js": "1.0.0-beta.6",
     "chessground": "^8.3.10",
     "chessops": "^0.12.8",
+    "clsx": "^2.0.0",
     "dayjs": "^1.11.8",
     "fast-deep-equal": "^3.1.3",
     "fuse.js": "^6.6.2",
     "jotai": "^2.2.1",
-    "mantine-datatable": "^6.0.5",
-    "mantine-flagpack": "^2.0.0",
+    "mantine-datatable": "^7.1.7",
+    "mantine-flagpack": "^4.0.0",
     "react": "^18.2.0",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -1,20 +1,19 @@
 import {
+  ActionIcon,
   Anchor,
   AppShell,
   Button,
   Code,
-  ColorScheme,
-  ColorSchemeProvider,
   CopyButton,
   Group,
   MantineProvider,
   Stack,
   Text,
   Title,
+  localStorageColorSchemeManager,
 } from "@mantine/core";
 import { SideBar } from "./components/Sidebar";
 import { Helmet } from "react-helmet";
-import { useLocalStorage } from "@mantine/hooks";
 import { Notifications } from "@mantine/notifications";
 import SettingsPage from "@/components/settings/SettingsPage";
 import FilesPage from "@/components/files/FilesPage";
@@ -48,30 +47,53 @@ import {
 
 import "@/styles/chessgroundBaseOverride.css";
 import "@/styles/chessgroundColorsOverride.css";
+
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import "@mantine/dates/styles.css";
+import "@mantine/tiptap/styles.css";
+
+import "mantine-datatable/styles.css";
+
+import "@/styles/global.css";
+
 import { commands } from "./bindings";
 import TopBar from "./components/TopBar";
 import { openFile } from "./utils/files";
 
+const colorSchemeManager = localStorageColorSchemeManager({
+  key: "mantine-color-scheme",
+});
+
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route
       path="/"
       element={
         <AppShell
-          navbar={<SideBar />}
-          header={<TopBar />}
-          styles={(theme) => ({
+          navbar={{
+            width: "3rem",
+            breakpoint: "lg",
+          }}
+          header={{
+            height: "2.5rem",
+          }}
+          styles={{
             main: {
               height: "100vh",
               userSelect: "none",
-              backgroundColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors.dark[8]
-                  : theme.colors.gray[0],
             },
-          })}
+          }}
         >
-          <Outlet />
+          <AppShell.Header>
+            <TopBar />
+          </AppShell.Header>
+          <AppShell.Navbar>
+            <SideBar />
+          </AppShell.Navbar>
+          <AppShell.Main>
+            <Outlet />
+          </AppShell.Main>
         </AppShell>
       }
       errorElement={<ErrorBoundary />}
@@ -102,6 +124,7 @@ const router = createBrowserRouter(
           return null;
         }}
       />
+
       <Route
         path="databases/view"
         element={<DatabaseView />}
@@ -125,7 +148,7 @@ function ErrorBoundary() {
   const error = useRouteError();
 
   return (
-    <Stack pt="md">
+    <Stack p="md">
       <Title>An error ocurred</Title>
       {error instanceof Error && (
         <>
@@ -173,13 +196,7 @@ function ErrorBoundary() {
 }
 
 export default function App() {
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-    key: "mantine-color-scheme",
-    defaultValue: "dark",
-  });
   const primaryColor = useAtomValue(primaryColorAtom);
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
   const pieceSet = useAtomValue(pieceSetAtom);
   const [, setTabs] = useAtom(tabsAtom);
   const [, setActiveTab] = useAtom(activeTabAtom);
@@ -210,75 +227,41 @@ export default function App() {
   }, [fontSize]);
 
   return (
-    <ColorSchemeProvider
-      colorScheme={colorScheme}
-      toggleColorScheme={toggleColorScheme}
-    >
+    <>
       <Helmet>
         <link rel="stylesheet" href={`/pieces/${pieceSet}.css`} />
       </Helmet>
       <MantineProvider
-        withGlobalStyles
-        withNormalizeCSS
+        colorSchemeManager={colorSchemeManager}
         theme={{
-          colorScheme,
           primaryColor,
-          globalStyles: (theme) => ({
-            "cg-board": {
-              "square.last-move": {
-                background: theme.fn.rgba(
-                  theme.colors[theme.primaryColor][
-                    theme.colorScheme === "dark" ? 5 : 3
-                  ],
-                  0.4
-                ),
-              },
-              "square.selected": {
-                backgroundColor: theme.fn.rgba(
-                  theme.colors[theme.primaryColor][
-                    theme.colorScheme === "dark" ? 5 : 3
-                  ],
-                  0.5
-                ),
-              },
-              "square.move-dest": {
-                backgroundColor: theme.fn.rgba(theme.black, 0.3),
-                borderRadius: "50%",
-                padding: "4%",
-                backgroundClip: "content-box",
-                boxSizing: "border-box",
-                ":hover": {
-                  backgroundColor: theme.fn.rgba(
-                    theme.colors[theme.primaryColor][
-                      theme.colorScheme === "dark" ? 5 : 3
-                    ],
-                    0.6
-                  ),
-                  borderRadius: 0,
-                  padding: 0,
-                },
+          components: {
+            ActionIcon: ActionIcon.extend({
+              defaultProps: {
+                variant: "transparent",
+                color: "gray",
               },
-              "square.oc.move-dest": {
-                background: "none",
-                border: `5px solid ${theme.fn.rgba(theme.black, 0.3)}`,
-                borderRadius: 0,
-                ":hover": {
-                  background: theme.fn.rgba(
-                    theme.colors[theme.primaryColor][
-                      theme.colorScheme === "dark" ? 5 : 3
-                    ],
-                    0.6
-                  ),
-                  borderRadius: 0,
-                },
-              },
-            },
-          }),
+            }),
+          },
+          colors: {
+            dark: [
+              "#C1C2C5",
+              "#A6A7AB",
+              "#909296",
+              "#5c5f66",
+              "#373A40",
+              "#2C2E33",
+              "#25262b",
+              "#1A1B1E",
+              "#141517",
+              "#101113",
+            ],
+          },
         }}
       >
         <Notifications />
         <RouterProvider router={router} />
       </MantineProvider>
-    </ColorSchemeProvider>
+    </>
   );
 }

src/components/Sidebar.css.ts

@@ -0,0 +1,37 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "@/styles/theme";
+
+export const link = style({
+    width: "3rem",
+    height: "3rem",
+    display: "flex",
+    alignItems: "center",
+    borderLeft: "3px solid transparent",
+    borderRight: "3px solid transparent",
+    justifyContent: "center",
+    [vars.lightSelector]: {
+        color: vars.colors.gray[7],
+    },
+    [vars.darkSelector]: {
+        color: vars.colors.dark[0],
+    },
+
+    ":hover": {
+        [vars.lightSelector]: {
+            color: vars.colors.dark[5],
+        },
+        [vars.darkSelector]: {
+            color: vars.colors.gray[0],
+        },
+    },
+});
+
+export const active = style({
+    borderLeftColor: vars.colors.primary,
+    [vars.lightSelector]: {
+        color: vars.colors.dark[5],
+    },
+    [vars.darkSelector]: {
+        color: vars.colors.white,
+    },
+});

src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { createStyles, Navbar, Stack, Tooltip } from "@mantine/core";
+import { AppShellSection, Stack, Tooltip } from "@mantine/core";
 import {
   Icon,
   IconChess,
@@ -9,36 +9,8 @@ import {
   IconUser,
 } from "@tabler/icons-react";
 import { NavLink } from "react-router-dom";
-
-const useStyles = createStyles((theme) => ({
-  link: {
-    width: "3rem",
-    height: "3rem",
-    display: "flex",
-    alignItems: "center",
-    borderLeft: "3px solid transparent",
-    borderRight: "3px solid transparent",
-    justifyContent: "center",
-    color:
-      theme.colorScheme === "dark"
-        ? theme.colors.dark[0]
-        : theme.colors.gray[7],
-
-    "&:hover": {
-      color:
-        theme.colorScheme === "dark"
-          ? theme.colors.gray[0]
-          : theme.colors.dark[5],
-    },
-  },
-
-  active: {
-    "&, &:hover": {
-      borderLeftColor: theme.colors[theme.primaryColor],
-      color: theme.colorScheme === "dark" ? theme.white : theme.colors.dark[5],
-    },
-  },
-}));
+import * as classes from "./Sidebar.css";
+import cx from "clsx";
 
 interface NavbarLinkProps {
   icon: Icon;
@@ -48,7 +20,6 @@ interface NavbarLinkProps {
 }
 
 function NavbarLink({ url, icon: Icon, label }: NavbarLinkProps) {
-  const { classes, cx } = useStyles();
   return (
     <Tooltip label={label} position="right">
       <NavLink
@@ -83,17 +54,17 @@ export function SideBar() {
   ));
 
   return (
-    <Navbar width={{ base: "3rem" }}>
-      <Navbar.Section grow>
-        <Stack justify="center" spacing={0}>
+    <>
+      <AppShellSection grow>
+        <Stack justify="center" gap={0}>
           {links}
         </Stack>
-      </Navbar.Section>
-      <Navbar.Section>
-        <Stack justify="center" spacing={0}>
+      </AppShellSection>
+      <AppShellSection>
+        <Stack justify="center" gap={0}>
           <NavbarLink icon={IconSettings} label="Settings" url="/settings" />
         </Stack>
-      </Navbar.Section>
-    </Navbar>
+      </AppShellSection>
+    </>
   );
 }

src/components/TopBar.css.ts

@@ -0,0 +1,17 @@
+import { vars } from "@/styles/theme";
+import { style } from "@vanilla-extract/css";
+
+export const icon = style({
+    transition: "background-color 100ms ease",
+    ":hover": {
+        backgroundColor: vars.colors.dark[5],
+    },
+});
+
+export const close = style({
+    transition: "background-color 100ms ease",
+    ":hover": {
+        backgroundColor: vars.colors.red[7],
+        color: vars.colors.white,
+    },
+});