feat: add board (#15)

* wip: Add gridstack board
* wip: Centralize board pages, Add board settings page
* fix: remove cyclic dependency and rename widget-sort to kind
* improve: Add header actions as parallel route
* feat: add item select modal, add category edit modal,
* feat: add edit item modal
* feat: add remove item modal
* wip: add category actions
* feat: add saving of board, wip: add app widget
* Merge branch 'main' into add-board
* chore: update turbo dependencies
* chore: update mantine dependencies
* chore: fix typescript errors, lint and format
* feat: add confirm modal to category removal, move items of removed category to above wrapper
* feat: remove app widget to continue in another branch
* feat: add loading spinner until board is initialized
* fix: issue with cellheight of gridstack items
* feat: add translations for board
* fix: issue with translation for settings page
* chore: address pull request feedback

apps/nextjs/src/components/layout/header/button.tsx

@@ -0,0 +1,47 @@
+import type { ForwardedRef, ReactNode } from "react";
+import { forwardRef } from "react";
+import Link from "next/link";
+
+import type { ActionIconProps } from "@homarr/ui";
+import { ActionIcon } from "@homarr/ui";
+
+type HeaderButtonProps = (
+  | {
+      onClick?: () => void;
+    }
+  | {
+      href: string;
+    }
+) & {
+  children: ReactNode;
+} & Partial<ActionIconProps>;
+
+const headerButtonActionIconProps: ActionIconProps = {
+  variant: "subtle",
+  style: { border: "none" },
+  color: "gray",
+  size: "lg",
+};
+
+// eslint-disable-next-line react/display-name
+export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
+  (props, ref) => {
+    if ("href" in props) {
+      return (
+        <ActionIcon
+          ref={ref as ForwardedRef<HTMLAnchorElement>}
+          component={Link}
+          {...props}
+          {...headerButtonActionIconProps}
+        >
+          {props.children}
+        </ActionIcon>
+      );
+    }
+    return (
+      <ActionIcon ref={ref} {...props} {...headerButtonActionIconProps}>
+        {props.children}
+      </ActionIcon>
+    );
+  },
+);

apps/nextjs/src/components/layout/header/search.tsx

@@ -2,8 +2,9 @@
 
 import { spotlight } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
-import { ActionIcon, IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
+import { IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
 
+import { HeaderButton } from "./button";
 import classes from "./search.module.css";
 
 export const DesktopSearchInput = () => {
@@ -25,13 +26,8 @@ export const DesktopSearchInput = () => {
 
 export const MobileSearchButton = () => {
   return (
-    <ActionIcon
-      className={classes.mobileSearch}
-      variant="subtle"
-      color="gray"
-      onClick={spotlight.open}
-    >
+    <HeaderButton onClick={spotlight.open} className={classes.mobileSearch}>
       <IconSearch size={20} stroke={1.5} />
-    </ActionIcon>
+    </HeaderButton>
   );
 };