Update presentation page: show ConnectButton when not connected and user name in form title

- Replace 'NotConnected' message with ConnectButton component
- Display user name (or shortened pubkey) in form title when connected
- Update ConnectButton styling to match dark theme
- Improve UX by allowing direct connection from presentation page

components/AuthorPresentationEditor.tsx

@@ -3,6 +3,7 @@ import { useNostrConnect } from '@/hooks/useNostrConnect'
 import { useAuthorPresentation } from '@/hooks/useAuthorPresentation'
 import { ArticleField } from './ArticleField'
 import { ArticleFormButtons } from './ArticleFormButtons'
+import { ConnectButton } from './ConnectButton'
 import { t } from '@/lib/i18n'
 
 interface AuthorPresentationDraft {
@@ -16,9 +17,12 @@ const ADDRESS_PATTERN = /^(1|3|bc1)[a-zA-Z0-9]{25,62}$/
 function NotConnected() {
   return (
     <div className="border border-neon-cyan/20 rounded-lg p-6 bg-cyber-dark/50">
-      <p className="text-center text-cyber-accent mb-4">
+      <div className="flex flex-col items-center gap-4">
-        {t('presentation.notConnected')}
+        <p className="text-center text-cyber-accent">
-      </p>
+          {t('presentation.notConnected')}
+        </p>
+        <ConnectButton />
+      </div>
     </div>
   )
 }
@@ -131,6 +135,7 @@ function PresentationForm({
   error,
   loading,
   handleSubmit,
+  userName,
 }: {
   draft: AuthorPresentationDraft
   setDraft: (next: AuthorPresentationDraft) => void
@@ -138,6 +143,7 @@ function PresentationForm({
   error: string | null
   loading: boolean
   handleSubmit: (e: React.FormEvent) => Promise<void>
+  userName: string
 }) {
   return (
     <form
@@ -147,7 +153,9 @@ function PresentationForm({
       className="border border-neon-cyan/20 rounded-lg p-6 bg-cyber-dark space-y-4"
     >
       <div className="mb-6">
-        <h2 className="text-2xl font-bold mb-2 text-neon-cyan font-mono">{t('presentation.title')}</h2>
+        <h2 className="text-2xl font-bold mb-2 text-neon-cyan font-mono">
+          {t('presentation.title')} - {userName}
+        </h2>
         <p className="text-cyber-accent text-sm">
           {t('presentation.description')}
         </p>
@@ -189,9 +197,11 @@ function useAuthorPresentationState(pubkey: string | null) {
 function AuthorPresentationFormView({
   pubkey,
   connected,
+  profile,
 }: {
   pubkey: string | null
   connected: boolean
+  profile: { name?: string; pubkey: string } | null
 }) {
   const state = useAuthorPresentationState(pubkey)
 
@@ -202,6 +212,9 @@ function AuthorPresentationFormView({
     return <SuccessNotice />
   }
 
+  // Get user name or fallback to shortened pubkey
+  const userName = profile?.name ?? (pubkey ? `${pubkey.substring(0, 16)}...` : 'Utilisateur')
+
   return (
     <PresentationForm
       draft={state.draft}
@@ -210,11 +223,12 @@ function AuthorPresentationFormView({
       error={state.error}
       loading={state.loading}
       handleSubmit={state.handleSubmit}
+      userName={userName}
     />
   )
 }
 
 export function AuthorPresentationEditor() {
-  const { connected, pubkey } = useNostrConnect()
+  const { connected, pubkey, profile } = useNostrConnect()
-  return <AuthorPresentationFormView pubkey={pubkey ?? null} connected={connected} />
+  return <AuthorPresentationFormView pubkey={pubkey ?? null} connected={connected} profile={profile} />
 }

components/ConnectButton.tsx

@@ -13,11 +13,11 @@ function ConnectForm({ onConnect, loading, error }: {
           void onConnect()
         }}
         disabled={loading}
-        className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+        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 disabled:opacity-50"
       >
         {loading ? 'Connecting...' : 'Connect with Nostr'}
       </button>
-      {error && <p className="text-sm text-red-600">{error}</p>}
+      {error && <p className="text-sm text-red-400">{error}</p>}
     </div>
   )
 }

components/LanguageSelector.tsx

@@ -50,4 +50,3 @@ export function LanguageSelector() {
     </div>
   )
 }
-