Simple Managment webapp [LLM]

webapp/src/app/features/channels/channel-detail/channel-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal, OnInit } from '@angular/core';
+import { Component, inject, signal, computed, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
@@ -70,9 +70,20 @@ export class ChannelDetailComponent implements OnInit {
   editDescription = '';
   saving = signal(false);
 
-  // QR modal
-  showQrModal = signal(false);
-  qrCodeData = signal('');
+  // QR code data (computed from channel)
+  qrCodeData = computed(() => {
+    const channel = this.channel();
+    if (!channel || !channel.subscribe_key) return '';
+
+    return [
+      '@scn.channel.subscribe',
+      'v1',
+      channel.display_name,
+      channel.owner_user_id,
+      channel.channel_id,
+      channel.subscribe_key
+    ].join('\n');
+  });
 
   ngOnInit(): void {
     const channelId = this.route.snapshot.paramMap.get('id');
@@ -211,28 +222,6 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
-  // QR Code
-  showQrCode(): void {
-    const channel = this.channel();
-    if (!channel || !channel.subscribe_key) return;
-
-    const qrText = [
-      '@scn.channel.subscribe',
-      'v1',
-      channel.display_name,
-      channel.owner_user_id,
-      channel.channel_id,
-      channel.subscribe_key
-    ].join('\n');
-
-    this.qrCodeData.set(qrText);
-    this.showQrModal.set(true);
-  }
-
-  closeQrModal(): void {
-    this.showQrModal.set(false);
-  }
-
   getSubscriptionStatus(): { label: string; color: string } {
     const channel = this.channel();
     if (!channel) return { label: 'Unknown', color: 'default' };