chore(release): automatic release v0.1.0

.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/package.json

@@ -28,6 +28,7 @@
     "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
+    "@homarr/old-schema": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
@@ -41,26 +42,26 @@
     "@mantine/tiptap": "^7.12.2",
     "@million/lint": "1.0.0-rc.84",
     "@t3-oss/env-nextjs": "^0.11.1",
-    "@tabler/icons-react": "^3.14.0",
-    "@tanstack/react-query": "^5.55.0",
-    "@tanstack/react-query-devtools": "^5.55.0",
-    "@tanstack/react-query-next-experimental": "5.55.0",
+    "@tabler/icons-react": "^3.16.0",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.56.2",
+    "@tanstack/react-query-next-experimental": "5.56.2",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "0.10.0",
     "@xterm/xterm": "^5.5.0",
-    "chroma-js": "^3.0.0",
+    "chroma-js": "^3.1.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
     "flag-icons": "^7.2.3",
     "glob": "^11.0.0",
     "jotai": "^2.9.3",
     "mantine-react-table": "2.0.0-beta.6",
-    "next": "^14.2.8",
+    "next": "^14.2.11",
     "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
@@ -82,10 +83,10 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/swagger-ui-react": "^4.18.3",
-    "concurrently": "^8.2.2",
-    "eslint": "^9.9.1",
+    "concurrently": "^9.0.1",
+    "eslint": "^9.10.0",
     "node-loader": "^2.0.0",
     "prettier": "^3.3.3",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
   }
 }

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -5,7 +5,15 @@ import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
-import { createWSClient, loggerLink, unstable_httpBatchStreamLink, wsLink } from "@trpc/client";
+import {
+  createWSClient,
+  httpLink,
+  isNonJsonSerializable,
+  loggerLink,
+  splitLink,
+  unstable_httpBatchStreamLink,
+  wsLink,
+} from "@trpc/client";
 import superjson from "superjson";
 
 import type { AppRouter } from "@homarr/api";
@@ -34,28 +42,39 @@ export function TRPCReactProvider(props: PropsWithChildren) {
           enabled: (opts) =>
             process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
         }),
-        (args) => {
-          return ({ op, next }) => {
-            console.log("op", op.type, op.input, op.path, op.id);
-            if (op.type === "subscription") {
-              const link = wsLink<AppRouter>({
-                client: wsClient,
-                transformer: superjson,
-              });
-              return link(args)({ op, next });
-            }
-
-            return unstable_httpBatchStreamLink({
+        splitLink({
+          condition: ({ type }) => type === "subscription",
+          true: wsLink<AppRouter>({
+            client: wsClient,
+            transformer: superjson,
+          }),
+          false: splitLink({
+            condition: ({ input }) => isNonJsonSerializable(input),
+            true: httpLink({
+              /**
+               * We don't want to transform the data here as we want to use form data
+               */
+              transformer: {
+                serialize(object: unknown) {
+                  return object;
+                },
+                deserialize(data: unknown) {
+                  return data;
+                },
+              },
+              url: `${getBaseUrl()}/api/trpc`,
+            }),
+            false: unstable_httpBatchStreamLink({
               transformer: superjson,
               url: `${getBaseUrl()}/api/trpc`,
               headers() {
                 const headers = new Headers();
                 headers.set("x-trpc-source", "nextjs-react");
                 return headers;
               },
-            })(args)({ op, next });
-          };
-        },
+            }),
+          }),
+        }),
       ],
     });
   });

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]/layout.tsx

@@ -12,6 +12,7 @@ import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
 
 import { Analytics } from "~/components/layout/analytics";
+import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
 import { JotaiProvider } from "./_client-providers/jotai";
 import { CustomMantineProvider } from "./_client-providers/mantine";
 import { NextInternationalProvider } from "./_client-providers/next-international";
