feat: add onboarding with oldmarr import (#1606)

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 {
+  width?: string;
+}
+
+export const CurrentLanguageCombobox = ({ width }: CurrentLanguageComboboxProps) => {
   const currentLocale = useCurrentLocale();
   const { changeLocale, isPending } = useChangeLocale();
 
-  return <LanguageCombobox value={currentLocale} onChange={changeLocale} isPending={isPending} />;
+  return <LanguageCombobox value={currentLocale} onChange={changeLocale} isPending={isPending} width={width} />;
 };

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;
+  width?: string;
 }
 
-export const LanguageCombobox = ({ label, value, onChange, isPending }: LanguageComboboxProps) => {
+export const LanguageCombobox = ({ label, value, onChange, isPending, width }: 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={width}
         >
           <OptionItem currentLocale={value} localeKey={value} />
         </InputBase>

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

@@ -18,14 +18,11 @@ import {
   IconTool,
 } from "@tabler/icons-react";
 
+import type { RouterOutputs } from "@homarr/api";
 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 type { RouterOutputs } from "@homarr/api";
-
 import { useAuthContext } from "~/app/[locale]/_client-providers/session";
 import { CurrentLanguageCombobox } from "./language/current-language-combobox";