From 66680bd753c5aa48fa59f1a73ab6176222ddbabc Mon Sep 17 00:00:00 2001
From: Lewis Larsen <lewis@larsens.dev>
Date: Sun, 18 Aug 2024 23:24:07 +0100
Subject: [PATCH] feat: Updated experiments

---
 app/Providers/AppServiceProvider.php          |  31 +-
 .../livewire/layout/navigation.blade.php      | 464 +++++++++++++-----
 .../profile/experiments-manager.blade.php     |  78 ++-
 3 files changed, 420 insertions(+), 153 deletions(-)

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index fad3224d..0d733c71 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -14,7 +14,7 @@
 
 /**
  * Core application service provider.
- * Handles service registration and authorization setup.
+ * Handles service registration, authorization setup, and feature flags.
  */
 class AppServiceProvider extends ServiceProvider
 {
@@ -34,10 +34,7 @@ public function boot(): void
         Sanctum::usePersonalAccessTokenModel(PersonalAccessToken::class);
 
         $this->defineGates();
-
-        /*        Feature::define('example-experiment', function () {
-                    return false;
-                });*/
+        $this->defineFeatures();
     }
 
     /**
@@ -56,4 +53,28 @@ private function defineGates(): void
     {
         Gate::define('viewPulse', fn (User $user): bool => $user->isAdmin());
     }
+
+    /**
+     * Define feature flags with additional metadata.
+     */
+    private function defineFeatures(): void
+    {
+        $features = [
+            'navigation-redesign' => [
+                'title' => 'Navigation Redesign',
+                'description' => 'A new, more intuitive navigation structure for improved user experience.',
+                'group' => 'UI/UX',
+                'icon' => 'heroicon-o-bars-3',
+            ],
+        ];
+
+        foreach ($features as $key => $metadata) {
+            Feature::define($key, function (): false {
+                return false;
+            });
+
+            // Store the metadata for later use
+            config(["features.{$key}" => $metadata]);
+        }
+    }
 }
diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
index f99d1040..ccaeb6ba 100644
--- a/resources/views/livewire/layout/navigation.blade.php
+++ b/resources/views/livewire/layout/navigation.blade.php
@@ -25,149 +25,103 @@ public function toggleUserDropdown(): void
     }
 }; ?>
 
+@feature('navigation-redesign')
 <nav x-data="{
-    open: @entangle('isMobileMenuOpen'),
-    userOpen: @entangle('isUserDropdownOpen'),
-    desktopDropdownOpen: false
-}" class="bg-primary-950 border-b border-gray-900 sticky top-0 z-50">
-    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    mobileMenuOpen: false,
+    userDropdownOpen: false
+}" class="bg-gradient-to-r from-primary-900 to-primary-800 border-b border-primary-700">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
-            <!-- Logo and Primary Navigation -->
-            <div class="flex items-center justify-between w-full md:w-auto">
-                <div class="md:hidden flex-grow"></div>
-                <a href="{{ route('overview') }}" wire:navigate class="flex-shrink-0 flex items-center mx-auto md:mx-0 group">
-                    <x-application-logo class="block h-6 w-auto fill-current text-white transition duration-300 ease-in-out transform mt-0.5"/>
-                </a>
-                <div class="hidden md:ml-6 md:flex md:space-x-1">
+            <div class="flex">
+                <!-- Logo -->
+                <div class="flex-shrink-0 flex items-center">
+                    <a href="{{ route('overview') }}" wire:navigate>
+                        <x-application-logo class="block h-8 w-auto text-primary-300" />
+                    </a>
+                </div>
+
+                <!-- Primary Navigation Menu -->
+                <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                     <x-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
-                        @svg('heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch'), 'h-5 w-5 mr-2')
-                        <span>{{ __(Auth::user()->backupTasks->isNotEmpty() ? 'Overview' : 'Get Started') }}</span>
+                        <x-dynamic-component :component="'heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch')" class="h-5 w-5 mr-2" />
+                        {{ __(Auth::user()->backupTasks->isNotEmpty() ? 'Overview' : 'Get Started') }}
                     </x-nav-link>
+
                     @if (Auth::user()->backupTasks->isNotEmpty())
                         <x-nav-link :href="route('backup-tasks.index')" :active="request()->routeIs('backup-tasks.*')" wire:navigate>
-                            @svg('heroicon-o-archive-box', 'h-5 w-5 mr-2')
-                            <span>{{ __('Backup Tasks') }}</span>
+                            <x-heroicon-o-archive-box class="h-5 w-5 mr-2" />
+                            {{ __('Backup Tasks') }}
                         </x-nav-link>
                     @endif
                 </div>
