Delete unused notification components and update notification navbar

app/Livewire/Notifications/Discord.php

@@ -6,7 +6,7 @@
 use App\Notifications\Test;
 use Livewire\Component;
 
-class DiscordSettings extends Component
+class Discord extends Component
 {
     public Team $team;
     protected $rules = [
@@ -55,4 +55,8 @@ public function sendTestNotification()
         $this->team?->notify(new Test());
         $this->dispatch('success', 'Test notification sent.');
     }
+    public function render()
+    {
+        return view('livewire.notifications.discord');
+    }
 }

app/Livewire/Notifications/Email.php

@@ -2,13 +2,12 @@
 
 namespace App\Livewire\Notifications;
 
+use Livewire\Component;
 use App\Models\InstanceSettings;
 use App\Models\Team;
 use App\Notifications\Test;
-use Livewire\Component;
-use Log;
 
-class EmailSettings extends Component
+class Email extends Component
 {
     public Team $team;
     public string $emails;
@@ -191,4 +190,8 @@ public function copyFromInstanceSettings()
         }
         $this->dispatch('error', 'Instance SMTP/Resend settings are not enabled.');
     }
+    public function render()
+    {
+        return view('livewire.notifications.email');
+    }
 }

app/Livewire/Notifications/Telegram.php

@@ -6,8 +6,9 @@
 use App\Notifications\Test;
 use Livewire\Component;
 
-class TelegramSettings extends Component
+class Telegram extends Component
 {
+
     public Team $team;
     protected $rules = [
         'team.telegram_enabled' => 'nullable|boolean',
@@ -61,4 +62,8 @@ public function sendTestNotification()
         $this->team?->notify(new Test());
         $this->dispatch('success', 'Test notification sent.');
     }
+    public function render()
+    {
+        return view('livewire.notifications.telegram');
+    }
 }

app/Livewire/Team/Notification/Index.php

@@ -1,13 +0,0 @@
-<?php
-
-namespace App\Livewire\Team\Notification;
-
-use Livewire\Component;
-
-class Index extends Component
-{
-    public function render()
-    {
-        return view('livewire.team.notification.index');
-    }
-}

resources/views/components/navbar.blade.php

@@ -6,7 +6,7 @@
         </div>
         {{-- <button onclick="changeTheme()">Dark/light</button> --}}
     </div>
-    <div class="px-2 pb-4">
+    <div class="px-2 pt-2 pb-6">
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
@@ -96,7 +96,7 @@ class="{{ request()->is('destination*') ? 'menu-item-active menu-item' : 'menu-i
                     <li>
                         <a title="Notifications"
                             class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"
-                            href="{{ route('notification.index') }}">
+                            href="{{ route('notification.email') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                 <path fill="none" stroke="currentColor" stroke-linecap="round"
                                     stroke-linejoin="round" stroke-width="2"

resources/views/components/notification/navbar.blade.php

@@ -0,0 +1,18 @@
+<div class="pb-6">
+    <h1>Notifications</h1>
+    <div class="subtitle">Get notified about your infrastructure.</div>
+    <nav class="navbar-main">
+        <a class="{{ request()->routeIs('notification.email') ? 'dark:text-white' : '' }}"
+            href="{{ route('notification.email') }}">
+            <button>Email</button>
+        </a>
+        <a class="{{ request()->routeIs('notification.telegram') ? 'dark:text-white' : '' }}"
+            href="{{ route('notification.telegram') }}">
+            <button>Telegram</button>
+        </a>
+        <a class="{{ request()->routeIs('notification.discord') ? 'dark:text-white' : '' }}"
+            href="{{ route('notification.discord') }}">
+            <button>Discord</button>
+        </a>
+    </nav>
+</div>

resources/views/components/notifications/navbar.blade.php

@@ -1,4 +0,0 @@
-<div>
-    <h1>Notifications</h1>
-    <div class="subtitle">Get notified about your infrastructure.</div>
-</div>

resources/views/components/security/navbar.blade.php

@@ -2,7 +2,7 @@
     <h1>Security</h1>
     <div class="subtitle">Security related settings.</div>
 
-    <nav class="navbar-main">
+    <nav class="pt-2 navbar-main">
         <a  href="{{ route('security.private-key.index') }}">
             <button>Private Keys</button>
         </a>

resources/views/livewire/layout-popups.blade.php

@@ -57,7 +57,7 @@ class="text-white underline">/subscription</a> to update your subscription or re
                     highly recommended to enable at least
                     one
                     notification channel to receive important alerts.<br>Visit <a
