feat: add dicebear avatars to app

app/Domains/Settings/ManageUserPreferences/Services/StoreAvatarStylePreference.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Domains\Settings\ManageUserPreferences\Services;
+
+use App\Models\User;
+use App\Services\BaseService;
+
+class StoreAvatarStylePreference extends BaseService
+{
+    private array $data;
+
+    /**
+     * Get the validation rules that apply to the service.
+     */
+    public function rules(): array
+    {
+        return [
+            'account_id' => 'required|uuid|exists:accounts,id',
+            'author_id' => 'required|uuid|exists:users,id',
+            'avatar_style' => 'nullable|string',
+        ];
+    }
+
+    /**
+     * Get the permissions that apply to the user calling the service.
+     */
+    public function permissions(): array
+    {
+        return [
+            'author_must_belong_to_account',
+        ];
+    }
+
+    /**
+     * Saves the avatar style preferences.
+     * Determines which dicebear style is used to generate avatar's across the app for this user.
+     */
+    public function execute(array $data): User
+    {
+        $this->data = $data;
+
+        $this->validateRules($data);
+        $this->updateUser();
+
+        return $this->author;
+    }
+
+    private function updateUser(): void
+    {
+        $this->author->avatar_style = $this->data['avatar_style'];
+        $this->author->save();
+    }
+}

app/Domains/Settings/ManageUserPreferences/Web/Controllers/PreferencesAvatarStyleController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Domains\Settings\ManageUserPreferences\Web\Controllers;
+
+use App\Domains\Settings\ManageUserPreferences\Services\StoreAvatarStylePreference;
+use App\Domains\Settings\ManageUserPreferences\Web\ViewHelpers\UserPreferencesIndexViewHelper;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class PreferencesAvatarStyleController extends Controller
+{
+    public function store(Request $request)
+    {
+        $request = [
+            'account_id' => Auth::user()->account_id,
+            'author_id' => Auth::id(),
+            'avatar_style' => $request->input('avatarStyle'),
+        ];
+
+        (new StoreAvatarStylePreference)->execute($request);
+
+        return response()->json([
+            'data' => UserPreferencesIndexViewHelper::dtoAvatarStyle(Auth::user()),
+        ], 200);
+    }
+}

app/Domains/Settings/ManageUserPreferences/Web/ViewHelpers/UserPreferencesIndexViewHelper.php

@@ -2,6 +2,7 @@
 
 namespace App\Domains\Settings\ManageUserPreferences\Web\ViewHelpers;
 
+use App\Helpers\AvatarHelper;
 use App\Helpers\MonetaryNumberHelper;
 use App\Helpers\NameHelper;
 use App\Models\Contact;
@@ -13,6 +14,7 @@ class UserPreferencesIndexViewHelper
     public static function data(User $user): array
     {
         return [
+            'avatar_style' => self::dtoAvatarStyle($user),
             'help' => self::dtoHelp($user),
             'name_order' => self::dtoNameOrder($user),
             'date_format' => self::dtoDateFormat($user),
@@ -38,6 +40,23 @@ public static function dtoHelp(User $user): array
         ];
     }
 
+    public static function dtoAvatarStyle(User $user): array
+    {
+        $contact = new Contact([
+            'first_name' => $user->first_name,
+            'last_name' => $user->last_name,
+        ]);
+
+        return [
+            'url' => [
+                'store' => route('settings.preferences.avatar-style.store'),
+            ],
+            'style' => $user->avatar_style,
+            'avatar' => $contact->avatar,
+            'default_avatar' => AvatarHelper::generateRandomAvatar($contact),
+        ];
+    }
+
     public static function dtoNameOrder(User $user): array
     {
         $contact = new Contact([

app/Helpers/AvatarHelper.php

@@ -11,21 +11,39 @@ class AvatarHelper
     /**
      * Generate a new random avatar.
      *
-     * The Multiavatar library takes a name to generate a unique avatar.
+     * If the user has an avatar_style value set from his settings page the Dicebear
+     * avatar library will be used, otherwise it defaults to Multiavatar.
+     *
+     * The Multiavatar and Dicebear libraries take a name to generate a unique avatar.
      * However, contacts can be created in Monica without a name. When this case
      * happens, we'll generate a fake name for the contact, and generate an avatar
      * based on that name.
      */
-    public static function generateRandomAvatar(Contact $contact): string
+    public static function generateRandomAvatar(Contact $contact, $avatarStyle = null): array
     {
-        $multiavatar = new MultiAvatar;
-
         if (is_null($contact->first_name)) {
             $name = Faker::create()->name();
         } else {
             $name = $contact->first_name.' '.$contact->last_name;
         }
 
-        return $multiavatar($name, null, null);
+        if ($avatarStyle) {
+            return [
+                'type' => Contact::AVATAR_TYPE_URL,
+                'content' => self::getDicebearLink($avatarStyle, $name),
+            ];
+        }
+
+        $multiavatar = new MultiAvatar;
+
+        return [
+            'type' => Contact::AVATAR_TYPE_SVG,
+            'content' => $multiavatar($name, null, null),
+        ];
+    }
+
+    public static function getDicebearLink($avatarStyle, $name)
+    {
+        return "https://api.dicebear.com/9.x/{$avatarStyle}/svg?seed={$name}";
     }
 }

app/Models/Contact.php

@@ -483,18 +483,17 @@ protected function avatar(): Attribute
     {
         return Attribute::make(
             get: function ($value) {
-                $type = self::AVATAR_TYPE_SVG;
-                $content = AvatarHelper::generateRandomAvatar($this);
-
                 if ($this->file) {
                     $type = self::AVATAR_TYPE_URL;
                     $content = 'https://ucarecdn.com/'.$this->file->uuid.'/-/scale_crop/300x300/smart/-/format/auto/-/quality/smart_retina/';
+
+                    return [
+                        'type' => $type,
+                        'content' => $content,
+                    ];
                 }
 
-                return [
-                    'type' => $type,
-                    'content' => $content,
-                ];
+                return AvatarHelper::generateRandomAvatar($this, Auth::user()?->avatar_style);
             }
         );
     }

app/Models/User.php

@@ -100,6 +100,7 @@ class User extends Authenticatable implements HasLocalePreference, MustVerifyEma
         'locale',
         'help_shown',
         'contact_sort_order',
+        'avatar_style',
     ];
 
     /**

database/migrations/2024_11_14_225521_add_avatar_style_to_users.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('avatar_style')->nullable()->after('help_shown');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('avatar_style');
+        });
+    }
+};

resources/js/Pages/Settings/Preferences/Index.vue

@@ -33,6 +33,8 @@
 
     <main class="relative sm:mt-20">
       <div class="mx-auto max-w-3xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
+        <avatar-styles :data="data.avatar_style" />
+
         <help-preference :data="data.help" />
 
         <locale :data="data.locale" />
@@ -64,9 +66,11 @@ import Timezone from '@/Pages/Settings/Preferences/Partials/Timezone.vue';
 import Maps from '@/Pages/Settings/Preferences/Partials/Maps.vue';
 import Locale from '@/Pages/Settings/Preferences/Partials/Locale.vue';
 import HelpPreference from '@/Pages/Settings/Preferences/Partials/HelpPreference.vue';
+import AvatarStyles from '@/Pages/Settings/Preferences/Partials/AvatarStyles.vue';
 
 export default {
   components: {
+    AvatarStyles,
     InertiaLink: Link,
     Layout,
     NameOrder,