feat: plugins v1

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.html

@@ -250,6 +250,41 @@
           }
         </div>
       </section>
+
+      @if (pluginChannelSections().length > 0 || pluginSidePanels().length > 0) {
+        <section class="border-t border-border px-2 py-3" data-testid="plugin-room-side-panel">
+          <div class="mb-2 px-1">
+            <h4 class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Plugins</h4>
+          </div>
+
+          @if (pluginChannelSections().length > 0) {
+            <div class="space-y-1">
+              @for (record of pluginChannelSections(); track record.id) {
+                <button
+                  class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground/70 transition-colors hover:bg-secondary/60 hover:text-foreground"
+                  [title]="record.pluginId">
+                  <ng-icon
+                    [name]="record.contribution.type === 'video' ? 'lucideVideo' : 'lucideHash'"
+                    class="h-4 w-4 text-muted-foreground"
+                  />
+                  <span class="min-w-0 flex-1 truncate">{{ record.contribution.label }}</span>
+                </button>
+              }
+            </div>
+          }
+
+          @if (pluginSidePanels().length > 0) {
+            <div class="mt-3 space-y-2">
+              @for (record of pluginSidePanels(); track record.id) {
+                <article class="rounded-md border border-border bg-background/40 p-2">
+                  <p class="mb-2 truncate text-xs font-medium text-muted-foreground">{{ record.contribution.label }}</p>
+                  <app-plugin-render-host [render]="record.contribution.render" />
+                </article>
+              }
+            </div>
+          }
+        </section>
+      }
     </div>
   }
 

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.ts

@@ -51,6 +51,8 @@ import { VoicePlaybackService } from '../../../domains/voice-connection';
 import { formatGameActivityElapsed } from '../../../domains/game-activity';
 import { ExternalLinkService } from '../../../core/platform/external-link.service';
 import { VoiceControlsComponent } from '../../../domains/voice-session/feature/voice-controls/voice-controls.component';
+import { PluginRenderHostComponent } from '../../../domains/plugins/feature/plugin-render-host/plugin-render-host.component';
+import { PluginUiRegistryService } from '../../../domains/plugins';
 import { isChannelNameTaken, normalizeChannelName } from '../../../store/rooms/room-channels.rules';
 import {
   canManageMember,
@@ -89,6 +91,7 @@ type PanelMode = 'channels' | 'users';
     UserVolumeMenuComponent,
     UserAvatarComponent,
     ConfirmDialogComponent,
+    PluginRenderHostComponent,
     ThemeNodeDirective
   ],
   viewProviders: [
@@ -124,6 +127,7 @@ export class RoomsSidePanelComponent implements OnDestroy {
   private readonly externalLinks = inject(ExternalLinkService);
   private readonly voiceActivity = inject(VoiceActivityService);
   private readonly voiceConnectivity = inject(VoiceConnectivityHealthService);
+  private readonly pluginUi = inject(PluginUiRegistryService);
   private profileCardOpenTimer: ReturnType<typeof setTimeout> | null = null;
   private readonly activityTimer = setInterval(() => this.activityNow.set(Date.now()), 1_000);
 
@@ -137,6 +141,8 @@ export class RoomsSidePanelComponent implements OnDestroy {
   activeChannelId = this.store.selectSignal(selectActiveChannelId);
   textChannels = this.store.selectSignal(selectTextChannels);
   voiceChannels = this.store.selectSignal(selectVoiceChannels);
+  pluginChannelSections = this.pluginUi.channelSectionRecords;
+  pluginSidePanels = this.pluginUi.sidePanelRecords;
   localUserHasDesync = this.voiceConnectivity.localUserHasDesync;
   roomMembers = computed(() => this.currentRoom()?.members ?? []);
   roomMemberIdentifiers = computed(() => {