Google Fonts (#525)

* Google Fonts

* Google fonts improvement

* font button color

* Refine font selection UI and update font fetching logic

- Update FontsController to fetch Google fonts sorted by popularity.
- Enhance FontCard component with additional skeleton loaders for better UX during font loading.
- Adjust check icon positioning in FontCard to be absolute for consistent UI.
- Remove unnecessary class in GoogleFontPicker's text input.
- Add border and rounded styling to the font list container in GoogleFontPicker.
- Simplify computed property for enrichedFonts in GoogleFontPicker.
- Implement inline font style preview in FormCustomization component.

---------

Co-authored-by: Frank <csskfaves@gmail.com>
Co-authored-by: Julien Nahum <julien@nahum.net>

app/Http/Controllers/FontsController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+
+class FontsController extends Controller
+{
+    public function index(Request $request)
+    {
+        return \Cache::remember('google_fonts', 60 * 60, function () {
+            $url = "https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=" . config('services.google_fonts_api_key');
+            $response = Http::get($url);
+            if ($response->successful()) {
+                $fonts = collect($response->json()['items'])->filter(function ($font) {
+                    return !in_array($font['category'], ['monospace']);
+                })->map(function ($font) {
+                    return $font['family'];
+                })->toArray();
+                return response()->json($fonts);
+            }
+
+            return [];
+        });
+    }
+}

app/Http/Requests/UserFormRequest.php

@@ -29,6 +29,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'visibility' => ['required', Rule::in(Form::VISIBILITY)],
 
             // Customization
+            'font_family' => 'string|nullable',
             'theme' => ['required', Rule::in(Form::THEMES)],
             'width' => ['required', Rule::in(Form::WIDTHS)],
             'size' => ['required', Rule::in(Form::SIZES)],

app/Models/Forms/Form.php

@@ -31,9 +31,9 @@ class Form extends Model implements CachableAttributes
 
     public const DARK_MODE_VALUES = ['auto', 'light', 'dark'];
 
-    public const SIZES = ['sm','md','lg'];
+    public const SIZES = ['sm', 'md', 'lg'];
 
-    public const BORDER_RADIUS = ['none','small','full'];
+    public const BORDER_RADIUS = ['none', 'small', 'full'];
 
     public const THEMES = ['default', 'simple', 'notion'];
 
@@ -53,6 +53,7 @@ class Form extends Model implements CachableAttributes
         'visibility',
 
         // Customization
+        'font_family',
         'custom_domain',
         'size',
         'border_radius',