Merge branch 'dev' into feat/rework-perferences

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

@@ -8,13 +8,12 @@ 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,
   defaultColorScheme,
-}: PropsWithChildren<{ defaultColorScheme: ColorScheme }>) => {
+}: PropsWithChildren<{ defaultColorScheme: MantineColorScheme }>) => {
   const manager = useColorSchemeManager();
   return (
     <DirectionProvider>
@@ -35,7 +34,7 @@ export const CustomMantineProvider = ({
 export function useColorSchemeManager(): MantineColorSchemeManager {
   const { data: session } = useSession();
 
-  const updateCookieValue = (value: Exclude<MantineColorScheme, "auto">) => {
+  const updateCookieValue = (value: MantineColorScheme) => {
     setClientCookie(colorSchemeCookieKey, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
   };
 
@@ -60,7 +59,6 @@ export function useColorSchemeManager(): MantineColorSchemeManager {
     },
 
     set: (value) => {
-      if (value === "auto") return;
       try {
         if (session) {
           mutateColorScheme({ colorScheme: value });

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

@@ -4,6 +4,7 @@ import { Inter } from "next/font/google";
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
 import "@homarr/ui/styles.css";
+import "~/styles/color-scheme.scss";
 import "~/styles/scroll-area.scss";
 
 import { notFound } from "next/navigation";
@@ -25,6 +26,7 @@ import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
 import { Analytics } from "~/components/layout/analytics";
 import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
+import { ServiceWorkerRegistration } from "~/components/layout/service-worker-registration";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import { DayJsLoader } from "./_client-providers/dayjs-loader";
 import { JotaiProvider } from "./_client-providers/jotai";
@@ -129,7 +131,7 @@ export default async function Layout(props: {
       dir={direction}
       data-mantine-color-scheme={colorScheme}
       style={{
-        backgroundColor: colorScheme === "dark" ? "#242424" : "#fff",
+        backgroundColor: colorScheme === "dark" ? "#242424" : colorScheme === "auto" ? undefined : "#fff",
       }}
       suppressHydrationWarning
     >
@@ -141,6 +143,7 @@ export default async function Layout(props: {
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>
           <Notifications />
+          <ServiceWorkerRegistration />
           {props.children}
         </StackedProvider>
       </body>

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Group, Text } from "@mantine/core";
-import { IconMoon, IconSun } from "@tabler/icons-react";
+import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
 
 import type { ColorScheme } from "@homarr/definitions";
 import { colorSchemes } from "@homarr/definitions";
@@ -34,6 +34,7 @@ export const AppearanceSettingsForm = ({ defaultValues }: { defaultValues: Serve
 };
 
 const appearanceIcons = {
+  auto: IconDeviceDesktop,
   light: IconSun,
   dark: IconMoon,
 };

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

@@ -58,6 +58,18 @@ const createColumns = (
       return <ContainerStateBadge state={cell.row.original.state} />;
     },
   },
+  {
+    accessorKey: "host",
+    header: t("docker.field.host.label"),
+    size: 140,
+    Cell({ row }) {
+      return (
+        <Text truncate="end" title={row.original.host}>
+          {row.original.host}
+        </Text>
+      );
+    },
+  },
   {
     accessorKey: "image",
     header: t("docker.field.containerImage.label"),

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-search-preferences.tsx

@@ -26,6 +26,7 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
       form.setInitialValues({
         defaultSearchEngineId: variables.defaultSearchEngineId,
         openInNewTab: variables.openInNewTab,
+        ddgBangsEnabled: variables.ddgBangsEnabled,
       });
       showSuccessNotification({
         message: t("user.action.changeSearchPreferences.notification.success.message"),
@@ -41,6 +42,7 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
     initialValues: {
       defaultSearchEngineId: user.defaultSearchEngineId,
       openInNewTab: user.openSearchInNewTab,
+      ddgBangsEnabled: user.ddgBangs,
     },
   });
 
@@ -64,6 +66,10 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
           label={t("user.field.openSearchInNewTab.label")}
           {...form.getInputProps("openInNewTab", { type: "checkbox" })}
         />
+        <Switch
+          label={t("user.field.ddgBangs.label")}
+          {...form.getInputProps("ddgBangsEnabled", { type: "checkbox" })}
+        />
 
         <Group justify="end">
           <Button type="submit" loading={isPending}>