Simple Managment webapp [LLM]

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

@@ -92,26 +92,22 @@
                 nzTooltipTitle="Copy"
                 [appCopyToClipboard]="channel()!.subscribe_key!"
               ></span>
-              <span
-                nz-icon
-                nzType="qrcode"
-                class="action-icon"
-                nz-tooltip
-                nzTooltipTitle="Show QR Code"
-                (click)="showQrCode()"
-              ></span>
             </ng-template>
             <div class="key-actions">
               <button
                 nz-button
                 nzSize="small"
                 nz-popconfirm
-                nzPopconfirmTitle="Regenerate subscribe key? Existing subscribers will need the new key."
+                nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
                 (nzOnConfirm)="regenerateSubscribeKey()"
               >
-                Regenerate
+                Invalidate & Regenerate
               </button>
             </div>
+            <div class="qr-section">
+              <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
+              <p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
+            </div>
           </div>
         }
 
@@ -238,15 +234,3 @@
   </ng-container>
 </nz-modal>
 
-<!-- QR Code Modal -->
-<nz-modal
-  [(nzVisible)]="showQrModal"
-  nzTitle="Subscribe QR Code"
-  (nzOnCancel)="closeQrModal()"
-  [nzFooter]="null"
->
-  <ng-container *nzModalContent>
-    <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
-    <p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
-  </ng-container>
-</nz-modal>

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

@@ -44,9 +44,28 @@
   }
 }
 
+.qr-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+
+  label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 12px;
+    color: #333;
+  }
+
+  app-qr-code-display {
+    display: flex;
+    justify-content: center;
+  }
+}
+
 .qr-hint {
   text-align: center;
   color: #666;
   font-size: 13px;
-  margin-top: 16px;
+  margin-top: 12px;
+  margin-bottom: 0;
 }

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