From 979794adaa993dfa432baed2eec84e250396eb54 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 26 Oct 2024 00:14:47 +0200
Subject: [PATCH 1/7] feat: add server settings for default board, default
 color scheme and default locale

---
 .../[locale]/_client-providers/mantine.tsx    | 10 ++--
 .../app/[locale]/boards/(content)/_theme.tsx  | 15 +++++-
 .../app/[locale]/boards/_layout-creator.tsx   |  4 +-
 apps/nextjs/src/app/[locale]/layout.tsx       | 16 +++---
 .../_components/appearance-settings-form.tsx  | 49 +++++++++++++++++
 .../_components/board-settings-form.tsx       | 42 +++++++++++++++
 .../settings/_components/common-form.tsx      | 54 +++++++++++++++++++
 .../_components/culture-settings-form.tsx     | 43 +++++++++++++++
 .../src/app/[locale]/manage/settings/page.tsx | 15 ++++++
 .../src/components/layout/analytics.tsx       |  5 +-
 .../layout/search-engine-optimization.tsx     | 36 ++++++-------
 apps/nextjs/src/middleware.ts                 |  9 ++--
 apps/nextjs/src/theme/color-scheme.ts         | 17 ++++++
 .../analytics/src/send-server-analytics.ts    | 19 ++-----
 packages/api/src/router/board.ts              | 26 ++++++++-
 packages/api/src/router/serverSettings.ts     | 53 ++++--------------
 packages/cron-jobs/src/jobs/analytics.ts      | 19 ++-----
 packages/db/migrations/seed.ts                | 35 ++++++++----
 packages/db/queries/index.ts                  |  1 +
 packages/db/queries/server-setting.ts         | 52 ++++++++++++++++++
 packages/server-settings/package.json         |  4 ++
 packages/server-settings/src/index.ts         | 20 ++++++-
 packages/translation/src/middleware.ts        | 20 ++++---
 pnpm-lock.yaml                                |  7 +++
 24 files changed, 439 insertions(+), 132 deletions(-)
 create mode 100644 apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
 create mode 100644 apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
 create mode 100644 apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
 create mode 100644 apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
 create mode 100644 apps/nextjs/src/theme/color-scheme.ts
 create mode 100644 packages/db/queries/server-setting.ts

diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
index 867ecfd94..edd5952ac 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
+++ b/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";
 
-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,7 +32,7 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-function useColorSchemeManager(): MantineColorSchemeManager {
+export function useColorSchemeManager(): MantineColorSchemeManager {
   const key = "homarr-color-scheme";
   const { data: session } = useSession();
 
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
index e3c87aa05..755c0a42b 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+++ b/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) => {
diff --git a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
index 4e8edd149..e6737e14e 100644
--- a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
+++ b/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
diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
index 22888ea0b..0372b7036 100644
--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -6,8 +6,6 @@ import "@homarr/spotlight/styles.css";
 import "@homarr/ui/styles.css";
 import "~/styles/scroll-area.scss";
 
-import { cookies } from "next/headers";
-
 import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
@@ -16,6 +14,7 @@ import { getScopedI18n } 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 { JotaiProvider } from "./_client-providers/jotai";
 import { CustomMantineProvider } from "./_client-providers/mantine";
 import { NextInternationalProvider } from "./_client-providers/next-international";
@@ -28,7 +27,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.",
@@ -47,7 +47,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",
   },
 });
 
@@ -60,7 +60,7 @@ export const viewport: Viewport = {
 
 export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
   const session = await auth();
-  const colorScheme = getColorScheme();
+  const colorScheme = await getCurrentColorSchemeAsync();
   const tCommon = await getScopedI18n("common");
   const direction = tCommon("direction");
 
@@ -71,7 +71,7 @@ export default async function Layout(props: { children: React.ReactNode; params:
     (innerProps) => <JotaiProvider {...innerProps} />,
     (innerProps) => <TRPCReactProvider {...innerProps} />,
     (innerProps) => <NextInternationalProvider {...innerProps} locale={props.params.locale} />,
-    (innerProps) => <CustomMantineProvider {...innerProps} />,
+    (innerProps) => <CustomMantineProvider {...innerProps} defaultColorScheme={colorScheme} />,
     (innerProps) => <ModalProvider {...innerProps} />,
   ]);
 
@@ -99,7 +99,3 @@ export default async function Layout(props: { children: React.ReactNode; params:
     </html>
   );
 }
-
-const getColorScheme = () => {
-  return cookies().get("homarr-color-scheme")?.value ?? "dark";
-};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
new file mode 100644
index 000000000..aa8ad6eb7
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Group, Text } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/select-with-custom-items";
+
+import type { ColorScheme } from "@homarr/definitions";
+import { colorSchemes } from "@homarr/definitions";
+import type { ServerSettings } from "@homarr/server-settings";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const AppearanceSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["appearance"] }) => {
+  return (
+    <CommonSettingsForm settingKey="appearance" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <SelectWithCustomItems
+            label="Default color scheme"
+            data={colorSchemes.map((scheme) => ({
+              value: scheme,
+              label: 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>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
new file mode 100644
index 000000000..4f4c5c226
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { Group, Text } from "@mantine/core";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/select-with-custom-items";
+
+import { clientApi } from "@homarr/api/client";
+import type { ServerSettings } from "@homarr/server-settings";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["board"] }) => {
+  const [selectableBoards] = clientApi.board.getPublicBoards.useSuspenseQuery();
+
+  return (
+    <CommonSettingsForm settingKey="board" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <SelectWithCustomItems
+            label="Global default board"
+            description="Only public boards are available for selection"
+            data={selectableBoards.map((board) => ({
+              value: board.id,
+              label: board.name,
+              image: board.logoImageUrl,
+            }))}
+            SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
+              <Group>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
+                <Text fz="sm" fw={500}>
+                  {label}
+                </Text>
+              </Group>
+            )}
+            {...form.getInputProps("defaultBoardId")}
+          />
+        </>
+      )}
+    </CommonSettingsForm>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
new file mode 100644
index 000000000..8cc7d4601
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { Button, Group, Stack } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { ServerSettings } from "@homarr/server-settings";
+
+export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
+  settingKey,
+  defaultValues,
+  children,
+}: {
+  settingKey: TKey;
+  defaultValues: ServerSettings[TKey];
+  children: (form: ReturnType<typeof useForm<ServerSettings[TKey]>>) => React.ReactNode;
+}) => {
+  const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
+    onSuccess() {
+      showSuccessNotification({
+        message: "Settings saved successfully",
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: "Failed to save settings",
+      });
+    },
+  });
+  const form = useForm({
+    initialValues: defaultValues,
+  });
+
+  const handleSubmitAsync = async (values: ServerSettings[TKey]) => {
+    await mutateAsync({
+      settingsKey: settingKey,
+      value: values,
+    });
+  };
+
+  return (
+    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
+      <Stack gap="sm">
+        {children(form)}
+        <Group justify="end">
+          <Button type="submit" loading={isPending}>
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
new file mode 100644
index 000000000..88b104ab4
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Group, Text } from "@mantine/core";
+import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/select-with-custom-items";
+
+import { objectEntries } from "@homarr/common";
+import type { ServerSettings } from "@homarr/server-settings";
+import type { SupportedLanguage } from "@homarr/translation";
+import { localeAttributes } from "@homarr/translation";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const CultureSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["culture"] }) => {
+  return (
+    <CommonSettingsForm settingKey="culture" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <SelectWithCustomItems
+            label="Default locale"
+            data={objectEntries(localeAttributes).map(([value, { name }]) => ({
+              value,
+              label: name,
+            }))}
+            defaultValue={defaultValues.defaultLocale}
+            SelectOption={({ value, label }: { value: SupportedLanguage; label: string }) => {
+              const currentConfig = localeAttributes[value];
+
+              return (
+                <Group>
+                  <span className={`fi fi-${currentConfig.flagIcon}`} style={{ borderRadius: 4 }}></span>
+                  <Text fz="sm" fw={500}>
+                    {label}
+                  </Text>
+                </Group>
+              );
+            }}
+            {...form.getInputProps("defaultLocale")}
+          />
+        </>
+      )}
+    </CommonSettingsForm>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
index 26ef0b3c1..abe38ed43 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -6,6 +6,9 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { CrawlingAndIndexingSettings } from "~/app/[locale]/manage/settings/_components/crawling-and-indexing.settings";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { AnalyticsSettings } from "./_components/analytics.settings";
+import { AppearanceSettingsForm } from "./_components/appearance-settings-form";
+import { BoardSettingsForm } from "./_components/board-settings-form";
+import { CultureSettingsForm } from "./_components/culture-settings-form";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -26,6 +29,18 @@ export default async function SettingsPage() {
         <Title order={1}>{t("title")}</Title>
         <AnalyticsSettings initialData={serverSettings.analytics} />
         <CrawlingAndIndexingSettings initialData={serverSettings.crawlingAndIndexing} />
+        <Stack>
+          <Title order={2}>Boards</Title>
+          <BoardSettingsForm defaultValues={serverSettings.board} />
+        </Stack>
+        <Stack>
+          <Title order={2}>Appearance</Title>
+          <AppearanceSettingsForm defaultValues={serverSettings.appearance} />
+        </Stack>
+        <Stack>
+          <Title order={2}>Culture</Title>
+          <CultureSettingsForm defaultValues={serverSettings.culture} />
+        </Stack>
       </Stack>
     </>
   );
