create for series

components/ProfileSeriesBlock.tsx

@@ -1,5 +1,9 @@
+import { useState } from 'react'
 import Link from 'next/link'
 import { SeriesSection } from './SeriesSection'
+import { CreateSeriesModal } from './CreateSeriesModal'
+import { useNostrAuth } from '@/hooks/useNostrAuth'
+import { t } from '@/lib/i18n'
 
 interface ProfileSeriesBlockProps {
   currentPubkey: string
@@ -8,12 +12,22 @@ interface ProfileSeriesBlockProps {
 }
 
 export function ProfileSeriesBlock({ currentPubkey, onSelectSeries, selectedSeriesId }: ProfileSeriesBlockProps): React.ReactElement {
+  const { pubkey, isUnlocked } = useNostrAuth()
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [refreshKey, setRefreshKey] = useState(0)
+  const isAuthor = pubkey === currentPubkey && isUnlocked
+
+  const handleSeriesCreated = (): void => {
+    setRefreshKey((prev) => prev + 1)
+  }
+
   return (
     <div className="mb-6">
-      <h3 className="text-lg font-semibold mb-2">Séries</h3>
+      <ProfileSeriesHeader isAuthor={isAuthor} onCreate={() => setShowCreateModal(true)} />
       <SeriesSection
         authorPubkey={currentPubkey}
         onSelect={onSelectSeries}
+        refreshKey={refreshKey}
         {...(selectedSeriesId ? { selectedId: selectedSeriesId } : {})}
       />
       {selectedSeriesId && (
@@ -23,6 +37,31 @@ export function ProfileSeriesBlock({ currentPubkey, onSelectSeries, selectedSeri
           </Link>
         </div>
       )}
+      <CreateSeriesModal
+        isOpen={showCreateModal}
+        onClose={() => {
+          setShowCreateModal(false)
+        }}
+        onSuccess={handleSeriesCreated}
+        authorPubkey={currentPubkey}
+      />
+    </div>
+  )
+}
+
+function ProfileSeriesHeader({ isAuthor, onCreate }: { isAuthor: boolean; onCreate: () => void }): React.ReactElement {
+  return (
+    <div className="flex items-center justify-between mb-2">
+      <h3 className="text-lg font-semibold">Séries</h3>
+      {isAuthor && (
+        <button
+          type="button"
+          onClick={onCreate}
+          className="px-4 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"
+        >
+          {t('series.create.button')}
+        </button>
+      )}
     </div>
   )
 }

components/SeriesSection.tsx

@@ -9,10 +9,11 @@ interface SeriesSectionProps {
   authorPubkey: string
   onSelect: (seriesId: string | undefined) => void
   selectedId?: string | undefined
+  refreshKey?: number | undefined
 }
 
-export function SeriesSection({ authorPubkey, onSelect, selectedId }: SeriesSectionProps): React.ReactElement {
-  const [{ series, loading, error, aggregates }, load] = useSeriesData(authorPubkey)
+export function SeriesSection({ authorPubkey, onSelect, selectedId, refreshKey }: SeriesSectionProps): React.ReactElement {
+  const [{ series, loading, error, aggregates }, load] = useSeriesData(authorPubkey, refreshKey)
 
   if (loading) {
     return <p className="text-sm text-gray-600">Chargement des séries...</p>
@@ -83,7 +84,7 @@ function SeriesAggregatesList({
   )
 }
 
-function useSeriesData(authorPubkey: string): [
+function useSeriesData(authorPubkey: string, refreshKey?: number | undefined): [
   {
     series: Series[]
     loading: boolean
@@ -113,7 +114,7 @@ function useSeriesData(authorPubkey: string): [
 
   useEffect(() => {
     void load()
-  }, [load])
+  }, [load, refreshKey])
 
   return [{ series, loading, error, aggregates }, load]
 }