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

@@ -3,9 +3,8 @@
 import { useState } from "react";
 import type { WidgetOptionDefinition } from "node_modules/@homarr/widgets/src/options";
 
-import type { IntegrationKind } from "@homarr/definitions";
+import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { ActionIcon, Affix, IconPencil } from "@homarr/ui";
-import type { WidgetSort } from "@homarr/widgets";
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,
@@ -15,7 +14,7 @@ import {
 import { modalEvents } from "../../modals";
 
 interface WidgetPreviewPageContentProps {
-  sort: WidgetSort;
+  kind: WidgetKind;
   integrationData: {
     id: string;
     name: string;
@@ -25,10 +24,10 @@ interface WidgetPreviewPageContentProps {
 }
 
 export const WidgetPreviewPageContent = ({
-  sort,
+  kind,
   integrationData,
 }: WidgetPreviewPageContentProps) => {
-  const currentDefinition = widgetImports[sort].definition;
+  const currentDefinition = widgetImports[kind].definition;
   const options = currentDefinition.options as Record<
     string,
     WidgetOptionDefinition
@@ -37,11 +36,11 @@ export const WidgetPreviewPageContent = ({
     options: Record<string, unknown>;
     integrations: string[];
   }>({
-    options: reduceWidgetOptionsWithDefaultValues(options),
+    options: reduceWidgetOptionsWithDefaultValues(kind, options),
     integrations: [],
   });
 
-  const Comp = loadWidgetDynamic(sort);
+  const Comp = loadWidgetDynamic(kind);
 
   return (
     <>
@@ -60,9 +59,11 @@ export const WidgetPreviewPageContent = ({
             return modalEvents.openManagedModal({
               modal: "widgetEditModal",
               innerProps: {
-                sort,
-                definition: currentDefinition.options,
-                state: [state, setState],
+                kind,
+                value: state,
+                onSuccessfulEdit: (value) => {
+                  setState(value);
+                },
                 integrationData: integrationData.filter(
                   (integration) =>
                     "supportedIntegrations" in currentDefinition &&

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

@@ -10,7 +10,7 @@ const getLinks = () => {
     return {
       href: `/widgets/${key}`,
       icon: value.definition.icon,
-      label: value.definition.sort,
+      label: value.definition.kind,
     };
   });
 };

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

@@ -1,17 +1,18 @@
-import type { PropsWithChildren } from "react";
 import { notFound } from "next/navigation";
 
 import { db } from "@homarr/db";
+import type { WidgetKind } from "@homarr/definitions";
 import { Center } from "@homarr/ui";
-import type { WidgetSort } from "@homarr/widgets";
 import { widgetImports } from "@homarr/widgets";
 
 import { WidgetPreviewPageContent } from "./_content";
 
-type Props = PropsWithChildren<{ params: { sort: string } }>;
+interface Props {
+  params: { kind: string };
+}
 
 export default async function WidgetPreview(props: Props) {
-  if (!(props.params.sort in widgetImports)) {
+  if (!(props.params.kind in widgetImports)) {
     notFound();
   }
 
@@ -24,11 +25,11 @@ export default async function WidgetPreview(props: Props) {
     },
   });
 
-  const sort = props.params.sort as WidgetSort;
+  const sort = props.params.kind as WidgetKind;
 
   return (
     <Center h="100vh">
-      <WidgetPreviewPageContent sort={sort} integrationData={integrationData} />
+      <WidgetPreviewPageContent kind={sort} integrationData={integrationData} />
     </Center>
   );
 }