fix: improve plugins functionality with server management

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');
   }