src/app/components/metadata/categories/categories.component.html

@@ -7,8 +7,11 @@
     <mat-card-content>
       <div class="category-list">
         @for (category of categories(); track category.id) {
-          <div>
-            {{ category.name }}
+<!--          TODO: Convert to form...-->
+          <div class="category-item">
+            <div>{{ category.name }}</div>
+
+            <button matIconButton><mat-icon>edit</mat-icon></button>
           </div>
         }
         @if (!categories().length) {

src/app/components/metadata/categories/categories.component.scss

@@ -15,5 +15,10 @@
 .category-list {
   padding-top: 1rem;
   display: grid;
-  gap: 0.5rem;
+}
+
+.category-item {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
 }

src/app/components/metadata/categories/categories.component.ts

@@ -1,11 +1,15 @@
 import { Component, computed } from '@angular/core';
 import { CategoryService } from '../../../services/category.service';
 import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-categories',
   imports: [
-    MatCardModule
+    MatCardModule,
+    MatIconModule,
+    MatButtonModule
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'