feat: add widget server loader (#16)

* 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

* feat: add widget server loader

* fix: typing issue

* chore: address pull request feedback

* fix: formatting

packages/widgets/src/clock/component.tsx

@@ -3,6 +3,7 @@ import type { WidgetComponentProps } from "../definition";
 export default function ClockWidget({
   options: _options,
   integrations: _integrations,
+  serverData: _serverData,
 }: WidgetComponentProps<"clock">) {
   return <div>CLOCK</div>;
 }

packages/widgets/src/clock/index.ts

@@ -1,27 +1,30 @@
 import { IconClock } from "@homarr/ui";
 
 import { createWidgetDefinition } from "../definition";
-import { opt } from "../options";
+import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader } = createWidgetDefinition("clock", {
-  icon: IconClock,
-  supportedIntegrations: ["adGuardHome", "piHole"],
-  options: opt.from(
-    (fac) => ({
-      is24HourFormat: fac.switch({
-        defaultValue: true,
-        withDescription: true,
+export const { definition, componentLoader, serverDataLoader } =
+  createWidgetDefinition("clock", {
+    icon: IconClock,
+    supportedIntegrations: ["adGuardHome", "piHole"],
+    options: optionsBuilder.from(
+      (factory) => ({
+        is24HourFormat: factory.switch({
+          defaultValue: true,
+          withDescription: true,
+        }),
+        isLocaleTime: factory.switch({ defaultValue: true }),
+        timezone: factory.select({
+          options: ["Europe/Berlin", "Europe/London", "Europe/Moscow"] as const,
+          defaultValue: "Europe/Berlin",
+        }),
       }),
-      isLocaleTime: fac.switch({ defaultValue: true }),
-      timezone: fac.select({
-        options: ["Europe/Berlin", "Europe/London", "Europe/Moscow"] as const,
-        defaultValue: "Europe/Berlin",
-      }),
-    }),
-    {
-      timezone: {
-        shouldHide: (options) => options.isLocaleTime,
+      {
+        timezone: {
+          shouldHide: (options) => options.isLocaleTime,
+        },
       },
-    },
-  ),
-}).withDynamicImport(() => import("./component"));
+    ),
+  })
+    .withServerData(() => import("./serverData"))
+    .withDynamicImport(() => import("./component"));

packages/widgets/src/clock/serverData.ts

@@ -0,0 +1,10 @@
+"use server";
+
+import { db } from "../../../db";
+import type { WidgetProps } from "../definition";
+
+export default async function getServerData(_item: WidgetProps<"clock">) {
+  const randomUuid = crypto.randomUUID();
+  const data = await db.query.items.findMany();
+  return { data, count: data.length, randomUuid };
+}