-                <div class="md:hidden flex-grow flex justify-end">
-                    <!-- Mobile menu button -->
-                    <button wire:click="toggleMobileMenu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out" aria-label="Toggle mobile menu">
-                        <span class="sr-only">Open main menu</span>
-                        <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out" :class="{'opacity-0': open, 'opacity-100': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                        <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out absolute" :class="{'opacity-100': open, 'opacity-0': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
             </div>
 
             <!-- Secondary Navigation and User Menu -->
-            <div class="hidden md:flex md:items-center md:space-x-4">
-                <div class="flex space-x-1">
+            <div class="hidden sm:flex sm:items-center sm:ml-6">
+                <div class="flex items-center space-x-4">
                     @if (Auth::user()->backupDestinations->isNotEmpty())
                         <x-nav-link :href="route('backup-destinations.index')" :active="request()->routeIs('backup-destinations.*')" wire:navigate>
-                            @svg('heroicon-o-globe-europe-africa', 'h-5 w-5 mr-2')
-                            <span>{{ __('Destinations') }}</span>
+                            <x-heroicon-o-globe-europe-africa class="h-5 w-5 mr-2" />
+                            {{ __('Destinations') }}
                         </x-nav-link>
                     @endif
                     @if (Auth::user()->remoteServers->isNotEmpty())
                         <x-nav-link :href="route('remote-servers.index')" :active="request()->routeIs('remote-servers.*')" wire:navigate>
-                            @svg('heroicon-o-server-stack', 'h-5 w-5 mr-2')
-                            <span>{{ __('Servers') }}</span>
+                            <x-heroicon-o-server-stack class="h-5 w-5 mr-2" />
+                            {{ __('Servers') }}
                         </x-nav-link>
                     @endif
                 </div>
-                <div class="flex items-center space-x-4 ml-4 border-l border-gray-700 pl-4">
-                    <x-theme-switcher />
+
+                <!-- User Dropdown -->
+                <div class="ml-3 relative">
                     <x-dropdown align="right" width="48">
                         <x-slot name="trigger">
-                            <button @click="desktopDropdownOpen = !desktopDropdownOpen"
-                                    class="flex items-center text-sm font-medium text-gray-50 hover:text-gray-100 focus:outline-none transition duration-150 ease-in-out"
-                                    aria-expanded="false">
-                                <span class="sr-only">Open user menu</span>
-                                <div x-data="{
-                imageLoaded: false,
-                reloadCount: 0,
-                maxReloads: 3,
-                imageUrl: '{{ Auth::user()->gravatar() }}'
-            }"
-                                     class="relative h-8 w-8 mr-2">
-                                    <!-- Skeleton loader -->
-                                    <div
-                                        x-show="!imageLoaded"
-                                        class="absolute inset-0 bg-gray-600 dark:bg-gray-400 rounded-full animate-pulse"
-                                    ></div>
-                                    <!-- User avatar -->
-                                    <img
-                                        x-on:load="imageLoaded = true"
-                                        x-on:error="reloadImage"
-                                        x-bind:class="{ 'opacity-0': !imageLoaded, 'opacity-100': imageLoaded }"
-                                        class="h-8 w-8 rounded-full border border-gray-950 transition-opacity duration-300"
-                                        x-bind:src="imageUrl"
-                                    />
+                            <button class="flex items-center text-sm font-medium text-primary-200 hover:text-primary-100 focus:outline-none transition duration-150 ease-in-out">
+                                <div class="mr-3 relative">
+                                    <img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->gravatar() }}" alt="{{ Auth::user()->name }}">
                                 </div>
-                                <span x-data="{ name: @js(auth()->user()->first_name) }"
-                                      x-text="name"
-                                      x-on:profile-updated.window="name = $event.detail.name"
-                                ></span>
-                                <svg class="ml-2 h-4 w-4 transition-transform duration-200 ease-in-out"
-                                     :class="{'rotate-180': desktopDropdownOpen}"
-                                     xmlns="http://www.w3.org/2000/svg"
-                                     viewBox="0 0 20 20"
-                                     fill="currentColor">
+                                <span x-data="{ name: @js(auth()->user()->first_name) }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></span>
+                                <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                 </svg>
                             </button>
                         </x-slot>
 
-                        <script>
-                            function reloadImage() {
-                                if (this.reloadCount < this.maxReloads) {
-                                    setTimeout(() => {
-                                        this.reloadCount++;
-                                        this.imageLoaded = false;
-                                        this.imageUrl = '{{ Auth::user()->gravatar() }}' + '?' + new Date().getTime(); // Cache busting
-                                    }, 1000); // 1-second delay before retry
-                                }
-                            }
-                        </script>
                         <x-slot name="content">
                             <x-dropdown-link :href="route('profile')" wire:navigate>
