From b6987ab1e850e2f4ecc375f93184e4c00ed05d70 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 10:06:09 -0500
Subject: [PATCH] feat: implement server icon customization with AJAX support

---
 app/Http/Controllers/ServerIconController.php |  42 ++++++
 .../Http/Controllers/ServerIconController.php |  39 ++++++
 .../Servers/Proxmox/views/overview.blade.php  | 121 ++++++++++++++++++
 routes/web.php                                |   7 +
 4 files changed, 209 insertions(+)
 create mode 100644 app/Http/Controllers/ServerIconController.php
 create mode 100644 extensions/Servers/Proxmox/Http/Controllers/ServerIconController.php

diff --git a/app/Http/Controllers/ServerIconController.php b/app/Http/Controllers/ServerIconController.php
new file mode 100644
index 000000000..208678b71
--- /dev/null
+++ b/app/Http/Controllers/ServerIconController.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Paymenter\Extensions\Servers\Proxmox\Models\Server;
+
+class ServerIconController extends Controller
+{
+    // Update the icon and color for a server
+    public function update(Request $request, $serverId)
+    {
+        $request->validate([
+            'icon' => 'nullable|string|max:64',
+            'color' => 'nullable|string|max:32',
+        ]);
+
+        $server = Server::where('id', $serverId)
+            ->where('user_id', Auth::id())
+            ->firstOrFail();
+
+        $server->user_set_icon = $request->input('icon');
+        $server->user_set_icon_color = $request->input('color');
+        $server->save();
+
+        return response()->json(['success' => true]);
+    }
+
+    // Get the icon and color for a server
+    public function show($serverId)
+    {
+        $server = Server::where('id', $serverId)
+            ->where('user_id', Auth::id())
+            ->firstOrFail();
+
+        return response()->json([
+            'icon' => $server->user_set_icon,
+            'color' => $server->user_set_icon_color,
+        ]);
+    }
+}
diff --git a/extensions/Servers/Proxmox/Http/Controllers/ServerIconController.php b/extensions/Servers/Proxmox/Http/Controllers/ServerIconController.php
new file mode 100644
index 000000000..dcaa896e9
--- /dev/null
+++ b/extensions/Servers/Proxmox/Http/Controllers/ServerIconController.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Paymenter\Extensions\Servers\Proxmox\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Paymenter\Extensions\Servers\Proxmox\Models\Server;
+
+class ServerIconController
+{
+    public function update(Request $request, $serverId)
+    {
+        $request->validate([
+            'icon' => 'nullable|string|max:64',
+            'color' => 'nullable|string|max:32',
+        ]);
+
+        $server = Server::where('id', $serverId)
+            ->where('user_id', Auth::id())
+            ->firstOrFail();
+
+        $server->user_set_icon = $request->input('icon');
+        $server->user_set_icon_color = $request->input('color');
+        $server->save();
+
+        return response()->json(['success' => true]);
+    }
+
+    public function get($serverId)
+    {
+        $server = Server::where('id', $serverId)
+            ->where('user_id', Auth::id())
+            ->firstOrFail();
+        return response()->json([
+            'icon' => $server->user_set_icon,
+            'color' => $server->user_set_icon_color,
+        ]);
+    }
+}
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index c88f31bff..f592aa81a 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -75,6 +75,127 @@
         <div class="flex items-center gap-3">
             <div class="flex items-center gap-2 min-w-0">
                 <h2 class="text-xl font-semibold break-words">Server Details</h2>
