feat: downloads widget

.gitignore

@@ -56,3 +56,7 @@ yarn-error.log*
 apps/tasks/tasks.cjs
 apps/websocket/wssServer.cjs
 apps/nextjs/.million/
+
+
+#personal backgrounds
+apps/nextjs/public/images/background.png

.vscode/settings.json

@@ -9,11 +9,17 @@
   "js/ts.implicitProjectConfig.experimentalDecorators": true,
   "prettier.configPath": "./tooling/prettier/index.mjs",
   "cSpell.words": [
+    "ajnart",
     "cqmin",
+    "gridstack",
     "homarr",
     "jellyfin",
     "mantine",
+    "manuel-rw",
+    "Meierschlumpf",
     "overseerr",
+    "Sabnzbd",
+    "SeDemal",
     "Sonarr",
     "superjson",
     "tabler",

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -4,6 +4,9 @@ import { TRPCError } from "@trpc/server";
 // Placed here because gridstack styles are used for board content
 import "~/styles/gridstack.scss";
 
+import { IntegrationProvider } from "@homarr/auth/client";
+import { auth } from "@homarr/auth/next";
+import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
 import { getI18n } from "@homarr/translation/server";
 
 import { createMetaTitle } from "~/metadata";
@@ -27,8 +30,16 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
       getInitialBoardAsync: getInitialBoard,
       isBoardContentPage: true,
     }),
-    page: () => {
-      return <ClientBoard />;
+    // eslint-disable-next-line no-restricted-syntax
+    page: async () => {
+      const session = await auth();
+      const integrations = await getIntegrationsWithPermissionsAsync(session);
+
+      return (
+        <IntegrationProvider integrations={integrations}>
+          <ClientBoard />
+        </IntegrationProvider>
+      );
     },
     generateMetadataAsync: async ({ params }: { params: TParams }): Promise<Metadata> => {
       try {

apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx

@@ -18,8 +18,7 @@ interface NewIntegrationPageProps {
 }
 
 export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const result = z.enum([integrationKinds[0]!, ...integrationKinds.slice(1)]).safeParse(searchParams.kind);
+  const result = z.enum(integrationKinds).safeParse(searchParams.kind);
   if (!result.success) {
     notFound();
   }

apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import type { MantineSpacing } from "@mantine/core";
 import { Group, Stack, Switch, Text, UnstyledButton } from "@mantine/core";
 
+import type { Modify } from "@homarr/common/types";
 import type { UseFormReturnType } from "@homarr/form";
 
 export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
@@ -13,9 +14,12 @@ export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
   formKey,
   disabled,
 }: {
-  form: Omit<UseFormReturnType<TFormValue, () => TFormValue>, "setFieldValue"> & {
-    setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void;
-  };
+  form: Modify<
+    UseFormReturnType<TFormValue, () => TFormValue>,
+    {
+      setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void;
+    }
+  >;
   formKey: keyof TFormValue;
   ms?: MantineSpacing;
   title: string;

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

@@ -86,6 +86,9 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     });
   }, [dimensions, openPreviewDimensionsModal]);
 
+  const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
+    setState({ ...state, options: { ...state.options, newOptions } });
+
   return (
     <>
       <Card withBorder w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
@@ -105,6 +108,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
                 isEditMode={editMode}
                 boardId={undefined}
                 itemId={undefined}
+                setOptions={updateOptions}
               />
             </ErrorBoundary>
           )}

apps/nextjs/src/components/board/items/item-actions.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 
+import type { Modify } from "@homarr/common/types";
 import { createId } from "@homarr/db/client";
 import type { WidgetKind } from "@homarr/definitions";
 import type { BoardItemAdvancedOptions } from "@homarr/validation";
