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:
2025-12-06 08:07:52 -05:00
parent a0b43dde55
commit b95c59be81
3 changed files with 466 additions and 4 deletions

View File

@@ -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;