feat: add color scheme and language option to onboarding, add previou…

…s button

apps/nextjs/src/app/[locale]/init/_steps/back.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Button } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useI18n } from "@homarr/translation/client";
+
+export const BackToStart = () => {
+  const t = useI18n();
+  const { mutateAsync, isPending } = clientApi.onboard.previousStep.useMutation();
+
+  const handleBackToStartAsync = async () => {
+    await mutateAsync();
+    await revalidatePathActionAsync("/init");
+  };
+
+  return (
+    <Button loading={isPending} variant="subtle" color="gray" fullWidth onClick={handleBackToStartAsync}>
+      {t("init.backToStart")}
+    </Button>
+  );
+};

apps/nextjs/src/app/[locale]/init/page.tsx

@@ -1,12 +1,15 @@
 import type { JSX } from "react";
-import { Center, Stack, Text, Title } from "@mantine/core";
+import { Box, Center, Stack, Text, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import type { MaybePromise } from "@homarr/common/types";
 import type { OnboardingStep } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { CurrentColorSchemeCombobox } from "~/components/color-scheme/current-color-scheme-combobox";
+import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
+import { BackToStart } from "./_steps/back";
 import { InitFinish } from "./_steps/finish/init-finish";
 import { InitGroup } from "./_steps/group/init-group";
 import { InitImport } from "./_steps/import/init-import";
@@ -27,22 +30,27 @@ export default async function InitPage() {
   const t = await getScopedI18n("init.step");
   const currentStep = await api.onboard.currentStep();
 
-  const CurrentComponent = stepComponents[currentStep];
+  const CurrentComponent = stepComponents[currentStep.current];
 
   return (
-    <Center>
-      <Stack align="center" mt="xl">
-        <HomarrLogoWithTitle size="lg" />
-        <Stack gap={6} align="center">
-          <Title order={3} fw={400} ta="center">
-            {t(`${currentStep}.title`)}
-          </Title>
-          <Text size="sm" c="gray.5" ta="center">
-            {t(`${currentStep}.subtitle`)}
-          </Text>
+    <Box mih="100dvh">
+      <Center>
+        <Stack align="center" mt="xl">
+          <HomarrLogoWithTitle size="lg" />
+          <Stack gap={6} align="center">
+            <Title order={3} fw={400} ta="center">
+              {t(`${currentStep.current}.title`)}
+            </Title>
+            <Text size="sm" c="gray.5" ta="center">
+              {t(`${currentStep.current}.subtitle`)}
+            </Text>
+          </Stack>
+          <CurrentLanguageCombobox w="100%" />
+          <CurrentColorSchemeCombobox w="100%" />
+          {CurrentComponent && <CurrentComponent />}
+          {currentStep.previous === "start" && <BackToStart />}
         </Stack>
-        {CurrentComponent && <CurrentComponent />}
-      </Stack>
-    </Center>
+      </Center>
+    </Box>
   );
 }

apps/nextjs/src/components/color-scheme/current-color-scheme-combobox.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Group, Text, useMantineColorScheme } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+
+import type { ColorScheme } from "@homarr/definitions";
+import { colorSchemes } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+import { SelectWithCustomItems } from "@homarr/ui";
+
+interface CurrentColorSchemeComboboxProps {
+  w?: string;
+}
+
+export const CurrentColorSchemeCombobox = ({ w }: CurrentColorSchemeComboboxProps) => {
+  const tOptions = useScopedI18n("common.colorScheme.options");
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+
+  return (
+    <SelectWithCustomItems
+      value={colorScheme}
+      onChange={(value) => setColorScheme((value as ColorScheme | null) ?? "light")}
+      data={colorSchemes.map((scheme) => ({
+        value: scheme,
+        label: tOptions(scheme),
+      }))}
+      SelectOption={ColorSchemeCustomOption}
+      w={w}
+    />
+  );
+};
+
+const appearanceIcons = {
+  light: IconSun,
+  dark: IconMoon,
+};
+
+const ColorSchemeCustomOption = ({ 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>
+  );
+};

apps/nextjs/src/components/language/current-language-combobox.tsx

@@ -4,9 +4,13 @@ import { useChangeLocale, useCurrentLocale } from "@homarr/translation/client";
 
 import { LanguageCombobox } from "./language-combobox";
 
