Merge branch 'dev' into agent/124231b2

Replace mantine-react-table@2.0.0-beta.9 with mantine-react-table-open@9.0.3
(aliased via npm:) which properly supports Mantine v9's Collapse `expanded`
prop (renamed from `in`). Also extract hooks out of renderTopToolbarCustomActions
to fix a React rules-of-hooks violation.

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { DirectionProvider, MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { DirectionProvider, MantineProvider } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -18,12 +18,7 @@ export const CustomMantineProvider = ({
   const manager = useColorSchemeManager();
   return (
     <DirectionProvider>
-      <MantineProvider
+      <MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
-        defaultColorScheme={defaultColorScheme}
-        colorSchemeManager={manager}
-        theme={theme}
-        cssVariablesResolver={v8CssVariablesResolver}
-      >
         {children}
       </MantineProvider>
     </DirectionProvider>

apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx

@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -33,12 +33,7 @@ export const BoardMantineProvider = ({
   });
 
   return (
-    <MantineProvider
+    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
-      defaultColorScheme={defaultColorScheme}
-      theme={theme}
-      colorSchemeManager={colorSchemeManager}
-      cssVariablesResolver={v8CssVariablesResolver}
-    >
       {children}
     </MantineProvider>
   );

packages/translation/src/lang/en.json

@@ -1405,9 +1405,6 @@
         "openNewTab": {
           "label": "Open in new tab"
         },
-        "withBorder": {
-          "label": "Show border"
-        },
         "items": {
           "label": "Bookmarks",
           "add": "Add bookmark"

packages/widgets/src/bookmarks/component.tsx

@@ -16,7 +16,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
   const board = useRequiredBoard();
   const [data] = clientApi.app.byIds.useSuspenseQuery(options.items, {
     select(data) {
-      return data.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
+      return data.sort((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
     },
   });
 
@@ -56,7 +56,6 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hideIcon={options.hideIcon}
           hideHostname={options.hideHostname}
           openNewTab={options.openNewTab}
-          withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
@@ -68,7 +67,6 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hideIcon={options.hideIcon}
           hideHostname={options.hideHostname}
           openNewTab={options.openNewTab}
-          withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
@@ -83,7 +81,6 @@ interface FlexLayoutProps {
   hideIcon: boolean;
   hideHostname: boolean;
   openNewTab: boolean;
-  withBorder: boolean;
   hasIconColor: boolean;
 }
 
@@ -94,7 +91,6 @@ const FlexLayout = ({
   hideIcon,
   hideHostname,
   openNewTab,
-  withBorder,
   hasIconColor,
 }: FlexLayoutProps) => {
   const board = useRequiredBoard();
@@ -110,15 +106,7 @@ const FlexLayout = ({
             key={app.id}
             w="100%"
           >
-            <Card
+            <Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={4} h="100%">
-              radius={board.itemRadius}
-              className={classes.card}
-              w="100%"
-              display="flex"
-              p={4}
-              h="100%"
-              withBorder={withBorder}
-            >
               {direction === "row" ? (
                 <VerticalItem
                   app={app}
@@ -150,7 +138,6 @@ interface GridLayoutProps {
   hideIcon: boolean;
   hideHostname: boolean;
   openNewTab: boolean;
-  withBorder: boolean;
   itemDirection: "horizontal" | "vertical";
   hasIconColor: boolean;
 }
@@ -161,7 +148,6 @@ const GridLayout = ({
   hideIcon,
   hideHostname,
   openNewTab,
-  withBorder,
   itemDirection,
   hasIconColor,
 }: GridLayoutProps) => {
@@ -182,7 +168,6 @@ const GridLayout = ({
             h="100%"
             className={combineClasses(classes.card, classes["card-grid"])}
             radius={board.itemRadius}
-            withBorder={withBorder}
             p="xs"
           >
             {itemDirection === "horizontal" ? (

packages/widgets/src/bookmarks/index.tsx

@@ -24,7 +24,6 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
       hideIcon: factory.switch({ defaultValue: false }),
       hideHostname: factory.switch({ defaultValue: false }),
       openNewTab: factory.switch({ defaultValue: true }),
-      withBorder: factory.switch({ defaultValue: false }),
       items: factory.sortableItemList<RouterOutputs["app"]["all"][number], string>({
         ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
           return (