wip: add onboarding steps and import before v1

apps/nextjs/package.json

@@ -39,6 +39,7 @@
     "@homarr/widgets": "workspace:^0.1.0",
     "@mantine/colors-generator": "^7.13.5",
     "@mantine/core": "^7.13.5",
+    "@mantine/dropzone": "^7.13.5",
     "@mantine/hooks": "^7.13.5",
     "@mantine/modals": "^7.13.5",
     "@mantine/tiptap": "^7.13.5",

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

@@ -14,6 +14,7 @@ import {
   unstable_httpBatchStreamLink,
   wsLink,
 } from "@trpc/client";
+import type { SuperJSONResult } from "superjson";
 import superjson from "superjson";
 
 import type { AppRouter } from "@homarr/api";
@@ -82,8 +83,8 @@ export function TRPCReactProvider(props: PropsWithChildren) {
                 serialize(object: unknown) {
                   return object;
                 },
-                deserialize(data: unknown) {
-                  return data;
+                deserialize(data: SuperJSONResult) {
+                  return superjson.deserialize<unknown>(data);
                 },
               },
               url: `${getBaseUrl()}/api/trpc`,

apps/nextjs/src/app/[locale]/init/_components/init-card.tsx

@@ -0,0 +1,47 @@
+import type { PropsWithChildren } from "react";
+import Link from "next/link";
+import type { CardProps } from "@mantine/core";
+import { Button, Card, GridCol, Stack, Text } from "@mantine/core";
+
+import classes from "../init.module.css";
+
+export const InitGridColCard = ({ children, p }: PropsWithChildren<Pick<CardProps, "p">>) => {
+  return (
+    <GridCol span={{ base: 12, md: 6 }} display="flex" style={{ justifyContent: "center" }}>
+      <Card className={classes.card} w={64 * 6} maw="90vw" p={p}>
+        {children}
+      </Card>
+    </GridCol>
+  );
+};
+
+interface InitCardContentProps {
+  title: string;
+  description: string;
+  note?: string;
+  buttonProps: {
+    label: string;
+    href: string;
+  };
+}
+
+const InitCardContent = ({ title, description, note, buttonProps }: InitCardContentProps) => {
+  return (
+    <Stack justify="space-between" h="100%">
+      <Stack>
+        <Text fw={500}>{title}</Text>
+        <Text>{description}</Text>
+        {Boolean(note) && (
+          <Text size="xs" c="gray.5">
+            {note}
+          </Text>
+        )}
+      </Stack>
+      <Button fullWidth component={Link} href={buttonProps.href}>
+        {buttonProps.label}
+      </Button>
+    </Stack>
+  );
+};
+
+InitGridColCard.Content = InitCardContent;

apps/nextjs/src/app/[locale]/init/_components/init-color-scheme.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type { ComboboxItem, ComboboxLikeRenderOptionInput } from "@mantine/core";
+import { Group, Select, Text, useMantineColorScheme } from "@mantine/core";
+import { IconCheck, IconMoon, IconSunFilled } from "@tabler/icons-react";
+
+import { colorSchemes } from "@homarr/definitions";
+
+export const ColorSchemeSelect = () => {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+  const icon = icons[colorScheme as keyof typeof icons];
+
+  return (
+    <Select
+      value={colorScheme}
+      variant="unstyled"
+      unselectable="off"
+      renderOption={RenderOption}
+      onChange={(value) => {
+        const scheme = colorSchemes.find((scheme) => value === scheme);
+        if (!scheme) {
+          return;
+        }
+        setColorScheme(scheme);
+      }}
+      leftSection={<icon.component size={16} stroke={1.5} color={icon.color} />}
+      data={colorSchemes.map((value) => ({ value, label: `Use ${value} scheme` }))}
+    />
+  );
+};
+
+const icons = {
+  dark: {
+    component: IconMoon,
+    color: "currentColor",
+  },
+  light: {
+    component: IconSunFilled,
+    color: "#fc0",
+  },
+};
+
+const RenderOption = ({ option, checked }: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+  const icon = icons[option.value as keyof typeof icons];
+
+  return (
+    <Group wrap="nowrap" justify="space-between" w="100%">
+      <Group wrap="nowrap">
+        <icon.component size={16} stroke={1.5} color={icon.color} />
+        <Text>Use {option.value} scheme</Text>
+      </Group>
+      {checked && <IconCheck color="currentColor" size={16} />}
+    </Group>
+  );
+};

apps/nextjs/src/app/[locale]/init/_components/init-preferences-row.tsx

@@ -0,0 +1,16 @@
+import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
+import { InitGridColCard } from "./init-card";
+import { ColorSchemeSelect } from "./init-color-scheme";
+
+export const InitPreferencesRow = () => {
+  return (
+    <>
+      <InitGridColCard p="xs">
+        <ColorSchemeSelect />
+      </InitGridColCard>
+      <InitGridColCard p="xs">
+        <CurrentLanguageCombobox variant="unstyled" />
+      </InitGridColCard>
+    </>
+  );
+};

apps/nextjs/src/app/[locale]/init/_components/init-title.tsx

@@ -0,0 +1,14 @@
+import { Stack, Text, Title } from "@mantine/core";
+
+export const InitTitle = ({ title, description }: { title: string; description: string }) => {
+  return (
+    <Stack gap={6} align="center">
+      <Title order={3} fw={400} ta="center">
+        {title}
+      </Title>
+      <Text size="sm" c="gray.5" ta="center">
+        {description}
+      </Text>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { Grid } from "@mantine/core";
+
+import { InitGridColCard } from "../_components/init-card";
+import { InitPreferencesRow } from "../_components/init-preferences-row";
+import { InitTitle } from "../_components/init-title";
+
+export default function ExistingSetupOnboardingPage() {
+  return (
+    <>
+      <InitTitle
+        title="Setup existing Homarr installation"
+        description="Select from where you want to onboard Homarr"
+      />
+      <Grid maw={64 * 12 + 16}>
+        <InitPreferencesRow />
+        <InitGridColCard>
+          <InitGridColCard.Content
+            title="After version 1.0.0"
+            description="Import your Homarr backup from after version 1.0.0"
+            buttonProps={{ label: "Continue with after 1.0.0", href: "/init/import/after" }}
+          />
+        </InitGridColCard>
+        <InitGridColCard>
+          <InitGridColCard.Content
+            title="Before version 1.0.0"
+            description="Import your Homarr boards and users from before version 1.0.0"
+            buttonProps={{ label: "Continue with before 1.0.0", href: "/init/import/old/boards" }}
+          />
+        </InitGridColCard>
+      </Grid>
+    </>
+  );
+}