feat:[lar-145] complete preference page (#267)

Co-authored-by: Arthur Monney <[email protected]>

Author: cybersoldattech

app/Livewire/Components/User/Preferences.php

@@ -5,34 +5,78 @@
 namespace App\Livewire\Components\User;
 
 use App\Models\User;
+use Filament\Forms;
+use Filament\Forms\Concerns\InteractsWithForms;
+use Filament\Forms\Contracts\HasForms;
+use Filament\Forms\Form;
+use Filament\Notifications\Notification;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Auth;
 use Livewire\Attributes\Computed;
 use Livewire\Component;
 
 /**
+ * @property Form $form
  * @property User $user
  */
-final class Preferences extends Component
+final class Preferences extends Component implements HasForms
 {
-    public string $theme = 'light';
+    use InteractsWithForms;
+
+    public ?array $data = [];
+
+    public function mount(): void
+    {
+        $this->form->fill([
+            'theme' => $this->user->setting('theme', 'light'),
+            'locale' => $this->user->setting('locale', config('app.locale')),
+        ]);
+    }
 
     #[Computed]
     public function user(): User
     {
         return Auth::user(); // @phpstan-ignore-line
     }
 
-    public function mount(): void
+    public function form(Form $form): Form
     {
-        $this->theme = get_current_theme();
+        return $form
+            ->schema([
+                Forms\Components\ToggleButtons::make('theme')
+                    ->label('Theme')
+                    ->options([
+                        'light' => 'Light',
+                        'dark' => 'Dark',
+                    ])
+                    ->icons([
+                        'light' => 'phosphor-sun-duotone',
+                        'dark' => 'phosphor-moon-duotone',
+                    ])
+                    ->grouped(),
+                Forms\Components\Select::make('locale')
+                    ->label(__('global.language'))
+                    ->options([
+                        'fr' => __('global.french'),
+                        'en' => __('global.english'),
+                    ]),
+            ])
+            ->statePath('data');
     }
 
-    public function updatedTheme(string $value): void
+    public function save(): void
     {
-        $this->user->settings(['theme' => $value]);
+        $this->validate();
+
+        $this->user->settings($this->form->getState());
+
+        $this->dispatch('theme-changed', get_current_theme());
 
-        $this->redirectRoute('settings', navigate: true);
+        Notification::make()
+            ->success()
+            ->title(__('notifications.user.profile_updated'))
+            ->duration(3500)
+            ->send();
     }
 
     public function render(): View

lang/en/global.php

@@ -104,5 +104,8 @@
     'locale_help' => 'The language in which your content will be available on the site.',
     'community_oss_description' => 'The community is also developing open source packages to contribute to the Laravel ecosystem.',
     'holidays' => 'Happy Holidays',
+    'language' => 'Language',
+    'french' => 'French',
+    'english' => 'English',
 
 ];

lang/fr/global.php

@@ -104,5 +104,7 @@
     'locale_help' => 'La langue dans laquelle votre contenu sera accessible sur le site.',
     'holidays' => 'Joyeuses fêtes',
     'community_oss_description' => 'La communauté développe aussi des packages open source pour contribuer à l\'ecosystème de Laravel.',
-
+    'language' => 'Langue',
+    'french' => 'Français',
+    'english' => 'Anglais',
 ];

resources/js/app.js

@@ -19,4 +19,51 @@ Alpine.plugin(collapse)
 
 window.Alpine = Alpine
 
+document.addEventListener('alpine:init', () => {
+  const theme =
+    localStorage.getItem('theme') ??
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--default-theme-mode',
+    )
+
+  window.Alpine.store(
+    'theme',
+    theme === 'dark' ||
+    (theme === 'system' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ? 'dark'
+      : 'light',
+  )
+
+  window.addEventListener('theme-changed', (event) => {
+    let theme = event.detail
+
+    localStorage.setItem('theme', theme)
+
+    if (theme === 'system') {
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+    }
+
+    window.Alpine.store('theme', theme)
+  })
+
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', (event) => {
+      if (localStorage.getItem('theme') === 'system') {
+        window.Alpine.store('theme', event.matches ? 'dark' : 'light')
+      }
+    })
+
+  window.Alpine.effect(() => {
+    const theme = window.Alpine.store('theme')
+
+    theme === 'dark'
+      ? document.documentElement.classList.add('dark')
+      : document.documentElement.classList.remove('dark')
+  })
+})
+
 Livewire.start()

resources/views/layouts/app.blade.php

@@ -1,7 +1,7 @@
 @props(['title' => null, 'canonical' => null])
 
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full scroll-smooth {{ get_current_theme() }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full scroll-smooth">
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -29,6 +29,25 @@
     @filamentStyles
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @include('partials._analytics')
+
+    @if (! auth()->check())
+        <script>
+            localStorage.setItem('theme', 'light')
+        </script>
+    @else
+        <script>
+            const theme = localStorage.getItem('theme') ?? @js(auth()->user()->setting('theme', 'light'))
+
+            if (
+                theme === 'dark' ||
+                (theme === 'system' &&
+                    window.matchMedia('(prefers-color-scheme: dark)')
+                        .matches)
+            ) {
+                document.documentElement.classList.add('dark')
+            }
+        </script>
+    @endif
 </head>
 <body class="h-full bg-gray-50 font-sans text-gray-500 antialiased dark:text-gray-400 dark:bg-gray-900">
     <div class="flex min-h-screen flex-col justify-between">

resources/views/livewire/components/user/preferences.blade.php

@@ -4,5 +4,12 @@
         :description="__('pages/account.settings.preferences_description')"
     />
 
-    <div class="mt-10"></div>
+    <form wire:submit="save" class="mt-10 max-w-xs space-y-10">
+        {{ $this->form }}
+
+        <x-buttons.submit
+            :title="__('actions.save')"
+            wire:loading.attr="data-loading"
+        />
+    </form>
 </div>

resources/views/livewire/pages/account/settings.blade.php

@@ -44,13 +44,13 @@
                     {{ __('global.navigation.notifications') }}
                 </x-filament::tabs.item>
 
-                <x-filament::tabs.item
+                {{--<x-filament::tabs.item
                     alpine-active="activeTab === 'subscription'"
                     x-on:click="activeTab = 'subscription'"
                     icon="untitledui-credit-card-02"
                 >
                     {{ __('global.navigation.subscription') }}
-                </x-filament::tabs.item>
+                </x-filament::tabs.item>--}}
             </x-filament::tabs>
         </div>
         <div class="mt-10 lg:mt-0 lg:flex-1">
@@ -66,9 +66,7 @@
             <div x-cloak x-show="activeTab === 'notifications'">
                 <livewire:components.user.notifications />
             </div>
-            <div x-cloak x-show="activeTab === 'subscription'">
-                <h4>Subscription</h4>
-            </div>
+            <div x-cloak x-show="activeTab === 'subscription'"></div>
         </div>
     </section>
 </x-container>