-                                @svg('heroicon-o-user-circle', 'h-5 w-5 mr-2 inline')
+                                <x-heroicon-o-user-circle class="w-5 h-5 mr-2 inline" />
                                 {{ __('Profile') }}
                             </x-dropdown-link>
                             <x-dropdown-link :href="route('tags.index')" wire:navigate>
-                                @svg('heroicon-o-tag', 'h-5 w-5 mr-2 inline')
+                                <x-heroicon-o-tag class="w-5 h-5 mr-2 inline" />
                                 {{ __('Tags') }}
                             </x-dropdown-link>
                             <x-dropdown-link :href="route('notification-streams.index')" wire:navigate>
-                                @svg('heroicon-o-bell', 'h-5 w-5 mr-2 inline')
+                                <x-heroicon-o-bell class="w-5 h-5 mr-2 inline" />
                                 {{ __('Notifications') }}
                             </x-dropdown-link>
                             <x-dropdown-link :href="route('profile.api')" wire:navigate>
-                                @svg('heroicon-o-code-bracket', 'h-5 w-5 mr-2 inline')
+                                <x-heroicon-o-code-bracket class="w-5 h-5 mr-2 inline" />
                                 {{ __('API Tokens') }}
                             </x-dropdown-link>
                             <x-dropdown-link :href="route('profile.mfa')" wire:navigate>
-                                @svg('heroicon-o-lock-closed', 'h-5 w-5 mr-2 inline')
+                                <x-heroicon-o-lock-closed class="w-5 h-5 mr-2 inline" />
                                 {{ __('2FA Settings') }}
                             </x-dropdown-link>
                             <x-dropdown-link :href="route('statistics')" wire:navigate>
-                                @svg('heroicon-o-chart-pie', 'h-5 w-5 mr-2 inline')
+                                <x-heroicon-o-chart-pie class="w-5 h-5 mr-2 inline" />
                                 {{ __('Statistics') }}
                             </x-dropdown-link>
                             @if (Auth::user()->isAdmin())
                                 <div class="border-t border-gray-200 dark:border-gray-600"></div>
                                 <x-dropdown-link href="{{ url('/pulse') }}">
-                                    @svg('heroicon-o-chart-bar', 'h-5 w-5 mr-2 inline')
-                                    Laravel Pulse
+                                    <x-heroicon-o-chart-bar class="w-5 h-5 mr-2 inline" />
+                                    {{ __('Laravel Pulse') }}
                                 </x-dropdown-link>
                                 <x-dropdown-link href="{{ url('/horizon/dashboard') }}">
-                                    @svg('heroicon-o-cpu-chip', 'h-5 w-5 mr-2 inline')
-                                    Laravel Horizon
+                                    <x-heroicon-o-cpu-chip class="w-5 h-5 mr-2 inline" />
+                                    {{ __('Laravel Horizon') }}
                                 </x-dropdown-link>
                             @endif
                             <div class="border-t border-gray-200 dark:border-gray-600"></div>
