chore(release): automatic release v0.1.0

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

apps/nextjs/package.json

@@ -45,9 +45,9 @@
     "@million/lint": "1.0.11",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tabler/icons-react": "^3.21.0",
-    "@tanstack/react-query": "^5.59.16",
-    "@tanstack/react-query-devtools": "^5.59.16",
-    "@tanstack/react-query-next-experimental": "5.59.16",
+    "@tanstack/react-query": "^5.59.19",
+    "@tanstack/react-query-devtools": "^5.59.19",
+    "@tanstack/react-query-next-experimental": "5.59.19",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
@@ -70,7 +70,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.80.5",
+    "sass": "^1.80.6",
     "superjson": "2.2.1",
     "swagger-ui-react": "^5.17.14",
     "use-deep-compare-effect": "^1.8.1"
@@ -80,13 +80,13 @@
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/chroma-js": "2.4.4",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/swagger-ui-react": "^4.18.3",
-    "concurrently": "^9.0.1",
-    "eslint": "^9.13.0",
+    "concurrently": "^9.1.0",
+    "eslint": "^9.14.0",
     "node-loader": "^2.0.0",
     "prettier": "^3.3.3",
     "typescript": "^5.6.3"

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

@@ -0,0 +1,12 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import { useSuspenseDayJsLocalization } from "@homarr/translation/dayjs";
+
+export const DayJsLoader = ({ children }: PropsWithChildren) => {
+  // Load the dayjs localization for the current locale with suspense
+  useSuspenseDayJsLocalization();
+
+  return children;
+};

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

@@ -8,14 +8,18 @@ import dayjs from "dayjs";
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { parseCookies, setClientCookie } from "@homarr/common";
+import type { ColorScheme } from "@homarr/definitions";
+import { colorSchemeCookieKey } from "@homarr/definitions";
 