-                        href="{{ route('notification.index') }}" class="text-white underline">/notification</a> to
+                        href="{{ route('notification.email') }}" class="text-white underline">/notification</a> to
                     enable notifications.</span>
         </x-slot:description>
         <x-slot:button-text @click="disableNotification()">

resources/views/livewire/notifications/discord.blade.php

@@ -1,5 +1,6 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col">
+    <x-notification.navbar />
+    <form wire:submit='submit' class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
             <h2>Discord</h2>
             <x-forms.button type="submit">
@@ -12,7 +13,7 @@
                 </x-forms.button>
             @endif
         </div>
-        <div class="w-48">
+        <div class="w-32">
             <x-forms.checkbox instantSave id="team.discord_enabled" label="Enabled" />
         </div>
         <x-forms.input type="password"

resources/views/livewire/notifications/email.blade.php

@@ -1,5 +1,6 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col">
+    <x-notification.navbar />
+    <form wire:submit='submit' class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
             <h2>Email</h2>
             <x-forms.button type="submit">
@@ -24,7 +25,7 @@
     </form>
     @if (isCloud())
         @if ($this->sharedEmailEnabled)
-            <div class="w-64 pb-4">
+            <div class="w-64 py-4">
                 <x-forms.checkbox instantSave="instantSaveInstance" id="team.use_instance_email_settings"
                     label="Use Hosted Email Service" />
             </div>

resources/views/livewire/notifications/telegram.blade.php

@@ -1,5 +1,6 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col">
+    <x-notification.navbar />
+    <form wire:submit='submit' class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
             <h2>Telegram</h2>
             <x-forms.button type="submit">
@@ -12,7 +13,7 @@
                 </x-forms.button>
             @endif
         </div>
-        <div class="w-48">
+        <div class="w-32">
             <x-forms.checkbox instantSave id="team.telegram_enabled" label="Enabled" />
         </div>
         <div class="flex gap-2">

resources/views/livewire/team/notification/index.blade.php

@@ -1,24 +0,0 @@
-<div>
-    <x-notifications.navbar />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'email' }" class="flex h-full">
-        <div class="flex flex-col gap-4 min-w-fit">
-            <a :class="activeTab === 'email' && 'text-white'"
-                @click.prevent="activeTab = 'email'; window.location.hash = 'email'" href="#">Email</a>
-            <a :class="activeTab === 'Telegram' && 'text-white'"
-                @click.prevent="activeTab = 'telegram'; window.location.hash = 'telegram'" href="#">Telegram</a>
-            <a :class="activeTab === 'discord' && 'text-white'"
-                @click.prevent="activeTab = 'discord'; window.location.hash = 'discord'" href="#">Discord</a>
-        </div>
-        <div class="w-full pl-8">
-            <div x-cloak x-show="activeTab === 'email'" class="h-full">
-                <livewire:notifications.email-settings />
-            </div>
-            <div x-cloak x-show="activeTab === 'telegram'" class="h-full">
-                <livewire:notifications.telegram-settings />
-            </div>
-            <div x-cloak x-show="activeTab === 'discord'">
-                <livewire:notifications.discord-settings />
-            </div>
-        </div>
-    </div>
-</div>

routes/web.php

@@ -21,9 +21,12 @@
 use App\Livewire\Settings\License as SettingsLicense;
 use App\Livewire\Profile\Index as ProfileIndex;
 
+use App\Livewire\Notifications\Email as NotificationEmail;
+use App\Livewire\Notifications\Telegram as NotificationTelegram;
+use App\Livewire\Notifications\Discord as NotificationDiscord;
+
 use App\Livewire\Team\Index as TeamIndex;
 use App\Livewire\Team\Create as TeamCreate;
-use App\Livewire\Team\Notification\Index as TeamNotificationIndex;
 
 use App\Livewire\Team\Storage\Index as TeamStorageIndex;
 use App\Livewire\Team\Storage\Create as TeamStorageCreate;
@@ -125,7 +128,9 @@
         Route::get('/{tag_name}', TagsShow::class)->name('tags.show');
     });
     Route::prefix('notifications')->group(function () {
-        Route::get('/', TeamNotificationIndex::class)->name('notification.index');
+        Route::get('/email', NotificationEmail::class)->name('notification.email');
+        Route::get('/telegram', NotificationTelegram::class)->name('notification.telegram');
+        Route::get('/discord', NotificationDiscord::class)->name('notification.discord');
     });
     Route::prefix('team')->group(function () {
         Route::get('/', TeamIndex::class)->name('team.index');