Merge branch 'dev' into feat/rework-perferences

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -13,6 +13,7 @@ import type { useForm } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
+import { sanitizeRedirectionUrl } from "@homarr/validation/redirection-url";
 import { userSignInSchema } from "@homarr/validation/user";
 
 type Provider = "credentials" | "ldap" | "oidc";
@@ -70,7 +71,7 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
 
       // Redirect to the callback URL if the response is defined and comes from a credentials provider (ldap or credentials). oidc is redirected automatically.
       await revalidatePathActionAsync("/");
-      router.push(callbackUrl);
+      router.push(sanitizeRedirectionUrl(callbackUrl));
     },
     [t, router, callbackUrl],
   );

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -4,6 +4,7 @@ import { Card, Center, Stack, Text, Title } from "@mantine/core";
 import { env } from "@homarr/auth/env";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
+import { sanitizeRedirectionUrl } from "@homarr/validation/redirection-url";
 
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { LoginForm } from "./_login-form";
@@ -19,7 +20,7 @@ export default async function Login(props: LoginProps) {
   const session = await auth();
 
   if (session) {
-    redirect(searchParams.callbackUrl ?? "/");
+    redirect(sanitizeRedirectionUrl(searchParams.callbackUrl));
   }
 
   const t = await getScopedI18n("user.page.login");

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -264,6 +264,5 @@ const usePreventLeaveWithDirty = (isDirty: boolean) => {
       window.removeEventListener("popstate", handlePopState);
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDirty]);
 };

apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx

