Mantine v8 migration

Author: qu1ck

.prettierrc.yml

@@ -0,0 +1 @@
+tabWidth: 4

package-lock.json

@@ -31,6 +31,8 @@
     "@types/ua-parser-js": "^0.7.39",
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.4",
+    "cssnano": "^7.1.2",
     "eslint": "^9.38.0",
     "eslint-config-love": "^120.0.0",
     "eslint-plugin-import": "^2.32.0",
@@ -42,6 +44,9 @@
     "globals": "^16.4.0",
     "html-webpack-plugin": "^5.6.4",
     "mini-css-extract-plugin": "^2.9.4",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
+    "postcss-preset-mantine": "^1.18.0",
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",
@@ -54,12 +59,12 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@mantine/core": "^6.0.2",
-    "@mantine/dropzone": "^6.0.22",
-    "@mantine/form": "^6.0.22",
-    "@mantine/hooks": "^6.0.2",
-    "@mantine/modals": "^6.0.22",
-    "@mantine/notifications": "^6.0.22",
+    "@mantine/core": "^8.3.9",
+    "@mantine/dropzone": "^8.3.9",
+    "@mantine/form": "^8.3.9",
+    "@mantine/hooks": "^8.3.9",
+    "@mantine/modals": "^8.3.9",
+    "@mantine/notifications": "^8.3.9",
     "@popperjs/core": "^2.11.8",
     "@tanstack/react-query": "^4.42.0",
     "@tanstack/react-query-devtools": "^4.42.0",

package.json

@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+        "postcss-preset-mantine": {},
+    },
+};

postcss.config.mjs

@@ -21,7 +21,7 @@ import type { ServerConfig } from "../config";
 import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Server } from "../components/server";
 import { ClientManager } from "../clientmanager";
-import { ActionIcon, Box, Button, Flex, Menu, Stack, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, Box, Button, Flex, Menu, Stack, useComputedColorScheme } from "@mantine/core";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { queryClient } from "queries";
@@ -35,6 +35,9 @@ import { modKeyString } from "trutil";
 import { ColorSchemeToggle, FontSizeToggle, ShowVersion } from "./miscbuttons";
 import { AppSettingsModal } from "./modals/settings";
 import { ToolbarButton } from "./toolbar";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import "css/custom.css";
 
 const { appWindow, invoke, makeCreateTorrentView } = await import(/* webpackChunkName: "taurishim" */"taurishim");
 