-export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
+export const CustomMantineProvider = ({
+  children,
+  defaultColorScheme,
+}: PropsWithChildren<{ defaultColorScheme: ColorScheme }>) => {
   const manager = useColorSchemeManager();
-
   return (
     <DirectionProvider>
       <MantineProvider
-        defaultColorScheme="dark"
+        defaultColorScheme={defaultColorScheme}
         colorSchemeManager={manager}
         theme={createTheme({
           primaryColor: "red",
@@ -28,12 +32,11 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-function useColorSchemeManager(): MantineColorSchemeManager {
-  const key = "homarr-color-scheme";
+export function useColorSchemeManager(): MantineColorSchemeManager {
   const { data: session } = useSession();
 
   const updateCookieValue = (value: Exclude<MantineColorScheme, "auto">) => {
-    setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
+    setClientCookie(colorSchemeCookieKey, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
   };
 
   const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({
@@ -50,7 +53,7 @@ function useColorSchemeManager(): MantineColorSchemeManager {
 
       try {
         const cookies = parseCookies(document.cookie);
-        return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue;
+        return (cookies[colorSchemeCookieKey] as MantineColorScheme | undefined) ?? defaultValue;
       } catch {
         return defaultValue;
       }

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

@@ -4,10 +4,17 @@ import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
 import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
+import type { ColorScheme } from "@homarr/definitions";
+
+import { useColorSchemeManager } from "../../_client-providers/mantine";
 import { useRequiredBoard } from "./_context";
 
-export const BoardMantineProvider = ({ children }: PropsWithChildren) => {
+export const BoardMantineProvider = ({
+  children,
+  defaultColorScheme,
+}: PropsWithChildren<{ defaultColorScheme: ColorScheme }>) => {
   const board = useRequiredBoard();
+  const colorSchemeManager = useColorSchemeManager();
 
   const theme = createTheme({
     colors: {
@@ -18,7 +25,11 @@ export const BoardMantineProvider = ({ children }: PropsWithChildren) => {
     autoContrast: true,
   });
 
-  return <MantineProvider theme={theme}>{children}</MantineProvider>;
+  return (
+    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
+      {children}
+    </MantineProvider>
+  );
 };
 
 export const generateColors = (hex: string) => {

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

@@ -12,7 +12,7 @@ import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
 import { useRequiredBoard } from "../../(content)/_context";
 import classes from "./danger.module.css";
 
-export const DangerZoneSettingsContent = () => {
+export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility: boolean }) => {
   const board = useRequiredBoard();
   const t = useScopedI18n("board.setting");
   const router = useRouter();
@@ -90,14 +90,18 @@ export const DangerZoneSettingsContent = () => {
         buttonText={t("section.dangerZone.action.rename.button")}
         onClick={onRenameClick}
       />
-      <Divider />
-      <DangerZoneRow
-        label={t("section.dangerZone.action.visibility.label")}
-        description={t(`section.dangerZone.action.visibility.description.${visibility}`)}
-        buttonText={t(`section.dangerZone.action.visibility.button.${visibility}`)}
-        onClick={onVisibilityClick}
-        isPending={isChangeVisibilityPending}
-      />
+      {hideVisibility ? null : (
+        <>
+          <Divider />
+          <DangerZoneRow
+            label={t("section.dangerZone.action.visibility.label")}
+            description={t(`section.dangerZone.action.visibility.description.${visibility}`)}
+            buttonText={t(`section.dangerZone.action.visibility.button.${visibility}`)}
+            onClick={onVisibilityClick}
+            isPending={isChangeVisibilityPending}
+          />
+        </>
+      )}
       <Divider />
       <DangerZoneRow
         label={t("section.dangerZone.action.delete.label")}

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

@@ -14,6 +14,8 @@ import { TRPCError } from "@trpc/server";
 
 import { api } from "@homarr/api/server";
 import { capitalize } from "@homarr/common";
+import { db } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import type { TranslationObject } from "@homarr/translation";
 import { getScopedI18n } from "@homarr/translation/server";
 import type { TablerIcon } from "@homarr/ui";
@@ -63,6 +65,7 @@ const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
 
 export default async function BoardSettingsPage({ params, searchParams }: Props) {
   const { board, permissions } = await getBoardAndPermissionsAsync(params);
+  const boardSettings = await getServerSettingByKeyAsync(db, "board");
   const { hasFullAccess } = await getBoardPermissionsAsync(board);
   const t = await getScopedI18n("board.setting");
 
@@ -92,7 +95,7 @@ export default async function BoardSettingsPage({ params, searchParams }: Props)
                 <BoardAccessSettings board={board} initialPermissions={permissions} />
               </AccordionItemFor>
               <AccordionItemFor value="dangerZone" icon={IconAlertTriangle} danger noPadding>
-                <DangerZoneSettingsContent />
+                <DangerZoneSettingsContent hideVisibility={boardSettings.defaultBoardId === board.id} />
               </AccordionItemFor>
             </>
           )}

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -8,6 +8,7 @@ import { logger } from "@homarr/log";
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
 import { ClientShell } from "~/components/layout/shell";
+import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import type { Board } from "./_types";
 import { BoardProvider } from "./(content)/_context";
 import type { Params } from "./(content)/_creator";
@@ -37,10 +38,11 @@ export const createBoardLayout = <TParams extends Params>({
 
       throw error;
     });
+    const colorScheme = await getCurrentColorSchemeAsync();
 
     return (
       <BoardProvider initialBoard={initialBoard}>
-        <BoardMantineProvider>
+        <BoardMantineProvider defaultColorScheme={colorScheme}>
           <CustomCss />
           <ClientShell hasNavigation={false}>
             <MainHeader

apps/nextjs/src/app/[locale]/layout.tsx

@@ -6,19 +6,20 @@ import "@homarr/spotlight/styles.css";
 import "@homarr/ui/styles.css";
 import "~/styles/scroll-area.scss";
 
-import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
 import { NextIntlClientProvider } from "next-intl";
 
 import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
-import { isLocaleSupported } from "@homarr/translation";
-import { getI18nMessages, getScopedI18n } from "@homarr/translation/server";
+import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
+import { getI18nMessages } from "@homarr/translation/server";
 
 import { Analytics } from "~/components/layout/analytics";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
+import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
+import { DayJsLoader } from "./_client-providers/dayjs-loader";
 import { JotaiProvider } from "./_client-providers/jotai";
 import { CustomMantineProvider } from "./_client-providers/mantine";
 import { AuthProvider } from "./_client-providers/session";
@@ -30,7 +31,8 @@ const fontSans = Inter({
   variable: "--font-sans",
 });
 
-export const generateMetadata = (): Metadata => ({
+// eslint-disable-next-line no-restricted-syntax
+export const generateMetadata = async (): Promise<Metadata> => ({
   title: "Homarr",
   description:
     "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
@@ -49,7 +51,7 @@ export const generateMetadata = (): Metadata => ({
     title: "Homarr",
     capable: true,
     startupImage: { url: "/logo/logo.png" },
-    statusBarStyle: getColorScheme() === "dark" ? "black-translucent" : "default",
+    statusBarStyle: (await getCurrentColorSchemeAsync()) === "dark" ? "black-translucent" : "default",
   },
 });
 
@@ -66,9 +68,8 @@ export default async function Layout(props: { children: React.ReactNode; params:
   }
 
   const session = await auth();
-  const colorScheme = getColorScheme();
-  const tCommon = await getScopedI18n("common");
-  const direction = tCommon("direction");
+  const colorScheme = await getCurrentColorSchemeAsync();
+  const direction = isLocaleRTL(props.params.locale) ? "rtl" : "ltr";
   const i18nMessages = await getI18nMessages();
 
   const StackedProvider = composeWrappers([
@@ -77,8 +78,9 @@ export default async function Layout(props: { children: React.ReactNode; params:
     },
     (innerProps) => <JotaiProvider {...innerProps} />,
     (innerProps) => <TRPCReactProvider {...innerProps} />,
+    (innerProps) => <DayJsLoader {...innerProps} />,
     (innerProps) => <NextIntlClientProvider {...innerProps} messages={i18nMessages} />,
-    (innerProps) => <CustomMantineProvider {...innerProps} />,
+    (innerProps) => <CustomMantineProvider {...innerProps} defaultColorScheme={colorScheme} />,
     (innerProps) => <ModalProvider {...innerProps} />,
   ]);
 
@@ -106,7 +108,3 @@ export default async function Layout(props: { children: React.ReactNode; params:
     </html>
   );
 }
-
-const getColorScheme = () => {
-  return cookies().get("homarr-color-scheme")?.value ?? "dark";
-};

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { useParams } from "next/navigation";
 import { ActionIcon, Avatar, Button, Card, Collapse, Group, Kbd, Stack, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
@@ -23,7 +22,6 @@ interface SecretCardProps {
 }
 
 export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
-  const params = useParams<{ locale: string }>();
   const t = useI18n();
   const { isPublic } = integrationSecretKindObject[secret.kind];
   const [publicSecretDisplayOpened, { toggle: togglePublicSecretDisplay }] = useDisclosure(false);
@@ -45,7 +43,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
           <Group>
             <Text c="gray.6" size="sm">
               {t("integration.secrets.lastUpdated", {
-                date: dayjs().locale(params.locale).to(dayjs(secret.updatedAt)),
+                date: dayjs().to(dayjs(secret.updatedAt)),
               })}
             </Text>
             {isPublic ? (

apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Group, Text } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+
+import type { ColorScheme } from "@homarr/definitions";
+import { colorSchemes } from "@homarr/definitions";
+import type { ServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
+import { SelectWithCustomItems } from "@homarr/ui";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const AppearanceSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["appearance"] }) => {
+  const tApperance = useScopedI18n("management.page.settings.section.appearance");
+
+  return (
+    <CommonSettingsForm settingKey="appearance" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <SelectWithCustomItems
+            label={tApperance("defaultColorScheme.label")}
+            data={colorSchemes.map((scheme) => ({
+              value: scheme,
+              label: tApperance(`defaultColorScheme.options.${scheme}`),
+            }))}
+            {...form.getInputProps("defaultColorScheme")}
+            SelectOption={ApperanceCustomOption}
+          />
+        </>
+      )}
+    </CommonSettingsForm>
+  );
+};
+
+const appearanceIcons = {
+  light: IconSun,
+  dark: IconMoon,
+};
+
+const ApperanceCustomOption = ({ value, label }: { value: ColorScheme; label: string }) => {
+  const Icon = appearanceIcons[value];
+
+  return (
+    <Group>
+      <Icon size={16} stroke={1.5} />
+      <Text fz="sm" fw={500}>
+        {label}
+      </Text>
+    </Group>
+  );
+};