+                <!-- Standalone Server Icon Customization (Alpine.js, AJAX) -->
+                <div x-data="serverIconModal({
+                    serverId: '{{ $server->id }}',
+                    initialIcon: @json($server->user_set_icon),
+                    initialColor: @json($server->user_set_icon_color)
+                })" class="flex items-center gap-2">
+                    <button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="p-2 rounded-lg bg-secondary/10 hover:bg-secondary/20 transition-colors">
+                        <template x-if="icon">
+                            <x-dynamic-component :is="'x-ri-' + icon" class="size-5" :style="color ? 'color: ' + color : ''" />
+                        </template>
+                        <template x-if="!icon">
+                            <x-ri-server-line class="size-5 text-secondary" />
+                        </template>
+                    </button>
+                    <!-- Modal -->
+                    <div x-show="show" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+                        <div class="bg-white dark:bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
+                            <button @click="closeModal()" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
+                                <x-ri-close-line class="size-5" />
+                            </button>
+                            <h3 class="text-lg font-semibold mb-4">Customize Server Icon</h3>
+                            <div class="flex items-center gap-4 mb-4">
+                                <div class="size-12 rounded-xl border flex items-center justify-center" :style="color ? 'color: ' + color + '; border-color: ' + color : ''">
+                                    <template x-if="icon">
+                                        <x-dynamic-component :is="'x-ri-' + icon" class="size-8" />
+                                    </template>
+                                    <template x-if="!icon">
+                                        <x-ri-server-line class="size-8 text-base/40" />
+                                    </template>
+                                </div>
+                                <input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40" />
+                            </div>
+                            <div class="grid grid-cols-6 gap-2 mb-4 max-h-32 overflow-y-auto">
+                                <template x-for="i in filteredIcons" :key="i">
+                                    <button @click="icon = i" :class="icon === i ? 'ring-2 ring-primary' : ''" class="rounded p-1 border flex items-center justify-center">
+                                        <x-dynamic-component :is="'x-ri-' + i" class="size-5" />
+                                    </button>
+                                </template>
+                            </div>
+                            <div class="flex flex-wrap gap-2 mb-4">
+                                <template x-for="c in colors" :key="c">
+                                    <button @click="color = c" :style="'background:' + (c || '#e5e7eb')" :class="color === c ? 'ring-2 ring-primary' : ''" class="size-6 rounded-full border"></button>
+                                </template>
+                            </div>
+                            <div class="flex gap-2 justify-end">
+                                <button @click="resetIcon()" class="text-xs text-base/60 hover:text-danger">Reset</button>
+                                <button @click="saveIcon()" class="px-3 py-1 rounded bg-primary text-white text-xs hover:bg-primary/80">Save</button>
+                            </div>
+                            <template x-if="message">
+                                <div class="mt-2 text-xs text-success" x-text="message"></div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+                <script>
+                function serverIconModal({serverId, initialIcon, initialColor}) {
+                    return {
+                        show: false,
+                        icon: initialIcon || '',
+                        color: initialColor || '',
+                        search: '',
+                        message: '',
+                        icons: [
+                            'server-line', 'database-2-line', 'computer-line', 'cpu-line', 'hard-drive-2-line',
+                            'cloud-line', 'terminal-box-line', 'code-s-slash-line', 'braces-line',
+                            'global-line', 'earth-line', 'wifi-line', 'signal-tower-line',
+                            'shield-check-line', 'shield-keyhole-line', 'lock-line', 'lock-unlock-line', 'key-2-line',
+                            'rocket-line', 'rocket-2-line', 'send-plane-line', 'flashlight-line', 'fire-line',
+                            'sparkling-line', 'star-line', 'heart-line', 'home-line', 'home-2-line',
+                            'building-line', 'building-2-line', 'store-line', 'box-3-line', 'archive-line',
+                            'inbox-line', 'inbox-2-line', 'folder-line', 'folder-open-line',
+                            'settings-3-line', 'settings-4-line', 'tools-line', 'hammer-line',
+                            'flask-line', 'bug-line', 'puzzle-line', 'bar-chart-box-line', 'pie-chart-line',
+                            'line-chart-line', 'money-dollar-circle-line', 'money-euro-circle-line',
+                            'bank-card-line', 'wallet-line', 'user-line', 'user-3-line', 'group-line', 'team-line',
+                            'mail-line', 'mail-open-line', 'chat-3-line', 'discuss-line',
+                            'camera-line', 'vidicon-line', 'film-line', 'music-line',
+                            'book-open-line', 'file-text-line', 'sun-line', 'moon-line',
+                            'palette-line', 'brush-line', 'trophy-line', 'graduation-cap-line',
+                            'lightbulb-line', 'fingerprint-line', 'eye-line', 'map-2-line', 'map-pin-line',
+                            'time-line', 'calendar-line', 'gift-line', 'cake-2-line',
+                            'gamepad-line', 'ghost-line', 'aliens-line', 'space-ship-line',
+                            'android-line', 'apple-line', 'windows-line', 'ubuntu-line',
+                            'github-line', 'gitlab-line', 'discord-line', 'slack-line'
+                        ],
+                        colors: [
+                            '', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
+                            '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
+                            '#d946ef', '#ec4899', '#f43f5e', '#78716c', '#64748b'
+                        ],
+                        get filteredIcons() {
+                            if (!this.search) return this.icons;
+                            const q = this.search.toLowerCase();
+                            return this.icons.filter(i => i.toLowerCase().includes(q));
+                        },
+                        openModal() { this.show = true; this.message = ''; },
+                        closeModal() { this.show = false; },
+                        resetIcon() {
+                            this.icon = '';
+                            this.color = '';
+                        },
+                        saveIcon() {
+                            fetch(`/proxmox/server/${serverId}/icon`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
+                                },
+                                body: JSON.stringify({ icon: this.icon, color: this.color })
+                            })
+                            .then(r => r.json())
+                            .then(data => {
+                                if (data.success) {
+                                    this.message = 'Icon saved!';
+                                    setTimeout(() => { this.closeModal(); location.reload(); }, 800);
+                                }
+                            });
+                        }
+                    }
+                }
+                </script>
                 <div class="relative" x-data="{ open: false }" x-cloak>
                     <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
                         <x-ri-question-line class="size-4" />
diff --git a/routes/web.php b/routes/web.php
index 4a1ee1dfb..1e0923d2c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,3 +1,10 @@
+
+// Server icon API (AJAX, not Livewire)
+use App\Http\Controllers\ServerIconController;
+Route::middleware(['web', 'auth'])->group(function () {
+    Route::get('/proxmox/server/{server}/icon', [ServerIconController::class, 'show']);
+    Route::post('/proxmox/server/{server}/icon', [ServerIconController::class, 'update']);
+});
 <?php
 
 use App\Http\Controllers\SocialLoginController;