@@ -71,9 +72,12 @@ export const useItemActions = () => {
           advancedOptions: {
             customCssClasses: [],
           },
-        } satisfies Omit<Item, "kind" | "yOffset" | "xOffset"> & {
-          kind: WidgetKind;
-        };
+        } satisfies Modify<
+          Omit<Item, "yOffset" | "xOffset">,
+          {
+            kind: WidgetKind;
+          }
+        >;
 
         return {
           ...previous,
@@ -105,7 +109,7 @@ export const useItemActions = () => {
           id: createId(),
           yOffset: undefined,
           xOffset: undefined,
-        } satisfies Omit<Item, "yOffset" | "xOffset"> & { yOffset?: number; xOffset?: number };
+        } satisfies Modify<Item, { yOffset?: number; xOffset?: number }>;
 
         return {
           ...previous,

apps/nextjs/src/components/board/items/item-content.tsx

@@ -10,6 +10,7 @@ import { WidgetError } from "@homarr/widgets/errors";
 import type { Item } from "~/app/[locale]/boards/_types";
 import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import classes from "../sections/item.module.css";
+import { useItemActions } from "./item-actions";
 import { BoardItemMenu } from "./item-menu";
 
 interface BoardItemContentProps {
@@ -56,6 +57,9 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
   const Comp = loadWidgetDynamic(item.kind);
   const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
   const newItem = { ...item, options };
+  const { updateItemOptions } = useItemActions();
+  const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
+    updateItemOptions({ itemId: item.id, newOptions });
 
   if (!serverData?.isReady) return null;
 
@@ -80,6 +84,7 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
             isEditMode={isEditMode}
             boardId={board.id}
             itemId={item.id}
+            setOptions={updateOptions}
             {...dimensions}
           />
         </ErrorBoundary>

apps/nextjs/src/components/board/sections/item.module.css

@@ -1,10 +1,12 @@
 .itemCard {
   @mixin dark {
-    background-color: rgba(46, 46, 46, var(--opacity));
-    border-color: rgba(66, 66, 66, var(--opacity));
+    --background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
+    --border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
   }
   @mixin light {
-    background-color: rgba(255, 255, 255, var(--opacity));
-    border-color: rgba(222, 226, 230, var(--opacity));
+    --background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
+    --border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
   }
+  background-color: var(--background-color);
+  border-color: var(--border-color);
 }

packages/api/src/middlewares/integration.ts

@@ -3,7 +3,8 @@ import { TRPCError } from "@trpc/server";
 import type { Session } from "@homarr/auth";
 import { hasQueryAccessToIntegrationsAsync } from "@homarr/auth/server";
 import { constructIntegrationPermissions } from "@homarr/auth/shared";
-import { decryptSecret } from "@homarr/common";
+import { decryptSecret } from "@homarr/common/server";
+import type { AtLeastOneOf } from "@homarr/common/types";
 import type { Database } from "@homarr/db";
 import { and, eq, inArray } from "@homarr/db";
 import { integrations } from "@homarr/db/schema/sqlite";
@@ -12,7 +13,7 @@ import { z } from "@homarr/validation";
 
 import { publicProcedure } from "../trpc";
 
-type IntegrationAction = "query" | "interact";
+export type IntegrationAction = "query" | "interact";
 
 /**
  * Creates a middleware that provides the integration in the context that is of the specified kinds
@@ -25,7 +26,7 @@ type IntegrationAction = "query" | "interact";
  */
 export const createOneIntegrationMiddleware = <TKind extends IntegrationKind>(
   action: IntegrationAction,
-  ...kinds: [TKind, ...TKind[]] // Ensure at least one kind is provided
+  ...kinds: AtLeastOneOf<TKind> // Ensure at least one kind is provided
 ) => {
   return publicProcedure.input(z.object({ integrationId: z.string() })).use(async ({ input, ctx, next }) => {
     const integration = await ctx.db.query.integrations.findFirst({
@@ -95,7 +96,7 @@ export const createOneIntegrationMiddleware = <TKind extends IntegrationKind>(
  */
 export const createManyIntegrationMiddleware = <TKind extends IntegrationKind>(
   action: IntegrationAction,
-  ...kinds: [TKind, ...TKind[]] // Ensure at least one kind is provided
+  ...kinds: AtLeastOneOf<TKind> // Ensure at least one kind is provided
 ) => {
   return publicProcedure
     .input(z.object({ integrationIds: z.array(z.string()).min(1) }))
@@ -161,7 +162,7 @@ export const createManyIntegrationMiddleware = <TKind extends IntegrationKind>(
  */
 export const createManyIntegrationOfOneItemMiddleware = <TKind extends IntegrationKind>(
   action: IntegrationAction,
-  ...kinds: [TKind, ...TKind[]] // Ensure at least one kind is provided
+  ...kinds: AtLeastOneOf<TKind> // Ensure at least one kind is provided
 ) => {
   return publicProcedure
     .input(z.object({ integrationIds: z.array(z.string()).min(1), itemId: z.string() }))

packages/api/src/router/integration/integration-router.ts

@@ -1,6 +1,6 @@
 import { TRPCError } from "@trpc/server";
 
-import { decryptSecret, encryptSecret } from "@homarr/common";
+import { decryptSecret, encryptSecret } from "@homarr/common/server";
 import type { Database } from "@homarr/db";
 import { and, createId, eq, inArray } from "@homarr/db";
 import {

packages/api/src/router/integration/integration-test-connection.ts

@@ -1,8 +1,8 @@
-import { decryptSecret } from "@homarr/common";
+import { decryptSecret } from "@homarr/common/server";
 import type { Integration } from "@homarr/db/schema/sqlite";
 import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
 import { getAllSecretKindOptions } from "@homarr/definitions";
-import { integrationCreatorByKind, IntegrationTestConnectionError } from "@homarr/integrations";
+import { integrationCreator, IntegrationTestConnectionError } from "@homarr/integrations";
 
 type FormIntegration = Integration & {
   secrets: {
@@ -37,23 +37,25 @@ export const testConnectionAsync = async (
   const sourcedSecrets = [...formSecrets, ...decryptedDbSecrets];
   const secretKinds = getSecretKindOption(integration.kind, sourcedSecrets);
 
-  const filteredSecrets = secretKinds.map((kind) => {
-    const secrets = sourcedSecrets.filter((secret) => secret.kind === kind);
-    // Will never be undefined because of the check before
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    if (secrets.length === 1) return secrets[0]!;
+  const decryptedSecrets = secretKinds
+    .map((kind) => {
+      const secrets = sourcedSecrets.filter((secret) => secret.kind === kind);
+      // Will never be undefined because of the check before
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      if (secrets.length === 1) return secrets[0]!;
 
-    // There will always be a matching secret because of the getSecretKindOption function
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return secrets.find((secret) => secret.source === "form") ?? secrets[0]!;
-  });
+      // There will always be a matching secret because of the getSecretKindOption function
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return secrets.find((secret) => secret.source === "form") ?? secrets[0]!;
+    })
+    .map(({ source: _, ...secret }) => secret);
+
+  const { secrets: _, ...baseIntegration } = integration;
 
-  // @ts-expect-error - For now we expect an error here as not all integerations have been implemented
-  const integrationInstance = integrationCreatorByKind(integration.kind, {
-    id: integration.id,
-    name: integration.name,
-    url: integration.url,
-    decryptedSecrets: filteredSecrets,
+  // @ts-expect-error - For now we expect an error here as not all integrations have been implemented
+  const integrationInstance = integrationCreator({
+    ...baseIntegration,
+    decryptedSecrets,
   });
 
   await integrationInstance.testConnectionAsync();

packages/api/src/router/test/integration/integration-router.spec.ts

@@ -2,7 +2,7 @@
 import { describe, expect, test, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
-import { encryptSecret } from "@homarr/common";
+import { encryptSecret } from "@homarr/common/server";
 import { createId } from "@homarr/db";
 import { integrations, integrationSecrets } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";