@@ -70,6 +71,7 @@ export default async function Layout(props: { children: React.ReactNode; params:
     <html lang="en" data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
       <head>
         <Analytics />
+        <SearchEngineOptimization />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>

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

@@ -1,3 +1,4 @@
+import { headers } from "next/headers";
 import Image from "next/image";
 import {
   Accordion,
@@ -17,16 +18,15 @@ import {
   Title,
 } from "@mantine/core";
 import { IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
-import { setStaticParamsLocale } from "next-international/server";
 
-import { getScopedI18n, getStaticParams } from "@homarr/translation/server";
+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 contributorsData from "../../../../../../../static-data/contributors.json";
-import translatorsData from "../../../../../../../static-data/translators.json";
+import type githubContributorsJson from "../../../../../../../static-data/contributors.json";
+import type crowdinContributorsJson from "../../../../../../../static-data/translators.json";
 import classes from "./about.module.css";
 
 export async function generateMetadata() {
@@ -37,16 +37,26 @@ export async function generateMetadata() {
   };
 }
 
-interface PageProps {
-  params: {
-    locale: string;
-  };
-}
+const getHost = () => {
+  if (process.env.HOSTNAME) {
+    return `${process.env.HOSTNAME}:3000`;
+  }
 
-export default async function AboutPage({ params: { locale } }: PageProps) {
-  setStaticParamsLocale(locale);
+  return headers().get("host");
+};
+
+export default async function AboutPage() {
+  const baseServerUrl = `http://${getHost()}`;
   const t = await getScopedI18n("management.page.about");
   const attributes = await getPackageAttributesAsync();
+  const githubContributors = (await fetch(`${baseServerUrl}/api/about/contributors/github`).then((res) =>
+    res.json(),
+  )) as typeof githubContributorsJson;
+
+  const crowdinContributors = (await fetch(`${baseServerUrl}/api/about/contributors/crowdin`).then((res) =>
+    res.json(),
+  )) as typeof crowdinContributorsJson;
+
   return (
     <div>
       <DynamicBreadcrumb />
@@ -70,14 +80,14 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
               <Text>{t("accordion.contributors.title")}</Text>
               <Text size="sm" c="dimmed">
                 {t("accordion.contributors.subtitle", {
-                  count: contributorsData.length,
+                  count: githubContributors.length,
                 })}
               </Text>
             </Stack>
           </AccordionControl>
           <AccordionPanel>
             <Flex wrap="wrap" gap="xs">
-              {contributorsData.map((contributor) => (
+              {githubContributors.map((contributor) => (
                 <GenericContributorLinkCard
                   key={contributor.login}
                   link={`https://github.com/${contributor.login}`}
@@ -94,14 +104,14 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
               <Text>{t("accordion.translators.title")}</Text>
               <Text size="sm" c="dimmed">
                 {t("accordion.translators.subtitle", {
-                  count: translatorsData.length,
+                  count: crowdinContributors.length,
                 })}
               </Text>
             </Stack>
           </AccordionControl>
           <AccordionPanel>
             <Flex wrap="wrap" gap="xs">
-              {translatorsData.map((translator) => (
+              {crowdinContributors.map((translator) => (
                 <GenericContributorLinkCard
                   key={translator.username}
                   link={`https://crowdin.com/profile/${translator.username}`}
@@ -164,9 +174,3 @@ const GenericContributorLinkCard = ({ name, image, link }: GenericContributorLin
     </AspectRatio>
   );
 };
-
-export function generateStaticParams() {
-  return getStaticParams();
-}
-
-export const dynamic = "force-static";

apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx

@@ -1,32 +1,35 @@
 "use client";
 
 import { useCallback } from "react";
-import { IconCategoryPlus } from "@tabler/icons-react";
+import { Affix, Button, Group, Menu } from "@mantine/core";
+import { IconCategoryPlus, IconChevronDown, IconFileImport } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
+import { BetaBadge } from "@homarr/ui";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
 import { AddBoardModal } from "~/components/manage/boards/add-board-modal";
-import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { ImportBoardModal } from "~/components/manage/boards/import-board-modal";
 
 interface CreateBoardButtonProps {
   boardNames: string[];
 }
 
 export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
   const t = useI18n();
-  const { openModal } = useModalAction(AddBoardModal);
+  const { openModal: openAddModal } = useModalAction(AddBoardModal);
+  const { openModal: openImportModal } = useModalAction(ImportBoardModal);
 
   const { mutateAsync, isPending } = clientApi.board.createBoard.useMutation({
     onSettled: async () => {
       await revalidatePathActionAsync("/manage/boards");
     },
   });
 
-  const onClick = useCallback(() => {
-    openModal({
+  const onCreateClick = useCallback(() => {
+    openAddModal({
       onSuccess: async (values) => {
         await mutateAsync({
           name: values.name,
@@ -36,11 +39,41 @@ export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
       },
       boardNames,
     });
-  }, [mutateAsync, boardNames, openModal]);
+  }, [mutateAsync, boardNames, openAddModal]);
+
+  const onImportClick = useCallback(() => {
+    openImportModal({ boardNames });
+  }, [openImportModal, boardNames]);
+
+  const buttonGroupContent = (
+    <>
+      <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={onCreateClick} loading={isPending}>
+        {t("management.page.board.action.new.label")}
+      </Button>
+      <Menu position="bottom-end">
+        <Menu.Target>
+          <Button px="xs" ms={1}>
+            <IconChevronDown size="1rem" />
+          </Button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item onClick={onImportClick} leftSection={<IconFileImport size="1rem" />}>
+            <Group>
+              {t("board.action.oldImport.label")}
+              <BetaBadge size="xs" />
+            </Group>
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
 
   return (
-    <MobileAffixButton leftSection={<IconCategoryPlus size="1rem" />} onClick={onClick} loading={isPending}>
-      {t("management.page.board.action.new.label")}
-    </MobileAffixButton>
+    <>
+      <Button.Group visibleFrom="md">{buttonGroupContent}</Button.Group>
+      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
+        <Button.Group>{buttonGroupContent}</Button.Group>
+      </Affix>
+    </>
   );
 };

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();
   }