From 0bd87c4ebfc3bae8e76c30c5d277dec713b14a5a Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 00:05:17 +0100
Subject: [PATCH] fix: auto-focus name input and show creation indicator in
 role editor

After creating or copying a role, the name input is now auto-focused
with text selected so the user immediately starts typing. A subtle
"Role created" banner appears until the user makes any change.
---
 .../modals/spaceSettingsPanels/RolesPanel.tsx  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx b/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx
index c943d1cd..1084f383 100644
--- a/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx
+++ b/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useSpaceStore } from '../../../stores/spaceStore';
 import { api } from '../../../api/client';
 import { PermissionBits, stringToPermissions, permissionsToString } from '../../../utils/permissions';
@@ -200,6 +200,15 @@ function RoleEditView({ role, spaceId, onBack, onDeleted, onCopied }: RoleEditVi
 
   const [draftName, setDraftName] = useState(role.name);
   const [nameError, setNameError] = useState('');
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  const isNewlyCreated = /^new role( \d+)?$/i.test(role.name) || /^Copy of /i.test(role.name);
+
+  useEffect(() => {
+    if (!isEveryone && nameInputRef.current) {
+      nameInputRef.current.focus();
+      nameInputRef.current.select();
+    }
+  }, []);
 
   const validateName = (name: string): string => {
     const trimmed = name.trim();
@@ -319,6 +328,12 @@ function RoleEditView({ role, spaceId, onBack, onDeleted, onCopied }: RoleEditVi
         </button>
       </div>
 
+      {isNewlyCreated && !hasChanges && (
+        <div className="p-2 bg-accent-primary/10 border border-accent-primary/20 rounded text-txt-secondary text-sm">
+          Role created — customize it below
+        </div>
+      )}
+
       {/* Identity card (Name + Color — not shown for @everyone) */}
       {!isEveryone && (
         <div>
@@ -329,6 +344,7 @@ function RoleEditView({ role, spaceId, onBack, onDeleted, onCopied }: RoleEditVi
                 Role Name
               </label>
               <input
+                ref={nameInputRef}
                 type="text"
                 value={draftName}
                 onChange={(e) => {