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/server/client.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useServerDataInitializer } from "./provider";
+
+interface Props {
+  id: string;
+  serverData: Record<string, unknown> | undefined;
+}
+
+export const ClientServerDataInitalizer = ({ id, serverData }: Props) => {
+  useServerDataInitializer(id, serverData);
+  return null;
+};

packages/widgets/src/server/provider.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Data = Record<
+  string,
+  {
+    data: Record<string, unknown> | undefined;
+    isReady: boolean;
+  }
+>;
+
+interface GlobalItemServerDataContext {
+  setItemServerData: (
+    id: string,
+    data: Record<string, unknown> | undefined,
+  ) => void;
+  data: Data;
+  initalItemIds: string[];
+}
+
+const GlobalItemServerDataContext =
+  createContext<GlobalItemServerDataContext | null>(null);
+
+interface Props {
+  initalItemIds: string[];
+}
+
+export const GlobalItemServerDataProvider = ({
+  children,
+  initalItemIds,
+}: PropsWithChildren<Props>) => {
+  const [data, setData] = useState<Data>({});
+
+  const setItemServerData = (
+    id: string,
+    itemData: Record<string, unknown> | undefined,
+  ) => {
+    setData((prev) => ({
+      ...prev,
+      [id]: {
+        data: itemData,
+        isReady: true,
+      },
+    }));
+  };
+
+  return (
+    <GlobalItemServerDataContext.Provider
+      value={{ setItemServerData, data, initalItemIds }}
+    >
+      {children}
+    </GlobalItemServerDataContext.Provider>
+  );
+};
+
+export const useServerDataFor = (id: string) => {
+  const context = useContext(GlobalItemServerDataContext);
+
+  if (!context) {
+    throw new Error("GlobalItemServerDataProvider is required");
+  }
+
+  // When the item is not in the initial list, it means the data can not come from the server
+  if (!context.initalItemIds.includes(id)) {
+    return {
+      data: undefined,
+      isReady: true,
+    };
+  }
+
+  return context.data[id];
+};
+
+export const useServerDataInitializer = (
+  id: string,
+  serverData: Record<string, unknown> | undefined,
+) => {
+  const context = useContext(GlobalItemServerDataContext);
+
+  if (!context) {
+    throw new Error("GlobalItemServerDataProvider is required");
+  }
+
+  useEffect(() => {
+    context.setItemServerData(id, serverData);
+  }, []);
+};

packages/widgets/src/server/runner.tsx

@@ -0,0 +1,43 @@
+import type { PropsWithChildren } from "react";
+import { Suspense } from "react";
+
+import type { RouterOutputs } from "@homarr/api";
+
+import { widgetImports } from "..";
+import { ClientServerDataInitalizer } from "./client";
+import { GlobalItemServerDataProvider } from "./provider";
+
+type Board = RouterOutputs["board"]["default"];
+
+type Props = PropsWithChildren<{
+  board: Board;
+}>;
+
+export const GlobalItemServerDataRunner = ({ board, children }: Props) => {
+  const allItems = board.sections.flatMap((section) => section.items);
+
+  return (
+    <GlobalItemServerDataProvider initalItemIds={allItems.map(({ id }) => id)}>
+      {allItems.map((item) => (
+        <Suspense key={item.id}>
+          <ItemDataLoader item={item} />
+        </Suspense>
+      ))}
+      {children}
+    </GlobalItemServerDataProvider>
+  );
+};
+
+interface ItemDataLoaderProps {
+  item: Board["sections"][number]["items"][number];
+}
+
+const ItemDataLoader = async ({ item }: ItemDataLoaderProps) => {
+  const widgetImport = widgetImports[item.kind];
+  if (!("serverDataLoader" in widgetImport)) {
+    return <ClientServerDataInitalizer id={item.id} serverData={undefined} />;
+  }
+  const loader = await widgetImport.serverDataLoader();
+  const data = await loader.default(item as never);
+  return <ClientServerDataInitalizer id={item.id} serverData={data} />;
+};