fix: improve plugins functionality with server management

toju-app/src/app/features/shell/title-bar/title-bar.component.html

@@ -98,6 +98,24 @@
       />
     </button>
 
+    @if (hasServerPlugins()) {
+      <button
+        type="button"
+        class="relative grid h-8 w-8 place-items-center rounded-md text-foreground transition-colors hover:bg-secondary"
+        (click)="openServerPlugins()"
+        title="Server plugins"
+        aria-label="Server plugins"
+      >
+        <ng-icon
+          name="lucideShield"
+          class="h-4 w-4 text-muted-foreground"
+        />
+        <span class="absolute right-0 top-0 min-w-3 rounded-full bg-primary px-1 text-[9px] font-semibold leading-3 text-primary-foreground">
+          {{ serverPluginCount() }}
+        </span>
+      </button>
+    }
+
     @if (isElectron()) {
       <button
         type="button"
@@ -227,6 +245,123 @@
     }
   </div>
 </div>
+
+@if (optionalPluginRequirement(); as requirement) {
+  <section
+    class="flex min-h-10 items-center justify-between gap-3 border-b border-border bg-primary/10 px-4 py-2 text-sm text-foreground"
+    role="status"
+    aria-live="polite"
+    style="-webkit-app-region: no-drag"
+  >
+    <div class="flex min-w-0 items-center gap-2">
+      <ng-icon
+        name="lucidePackage"
+        class="h-4 w-4 shrink-0 text-primary"
+      />
+      <p class="truncate">
+        Optional server plugin available:
+        <span class="font-semibold">{{ requirement.manifest?.title || requirement.pluginId }}</span>
+        @if (optionalPluginRequirementCount() > 1) {
+          <span class="text-muted-foreground">+{{ optionalPluginRequirementCount() - 1 }} more</span>
+        }
+      </p>
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      @if (pluginRequirementError()) {
+        <span class="max-w-56 truncate text-xs text-destructive">{{ pluginRequirementError() }}</span>
+      }
+      <button
+        type="button"
+        class="rounded-md border border-border bg-card px-2.5 py-1 text-xs font-semibold transition-colors hover:bg-secondary disabled:opacity-60"
+        [disabled]="pluginRequirementBusy()"
+        (click)="rejectOptionalServerPlugin(requirement)"
+      >
+        Reject
+      </button>
+      <button
+        type="button"
+        class="rounded-md border border-border bg-card px-2.5 py-1 text-xs font-semibold transition-colors hover:bg-secondary disabled:opacity-60"
+        [disabled]="pluginRequirementBusy()"
+        (click)="hideOptionalServerPlugin(requirement)"
+      >
+        Don't show again
+      </button>
+      <button
+        type="button"
+        class="rounded-md border border-primary bg-primary px-2.5 py-1 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
+        [disabled]="pluginRequirementBusy()"
+        (click)="installOptionalServerPlugin(requirement)"
+      >
+        {{ pluginRequirementBusy() ? 'Installing' : 'Install' }}
+      </button>
+    </div>
+  </section>
+}
+
+@if (requiredPluginRequirements().length > 0 && currentRoom()) {
+  <div
+    class="fixed inset-0 z-[80] bg-black/60"
+    role="presentation"
+  ></div>
+  <section
+    class="fixed left-1/2 top-1/2 z-[81] flex max-h-[min(38rem,calc(100vh-2rem))] w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-2xl"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="required-server-plugin-title"
+    style="-webkit-app-region: no-drag"
+  >
+    <header class="border-b border-border p-4">
+      <p class="text-sm text-muted-foreground">Required server plugins</p>
+      <h2
+        id="required-server-plugin-title"
+        class="mt-1 text-lg font-semibold"
+      >
+        {{ currentRoom()!.name }} requires a plugin update
+      </h2>
+    </header>
+
+    <div class="min-h-0 space-y-3 overflow-auto p-4">
+      <p class="text-sm text-muted-foreground">
+        An admin added required plugins for this server. Install them to keep using the server, or leave the server.
+      </p>
+      @for (requirement of requiredPluginRequirements(); track requirement.pluginId) {
+        <article class="rounded-lg border border-border bg-background/50 px-3 py-2">
+          <div class="flex items-start justify-between gap-3">
+            <div class="min-w-0">
+              <p class="truncate text-sm font-semibold">{{ requirement.manifest?.title || requirement.pluginId }}</p>
+              @if (requirement.reason) {
+                <p class="mt-1 text-xs text-muted-foreground">{{ requirement.reason }}</p>
+              }
+            </div>
+            <span class="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary">Required</span>
+          </div>
+        </article>
+      }
+      @if (pluginRequirementError()) {
+        <p class="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">{{ pluginRequirementError() }}</p>
+      }
+    </div>
+
+    <footer class="flex justify-end gap-2 border-t border-border p-4">
+      <button
+        type="button"
+        class="rounded-lg border border-border bg-card px-3 py-1.5 text-sm font-semibold transition-colors hover:bg-secondary disabled:opacity-60"
+        [disabled]="pluginRequirementBusy()"
+        (click)="confirmLeave({})"
+      >
+        Leave server
+      </button>
+      <button
+        type="button"
+        class="rounded-lg border border-primary bg-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
+        [disabled]="pluginRequirementBusy()"
+        (click)="installRequiredServerPlugins()"
+      >
+        {{ pluginRequirementBusy() ? 'Installing' : 'Install plugins' }}
+      </button>
+    </footer>
+  </section>
+}
 <!-- Click-away overlay to close dropdown -->
 @if (showMenu()) {
   <div