fix: improve plugins functionality with server management

toju-app/src/app/features/settings/settings-modal/data-settings/data-settings.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/member-ordering */
 import {
   Component,
   inject,

toju-app/src/app/features/settings/settings-modal/local-api-settings/local-api-settings.component.ts

@@ -1,4 +1,12 @@
-import { Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  computed,
+  inject,
+  signal
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
@@ -54,7 +62,7 @@ export class LocalApiSettingsComponent implements OnInit, OnDestroy {
       case 'running':
         return `Running at ${snapshot.baseUrl ?? 'unknown'}`;
       case 'starting':
-        return 'Starting…';
+        return 'Starting...';
       case 'error':
         return `Error: ${snapshot.error ?? 'unknown error'}`;
       case 'stopped':

toju-app/src/app/features/settings/settings-modal/server-settings/server-settings.component.html

@@ -10,11 +10,11 @@
           <div class="flex items-center gap-3">
             <div class="grid h-14 w-14 shrink-0 place-items-center overflow-hidden rounded-lg bg-secondary text-base font-semibold text-foreground">
               @if (serverData()?.icon) {
-                <img
-                  [src]="serverData()!.icon"
-                  [alt]="serverData()!.name + ' icon'"
-                  class="h-full w-full object-cover"
-                />
+                <div
+                  aria-hidden="true"
+                  class="h-full w-full bg-cover bg-center bg-no-repeat"
+                  [style.backgroundImage]="'url(' + serverData()!.icon + ')'"
+                ></div>
               } @else {
                 <ng-icon
                   name="lucideImage"

toju-app/src/app/features/settings/settings-modal/server-settings/server-settings.component.ts

@@ -24,6 +24,7 @@ import { Room } from '../../../../shared-kernel';
 import { RoomsActions } from '../../../../store/rooms/rooms.actions';
 import { ConfirmDialogComponent } from '../../../../shared';
 import { SettingsModalService } from '../../../../core/services/settings-modal.service';
+import { ServerIconImageService } from '../../../../domains/server-directory/infrastructure/services/server-icon-image.service';
 
 @Component({
   selector: 'app-server-settings',
@@ -50,6 +51,7 @@ import { SettingsModalService } from '../../../../core/services/settings-modal.s
 export class ServerSettingsComponent {
   private store = inject(Store);
   private modal = inject(SettingsModalService);
+  private serverIconImages = inject(ServerIconImageService);
 
   /** The currently selected server, passed from the parent. */
   server = input<Room | null>(null);
@@ -181,7 +183,7 @@ export class ServerSettingsComponent {
     this.modal.navigate('network');
   }
 
-  onServerIconSelected(event: Event): void {
+  async onServerIconSelected(event: Event): Promise<void> {
     const inputElement = event.target as HTMLInputElement;
     const file = inputElement.files?.[0];
 
@@ -191,37 +193,24 @@ export class ServerSettingsComponent {
       return;
     }
 
-    if (!file.type.startsWith('image/')) {
-      this.iconError.set('Choose an image file.');
-      return;
-    }
-
-    if (file.size > 512 * 1024) {
-      this.iconError.set('Choose an image smaller than 512 KB.');
-      return;
-    }
-
-    const reader = new FileReader();
-
-    reader.onload = () => {
+    try {
       const room = this.server();
-      const icon = typeof reader.result === 'string' ? reader.result : '';
+      const icon = await this.serverIconImages.process(file);
 
-      if (!room || !icon) {
-        this.iconError.set('Could not read that image.');
+      if (!room) {
         return;
       }
 
       this.iconError.set(null);
       this.store.dispatch(RoomsActions.updateServerIcon({
         roomId: room.id,
-        icon
+        icon: icon.dataUrl
       }));
-      this.showSaveSuccess('icon');
-    };
 
-    reader.onerror = () => this.iconError.set('Could not read that image.');
-    reader.readAsDataURL(file);
+      this.showSaveSuccess('icon');
+    } catch (error) {
+      this.iconError.set(error instanceof Error ? error.message : 'Could not read that image.');
+    }
   }
 
   removeServerIcon(): void {
@@ -236,6 +225,7 @@ export class ServerSettingsComponent {
       roomId: room.id,
       icon: ''
     }));
+
     this.showSaveSuccess('icon');
   }