feat: add onboarding with oldmarr import (#1606)

packages/old-import/src/components/initial/import-settings-card.tsx

@@ -0,0 +1,44 @@
+import { Card, Stack, Text } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { InitialOldmarrImportSettings } from "../../settings";
+import { OldmarrImportAppsSettings } from "../shared/apps-section";
+import { SidebarBehaviourSelect } from "../shared/sidebar-behaviour-select";
+
+interface ImportSettingsCardProps {
+  settings: InitialOldmarrImportSettings;
+  updateSetting: <TKey extends keyof InitialOldmarrImportSettings>(
+    setting: TKey,
+    value: InitialOldmarrImportSettings[TKey],
+  ) => void;
+}
+
+export const ImportSettingsCard = ({ settings, updateSetting }: ImportSettingsCardProps) => {
+  const tImportSettings = useScopedI18n("init.step.import.importSettings");
+  return (
+    <Card w={64 * 12 + 8} maw="90vw">
+      <Stack gap="sm">
+        <Stack gap={0}>
+          <Text fw={500}>{tImportSettings("title")}</Text>
+          <Text size="sm" c="gray.6">
+            {tImportSettings("description")}
+          </Text>
+        </Stack>
+
+        <OldmarrImportAppsSettings
+          background="transparent"
+          onlyImportApps={{
+            checked: settings.onlyImportApps,
+            onChange: (event) => updateSetting("onlyImportApps", event.target.checked),
+          }}
+        />
+
+        <SidebarBehaviourSelect
+          value={settings.sidebarBehaviour}
+          onChange={(value) => updateSetting("sidebarBehaviour", value)}
+        />
+      </Stack>
+    </Card>
+  );
+};