@@ -27,7 +27,6 @@ export const BoardReadyProvider = ({ children }: PropsWithChildren) => {
 
   useEffect(() => {
     setReadySections((previous) => previous.filter((id) => board.sections.some((section) => section.id === id)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [board.sections.length, setReadySections]);
 
   const markAsReady = useCallback((id: string) => {

apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { Button, Grid, Group, Loader, Stack, TextInput } from "@mantine/core";
-import { useDebouncedValue, useDocumentTitle, useFavicon } from "@mantine/hooks";
+import { useDebouncedValue, useDocumentTitle } from "@mantine/hooks";
 
 import { useUpdateBoard } from "@homarr/boards/updater";
 import { useZodForm } from "@homarr/form";
@@ -10,6 +10,7 @@ import { IconPicker } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
 import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
 
+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -53,7 +54,6 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   );
 
   useLogoPreview(form.values.logoImageUrl);
-  useFaviconPreview(form.values.faviconImageUrl);
   const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
 
   // Cleanup for not applied changes of the page title and logo image URL
@@ -75,6 +75,7 @@ export const GeneralSettingsContent = ({ board }: Props) => {
           pageTitle: values.pageTitle,
           logoImageUrl: values.logoImageUrl,
         };
+        updateFavicon(values.faviconImageUrl ?? homarrLogoPath);
         savePartialSettings({
           id: board.id,
           ...values,
@@ -146,7 +147,13 @@ const useMetaTitlePreview = (title: string | null) => {
   };
 };
 
-const useFaviconPreview = (url: string | null) => {
-  const [faviconDebounced] = useDebouncedValue(url ?? "", 500);
-  useFavicon(faviconDebounced);
+// Previously we used the useFavicon hook from Mantine
+// However if the user tried to click on a link to a different page
+// it caused an error "Cannot read properties of null (reading 'removeChild')"
+// Probably because the head element was null (https://github.com/mantinedev/mantine/blob/b90d9b81031f45f5d15e75f25138ed6477f65bce/packages/%40mantine/hooks/src/use-favicon/use-favicon.ts#L21)
+// See https://github.com/homarr-labs/homarr/issues/4905
+const updateFavicon = (url: string) => {
+  const link: HTMLLinkElement | null = document.querySelector('link[rel="icon"]');
+  if (!link) return;
+  link.href = url;
 };

apps/nextjs/src/app/[locale]/manage/about/about.module.css

@@ -1,3 +1,7 @@
 .contributorCard {
   background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
 }
+
+.dependencyCard:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}

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

@@ -12,8 +12,7 @@ import {
   Flex,
   Group,
   Kbd,
-  List,
-  ListItem,
+  SimpleGrid,
   Stack,
   Table,
   TableTbody,
@@ -22,9 +21,18 @@ import {
   TableThead,
   TableTr,
   Text,
+  ThemeIcon,
   Title,
+  UnstyledButton,
 } from "@mantine/core";
-import { IconKeyboard, IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
+import {
+  IconKeyboard,
+  IconLanguage,
+  IconLibrary,
+  IconMoneybagHeart,
+  IconPackage,
+  IconUsers,
+} from "@tabler/icons-react";
 
 import { capitalize, objectEntries } from "@homarr/common";
 import { hotkeys } from "@homarr/definitions";
@@ -33,8 +41,10 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
-import { getPackageAttributesAsync } from "~/versions/package-reader";
+import type { PackageJsonDependencies } from "~/versions/package-reader";
+import { getPackageVersion } from "~/versions/package-reader";
 import type githubContributorsJson from "../../../../../../../static-data/contributors.json";
+import type openCollectiveContributorsJson from "../../../../../../../static-data/opencollective-contributors.json";
 import type crowdinContributorsJson from "../../../../../../../static-data/translators.json";
 import classes from "./about.module.css";
 
@@ -57,7 +67,10 @@ const getHostAsync = async () => {
 export default async function AboutPage() {
   const baseServerUrl = `http://${await getHostAsync()}`;
   const t = await getScopedI18n("management.page.about");
-  const attributes = await getPackageAttributesAsync();
+  const version = getPackageVersion();
+  const dependencies = (await fetch(`${baseServerUrl}/api/about/dependencies`).then((res) =>
+    res.json(),
+  )) as PackageJsonDependencies;
   const githubContributors = (await fetch(`${baseServerUrl}/api/about/contributors/github`).then((res) =>
     res.json(),
   )) as typeof githubContributorsJson;
@@ -66,6 +79,10 @@ export default async function AboutPage() {
     res.json(),
   )) as typeof crowdinContributorsJson;
 
+  const openCollectiveContributors = (await fetch(`${baseServerUrl}/api/about/contributors/opencollective`).then(
+    (res) => res.json(),
+  )) as typeof openCollectiveContributorsJson;
+
   return (
     <div>
       <DynamicBreadcrumb />
@@ -76,7 +93,7 @@ export default async function AboutPage() {
             <Title order={1} tt="uppercase">
               Homarr
             </Title>
-            <Title order={2}>{t("version", { version: attributes.version })}</Title>
+            <Title order={2}>{t("version", { version })}</Title>
           </Stack>
         </Group>
       </Center>
@@ -131,31 +148,72 @@ export default async function AboutPage() {
             </Flex>
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem value="sponsors">
+          <AccordionControl icon={<IconMoneybagHeart size="1rem" />}>
+            <Stack gap={0}>
+              <Text>{t("accordion.sponsors.title")}</Text>
+              <Text size="sm" c="dimmed">
+                {t("accordion.sponsors.subtitle", {
+                  count: String(openCollectiveContributors.length),
+                })}
+              </Text>
+            </Stack>
+          </AccordionControl>
+          <AccordionPanel>
+            <Flex wrap="wrap" gap="xs">
+              {openCollectiveContributors.map((sponsor) => (
+                <GenericContributorLinkCard
+                  key={sponsor.slug}
+                  link={`https://opencollective.com/${sponsor.slug}`}
+                  image={sponsor.imageUrl}
+                  name={sponsor.name}
+                />
+              ))}
+            </Flex>
+          </AccordionPanel>
+        </AccordionItem>
         <AccordionItem value="libraries">
           <AccordionControl icon={<IconLibrary size="1rem" />}>
             <Stack gap={0}>
               <Text>{t("accordion.libraries.title")}</Text>
               <Text size="sm" c="dimmed">
                 {t("accordion.libraries.subtitle", {
-                  count: String(Object.keys(attributes.dependencies).length),
+                  count: String(Object.keys(dependencies).length),
                 })}
               </Text>
             </Stack>
           </AccordionControl>
           <AccordionPanel>
-            <List>
-              {Object.entries(attributes.dependencies)
+            <SimpleGrid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }} spacing="md">
+              {Object.entries(dependencies)
+                .filter(([, value]) => !value.includes("workspace:"))
                 .sort(([key1], [key2]) => key1.localeCompare(key2))
-                .map(([key, value]) => (
-                  <ListItem key={key}>
-                    {value.includes("workspace:") ? (
-                      <Text>{key}</Text>
-                    ) : (
-                      <a href={`https://www.npmjs.com/package/${key}`}>{key}</a>
-                    )}
-                  </ListItem>
+                .map(([name, version]) => (
+                  <UnstyledButton
+                    key={name}
+                    component="a"
+                    href={`https://www.npmjs.com/package/${name}`}
+                    target="_blank"
+                  >
+                    <Card withBorder radius="md" p="xs" className={classes.dependencyCard}>
+                      <Group gap="sm" wrap="nowrap">
+                        <ThemeIcon variant="light" size="lg" radius="md">
+                          <IconPackage size="1.5rem" stroke={1.5} />
+                        </ThemeIcon>
+
+                        <Stack gap={0}>
+                          <Text size="sm" fw="bold" lineClamp={1} title={name}>
+                            {name}
+                          </Text>
+                          <Text size="sm" c="dimmed">
+                            v{version.replace("^", "").replace("~", "")}
+                          </Text>
+                        </Stack>
+                      </Group>
+                    </Card>
+                  </UnstyledButton>
                 ))}
-            </List>
+            </SimpleGrid>
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="hotkeys">

apps/nextjs/src/app/[locale]/manage/tools/api/page.tsx

@@ -2,7 +2,7 @@ import { headers } from "next/headers";
 import { notFound } from "next/navigation";
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from "@mantine/core";
 
-import { openApiDocument } from "@homarr/api";
+import { openApiDocument } from "@homarr/api/open-api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { extractBaseUrlFromHeaders } from "@homarr/common";
@@ -14,7 +14,7 @@ import { ApiKeysManagement } from "./components/api-keys";
 
 export async function generateMetadata() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user.permissions.includes("admin")) {
     return {};
   }
 
@@ -27,7 +27,7 @@ export async function generateMetadata() {
 
 export default async function ApiPage() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user.permissions.includes("admin")) {
     notFound();
   }
   const document = openApiDocument(extractBaseUrlFromHeaders(await headers()));

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -76,6 +76,7 @@ const createColumns = (
     accessorKey: "ports",
     header: t("docker.field.ports.label"),
     Cell({ cell }) {
+      if (!cell.row.original.ports) return null;
       if (!cell.row.original.ports.length) return null;
       return (
         <OverflowBadge overflowCount={1} data={cell.row.original.ports.map((port) => port.PrivatePort.toString())} />

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -18,7 +18,7 @@ import { LogContextProvider } from "./log-context";
 
 export async function generateMetadata() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user.permissions.includes("admin")) {
     return {};
   }
   const t = await getScopedI18n("management");
@@ -30,7 +30,7 @@ export async function generateMetadata() {
 
 export default async function LogsManagementPage() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("other-view-logs")) {
+  if (!session?.user.permissions.includes("other-view-logs")) {
     notFound();
   }
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -30,7 +30,7 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
     },
     onSuccess(_, variables) {
       form.setInitialValues({
-        firstDayOfWeek: variables.firstDayOfWeek,
+        firstDayOfWeek: variables.firstDayOfWeek as DayOfWeek,
       });
       showSuccessNotification({
         message: t("user.action.changeFirstDayOfWeek.notification.success.message"),

apps/nextjs/src/app/api/[...trpc]/route.ts

@@ -2,7 +2,8 @@ import type { NextRequest } from "next/server";
 import { userAgent } from "next/server";
 import { createOpenApiFetchHandler } from "trpc-to-openapi";
 
-import { appRouter, createTRPCContext } from "@homarr/api";
+import { createTRPCContext } from "@homarr/api";
+import { openApiRouter } from "@homarr/api/open-api";
 import { API_KEY_HEADER_NAME, getSessionFromApiKeyAsync } from "@homarr/auth/api-key";
 import { ipAddressFromHeaders } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
@@ -30,7 +31,7 @@ const handlerAsync = async (req: NextRequest) => {
   return createOpenApiFetchHandler({
     req,
     endpoint: "/",
-    router: appRouter,
+    router: openApiRouter,
     createContext: () => createTRPCContext({ session, headers: req.headers }),
     onError({ error, path, type }) {
       logger.error(new ErrorWithMetadata("tRPC Error occured", { path, type }, { cause: error }));

apps/nextjs/src/app/api/about/contributors/opencollective/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+import openCollectiveContributors from "../../../../../../../../static-data/opencollective-contributors.json";
+
+export const GET = () => {
+  return NextResponse.json(openCollectiveContributors);
+};
+
+export const dynamic = "force-static";

apps/nextjs/src/app/api/about/dependencies/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+
+import { getDependenciesAsync } from "../../../../versions/package-reader";
+
+export const GET = async () => {
+  const dependencies = await getDependenciesAsync();
+  return NextResponse.json(dependencies);
+};
+
+export const dynamic = "force-static";

apps/nextjs/src/app/api/health/live/route.ts

@@ -75,7 +75,6 @@ const executeHealthCheckSafelyAsync = async (
       },
     };
   } catch (error) {
-    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
     logger.error(new ErrorWithMetadata("Healthcheck failed", { name }, { cause: error }));
     return {
       status: "unhealthy",

apps/nextjs/src/app/api/openapi/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 
-import { openApiDocument } from "@homarr/api";
+import { openApiDocument } from "@homarr/api/open-api";
 import { extractBaseUrlFromHeaders } from "@homarr/common";
 
 export function GET(request: Request) {

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

@@ -117,7 +117,6 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
             when={
               widgetSupportsIntegrations &&
               item.integrationIds.length === 0 &&
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
               (!("integrationsRequired" in definition) || definition.integrationsRequired !== false)
             }
           />

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -206,7 +206,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     }
 
     // Only run this effect when the section items change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemIds.length, columnCount]);
 
   /**

apps/nextjs/src/versions/package-reader.ts

@@ -1,12 +1,16 @@
 import fsPromises from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
 import { glob } from "glob";
+import { parse as parseYaml } from "yaml";
+import z from "zod";
 
 import packageJson from "../../../../package.json";
 
-const getPackageVersion = () => packageJson.version;
-const getDependenciesAsync = async (): Promise<PackageJsonDependencies> => {
+export const getPackageVersion = () => packageJson.version;
+export const getDependenciesAsync = async (): Promise<PackageJsonDependencies> => {
   const pathNames = await glob("**/package.json", {
-    ignore: "node_modules/**",
+    ignore: "**/node_modules/**",
     cwd: "../../",
     absolute: true,
   });
@@ -15,21 +19,37 @@ const getDependenciesAsync = async (): Promise<PackageJsonDependencies> => {
     .map((packageContent) => (JSON.parse(packageContent) as PackageJson).dependencies)
     .filter((dependencies) => dependencies !== undefined);
 
+  const catalog = await parseDependencyCatalogsAsync();
+
   let dependencies = {};
   for (const dependenciesOfPackage of packageDependencies) {
-    dependencies = { ...dependencies, ...dependenciesOfPackage };
+    const resolvedDependencies = Object.entries(dependenciesOfPackage).map(([name, version]) => {
+      const catalogVersion = catalog.get(name);
+      return [name, catalogVersion ?? version] as const;
+    });
+    dependencies = { ...dependencies, ...Object.fromEntries(resolvedDependencies) };
   }
   return dependencies;
 };
 
-export const getPackageAttributesAsync = async () => {
-  return {
-    version: getPackageVersion(),
-    dependencies: await getDependenciesAsync(),
-  };
+type DependencyCatalog = Map<string, string>;
+const parseDependencyCatalogsAsync = async (): Promise<DependencyCatalog> => {
+  const currentDir = path.dirname(fileURLToPath(import.meta.url));
+  const workspaceConfigContent = await fsPromises.readFile(
+    path.join(currentDir, "..", "..", "..", "..", "pnpm-workspace.yaml"),
+    "utf-8",
+  );
+  const workspaceConfig: unknown = parseYaml(workspaceConfigContent);
+  const parseResult = workspaceConfigCatalogSchema.parse(workspaceConfig);
+
+  return new Map(Object.entries(parseResult.catalog ?? {}));
 };
 
-type PackageJsonDependencies = Record<string, string>;
+const workspaceConfigCatalogSchema = z.object({
+  catalog: z.record(z.string(), z.string()).optional(),
+});
+
+export type PackageJsonDependencies = Record<string, string>;
 interface PackageJson {
   dependencies: PackageJsonDependencies | undefined;
 }