Separate account creation buttons into two distinct actions

**Motivations:**
- Improve UI clarity by displaying two distinct buttons instead of one combined button
- Reduce the number of clicks needed to access the import functionality
- Allow users to directly choose their desired action without an intermediate step

**Evolutions:**
- Added optional 'initialStep' prop to CreateAccountModal to initialize modal at 'import' or 'choose' step
- Refactored NoAccountView to display two separate buttons: 'Générer un nouveau compte' and 'Importer une clé existante'
- Extracted buttons into separate NoAccountActionButtons component to respect function line limit
- Removed unused 'connected' parameter from AuthorPresentationFormView

**Pages affectées:**
- components/CreateAccountModal.tsx
- components/AuthorPresentationEditor.tsx
- features/account-creation-buttons-separation.md

components/AuthorPresentationEditor.tsx

@@ -193,8 +193,44 @@ function useAuthorPresentationState(pubkey: string | null) {
   return { loading, error, success, draft, setDraft, validationError, handleSubmit }
 }
 
+function NoAccountActionButtons({
+  onGenerate,
+  onImport,
+}: {
+  onGenerate: () => void
+  onImport: () => void
+}) {
+  return (
+    <div className="flex flex-col gap-3 w-full max-w-xs">
+      <button
+        onClick={onGenerate}
+        className="px-6 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan"
+      >
+        Générer un nouveau compte
+      </button>
+      <button
+        onClick={onImport}
+        className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors"
+      >
+        Importer une clé existante
+      </button>
+    </div>
+  )
+}
+
 function NoAccountView() {
   const [showCreateModal, setShowCreateModal] = useState(false)
+  const [modalStep, setModalStep] = useState<'choose' | 'import'>('choose')
+
+  const handleOpenModal = (step: 'choose' | 'import') => {
+    setModalStep(step)
+    setShowCreateModal(true)
+  }
+
+  const handleModalClose = () => {
+    setShowCreateModal(false)
+    setModalStep('choose')
+  }
 
   return (
     <div className="border border-neon-cyan/20 rounded-lg p-6 bg-cyber-dark/50">
@@ -202,16 +238,15 @@ function NoAccountView() {
         <p className="text-center text-cyber-accent mb-2">
           Créez un compte ou importez votre clé secrète pour commencer
         </p>
-        <button
+        <NoAccountActionButtons
-          onClick={() => setShowCreateModal(true)}
+          onGenerate={() => handleOpenModal('choose')}
-          className="px-6 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan"
+          onImport={() => handleOpenModal('import')}
-        >
+        />
-          Créer un compte ou importer une clé
-        </button>
         {showCreateModal && (
           <CreateAccountModal
-            onSuccess={() => setShowCreateModal(false)}
+            onSuccess={handleModalClose}
-            onClose={() => setShowCreateModal(false)}
+            onClose={handleModalClose}
+            initialStep={modalStep}
           />
         )}
       </div>
@@ -221,11 +256,9 @@ function NoAccountView() {
 
 function AuthorPresentationFormView({
   pubkey,
-  connected,
   profile,
 }: {
   pubkey: string | null
-  connected: boolean
   profile: { name?: string; pubkey: string } | null
 }) {
   const state = useAuthorPresentationState(pubkey)
@@ -262,7 +295,7 @@ function useAutoLoadPubkey(accountExists: boolean | null, pubkey: string | null,
 }
 
 export function AuthorPresentationEditor() {
-  const { connected, pubkey, profile, accountExists, connect } = useNostrAuth()
+  const { pubkey, profile, accountExists, connect } = useNostrAuth()
   useAutoLoadPubkey(accountExists, pubkey ?? null, connect)
-  return <AuthorPresentationFormView pubkey={pubkey ?? null} connected={connected} profile={profile} />
+  return <AuthorPresentationFormView pubkey={pubkey ?? null} profile={profile} />
 }

components/CreateAccountModal.tsx

@@ -5,6 +5,7 @@ import { RecoveryStep, ImportStep, ChooseStep } from './CreateAccountModalSteps'
 interface CreateAccountModalProps {
   onSuccess: (npub: string) => void
   onClose: () => void
+  initialStep?: Step
 }
 
 type Step = 'choose' | 'import' | 'recovery'
@@ -41,8 +42,8 @@ async function handleAccountCreation(
   }
 }
 
-function useAccountCreation() {
+function useAccountCreation(initialStep: Step = 'choose') {
-  const [step, setStep] = useState<Step>('choose')
+  const [step, setStep] = useState<Step>(initialStep)
   const [importKey, setImportKey] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -121,7 +122,7 @@ function renderStep(
   )
 }
 
-export function CreateAccountModal({ onSuccess, onClose }: CreateAccountModalProps) {
+export function CreateAccountModal({ onSuccess, onClose, initialStep = 'choose' }: CreateAccountModalProps) {
   const {
     step,
     setStep,
@@ -134,7 +135,7 @@ export function CreateAccountModal({ onSuccess, onClose }: CreateAccountModalPro
     npub,
     handleGenerate,
     handleImport,
-  } = useAccountCreation()
+  } = useAccountCreation(initialStep)
 
   const handleContinue = () => {
     onSuccess(npub)

features/account-creation-buttons-separation.md

@@ -0,0 +1,53 @@
+# Account Creation Buttons Separation
+
+**Date**: December 2024
+**Auteur**: Équipe 4NK
+
+## Objectif
+
+Remplacer le bouton unique "Créer un compte ou importer une clé" par deux boutons distincts "Générer un nouveau compte" et "Importer une clé existante" pour améliorer la clarté de l'interface utilisateur.
+
+## Motivations
+
+- Améliorer la clarté de l'interface utilisateur
+- Permettre aux utilisateurs de choisir directement l'action souhaitée sans étape intermédiaire
+- Réduire le nombre de clics nécessaires pour accéder à la fonctionnalité d'import
+
+## Modifications
+
+### Composants modifiés
+
+1. **components/CreateAccountModal.tsx** :
+   - Ajout d'une prop optionnelle `initialStep` pour permettre d'initialiser la modal directement au step 'import' ou 'choose'
+   - Modification du hook `useAccountCreation` pour accepter un paramètre `initialStep` avec valeur par défaut 'choose'
+
+2. **components/AuthorPresentationEditor.tsx** :
+   - Refactorisation du composant `NoAccountView` pour afficher deux boutons distincts
+   - Extraction des boutons dans un composant séparé `NoAccountActionButtons` pour respecter la limite de lignes de fonction (max-lines-per-function)
+   - Ajout de la gestion d'état pour déterminer quel step de la modal afficher
+   - Suppression du paramètre `connected` inutilisé dans `AuthorPresentationFormView`
+
+### Structure du code
+
+- `NoAccountActionButtons` : Composant réutilisable pour les boutons d'action
+- `NoAccountView` : Gère l'état de la modal et détermine quel step afficher
+
+## Modalités de déploiement
+
+Aucun déploiement spécial nécessaire. Les modifications sont purement frontend et seront déployées avec la prochaine version de l'application.
+
+## Modalités d'analyse
+
+### Vérifications à effectuer
+
+1. Tester que le bouton "Générer un nouveau compte" ouvre la modal avec le step 'choose'
+2. Tester que le bouton "Importer une clé existante" ouvre directement la modal avec le step 'import'
+3. Vérifier que le comportement de la modal reste inchangé une fois ouverte
+4. Vérifier que les autres usages de `CreateAccountModal` (dans `ConnectButton.tsx`) fonctionnent correctement avec la prop optionnelle
+
+### Points d'attention
+
+- La prop `initialStep` est optionnelle et rétrocompatible
+- Le composant `NoAccountActionButtons` respecte la limite de lignes de fonction
+- La fonction `NoAccountView` respecte la limite de 40 lignes après refactorisation
+