@@ -180,91 +134,359 @@ function reloadImage() {
                         </x-slot>
                     </x-dropdown>
                 </div>
+
+                <!-- Theme Switcher -->
+                <div class="ml-3">
+                    <x-theme-switcher />
+                </div>
+            </div>
+
+            <!-- Mobile menu button -->
+            <div class="flex items-center sm:hidden">
+                <button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center p-2 rounded-md text-primary-300 hover:text-primary-100 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false">
+                    <span class="sr-only">Open main menu</span>
+                    <svg class="block h-6 w-6" :class="{'hidden': mobileMenuOpen, 'block': !mobileMenuOpen }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                    <svg class="hidden h-6 w-6" :class="{'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
             </div>
         </div>
     </div>
 
-    <!-- Mobile menu -->
-    <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="md:hidden" x-trap="open">
-        <div class="px-2 pt-2 pb-3 space-y-1">
+    <!-- Mobile menu, show/hide based on menu state. -->
+    <div x-show="mobileMenuOpen" class="sm:hidden" id="mobile-menu">
+        <div class="pt-2 pb-3 space-y-1">
             <x-responsive-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
-                @svg('heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch'), 'h-5 w-5 text-gray-50 mr-2 inline')
+                <x-dynamic-component :component="'heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch')" class="h-5 w-5 mr-2 inline" />
                 {{ __(Auth::user()->backupTasks->isNotEmpty() ? 'Overview' : 'Get Started') }}
             </x-responsive-nav-link>
+
             @if (Auth::user()->backupTasks->isNotEmpty())
                 <x-responsive-nav-link :href="route('backup-tasks.index')" :active="request()->routeIs('backup-tasks.*')" wire:navigate>
-                    @svg('heroicon-o-archive-box', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-archive-box class="h-5 w-5 mr-2 inline" />
                     {{ __('Backup Tasks') }}
                 </x-responsive-nav-link>
             @endif
+
             @if (Auth::user()->backupDestinations->isNotEmpty())
                 <x-responsive-nav-link :href="route('backup-destinations.index')" :active="request()->routeIs('backup-destinations.*')" wire:navigate>
-                    @svg('heroicon-o-globe-europe-africa', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-globe-europe-africa class="h-5 w-5 mr-2 inline" />
                     {{ __('Destinations') }}
                 </x-responsive-nav-link>
             @endif
+
             @if (Auth::user()->remoteServers->isNotEmpty())
                 <x-responsive-nav-link :href="route('remote-servers.index')" :active="request()->routeIs('remote-servers.*')" wire:navigate>
-                    @svg('heroicon-o-server-stack', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-server-stack class="h-5 w-5 mr-2 inline" />
                     {{ __('Servers') }}
                 </x-responsive-nav-link>
             @endif
         </div>
-        <div class="pt-4 pb-3 border-t border-gray-700">
-            <div class="flex items-center px-5">
+
+        <div class="pt-4 pb-1 border-t border-primary-700">
+            <div class="flex items-center px-4">
                 <div class="flex-shrink-0">
                     <img class="h-10 w-10 rounded-full" src="{{ Auth::user()->gravatar() }}" alt="{{ Auth::user()->name }}">
                 </div>
                 <div class="ml-3">
-                    <div class="text-base font-medium leading-none text-white" x-data="{ name: @js(auth()->user()->name) }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
-                    <div class="text-sm font-medium leading-none text-gray-400">{{ Auth::user()->email }}</div>
+                    <div class="text-base font-medium text-primary-100" x-data="{ name: @js(auth()->user()->name) }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
+                    <div class="text-sm font-medium text-primary-300">{{ Auth::user()->email }}</div>
                 </div>
             </div>
-            <div class="mt-3 px-2 space-y-1">
+
+            <div class="mt-3 space-y-1">
                 <x-responsive-nav-link :href="route('profile')" wire:navigate>
-                    @svg('heroicon-o-user-circle', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-user-circle class="w-5 h-5 mr-2 inline" />
                     {{ __('Profile') }}
                 </x-responsive-nav-link>
                 <x-responsive-nav-link :href="route('tags.index')" wire:navigate>
-                    @svg('heroicon-o-tag', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-tag class="w-5 h-5 mr-2 inline" />
                     {{ __('Tags') }}
                 </x-responsive-nav-link>
                 <x-responsive-nav-link :href="route('notification-streams.index')" wire:navigate>
-                    @svg('heroicon-o-bell', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-bell class="w-5 h-5 mr-2 inline" />
                     {{ __('Notifications') }}
                 </x-responsive-nav-link>
                 <x-responsive-nav-link :href="route('profile.api')" wire:navigate>
-                    @svg('heroicon-o-code-bracket', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-code-bracket class="w-5 h-5 mr-2 inline" />
                     {{ __('API Tokens') }}
                 </x-responsive-nav-link>
                 <x-responsive-nav-link :href="route('profile.mfa')" wire:navigate>
-                    @svg('heroicon-o-lock-closed', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-lock-closed class="w-5 h-5 mr-2 inline" />
                     {{ __('2FA Settings') }}
                 </x-responsive-nav-link>
                 <x-responsive-nav-link :href="route('statistics')" wire:navigate>
-                    @svg('heroicon-o-chart-pie', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    <x-heroicon-o-chart-pie class="w-5 h-5 mr-2 inline" />
                     {{ __('Statistics') }}
                 </x-responsive-nav-link>
                 @if (Auth::user()->isAdmin())
                     <x-responsive-nav-link href="{{ url('/pulse') }}">
-                        @svg('heroicon-o-chart-bar', 'h-5 w-5 text-gray-50 mr-2 inline')
-                        Laravel Pulse
+                        <x-heroicon-o-chart-bar class="w-5 h-5 mr-2 inline" />
+                        {{ __('Laravel Pulse') }}
                     </x-responsive-nav-link>
                     <x-responsive-nav-link href="{{ url('/horizon/dashboard') }}">
-                        @svg('heroicon-o-cpu-chip', 'h-5 w-5 text-gray-50 mr-2 inline')
-                        Laravel Horizon
+                        <x-heroicon-o-cpu-chip class="w-5 h-5 mr-2 inline" />
+                        {{ __('Laravel Horizon') }}
                     </x-responsive-nav-link>
                 @endif
-                <button wire:click="logout" class="w-full text-start">
-                    <x-responsive-nav-link>
-                        @svg('heroicon-o-arrow-left-on-rectangle', 'h-5 w-5 text-gray-50 mr-2 inline')
-                        {{ __('Log Out') }}
-                    </x-responsive-nav-link>
-                </button>
-                <div class="px-2 py-2">
-                    <x-responsive-theme-switcher />
-                </div>
+            </div>
+            <button wire:click="logout" class="w-full text-start">
+                <x-responsive-nav-link>
+                    @svg('heroicon-o-arrow-left-on-rectangle', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    {{ __('Log Out') }}
+                </x-responsive-nav-link>
+            </button>
+            <div class="mt-3 px-4">
+                <x-responsive-theme-switcher />
             </div>
         </div>
     </div>
 </nav>
+@else
+    <nav x-data="{
+    open: @entangle('isMobileMenuOpen'),
+    userOpen: @entangle('isUserDropdownOpen'),
+    desktopDropdownOpen: false
+}" class="bg-primary-950 border-b border-gray-900 sticky top-0 z-50">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <!-- Logo and Primary Navigation -->
+                <div class="flex items-center justify-between w-full md:w-auto">
+                    <div class="md:hidden flex-grow"></div>
+                    <a href="{{ route('overview') }}" wire:navigate class="flex-shrink-0 flex items-center mx-auto md:mx-0 group">
+                        <x-application-logo class="block h-6 w-auto fill-current text-white transition duration-300 ease-in-out transform mt-0.5"/>
+                    </a>
+                    <div class="hidden md:ml-6 md:flex md:space-x-1">
+                        <x-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
+                            @svg('heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch'), 'h-5 w-5 mr-2')
+                            <span>{{ __(Auth::user()->backupTasks->isNotEmpty() ? 'Overview' : 'Get Started') }}</span>
+                        </x-nav-link>
+                        @if (Auth::user()->backupTasks->isNotEmpty())
+                            <x-nav-link :href="route('backup-tasks.index')" :active="request()->routeIs('backup-tasks.*')" wire:navigate>
+                                @svg('heroicon-o-archive-box', 'h-5 w-5 mr-2')
+                                <span>{{ __('Backup Tasks') }}</span>
+                            </x-nav-link>
+                        @endif
+                    </div>
+                    <div class="md:hidden flex-grow flex justify-end">
+                        <!-- Mobile menu button -->
+                        <button wire:click="toggleMobileMenu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out" aria-label="Toggle mobile menu">
+                            <span class="sr-only">Open main menu</span>
+                            <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out" :class="{'opacity-0': open, 'opacity-100': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                            </svg>
+                            <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out absolute" :class="{'opacity-100': open, 'opacity-0': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Secondary Navigation and User Menu -->
+                <div class="hidden md:flex md:items-center md:space-x-4">
+                    <div class="flex space-x-1">
+                        @if (Auth::user()->backupDestinations->isNotEmpty())
+                            <x-nav-link :href="route('backup-destinations.index')" :active="request()->routeIs('backup-destinations.*')" wire:navigate>
+                                @svg('heroicon-o-globe-europe-africa', 'h-5 w-5 mr-2')
+                                <span>{{ __('Destinations') }}</span>
+                            </x-nav-link>
+                        @endif
+                        @if (Auth::user()->remoteServers->isNotEmpty())
+                            <x-nav-link :href="route('remote-servers.index')" :active="request()->routeIs('remote-servers.*')" wire:navigate>
+                                @svg('heroicon-o-server-stack', 'h-5 w-5 mr-2')
+                                <span>{{ __('Servers') }}</span>
+                            </x-nav-link>
+                        @endif
+                    </div>
+                    <div class="flex items-center space-x-4 ml-4 border-l border-gray-700 pl-4">
+                        <x-theme-switcher />
+                        <x-dropdown align="right" width="48">
+                            <x-slot name="trigger">
+                                <button @click="desktopDropdownOpen = !desktopDropdownOpen"
+                                        class="flex items-center text-sm font-medium text-gray-50 hover:text-gray-100 focus:outline-none transition duration-150 ease-in-out"
+                                        aria-expanded="false">
+                                    <span class="sr-only">Open user menu</span>
+                                    <div x-data="{
+                imageLoaded: false,
+                reloadCount: 0,
+                maxReloads: 3,
+                imageUrl: '{{ Auth::user()->gravatar() }}'
+            }"
+                                         class="relative h-8 w-8 mr-2">
+                                        <!-- Skeleton loader -->
+                                        <div
+                                            x-show="!imageLoaded"
+                                            class="absolute inset-0 bg-gray-600 dark:bg-gray-400 rounded-full animate-pulse"
+                                        ></div>
+                                        <!-- User avatar -->
+                                        <img
+                                            x-on:load="imageLoaded = true"
+                                            x-on:error="reloadImage"
+                                            x-bind:class="{ 'opacity-0': !imageLoaded, 'opacity-100': imageLoaded }"
+                                            class="h-8 w-8 rounded-full border border-gray-950 transition-opacity duration-300"
+                                            x-bind:src="imageUrl"
+                                        />
+                                    </div>
+                                    <span x-data="{ name: @js(auth()->user()->first_name) }"
+                                          x-text="name"
+                                          x-on:profile-updated.window="name = $event.detail.name"
+                                    ></span>
+                                    <svg class="ml-2 h-4 w-4 transition-transform duration-200 ease-in-out"
+                                         :class="{'rotate-180': desktopDropdownOpen}"
+                                         xmlns="http://www.w3.org/2000/svg"
+                                         viewBox="0 0 20 20"
+                                         fill="currentColor">
+                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                    </svg>
+                                </button>
+                            </x-slot>
+
+                            <script>
+                                function reloadImage() {
+                                    if (this.reloadCount < this.maxReloads) {
+                                        setTimeout(() => {
+                                            this.reloadCount++;
+                                            this.imageLoaded = false;
+                                            this.imageUrl = '{{ Auth::user()->gravatar() }}' + '?' + new Date().getTime(); // Cache busting
+                                        }, 1000); // 1-second delay before retry
+                                    }
+                                }
+                            </script>
+                            <x-slot name="content">
+                                <x-dropdown-link :href="route('profile')" wire:navigate>
+                                    @svg('heroicon-o-user-circle', 'h-5 w-5 mr-2 inline')
+                                    {{ __('Profile') }}
+                                </x-dropdown-link>
+                                <x-dropdown-link :href="route('tags.index')" wire:navigate>
+                                    @svg('heroicon-o-tag', 'h-5 w-5 mr-2 inline')
+                                    {{ __('Tags') }}
+                                </x-dropdown-link>
+                                <x-dropdown-link :href="route('notification-streams.index')" wire:navigate>
+                                    @svg('heroicon-o-bell', 'h-5 w-5 mr-2 inline')
+                                    {{ __('Notifications') }}
+                                </x-dropdown-link>
+                                <x-dropdown-link :href="route('profile.api')" wire:navigate>
+                                    @svg('heroicon-o-code-bracket', 'h-5 w-5 mr-2 inline')
+                                    {{ __('API Tokens') }}
+                                </x-dropdown-link>
+                                <x-dropdown-link :href="route('profile.mfa')" wire:navigate>
+                                    @svg('heroicon-o-lock-closed', 'h-5 w-5 mr-2 inline')
+                                    {{ __('2FA Settings') }}
+                                </x-dropdown-link>
+                                <x-dropdown-link :href="route('statistics')" wire:navigate>
+                                    @svg('heroicon-o-chart-pie', 'h-5 w-5 mr-2 inline')
+                                    {{ __('Statistics') }}
+                                </x-dropdown-link>
+                                @if (Auth::user()->isAdmin())
+                                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
+                                    <x-dropdown-link href="{{ url('/pulse') }}">
+                                        @svg('heroicon-o-chart-bar', 'h-5 w-5 mr-2 inline')
+                                        Laravel Pulse
+                                    </x-dropdown-link>
+                                    <x-dropdown-link href="{{ url('/horizon/dashboard') }}">
+                                        @svg('heroicon-o-cpu-chip', 'h-5 w-5 mr-2 inline')
+                                        Laravel Horizon
+                                    </x-dropdown-link>
+                                @endif
+                                <div class="border-t border-gray-200 dark:border-gray-600"></div>
+                                <button wire:click="logout" class="w-full text-start" role="menuitem">
+                                    <x-dropdown-link>
+                                        @svg('heroicon-o-arrow-left-on-rectangle', 'h-5 w-5 mr-2 inline')
+                                        {{ __('Log Out') }}
+                                    </x-dropdown-link>
+                                </button>
+                            </x-slot>
+                        </x-dropdown>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mobile menu -->
+        <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="md:hidden" x-trap="open">
+            <div class="px-2 pt-2 pb-3 space-y-1">
+                <x-responsive-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
+                    @svg('heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch'), 'h-5 w-5 text-gray-50 mr-2 inline')
+                    {{ __(Auth::user()->backupTasks->isNotEmpty() ? 'Overview' : 'Get Started') }}
+                </x-responsive-nav-link>
+                @if (Auth::user()->backupTasks->isNotEmpty())
+                    <x-responsive-nav-link :href="route('backup-tasks.index')" :active="request()->routeIs('backup-tasks.*')" wire:navigate>
+                        @svg('heroicon-o-archive-box', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Backup Tasks') }}
+                    </x-responsive-nav-link>
+                @endif
+                @if (Auth::user()->backupDestinations->isNotEmpty())
+                    <x-responsive-nav-link :href="route('backup-destinations.index')" :active="request()->routeIs('backup-destinations.*')" wire:navigate>
+                        @svg('heroicon-o-globe-europe-africa', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Destinations') }}
+                    </x-responsive-nav-link>
+                @endif
+                @if (Auth::user()->remoteServers->isNotEmpty())
+                    <x-responsive-nav-link :href="route('remote-servers.index')" :active="request()->routeIs('remote-servers.*')" wire:navigate>
+                        @svg('heroicon-o-server-stack', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Servers') }}
+                    </x-responsive-nav-link>
+                @endif
+            </div>
+            <div class="pt-4 pb-3 border-t border-gray-700">
+                <div class="flex items-center px-5">
+                    <div class="flex-shrink-0">
+                        <img class="h-10 w-10 rounded-full" src="{{ Auth::user()->gravatar() }}" alt="{{ Auth::user()->name }}">
+                    </div>
+                    <div class="ml-3">
+                        <div class="text-base font-medium leading-none text-white" x-data="{ name: @js(auth()->user()->name) }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
+                        <div class="text-sm font-medium leading-none text-gray-400">{{ Auth::user()->email }}</div>
+                    </div>
+                </div>
+                <div class="mt-3 px-2 space-y-1">
+                    <x-responsive-nav-link :href="route('profile')" wire:navigate>
+                        @svg('heroicon-o-user-circle', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Profile') }}
+                    </x-responsive-nav-link>
+                    <x-responsive-nav-link :href="route('tags.index')" wire:navigate>
+                        @svg('heroicon-o-tag', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Tags') }}
+                    </x-responsive-nav-link>
+                    <x-responsive-nav-link :href="route('notification-streams.index')" wire:navigate>
+                        @svg('heroicon-o-bell', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Notifications') }}
+                    </x-responsive-nav-link>
+                    <x-responsive-nav-link :href="route('profile.api')" wire:navigate>
+                        @svg('heroicon-o-code-bracket', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('API Tokens') }}
+                    </x-responsive-nav-link>
+                    <x-responsive-nav-link :href="route('profile.mfa')" wire:navigate>
+                        @svg('heroicon-o-lock-closed', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('2FA Settings') }}
+                    </x-responsive-nav-link>
+                    <x-responsive-nav-link :href="route('statistics')" wire:navigate>
+                        @svg('heroicon-o-chart-pie', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Statistics') }}
+                    </x-responsive-nav-link>
+                    @if (Auth::user()->isAdmin())
+                        <x-responsive-nav-link href="{{ url('/pulse') }}">
+                            @svg('heroicon-o-chart-bar', 'h-5 w-5 text-gray-50 mr-2 inline')
+                            Laravel Pulse
+                        </x-responsive-nav-link>
+                        <x-responsive-nav-link href="{{ url('/horizon/dashboard') }}">
+                            @svg('heroicon-o-cpu-chip', 'h-5 w-5 text-gray-50 mr-2 inline')
+                            Laravel Horizon
+                        </x-responsive-nav-link>
+                    @endif
+                    <button wire:click="logout" class="w-full text-start">
+                        <x-responsive-nav-link>
+                            @svg('heroicon-o-arrow-left-on-rectangle', 'h-5 w-5 text-gray-50 mr-2 inline')
+                            {{ __('Log Out') }}
+                        </x-responsive-nav-link>
+                    </button>
+                    <div class="px-2 py-2">
+                        <x-responsive-theme-switcher />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+@endfeature
diff --git a/resources/views/livewire/profile/experiments-manager.blade.php b/resources/views/livewire/profile/experiments-manager.blade.php
index 44628e0b..9cbf5986 100644
--- a/resources/views/livewire/profile/experiments-manager.blade.php
+++ b/resources/views/livewire/profile/experiments-manager.blade.php
@@ -88,17 +88,22 @@ private function getExperimentDetails(string $experiment): array
         $user = $this->getCurrentUser();
         $isActive = Feature::active($experiment) ?? false;
         $isEnabled = Feature::for($user)->active($experiment) ?? false;
+        $metadata = config("features.{$experiment}", []);
 
         Log::debug('Getting experiment details', [
             'experiment' => $experiment,
             'isActive' => $isActive,
-            'isEnabled' => $isEnabled
+            'isEnabled' => $isEnabled,
+            'metadata' => $metadata,
         ]);
 
         return [
             'name' => $experiment,
-            'title' => $this->getExperimentTitle($experiment),
-            'description' => $this->getExperimentDescription($experiment),
+            'title' => $metadata['title'] ?? $this->getExperimentTitle($experiment),
+            'description' => $metadata['description'] ?? $this->getExperimentDescription($experiment),
+            'group' => $metadata['group'] ?? 'Uncategorized',
+            'rolloutPercentage' => $metadata['rolloutPercentage'] ?? 0,
+            'icon' => $metadata['icon'] ?? 'heroicon-o-beaker',
             'active' => $isActive,
             'enabled' => $isEnabled,
         ];
@@ -168,31 +173,36 @@ private function getCurrentUser(): User
             </div>
 
             <div class="space-y-6">
-                @foreach ($this->experiments as $experiment)
-                    <div class="border border-gray-200 dark:border-gray-600 rounded-lg transition-all duration-200 overflow-hidden">
-                        <div class="p-6">
-                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-                                <div class="flex items-center mb-4 sm:mb-0">
-                                    <div class="flex-shrink-0 mr-4">
-                                        @svg('heroicon-o-beaker', 'w-10 h-10 text-gray-500 dark:text-gray-400')
+                @foreach ($this->experiments->groupBy('group') as $group => $groupExperiments)
+                    <div class="mb-6">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ $group }}</h3>
+                        @foreach ($groupExperiments as $experiment)
+                            <div class="border border-gray-200 dark:border-gray-600 rounded-lg transition-all duration-200 overflow-hidden mb-4">
+                                <div class="p-6">
+                                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                                        <div class="flex items-center mb-4 sm:mb-0">
+                                            <div class="flex-shrink-0 mr-4">
+                                                @svg($experiment['icon'], 'w-10 h-10 text-gray-500 dark:text-gray-400')
+                                            </div>
+                                            <div>
+                                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $experiment['title'] }}</h3>
+                                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                                    {{ $experiment['enabled'] ? __('Enabled for you') : __('Disabled for you') }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                        <div class="flex justify-end sm:ml-4 sm:flex-shrink-0">
+                                            <x-secondary-button
+                                                wire:click="viewExperimentDetails('{{ $experiment['name'] }}')"
+                                                class="mr-3"
+                                            >
+                                                {{ __('View Details') }}
+                                            </x-secondary-button>
+                                        </div>
                                     </div>
-                                    <div>
-                                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $experiment['title'] }}</h3>
-                                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                                            {{ $experiment['enabled'] ? __('Enabled for you') : __('Disabled for you') }}
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="flex justify-end sm:ml-4 sm:flex-shrink-0">
-                                    <x-secondary-button
-                                        wire:click="viewExperimentDetails('{{ $experiment['name'] }}')"
-                                        class="mr-3"
-                                    >
-                                        {{ __('View Details') }}
-                                    </x-secondary-button>
                                 </div>
                             </div>
-                        </div>
+                        @endforeach
                     </div>
                 @endforeach
             </div>
@@ -214,16 +224,30 @@ class="mr-3"
                     $experiment = $this->experiments->firstWhere('name', $selectedExperiment);
                 @endphp
                 <div class="mb-6">
-                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ $experiment['title'] }}</h3>
+                    <div class="flex items-center mb-4">
+                        @svg($experiment['icon'], 'w-8 h-8 text-gray-500 dark:text-gray-400 mr-3')
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $experiment['title'] }}</h3>
+                    </div>
                     <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                         {{ $experiment['description'] }}
                     </p>
-                    <div class="flex items-center mb-4">
+                    <div class="flex items-center mb-2">
                         <span class="text-sm font-medium text-gray-600 dark:text-gray-400 mr-2">{{ __('Status:') }}</span>
                         <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $experiment['enabled'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                             {{ $experiment['enabled'] ? __('Enabled') : __('Disabled') }}
                         </span>
                     </div>
+                    <div class="flex items-center mb-2">
+                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400 mr-2">{{ __('Group:') }}</span>
+                        <span class="text-sm text-gray-900 dark:text-gray-100">{{ $experiment['group'] }}</span>
+                    </div>
+                </div>
+
+                <div class="mb-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-md">
+                    <p class="text-sm text-yellow-700 dark:text-yellow-200">
+                        <span class="font-medium">{{ __('Note:') }}</span>
+                        {{ __('You may need to reload the page (F5 or Cmd/Ctrl + R) to see the effects of enabling or disabling an experiment.') }}
+                    </p>
                 </div>
 
                 <div class="mt-6 flex justify-end space-x-3">