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/app/[locale]/widgets/[kind]/_content.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import type { WidgetOptionDefinition } from "node_modules/@homarr/widgets/src/options";
+
+import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
+import { ActionIcon, Affix, IconPencil } from "@homarr/ui";
+import {
+  loadWidgetDynamic,
+  reduceWidgetOptionsWithDefaultValues,
+  widgetImports,
+} from "@homarr/widgets";
+
+import { modalEvents } from "../../modals";
+
+interface WidgetPreviewPageContentProps {
+  kind: WidgetKind;
+  integrationData: {
+    id: string;
+    name: string;
+    url: string;
+    kind: IntegrationKind;
+  }[];
+}
+
+export const WidgetPreviewPageContent = ({
+  kind,
+  integrationData,
+}: WidgetPreviewPageContentProps) => {
+  const currentDefinition = widgetImports[kind].definition;
+  const options = currentDefinition.options as Record<
+    string,
+    WidgetOptionDefinition
+  >;
+  const [state, setState] = useState<{
+    options: Record<string, unknown>;
+    integrations: string[];
+  }>({
+    options: reduceWidgetOptionsWithDefaultValues(kind, options),
+    integrations: [],
+  });
+
+  const Comp = loadWidgetDynamic(kind);
+
+  return (
+    <>
+      <Comp
+        options={state.options as never}
+        integrations={state.integrations.map(
+          (id) => integrationData.find((x) => x.id === id)!,
+        )}
+      />
+      <Affix bottom={12} right={72}>
+        <ActionIcon
+          size={48}
+          variant="default"
+          radius="xl"
+          onClick={() => {
+            return modalEvents.openManagedModal({
+              modal: "widgetEditModal",
+              innerProps: {
+                kind,
+                value: state,
+                onSuccessfulEdit: (value) => {
+                  setState(value);
+                },
+                integrationData: integrationData.filter(
+                  (integration) =>
+                    "supportedIntegrations" in currentDefinition &&
+                    currentDefinition.supportedIntegrations.some(
+                      (kind) => kind === integration.kind,
+                    ),
+                ),
+                integrationSupport:
+                  "supportedIntegrations" in currentDefinition,
+              },
+            });
+          }}
+        >
+          <IconPencil size={24} />
+        </ActionIcon>
+      </Affix>
+    </>
+  );
+};

apps/nextjs/src/app/[locale]/widgets/[kind]/layout.tsx

@@ -0,0 +1,27 @@
+import type { PropsWithChildren } from "react";
+
+import { widgetImports } from "@homarr/widgets";
+
+import { MainNavigation } from "~/components/layout/navigation";
+import { ClientShell } from "~/components/layout/shell";
+
+const getLinks = () => {
+  return Object.entries(widgetImports).map(([key, value]) => {
+    return {
+      href: `/widgets/${key}`,
+      icon: value.definition.icon,
+      label: value.definition.kind,
+    };
+  });
+};
+
+export default function WidgetPreviewLayout({ children }: PropsWithChildren) {
+  const links = getLinks();
+
+  return (
+    <ClientShell hasHeader={false}>
+      <MainNavigation links={links} />
+      {children}
+    </ClientShell>
+  );
+}

apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx

@@ -0,0 +1,35 @@
+import { notFound } from "next/navigation";
+
+import { db } from "@homarr/db";
+import type { WidgetKind } from "@homarr/definitions";
+import { Center } from "@homarr/ui";
+import { widgetImports } from "@homarr/widgets";
+
+import { WidgetPreviewPageContent } from "./_content";
+
+interface Props {
+  params: { kind: string };
+}
+
+export default async function WidgetPreview(props: Props) {
+  if (!(props.params.kind in widgetImports)) {
+    notFound();
+  }
+
+  const integrationData = await db.query.integrations.findMany({
+    columns: {
+      id: true,
+      name: true,
+      url: true,
+      kind: true,
+    },
+  });
+
+  const sort = props.params.kind as WidgetKind;
+
+  return (
+    <Center h="100vh">
+      <WidgetPreviewPageContent kind={sort} integrationData={integrationData} />
+    </Center>
+  );
+}