Simple Managment webapp [LLM]

webapp/src/app/features/account/account-info/account-info.component.html

@@ -78,33 +78,6 @@
       </nz-descriptions>
     </nz-card>
 
-    <nz-card nzTitle="Actions" class="mt-16">
-      <div class="action-section">
-        <button nz-button nzType="default" (click)="logout()">
-          <span nz-icon nzType="logout"></span>
-          Logout
-        </button>
-      </div>
-
-      <nz-divider nzText="Danger Zone" nzOrientation="left"></nz-divider>
-
-      <div class="danger-section">
-        <p>Deleting your account will permanently remove all your data including messages, channels, subscriptions, and keys.</p>
-        <button
-          nz-button
-          nzType="primary"
-          nzDanger
-          nz-popconfirm
-          nzPopconfirmTitle="Are you absolutely sure? This action cannot be undone."
-          nzPopconfirmPlacement="top"
-          (nzOnConfirm)="deleteAccount()"
-          [nzLoading]="deleting()"
-        >
-          <span nz-icon nzType="delete"></span>
-          Delete Account
-        </button>
-      </div>
-    </nz-card>
   }
 </div>
 

webapp/src/app/features/account/account-info/account-info.component.ts

@@ -1,6 +1,5 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -9,7 +8,6 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
-import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
@@ -33,7 +31,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzTagModule,
     NzSpinModule,
     NzProgressModule,
-    NzPopconfirmModule,
     NzModalModule,
     NzFormModule,
     NzInputModule,
@@ -47,11 +44,9 @@ export class AccountInfoComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
-  private router = inject(Router);
 
   user = signal<UserWithExtra | null>(null);
   loading = signal(true);
-  deleting = signal(false);
 
   // Edit username modal
   showEditModal = signal(false);
@@ -121,28 +116,4 @@ export class AccountInfoComponent implements OnInit {
       }
     });
   }
-
-  // Logout
-  logout(): void {
-    this.authService.logout();
-    this.router.navigate(['/login']);
-  }
-
-  // Delete account
-  deleteAccount(): void {
-    const userId = this.authService.getUserId();
-    if (!userId) return;
-
-    this.deleting.set(true);
-    this.apiService.deleteUser(userId).subscribe({
-      next: () => {
-        this.notification.success('Account deleted');
-        this.authService.logout();
-        this.router.navigate(['/login']);
-      },
-      error: () => {
-        this.deleting.set(false);
-      }
-    });
-  }
 }

webapp/src/app/features/keys/key-list/key-list.component.html

@@ -168,10 +168,11 @@
               <label
                 nz-checkbox
                 [nzChecked]="isPermissionChecked(opt.value)"
+                [nzDisabled]="opt.value !== 'A' && isPermissionChecked('A')"
                 (nzCheckedChange)="onPermissionChange(opt.value, $event)"
               >
                 <nz-tag [nzColor]="getPermissionColor(opt.value)">{{ opt.value }}</nz-tag>
-                {{ opt.label }}
+                <span class="perm-label">{{ opt.label }}</span>
                 <span class="perm-desc">- {{ opt.description }}</span>
               </label>
             }

webapp/src/app/features/keys/key-list/key-list.component.scss

