feat: reimplement server icon customization feature
- Add user_set_icon and user_set_icon_color to Server model fillable - Add icon modal properties and methods to Overview component - Add clickable icon button next to server hostname in layout - Add icon picker modal with search, color selection, and preview - Support for 100+ Remix icons across various categories - Icons persist to database and display on page load
This commit is contained in:
@@ -22,8 +22,10 @@ class Overview extends Component
|
||||
public $isEditingPassword = false;
|
||||
public $passwordError = '';
|
||||
|
||||
// Legacy property - kept to prevent errors for users with stale Livewire state
|
||||
// Server icon customization
|
||||
public bool $showIconModal = false;
|
||||
public string $selectedIcon = '';
|
||||
public string $selectedIconColor = '';
|
||||
|
||||
public string $cpuTimeRange = 'hour';
|
||||
public string $cpuAggregation = 'average';
|
||||
@@ -51,6 +53,10 @@ class Overview extends Component
|
||||
|
||||
$this->hostname = $server->hostname ?? ($this->status->name ?? '');
|
||||
|
||||
// Load icon customization
|
||||
$this->selectedIcon = $server->user_set_icon ?? '';
|
||||
$this->selectedIconColor = $server->user_set_icon_color ?? '';
|
||||
|
||||
// Load notes from Proxmox VM description
|
||||
try {
|
||||
$proxmox = new Proxmox;
|
||||
@@ -61,6 +67,44 @@ class Overview extends Component
|
||||
}
|
||||
}
|
||||
|
||||
public function openIconModal(): void
|
||||
{
|
||||
$this->showIconModal = true;
|
||||
}
|
||||
|
||||
public function closeIconModal(): void
|
||||
{
|
||||
$this->showIconModal = false;
|
||||
}
|
||||
|
||||
public function saveIcon(string $icon, string $color): void
|
||||
{
|
||||
$this->server->update([
|
||||
'user_set_icon' => $icon ?: null,
|
||||
'user_set_icon_color' => $color ?: null,
|
||||
]);
|
||||
|
||||
$this->selectedIcon = $icon;
|
||||
$this->selectedIconColor = $color;
|
||||
$this->showIconModal = false;
|
||||
|
||||
$this->notify('Server icon updated successfully', 'success');
|
||||
}
|
||||
|
||||
public function resetIcon(): void
|
||||
{
|
||||
$this->server->update([
|
||||
'user_set_icon' => null,
|
||||
'user_set_icon_color' => null,
|
||||
]);
|
||||
|
||||
$this->selectedIcon = '';
|
||||
$this->selectedIconColor = '';
|
||||
$this->showIconModal = false;
|
||||
|
||||
$this->notify('Server icon reset to default', 'success');
|
||||
}
|
||||
|
||||
public function checkStatus()
|
||||
{
|
||||
$currentStatus = $this->status->status;
|
||||
|
||||
@@ -20,6 +20,8 @@ class Server extends Model
|
||||
'status',
|
||||
'hostname',
|
||||
'password',
|
||||
'user_set_icon',
|
||||
'user_set_icon_color',
|
||||
];
|
||||
|
||||
public function node()
|
||||
|
||||
@@ -38,9 +38,149 @@
|
||||
@endphp
|
||||
|
||||
<div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<span class="text-2xl font-bold">
|
||||
{{ $server->hostname }}
|
||||
</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Server Icon -->
|
||||
<button
|
||||
wire:click="openIconModal"
|
||||
class="flex-shrink-0 size-10 rounded-lg bg-background-secondary border border-neutral hover:border-primary/50 hover:bg-background-secondary/80 transition-all duration-200 flex items-center justify-center group"
|
||||
title="Click to customize server icon"
|
||||
>
|
||||
@if($server->user_set_icon)
|
||||
@php
|
||||
$iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : '';
|
||||
@endphp
|
||||
@switch($server->user_set_icon)
|
||||
@case('ri-server-line')<x-ri-server-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-computer-line')<x-ri-computer-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-mac-line')<x-ri-mac-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-macbook-line')<x-ri-macbook-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-device-line')<x-ri-device-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-hard-drive-2-line')<x-ri-hard-drive-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-hard-drive-line')<x-ri-hard-drive-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-hard-drive-3-line')<x-ri-hard-drive-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-database-2-line')<x-ri-database-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-database-line')<x-ri-database-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-cloud-line')<x-ri-cloud-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-cloud-fill')<x-ri-cloud-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-cloudy-line')<x-ri-cloudy-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-cloudy-2-line')<x-ri-cloudy-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-terminal-box-line')<x-ri-terminal-box-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-terminal-line')<x-ri-terminal-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-code-box-line')<x-ri-code-box-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-code-line')<x-ri-code-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-code-s-slash-line')<x-ri-code-s-slash-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-cpu-line')<x-ri-cpu-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-chip-line')<x-ri-chip-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-memory-stick-line')<x-ri-memory-stick-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-ram-line')<x-ri-ram-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-ram-2-line')<x-ri-ram-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-global-line')<x-ri-global-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-earth-line')<x-ri-earth-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-planet-line')<x-ri-planet-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-router-line')<x-ri-router-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-wifi-line')<x-ri-wifi-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-signal-tower-line')<x-ri-signal-tower-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-base-station-line')<x-ri-base-station-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-shield-line')<x-ri-shield-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-shield-check-line')<x-ri-shield-check-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-shield-star-line')<x-ri-shield-star-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-lock-line')<x-ri-lock-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-lock-2-line')<x-ri-lock-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-rocket-line')<x-ri-rocket-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-rocket-2-line')<x-ri-rocket-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-spaceship-line')<x-ri-spaceship-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-plane-line')<x-ri-plane-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-game-line')<x-ri-game-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-gamepad-line')<x-ri-gamepad-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-steam-line')<x-ri-steam-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-playstation-line')<x-ri-playstation-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-xbox-line')<x-ri-xbox-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-windows-line')<x-ri-windows-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-ubuntu-line')<x-ri-ubuntu-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-centos-line')<x-ri-centos-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-linux-line')<x-ri-linux-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-apple-line')<x-ri-apple-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-bug-line')<x-ri-bug-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-bug-2-line')<x-ri-bug-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-robot-line')<x-ri-robot-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-robot-2-line')<x-ri-robot-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-home-line')<x-ri-home-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-home-2-line')<x-ri-home-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-building-line')<x-ri-building-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-building-2-line')<x-ri-building-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-store-line')<x-ri-store-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-flask-line')<x-ri-flask-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-test-tube-line')<x-ri-test-tube-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-microscope-line')<x-ri-microscope-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-fire-line')<x-ri-fire-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-fire-fill')<x-ri-fire-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-blaze-line')<x-ri-blaze-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-sparkling-line')<x-ri-sparkling-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-star-line')<x-ri-star-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-star-fill')<x-ri-star-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-vip-crown-line')<x-ri-vip-crown-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-vip-diamond-line')<x-ri-vip-diamond-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-heart-line')<x-ri-heart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-heart-fill')<x-ri-heart-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-heart-2-line')<x-ri-heart-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-heart-3-line')<x-ri-heart-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-lightning-line')<x-ri-lightning-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-thunderstorms-line')<x-ri-thunderstorms-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-flashlight-line')<x-ri-flashlight-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-box-3-line')<x-ri-box-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-archive-line')<x-ri-archive-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-inbox-line')<x-ri-inbox-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-inbox-2-line')<x-ri-inbox-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-folder-line')<x-ri-folder-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-folder-2-line')<x-ri-folder-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-folder-shield-line')<x-ri-folder-shield-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-folder-lock-line')<x-ri-folder-lock-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-settings-line')<x-ri-settings-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-settings-2-line')<x-ri-settings-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-settings-3-line')<x-ri-settings-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-equalizer-line')<x-ri-equalizer-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-dashboard-line')<x-ri-dashboard-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-pie-chart-line')<x-ri-pie-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-bar-chart-line')<x-ri-bar-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-line-chart-line')<x-ri-line-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-money-dollar-circle-line')<x-ri-money-dollar-circle-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-money-euro-circle-line')<x-ri-money-euro-circle-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-bank-line')<x-ri-bank-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-safe-line')<x-ri-safe-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-user-line')<x-ri-user-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-user-3-line')<x-ri-user-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-team-line')<x-ri-team-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-group-line')<x-ri-group-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-mail-line')<x-ri-mail-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-mail-open-line')<x-ri-mail-open-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-chat-1-line')<x-ri-chat-1-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-message-2-line')<x-ri-message-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-camera-line')<x-ri-camera-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-camera-2-line')<x-ri-camera-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-vidicon-line')<x-ri-vidicon-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-film-line')<x-ri-film-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-music-line')<x-ri-music-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-music-2-line')<x-ri-music-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-headphone-line')<x-ri-headphone-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-speaker-line')<x-ri-speaker-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-book-line')<x-ri-book-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-book-2-line')<x-ri-book-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-book-open-line')<x-ri-book-open-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-file-text-line')<x-ri-file-text-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-sun-line')<x-ri-sun-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-moon-line')<x-ri-moon-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-contrast-2-line')<x-ri-contrast-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('ri-palette-line')<x-ri-palette-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@default<x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
|
||||
@endswitch
|
||||
@else
|
||||
<x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
|
||||
@endif
|
||||
</button>
|
||||
<span class="text-2xl font-bold">
|
||||
{{ $server->hostname }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
|
||||
@@ -897,6 +1037,282 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Icon Customization Modal -->
|
||||
@if($view === 'overview')
|
||||
<div x-data="{
|
||||
open: @entangle('showIconModal'),
|
||||
selectedIcon: @entangle('selectedIcon'),
|
||||
selectedColor: @entangle('selectedIconColor'),
|
||||
searchQuery: '',
|
||||
icons: [
|
||||
'ri-server-line', 'ri-computer-line', 'ri-mac-line', 'ri-macbook-line', 'ri-device-line',
|
||||
'ri-hard-drive-2-line', 'ri-hard-drive-line', 'ri-hard-drive-3-line', 'ri-database-2-line', 'ri-database-line',
|
||||
'ri-cloud-line', 'ri-cloud-fill', 'ri-cloudy-line', 'ri-cloudy-2-line',
|
||||
'ri-terminal-box-line', 'ri-terminal-line', 'ri-code-box-line', 'ri-code-line', 'ri-code-s-slash-line',
|
||||
'ri-cpu-line', 'ri-chip-line', 'ri-memory-stick-line', 'ri-ram-line', 'ri-ram-2-line',
|
||||
'ri-global-line', 'ri-earth-line', 'ri-planet-line',
|
||||
'ri-router-line', 'ri-wifi-line', 'ri-signal-tower-line', 'ri-base-station-line',
|
||||
'ri-shield-line', 'ri-shield-check-line', 'ri-shield-star-line', 'ri-lock-line', 'ri-lock-2-line',
|
||||
'ri-rocket-line', 'ri-rocket-2-line', 'ri-spaceship-line', 'ri-plane-line',
|
||||
'ri-game-line', 'ri-gamepad-line', 'ri-steam-line', 'ri-playstation-line', 'ri-xbox-line',
|
||||
'ri-windows-line', 'ri-ubuntu-line', 'ri-centos-line', 'ri-linux-line', 'ri-apple-line',
|
||||
'ri-bug-line', 'ri-bug-2-line', 'ri-robot-line', 'ri-robot-2-line',
|
||||
'ri-home-line', 'ri-home-2-line', 'ri-building-line', 'ri-building-2-line', 'ri-store-line',
|
||||
'ri-flask-line', 'ri-test-tube-line', 'ri-microscope-line',
|
||||
'ri-fire-line', 'ri-fire-fill', 'ri-blaze-line', 'ri-sparkling-line',
|
||||
'ri-star-line', 'ri-star-fill', 'ri-vip-crown-line', 'ri-vip-diamond-line',
|
||||
'ri-heart-line', 'ri-heart-fill', 'ri-heart-2-line', 'ri-heart-3-line',
|
||||
'ri-lightning-line', 'ri-thunderstorms-line', 'ri-flashlight-line',
|
||||
'ri-box-3-line', 'ri-archive-line', 'ri-inbox-line', 'ri-inbox-2-line',
|
||||
'ri-folder-line', 'ri-folder-2-line', 'ri-folder-shield-line', 'ri-folder-lock-line',
|
||||
'ri-settings-line', 'ri-settings-2-line', 'ri-settings-3-line', 'ri-equalizer-line',
|
||||
'ri-dashboard-line', 'ri-pie-chart-line', 'ri-bar-chart-line', 'ri-line-chart-line',
|
||||
'ri-money-dollar-circle-line', 'ri-money-euro-circle-line', 'ri-bank-line', 'ri-safe-line',
|
||||
'ri-user-line', 'ri-user-3-line', 'ri-team-line', 'ri-group-line',
|
||||
'ri-mail-line', 'ri-mail-open-line', 'ri-chat-1-line', 'ri-message-2-line',
|
||||
'ri-camera-line', 'ri-camera-2-line', 'ri-vidicon-line', 'ri-film-line',
|
||||
'ri-music-line', 'ri-music-2-line', 'ri-headphone-line', 'ri-speaker-line',
|
||||
'ri-book-line', 'ri-book-2-line', 'ri-book-open-line', 'ri-file-text-line',
|
||||
'ri-sun-line', 'ri-moon-line', 'ri-contrast-2-line', 'ri-palette-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.searchQuery) return this.icons;
|
||||
const query = this.searchQuery.toLowerCase();
|
||||
return this.icons.filter(icon => icon.toLowerCase().includes(query));
|
||||
}
|
||||
}">
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-cloak x-show="open"
|
||||
x-transition:enter=\"transition ease-out duration-300\"
|
||||
x-transition:enter-start=\"opacity-0\"
|
||||
x-transition:enter-end=\"opacity-100\"
|
||||
x-transition:leave=\"transition ease-in duration-200\"
|
||||
x-transition:leave-start=\"opacity-100\"
|
||||
x-transition:leave-end=\"opacity-0\"
|
||||
@click=\"$wire.closeIconModal()\"
|
||||
@keydown.escape.window=\"$wire.closeIconModal()\"
|
||||
class=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\"
|
||||
style=\"display: none;\">
|
||||
</div>
|
||||
<!-- Modal Content -->
|
||||
<div x-cloak x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col" @click.away="$wire.closeIconModal()">
|
||||
<!-- Header -->
|
||||
<div class="p-6 border-b border-neutral">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">Customize Server Icon</h3>
|
||||
<button @click="$wire.closeIconModal()" class="text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
<input type="text"
|
||||
x-model="searchQuery"
|
||||
placeholder="Search icons..."
|
||||
class="w-full px-4 py-2 bg-background border border-neutral rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="px-6 py-4 border-b border-neutral bg-background/50">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-16 rounded-xl bg-background-secondary border-2 border-neutral flex items-center justify-center"
|
||||
:style="selectedColor ? 'border-color: ' + selectedColor : ''">
|
||||
<template x-if="selectedIcon">
|
||||
<span x-html="document.querySelector('[data-icon-preview=\'' + selectedIcon + '\']')?.innerHTML || ''"
|
||||
class="size-8"
|
||||
:style="selectedColor ? 'color: ' + selectedColor : ''"></span>
|
||||
</template>
|
||||
<template x-if="!selectedIcon">
|
||||
<x-ri-server-line class="size-8 text-base/40" />
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Preview</p>
|
||||
<p class="text-sm text-base/60" x-text="selectedIcon || 'No icon selected'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Picker -->
|
||||
<div class="px-6 py-4 border-b border-neutral">
|
||||
<p class="text-sm font-medium mb-3">Color</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template x-for="color in colors" :key="color || 'default'">
|
||||
<button @click="selectedColor = color"
|
||||
class="size-8 rounded-full border-2 transition-all duration-150 hover:scale-110"
|
||||
:class="selectedColor === color ? 'ring-2 ring-offset-2 ring-primary' : ''"
|
||||
:style="color ? 'background-color: ' + color + '; border-color: ' + color : 'background: linear-gradient(135deg, #666 50%, #999 50%); border-color: #888'"
|
||||
:title="color || 'Default'">
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons Grid -->
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="grid grid-cols-8 sm:grid-cols-10 gap-2">
|
||||
<template x-for="icon in filteredIcons" :key="icon">
|
||||
<button @click="selectedIcon = icon"
|
||||
class="aspect-square rounded-lg border flex items-center justify-center transition-all duration-150 hover:bg-background hover:border-primary/50"
|
||||
:class="selectedIcon === icon ? 'bg-primary/10 border-primary ring-2 ring-primary/30' : 'border-neutral'">
|
||||
<template x-if="icon === 'ri-server-line'"><x-ri-server-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-computer-line'"><x-ri-computer-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-mac-line'"><x-ri-mac-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-macbook-line'"><x-ri-macbook-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-device-line'"><x-ri-device-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-hard-drive-2-line'"><x-ri-hard-drive-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-hard-drive-line'"><x-ri-hard-drive-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-hard-drive-3-line'"><x-ri-hard-drive-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-database-2-line'"><x-ri-database-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-database-line'"><x-ri-database-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-cloud-line'"><x-ri-cloud-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-cloud-fill'"><x-ri-cloud-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-cloudy-line'"><x-ri-cloudy-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-cloudy-2-line'"><x-ri-cloudy-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-terminal-box-line'"><x-ri-terminal-box-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-terminal-line'"><x-ri-terminal-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-code-box-line'"><x-ri-code-box-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-code-line'"><x-ri-code-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-code-s-slash-line'"><x-ri-code-s-slash-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-cpu-line'"><x-ri-cpu-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-chip-line'"><x-ri-chip-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-memory-stick-line'"><x-ri-memory-stick-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-ram-line'"><x-ri-ram-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-ram-2-line'"><x-ri-ram-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-global-line'"><x-ri-global-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-earth-line'"><x-ri-earth-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-planet-line'"><x-ri-planet-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-router-line'"><x-ri-router-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-wifi-line'"><x-ri-wifi-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-signal-tower-line'"><x-ri-signal-tower-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-base-station-line'"><x-ri-base-station-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-shield-line'"><x-ri-shield-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-shield-check-line'"><x-ri-shield-check-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-shield-star-line'"><x-ri-shield-star-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-lock-line'"><x-ri-lock-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-lock-2-line'"><x-ri-lock-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-rocket-line'"><x-ri-rocket-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-rocket-2-line'"><x-ri-rocket-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-spaceship-line'"><x-ri-spaceship-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-plane-line'"><x-ri-plane-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-game-line'"><x-ri-game-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-gamepad-line'"><x-ri-gamepad-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-steam-line'"><x-ri-steam-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-playstation-line'"><x-ri-playstation-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-xbox-line'"><x-ri-xbox-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-windows-line'"><x-ri-windows-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-ubuntu-line'"><x-ri-ubuntu-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-centos-line'"><x-ri-centos-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-linux-line'"><x-ri-linux-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-apple-line'"><x-ri-apple-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-bug-line'"><x-ri-bug-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-bug-2-line'"><x-ri-bug-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-robot-line'"><x-ri-robot-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-robot-2-line'"><x-ri-robot-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-home-line'"><x-ri-home-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-home-2-line'"><x-ri-home-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-building-line'"><x-ri-building-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-building-2-line'"><x-ri-building-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-store-line'"><x-ri-store-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-flask-line'"><x-ri-flask-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-test-tube-line'"><x-ri-test-tube-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-microscope-line'"><x-ri-microscope-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-fire-line'"><x-ri-fire-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-fire-fill'"><x-ri-fire-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-blaze-line'"><x-ri-blaze-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-sparkling-line'"><x-ri-sparkling-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-star-line'"><x-ri-star-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-star-fill'"><x-ri-star-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-vip-crown-line'"><x-ri-vip-crown-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-vip-diamond-line'"><x-ri-vip-diamond-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-heart-line'"><x-ri-heart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-heart-fill'"><x-ri-heart-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-heart-2-line'"><x-ri-heart-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-heart-3-line'"><x-ri-heart-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-lightning-line'"><x-ri-lightning-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-thunderstorms-line'"><x-ri-thunderstorms-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-flashlight-line'"><x-ri-flashlight-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-box-3-line'"><x-ri-box-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-archive-line'"><x-ri-archive-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-inbox-line'"><x-ri-inbox-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-inbox-2-line'"><x-ri-inbox-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-folder-line'"><x-ri-folder-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-folder-2-line'"><x-ri-folder-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-folder-shield-line'"><x-ri-folder-shield-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-folder-lock-line'"><x-ri-folder-lock-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-settings-line'"><x-ri-settings-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-settings-2-line'"><x-ri-settings-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-settings-3-line'"><x-ri-settings-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-equalizer-line'"><x-ri-equalizer-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-dashboard-line'"><x-ri-dashboard-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-pie-chart-line'"><x-ri-pie-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-bar-chart-line'"><x-ri-bar-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-line-chart-line'"><x-ri-line-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-money-dollar-circle-line'"><x-ri-money-dollar-circle-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-money-euro-circle-line'"><x-ri-money-euro-circle-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-bank-line'"><x-ri-bank-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-safe-line'"><x-ri-safe-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-user-line'"><x-ri-user-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-user-3-line'"><x-ri-user-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-team-line'"><x-ri-team-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-group-line'"><x-ri-group-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-mail-line'"><x-ri-mail-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-mail-open-line'"><x-ri-mail-open-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-chat-1-line'"><x-ri-chat-1-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-message-2-line'"><x-ri-message-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-camera-line'"><x-ri-camera-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-camera-2-line'"><x-ri-camera-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-vidicon-line'"><x-ri-vidicon-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-film-line'"><x-ri-film-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-music-line'"><x-ri-music-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-music-2-line'"><x-ri-music-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-headphone-line'"><x-ri-headphone-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-speaker-line'"><x-ri-speaker-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-book-line'"><x-ri-book-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-book-2-line'"><x-ri-book-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-book-open-line'"><x-ri-book-open-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-file-text-line'"><x-ri-file-text-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-sun-line'"><x-ri-sun-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-moon-line'"><x-ri-moon-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-contrast-2-line'"><x-ri-contrast-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'ri-palette-line'"><x-ri-palette-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<p x-show="filteredIcons.length === 0" class="text-center text-base/50 py-8">No icons match your search</p>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="p-6 border-t border-neutral flex items-center justify-between gap-4">
|
||||
<button @click="$wire.resetIcon()"
|
||||
class="px-4 py-2 text-sm text-base/70 hover:text-danger transition-colors">
|
||||
Reset to Default
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
<x-button.secondary @click="$wire.closeIconModal()">Cancel</x-button.secondary>
|
||||
<x-button.primary @click="$wire.saveIcon(selectedIcon, selectedColor)">
|
||||
Save Icon
|
||||
</x-button.primary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@else
|
||||
@php
|
||||
$statuses = [
|
||||
|
||||
Reference in New Issue
Block a user