Add image upload to presentation form and profile note

- Add ImageUploadField component for profile picture upload (NIP-95)
- Add pictureUrl field to AuthorPresentationDraft interface
- Store picture URL in Nostr event tags as 'picture'
- Display profile picture on author page
- Add discrete note indicating zapwall.fr profile differs from Nostr profile
- Update translations (FR/EN) for profile note
- All TypeScript checks pass

components/AuthorPresentationEditor.tsx

@@ -4,12 +4,14 @@ import { useAuthorPresentation } from '@/hooks/useAuthorPresentation'
 import { ArticleField } from './ArticleField'
 import { ArticleFormButtons } from './ArticleFormButtons'
 import { ConnectButton } from './ConnectButton'
+import { ImageUploadField } from './ImageUploadField'
 import { t } from '@/lib/i18n'
 
 interface AuthorPresentationDraft {
   presentation: string
   contentDescription: string
   mainnetAddress: string
+  pictureUrl?: string
 }
 
 const ADDRESS_PATTERN = /^(1|3|bc1)[a-zA-Z0-9]{25,62}$/
@@ -114,6 +116,24 @@ function MainnetAddressField({
   )
 }
 
+function PictureField({
+  draft,
+  onChange,
+}: {
+  draft: AuthorPresentationDraft
+  onChange: (next: AuthorPresentationDraft) => void
+}) {
+  return (
+    <ImageUploadField
+      id="picture"
+      label="Photo de profil"
+      value={draft.pictureUrl}
+      onChange={(url) => onChange({ ...draft, pictureUrl: url })}
+      helpText="Image de profil pour votre page auteur (max 5Mo, formats: PNG, JPG, WebP)"
+    />
+  )
+}
+
 const PresentationFields = ({
   draft,
   onChange,
@@ -122,6 +142,7 @@ const PresentationFields = ({
   onChange: (next: AuthorPresentationDraft) => void
 }) => (
   <div className="space-y-4">
+    <PictureField draft={draft} onChange={onChange} />
     <PresentationField draft={draft} onChange={onChange} />
     <ContentDescriptionField draft={draft} onChange={onChange} />
     <MainnetAddressField draft={draft} onChange={onChange} />
@@ -156,9 +177,12 @@ function PresentationForm({
         <h2 className="text-2xl font-bold mb-2 text-neon-cyan font-mono">
           {userName}
         </h2>
-        <p className="text-cyber-accent text-sm">
+        <p className="text-cyber-accent text-sm mb-2">
           {t('presentation.description')}
         </p>
+        <p className="text-xs text-cyber-accent/60 italic">
+          {t('presentation.profileNote')}
+        </p>
       </div>
 
       <PresentationFields draft={draft} onChange={setDraft} />

components/ImageUploadField.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { uploadNip95Media } from '@/lib/nip95'
+import Image from 'next/image'
+
+interface ImageUploadFieldProps {
+  id: string
+  label: string
+  value?: string | undefined
+  onChange: (url: string) => void
+  helpText?: string | undefined
+}
+
+export function ImageUploadField({ id, label, value, onChange, helpText }: ImageUploadFieldProps) {
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) {
+      return
+    }
+
+    setError(null)
+    setUploading(true)
+
+    try {
+      const media = await uploadNip95Media(file)
+      if (media.type === 'image') {
+        onChange(media.url)
+      } else {
+        setError('Seules les images sont autorisées')
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Erreur lors de l\'upload')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <label htmlFor={id} className="block text-sm font-medium text-neon-cyan">
+        {label}
+      </label>
+      {value && (
+        <div className="relative w-32 h-32 rounded-lg overflow-hidden border border-neon-cyan/20">
+          <Image
+            src={value}
+            alt="Profile picture"
+            fill
+            className="object-cover"
+          />
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <label
+          htmlFor={id}
+          className="px-4 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg text-sm font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan cursor-pointer"
+        >
+          {uploading ? 'Upload en cours...' : value ? 'Changer l\'image' : 'Télécharger une image'}
+        </label>
+        <input
+          id={id}
+          type="file"
+          accept="image/png,image/jpeg,image/jpg,image/webp"
+          className="hidden"
+          onChange={handleFileSelect}
+          disabled={uploading}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={() => onChange('')}
+            className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg text-sm font-medium transition-all border border-red-500/50"
+          >
+            Supprimer
+          </button>
+        )}
+      </div>
+      {error && (
+        <p className="text-sm text-red-400">{error}</p>
+      )}
+      {helpText && (
+        <p className="text-sm text-cyber-accent">{helpText}</p>
+      )}
+    </div>
+  )
+}
+

hooks/useAuthorPresentation.ts

@@ -7,6 +7,7 @@ interface AuthorPresentationDraft {
   presentation: string
   contentDescription: string
   mainnetAddress: string
+  pictureUrl?: string
 }
 
 export function useAuthorPresentation(pubkey: string | null) {

lib/articlePublisher.ts

@@ -33,6 +33,7 @@ export interface AuthorPresentationDraft {
   presentation: string
   contentDescription: string
   mainnetAddress: string
+  pictureUrl?: string | undefined
 }
 
 export interface PublishedArticle {

lib/articlePublisherHelpers.ts

@@ -19,6 +19,7 @@ export function buildPresentationEvent(draft: AuthorPresentationDraft, eventId:
       preview: draft.preview,
       mainnetAddress: draft.mainnetAddress,
       totalSponsoring: 0,
+      ...(draft.pictureUrl ? { pictureUrl: draft.pictureUrl } : {}),
     }),
     content: draft.content,
   }
@@ -45,6 +46,7 @@ export function parsePresentationEvent(event: Event): import('@/types/nostr').Au
     isPresentation: true,
     mainnetAddress: (tags.mainnetAddress as string | undefined) ?? '',
     totalSponsoring: (tags.totalSponsoring as number | undefined) ?? 0,
+    ...(tags.pictureUrl ? { bannerUrl: tags.pictureUrl as string } : {}),
   }
 }
 

lib/nostrTagSystem.ts

@@ -27,6 +27,7 @@ export interface AuthorTags extends BaseTags {
   preview?: string
   mainnetAddress?: string
   totalSponsoring?: number
+  pictureUrl?: string
 }
 
 export interface SeriesTags extends BaseTags {
@@ -85,12 +86,19 @@ export function buildTags(tags: AuthorTags | SeriesTags | PublicationTags | Quot
   // Type-specific tags
   if (tags.type === 'author') {
     const authorTags = tags as AuthorTags
+    result.push(['title', authorTags.title])
+    if (authorTags.preview) {
+      result.push(['preview', authorTags.preview])
+    }
     if (authorTags.mainnetAddress) {
       result.push(['mainnet_address', authorTags.mainnetAddress])
     }
     if (authorTags.totalSponsoring !== undefined) {
       result.push(['total_sponsoring', authorTags.totalSponsoring.toString()])
     }
+    if (authorTags.pictureUrl) {
+      result.push(['picture', authorTags.pictureUrl])
+    }
   } else if (tags.type === 'series') {
     const seriesTags = tags as SeriesTags
     result.push(['title', seriesTags.title])
@@ -185,6 +193,7 @@ export function extractTagsFromEvent(event: { tags: string[][] }): {
       const val = findTag('total_sponsoring')
       return val ? parseInt(val, 10) : undefined
     })(),
+    pictureUrl: findTag('picture'),
     seriesId: findTag('series'),
     coverUrl: findTag('cover'),
     bannerUrl: findTag('banner'),

locales/en.txt

@@ -45,6 +45,7 @@ author.sponsoring=Sponsoring
 author.sponsoring.total=Total received: {{amount}} BTC
 author.sponsoring.sats=In satoshis: {{amount}} sats
 author.notFound=Author page not found.
+author.profileNote=This profile data is specific to zapwall.fr and may differ from your Nostr profile.
 
 # Publish
 publish.title=Publish a new publication
@@ -59,6 +60,7 @@ presentation.description=This article is required to publish on zapwall.fr. It a
 presentation.success=Presentation article created!
 presentation.successMessage=Your presentation article has been created successfully. You can now publish articles.
 presentation.notConnected=Connect with Nostr to create your presentation article
+presentation.profileNote=This profile data is specific to zapwall.fr and may differ from your Nostr profile.
 
 # Filters
 filters.clear=Clear all

locales/fr.txt

@@ -45,6 +45,7 @@ author.sponsoring=Sponsoring
 author.sponsoring.total=Total reçu : {{amount}} BTC
 author.sponsoring.sats=En satoshis : {{amount}} sats
 author.notFound=Page auteur introuvable.
+author.profileNote=Les données de ce profil sont spécifiques à zapwall.fr et peuvent différer de votre profil Nostr.
 
 # Publish
 publish.title=Publier une nouvelle publication

pages/author/[pubkey].tsx

@@ -11,6 +11,7 @@ import { Footer } from '@/components/Footer'
 import { t } from '@/lib/i18n'
 import Link from 'next/link'
 import { SeriesCard } from '@/components/SeriesCard'
+import Image from 'next/image'
 
 function AuthorPageHeader({ presentation }: { presentation: AuthorPresentationArticle | null }) {
   if (!presentation) {
@@ -19,11 +20,28 @@ function AuthorPageHeader({ presentation }: { presentation: AuthorPresentationAr
 
   return (
     <div className="space-y-4 mb-8">
-      <h1 className="text-3xl font-bold text-neon-cyan">
+      <div className="flex items-start gap-6">
-        {presentation.title || t('author.presentation')}
+        {presentation.bannerUrl && (
-      </h1>
+          <div className="relative w-32 h-32 rounded-lg overflow-hidden border border-neon-cyan/20 flex-shrink-0">
-      <div className="prose prose-invert max-w-none">
+            <Image
-        <p className="text-cyber-accent whitespace-pre-wrap">{presentation.content}</p>
+              src={presentation.bannerUrl}
+              alt="Profile picture"
+              fill
+              className="object-cover"
+            />
+          </div>
+        )}
+        <div className="flex-1">
+          <h1 className="text-3xl font-bold text-neon-cyan mb-2">
+            {presentation.title || t('author.presentation')}
+          </h1>
+          <p className="text-xs text-cyber-accent/60 italic mb-4">
+            {t('author.profileNote')}
+          </p>
+          <div className="prose prose-invert max-w-none">
+            <p className="text-cyber-accent whitespace-pre-wrap">{presentation.content}</p>
+          </div>
+        </div>
       </div>
     </div>
   )

public/locales/en.txt

@@ -45,6 +45,7 @@ author.sponsoring=Sponsoring
 author.sponsoring.total=Total received: {{amount}} BTC
 author.sponsoring.sats=In satoshis: {{amount}} sats
 author.notFound=Author page not found.
+author.profileNote=This profile data is specific to zapwall.fr and may differ from your Nostr profile.
 
 # Publish
 publish.title=Publish a new publication

public/locales/fr.txt

@@ -45,6 +45,7 @@ author.sponsoring=Sponsoring
 author.sponsoring.total=Total reçu : {{amount}} BTC
 author.sponsoring.sats=En satoshis : {{amount}} sats
 author.notFound=Page auteur introuvable.
+author.profileNote=Les données de ce profil sont spécifiques à zapwall.fr et peuvent différer de votre profil Nostr.
 
 # Publish
 publish.title=Publier une nouvelle publication