From 357fe4a311a548d5f98ca22f877d81cb13078cce Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Tue, 29 Sep 2026 19:34:50 +0200
Subject: [PATCH] implement name setting in onboarding

---
 src/View/Modals/onboardingModal.tsx         | 66 ++++++++++++++++++++-
 src/View/translations.ts                    |  5 ++
 src/ViewModel/Global/onboardingViewModel.ts |  7 ++-
 3 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/View/Modals/onboardingModal.tsx b/src/View/Modals/onboardingModal.tsx
index c53119be..e02f774b 100644
--- a/src/View/Modals/onboardingModal.tsx
+++ b/src/View/Modals/onboardingModal.tsx
@@ -7,6 +7,7 @@ export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingV
     return <div>
 	{ConnectionModal(coreViewModel, onboardingViewModel)}
     {TransferModal(coreViewModel, onboardingViewModel)}
+    {NameModal(coreViewModel, onboardingViewModel)}
 </div>
 }
 
@@ -62,7 +63,7 @@ function ConnectionModal(coreViewModel: CoreViewModel, onboardingViewModel: Onbo
 	    <div class="flex-row justify-end">
 		<button
 		    class="primary width-50"
-		    on:click={onboardingViewModel.showTransfer}
+		    on:click={onboardingViewModel.showTransferOption}
 		>
 		    <span
 			subscribe:innerText={nextButton}
@@ -123,7 +124,7 @@ function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: Onboar
 	    </main>
 	    <div class="flex-row">
 		<button
-		    class="primary width-50"
+		    class="standard width-50"
 		    on:click={onboardingViewModel.open}
 		>
 		    {coreViewModel.translations.general.backButton}
@@ -132,3 +133,64 @@ function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: Onboar
 	</div>
     </div>
 }
+
+function NameModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
+    const isPresented = React.createProxyState(
+	[onboardingViewModel.presentedModal],
+	() =>
+	onboardingViewModel.presentedModal.value ==
+	OnboardingModals.Name
+    );
+
+    const settingsViewModel = onboardingViewModel.settingsViewModel;
+
+    return <div
+	class="modal"
+	toggle:open={isPresented}
+    >
+	<div>
+	    <main>
+		<h2>{coreViewModel.translations.onboarding.nameHeadline}</h2>
+		<p class="secondary width-input">{coreViewModel.translations.onboarding.nameDescription}</p>
+
+		<hr></hr>
+
+		<label class="tile flex-no">
+		    <span class="icon">account_circle</span>
+		    <div>
+			<span>
+			    {
+				coreViewModel.translations.settings.account
+				.yourNameLabel
+			    }
+			</span>
+			<input
+			    placeholder={
+				coreViewModel.translations.settings.account
+				.yourNamePlaceholder
+			    }
+			    bind:value={settingsViewModel.usernameInput}
+			></input>
+		    </div>
+		</label>
+	    </main>
+	    <div class="flex-row">
+		<button
+		    class="standard width-50"
+		    on:click={onboardingViewModel.showTransferOption}
+		>
+		    {coreViewModel.translations.general.backButton}
+		</button>
+		<button
+		    class="primary width-50"
+		    on:click={onboardingViewModel.finish}
+		>
+		    {coreViewModel.translations.general.setButton}
+		    <span class="icon">
+			arrow_forward
+		    </span>
+		</button>
+	    </div>
+	</div>
+    </div>
+}
diff --git a/src/View/translations.ts b/src/View/translations.ts
index d3d9394b..95858a3e 100644
--- a/src/View/translations.ts
+++ b/src/View/translations.ts
@@ -124,6 +124,11 @@ const englishTranslations = {
 	transferDescription: "If you already use the Coordination Tool on another device, copy your identity here. You can use both devices at the same time.",
 	transferOptionTransfer: "Copy here",
 	transferOptionNew: "Set up as new device",
+
+	//
+	
+	nameHeadline: "Your Name",
+	nameDescription: "This is what others see when you send messages. You can always change your name in settings.",
     },
 
     connectionModal: {
diff --git a/src/ViewModel/Global/onboardingViewModel.ts b/src/ViewModel/Global/onboardingViewModel.ts
index 320bc94f..095d2180 100644
--- a/src/ViewModel/Global/onboardingViewModel.ts
+++ b/src/ViewModel/Global/onboardingViewModel.ts
@@ -16,7 +16,7 @@ export default class OnboardingViewModel {
 	this.presentedModal.value = OnboardingModals.Connection;
     }
 
-    showTransfer = (): void => {
+    showTransferOption = (): void => {
 	this.presentedModal.value = OnboardingModals.TransferOrNew;
     }
 
@@ -30,6 +30,11 @@ export default class OnboardingViewModel {
 	this.presentedModal.value = undefined;
     }
 
+    finish = (): void => {
+	this.settingsViewModel.setName();
+	this.presentedModal.value = undefined;
+    }
+
     // init
     constructor(
 	public connectionViewmodel: ConnectionViewModel,