Étape 4 : UI Minimaliste (Likes, Commentaires, Partage)

Pour un aspect professionnel, nous avons refondu les interactions pour qu’elles soient discrètes et minimalistes.

1. Barre de Partage Social

Dans votre vue de détail d’article, ajoutez une section de partage avec des liens vers les réseaux sociaux et une option pour copier le lien.

<h3 class="text-[10px] font-bold tracking-[0.2em] text-muted-foreground/60 uppercase">partager l'expertise</h3>
<div class="flex items-center gap-2">
    <!-- Twitter -->
    <a
        href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($article->title) }}"
        target="_blank"
        class="..."
    >
        <svg>...</svg>
    </a>
    <!-- Facebook -->
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" class="...">
        <svg>...</svg>
    </a>
    <!-- Copier le lien -->
    <button onclick="copyCurrentUrl(this)" class="...">
        <svg>...</svg>
    </button>
</div>

2. Système de “J’aime” Minimaliste

Remplacez les gros boutons par une pilule (pill) sobre.

<button
    wire:click="toggleLike"
    class="inline-flex items-center gap-2.5 px-6 py-2 rounded-full border border-border/50 transition-all duration-300 {{ $hasLiked ? 'bg-primary/10 text-primary border-primary/30' : 'bg-background text-muted-foreground hover:border-primary/50 hover:text-primary' }}"
>
    <svg class="w-4 h-4 {{ $hasLiked ? 'fill-current' : 'fill-none' }}" ...>
        <path ... />
    </svg>
    <span class="text-sm font-bold tracking-tight">{{ number_format($likes_count) }}</span>
</button>

3. Formulaire de Commentaire avec Éditeur Riche

Intégrez l’éditeur Markdown (fourni par le paquet mckenziearts/livewire-markdown-editor) dans un conteneur épuré.

<form wire:submit.prevent="addComment" class="group relative">
    <div class="overflow-hidden rounded-lg border border-border/60 bg-card/30 transition-all focus-within:border-primary/40">
        <!-- L'éditeur riche -->
        <div class="minimal-markdown-editor">
            <livewire:markdown-editor wire:model="commentContent" placeholder="Décrivez votre analyse technique..." />
        </div>

        <div class="flex items-center justify-between border-t border-border/30 bg-muted/20 px-4 py-3">
            <p class="text-[10px] font-medium whitespace-nowrap text-muted-foreground/50">Expertise technique attendue</p>
            <button type="submit" class="rounded-md bg-primary px-5 py-1.5 text-[11px] font-bold text-primary-foreground">publier l'analyse</button>
        </div>
    </div>
</form>

Prochaine Étape

Dans la dernière étape, nous fournirons le CSS complet pour harmoniser les titres, les listes et les citations.