@@ -60,7 +60,17 @@
   label {
     display: flex;
     align-items: center;
-    gap: 4px;
+    margin-left: 0;
+  }
+
+  nz-tag {
+    width: 32px;
+    text-align: center;
+    margin-right: 8px;
+  }
+
+  .perm-label {
+    min-width: 100px;
   }
 
   .perm-desc {

webapp/src/app/features/keys/key-list/key-list.component.ts

@@ -184,7 +184,10 @@ export class KeyListComponent implements OnInit {
 
   onPermissionChange(perm: TokenPermission, checked: boolean): void {
     if (checked) {
-      if (!this.newKeyPermissions.includes(perm)) {
+      if (perm === 'A') {
+        // Admin selected - clear other permissions
+        this.newKeyPermissions = ['A'];
+      } else if (!this.newKeyPermissions.includes(perm)) {
         this.newKeyPermissions = [...this.newKeyPermissions, perm];
       }
     } else {

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -7,52 +7,43 @@
     </button>
   </div>
 
-  <nz-card class="filter-card">
+  <div class="search-bar">
-    <div class="filter-bar">
+    <nz-input-group nzSearch [nzAddOnAfter]="searchButton">
-      <nz-input-group nzSearch [nzAddOnAfter]="searchButton" style="width: 300px;">
-        <input
-          type="text"
-          nz-input
-          placeholder="Search messages..."
-          [(ngModel)]="searchText"
-          (keyup.enter)="applyFilters()"
-        />
-      </nz-input-group>
-      <ng-template #searchButton>
-        <button nz-button nzType="primary" nzSearch (click)="applyFilters()">
-          <span nz-icon nzType="search"></span>
-        </button>
-      </ng-template>
-
-      <nz-select
-        [(ngModel)]="priorityFilter"
-        nzPlaceHolder="Priority"
-        nzAllowClear
-        style="width: 150px;"
-        (ngModelChange)="applyFilters()"
-      >
-        <nz-option [nzValue]="0" nzLabel="Low"></nz-option>
-        <nz-option [nzValue]="1" nzLabel="Normal"></nz-option>
-        <nz-option [nzValue]="2" nzLabel="High"></nz-option>
-      </nz-select>
-
       <input
         type="text"
         nz-input
-        placeholder="Channel name"
+        placeholder="Search messages..."
-        [(ngModel)]="channelFilter"
+        [(ngModel)]="searchText"
-        style="width: 200px;"
         (keyup.enter)="applyFilters()"
       />
+    </nz-input-group>
+    <ng-template #searchButton>
+      <button nz-button nzType="primary" nzSearch (click)="applyFilters()">
+        <span nz-icon nzType="search"></span>
+      </button>
+    </ng-template>
+  </div>
 
-      @if (searchText || priorityFilter !== null || channelFilter) {
+  @if (hasActiveFilters()) {
-        <button nz-button (click)="clearFilters()">
+    <div class="active-filters">
-          <span nz-icon nzType="close"></span>
+      @if (appliedSearchText) {
-          Clear
+        <nz-tag nzMode="closeable" (nzOnClose)="clearSearch()">
-        </button>
+          "{{ appliedSearchText }}"
+        </nz-tag>
       }
+      @for (channel of channelFilter; track channel) {
+        <nz-tag nzMode="closeable" (nzOnClose)="removeChannelFilter(channel)">
+          {{ getChannelDisplayName(channel) }}
+        </nz-tag>
+      }
+      @if (priorityFilter.length > 0) {
+        <nz-tag nzMode="closeable" (nzOnClose)="clearPriorityFilter()">
+          {{ getPriorityLabel(+priorityFilter[0]) }}
+        </nz-tag>
+      }
+      <a class="clear-all" (click)="clearAllFilters()">Clear all</a>
     </div>
-  </nz-card>
+  }
 
   <nz-card>
     <nz-table
@@ -67,9 +58,19 @@
       <thead>
         <tr>
           <th nzWidth="40%">Title</th>
-          <th nzWidth="15%">Channel</th>
+          <th
+            nzWidth="15%"
+            [nzFilters]="channelFilters()"
+            [nzFilterMultiple]="true"
+            (nzFilterChange)="onChannelFilterChange($event)"
+          >Channel</th>
           <th nzWidth="15%">Sender</th>
-          <th nzWidth="10%">Priority</th>
+          <th
+            nzWidth="10%"
+            [nzFilters]="priorityFilters"
+            [nzFilterMultiple]="false"
+            (nzFilterChange)="onPriorityFilterChange($event)"
+          >Priority</th>
           <th nzWidth="20%">Time</th>
         </tr>
       </thead>

webapp/src/app/features/messages/message-list/message-list.component.scss

@@ -9,10 +9,28 @@
   }
 }
 
-.filter-card {
+.search-bar {
   margin-bottom: 16px;
 }
 
+.active-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+
+  nz-tag {
+    max-width: none;
+  }
+
+  .clear-all {
+    margin-left: 8px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+}
+
 .message-title {
   font-weight: 500;
   color: #333;

webapp/src/app/features/messages/message-list/message-list.component.ts

@@ -2,10 +2,9 @@ import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzTableModule, NzTableFilterList } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
@@ -26,7 +25,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzTableModule,
     NzButtonModule,
     NzInputModule,
-    NzSelectModule,
     NzTagModule,
     NzIconModule,
     NzEmptyModule,
@@ -49,13 +47,39 @@ export class MessageListComponent implements OnInit {
 
   // Filters
   searchText = '';
-  priorityFilter: number | null = null;
+  appliedSearchText = '';
-  channelFilter = '';
+  priorityFilter: string[] = [];
+  channelFilter: string[] = [];
+
+  // Filter options
+  priorityFilters: NzTableFilterList = [
+    { text: 'Low', value: '0' },
+    { text: 'Normal', value: '1' },
+    { text: 'High', value: '2' },
+  ];
+  channelFilters = signal<NzTableFilterList>([]);
 
   ngOnInit(): void {
+    this.loadChannels();
     this.loadMessages();
   }
 
+  loadChannels(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.getChannels(userId, 'all_any').subscribe({
+      next: (response) => {
+        this.channelFilters.set(
+          response.channels.map(ch => ({
+            text: ch.display_name,
+            value: ch.internal_name,
+          }))
+        );
+      }
+    });
+  }
+
   loadMessages(append = false): void {
     this.loading.set(true);
 
@@ -64,14 +88,14 @@ export class MessageListComponent implements OnInit {
       trimmed: true,
     };
 
-    if (this.searchText) {
+    if (this.appliedSearchText) {
-      params.search = this.searchText;
+      params.search = this.appliedSearchText;
     }
-    if (this.priorityFilter !== null) {
+    if (this.priorityFilter.length === 1) {
-      params.priority = this.priorityFilter;
+      params.priority = parseInt(this.priorityFilter[0], 10);
     }
-    if (this.channelFilter) {
+    if (this.channelFilter.length > 0) {
-      params.channel = this.channelFilter;
+      params.channel = this.channelFilter.join(',');
     }
     if (append && this.nextPageToken()) {
       params.next_page_token = this.nextPageToken()!;
@@ -98,16 +122,59 @@ export class MessageListComponent implements OnInit {
   }
 
   applyFilters(): void {
+    this.appliedSearchText = this.searchText;
     this.loadMessages();
   }
 
-  clearFilters(): void {
+  onPriorityFilterChange(filters: string[] | null): void {
-    this.searchText = '';
+    this.priorityFilter = filters ?? [];
-    this.priorityFilter = null;
-    this.channelFilter = '';
     this.loadMessages();
   }
 
+  onChannelFilterChange(filters: string[] | null): void {
+    this.channelFilter = filters ?? [];
+    this.loadMessages();
+  }
+
+  clearSearch(): void {
+    this.searchText = '';
+    this.appliedSearchText = '';
+    this.loadMessages();
+  }
+
+  clearChannelFilter(): void {
+    this.channelFilter = [];
+    this.loadMessages();
+  }
+
+  removeChannelFilter(channel: string): void {
+    this.channelFilter = this.channelFilter.filter(c => c !== channel);
+    this.loadMessages();
+  }
+
+  clearPriorityFilter(): void {
+    this.priorityFilter = [];
+    this.loadMessages();
+  }
+
+  clearAllFilters(): void {
+    this.searchText = '';
+    this.appliedSearchText = '';
+    this.channelFilter = [];
+    this.priorityFilter = [];
+    this.loadMessages();
+  }
+
+  hasActiveFilters(): boolean {
+    return !!this.appliedSearchText || this.channelFilter.length > 0 || this.priorityFilter.length > 0;
+  }
+
+  getChannelDisplayName(internalName: string): string {
+    const filters = this.channelFilters();
+    const channel = filters.find(f => f.value === internalName);
+    return channel?.text?.toString() ?? internalName;
+  }
+
   loadMore(): void {
     if (this.nextPageToken()) {
       this.loadMessages(true);

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -16,10 +16,21 @@
   <nz-card>
     <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
       <nz-tab nzTitle="All"></nz-tab>
-      <nz-tab nzTitle="Outgoing"></nz-tab>
+      <nz-tab nzTitle="Own"></nz-tab>
+      <nz-tab nzTitle="Deactivated"></nz-tab>
+      <nz-tab nzTitle="External"></nz-tab>
       <nz-tab nzTitle="Incoming"></nz-tab>
     </nz-tabset>
 
+    @if (getTabDescription()) {
+      <nz-alert
+        nzType="info"
+        [nzMessage]="getTabDescription()!"
+        nzShowIcon
+        style="margin-bottom: 16px;"
+      ></nz-alert>
+    }
+
     <nz-table
       #subscriptionTable
       [nzData]="subscriptions()"
@@ -31,7 +42,7 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="10%">Direction</th>
+          <th nzWidth="10%">Type</th>
           <th nzWidth="20%">Channel</th>
           <th nzWidth="20%">Subscriber</th>
           <th nzWidth="20%">Owner</th>
@@ -44,8 +55,8 @@
         @for (sub of subscriptions(); track sub.subscription_id) {
           <tr>
             <td>
-              <nz-tag [nzColor]="isOutgoing(sub) ? 'blue' : 'purple'">
+              <nz-tag [nzColor]="getTypeLabel(sub).color">
-                {{ getDirectionLabel(sub) }}
+                {{ getTypeLabel(sub).label }}
               </nz-tag>
             </td>
             <td>

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -13,6 +13,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
@@ -20,7 +21,19 @@ import { UserCacheService, ResolvedUser } from '../../../core/services/user-cach
 import { Subscription, SubscriptionFilter } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 
-type TabDirection = 'both' | 'outgoing' | 'incoming';
+type SubscriptionTab = 'all' | 'own' | 'deactivated' | 'external' | 'incoming';
+
+interface TabConfig {
+  filter: SubscriptionFilter;
+}
+
+const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
+  all: { filter: {} },
+  own: { filter: { direction: 'outgoing', confirmation: 'confirmed', external: 'false' } },
+  deactivated: { filter: { direction: 'outgoing', confirmation: 'unconfirmed', external: 'false' } },
+  external: { filter: { direction: 'outgoing', confirmation: 'all', external: 'true' } },
+  incoming: { filter: { direction: 'incoming', confirmation: 'all', external: 'true' } },
+};
 
 @Component({
   selector: 'app-subscription-list',
@@ -40,6 +53,7 @@ type TabDirection = 'both' | 'outgoing' | 'incoming';
     NzFormModule,
     NzInputModule,
     NzToolTipModule,
+    NzAlertModule,
     RelativeTimePipe,
   ],
   templateUrl: './subscription-list.component.html',
@@ -54,7 +68,7 @@ export class SubscriptionListComponent implements OnInit {
   subscriptions = signal<Subscription[]>([]);
   userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
-  direction: TabDirection = 'both';
+  activeTab: SubscriptionTab = 'all';
 
   // Create subscription modal
   showCreateModal = signal(false);
@@ -72,10 +86,7 @@ export class SubscriptionListComponent implements OnInit {
 
     this.loading.set(true);
 
-    const filter: SubscriptionFilter = {};
+    const filter = TAB_CONFIGS[this.activeTab].filter;
-    if (this.direction !== 'both') {
-      filter.direction = this.direction;
-    }
 
     this.apiService.getSubscriptions(userId, filter).subscribe({
       next: (response) => {
@@ -108,8 +119,8 @@ export class SubscriptionListComponent implements OnInit {
   }
 
   onTabChange(index: number): void {
-    const directions: TabDirection[] = ['both', 'outgoing', 'incoming'];
+    const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming'];
-    this.direction = directions[index];
+    this.activeTab = tabs[index];
     this.loadSubscriptions();
   }
 
@@ -199,10 +210,29 @@ export class SubscriptionListComponent implements OnInit {
     return { label: 'Pending', color: 'orange' };
   }
 
-  getDirectionLabel(sub: Subscription): string {
+  getTypeLabel(sub: Subscription): { label: string; color: string } {
-    if (this.isOutgoing(sub)) {
+    const userId = this.authService.getUserId();
-      return 'Outgoing';
+    if (sub.subscriber_user_id === sub.channel_owner_user_id) {
+      return { label: 'Own', color: 'green' };
+    }
+    if (sub.subscriber_user_id === userId) {
+      return { label: 'External', color: 'blue' };
+    }
+    return { label: 'Incoming', color: 'purple' };
+  }
+
+  getTabDescription(): string | null {
+    switch (this.activeTab) {
+      case 'own':
+        return 'Active subscriptions to your channels.';
+      case 'deactivated':
+        return 'Deactivated subscriptions to your channels. These can be reactivated by you.';
+      case 'external':
+        return 'Your subscriptions to channels owned by other users.';
+      case 'incoming':
+        return 'Subscription from other users to your channels.';
+      default:
+        return null;
     }
-    return 'Incoming';
   }
 }