feat(init): Add data import for quick start

src/pages/init/Init.tsx

@@ -9,6 +9,7 @@ import { IconButton } from "~/components/IconButton"
 import { Button } from "~/components/ui/button"
 import { usePlayers } from "~/data/players"
 
+import { ImportData } from "../settings/DataSettings"
 import { PlayerSettings } from "../settings/PlayerSettings"
 import { RulesetSettings } from "../settings/RulesetSettings"
 
@@ -41,9 +42,10 @@ const Section = ({ children }: PropsWithChildren) => (
 
 interface StepProps {
   onContinue: () => void
+  onFinish: () => void
 }
 
-const Intro = ({ onContinue }: StepProps) => (
+const Intro = ({ onContinue, onFinish }: StepProps) => (
   <Section>
     <Title>Welcome! 👋</Title>
     <Description>
@@ -64,7 +66,10 @@ const Intro = ({ onContinue }: StepProps) => (
       <br />
       Note: You can adjust all settings later on in the settings menu.
     </Description>
-    <NextAction label="Let's go!" onClick={onContinue} />
+    <div className="flex items-center gap-2">
+      <NextAction label="Let's go!" onClick={onContinue} />
+      <ImportData label="Import data instead" onChange={onFinish} />
+    </div>
   </Section>
 )
 
@@ -246,7 +251,7 @@ export const Init = ({ onFinish }: InitProps) => {
 
         {initSteps.map((Step, index) => (
           <Slide key={Step.name} state={getState(index)}>
-            <Step onContinue={goNext} />
+            <Step onContinue={goNext} onFinish={onFinish} />
           </Slide>
         ))}
       </div>

src/pages/settings/DataSettings.tsx

@@ -74,31 +74,38 @@ const exportData = (selected: string[]) => {
   download(data, `gaming-roulette_backup_${today()}.json`)
 }
 
-const importData = (selected: string[], data: unknown) => {
-  const dataObj = data
-  if (typeof dataObj !== "object" || !dataObj) return
+const importData = (selected: string[], data: object) => {
   selected.forEach(item => {
     const field = dataFields.find(field => field.value === item)
-    const value = (dataObj as Record<string, unknown>)[item]
+    const value = (data as Record<string, unknown>)[item]
     if (field && value) {
       field.setValue(value)
     }
   })
 }
 
-const ImportData = ({
+export const ImportData = ({
   label,
-  selected,
+  selected = dataFields.map(({ value }) => value),
+  onChange,
 }: {
   label: string
-  selected: string[]
+  selected?: string[]
+  onChange?: (data: Record<string, unknown>) => void
 }) => (
   <FileInput
     variant="ghost"
     label={label}
+    accept=".json"
     onChange={file =>
       void fileToJson(file)
-        .then(data => importData(selected, data))
+        .then(data => {
+          if (typeof data !== "object" || !data) {
+            throw new Error("Invalid data")
+          }
+          importData(selected, data)
+          onChange?.(data as Record<string, unknown>)
+        })
         .then(() => toast({ kind: "success", message: "Import successfull" }))
         .catch(() => toast({ kind: "error", message: "Import failed" }))
     }