@@ -45,7 +48,7 @@ interface PassEventData {
 
 function CreateTorrentButton() {
     const config = useContext(ConfigContext);
-    const { colorScheme } = useMantineColorScheme();
+    const colorScheme = useComputedColorScheme();
 
     useEffect(() => {
         const unlisten = appWindow.listen<PassEventData>("pass-from-window", ({ payload: data }) => {
@@ -83,7 +86,7 @@ function CreateTorrentButton() {
 export function App(props: React.PropsWithChildren) {
     return (
         <QueryClientProvider client={queryClient}>
-            <Notifications limit={5} style={{ bottom: "2.5rem" }} />
+            <Notifications limit={5}/>
             {props.children}
             <ReactQueryDevtools toggleButtonProps={{ style: { marginBottom: "2rem" } }} />
         </QueryClientProvider>
@@ -192,7 +195,7 @@ export default function TauriApp() {
                                     onClick={() => tabsRef.current?.openTab(s.name)}>{s.name}
                                 </Button>;
                             })}
-                            <Box sx={{ flexGrow: 1 }} />
+                            <Box style={{ flexGrow: 1 }} />
                             <Button onClick={serverConfigHandlers.open}>
                                 Configure servers
                             </Button>

src/components/app.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ActionIcon, ColorSwatch, Grid, Popover, useMantineTheme } from "@mantine/core";
+import { ActionIcon, ColorSwatch, Popover, useMantineTheme, Group, Button } from "@mantine/core";
 import type { ColorSetting } from "config";
 import React, { useState } from "react";
 
@@ -30,36 +30,32 @@ const shades = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 export default function ColorChooser(props: ColorChooserProps) {
     const theme = useMantineTheme();
     const [opened, setOpened] = useState(false);
-    const swatchOutline = theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.dark[6];
 
     return (
-        <Popover width="20rem" position="right-start" withArrow withinPortal shadow="md" opened={opened} onChange={setOpened} >
+        <Popover width="20rem" position="right-start" withArrow transitionProps={{ duration: 0 }} shadow="md" opened={opened} onChange={setOpened} >
             <Popover.Target>
-                <ActionIcon onClick={() => { setOpened((o) => !o); }}>
+                <ActionIcon variant="subtle" onClick={() => { setOpened((o) => !o); }}>
                     <ColorSwatch
-                        color={theme.colors[props.value.color][props.value.shade]}
-                        sx={{ border: `1px solid ${swatchOutline}` }} />
+                        color={theme.colors[props.value.color][props.value.shade]} />
                 </ActionIcon>
             </Popover.Target>
             <Popover.Dropdown>
-                <ActionIcon p="lg" onClick={() => {
+                <Button variant="subtle" p="lg" onClick={() => {
                     props.onChange(undefined);
                     setOpened(false);
                 }}>
                     Reset
-                </ActionIcon>
-                <Grid columns={10}>
-                    {Object.keys(theme.colors).map((color) => shades.map((shade) => (
-                        <Grid.Col key={`${color}:${shade}`} span={1} p="0.1rem">
-                            <ActionIcon onClick={() => {
+                </Button>
+                {Object.keys(theme.colors).map((color) =>
+                    <Group key={color} wrap="nowrap" gap="0">
+                        {shades.map((shade) =>
+                            <ActionIcon key={shade} m="0.1rem" variant="subtle" onClick={() => {
                                 props.onChange({ color, shade, computed: theme.colors[color][shade] });
                                 setOpened(false);
                             }}>
                                 <ColorSwatch color={theme.colors[color][shade]} />
-                            </ActionIcon>
-                        </Grid.Col>
-                    )))}
-                </Grid>
+                            </ActionIcon>)}
+                    </Group>)}
             </Popover.Dropdown>
         </Popover>
     );

src/components/colorchooser.tsx

@@ -0,0 +1,7 @@
+.contextMenuButton {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: 0;
+}

src/components/contextmenu.module.css

@@ -16,9 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { MenuProps, PortalProps } from "@mantine/core";
+import type { MenuProps } from "@mantine/core";
 import { Button, Menu, Portal, ScrollArea } from "@mantine/core";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
+import classes from "./contextmenu.module.css";
 
 export interface ContextMenuInfo {
     x: number,
@@ -40,61 +41,55 @@ export function useContextMenu(): [ContextMenuInfo, React.Dispatch<ContextMenuIn
 
 export interface ContextMenuProps extends MenuProps {
     contextMenuInfo: ContextMenuInfo,
-    containerRef?: PortalProps["innerRef"],
     closeOnClickOutside?: boolean,
+    autosize?: boolean,
     setContextMenuInfo: (i: ContextMenuInfo) => void,
 }
 
 export function ContextMenu({
     contextMenuInfo,
-    containerRef,
     closeOnClickOutside = true,
+    autosize,
     setContextMenuInfo,
     children,
     ...other
 }: ContextMenuProps) {
     const onClose = useCallback(
-        () => { setContextMenuInfo({ ...contextMenuInfo, opened: false }); },
-        [contextMenuInfo, setContextMenuInfo]);
-
-    const [opened, setOpened] = useState<boolean>(false);
-
-    useEffect(() => { setOpened(contextMenuInfo.opened); }, [contextMenuInfo.opened]);
+        () => {
+            setContextMenuInfo({ ...contextMenuInfo, opened: false });
+        }, [contextMenuInfo, setContextMenuInfo]);
 
     return (
         <Menu {...other}
-            opened={opened}
+            opened={contextMenuInfo.opened}
             onClose={onClose}
             offset={0}
             middlewares={{ shift: true, flip: true }}
             position="right-start"
+            transitionProps={{ duration: 0 }}
             closeOnClickOutside={closeOnClickOutside}
             zIndex={500}
         >
-            <Portal innerRef={containerRef}>
+            <Portal>
                 <Menu.Target>
                     <Button unstyled
-                        sx={{
-                            position: "absolute",
-                            width: 0,
-                            height: 0,
-                            padding: 0,
-                            border: 0,
-                        }}
+                        className={classes.contextMenuButton}
                         style={{
                             left: contextMenuInfo.x,
                             top: contextMenuInfo.y,
                         }} />
                 </Menu.Target>
                 <Menu.Dropdown>
-                    <ScrollArea.Autosize
-                        type="auto"
-                        mah="calc(100vh - 0.5rem)"
-                        offsetScrollbars
-                        styles={{ viewport: { paddingBottom: 0 } }}
-                    >
-                        {children}
-                    </ScrollArea.Autosize>
+                    {autosize === true
+                        ? <ScrollArea.Autosize
+                            type="auto"
+                            mah="calc(100vh - 0.5rem)"
+                            offsetScrollbars
+                            styles={{ viewport: { paddingBottom: 0 } }}
+                        >
+                            {children}
+                        </ScrollArea.Autosize>
+                        : children}
                 </Menu.Dropdown>
             </Portal>
         </Menu>

src/components/contextmenu.tsx

@@ -0,0 +1,13 @@
+.textAreaRoot {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.textAreaWrapper {
+    flex-grow: 1;
+}
+
+.textAreaInput {
+    height: 100%;
+}

src/components/createtorrentform.module.css

@@ -16,13 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { Styles, TextInputStylesNames } from "@mantine/core";
 import { Box, Button, Checkbox, Flex, Group, Slider, Text, TextInput, Textarea, useMantineColorScheme } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { appVersion } from "./modals/version";
 import { ProgressBar } from "./progressbar";
 import { bytesToHumanReadableStr } from "trutil";
+import classes from "./createtorrentform.module.css";
 const { appWindow, invoke, dialogOpen, dialogSave } = await import(/* webpackChunkName: "taurishim" */"taurishim");
 
 interface FormValues {
@@ -37,18 +37,10 @@ interface FormValues {
     version: string,
 }
 
-const textAreaStyles: Styles<TextInputStylesNames, Record<string, unknown>> = {
-    root: {
-        flexGrow: 1,
-        display: "flex",
-        flexDirection: "column",
-    },
-    wrapper: {
-        flexGrow: 1,
-    },
-    input: {
-        height: "100%",
-    },
+const textAreaClassNames = {
+    root: classes.textAreaRoot,
+    wrapper: classes.textAreaWrapper,
+    input: classes.textAreaInput,
 };
 
 const byteLabel = (b: number) => {
@@ -85,7 +77,7 @@ interface InfobarState {
 }
 
 export default function CreateTorrentForm() {
-    const { toggleColorScheme } = useMantineColorScheme();
+    const { setColorScheme } = useMantineColorScheme();
     const [defaultTrackers, setDefaultTrackers] = useState<string[]>([]);
     const [pieces, setPieces] = useState({
         done: 0,
@@ -114,11 +106,11 @@ export default function CreateTorrentForm() {
     useEffect(() => {
         void appWindow.once<PassEventData>("pass-from-window", ({ payload: data }) => {
             const { colorScheme, defaultTrackers } = JSON.parse(data.payload);
-            toggleColorScheme(colorScheme);
+            setColorScheme(colorScheme);
             setDefaultTrackers(defaultTrackers);
         });
         void invoke("pass_to_window", { to: "main", payload: "ready" });
-    }, [toggleColorScheme]);
+    }, [setColorScheme]);
 
     const { setFieldValue } = form;
 
@@ -245,12 +237,12 @@ export default function CreateTorrentForm() {
     const browseDisabled = ["calculating", "generating"].includes(state.state);
 
     return (
-        <Flex direction="column" h="100%" w="100%" p="lg" gap="lg">
+        <Flex direction="column" h="100%" w="100%" p="lg" gap="md">
             <Group align="flex-end">
                 <TextInput
                     label={"Select file or directory"}
                     {...form.getInputProps("path")}
-                    styles={{ root: { flexGrow: 1 } }}
+                    style={{ flexGrow: 1 }}
                     readOnly
                     autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" />
                 <Button onClick={onBrowseFile} disabled={browseDisabled}>File</Button>
@@ -263,6 +255,7 @@ export default function CreateTorrentForm() {
             <Text fz="sm">Piece size</Text>
             <Slider
                 pt="2.5rem"
+                mt="-0.5rem"
                 pb="0.5rem"
                 px="1rem"
                 scale={(v) => 2 ** v}
@@ -284,21 +277,21 @@ export default function CreateTorrentForm() {
                 label="Private torrent"
                 {...form.getInputProps("private", { type: "checkbox" })} />
             <Group align="flex-end">
-                <Box sx={{ flexGrow: 1 }}>Tracker list, one per line, empty line between tiers</Box>
+                <Box style={{ flexGrow: 1 }}>Tracker list, one per line, empty line between tiers</Box>
                 <Button onClick={addDefaultTrackers}>Add default list</Button>
             </Group>
             <Textarea
-                styles={textAreaStyles}
+                classNames={textAreaClassNames}
                 value={form.values.announceList.join("\n")}
                 onChange={(e) => { form.setFieldValue("announceList", e.target.value.split("\n")); }} />
             <Textarea
-                styles={textAreaStyles}
+                classNames={textAreaClassNames}
                 label="Web seed URLs, one per line"
                 value={form.values.urlList.join("\n")}
                 onChange={(e) => { form.setFieldValue("urlList", e.target.value.split("\n")); }} />
             <Box h="1.5rem">
                 {state.state === "error" &&
-                    <Text color="red">{state.error}</Text>}
+                    <Text c="red">{state.error}</Text>}
                 {state.state === "calculating" &&
                     <Text>Calculating sizes...</Text>}
                 {state.state === "sizes" &&
@@ -316,7 +309,7 @@ export default function CreateTorrentForm() {
                 {state.state === "done" &&
                     <Text>{`Torrent infohash: ${state.hash}`}</Text>}
             </Box>
-            <Group position="center">
+            <Group justify="center">
                 {(["idle", "error", "calculating", "sizes"].includes(state.state)) &&
                     <Button miw="10rem" onClick={onGenerate} disabled={state.state === "calculating"}>Generate</Button>}
                 {state.state === "generating" &&