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

@@ -1,44 +1,17 @@
 <div class="categories-container">
   <div class="category-list-header">
     <p>Categories</p>
-
-    <mat-form-field appearance="outline">
-      <mat-label>New Category</mat-label>
-      <input type="text" matInput [(ngModel)]="newCategory" [ngModelOptions]="{ standalone: true }">
-      @if (!!newCategory()) {
-        <button matSuffix matIconButton (click)="addClick()">
-          <mat-icon>add</mat-icon>
-        </button>
-      }
-    </mat-form-field>
-
     <app-divider />
   </div>
 
   <div class="category-list">
-<!--    <mat-list>-->
-<!--      <mat-list-item>-->
-<!--        <div class="category-item">-->
-<!--          <mat-form-field appearance="outline">-->
-<!--            <mat-label>New Category</mat-label>-->
-<!--            <input type="text" matInput [(ngModel)]="newCategory">-->
-<!--            <button matSuffix matIconButton (click)="addClick()">-->
-<!--              <mat-icon>shopping_cart</mat-icon>-->
-<!--            </button>-->
-<!--          </mat-form-field>-->
-<!--        </div>-->
-<!--      </mat-list-item>-->
-      @for (category of categories(); track category.id) {
-<!--        <mat-list-item>-->
-          {{ category.name }}
-<!--        </mat-list-item>-->
-      }
-      @if (!categories().length) {
-<!--        <mat-list-item>No categories to display</mat-list-item>-->
-<!--        <div class="category-list-empty">-->
-<!--          No categories to display-->
-<!--        </div>-->
-      }
-<!--    </mat-list>-->
+    @for (category of categories(); track category.id) {
+      <div>{{ category.name }}</div>
+    }
+    @if (!categories().length) {
+      <div class="category-list-empty">
+        No categories to display
+      </div>
+    }
   </div>
 </div>

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

@@ -21,20 +21,8 @@
   }
 }
 
-//.add-category {
-//  display: flex;
-//  align-items: baseline;
-//  gap: 0.5rem;
-//}
-
-//.category-list {
-//  display: grid;
-//  gap: 1rem;
-//  justify-content: center;
-//}
-.category-item {
-  padding: 1rem;
-}
-mat-form-field {
-  width: 400px;
+.category-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
 }

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

@@ -1,24 +1,11 @@
-import {Component, computed, effect, model} from '@angular/core';
+import { Component, computed } from '@angular/core';
 import { CategoryService } from '../../../services/category.service';
 import { DividerComponent } from '../../divider/divider.component';
-import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
-import {FormsModule} from '@angular/forms';
-import {MatList, MatListItem} from '@angular/material/list';
-import {MatIconButton} from '@angular/material/button';
-import {MatIcon} from '@angular/material/icon';
 
 @Component({
   selector: 'app-categories',
   imports: [
     DividerComponent,
-    MatInput,
-    MatFormField,
-    MatLabel,
-    FormsModule,
-    // MatList,
-    // MatListItem,
-    MatIconButton,
-    MatIcon
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
@@ -26,15 +13,5 @@ import {MatIcon} from '@angular/material/icon';
 export class CategoriesComponent {
   protected categories = computed(() => this.categoryService.categories());
 
-  public newCategory = model<string>('');
-
-  public constructor(private readonly categoryService: CategoryService) {
-    effect(() => {
-      console.log(this.newCategory());
-    });
-  }
-
-  public addClick(): void {
-    console.log('add clicked');
-  }
+  public constructor(private readonly categoryService: CategoryService) { }
 }