From e63c2e6f084303cb363065c5f783fe1f97188670 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Tue, 24 Feb 2026 15:02:03 -0600
Subject: [PATCH] metadata component skeletons

---
 .../categories/categories.component.html      | 16 ++++++++++-
 .../categories/categories.component.scss      | 28 +++++++++++++++++++
 .../categories/categories.component.ts        | 14 ++++++++--
 .../merchants/merchants.component.html        | 16 ++++++++++-
 .../merchants/merchants.component.scss        | 28 +++++++++++++++++++
 .../metadata/merchants/merchants.component.ts | 14 ++++++++--
 .../metadata/tags/tags.component.html         | 16 ++++++++++-
 .../metadata/tags/tags.component.scss         | 28 +++++++++++++++++++
 .../metadata/tags/tags.component.ts           | 14 ++++++++--
 9 files changed, 162 insertions(+), 12 deletions(-)

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index a9e5079..9534c08 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -1,3 +1,17 @@
 <div class="categories-container">
-  Categories Component
+  <div class="category-list-header">
+    <p>Categories</p>
+    <app-divider />
+  </div>
+
+  <div class="category-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>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index e69de29..85a72d5 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -0,0 +1,28 @@
+.categories-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.category-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.category-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 4450a3e..bb052b5 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
+import { CategoryService } from '../../../services/category.service';
+import { DividerComponent } from '../../divider/divider.component';
 
 @Component({
   selector: 'app-categories',
-  imports: [],
+  imports: [
+    DividerComponent
+  ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
 })
-export class CategoriesComponent { }
+export class CategoriesComponent {
+  protected categories = computed(() => this.categoryService.categories());
+
+  public constructor(private readonly categoryService: CategoryService) { }
+}
diff --git a/src/app/components/metadata/merchants/merchants.component.html b/src/app/components/metadata/merchants/merchants.component.html
index c956486..1b0bb83 100644
--- a/src/app/components/metadata/merchants/merchants.component.html
+++ b/src/app/components/metadata/merchants/merchants.component.html
@@ -1,3 +1,17 @@
 <div class="merchants-container">
-  Merchants Component
+  <div class="merchant-list-header">
+    <p>Merchants</p>
+    <app-divider />
+  </div>
+
+  <div class="merchant-list">
+    @for (merchant of merchants(); track merchant.id) {
+      <div>{{ merchant.name }}</div>
+    }
+    @if (!merchants().length) {
+      <div class="merchant-list-empty">
+        No merchants to display
+      </div>
+    }
+  </div>
 </div>
diff --git a/src/app/components/metadata/merchants/merchants.component.scss b/src/app/components/metadata/merchants/merchants.component.scss
index e69de29..8d34c6c 100644
--- a/src/app/components/metadata/merchants/merchants.component.scss
+++ b/src/app/components/metadata/merchants/merchants.component.scss
@@ -0,0 +1,28 @@
+.merchants-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.merchant-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.merchant-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}
diff --git a/src/app/components/metadata/merchants/merchants.component.ts b/src/app/components/metadata/merchants/merchants.component.ts
index b987ac5..7c8d730 100644
--- a/src/app/components/metadata/merchants/merchants.component.ts
+++ b/src/app/components/metadata/merchants/merchants.component.ts
@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
+import { MerchantService } from '../../../services/merchant.service';
+import { DividerComponent } from '../../divider/divider.component';
 
 @Component({
   selector: 'app-merchants',
-  imports: [],
+  imports: [
+    DividerComponent
+  ],
   templateUrl: './merchants.component.html',
   styleUrl: './merchants.component.scss'
 })
-export class MerchantsComponent { }
+export class MerchantsComponent {
+  protected merchants = computed(() => this.merchantService.merchants());
+
+  public constructor(private readonly merchantService: MerchantService) { }
+}
diff --git a/src/app/components/metadata/tags/tags.component.html b/src/app/components/metadata/tags/tags.component.html
index 73248d6..c5e59e0 100644
--- a/src/app/components/metadata/tags/tags.component.html
+++ b/src/app/components/metadata/tags/tags.component.html
@@ -1,3 +1,17 @@
 <div class="tags-container">
-  Tags Component
+  <div class="tag-list-header">
+    <p>Tags</p>
+    <app-divider />
+  </div>
+
+  <div class="tag-list">
+    @for (tag of tags(); track tag.id) {
+      <div>{{ tag.name }}</div>
+    }
+    @if (!tags().length) {
+      <div class="tag-list-empty">
+        No tags to display
+      </div>
+    }
+  </div>
 </div>
diff --git a/src/app/components/metadata/tags/tags.component.scss b/src/app/components/metadata/tags/tags.component.scss
index e69de29..5772b6d 100644
--- a/src/app/components/metadata/tags/tags.component.scss
+++ b/src/app/components/metadata/tags/tags.component.scss
@@ -0,0 +1,28 @@
+.tags-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.tag-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.tag-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}
diff --git a/src/app/components/metadata/tags/tags.component.ts b/src/app/components/metadata/tags/tags.component.ts
index f1d7557..04979e6 100644
--- a/src/app/components/metadata/tags/tags.component.ts
+++ b/src/app/components/metadata/tags/tags.component.ts
@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
+import { TagService } from '../../../services/tag.service';
+import { DividerComponent } from '../../divider/divider.component';
 
 @Component({
   selector: 'app-tags',
-  imports: [],
+  imports: [
+    DividerComponent
+  ],
   templateUrl: './tags.component.html',
   styleUrl: './tags.component.scss'
 })
-export class TagsComponent { }
+export class TagsComponent {
+  protected tags = computed(() => this.tagService.tags());
+
+  public constructor(private readonly tagService: TagService) { }
+}