Refactors admin page design to move each 'facet' of admin into its own component.

src/app/admin/admin-community-tab.component.html

@@ -0,0 +1,36 @@
+<div class="tab-content">
+  <div class="tab-toolbar">
+    <h2>Community Highlights ({{ (highlights$ | async)?.length }})</h2>
+    <button class="btn btn-add" (click)="onAdd()">+ Add Highlight</button>
+  </div>
+
+  <table class="admin-table">
+    <thead>
+      <tr>
+        <th>Icon</th>
+        <th>Title</th>
+        <th>Order</th>
+        <th>Active</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (highlight of highlights$ | async; track highlight.id) {
+      <tr>
+        <td>{{ highlight.icon }}</td>
+        <td>{{ highlight.title }}</td>
+        <td>{{ highlight.display_order }}</td>
+        <td>{{ highlight.active ? 'Yes' : 'No' }}</td>
+        <td class="actions">
+          <button class="btn-icon btn-edit" (click)="onEdit(highlight)">Edit</button>
+          <button class="btn-icon btn-delete" (click)="onDelete(highlight.id)">Delete</button>
+        </td>
+      </tr>
+      } @empty {
+      <tr>
+        <td colspan="5" class="empty-row">No highlights yet. Click "Add Highlight" to create one.</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+</div>