From bec4eb326a381f0d1154345cf89fb5882f17e7b4 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Tue, 19 May 2026 18:53:19 +0200
Subject: [PATCH] update new profile modal

---
 client/ui/frontend/src/components/Dialog.tsx  |  4 +--
 .../src/components/NewProfileModal.tsx        | 31 ++++++++++++++-----
 .../src/components/ProfileDropdown.tsx        |  1 +
 .../frontend/src/i18n/locales/en/common.json  |  3 +-
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/client/ui/frontend/src/components/Dialog.tsx b/client/ui/frontend/src/components/Dialog.tsx
index 1c8c8470e..7f0680e05 100644
--- a/client/ui/frontend/src/components/Dialog.tsx
+++ b/client/ui/frontend/src/components/Dialog.tsx
@@ -66,8 +66,8 @@ export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Co
                         {showClose && (
                             <DialogPrimitive.Close
                                 className={cn(
-                                    "absolute right-3 top-3 z-10 rounded-md p-2 transition-colors",
-                                    "text-nb-gray-300 hover:text-nb-gray-100 hover:bg-nb-gray-900",
+                                    "absolute right-3 top-3 z-10 rounded-md p-3 transition-colors",
+                                    "text-nb-gray-300 hover:text-nb-gray-100",
                                     "focus:outline-none disabled:pointer-events-none",
                                 )}
                                 aria-label="Close"
diff --git a/client/ui/frontend/src/components/NewProfileModal.tsx b/client/ui/frontend/src/components/NewProfileModal.tsx
index 72aa0314c..c6d97838d 100644
--- a/client/ui/frontend/src/components/NewProfileModal.tsx
+++ b/client/ui/frontend/src/components/NewProfileModal.tsx
@@ -1,5 +1,6 @@
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { PlusCircle } from "lucide-react";
 import * as Dialog from "@/components/Dialog";
 import { Input } from "@/components/Input";
 import { Button } from "@/components/Button";
@@ -13,21 +14,33 @@ type Props = {
 export const NewProfileModal = ({ open, onOpenChange, onCreate }: Props) => {
     const { t } = useTranslation();
     const [name, setName] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
-        if (!open) setName("");
+        if (!open) {
+            setName("");
+            setError(null);
+        }
     }, [open]);
 
-    const trimmed = name.trim();
-    const canSubmit = trimmed.length > 0;
-
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
-        if (!canSubmit) return;
+        const trimmed = name.trim();
+        if (trimmed.length === 0) {
+            setError(t("profile.dialog.required"));
+            inputRef.current?.focus();
+            return;
+        }
         onCreate(trimmed);
         onOpenChange(false);
     };
 
+    const handleChange = (value: string) => {
+        setName(value);
+        if (error) setError(null);
+    };
+
     return (
         <Dialog.Root open={open} onOpenChange={onOpenChange}>
             <Dialog.Content maxWidthClass="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
@@ -41,10 +54,12 @@ export const NewProfileModal = ({ open, onOpenChange, onCreate }: Props) => {
 
                     <div className="px-8 pt-3">
                         <Input
+                            ref={inputRef}
                             autoFocus
                             placeholder={t("profile.dialog.placeholder")}
                             value={name}
-                            onChange={(e) => setName(e.target.value)}
+                            onChange={(e) => handleChange(e.target.value)}
+                            error={error ?? undefined}
                         />
                     </div>
 
@@ -53,9 +68,9 @@ export const NewProfileModal = ({ open, onOpenChange, onCreate }: Props) => {
                             type="submit"
                             variant="primary"
                             size={"md"}
-                            disabled={!canSubmit}
                             className="w-full"
                         >
+                            <PlusCircle size={14} />
                             {t("profile.dialog.submit")}
                         </Button>
                     </Dialog.Footer>
diff --git a/client/ui/frontend/src/components/ProfileDropdown.tsx b/client/ui/frontend/src/components/ProfileDropdown.tsx
index fcf2b2268..331210159 100644
--- a/client/ui/frontend/src/components/ProfileDropdown.tsx
+++ b/client/ui/frontend/src/components/ProfileDropdown.tsx
@@ -66,6 +66,7 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
     const handleCreateProfile = async (name: string) => {
         try {
             await addProfile(name);
+            await switchProfile(name);
         } catch (e) {
             await Dialogs.Error({
                 Title: t("profile.error.createTitle"),
diff --git a/client/ui/frontend/src/i18n/locales/en/common.json b/client/ui/frontend/src/i18n/locales/en/common.json
index 6d9c7ce75..ca330b3db 100644
--- a/client/ui/frontend/src/i18n/locales/en/common.json
+++ b/client/ui/frontend/src/i18n/locales/en/common.json
@@ -79,7 +79,8 @@
     "profile.dialog.title": "Enter Profile Name",
     "profile.dialog.description": "Choose a memorable name.",
     "profile.dialog.placeholder": "e.g. Work",
-    "profile.dialog.submit": "Create Profile",
+    "profile.dialog.submit": "Add Profile",
+    "profile.dialog.required": "Please enter a profile name, e.g. Work, Home",
 
     "profile.deregister.title": "Deregister Profile",
     "profile.deregister.message": "Are you sure you want to deregister \"{name}\"? You will need to log in again to use it.",