Show usernames when hovering over like icon

app/Concerns/HasLikes.php

@@ -6,6 +6,7 @@
 use App\Models\User;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
+use Illuminate\Database\Eloquent\Relations\Relation;
 
 trait HasLikes
 {
@@ -37,6 +38,19 @@ public function dislikedBy(User $user)
         $this->unsetRelation('likesRelation');
     }
 
+    public function likers()
+    {
+        return $this->likersRelation;
+    }
+
+    public function likersRelation()
+    {
+        return $this->belongsToMany(User::class, Like::class, 'likeable_id')
+            ->where('likeable_type',
+                array_search(static::class, Relation::morphMap()) ?: static::class
+            );
+    }
+
     /**
      * It's important to name the relationship the same as the method because otherwise
      * eager loading of the polymorphic relationship will fail on queued jobs.

app/Livewire/Like.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+final class Like extends Component
+{
+    public $isSidebar = true;
+
+    public $likable;
+
+    public $type;
+
+    private $likersLimit = 10;
+
+    public $likers = '';
+
+    public function mount($likable): void
+    {
+        $this->likable = $likable;
+
+        $likers = $this->getLikers();
+        $this->likers = implode(', ', array_slice($likers, 0, $this->likersLimit));
+
+        if (count($likers) > $this->likersLimit) {
+            $this->likers .= ' and more';
+        }
+    }
+
+    public function getLikers(): array
+    {
+        $likers = $this->likable->likers()->pluck('username')->toArray();
+
+        if (auth()->check() && in_array($authUsername = auth()->user()->username, $likers)) {
+            $likers = array_diff($likers, [$authUsername]);
+            array_unshift($likers, 'you');
+        }
+
+        return $likers;
+    }
+}

resources/views/components/articles/overview-summary.blade.php

@@ -106,7 +106,7 @@ class="w-full h-32 rounded-t-lg bg-center {{ $article->hasHeroImage() ? 'bg-cove
                     @endif
 
                     <span class="flex items-center gap-x-2">
-                        <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+                        <livewire:like :likable="$article" type="article" />
                         <span>{{ count($article->likes()) }}</span>
                         <span class="sr-only">Likes</span>
                     </span>

resources/views/components/articles/user-summary.blade.php

@@ -60,7 +60,7 @@ class="w-full h-32 rounded-t-lg bg-center {{ $article->hasHeroImage() ? 'bg-cove
                     </span>
 
                     <span class="flex items-center gap-x-2">
-                        <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+                        <livewire:like :likable="$article" type="article"/>
                         <span>{{ count($article->likes()) }}</span>
                         <span class="sr-only">Likes</span>
                     </span>

resources/views/components/threads/overview-summary.blade.php

@@ -55,14 +55,14 @@ class="hover:underline"
     <div class="flex justify-between items-center mt-4">
         <div class="flex gap-x-5">
             <span class="flex items-center gap-x-2">
-                <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
-                <span>{{ $thread->like_count }}</span>
+                <livewire:like :likable="$thread" type="thread"/>
+                <span>{{ count($thread->likes()) }}</span>
                 <span class="sr-only">Likes</span>
             </span>
 
             <span class="flex items-center gap-x-2">
                 <x-heroicon-o-chat-bubble-left-right class="w-6 h-6" />
-                <span>{{ $thread->reply_count }}</span>
+                <span>{{ count($thread->replies()) }}</span>
                 <span class="sr-only">Replies</span>
             </span>
         </div>

resources/views/components/tooltip.blade.php

@@ -0,0 +1,4 @@
+<div class="absolute bottom-12 -left-3 text-white text-xs bg-gray-900 rounded-lg w-max max-w-sm px-2 py-2">
+    <div class="absolute -bottom-1 left-5 w-2 h-2 bg-gray-900 rotate-45"></div>
+    <p class="w-full">{{ $slot }}</p>
+</div>

resources/views/components/users/reply.blade.php

@@ -36,7 +36,7 @@
     <div class="flex justify-between items-center mt-4">
         <div class="flex gap-x-5">
             <span class="flex items-center gap-x-2">
-                <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+                <livewire:like :likable="$reply" type="reply" />
                 <span>{{ count($reply->likes()) }}</span>
                 <span class="sr-only">Likes</span>
             </span>

resources/views/livewire/like-article.blade.php

@@ -1,14 +1,14 @@
 <div>
     @guest
         <div class="flex items-center text-gray-900 gap-x-4 gap-y-2.5 {{ $isSidebar ? 'flex-col' : 'flex-row' }}">
-            <x-heroicon-o-hand-thumb-up class="{{ $isSidebar ? 'w-6 h-6' : 'w-8 h-8' }}" />
+            <livewire:like :likable="$this->article" :isSidebar="$isSidebar" type="article" />
             <span class="font-medium leading-none {{ $isSidebar ? 'text-base' : 'text-2xl' }}">
                 {{ count($this->article->likes()) }}
             </span>
         </div>
     @else
         <button class="flex items-center text-gray-900 gap-x-4 gap-y-2.5 {{ $isSidebar ? 'flex-col' : 'flex-row' }} {{ $article->isLikedBy(Auth::user()) ? 'text-lio-500' : 'text-gray-900' }}" tag="button" wire:click="toggleLike">
-            <x-heroicon-o-hand-thumb-up class="{{ $isSidebar ? 'w-6 h-6' : 'w-8 h-8' }}" />
+            <livewire:like :likable="$this->article" :isSidebar="$isSidebar" type="article" />
             <span class="font-medium leading-none {{ $isSidebar ? 'text-base' : 'text-2xl' }}">
                 {{ count($this->article->likes()) }}
             </span>

resources/views/livewire/like-reply.blade.php

@@ -1,15 +1,15 @@
 <div>
     @if (Auth::guest())
         <div class="flex items-center gap-x-2">
-            <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+            <livewire:like :likable="$this->reply" type="reply" />
 
             <span class="font-medium">
                 {{ count($this->reply->likes()) }}
             </span>
         </div>
     @else 
         <button type="button" wire:click="toggleLike" class="flex items-center gap-x-2 text-lio-500">
-            <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+            <livewire:like :likable="$this->reply" type="reply" />
 
             <span class="font-medium">
                 {{ count($this->reply->likes()) }}

resources/views/livewire/like-thread.blade.php

@@ -1,15 +1,15 @@
 <div>
     @if (Auth::guest())
         <div class="flex items-center gap-x-2">
-            <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+            <livewire:like :likable="$this->thread" type="thread" />
 
             <span class="font-medium">
                 {{ count($this->thread->likes()) }}
             </span>
         </div>
     @else 
         <button type="button" wire:click="toggleLike" class="flex items-center gap-x-2 text-lio-500">
-            <x-heroicon-o-hand-thumb-up class="w-6 h-6" />
+            <livewire:like :likable="$this->thread" type="thread" />
 
             <span class="font-medium">
                 {{ count($this->thread->likes()) }}

resources/views/livewire/like.blade.php

@@ -0,0 +1,9 @@
+<div class="relative" x-data="{ showLikers: false }">
+    @if(strlen($likers))
+        <div x-cloak x-show="showLikers">
+            <x-tooltip>{{ $likers }} liked this {{ $type }}</x-tooltip>
+        </div>
+    @endif
+
+    <x-heroicon-o-hand-thumb-up class="{{ $isSidebar ? 'w-6 h-6' : 'w-8 h-8' }}" x-on:mouseover="showLikers = true" x-on:mouseout="showLikers = false" />
+</div>