Add avatar refresh button for GitHub-connected users

app/Livewire/RefreshAvatar.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Concerns\SendsAlerts;
+use App\Jobs\UpdateUserIdenticonStatus;
+use App\Models\User;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\View\View;
+use Livewire\Component;
+
+final class RefreshAvatar extends Component
+{
+    use SendsAlerts;
+
+    public User $user;
+
+    public function mount(User $user): void
+    {
+        $this->user = $user;
+    }
+
+    public function refresh(): void
+    {
+        if (! $this->user->hasConnectedGitHubAccount()) {
+            $this->error('You need to connect your GitHub account to refresh your avatar.');
+
+            $this->redirectRoute('settings.profile');
+
+            return;
+        }
+
+        // Rate limiting: 1 request per 1 minute per user.
+        $key = 'avatar-refresh:'.$this->user->id();
+
+        if (RateLimiter::tooManyAttempts($key, 1)) {
+            $this->error('Please wait 1 minute before refreshing your avatar again.');
+
+            $this->redirectRoute('settings.profile');
+
+            return;
+        }
+
+        // Record this attempt for 1 minute.
+        RateLimiter::hit($key, 60);
+
+        UpdateUserIdenticonStatus::dispatchSync($this->user);
+
+        $this->success('Avatar refreshed successfully!');
+
+        $this->redirectRoute('settings.profile');
+    }
+
+    public function render(): View
+    {
+        return view('livewire.refresh-avatar');
+    }
+}

app/Models/User.php

@@ -123,7 +123,7 @@ public function hasConnectedGitHubAccount(): bool
         return ! is_null($this->githubId());
     }
 
-    public function hasIdenticon(): bool
+    public function hasGitHubIdenticon(): bool
     {
         return (bool) $this->github_has_identicon;
     }

resources/views/components/avatar.blade.php

@@ -1,26 +1,34 @@
 @props([
     'user',
     'unlinked' => false,
+    'showRefresh' => false,
 ])
 
 <?php
-$src = $user->githubId() && ! $user->hasIdenticon()
+$src = $user->githubId() && ! $user->hasGitHubIdenticon()
     ? sprintf('https://avatars.githubusercontent.com/u/%s', $user->githubId())
     : asset('https://laravel.io/images/laravelio-icon-gray.svg');
 ?>
 
-@unless ($unlinked)
-    <a href="{{ route('profile', $user->username()) }}">
-@endunless
+<div class="relative inline-block">
+    @unless ($unlinked)
+        <a href="{{ route('profile', $user->username()) }}">
+            @endunless
 
-<flux:avatar
-    circle
-    loading="lazy"
-    src="{{ $src }}"
-    alt="{{ $user->name() }}"
-    {{ $attributes->merge(['class' => 'bg-gray-50']) }}
-/>
+            <flux:avatar
+                circle
+                loading="lazy"
+                src="{{ $src }}"
+                alt="{{ $user->name() }}"
+                {{ $attributes->merge(['class' => 'bg-gray-50']) }} />
 
-@unless ($unlinked)
-    </a>
-@endunless
+            @unless ($unlinked)
+        </a>
+    @endunless
+
+    @if ($showRefresh && $user->hasConnectedGitHubAccount())
+        <div class="absolute bottom-0 right-0 transform translate-x-1 translate-y-1">
+            <livewire:refresh-avatar :user="$user" />
+        </div>
+    @endif
+</div>

resources/views/livewire/refresh-avatar.blade.php

@@ -0,0 +1,27 @@
+<div>
+    <button
+        wire:click="refresh"
+        wire:loading.attr="disabled"
+        type="button"
+        class="flex items-center justify-center w-10 h-10 bg-white border-2 border-gray-300 rounded-full shadow-sm hover:bg-gray-50 hover:border-lio-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lio-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        title="Refresh avatar from GitHub">
+        <svg
+            wire:loading.remove
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 text-gray-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+        <svg
+            wire:loading
+            class="animate-spin h-5 w-5 text-gray-600"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+    </button>
+</div>

resources/views/users/settings/profile.blade.php

@@ -13,15 +13,15 @@
                     </p>
                 </div>
 
-                <div class="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6">
-                    <div class="grow space-y-6">
-                        <div class="space-y-1">
+                <div class="grid grid-cols-12 gap-6">
+                    <div class="col-span-12 sm:col-span-6 space-y-6">
+                        <div>
                             <x-forms.label for="name" />
 
                             <x-forms.inputs.input name="name" :value="Auth::user()->name()" required />
                         </div>
 
-                        <div class="space-y-1">
+                        <div>
                             <x-forms.label for="bio" />
 
                             <x-forms.inputs.textarea name="bio" maxlength="160">
@@ -34,17 +34,24 @@
                         </div>
                     </div>
 
-                    <div class="grow space-y-1 lg:grow-0 lg:shrink-0">
+                    <div class="col-span-12 sm:col-span-6">
                         <p class="block text-sm leading-5 font-medium text-gray-700" aria-hidden="true">
                             Profile Image
                         </p>
 
                         <div class="flex items-center mt-2">
                             <div class="shrink-0 inline-block overflow-hidden" aria-hidden="true">
-                                <x-avatar :user="Auth::user()" class="h-32 w-32 mt-4" unlinked />
+                                <div class="flex justify-center lg:justify-start">
+                                    <x-avatar
+                                        :user="Auth::user()"
+                                        class="h-32 w-32 mt-4"
+                                        unlinked
+                                        :show-refresh="Auth::user()->isLoggedInUser()"
+                                    />
+                                </div>
 
                                 <span class="mt-4 inline-block text-sm text-gray-500">
-                                    Change your avatar for
+                                    Change or refresh your avatar for<br>
 
                                     <a href="https://github.com/{{ Auth::user()->githubUsername() }}" class="text-lio-700">
                                         your GitHub profile