feat: add app widget (#206)

* refactor: move server api to api package

* feat: add app widget

* refactor: add element size for widget components on board

* feat: add resize listener for widget width

* feat: add widget app input

* refactor: add better responsibe layout, add missing translations

* fix: ci issues

* fix: deepsource issues

* chore: address pull request feedback

packages/api/src/router/app.ts

@@ -12,6 +12,16 @@ export const appRouter = createTRPCRouter({
       orderBy: asc(apps.name),
     });
   }),
+  selectable: publicProcedure.query(async ({ ctx }) => {
+    return await ctx.db.query.apps.findMany({
+      columns: {
+        id: true,
+        name: true,
+        iconUrl: true,
+      },
+      orderBy: asc(apps.name),
+    });
+  }),
   byId: publicProcedure
     .input(validation.app.byId)
     .query(async ({ ctx, input }) => {

packages/api/src/router/board.ts

@@ -19,7 +19,6 @@ import {
 } from "@homarr/validation";
 
 import { zodUnionFromArray } from "../../../validation/src/enums";
-import type { WidgetComponentProps } from "../../../widgets/src/definition";
 import { createTRPCRouter, publicProcedure } from "../trpc";
 
 const filterAddedItems = <TInput extends { id: string }>(
@@ -387,21 +386,8 @@ const getFullBoardWithWhere = async (db: Database, where: SQL<unknown>) => {
 const forKind = <T extends WidgetKind>(kind: T) =>
   z.object({
     kind: z.literal(kind),
-    options: z.custom<Partial<WidgetComponentProps<T>["options"]>>(),
-  }) as UnionizeSpecificItemSchemaForWidgetKind<T>;
-
-type SpecificItemSchemaForWidgetKind<TKind extends WidgetKind> = z.ZodObject<{
-  kind: z.ZodLiteral<TKind>;
-  options: z.ZodType<
-    Partial<WidgetComponentProps<TKind>["options"]>,
-    z.ZodTypeDef,
-    Partial<WidgetComponentProps<TKind>["options"]>
-  >;
-}>;
-
-type UnionizeSpecificItemSchemaForWidgetKind<T> = T extends WidgetKind
-  ? SpecificItemSchemaForWidgetKind<T>
-  : never;
+    options: z.record(z.unknown()),
+  });
 
 const outputItemSchema = zodUnionFromArray(
   widgetKinds.map((kind) => forKind(kind)),

packages/api/src/server.ts

@@ -0,0 +1,21 @@
+import { cache } from "react";
+import { headers } from "next/headers";
+
+import { createCaller, createTRPCContext } from "@homarr/api";
+import { auth } from "@homarr/auth";
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a tRPC call from a React Server Component.
+ */
+const createContext = cache(async () => {
+  const heads = new Headers(headers());
+  heads.set("x-trpc-source", "rsc");
+
+  return createTRPCContext({
+    session: await auth(),
+    headers: heads,
+  });
+});
+
+export const api = createCaller(createContext);