Simple Managment webapp [LLM]

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

@@ -0,0 +1,110 @@
+<div class="page-content">
+  <div class="page-header">
+    <h2>Channels</h2>
+    <div class="header-actions">
+      <button nz-button (click)="loadChannels()">
+        <span nz-icon nzType="reload"></span>
+        Refresh
+      </button>
+      <button nz-button nzType="primary" (click)="openCreateModal()">
+        <span nz-icon nzType="plus"></span>
+        Create Channel
+      </button>
+    </div>
+  </div>
+
+  <nz-card class="filter-card">
+    <nz-radio-group [(ngModel)]="selector" (ngModelChange)="onSelectorChange()">
+      <label nz-radio-button nzValue="all">All</label>
+      <label nz-radio-button nzValue="owned">Owned</label>
+      <label nz-radio-button nzValue="subscribed">Subscribed</label>
+      <label nz-radio-button nzValue="subscribed_any">Subscribed (Any)</label>
+    </nz-radio-group>
+  </nz-card>
+
+  <nz-card>
+    <nz-table
+      #channelTable
+      [nzData]="channels()"
+      [nzLoading]="loading()"
+      [nzShowPagination]="false"
+      nzSize="middle"
+    >
+      <thead>
+        <tr>
+          <th nzWidth="25%">Name</th>
+          <th nzWidth="20%">Internal Name</th>
+          <th nzWidth="15%">Status</th>
+          <th nzWidth="15%">Messages</th>
+          <th nzWidth="25%">Last Sent</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (channel of channels(); track channel.channel_id) {
+          <tr class="clickable-row" (click)="viewChannel(channel)">
+            <td>
+              <div class="channel-name">{{ channel.display_name }}</div>
+              @if (channel.description_name) {
+                <div class="channel-description">{{ channel.description_name }}</div>
+              }
+            </td>
+            <td>
+              <span class="mono">{{ channel.internal_name }}</span>
+            </td>
+            <td>
+              <nz-tag [nzColor]="getSubscriptionStatus(channel).color">
+                {{ getSubscriptionStatus(channel).label }}
+              </nz-tag>
+            </td>
+            <td>{{ channel.messages_sent }}</td>
+            <td>
+              @if (channel.timestamp_lastsent) {
+                <span nz-tooltip [nzTooltipTitle]="channel.timestamp_lastsent">
+                  {{ channel.timestamp_lastsent | relativeTime }}
+                </span>
+              } @else {
+                <span class="text-muted">Never</span>
+              }
+            </td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="5">
+              <nz-empty nzNotFoundContent="No channels found"></nz-empty>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </nz-table>
+  </nz-card>
+</div>
+
+<!-- Create Channel Modal -->
+<nz-modal
+  [(nzVisible)]="showCreateModal"
+  nzTitle="Create Channel"
+  (nzOnCancel)="closeCreateModal()"
+  (nzOnOk)="createChannel()"
+  [nzOkLoading]="creating()"
+  [nzOkDisabled]="!newChannelName.trim()"
+>
+  <ng-container *nzModalContent>
+    <nz-form-item>
+      <nz-form-label>Channel Name</nz-form-label>
+      <nz-form-control>
+        <input
+          type="text"
+          nz-input
+          placeholder="Enter channel name"
+          [(ngModel)]="newChannelName"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item class="mb-0">
+      <label nz-checkbox [(ngModel)]="newChannelSubscribe">
+        Subscribe to this channel
+      </label>
+    </nz-form-item>
+  </ng-container>
+</nz-modal>