-export const CurrentLanguageCombobox = () => {
+interface CurrentLanguageComboboxProps {
+  w?: string;
+}
+
+export const CurrentLanguageCombobox = ({ w }: CurrentLanguageComboboxProps) => {
   const currentLocale = useCurrentLocale();
   const { changeLocale, isPending } = useChangeLocale();
 
-  return <LanguageCombobox value={currentLocale} onChange={changeLocale} isPending={isPending} />;
+  return <LanguageCombobox value={currentLocale} onChange={changeLocale} isPending={isPending} w={w} />;
 };

apps/nextjs/src/components/language/language-combobox.tsx

@@ -9,14 +9,17 @@ import { localeConfigurations, supportedLanguages } from "@homarr/translation";
 
 import classes from "./language-combobox.module.css";
 
+import "flag-icons/css/flag-icons.min.css";
+
 interface LanguageComboboxProps {
   label?: string;
   value: SupportedLanguage;
   onChange: (value: SupportedLanguage) => void;
   isPending?: boolean;
+  w?: string;
 }
 
-export const LanguageCombobox = ({ label, value, onChange, isPending }: LanguageComboboxProps) => {
+export const LanguageCombobox = ({ label, value, onChange, isPending, w }: LanguageComboboxProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),
   });
@@ -49,6 +52,7 @@ export const LanguageCombobox = ({ label, value, onChange, isPending }: Language
           rightSectionPointerEvents="none"
           onClick={handleOnClick}
           variant="filled"
+          w={w}
         >
           <OptionItem currentLocale={value} localeKey={value} />
         </InputBase>

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -21,8 +21,6 @@ import { signOut, useSession } from "@homarr/auth/client";
 import { createModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import "flag-icons/css/flag-icons.min.css";
-
 import { useAuthContext } from "~/app/[locale]/_client-providers/session";
 import { CurrentLanguageCombobox } from "./language/current-language-combobox";
 

apps/nextjs/src/middleware.ts

@@ -16,7 +16,7 @@ export async function middleware(request: NextRequest) {
   const pathname = request.nextUrl.pathname;
   if (!pathname.endsWith("/init")) {
     const currentOnboardingStep = await serverFetchApi.onboard.currentStep.query();
-    if (currentOnboardingStep !== "finish") {
+    if (currentOnboardingStep.current !== "finish") {
       return NextResponse.redirect(new URL("/init", request.url));
     }
   }

packages/api/src/router/onboard/onboard-router.ts

@@ -7,7 +7,7 @@ import { getOnboardingOrFallbackAsync, nextOnboardingStepAsync } from "./onboard
 
 export const onboardRouter = createTRPCRouter({
   currentStep: publicProcedure.query(async ({ ctx }) => {
-    return await getOnboardingOrFallbackAsync(ctx.db).then(({ current }) => current);
+    return await getOnboardingOrFallbackAsync(ctx.db);
   }),
   nextStep: publicProcedure
     .input(

packages/translation/src/lang/en.json

@@ -106,7 +106,8 @@
           "docs": "Read the documentation"
         }
       }
-    }
+    },
+    "backToStart": "Back to start"
   },
   "user": {
     "title": "Users",
@@ -799,6 +800,12 @@
       "label": "Icon URL",
       "header": "Type name or objects to filter for icons... Homarr will search through {countIcons} icons for you."
     },
+    "colorScheme": {
+      "options": {
+        "light": "Light",
+        "dark": "Dark"
+      }
+    },
     "information": {
       "min": "Min",
       "max": "Max",

packages/ui/src/components/select-with-custom-items.tsx

@@ -17,6 +17,7 @@ export interface SelectWithCustomItemsProps<TSelectItem extends BaseSelectItem>
   withAsterisk?: boolean;
   onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  w?: string;
 }
 
 type Props<TSelectItem extends BaseSelectItem> = SelectWithCustomItemsProps<TSelectItem> & {
@@ -30,6 +31,7 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
   defaultValue,
   placeholder,
   SelectOption,
+  w,
   ...props
 }: Props<TSelectItem>) => {
   const combobox = useCombobox({
@@ -75,6 +77,7 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
           onClick={toggle}
           rightSectionPointerEvents="none"
           multiline
+          w={w}
         >
           {selectedOption ? <SelectOption {...selectedOption} /> : <Input.Placeholder>{placeholder}</Input.Placeholder>}
         </InputBase>