diff --git a/apps/nextjs/src/components/layout/analytics.tsx b/apps/nextjs/src/components/layout/analytics.tsx
index 322d7a0a6..8d81fa13c 100644
--- a/apps/nextjs/src/components/layout/analytics.tsx
+++ b/apps/nextjs/src/components/layout/analytics.tsx
@@ -1,11 +1,12 @@
 import Script from "next/script";
 
 import { UMAMI_WEBSITE_ID } from "@homarr/analytics";
-import { api } from "@homarr/api/server";
+import { db } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 
 export const Analytics = async () => {
   // For static pages it will not find any analytics data so we do not include the script on them
-  const analytics = await api.serverSettings.getAnalytics().catch(() => null);
+  const analytics = await getServerSettingByKeyAsync(db, "analytics").catch(() => null);
 
   if (analytics?.enableGeneral) {
     return <Script src="https://umami.homarr.dev/script.js" data-website-id={UMAMI_WEBSITE_ID} defer />;
diff --git a/apps/nextjs/src/components/layout/search-engine-optimization.tsx b/apps/nextjs/src/components/layout/search-engine-optimization.tsx
index 2fcc82d66..55e08a9e4 100644
--- a/apps/nextjs/src/components/layout/search-engine-optimization.tsx
+++ b/apps/nextjs/src/components/layout/search-engine-optimization.tsx
@@ -1,28 +1,28 @@
-import SuperJSON from "superjson";
-
-import { db, eq } from "@homarr/db";
-import { serverSettings } from "@homarr/db/schema/sqlite";
-import type { defaultServerSettings } from "@homarr/server-settings";
+import { db } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 
 export const SearchEngineOptimization = async () => {
-  const crawlingAndIndexingSetting = await db.query.serverSettings.findFirst({
-    where: eq(serverSettings.settingKey, "crawlingAndIndexing"),
-  });
+  const crawlingAndIndexingSetting = await getServerSettingByKeyAsync(db, "crawlingAndIndexing");
+
+  const robotsAttributes: string[] = [];
 
-  if (!crawlingAndIndexingSetting) {
-    return null;
+  if (crawlingAndIndexingSetting.noIndex) {
+    robotsAttributes.push("noindex");
   }
 
-  const value = SuperJSON.parse<(typeof defaultServerSettings)["crawlingAndIndexing"]>(
-    crawlingAndIndexingSetting.value,
-  );
+  if (crawlingAndIndexingSetting.noFollow) {
+    robotsAttributes.push("nofollow");
+  }
 
-  const robotsAttributes = [...(value.noIndex ? ["noindex"] : []), ...(value.noIndex ? ["nofollow"] : [])];
+  const googleAttributes: string[] = [];
 
-  const googleAttributes = [
-    ...(value.noSiteLinksSearchBox ? ["nositelinkssearchbox"] : []),
-    ...(value.noTranslate ? ["notranslate"] : []),
-  ];
+  if (crawlingAndIndexingSetting.noSiteLinksSearchBox) {
+    googleAttributes.push("nositelinkssearchbox");
+  }
+
+  if (crawlingAndIndexingSetting.noTranslate) {
+    googleAttributes.push("notranslate");
+  }
 
   return (
     <>
diff --git a/apps/nextjs/src/middleware.ts b/apps/nextjs/src/middleware.ts
index 6b27019f1..7559f5d63 100644
--- a/apps/nextjs/src/middleware.ts
+++ b/apps/nextjs/src/middleware.ts
@@ -1,9 +1,12 @@
 import type { NextRequest } from "next/server";
 
-import { I18nMiddleware } from "@homarr/translation/middleware";
+import { fetchApi } from "@homarr/api/client";
+import { createI18nMiddleware } from "@homarr/translation/middleware";
 
-export function middleware(request: NextRequest) {
-  return I18nMiddleware(request);
+export async function middleware(request: NextRequest) {
+  const culture = await fetchApi.serverSettings.getCulture.query();
+  const next = createI18nMiddleware(culture.defaultLocale);
+  return next(request);
 }
 
 export const config = {
diff --git a/apps/nextjs/src/theme/color-scheme.ts b/apps/nextjs/src/theme/color-scheme.ts
new file mode 100644
index 000000000..bb38fd67a
--- /dev/null
+++ b/apps/nextjs/src/theme/color-scheme.ts
@@ -0,0 +1,17 @@
+import { cache } from "react";
+import { cookies } from "next/headers";
+
+import { db } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
+import type { ColorScheme } from "@homarr/definitions";
+
+export const getCurrentColorSchemeAsync = cache(async () => {
+  const cookieValue = cookies().get("homarr-color-scheme")?.value;
+
+  if (cookieValue) {
+    return cookieValue as ColorScheme;
+  }
+
+  const appearanceSettings = await getServerSettingByKeyAsync(db, "appearance");
+  return appearanceSettings.defaultColorScheme;
+});
diff --git a/packages/analytics/src/send-server-analytics.ts b/packages/analytics/src/send-server-analytics.ts
index 532bd5c4c..51b3741ae 100644
--- a/packages/analytics/src/send-server-analytics.ts
+++ b/packages/analytics/src/send-server-analytics.ts
@@ -1,9 +1,9 @@
 import type { UmamiEventData } from "@umami/node";
 import { Umami } from "@umami/node";
-import SuperJSON from "superjson";
 
-import { count, db, eq } from "@homarr/db";
-import { integrations, items, serverSettings, users } from "@homarr/db/schema/sqlite";
+import { count, db } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
+import { integrations, items, users } from "@homarr/db/schema/sqlite";
 import { logger } from "@homarr/log";
 import type { defaultServerSettings } from "@homarr/server-settings";
 
@@ -12,18 +12,7 @@ import { UMAMI_HOST_URL, UMAMI_WEBSITE_ID } from "./constants";
 
 export const sendServerAnalyticsAsync = async () => {
   const stopWatch = new Stopwatch();
-  const setting = await db.query.serverSettings.findFirst({
-    where: eq(serverSettings.settingKey, "analytics"),
-  });
-
-  if (!setting) {
-    logger.info(
-      "Server does not know the configured state of analytics. No data will be sent. Enable analytics in the settings",
-    );
-    return;
-  }
-
-  const analyticsSettings = SuperJSON.parse<typeof defaultServerSettings.analytics>(setting.value);
+  const analyticsSettings = await getServerSettingByKeyAsync(db, "analytics");
 
   if (!analyticsSettings.enableGeneral) {
     logger.info("Analytics are disabled. No data will be sent. Enable analytics in the settings");
diff --git a/packages/api/src/router/board.ts b/packages/api/src/router/board.ts
index bc1fba67a..eaaccdb8a 100644
--- a/packages/api/src/router/board.ts
+++ b/packages/api/src/router/board.ts
@@ -4,6 +4,7 @@ import superjson from "superjson";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import type { Database, SQL } from "@homarr/db";
 import { and, createId, eq, inArray, like, or } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import {
   boardGroupPermissions,
   boards,
@@ -41,6 +42,16 @@ export const boardRouter = createTRPCRouter({
         throw error;
       }
     }),
+  getPublicBoards: publicProcedure.query(async ({ ctx }) => {
+    return await ctx.db.query.boards.findMany({
+      columns: {
+        id: true,
+        name: true,
+        logoImageUrl: true,
+      },
+      where: eq(boards.isPublic, true),
+    });
+  }),
   getAllBoards: publicProcedure.query(async ({ ctx }) => {
     const userId = ctx.session?.user.id;
     const permissionsOfCurrentUserWhenPresent = await ctx.db.query.boardUserPermissions.findMany({
@@ -240,7 +251,20 @@ export const boardRouter = createTRPCRouter({
         })
       : null;
 
-    const boardWhere = user?.homeBoardId ? eq(boards.id, user.homeBoardId) : eq(boards.name, "home");
+    const boardSettings = await getServerSettingByKeyAsync(ctx.db, "board");
+    const boardWhere = user?.homeBoardId
+      ? eq(boards.id, user.homeBoardId)
+      : boardSettings.defaultBoardId
+        ? eq(boards.id, boardSettings.defaultBoardId)
+        : null;
+
+    if (!boardWhere) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "No home board found",
+      });
+    }
+
     await throwIfActionForbiddenAsync(ctx, boardWhere, "view");
 
     return await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
diff --git a/packages/api/src/router/serverSettings.ts b/packages/api/src/router/serverSettings.ts
index b1f00f057..d1ac27b7a 100644
--- a/packages/api/src/router/serverSettings.ts
+++ b/packages/api/src/router/serverSettings.ts
@@ -1,47 +1,16 @@
-import SuperJSON from "superjson";
-
-import { eq } from "@homarr/db";
-import { serverSettings } from "@homarr/db/schema/sqlite";
-import { logger } from "@homarr/log";
-import type { defaultServerSettings, ServerSettings } from "@homarr/server-settings";
+import { getServerSettingByKeyAsync, getServerSettingsAsync, updateServerSettingByKeyAsync } from "@homarr/db/queries";
+import type { ServerSettings } from "@homarr/server-settings";
 import { defaultServerSettingsKeys } from "@homarr/server-settings";
 import { z } from "@homarr/validation";
 
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
 
 export const serverSettingsRouter = createTRPCRouter({
-  // this must be public so anonymous users also get analytics
-  getAnalytics: publicProcedure.query(async ({ ctx }) => {
-    const setting = await ctx.db.query.serverSettings.findFirst({
-      where: eq(serverSettings.settingKey, "analytics"),
-    });
-
-    if (!setting) {
-      logger.info(
-        "Server settings for analytics is currently undefined. Using default values instead. If this persists, there may be an issue with the server settings",
-      );
-      return {
-        enableGeneral: true,
-        enableIntegrationData: false,
-        enableUserData: false,
-        enableWidgetData: false,
-      } as (typeof defaultServerSettings)["analytics"];
-    }
-
-    return SuperJSON.parse<(typeof defaultServerSettings)["analytics"]>(setting.value);
+  getCulture: publicProcedure.query(async ({ ctx }) => {
+    return await getServerSettingByKeyAsync(ctx.db, "culture");
   }),
   getAll: protectedProcedure.query(async ({ ctx }) => {
-    const settings = await ctx.db.query.serverSettings.findMany();
-
-    const data = {} as ServerSettings;
-    defaultServerSettingsKeys.forEach((key) => {
-      const settingValue = settings.find((setting) => setting.settingKey === key)?.value;
-      if (!settingValue) {
-        return;
-      }
-      data[key] = SuperJSON.parse(settingValue);
-    });
-    return data;
+    return await getServerSettingsAsync(ctx.db);
   }),
   saveSettings: protectedProcedure
     .input(
@@ -51,12 +20,10 @@ export const serverSettingsRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const databaseRunResult = await ctx.db
-        .update(serverSettings)
-        .set({
-          value: SuperJSON.stringify(input.value),
-        })
-        .where(eq(serverSettings.settingKey, input.settingsKey));
-      return databaseRunResult.changes === 1;
+      await updateServerSettingByKeyAsync(
+        ctx.db,
+        input.settingsKey,
+        input.value as ServerSettings[keyof ServerSettings],
+      );
     }),
 });
diff --git a/packages/cron-jobs/src/jobs/analytics.ts b/packages/cron-jobs/src/jobs/analytics.ts
index fc68622a1..be643050e 100644
--- a/packages/cron-jobs/src/jobs/analytics.ts
+++ b/packages/cron-jobs/src/jobs/analytics.ts
@@ -1,27 +1,16 @@
-import SuperJSON from "superjson";
-
 import { sendServerAnalyticsAsync } from "@homarr/analytics";
 import { EVERY_WEEK } from "@homarr/cron-jobs-core/expressions";
-import { db, eq } from "@homarr/db";
-import { serverSettings } from "@homarr/db/schema/sqlite";
-import type { defaultServerSettings } from "@homarr/server-settings";
+import { db } from "@homarr/db";
+import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 
 import { createCronJob } from "../lib";
 
 export const analyticsJob = createCronJob("analytics", EVERY_WEEK, {
   runOnStart: true,
 }).withCallback(async () => {
-  const analyticSetting = await db.query.serverSettings.findFirst({
-    where: eq(serverSettings.settingKey, "analytics"),
-  });
-
-  if (!analyticSetting) {
-    return;
-  }
-
-  const value = SuperJSON.parse<(typeof defaultServerSettings)["analytics"]>(analyticSetting.value);
+  const analyticSetting = await getServerSettingByKeyAsync(db, "analytics");
 
-  if (!value.enableGeneral) {
+  if (!analyticSetting.enableGeneral) {
     return;
   }
 
diff --git a/packages/db/migrations/seed.ts b/packages/db/migrations/seed.ts
index ab4a865e7..5e6b726a9 100644
--- a/packages/db/migrations/seed.ts
+++ b/packages/db/migrations/seed.ts
@@ -1,5 +1,6 @@
 import SuperJSON from "superjson";
 
+import { objectKeys } from "@homarr/common";
 import { everyoneGroup } from "@homarr/definitions";
 import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
 
@@ -32,21 +33,33 @@ const seedEveryoneGroupAsync = async (db: Database) => {
 
 const seedServerSettingsAsync = async (db: Database) => {
   const serverSettingsData = await db.query.serverSettings.findMany();
-  let insertedSettingsCount = 0;
 
   for (const settingsKey of defaultServerSettingsKeys) {
-    if (serverSettingsData.some((setting) => setting.settingKey === settingsKey)) {
-      return;
+    const currentDbEntry = serverSettingsData.find((setting) => setting.settingKey === settingsKey);
+    if (!currentDbEntry) {
+      await db.insert(serverSettings).values({
+        settingKey: settingsKey,
+        value: SuperJSON.stringify(defaultServerSettings[settingsKey]),
+      });
+      console.log(`Created serverSetting through seed key=${settingsKey}`);
+      continue;
     }
 
-    await db.insert(serverSettings).values({
-      settingKey: settingsKey,
-      value: SuperJSON.stringify(defaultServerSettings[settingsKey]),
-    });
-    insertedSettingsCount++;
-  }
+    const currentSettings = SuperJSON.parse<Record<string, unknown>>(currentDbEntry.value);
+    const defaultSettings = defaultServerSettings[settingsKey];
+    const missingKeys = objectKeys(defaultSettings).filter((key) => !(key in currentSettings));
+
+    if (missingKeys.length == 0) {
+      console.info(`Skipping seeding for serverSetting as it already exists key=${settingsKey}`);
+      continue;
+    }
 
-  if (insertedSettingsCount > 0) {
-    console.info(`Inserted ${insertedSettingsCount} missing settings`);
+    await db
+      .update(serverSettings)
+      .set({
+        value: SuperJSON.stringify({ ...defaultSettings, ...currentSettings }), // Add missing keys
+      })
+      .where(eq(serverSettings.settingKey, settingsKey));
+    console.log(`Updated serverSetting through seed key=${settingsKey}`);
   }
 };
diff --git a/packages/db/queries/index.ts b/packages/db/queries/index.ts
index 2d645d6a1..76efc434a 100644
--- a/packages/db/queries/index.ts
+++ b/packages/db/queries/index.ts
@@ -1 +1,2 @@
 export * from "./item";
+export * from "./server-setting";
diff --git a/packages/db/queries/server-setting.ts b/packages/db/queries/server-setting.ts
new file mode 100644
index 000000000..a8039aa32
--- /dev/null
+++ b/packages/db/queries/server-setting.ts
@@ -0,0 +1,52 @@
+import SuperJSON from "superjson";
+
+import type { ServerSettings } from "@homarr/server-settings";
+import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
+
+import type { Database } from "..";
+import { eq } from "..";
+import { serverSettings } from "../schema/sqlite";
+
+export const getServerSettingsAsync = async (db: Database) => {
+  const settings = await db.query.serverSettings.findMany();
+
+  return defaultServerSettingsKeys.reduce((acc, settingKey) => {
+    const setting = settings.find((setting) => setting.settingKey === settingKey);
+    if (!setting) {
+      // Typescript is not happy because the key is a union and it does not know that they are the same
+      acc[settingKey] = defaultServerSettings[settingKey] as never;
+      return acc;
+    }
+
+    acc[settingKey] = {
+      ...defaultServerSettings[settingKey],
+      ...SuperJSON.parse(setting.value),
+    };
+    return acc;
+  }, {} as ServerSettings);
+};
+
+export const getServerSettingByKeyAsync = async <TKey extends keyof ServerSettings>(db: Database, key: TKey) => {
+  const dbSettings = await db.query.serverSettings.findFirst({
+    where: eq(serverSettings.settingKey, key),
+  });
+
+  if (!dbSettings) {
+    return defaultServerSettings[key];
+  }
+
+  return SuperJSON.parse<ServerSettings[TKey]>(dbSettings.value);
+};
+
+export const updateServerSettingByKeyAsync = async <TKey extends keyof ServerSettings>(
+  db: Database,
+  key: TKey,
+  value: ServerSettings[TKey],
+) => {
+  await db
+    .update(serverSettings)
+    .set({
+      value: SuperJSON.stringify(value),
+    })
+    .where(eq(serverSettings.settingKey, key));
+};
diff --git a/packages/server-settings/package.json b/packages/server-settings/package.json
index d2dab7755..8df496447 100644
--- a/packages/server-settings/package.json
+++ b/packages/server-settings/package.json
@@ -21,6 +21,10 @@
     "typecheck": "tsc --noEmit"
   },
   "prettier": "@homarr/prettier-config",
+  "dependencies": {
+    "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/translation": "workspace:^0.1.0"
+  },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
diff --git a/packages/server-settings/src/index.ts b/packages/server-settings/src/index.ts
index ee5a6ade8..c404ef974 100644
--- a/packages/server-settings/src/index.ts
+++ b/packages/server-settings/src/index.ts
@@ -1,4 +1,13 @@
-export const defaultServerSettingsKeys = ["analytics", "crawlingAndIndexing"] as const;
+import type { ColorScheme } from "@homarr/definitions";
+import type { SupportedLanguage } from "@homarr/translation";
+
+export const defaultServerSettingsKeys = [
+  "analytics",
+  "crawlingAndIndexing",
+  "board",
+  "appearance",
+  "culture",
+] as const;
 
 export type ServerSettingsRecord = {
   [key in (typeof defaultServerSettingsKeys)[number]]: Record<string, unknown>;
@@ -17,6 +26,15 @@ export const defaultServerSettings = {
     noTranslate: true,
     noSiteLinksSearchBox: false,
   },
+  board: {
+    defaultBoardId: null as string | null,
+  },
+  appearance: {
+    defaultColorScheme: "light" as ColorScheme,
+  },
+  culture: {
+    defaultLocale: "en" as SupportedLanguage,
+  },
 } satisfies ServerSettingsRecord;
 
 export type ServerSettings = typeof defaultServerSettings;
diff --git a/packages/translation/src/middleware.ts b/packages/translation/src/middleware.ts
index 77d2a138d..beda6f79c 100644
--- a/packages/translation/src/middleware.ts
+++ b/packages/translation/src/middleware.ts
@@ -1,9 +1,15 @@
-import { createI18nMiddleware } from "next-international/middleware";
+import { createI18nMiddleware as internalCreateI18nMiddleware } from "next-international/middleware";
 
-import { defaultLocale, supportedLanguages } from ".";
+import type { SupportedLanguage } from ".";
+import { supportedLanguages } from ".";
 
-export const I18nMiddleware = createI18nMiddleware({
-  locales: supportedLanguages,
-  defaultLocale,
-  urlMappingStrategy: "rewrite",
-});
+export const createI18nMiddleware = (defaultLocale: SupportedLanguage) =>
+  internalCreateI18nMiddleware({
+    locales: supportedLanguages,
+    defaultLocale,
+    // TODO: check with new translation library if it uses the default or accepted language from browser
+    resolveLocaleFromRequest() {
+      return defaultLocale;
+    },
+    urlMappingStrategy: "rewrite",
+  });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92e2f6f9a..9599b9738 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1303,6 +1303,13 @@ importers:
         version: 5.6.3
 
   packages/server-settings:
+    dependencies:
+      '@homarr/definitions':
+        specifier: workspace:^0.1.0
+        version: link:../definitions
+      '@homarr/translation':
+        specifier: workspace:^0.1.0
+        version: link:../translation
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0

From f038ec2d8c7e8ce91718ecee3a9d0e4b074ea3c9 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 26 Oct 2024 00:51:19 +0200
Subject: [PATCH 2/7] chore: address pull request feedback

---
 .../[locale]/_client-providers/mantine.tsx    |  6 ++--
 .../boards/[name]/settings/_danger.tsx        | 22 +++++++------
 .../[locale]/boards/[name]/settings/page.tsx  |  5 ++-
 .../_components/appearance-settings-form.tsx  |  7 +++--
 .../_components/board-settings-form.tsx       |  6 ++--
 .../settings/_components/common-form.tsx      |  9 ++++--
 .../_components/culture-settings-form.tsx     |  5 ++-
 .../src/app/[locale]/manage/settings/page.tsx | 10 +++---
 apps/nextjs/src/theme/color-scheme.ts         |  3 +-
 packages/api/src/router/board.ts              | 22 +++++++++----
 packages/auth/events.ts                       |  4 +--
 packages/auth/test/events.spec.ts             |  6 ++--
 packages/definitions/src/cookie.ts            |  1 +
 packages/definitions/src/index.ts             |  1 +
 packages/translation/src/lang/en.ts           | 31 +++++++++++++++++++
 15 files changed, 100 insertions(+), 38 deletions(-)
 create mode 100644 packages/definitions/src/cookie.ts

diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
index edd5952ac..3b5ad50f6 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
@@ -9,6 +9,7 @@ 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,
@@ -33,11 +34,10 @@ export const CustomMantineProvider = ({
 };
 
 export function useColorSchemeManager(): MantineColorSchemeManager {
-  const key = "homarr-color-scheme";
   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({
@@ -54,7 +54,7 @@ export 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;
       }
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
index fa1c05bd3..115605279 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
+++ b/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")}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index c110651d3..002c5f4c8 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/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>
             </>
           )}
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
index aa8ad6eb7..364936065 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
@@ -7,19 +7,22 @@ import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/se
 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 { 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="Default color scheme"
+            label={tApperance("defaultColorScheme.label")}
             data={colorSchemes.map((scheme) => ({
               value: scheme,
-              label: scheme,
+              label: tApperance(`defaultColorScheme.options.${scheme}`),
             }))}
             {...form.getInputProps("defaultColorScheme")}
             SelectOption={ApperanceCustomOption}
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
index 4f4c5c226..d48954c61 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
@@ -6,10 +6,12 @@ import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/se
 
 import { clientApi } from "@homarr/api/client";
 import type { ServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import { CommonSettingsForm } from "./common-form";
 
 export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["board"] }) => {
+  const tBoard = useScopedI18n("management.page.settings.section.board");
   const [selectableBoards] = clientApi.board.getPublicBoards.useSuspenseQuery();
 
   return (
@@ -17,8 +19,8 @@ export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSett
       {(form) => (
         <>
           <SelectWithCustomItems
-            label="Global default board"
-            description="Only public boards are available for selection"
+            label={tBoard("defaultBoard.label")}
+            description={tBoard("defaultBoard.description")}
             data={selectableBoards.map((board) => ({
               value: board.id,
               label: board.name,
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
index 8cc7d4601..8a932dee1 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
@@ -6,6 +6,7 @@ import { clientApi } from "@homarr/api/client";
 import { useForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { ServerSettings } from "@homarr/server-settings";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
   settingKey,
@@ -16,15 +17,17 @@ export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
   defaultValues: ServerSettings[TKey];
   children: (form: ReturnType<typeof useForm<ServerSettings[TKey]>>) => React.ReactNode;
 }) => {
+  const t = useI18n();
+  const tSettings = useScopedI18n("management.page.settings");
   const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
     onSuccess() {
       showSuccessNotification({
-        message: "Settings saved successfully",
+        message: tSettings("notification.success.message"),
       });
     },
     onError() {
       showErrorNotification({
-        message: "Failed to save settings",
+        message: tSettings("notification.error.message"),
       });
     },
   });
@@ -45,7 +48,7 @@ export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
         {children(form)}
         <Group justify="end">
           <Button type="submit" loading={isPending}>
-            Save
+            {t("common.action.save")}
           </Button>
         </Group>
       </Stack>
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
index 88b104ab4..324cba722 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
@@ -7,16 +7,19 @@ import { objectEntries } from "@homarr/common";
 import type { ServerSettings } from "@homarr/server-settings";
 import type { SupportedLanguage } from "@homarr/translation";
 import { localeAttributes } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import { CommonSettingsForm } from "./common-form";
 
 export const CultureSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["culture"] }) => {
+  const tCulture = useScopedI18n("management.page.settings.section.culture");
+
   return (
     <CommonSettingsForm settingKey="culture" defaultValues={defaultValues}>
       {(form) => (
         <>
           <SelectWithCustomItems
-            label="Default locale"
+            label={tCulture("defaultLocale.label")}
             data={objectEntries(localeAttributes).map(([value, { name }]) => ({
               value,
               label: name,
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
index abe38ed43..a651682e9 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -21,24 +21,24 @@ export async function generateMetadata() {
 
 export default async function SettingsPage() {
   const serverSettings = await api.serverSettings.getAll();
-  const t = await getScopedI18n("management.page.settings");
+  const tSettings = await getScopedI18n("management.page.settings");
   return (
     <>
       <DynamicBreadcrumb />
       <Stack>
-        <Title order={1}>{t("title")}</Title>
+        <Title order={1}>{tSettings("title")}</Title>
         <AnalyticsSettings initialData={serverSettings.analytics} />
         <CrawlingAndIndexingSettings initialData={serverSettings.crawlingAndIndexing} />
         <Stack>
-          <Title order={2}>Boards</Title>
+          <Title order={2}>{tSettings("section.board.title")}</Title>
           <BoardSettingsForm defaultValues={serverSettings.board} />
         </Stack>
         <Stack>
-          <Title order={2}>Appearance</Title>
+          <Title order={2}>{tSettings("section.appearance.title")}</Title>
           <AppearanceSettingsForm defaultValues={serverSettings.appearance} />
         </Stack>
         <Stack>
-          <Title order={2}>Culture</Title>
+          <Title order={2}>{tSettings("section.culture.title")}</Title>
           <CultureSettingsForm defaultValues={serverSettings.culture} />
         </Stack>
       </Stack>
diff --git a/apps/nextjs/src/theme/color-scheme.ts b/apps/nextjs/src/theme/color-scheme.ts
index bb38fd67a..4f069a1ef 100644
--- a/apps/nextjs/src/theme/color-scheme.ts
+++ b/apps/nextjs/src/theme/color-scheme.ts
@@ -4,9 +4,10 @@ import { cookies } from "next/headers";
 import { db } from "@homarr/db";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import type { ColorScheme } from "@homarr/definitions";
+import { colorSchemeCookieKey } from "@homarr/definitions";
 
 export const getCurrentColorSchemeAsync = cache(async () => {
-  const cookieValue = cookies().get("homarr-color-scheme")?.value;
+  const cookieValue = cookies().get(colorSchemeCookieKey)?.value;
 
   if (cookieValue) {
     return cookieValue as ColorScheme;
diff --git a/packages/api/src/router/board.ts b/packages/api/src/router/board.ts
index eaaccdb8a..7ab693bde 100644
--- a/packages/api/src/router/board.ts
+++ b/packages/api/src/router/board.ts
@@ -227,6 +227,14 @@ export const boardRouter = createTRPCRouter({
     .input(validation.board.changeVisibility)
     .mutation(async ({ ctx, input }) => {
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full");
+      const boardSettings = await getServerSettingByKeyAsync(ctx.db, "board");
+
+      if (input.visibility !== "public" && boardSettings.defaultBoardId === input.id) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Cannot make default board private",
+        });
+      }
 
       await ctx.db
         .update(boards)
@@ -251,12 +259,14 @@ export const boardRouter = createTRPCRouter({
         })
       : null;
 
-    const boardSettings = await getServerSettingByKeyAsync(ctx.db, "board");
-    const boardWhere = user?.homeBoardId
-      ? eq(boards.id, user.homeBoardId)
-      : boardSettings.defaultBoardId
-        ? eq(boards.id, boardSettings.defaultBoardId)
-        : null;
+    // 1. user home board, 2. default board, 3. not found
+    let boardWhere: SQL<unknown> | null = null;
+    if (user?.homeBoardId) {
+      boardWhere = eq(boards.id, user.homeBoardId);
+    } else {
+      const boardSettings = await getServerSettingByKeyAsync(ctx.db, "board");
+      boardWhere = boardSettings.defaultBoardId ? eq(boards.id, boardSettings.defaultBoardId) : null;
+    }
 
     if (!boardWhere) {
       throw new TRPCError({
diff --git a/packages/auth/events.ts b/packages/auth/events.ts
index 292204de0..dab667519 100644
--- a/packages/auth/events.ts
+++ b/packages/auth/events.ts
@@ -5,7 +5,7 @@ import type { NextAuthConfig } from "next-auth";
 import { and, eq, inArray } from "@homarr/db";
 import type { Database } from "@homarr/db";
 import { groupMembers, groups, users } from "@homarr/db/schema/sqlite";
-import { everyoneGroup } from "@homarr/definitions";
+import { colorSchemeCookieKey, everyoneGroup } from "@homarr/definitions";
 import { logger } from "@homarr/log";
 
 import { env } from "./env.mjs";
@@ -52,7 +52,7 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
     }
 
     // We use a cookie as localStorage is not shared with server (otherwise flickering would occur)
-    cookies().set("homarr-color-scheme", dbUser.colorScheme, {
+    cookies().set(colorSchemeCookieKey, dbUser.colorScheme, {
       path: "/",
       expires: dayjs().add(1, "year").toDate(),
     });
diff --git a/packages/auth/test/events.spec.ts b/packages/auth/test/events.spec.ts
index 325d1d949..272612ce9 100644
--- a/packages/auth/test/events.spec.ts
+++ b/packages/auth/test/events.spec.ts
@@ -7,7 +7,7 @@ import { eq } from "@homarr/db";
 import type { Database } from "@homarr/db";
 import { groupMembers, groups, users } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
-import { everyoneGroup } from "@homarr/definitions";
+import { colorSchemeCookieKey, everyoneGroup } from "@homarr/definitions";
 
 import { createSignInEventHandler } from "../events";
 
@@ -224,7 +224,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
     });
     expect(dbUser?.name).toBe("test-new");
   });
-  test("signInEventHandler should set homarr-color-scheme cookie", async () => {
+  test("signInEventHandler should set color-scheme cookie", async () => {
     // Arrange
     const db = createDb();
     await createUserAsync(db);
@@ -239,7 +239,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
 
     // Assert
     expect(cookies().set).toHaveBeenCalledWith(
-      "homarr-color-scheme",
+      colorSchemeCookieKey,
       "dark",
       expect.objectContaining({
         path: "/",
diff --git a/packages/definitions/src/cookie.ts b/packages/definitions/src/cookie.ts
new file mode 100644
index 000000000..785b5fffe
--- /dev/null
+++ b/packages/definitions/src/cookie.ts
@@ -0,0 +1 @@
+export const colorSchemeCookieKey = "homarr-color-scheme";
diff --git a/packages/definitions/src/index.ts b/packages/definitions/src/index.ts
index 20919b208..c43a2f96c 100644
--- a/packages/definitions/src/index.ts
+++ b/packages/definitions/src/index.ts
@@ -8,3 +8,4 @@ export * from "./auth";
 export * from "./user";
 export * from "./group";
 export * from "./docs";
+export * from "./cookie";
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 670be6712..55316e536 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -1847,6 +1847,14 @@ export default {
       },
       settings: {
         title: "Settings",
+        notification: {
+          success: {
+            message: "Settings saved successfully",
+          },
+          error: {
+            message: "Failed to save settings",
+          },
+        },
         section: {
           analytics: {
             title: "Analytics",
@@ -1888,6 +1896,29 @@ export default {
               text: "Google will build a search box with the crawled links along with other direct links. Enabling this will ask Google to disable that box.",
             },
           },
+          board: {
+            title: "Boards",
+            defaultBoard: {
+              label: "Global default board",
+              description: "Only public boards are available for selection",
+            },
+          },
+          appearance: {
+            title: "Appearance",
+            defaultColorScheme: {
+              label: "Default color scheme",
+              options: {
+                light: "Light",
+                dark: "Dark",
+              },
+            },
+          },
+          culture: {
+            title: "Culture",
+            defaultLocale: {
+              label: "Default language",
+            },
+          },
         },
       },
       tool: {

From 53118e919e10705f9cec36fbaf39a3d318a8c736 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 26 Oct 2024 10:42:25 +0200
Subject: [PATCH 3/7] test: adjust unit tests to match requirements

---
 packages/api/src/router/test/board.spec.ts    | 43 +++++++++++++++++-
 .../src/router/test/serverSettings.spec.ts    | 44 ++-----------------
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/packages/api/src/router/test/board.spec.ts b/packages/api/src/router/test/board.spec.ts
index b95f6279c..034fc585b 100644
--- a/packages/api/src/router/test/board.spec.ts
+++ b/packages/api/src/router/test/board.spec.ts
@@ -15,6 +15,7 @@ import {
   integrations,
   items,
   sections,
+  serverSettings,
   users,
 } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
@@ -473,13 +474,19 @@ describe("deleteBoard should delete board", () => {
 });
 
 describe("getHomeBoard should return home board", () => {
-  it("should return home board", async () => {
+  test("should return user home board when user has one", async () => {
     // Arrange
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
     const db = createDb();
     const caller = boardRouter.createCaller({ db, session: defaultSession });
 
     const fullBoardProps = await createFullBoardAsync(db, "home");
+    await db
+      .update(users)
+      .set({
+        homeBoardId: fullBoardProps.boardId,
+      })
+      .where(eq(users.id, defaultCreatorId));
 
     // Act
     const result = await caller.getHomeBoard();
@@ -491,6 +498,40 @@ describe("getHomeBoard should return home board", () => {
     });
     expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "view");
   });
+  test("should return global home board when user doesn't have one", async () => {
+    // Arrange
+    const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, session: defaultSession });
+
+    const fullBoardProps = await createFullBoardAsync(db, "home");
+    await db.insert(serverSettings).values({
+      settingKey: "board",
+      value: SuperJSON.stringify({ defaultBoardId: fullBoardProps.boardId }),
+    });
+
+    // Act
+    const result = await caller.getHomeBoard();
+
+    // Assert
+    expectInputToBeFullBoardWithName(result, {
+      name: "home",
+      ...fullBoardProps,
+    });
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "view");
+  });
+  test("should throw error when home board not configured in serverSettings", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, session: defaultSession });
+    await createFullBoardAsync(db, "home");
+
+    // Act
+    const actAsync = async () => await caller.getHomeBoard();
+
+    // Assert
+    await expect(actAsync()).rejects.toThrowError("No home board found");
+  });
 });
 
 describe("getBoardByName should return board by name", () => {
diff --git a/packages/api/src/router/test/serverSettings.spec.ts b/packages/api/src/router/test/serverSettings.spec.ts
index dffa42e35..4f08132be 100644
--- a/packages/api/src/router/test/serverSettings.spec.ts
+++ b/packages/api/src/router/test/serverSettings.spec.ts
@@ -40,56 +40,20 @@ describe("getAll server settings", () => {
 
     await expect(actAsync()).rejects.toThrow();
   });
-  test("getAll should return server", async () => {
+  test("getAll should return default server settings when nothing in database", async () => {
     const db = createDb();
     const caller = serverSettingsRouter.createCaller({
       db,
       session: defaultSession,
     });
 
-    await db.insert(serverSettings).values([
-      {
-        settingKey: defaultServerSettingsKeys[0],
-        value: SuperJSON.stringify(defaultServerSettings.analytics),
-      },
-    ]);
-
     const result = await caller.getAll();
 
-    expect(result).toStrictEqual({
-      analytics: {
-        enableGeneral: true,
-        enableWidgetData: false,
-        enableIntegrationData: false,
-        enableUserData: false,
-      },
-    });
+    expect(result).toStrictEqual(defaultServerSettings);
   });
 });
 
 describe("saveSettings", () => {
-  test("saveSettings should return false when it did not update one", async () => {
-    const db = createDb();
-    const caller = serverSettingsRouter.createCaller({
-      db,
-      session: defaultSession,
-    });
-
-    const result = await caller.saveSettings({
-      settingsKey: "analytics",
-      value: {
-        enableGeneral: true,
-        enableWidgetData: true,
-        enableIntegrationData: true,
-        enableUserData: true,
-      },
-    });
-
-    expect(result).toBe(false);
-
-    const dbSettings = await db.select().from(serverSettings);
-    expect(dbSettings.length).toBe(0);
-  });
   test("saveSettings should update settings and return true when it updated only one", async () => {
     const db = createDb();
     const caller = serverSettingsRouter.createCaller({
@@ -104,7 +68,7 @@ describe("saveSettings", () => {
       },
     ]);
 
-    const result = await caller.saveSettings({
+    await caller.saveSettings({
       settingsKey: "analytics",
       value: {
         enableGeneral: true,
@@ -114,8 +78,6 @@ describe("saveSettings", () => {
       },
     });
 
-    expect(result).toBe(true);
-
     const dbSettings = await db.select().from(serverSettings);
     expect(dbSettings).toStrictEqual([
       {

From b2c682aaed7301d25a04353439eca82b761e1fe6 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 26 Oct 2024 10:43:25 +0200
Subject: [PATCH 4/7] fix: deepsource issue

---
 packages/db/migrations/seed.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db/migrations/seed.ts b/packages/db/migrations/seed.ts
index 5e6b726a9..79a90c45e 100644
--- a/packages/db/migrations/seed.ts
+++ b/packages/db/migrations/seed.ts
@@ -49,7 +49,7 @@ const seedServerSettingsAsync = async (db: Database) => {
     const defaultSettings = defaultServerSettings[settingsKey];
     const missingKeys = objectKeys(defaultSettings).filter((key) => !(key in currentSettings));
 
-    if (missingKeys.length == 0) {
+    if (missingKeys.length === 0) {
       console.info(`Skipping seeding for serverSetting as it already exists key=${settingsKey}`);
       continue;
     }

From df583f8e9bfa453b97fcadd1f276448009daa458 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 26 Oct 2024 23:03:15 +0200
Subject: [PATCH 5/7] chore: add deepsource as dependency to translation
 library

---
 packages/translation/package.json | 3 ++-
 pnpm-lock.yaml                    | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/translation/package.json b/packages/translation/package.json
index 4b5ef75ee..2cc51e3f7 100644
--- a/packages/translation/package.json
+++ b/packages/translation/package.json
@@ -28,6 +28,7 @@
   "dependencies": {
     "@homarr/common": "workspace:^0.1.0",
     "dayjs": "^1.11.13",
+    "deepmerge": "4.3.1",
     "mantine-react-table": "2.0.0-beta.7",
     "next": "^14.2.16",
     "next-intl": "3.23.2",
@@ -40,4 +41,4 @@
     "eslint": "^9.13.0",
     "typescript": "^5.6.3"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e44177be4..e36b026f6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1402,6 +1402,9 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      deepmerge:
+        specifier: 4.3.1
+        version: 4.3.1
       mantine-react-table:
         specifier: 2.0.0-beta.7
         version: 2.0.0-beta.7(@mantine/core@7.13.4(@mantine/hooks@7.13.4(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.13.4(@mantine/core@7.13.4(@mantine/hooks@7.13.4(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.13.4(react@18.3.1))(dayjs@1.11.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.13.4(react@18.3.1))(@tabler/icons-react@3.20.0(react@18.3.1))(clsx@2.1.1)(dayjs@1.11.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)

From e6e08bedb89ff474538af76dab75d8335ac859a7 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 26 Oct 2024 23:51:40 +0200
Subject: [PATCH 6/7] refactor: restructure language-combobox, adjust default
 locale for next-intl

---
 .../_components/appearance-settings-form.tsx  |  2 +-
 .../_components/board-settings-form.tsx       |  2 +-
 .../_components/culture-settings-form.tsx     | 26 +++----------------
 .../manage/users/[userId]/general/page.tsx    |  4 +--
 .../language/current-language-combobox.tsx    | 12 +++++++++
 .../components/language/language-combobox.tsx | 21 +++++++++------
 .../src/components/user-avatar-menu.tsx       |  4 +--
 apps/nextjs/src/middleware.ts                 |  3 +++
 packages/definitions/src/cookie.ts            |  1 +
 packages/translation/package.json             |  3 ++-
 packages/translation/src/routing.ts           |  6 ++++-
 packages/ui/src/components/index.tsx          |  1 +
 pnpm-lock.yaml                                |  3 +++
 13 files changed, 49 insertions(+), 39 deletions(-)
 create mode 100644 apps/nextjs/src/components/language/current-language-combobox.tsx

diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
index 364936065..2ca25ac4d 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
@@ -2,12 +2,12 @@
 
 import { Group, Text } from "@mantine/core";
 import { IconMoon, IconSun } from "@tabler/icons-react";
-import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/select-with-custom-items";
 
 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";
 
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
index d48954c61..d91d94196 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
@@ -2,11 +2,11 @@
 
 import { Group, Text } from "@mantine/core";
 import { IconLayoutDashboard } from "@tabler/icons-react";
-import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/select-with-custom-items";
 
 import { clientApi } from "@homarr/api/client";
 import type { ServerSettings } from "@homarr/server-settings";
 import { useScopedI18n } from "@homarr/translation/client";
+import { SelectWithCustomItems } from "@homarr/ui";
 
 import { CommonSettingsForm } from "./common-form";
 
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
index 324cba722..7d9dff99e 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
@@ -1,14 +1,10 @@
 "use client";
 
-import { Group, Text } from "@mantine/core";
-import { SelectWithCustomItems } from "node_modules/@homarr/ui/src/components/select-with-custom-items";
-
-import { objectEntries } from "@homarr/common";
 import type { ServerSettings } from "@homarr/server-settings";
 import type { SupportedLanguage } from "@homarr/translation";
-import { localeAttributes } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { LanguageCombobox } from "~/components/language/language-combobox";
 import { CommonSettingsForm } from "./common-form";
 
 export const CultureSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["culture"] }) => {
@@ -18,25 +14,9 @@ export const CultureSettingsForm = ({ defaultValues }: { defaultValues: ServerSe
     <CommonSettingsForm settingKey="culture" defaultValues={defaultValues}>
       {(form) => (
         <>
-          <SelectWithCustomItems
+          <LanguageCombobox
             label={tCulture("defaultLocale.label")}
-            data={objectEntries(localeAttributes).map(([value, { name }]) => ({
-              value,
-              label: name,
-            }))}
-            defaultValue={defaultValues.defaultLocale}
-            SelectOption={({ value, label }: { value: SupportedLanguage; label: string }) => {
-              const currentConfig = localeAttributes[value];
-
-              return (
-                <Group>
-                  <span className={`fi fi-${currentConfig.flagIcon}`} style={{ borderRadius: 4 }}></span>
-                  <Text fz="sm" fw={500}>
-                    {label}
-                  </Text>
-                </Group>
-              );
-            }}
+            value={form.getInputProps("defaultLocale").value as SupportedLanguage}
             {...form.getInputProps("defaultLocale")}
           />
         </>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
index fa26d7bd1..ede4d8df9 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
@@ -6,7 +6,7 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
-import { LanguageCombobox } from "~/components/language/language-combobox";
+import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { catchTrpcNotFound } from "~/errors/trpc-not-found";
 import { createMetaTitle } from "~/metadata";
@@ -81,7 +81,7 @@ export default async function EditUserPage({ params }: Props) {
 
       <Stack mb="lg">
         <Title order={2}>{tGeneral("item.language")}</Title>
-        <LanguageCombobox />
+        <CurrentLanguageCombobox />
       </Stack>
 
       <Stack mb="lg">
diff --git a/apps/nextjs/src/components/language/current-language-combobox.tsx b/apps/nextjs/src/components/language/current-language-combobox.tsx
new file mode 100644
index 000000000..cdb4709d6
--- /dev/null
+++ b/apps/nextjs/src/components/language/current-language-combobox.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { useChangeLocale, useCurrentLocale } from "@homarr/translation/client";
+
+import { LanguageCombobox } from "./language-combobox";
+
+export const CurrentLanguageCombobox = () => {
+  const currentLocale = useCurrentLocale();
+  const { changeLocale, isPending } = useChangeLocale();
+
+  return <LanguageCombobox value={currentLocale} onChange={changeLocale} isPending={isPending} />;
+};
diff --git a/apps/nextjs/src/components/language/language-combobox.tsx b/apps/nextjs/src/components/language/language-combobox.tsx
index b60e3a4fe..5723e3fde 100644
--- a/apps/nextjs/src/components/language/language-combobox.tsx
+++ b/apps/nextjs/src/components/language/language-combobox.tsx
@@ -6,26 +6,30 @@ import { IconCheck } from "@tabler/icons-react";
 
 import type { SupportedLanguage } from "@homarr/translation";
 import { localeConfigurations, supportedLanguages } from "@homarr/translation";
-import { useChangeLocale, useCurrentLocale } from "@homarr/translation/client";
 
 import classes from "./language-combobox.module.css";
 
-export const LanguageCombobox = () => {
+interface LanguageComboboxProps {
+  label?: string;
+  value: SupportedLanguage;
+  onChange: (value: SupportedLanguage) => void;
+  isPending?: boolean;
+}
+
+export const LanguageCombobox = ({ label, value, onChange, isPending }: LanguageComboboxProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),
   });
-  const currentLocale = useCurrentLocale();
-  const { changeLocale, isPending } = useChangeLocale();
 
   const handleOnOptionSubmit = React.useCallback(
     (value: string) => {
       if (!value) {
         return;
       }
-      changeLocale(value as SupportedLanguage);
+      onChange(value as SupportedLanguage);
       combobox.closeDropdown();
     },
-    [changeLocale, combobox],
+    [onChange, combobox],
   );
 
   const handleOnClick = React.useCallback(() => {
@@ -39,20 +43,21 @@ export const LanguageCombobox = () => {
           component="button"
           type="button"
           pointer
+          label={label}
           leftSection={isPending ? <Loader size={16} /> : null}
           rightSection={<Combobox.Chevron />}
           rightSectionPointerEvents="none"
           onClick={handleOnClick}
           variant="filled"
         >
-          <OptionItem currentLocale={currentLocale} localeKey={currentLocale} />
+          <OptionItem currentLocale={value} localeKey={value} />
         </InputBase>
       </Combobox.Target>
       <Combobox.Dropdown>
         <Combobox.Options>
           {supportedLanguages.map((languageKey) => (
             <Combobox.Option value={languageKey} key={languageKey}>
-              <OptionItem currentLocale={currentLocale} localeKey={languageKey} showCheck />
+              <OptionItem currentLocale={value} localeKey={languageKey} showCheck />
             </Combobox.Option>
           ))}
         </Combobox.Options>
diff --git a/apps/nextjs/src/components/user-avatar-menu.tsx b/apps/nextjs/src/components/user-avatar-menu.tsx
index 1dafdce25..63b089883 100644
--- a/apps/nextjs/src/components/user-avatar-menu.tsx
+++ b/apps/nextjs/src/components/user-avatar-menu.tsx
@@ -24,7 +24,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import "flag-icons/css/flag-icons.min.css";
 
 import { useAuthContext } from "~/app/[locale]/_client-providers/session";
-import { LanguageCombobox } from "./language/language-combobox";
+import { CurrentLanguageCombobox } from "./language/current-language-combobox";
 
 interface UserAvatarMenuProps {
   children: ReactNode;
@@ -72,7 +72,7 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
         <Menu.Divider />
 
         <Menu.Item p={0} closeMenuOnClick={false}>
-          <LanguageCombobox />
+          <CurrentLanguageCombobox />
         </Menu.Item>
         <Menu.Divider />
         {Boolean(session.data) && (
diff --git a/apps/nextjs/src/middleware.ts b/apps/nextjs/src/middleware.ts
index 7559f5d63..b61cc6494 100644
--- a/apps/nextjs/src/middleware.ts
+++ b/apps/nextjs/src/middleware.ts
@@ -5,6 +5,9 @@ import { createI18nMiddleware } from "@homarr/translation/middleware";
 
 export async function middleware(request: NextRequest) {
   const culture = await fetchApi.serverSettings.getCulture.query();
+
+  // We don't want to fallback to accept-language header so we clear it
+  request.headers.set("accept-language", "");
   const next = createI18nMiddleware(culture.defaultLocale);
   return next(request);
 }
diff --git a/packages/definitions/src/cookie.ts b/packages/definitions/src/cookie.ts
index 785b5fffe..62425046a 100644
--- a/packages/definitions/src/cookie.ts
+++ b/packages/definitions/src/cookie.ts
@@ -1 +1,2 @@
 export const colorSchemeCookieKey = "homarr-color-scheme";
+export const localeCookieKey = "homarr-locale";
diff --git a/packages/translation/package.json b/packages/translation/package.json
index 66e1233a5..36dc29f5c 100644
--- a/packages/translation/package.json
+++ b/packages/translation/package.json
@@ -27,6 +27,7 @@
   "prettier": "@homarr/prettier-config",
   "dependencies": {
     "@homarr/common": "workspace:^0.1.0",
+    "@homarr/definitions": "workspace:^0.1.0",
     "dayjs": "^1.11.13",
     "deepmerge": "4.3.1",
     "mantine-react-table": "2.0.0-beta.7",
@@ -41,4 +42,4 @@
     "eslint": "^9.13.0",
     "typescript": "^5.6.3"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/translation/src/routing.ts b/packages/translation/src/routing.ts
index f5fe4f7f3..db81f0228 100644
--- a/packages/translation/src/routing.ts
+++ b/packages/translation/src/routing.ts
@@ -1,5 +1,7 @@
 import { defineRouting } from "next-intl/routing";
 
+import { localeCookieKey } from "@homarr/definitions";
+
 import type { SupportedLanguage } from "./config";
 import { supportedLanguages } from "./config";
 
@@ -7,7 +9,9 @@ export const createRouting = (defaultLocale: SupportedLanguage) =>
   defineRouting({
     locales: supportedLanguages,
     defaultLocale,
-    localeDetection: false,
+    localeCookie: {
+      name: localeCookieKey,
+    },
     localePrefix: {
       mode: "never", // Rewrite the URL with locale parameter but without shown in url
     },
diff --git a/packages/ui/src/components/index.tsx b/packages/ui/src/components/index.tsx
index ecd4632ba..93b9cec0e 100644
--- a/packages/ui/src/components/index.tsx
+++ b/packages/ui/src/components/index.tsx
@@ -3,6 +3,7 @@ export { OverflowBadge } from "./overflow-badge";
 export { SearchInput } from "./search-input";
 export * from "./select-with-description";
 export * from "./select-with-description-and-badge";
+export { SelectWithCustomItems } from "./select-with-custom-items";
 export { TablePagination } from "./table-pagination";
 export { TextMultiSelect } from "./text-multi-select";
 export { UserAvatar } from "./user-avatar";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a18a268c..3fc743a35 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1399,6 +1399,9 @@ importers:
       '@homarr/common':
         specifier: workspace:^0.1.0
         version: link:../common
+      '@homarr/definitions':
+        specifier: workspace:^0.1.0
+        version: link:../definitions
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13

From e74efbdfaa0c816d9d7a87f676394f4f5325ab94 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Thu, 31 Oct 2024 14:52:20 +0100
Subject: [PATCH 7/7] chore: change cookie keys prefix from homarr- to homarr.

---
 packages/definitions/src/cookie.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/definitions/src/cookie.ts b/packages/definitions/src/cookie.ts
index 62425046a..69cb24930 100644
--- a/packages/definitions/src/cookie.ts
+++ b/packages/definitions/src/cookie.ts
@@ -1,2 +1,2 @@
-export const colorSchemeCookieKey = "homarr-color-scheme";
-export const localeCookieKey = "homarr-locale";
+export const colorSchemeCookieKey = "homarr.color-scheme";
+export const localeCookieKey = "homarr.locale";