From 3443a39ab3a6182053c7bfadc24759d7e088a25a Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Mon, 23 Feb 2026 22:39:10 -0600
Subject: [PATCH 01/18] page scaffolding and theme change

---
 src/app/app.html                              |  6 +++-
 src/app/app.routes.ts                         | 10 ++++++
 src/app/app.scss                              | 14 +++-----
 src/app/app.ts                                | 33 ++++++++++++++++---
 .../{divider.html => divider.component.html}  |  0
 .../{divider.scss => divider.component.scss}  |  0
 .../components/divider/divider.component.ts   |  9 +++++
 src/app/components/divider/divider.ts         |  9 -----
 .../expense-list/expense-list.component.scss  |  3 +-
 .../expense-list/expense-list.component.ts    |  4 +--
 src/app/pages/home/home-page.component.html   |  6 +---
 src/app/pages/home/home-page.component.scss   |  7 ++++
 src/app/pages/home/home-page.component.ts     |  7 ++--
 .../metadata/metadata-page.component.html     |  3 ++
 .../metadata/metadata-page.component.scss     |  0
 .../pages/metadata/metadata-page.component.ts |  9 +++++
 .../settings/settings-page.component.html     |  3 ++
 .../settings/settings-page.component.scss     |  0
 .../pages/settings/settings-page.component.ts |  9 +++++
 src/styles.scss                               |  2 +-
 20 files changed, 95 insertions(+), 39 deletions(-)
 rename src/app/components/divider/{divider.html => divider.component.html} (100%)
 rename src/app/components/divider/{divider.scss => divider.component.scss} (100%)
 create mode 100644 src/app/components/divider/divider.component.ts
 delete mode 100644 src/app/components/divider/divider.ts
 create mode 100644 src/app/pages/metadata/metadata-page.component.html
 create mode 100644 src/app/pages/metadata/metadata-page.component.scss
 create mode 100644 src/app/pages/metadata/metadata-page.component.ts
 create mode 100644 src/app/pages/settings/settings-page.component.html
 create mode 100644 src/app/pages/settings/settings-page.component.scss
 create mode 100644 src/app/pages/settings/settings-page.component.ts

diff --git a/src/app/app.html b/src/app/app.html
index c065c67..524c63f 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,7 +1,11 @@
 <div class="app-container">
   <header class="app-header">
     <h1>Common Cents</h1>
-    <h2>The common sense expense tracker.</h2>
+    <div class="app-navigation">
+      @for (link of navLinks(); track link) {
+        <a matButton [href]="link.href">{{ link.text }}</a>
+      }
+    </div>
     <app-divider />
   </header>
 
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5a89bba..a891794 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router';
 import { ExpensePage } from './pages/expenses/expense-page.component';
 import { HomePage } from './pages/home/home-page.component';
+import { MetadataPageComponent } from './pages/metadata/metadata-page.component';
+import { SettingsPageComponent } from './pages/settings/settings-page.component';
 
 export const routes: Routes = [
   {
@@ -10,5 +12,13 @@ export const routes: Routes = [
   {
     path: 'expenses',
     component: ExpensePage
+  },
+  {
+    path: 'metadata',
+    component: MetadataPageComponent
+  },
+  {
+    path: 'settings',
+    component: SettingsPageComponent
   }
 ];
diff --git a/src/app/app.scss b/src/app/app.scss
index 46d0307..330ac4b 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -14,19 +14,13 @@
 }
 
 h1 {
-  font-size: 3.125rem;
+  font-size: 2.5rem;
   line-height: 100%;
   letter-spacing: -0.125rem;
-  font-weight: 500;
+  font-weight: 400;
   margin: 0;
-  font-family: sans-serif;
 }
 
-h2 {
-  font-size: 1.2rem;
-  line-height: 100%;
-  font-weight: 500;
-  margin: 0;
-  font-family: sans-serif;
-  font-style: italic;
+.app-navigation {
+  display: flex;
 }
diff --git a/src/app/app.ts b/src/app/app.ts
index 68f4f4a..a9619ac 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,11 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { Divider } from './components/divider/divider';
+import { DividerComponent } from './components/divider/divider.component';
+import { MatButton } from '@angular/material/button';
+
+interface NavLink {
+  text: string;
+  href: string;
+}
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Divider],
+  imports: [RouterOutlet, DividerComponent, MatButton],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App { }
+export class App {
+  public navLinks = signal<NavLink[]>([
+    {
+      text: 'Home',
+      href: '/'
+    },
+    {
+      text: 'Expenses',
+      href: '/expenses'
+    },
+    {
+      text: 'Metadata',
+      href: '/metadata'
+    },
+    {
+      text: 'Settings',
+      href: '/settings'
+    }
+  ]);
+}
diff --git a/src/app/components/divider/divider.html b/src/app/components/divider/divider.component.html
similarity index 100%
rename from src/app/components/divider/divider.html
rename to src/app/components/divider/divider.component.html
diff --git a/src/app/components/divider/divider.scss b/src/app/components/divider/divider.component.scss
similarity index 100%
rename from src/app/components/divider/divider.scss
rename to src/app/components/divider/divider.component.scss
diff --git a/src/app/components/divider/divider.component.ts b/src/app/components/divider/divider.component.ts
new file mode 100644
index 0000000..1c18680
--- /dev/null
+++ b/src/app/components/divider/divider.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-divider',
+  imports: [],
+  templateUrl: './divider.component.html',
+  styleUrl: './divider.component.scss'
+})
+export class DividerComponent { }
diff --git a/src/app/components/divider/divider.ts b/src/app/components/divider/divider.ts
deleted file mode 100644
index fb197c5..0000000
--- a/src/app/components/divider/divider.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-divider',
-  imports: [],
-  templateUrl: './divider.html',
-  styleUrl: './divider.scss'
-})
-export class Divider { }
diff --git a/src/app/components/expense-list/expense-list.component.scss b/src/app/components/expense-list/expense-list.component.scss
index 1b125f4..f6d8b5f 100644
--- a/src/app/components/expense-list/expense-list.component.scss
+++ b/src/app/components/expense-list/expense-list.component.scss
@@ -12,9 +12,8 @@
   p {
     font-size: 1.8rem;
     line-height: 100%;
-    font-weight: 200;
+    font-weight: 400;
     margin: 0;
-    font-family: sans-serif;
   }
 
   app-divider {
diff --git a/src/app/components/expense-list/expense-list.component.ts b/src/app/components/expense-list/expense-list.component.ts
index 532559e..017435a 100644
--- a/src/app/components/expense-list/expense-list.component.ts
+++ b/src/app/components/expense-list/expense-list.component.ts
@@ -3,11 +3,11 @@ import { ExpenseService } from '../../services/expense.service';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import { ExpenseComponent } from '../expense/expense.component';
-import {Divider} from '../divider/divider';
+import { DividerComponent } from '../divider/divider.component';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [MatTableModule, MatCardModule, ExpenseComponent, Divider],
+  imports: [MatTableModule, MatCardModule, ExpenseComponent, DividerComponent],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss'
 })
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 94c5c02..326f0d3 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,7 +1,3 @@
 <div class="home-container">
-  <ul>
-    <li>
-      <a routerLink="expenses">ExpenseService</a>
-    </li>
-  </ul>
+  <h2>The common sense expense tracker.</h2>
 </div>
diff --git a/src/app/pages/home/home-page.component.scss b/src/app/pages/home/home-page.component.scss
index e69de29..0fcfa03 100644
--- a/src/app/pages/home/home-page.component.scss
+++ b/src/app/pages/home/home-page.component.scss
@@ -0,0 +1,7 @@
+h2 {
+  font-size: 1.3rem;
+  line-height: 100%;
+  font-weight: 500;
+  margin: 0;
+  font-family: sans-serif;
+}
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 724172f..012cfae 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -1,12 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-home',
-  imports: [
-    RouterLink
-  ],
+  imports: [],
   templateUrl: './home-page.component.html',
-  styleUrl: './home-page.component.scss',
+  styleUrl: './home-page.component.scss'
 })
 export class HomePage { }
diff --git a/src/app/pages/metadata/metadata-page.component.html b/src/app/pages/metadata/metadata-page.component.html
new file mode 100644
index 0000000..49ebd46
--- /dev/null
+++ b/src/app/pages/metadata/metadata-page.component.html
@@ -0,0 +1,3 @@
+<div class="metadata-container">
+  Metadata page
+</div>
diff --git a/src/app/pages/metadata/metadata-page.component.scss b/src/app/pages/metadata/metadata-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/metadata/metadata-page.component.ts b/src/app/pages/metadata/metadata-page.component.ts
new file mode 100644
index 0000000..778d92d
--- /dev/null
+++ b/src/app/pages/metadata/metadata-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-metadata',
+  imports: [],
+  templateUrl: './metadata-page.component.html',
+  styleUrl: './metadata-page.component.scss'
+})
+export class MetadataPageComponent { }
diff --git a/src/app/pages/settings/settings-page.component.html b/src/app/pages/settings/settings-page.component.html
new file mode 100644
index 0000000..9603e7f
--- /dev/null
+++ b/src/app/pages/settings/settings-page.component.html
@@ -0,0 +1,3 @@
+<div class="settings-container">
+  Settings page
+</div>
diff --git a/src/app/pages/settings/settings-page.component.scss b/src/app/pages/settings/settings-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/settings/settings-page.component.ts b/src/app/pages/settings/settings-page.component.ts
new file mode 100644
index 0000000..817e995
--- /dev/null
+++ b/src/app/pages/settings/settings-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  imports: [],
+  templateUrl: './settings-page.component.html',
+  styleUrl: './settings-page.component.scss'
+})
+export class SettingsPageComponent { }
diff --git a/src/styles.scss b/src/styles.scss
index ac47f6e..fe32d0a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,7 +10,7 @@ html {
   height: 100%;
   @include mat.theme((
     color: (
-      primary: mat.$cyan-palette,
+      primary: mat.$azure-palette,
       tertiary: mat.$orange-palette,
     ),
     typography: Roboto,
-- 
2.47.3


From a0b1ed8d07dc8251ffb42a0f55f600ce2d664904 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Mon, 23 Feb 2026 23:21:50 -0600
Subject: [PATCH 02/18] add metadata components

---
 .../categories/categories.component.html      |  3 ++
 .../categories/categories.component.scss      |  0
 .../categories/categories.component.ts        |  9 +++++
 .../merchants/merchants.component.html        |  3 ++
 .../merchants/merchants.component.scss        |  0
 .../metadata/merchants/merchants.component.ts |  9 +++++
 .../metadata/metadata.component.html          | 36 +++++++++++++++++++
 .../metadata/metadata.component.scss          |  5 +++
 .../components/metadata/metadata.component.ts | 22 ++++++++++++
 .../metadata/tags/tags.component.html         |  3 ++
 .../metadata/tags/tags.component.scss         |  0
 .../metadata/tags/tags.component.ts           |  9 +++++
 .../expenses/expense-page.component.html      |  2 +-
 .../expenses/expense-page.component.scss      |  2 +-
 .../pages/expenses/expense-page.component.ts  |  2 +-
 src/app/pages/home/home-page.component.html   |  2 +-
 src/app/pages/home/home-page.component.ts     |  2 +-
 .../metadata/metadata-page.component.html     |  4 +--
 .../pages/metadata/metadata-page.component.ts |  7 ++--
 .../settings/settings-page.component.html     |  2 +-
 .../pages/settings/settings-page.component.ts |  2 +-
 21 files changed, 113 insertions(+), 11 deletions(-)
 create mode 100644 src/app/components/metadata/categories/categories.component.html
 create mode 100644 src/app/components/metadata/categories/categories.component.scss
 create mode 100644 src/app/components/metadata/categories/categories.component.ts
 create mode 100644 src/app/components/metadata/merchants/merchants.component.html
 create mode 100644 src/app/components/metadata/merchants/merchants.component.scss
 create mode 100644 src/app/components/metadata/merchants/merchants.component.ts
 create mode 100644 src/app/components/metadata/metadata.component.html
 create mode 100644 src/app/components/metadata/metadata.component.scss
 create mode 100644 src/app/components/metadata/metadata.component.ts
 create mode 100644 src/app/components/metadata/tags/tags.component.html
 create mode 100644 src/app/components/metadata/tags/tags.component.scss
 create mode 100644 src/app/components/metadata/tags/tags.component.ts

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
new file mode 100644
index 0000000..a9e5079
--- /dev/null
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -0,0 +1,3 @@
+<div class="categories-container">
+  Categories Component
+</div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
new file mode 100644
index 0000000..4450a3e
--- /dev/null
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-categories',
+  imports: [],
+  templateUrl: './categories.component.html',
+  styleUrl: './categories.component.scss'
+})
+export class CategoriesComponent { }
diff --git a/src/app/components/metadata/merchants/merchants.component.html b/src/app/components/metadata/merchants/merchants.component.html
new file mode 100644
index 0000000..c956486
--- /dev/null
+++ b/src/app/components/metadata/merchants/merchants.component.html
@@ -0,0 +1,3 @@
+<div class="merchants-container">
+  Merchants Component
+</div>
diff --git a/src/app/components/metadata/merchants/merchants.component.scss b/src/app/components/metadata/merchants/merchants.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/metadata/merchants/merchants.component.ts b/src/app/components/metadata/merchants/merchants.component.ts
new file mode 100644
index 0000000..b987ac5
--- /dev/null
+++ b/src/app/components/metadata/merchants/merchants.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-merchants',
+  imports: [],
+  templateUrl: './merchants.component.html',
+  styleUrl: './merchants.component.scss'
+})
+export class MerchantsComponent { }
diff --git a/src/app/components/metadata/metadata.component.html b/src/app/components/metadata/metadata.component.html
new file mode 100644
index 0000000..889039c
--- /dev/null
+++ b/src/app/components/metadata/metadata.component.html
@@ -0,0 +1,36 @@
+<div class="metadata-container">
+  <mat-tab-group>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="metadata-tab">
+          <p>Categories</p>
+          <mat-icon class="example-tab-icon">ballot</mat-icon>
+        </div>
+      </ng-template>
+
+      <app-categories />
+    </mat-tab>
+
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="metadata-tab">
+          <p>Merchants</p>
+          <mat-icon class="example-tab-icon">shopping_cart</mat-icon>
+        </div>
+      </ng-template>
+
+      <app-merchants />
+    </mat-tab>
+
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="metadata-tab">
+          <p>Tags</p>
+          <mat-icon class="example-tab-icon">label</mat-icon>
+        </div>
+      </ng-template>
+
+      <app-tags />
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/src/app/components/metadata/metadata.component.scss b/src/app/components/metadata/metadata.component.scss
new file mode 100644
index 0000000..9258375
--- /dev/null
+++ b/src/app/components/metadata/metadata.component.scss
@@ -0,0 +1,5 @@
+.metadata-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/src/app/components/metadata/metadata.component.ts b/src/app/components/metadata/metadata.component.ts
new file mode 100644
index 0000000..59471c5
--- /dev/null
+++ b/src/app/components/metadata/metadata.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { MatTab, MatTabGroup, MatTabLabel } from '@angular/material/tabs';
+import { MatIcon } from '@angular/material/icon';
+import { TagsComponent } from './tags/tags.component';
+import { MerchantsComponent } from './merchants/merchants.component';
+import { CategoriesComponent } from './categories/categories.component';
+
+@Component({
+  selector: 'app-metadata',
+  imports: [
+    MatTabGroup,
+    MatTab,
+    MatIcon,
+    MatTabLabel,
+    TagsComponent,
+    MerchantsComponent,
+    CategoriesComponent
+  ],
+  templateUrl: './metadata.component.html',
+  styleUrl: './metadata.component.scss'
+})
+export class MetadataComponent { }
diff --git a/src/app/components/metadata/tags/tags.component.html b/src/app/components/metadata/tags/tags.component.html
new file mode 100644
index 0000000..73248d6
--- /dev/null
+++ b/src/app/components/metadata/tags/tags.component.html
@@ -0,0 +1,3 @@
+<div class="tags-container">
+  Tags Component
+</div>
diff --git a/src/app/components/metadata/tags/tags.component.scss b/src/app/components/metadata/tags/tags.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/metadata/tags/tags.component.ts b/src/app/components/metadata/tags/tags.component.ts
new file mode 100644
index 0000000..f1d7557
--- /dev/null
+++ b/src/app/components/metadata/tags/tags.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tags',
+  imports: [],
+  templateUrl: './tags.component.html',
+  styleUrl: './tags.component.scss'
+})
+export class TagsComponent { }
diff --git a/src/app/pages/expenses/expense-page.component.html b/src/app/pages/expenses/expense-page.component.html
index 2add09d..de00fc6 100644
--- a/src/app/pages/expenses/expense-page.component.html
+++ b/src/app/pages/expenses/expense-page.component.html
@@ -1,4 +1,4 @@
-<div class="expenses-container">
+<div class="expenses-page-container">
   <app-expense />
   <app-expense-list />
 </div>
diff --git a/src/app/pages/expenses/expense-page.component.scss b/src/app/pages/expenses/expense-page.component.scss
index b35508b..30bf02c 100644
--- a/src/app/pages/expenses/expense-page.component.scss
+++ b/src/app/pages/expenses/expense-page.component.scss
@@ -1,4 +1,4 @@
-.expenses-container {
+.expenses-page-container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
diff --git a/src/app/pages/expenses/expense-page.component.ts b/src/app/pages/expenses/expense-page.component.ts
index 18f24e0..542a3fc 100644
--- a/src/app/pages/expenses/expense-page.component.ts
+++ b/src/app/pages/expenses/expense-page.component.ts
@@ -3,7 +3,7 @@ import { ExpenseListComponent } from '../../components/expense-list/expense-list
 import { ExpenseComponent } from '../../components/expense/expense.component';
 
 @Component({
-  selector: 'app-expenses',
+  selector: 'app-expenses-page',
   imports: [
     ExpenseListComponent,
     ExpenseComponent
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 326f0d3..19cf282 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,3 +1,3 @@
-<div class="home-container">
+<div class="home-page-container">
   <h2>The common sense expense tracker.</h2>
 </div>
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 012cfae..e9a654d 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-home',
+  selector: 'app-home-page',
   imports: [],
   templateUrl: './home-page.component.html',
   styleUrl: './home-page.component.scss'
diff --git a/src/app/pages/metadata/metadata-page.component.html b/src/app/pages/metadata/metadata-page.component.html
index 49ebd46..61dae30 100644
--- a/src/app/pages/metadata/metadata-page.component.html
+++ b/src/app/pages/metadata/metadata-page.component.html
@@ -1,3 +1,3 @@
-<div class="metadata-container">
-  Metadata page
+<div class="metadata-page-container">
+  <app-metadata />
 </div>
diff --git a/src/app/pages/metadata/metadata-page.component.ts b/src/app/pages/metadata/metadata-page.component.ts
index 778d92d..418c735 100644
--- a/src/app/pages/metadata/metadata-page.component.ts
+++ b/src/app/pages/metadata/metadata-page.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { MetadataComponent } from '../../components/metadata/metadata.component';
 
 @Component({
-  selector: 'app-metadata',
-  imports: [],
+  selector: 'app-metadata-page',
+  imports: [
+    MetadataComponent
+  ],
   templateUrl: './metadata-page.component.html',
   styleUrl: './metadata-page.component.scss'
 })
diff --git a/src/app/pages/settings/settings-page.component.html b/src/app/pages/settings/settings-page.component.html
index 9603e7f..4119953 100644
--- a/src/app/pages/settings/settings-page.component.html
+++ b/src/app/pages/settings/settings-page.component.html
@@ -1,3 +1,3 @@
-<div class="settings-container">
+<div class="settings-page-container">
   Settings page
 </div>
diff --git a/src/app/pages/settings/settings-page.component.ts b/src/app/pages/settings/settings-page.component.ts
index 817e995..dc4e2f1 100644
--- a/src/app/pages/settings/settings-page.component.ts
+++ b/src/app/pages/settings/settings-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-settings',
+  selector: 'app-settings-page',
   imports: [],
   templateUrl: './settings-page.component.html',
   styleUrl: './settings-page.component.scss'
-- 
2.47.3


From 71e1566f203a657121a89868edf27d310188da5b Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Tue, 24 Feb 2026 13:49:43 -0600
Subject: [PATCH 03/18] added style variables to reduce duplication

---
 angular.json                                         |  7 ++++++-
 .../expense/expense-form/expense-form.component.scss |  6 ++++--
 src/app/components/expense/expense.component.scss    |  4 +++-
 src/app/components/metadata/metadata.component.html  |  6 +++---
 src/app/components/metadata/metadata.component.scss  | 12 ++++++++++++
 src/assets/styles/variables.scss                     |  2 ++
 6 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/styles/variables.scss

diff --git a/angular.json b/angular.json
index 0b73397..3ed4374 100644
--- a/angular.json
+++ b/angular.json
@@ -31,7 +31,12 @@
             ],
             "styles": [
               "src/styles.scss"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/assets/styles"
+              ]
+            }
           },
           "configurations": {
             "production": {
diff --git a/src/app/components/expense/expense-form/expense-form.component.scss b/src/app/components/expense/expense-form/expense-form.component.scss
index 2e8b1c2..32d44bc 100644
--- a/src/app/components/expense/expense-form/expense-form.component.scss
+++ b/src/app/components/expense/expense-form/expense-form.component.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 .expense-form-container {
   display: grid;
 
@@ -6,14 +8,14 @@
   }
 }
 
-@media (min-width: 550px) {
+@media (min-width: variables.$mid-screen) {
   .expense-form-container {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
 }
 
-@media (min-width: 800px) {
+@media (min-width: variables.$wide-screen) {
   .expense-form-container {
     grid-template-columns: 1fr 1fr 1fr;
   }
diff --git a/src/app/components/expense/expense.component.scss b/src/app/components/expense/expense.component.scss
index 8a9e4cf..be80510 100644
--- a/src/app/components/expense/expense.component.scss
+++ b/src/app/components/expense/expense.component.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 .expense-container {
   width: 100%;
   display: flex;
@@ -5,7 +7,7 @@
   align-items: center;
 
   mat-card {
-    max-width: 800px;
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }
diff --git a/src/app/components/metadata/metadata.component.html b/src/app/components/metadata/metadata.component.html
index 889039c..20b8499 100644
--- a/src/app/components/metadata/metadata.component.html
+++ b/src/app/components/metadata/metadata.component.html
@@ -3,7 +3,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         <div class="metadata-tab">
-          <p>Categories</p>
+          <div class="tab-text">Categories</div>
           <mat-icon class="example-tab-icon">ballot</mat-icon>
         </div>
       </ng-template>
@@ -14,7 +14,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         <div class="metadata-tab">
-          <p>Merchants</p>
+          <div class="tab-text">Merchants</div>
           <mat-icon class="example-tab-icon">shopping_cart</mat-icon>
         </div>
       </ng-template>
@@ -25,7 +25,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         <div class="metadata-tab">
-          <p>Tags</p>
+          <div class="tab-text">Tags</div>
           <mat-icon class="example-tab-icon">label</mat-icon>
         </div>
       </ng-template>
diff --git a/src/app/components/metadata/metadata.component.scss b/src/app/components/metadata/metadata.component.scss
index 9258375..3d2c434 100644
--- a/src/app/components/metadata/metadata.component.scss
+++ b/src/app/components/metadata/metadata.component.scss
@@ -1,5 +1,17 @@
+@use "variables";
+
 .metadata-tab {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
+
+.tab-text {
+  display: none;
+}
+
+@media (min-width: variables.$mid-screen) {
+  .tab-text {
+    display: unset;
+  }
+}
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
new file mode 100644
index 0000000..7d6130d
--- /dev/null
+++ b/src/assets/styles/variables.scss
@@ -0,0 +1,2 @@
+$mid-screen: 500px;
+$wide-screen: 800px;
-- 
2.47.3


From 20dbbbf9562f2973a8ff0196f2c3b9f418898b98 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Tue, 24 Feb 2026 14:17:59 -0600
Subject: [PATCH 04/18] better icons

---
 src/app/components/metadata/metadata.component.html | 6 +++---
 src/index.html                                      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/metadata/metadata.component.html b/src/app/components/metadata/metadata.component.html
index 20b8499..60613e9 100644
--- a/src/app/components/metadata/metadata.component.html
+++ b/src/app/components/metadata/metadata.component.html
@@ -4,7 +4,7 @@
       <ng-template mat-tab-label>
         <div class="metadata-tab">
           <div class="tab-text">Categories</div>
-          <mat-icon class="example-tab-icon">ballot</mat-icon>
+          <mat-icon class="material-icons-outlined">dashboard</mat-icon>
         </div>
       </ng-template>
 
@@ -15,7 +15,7 @@
       <ng-template mat-tab-label>
         <div class="metadata-tab">
           <div class="tab-text">Merchants</div>
-          <mat-icon class="example-tab-icon">shopping_cart</mat-icon>
+          <mat-icon class="material-icons-outlined">shopping_cart</mat-icon>
         </div>
       </ng-template>
 
@@ -26,7 +26,7 @@
       <ng-template mat-tab-label>
         <div class="metadata-tab">
           <div class="tab-text">Tags</div>
-          <mat-icon class="example-tab-icon">label</mat-icon>
+          <mat-icon class="material-icons-outlined">sell</mat-icon>
         </div>
       </ng-template>
 
diff --git a/src/index.html b/src/index.html
index 66e56cd..9dbd9e8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,7 +13,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
-- 
2.47.3


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 05/18] 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) { }
+}
-- 
2.47.3


From 4a84b70ed6e1dcaa9797a29c1c5274bae359b45d Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 15:48:48 -0600
Subject: [PATCH 06/18] fixed updating expense

---
 .../expense-form/expense-form.component.ts    | 13 ++++--
 .../components/expense/expense.component.ts   | 16 +++----
 .../categories/categories.component.html      | 43 +++++++++++++++----
 .../categories/categories.component.scss      | 20 +++++++--
 .../categories/categories.component.ts        | 29 +++++++++++--
 src/app/services/expense.service.ts           |  8 ++--
 6 files changed, 98 insertions(+), 31 deletions(-)

diff --git a/src/app/components/expense/expense-form/expense-form.component.ts b/src/app/components/expense/expense-form/expense-form.component.ts
index ceca49c..677275c 100644
--- a/src/app/components/expense/expense-form/expense-form.component.ts
+++ b/src/app/components/expense/expense-form/expense-form.component.ts
@@ -48,13 +48,18 @@ export class ExpenseFormComponent implements OnInit {
               private readonly merchantService: MerchantService,
               private readonly tagService: TagService) {
     effect(() => {
+      const form = this.form().value();
       const valid = this.formValid();
       const dirty = this.formDirty();
-      const value = this.form().value();
+      const value = {
+        ...form,
+        merchant: Boolean(form.merchant) ? form.merchant : null,
+        note: Boolean(form.note) ? form.note : null
+      };
 
       this.valid.emit(valid);
       this.dirty.emit(dirty);
-      this.value.emit(value);
+      this.value.emit(value as ExpenseForm);
       this.lastDate.set(value.date);
     });
   }
@@ -98,8 +103,8 @@ export class ExpenseFormComponent implements OnInit {
         date: new Date(year, month, day),
         cents: expense.cents,
         category: expense.category,
-        merchant: expense.merchant ?? {},
-        note: expense.note ?? '',
+        merchant: expense.merchant ?? null,
+        note: expense.note,
         tags: expense.tags ?? []
       } as ExpenseForm;
     }
diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts
index 51cbdda..228b0db 100644
--- a/src/app/components/expense/expense.component.ts
+++ b/src/app/components/expense/expense.component.ts
@@ -38,10 +38,10 @@ export class ExpenseComponent {
     const postExpense: CreateExpense = {
       date: this.dateToPlainDate(form.date),
       cents: form.cents,
-      categoryId: form.category.id,
-      note: !!form.note ? form.note : undefined,
-      merchantId: !!form.merchant ? form.merchant.id : undefined,
-      tagIds: form.tags.map(tag => tag.id)
+      category: form.category,
+      merchant: form.merchant,
+      note: form.note,
+      tags: form.tags
     };
     this.savingExpense.set(true);
     const snackId = this.snackBar.staticBar('Tracking new expense...');
@@ -70,10 +70,10 @@ export class ExpenseComponent {
       id: this.expense()!.id,
       date: this.dateToPlainDate(form.date),
       cents: form.cents,
-      categoryId: form.category.id,
-      note: !!form.note ? form.note : undefined,
-      merchantId: !!form.merchant ? form.merchant.id : undefined,
-      tagIds: form.tags.map(tag => tag.id)
+      category: form.category,
+      merchant: form.merchant,
+      note: form.note,
+      tags: form.tags
     };
     this.savingExpense.set(true);
     const snackId = this.snackBar.staticBar('Updating expense...');
diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 9534c08..366e582 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -1,17 +1,44 @@
 <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">
-    @for (category of categories(); track category.id) {
-      <div>{{ category.name }}</div>
-    }
-    @if (!categories().length) {
-      <div class="category-list-empty">
-        No categories to display
-      </div>
-    }
+<!--    <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>-->
   </div>
 </div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 85a72d5..2e129f2 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -21,8 +21,20 @@
   }
 }
 
-.category-list {
-  display: grid;
-  gap: 1rem;
-  justify-content: center;
+//.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;
 }
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index bb052b5..c3eb6e1 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -1,11 +1,24 @@
-import { Component, computed } from '@angular/core';
+import {Component, computed, effect, model} 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
+    DividerComponent,
+    MatInput,
+    MatFormField,
+    MatLabel,
+    FormsModule,
+    // MatList,
+    // MatListItem,
+    MatIconButton,
+    MatIcon
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
@@ -13,5 +26,15 @@ import { DividerComponent } from '../../divider/divider.component';
 export class CategoriesComponent {
   protected categories = computed(() => this.categoryService.categories());
 
-  public constructor(private readonly categoryService: CategoryService) { }
+  public newCategory = model<string>('');
+
+  public constructor(private readonly categoryService: CategoryService) {
+    effect(() => {
+      console.log(this.newCategory());
+    });
+  }
+
+  public addClick(): void {
+    console.log('add clicked');
+  }
 }
diff --git a/src/app/services/expense.service.ts b/src/app/services/expense.service.ts
index 243c53b..5c20794 100644
--- a/src/app/services/expense.service.ts
+++ b/src/app/services/expense.service.ts
@@ -38,18 +38,18 @@ export interface Expense {
   date: Date;
   cents: number;
   category: Category;
-  note?: string;
   merchant?: Merchant;
+  note?: string;
   tags: Tag[];
 }
 
 export interface CreateExpense {
   date: Temporal.PlainDate;
   cents: number;
-  categoryId: string;
+  category: Category;
+  merchant?: Merchant;
   note?: string;
-  merchantId?: string;
-  tagIds?: string[];
+  tags: Tag[];
 }
 
 export interface UpdateExpense extends CreateExpense {
-- 
2.47.3


From 837cde7bd6eccb20ad646e27343e4419769b4e0a Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 15:57:12 -0600
Subject: [PATCH 07/18] resetting category component to baseline

---
 .../categories/categories.component.html      | 43 ++++---------------
 .../categories/categories.component.scss      | 20 ++-------
 .../categories/categories.component.ts        | 27 +-----------
 3 files changed, 14 insertions(+), 76 deletions(-)

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 366e582..9534c08 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/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>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 2e129f2..85a72d5 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/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;
 }
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index c3eb6e1..3028dbd 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/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) { }
 }
-- 
2.47.3


From 1d1a7893e8584965afa0b8eb928cd617a8384325 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:01:05 -0600
Subject: [PATCH 08/18] renamed settings page to reports

---
 src/app/app.routes.ts                                    | 6 +++---
 src/app/app.ts                                           | 4 ++--
 src/app/pages/reports/reports-page.component.html        | 3 +++
 .../reports-page.component.scss}                         | 0
 src/app/pages/reports/reports-page.component.ts          | 9 +++++++++
 src/app/pages/settings/settings-page.component.html      | 3 ---
 src/app/pages/settings/settings-page.component.ts        | 9 ---------
 7 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 src/app/pages/reports/reports-page.component.html
 rename src/app/pages/{settings/settings-page.component.scss => reports/reports-page.component.scss} (100%)
 create mode 100644 src/app/pages/reports/reports-page.component.ts
 delete mode 100644 src/app/pages/settings/settings-page.component.html
 delete mode 100644 src/app/pages/settings/settings-page.component.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a891794..69fb40b 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
 import { ExpensePage } from './pages/expenses/expense-page.component';
 import { HomePage } from './pages/home/home-page.component';
 import { MetadataPageComponent } from './pages/metadata/metadata-page.component';
-import { SettingsPageComponent } from './pages/settings/settings-page.component';
+import { ReportsPageComponent } from './pages/reports/reports-page.component';
 
 export const routes: Routes = [
   {
@@ -18,7 +18,7 @@ export const routes: Routes = [
     component: MetadataPageComponent
   },
   {
-    path: 'settings',
-    component: SettingsPageComponent
+    path: 'reports',
+    component: ReportsPageComponent
   }
 ];
diff --git a/src/app/app.ts b/src/app/app.ts
index a9619ac..9f8339a 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -29,8 +29,8 @@ export class App {
       href: '/metadata'
     },
     {
-      text: 'Settings',
-      href: '/settings'
+      text: 'Reports',
+      href: '/reports'
     }
   ]);
 }
diff --git a/src/app/pages/reports/reports-page.component.html b/src/app/pages/reports/reports-page.component.html
new file mode 100644
index 0000000..cbc6bbb
--- /dev/null
+++ b/src/app/pages/reports/reports-page.component.html
@@ -0,0 +1,3 @@
+<div class="reports-page-container">
+  Reports page
+</div>
diff --git a/src/app/pages/settings/settings-page.component.scss b/src/app/pages/reports/reports-page.component.scss
similarity index 100%
rename from src/app/pages/settings/settings-page.component.scss
rename to src/app/pages/reports/reports-page.component.scss
diff --git a/src/app/pages/reports/reports-page.component.ts b/src/app/pages/reports/reports-page.component.ts
new file mode 100644
index 0000000..e0fc9e4
--- /dev/null
+++ b/src/app/pages/reports/reports-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-reports-page',
+  imports: [],
+  templateUrl: './reports-page.component.html',
+  styleUrl: './reports-page.component.scss'
+})
+export class ReportsPageComponent { }
diff --git a/src/app/pages/settings/settings-page.component.html b/src/app/pages/settings/settings-page.component.html
deleted file mode 100644
index 4119953..0000000
--- a/src/app/pages/settings/settings-page.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="settings-page-container">
-  Settings page
-</div>
diff --git a/src/app/pages/settings/settings-page.component.ts b/src/app/pages/settings/settings-page.component.ts
deleted file mode 100644
index dc4e2f1..0000000
--- a/src/app/pages/settings/settings-page.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-settings-page',
-  imports: [],
-  templateUrl: './settings-page.component.html',
-  styleUrl: './settings-page.component.scss'
-})
-export class SettingsPageComponent { }
-- 
2.47.3


From f71dd5b315bef265eacdcc83e19d6760ecf8208a Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:15:42 -0600
Subject: [PATCH 09/18] implement mat card for categories for consistency

---
 .../expense-list/expense-list.component.scss  |  2 +-
 .../categories/categories.component.html      | 25 +++++++++----------
 .../categories/categories.component.scss      | 25 ++++---------------
 .../categories/categories.component.ts        |  4 +--
 4 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/src/app/components/expense-list/expense-list.component.scss b/src/app/components/expense-list/expense-list.component.scss
index f6d8b5f..99f5d4f 100644
--- a/src/app/components/expense-list/expense-list.component.scss
+++ b/src/app/components/expense-list/expense-list.component.scss
@@ -24,5 +24,5 @@
 .expense-list {
   display: grid;
   gap: 1rem;
-  justify-content: center;
+  justify-content: stretch;
 }
diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 9534c08..3917051 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -1,17 +1,16 @@
 <div class="categories-container">
-  <div class="category-list-header">
-    <p>Categories</p>
-    <app-divider />
-  </div>
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>Categories</mat-card-title>
+    </mat-card-header>
 
-  <div class="category-list">
-    @for (category of categories(); track category.id) {
-      <div>{{ category.name }}</div>
-    }
-    @if (!categories().length) {
-      <div class="category-list-empty">
+    <mat-card-content>
+      @for (category of categories(); track category.id) {
+        {{ category.name }}
+      }
+      @if (!categories().length) {
         No categories to display
-      </div>
-    }
-  </div>
+      }
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 85a72d5..7faa374 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -1,28 +1,13 @@
-.categories-container {
-  display: grid;
-  gap: 1rem;
-}
+@use "variables";
 
-.category-list-header {
-  padding-top: 1rem;
+.categories-container {
+  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  p {
-    font-size: 1.8rem;
-    line-height: 100%;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  app-divider {
+  mat-card {
+    max-width: variables.$wide-screen;
     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 3028dbd..ae44c8b 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -1,11 +1,11 @@
 import { Component, computed } from '@angular/core';
 import { CategoryService } from '../../../services/category.service';
-import { DividerComponent } from '../../divider/divider.component';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-categories',
   imports: [
-    DividerComponent,
+    MatCardModule
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
-- 
2.47.3


From 759086f7c53b0d00980fe445afe2fa58a977e861 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:19:59 -0600
Subject: [PATCH 10/18] basic card content formatting

---
 .../categories/categories.component.html       | 18 ++++++++++++------
 .../categories/categories.component.scss       |  6 ++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 3917051..d791af4 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -5,12 +5,18 @@
     </mat-card-header>
 
     <mat-card-content>
-      @for (category of categories(); track category.id) {
-        {{ category.name }}
-      }
-      @if (!categories().length) {
-        No categories to display
-      }
+      <div class="category-list">
+        @for (category of categories(); track category.id) {
+          <div>
+            {{ category.name }}
+          </div>
+        }
+        @if (!categories().length) {
+          <div>
+            No categories to display
+          </div>
+        }
+      </div>
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 7faa374..910b9bc 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -11,3 +11,9 @@
     width: 100%;
   }
 }
+
+.category-list {
+  padding-top: 1rem;
+  display: grid;
+  gap: 0.5rem;
+}
-- 
2.47.3


From 2c6d0c1d0cae9ca4cc5d77f851409bf63820f157 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:33:19 -0600
Subject: [PATCH 11/18] building out category form

---
 .../metadata/categories/categories.component.html          | 7 +++++--
 .../metadata/categories/categories.component.scss          | 7 ++++++-
 .../components/metadata/categories/categories.component.ts | 6 +++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index d791af4..09b6480 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/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) {
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 910b9bc..f6161f0 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/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;
 }
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index ae44c8b..4b55827 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/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'
-- 
2.47.3


From 5f3dabb8b72f11fae54a0eb963eafaa37dffbbf1 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 10:50:16 -0600
Subject: [PATCH 12/18] making metadata form component

---
 .../categories/categories.component.html      |  7 +----
 .../categories/categories.component.scss      |  6 -----
 .../categories/categories.component.ts        | 12 +++++----
 .../metadata-form.component.html              |  7 +++++
 .../metadata-form.component.scss              |  5 ++++
 .../metadata-form/metadata-form.component.ts  | 27 +++++++++++++++++++
 6 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 src/app/components/metadata/metadata-form/metadata-form.component.html
 create mode 100644 src/app/components/metadata/metadata-form/metadata-form.component.scss
 create mode 100644 src/app/components/metadata/metadata-form/metadata-form.component.ts

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 09b6480..3d34373 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -7,12 +7,7 @@
     <mat-card-content>
       <div class="category-list">
         @for (category of categories(); track category.id) {
-<!--          TODO: Convert to form...-->
-          <div class="category-item">
-            <div>{{ category.name }}</div>
-
-            <button matIconButton><mat-icon>edit</mat-icon></button>
-          </div>
+          <app-metadata-form [metadata]="category" (newMetaData)="updateCategory($event)" />
         }
         @if (!categories().length) {
           <div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index f6161f0..06fb27c 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -16,9 +16,3 @@
   padding-top: 1rem;
   display: grid;
 }
-
-.category-item {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 4b55827..633212b 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -1,15 +1,13 @@
 import { Component, computed } from '@angular/core';
-import { CategoryService } from '../../../services/category.service';
+import { Category, CategoryService } from '../../../services/category.service';
 import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import { MetadataFormComponent } from '../metadata-form/metadata-form.component';
 
 @Component({
   selector: 'app-categories',
   imports: [
     MatCardModule,
-    MatIconModule,
-    MatButtonModule
+    MetadataFormComponent
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
@@ -18,4 +16,8 @@ export class CategoriesComponent {
   protected categories = computed(() => this.categoryService.categories());
 
   public constructor(private readonly categoryService: CategoryService) { }
+
+  public async updateCategory(category: Category): Promise<void> {
+    console.log('updated category', category); // TODO: Remove
+  }
 }
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.html b/src/app/components/metadata/metadata-form/metadata-form.component.html
new file mode 100644
index 0000000..b89bc21
--- /dev/null
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.html
@@ -0,0 +1,7 @@
+<div class="metadata-form-container">
+  <div>{{ metadata().name }}</div>
+
+  <button matIconButton>
+    <mat-icon>edit</mat-icon>
+  </button>
+</div>
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.scss b/src/app/components/metadata/metadata-form/metadata-form.component.scss
new file mode 100644
index 0000000..fc26b52
--- /dev/null
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.scss
@@ -0,0 +1,5 @@
+.metadata-form-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.ts b/src/app/components/metadata/metadata-form/metadata-form.component.ts
new file mode 100644
index 0000000..5cf848f
--- /dev/null
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.ts
@@ -0,0 +1,27 @@
+import {Component, input, output, signal} from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+interface MetaData {
+  id: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-metadata-form',
+  imports: [
+    MatCardModule,
+    MatIconModule,
+    MatButtonModule
+  ],
+  templateUrl: './metadata-form.component.html',
+  styleUrl: './metadata-form.component.scss'
+})
+export class MetadataFormComponent {
+  public metadata = input.required<MetaData>();
+
+  public newMetaData = output<MetaData>();
+
+  public editing = signal(false);
+}
-- 
2.47.3


From 5c48a6f4e762c4a4ef73522a93dc49d385611f70 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 11:22:09 -0600
Subject: [PATCH 13/18] added metadata form validation

---
 .../metadata-form.component.html              | 26 +++++++++++--
 .../metadata-form.component.scss              | 11 ++++++
 .../metadata-form/metadata-form.component.ts  | 38 ++++++++++++++++---
 3 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.html b/src/app/components/metadata/metadata-form/metadata-form.component.html
index b89bc21..a93b42e 100644
--- a/src/app/components/metadata/metadata-form/metadata-form.component.html
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.html
@@ -1,7 +1,25 @@
 <div class="metadata-form-container">
-  <div>{{ metadata().name }}</div>
+  @if (!editing()) {
+    <div>{{ metadata().name }}</div>
 
-  <button matIconButton>
-    <mat-icon>edit</mat-icon>
-  </button>
+    <button matIconButton (click)="editing.set(true)">
+      <mat-icon>edit</mat-icon>
+    </button>
+  } @else {
+    <div class="metadata-edit">
+      <mat-form-field appearance="outline">
+        <input type="text" matInput [(ngModel)]="name">
+      </mat-form-field>
+
+      <div class="metadata-edit-buttons">
+        <button matIconButton (click)="reset()">
+          <mat-icon>undo</mat-icon>
+        </button>
+
+        <button matIconButton (click)="saveMetaData()" [disabled]="!nameValid()">
+          <mat-icon>save</mat-icon>
+        </button>
+      </div>
+    </div>
+  }
 </div>
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.scss b/src/app/components/metadata/metadata-form/metadata-form.component.scss
index fc26b52..102e1f0 100644
--- a/src/app/components/metadata/metadata-form/metadata-form.component.scss
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.scss
@@ -3,3 +3,14 @@
   gap: 0.5rem;
   align-items: center;
 }
+
+.metadata-edit {
+  display: flex;
+  gap: 0.5rem;
+
+  .metadata-edit-buttons {
+    padding-top: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+}
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.ts b/src/app/components/metadata/metadata-form/metadata-form.component.ts
index 5cf848f..1be9daa 100644
--- a/src/app/components/metadata/metadata-form/metadata-form.component.ts
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.ts
@@ -1,7 +1,8 @@
-import {Component, input, output, signal} from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
+import { Component, computed, input, model, OnInit, output, signal } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatFormField, MatInput } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
 
 interface MetaData {
   id: string;
@@ -11,17 +12,42 @@ interface MetaData {
 @Component({
   selector: 'app-metadata-form',
   imports: [
-    MatCardModule,
     MatIconModule,
-    MatButtonModule
+    MatButtonModule,
+    MatFormField,
+    MatInput,
+    FormsModule
   ],
   templateUrl: './metadata-form.component.html',
   styleUrl: './metadata-form.component.scss'
 })
-export class MetadataFormComponent {
+export class MetadataFormComponent implements OnInit {
   public metadata = input.required<MetaData>();
-
   public newMetaData = output<MetaData>();
 
+  public name = model('');
+  public nameValid = computed(() => {
+    const existingName = this.metadata().name;
+    const newName = this.name();
+
+    return !!newName && newName !== existingName;
+  });
   public editing = signal(false);
+
+  public ngOnInit(): void {
+    this.reset();
+  }
+
+  public saveMetaData(): void {
+    this.editing.set(false);
+    this.newMetaData.emit({
+      ...this.metadata(),
+      name: this.name()
+    });
+  }
+
+  public reset(): void {
+    this.editing.set(false);
+    this.name.set(this.metadata().name);
+  }
 }
-- 
2.47.3


From dbb4c1ed38e74beeeffc60a9b5339d5744024b8e Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 11:35:18 -0600
Subject: [PATCH 14/18] support for editing category

---
 .../metadata/categories/categories.component.ts           | 3 ++-
 src/app/services/category.service.ts                      | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 633212b..580b803 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -18,6 +18,7 @@ export class CategoriesComponent {
   public constructor(private readonly categoryService: CategoryService) { }
 
   public async updateCategory(category: Category): Promise<void> {
-    console.log('updated category', category); // TODO: Remove
+    await this.categoryService.updateCategory(category);
+    await this.categoryService.fetchCategories();
   }
 }
diff --git a/src/app/services/category.service.ts b/src/app/services/category.service.ts
index 9c2da93..ede6e17 100644
--- a/src/app/services/category.service.ts
+++ b/src/app/services/category.service.ts
@@ -16,9 +16,17 @@ export class CategoryService {
   public async fetchCategories(): Promise<void> {
     this.internalCategories.set(await this.http.get<Category[]>(this.categoryPath));
   }
+
+  public async updateCategory(category: Category): Promise<Category> {
+    return await this.http.put<Category>(this.categoryPath, category);
+  }
 }
 
 export interface Category {
   id: string;
   name: string;
 }
+
+export interface CreateCategory {
+  name: string;
+}
-- 
2.47.3


From a8548ce2f4e265eb6ddf32cf5691251d59ad2630 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 12:03:41 -0600
Subject: [PATCH 15/18] added new metadata to form

---
 .../categories/categories.component.html      |  4 ++++
 .../categories/categories.component.scss      |  5 +++-
 .../categories/categories.component.ts        |  4 ++++
 .../metadata-form.component.html              | 13 ++++++----
 .../metadata-form/metadata-form.component.ts  | 24 +++++++++----------
 5 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 3d34373..fd22dac 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -5,6 +5,10 @@
     </mat-card-header>
 
     <mat-card-content>
+      <div class="new-category">
+        <app-metadata-form (newMetaData)="createCategory($event.name)" [editing]="true" [label]="'New Category'"/>
+      </div>
+
       <div class="category-list">
         @for (category of categories(); track category.id) {
           <app-metadata-form [metadata]="category" (newMetaData)="updateCategory($event)" />
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 06fb27c..619f899 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -12,7 +12,10 @@
   }
 }
 
+.new-category {
+  padding-top: 0.5rem;
+}
+
 .category-list {
-  padding-top: 1rem;
   display: grid;
 }
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 580b803..5123ff1 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -17,6 +17,10 @@ export class CategoriesComponent {
 
   public constructor(private readonly categoryService: CategoryService) { }
 
+  public async createCategory(name: string): Promise<void> {
+    console.log('Creating new category', name);
+  }
+
   public async updateCategory(category: Category): Promise<void> {
     await this.categoryService.updateCategory(category);
     await this.categoryService.fetchCategories();
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.html b/src/app/components/metadata/metadata-form/metadata-form.component.html
index a93b42e..90559ec 100644
--- a/src/app/components/metadata/metadata-form/metadata-form.component.html
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.html
@@ -1,6 +1,6 @@
 <div class="metadata-form-container">
   @if (!editing()) {
-    <div>{{ metadata().name }}</div>
+    <div>{{ metadata()?.name }}</div>
 
     <button matIconButton (click)="editing.set(true)">
       <mat-icon>edit</mat-icon>
@@ -8,13 +8,18 @@
   } @else {
     <div class="metadata-edit">
       <mat-form-field appearance="outline">
+        @if (label()) {
+          <mat-label>{{ label() }}</mat-label>
+        }
         <input type="text" matInput [(ngModel)]="name">
       </mat-form-field>
 
       <div class="metadata-edit-buttons">
-        <button matIconButton (click)="reset()">
-          <mat-icon>undo</mat-icon>
-        </button>
+        @if (metadata()) {
+          <button matIconButton (click)="reset()">
+            <mat-icon>undo</mat-icon>
+          </button>
+        }
 
         <button matIconButton (click)="saveMetaData()" [disabled]="!nameValid()">
           <mat-icon>save</mat-icon>
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.ts b/src/app/components/metadata/metadata-form/metadata-form.component.ts
index 1be9daa..76ef407 100644
--- a/src/app/components/metadata/metadata-form/metadata-form.component.ts
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.ts
@@ -1,7 +1,7 @@
-import { Component, computed, input, model, OnInit, output, signal } from '@angular/core';
+import { Component, computed, input, model, OnInit, output } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { MatFormField, MatInput } from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 
 interface MetaData {
@@ -14,40 +14,40 @@ interface MetaData {
   imports: [
     MatIconModule,
     MatButtonModule,
-    MatFormField,
-    MatInput,
-    FormsModule
+    MatInputModule,
+    FormsModule,
   ],
   templateUrl: './metadata-form.component.html',
   styleUrl: './metadata-form.component.scss'
 })
 export class MetadataFormComponent implements OnInit {
-  public metadata = input.required<MetaData>();
+  public editing = model(false);
+  public label = input<string>();
+  public metadata = input<MetaData>();
   public newMetaData = output<MetaData>();
 
   public name = model('');
   public nameValid = computed(() => {
-    const existingName = this.metadata().name;
+    const existingName = this.metadata()?.name;
     const newName = this.name();
 
     return !!newName && newName !== existingName;
   });
-  public editing = signal(false);
 
   public ngOnInit(): void {
     this.reset();
   }
 
   public saveMetaData(): void {
-    this.editing.set(false);
     this.newMetaData.emit({
-      ...this.metadata(),
+      ...this.metadata()!,
       name: this.name()
     });
+    this.reset();
   }
 
   public reset(): void {
-    this.editing.set(false);
-    this.name.set(this.metadata().name);
+    this.name.set(this.metadata()?.name ?? '');
+    this.editing.set(!this.metadata());
   }
 }
-- 
2.47.3


From 248ded53c06c7a114273b2b929e95b11222583a2 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 12:10:55 -0600
Subject: [PATCH 16/18] added create category support

---
 src/app/components/expense/expense.component.ts           | 1 +
 .../metadata/categories/categories.component.ts           | 3 ++-
 .../metadata/metadata-form/metadata-form.component.html   | 8 +++-----
 src/app/services/category.service.ts                      | 4 ++++
 src/app/services/expense.service.ts                       | 5 +----
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts
index 228b0db..6a4f799 100644
--- a/src/app/components/expense/expense.component.ts
+++ b/src/app/components/expense/expense.component.ts
@@ -47,6 +47,7 @@ export class ExpenseComponent {
     const snackId = this.snackBar.staticBar('Tracking new expense...');
     try {
       await this.expenseService.postExpense(postExpense);
+      await this.expenseService.fetchExpenses();
       this.resetForm();
       this.snackBar.dismiss(snackId);
       this.snackBar.autoBar('Expense tracked!');
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 5123ff1..b0a71a0 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -18,7 +18,8 @@ export class CategoriesComponent {
   public constructor(private readonly categoryService: CategoryService) { }
 
   public async createCategory(name: string): Promise<void> {
-    console.log('Creating new category', name);
+    await this.categoryService.createCategory({ name });
+    await this.categoryService.fetchCategories();
   }
 
   public async updateCategory(category: Category): Promise<void> {
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.html b/src/app/components/metadata/metadata-form/metadata-form.component.html
index 90559ec..928c351 100644
--- a/src/app/components/metadata/metadata-form/metadata-form.component.html
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.html
@@ -15,11 +15,9 @@
       </mat-form-field>
 
       <div class="metadata-edit-buttons">
-        @if (metadata()) {
-          <button matIconButton (click)="reset()">
-            <mat-icon>undo</mat-icon>
-          </button>
-        }
+        <button matIconButton (click)="reset()">
+          <mat-icon>undo</mat-icon>
+        </button>
 
         <button matIconButton (click)="saveMetaData()" [disabled]="!nameValid()">
           <mat-icon>save</mat-icon>
diff --git a/src/app/services/category.service.ts b/src/app/services/category.service.ts
index ede6e17..67b96a4 100644
--- a/src/app/services/category.service.ts
+++ b/src/app/services/category.service.ts
@@ -17,6 +17,10 @@ export class CategoryService {
     this.internalCategories.set(await this.http.get<Category[]>(this.categoryPath));
   }
 
+  public async createCategory(category: CreateCategory): Promise<Category> {
+    return await this.http.post<Category>(this.categoryPath, category);
+  }
+
   public async updateCategory(category: Category): Promise<Category> {
     return await this.http.put<Category>(this.categoryPath, category);
   }
diff --git a/src/app/services/expense.service.ts b/src/app/services/expense.service.ts
index 5c20794..0113335 100644
--- a/src/app/services/expense.service.ts
+++ b/src/app/services/expense.service.ts
@@ -22,10 +22,7 @@ export class ExpenseService {
   }
 
   public async postExpense(createExpense: CreateExpense): Promise<Expense> {
-    const createdExpense = await this.http.post<Expense>(this.expensePath, createExpense);
-    await this.fetchExpenses();
-
-    return createdExpense;
+    return await this.http.post<Expense>(this.expensePath, createExpense);
   }
 
   public async updateExpense(updateExpense: UpdateExpense): Promise<Expense> {
-- 
2.47.3


From 3d0d63b1d4865f1d6a434b891e1f15c7db7df6f5 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 12:24:47 -0600
Subject: [PATCH 17/18] updated merchant tab

---
 .../components/expense/expense.component.ts   |  6 ++--
 .../categories/categories.component.ts        |  8 ++---
 .../merchants/merchants.component.html        | 33 +++++++++++--------
 .../merchants/merchants.component.scss        | 25 +++++---------
 .../metadata/merchants/merchants.component.ts | 18 ++++++++--
 src/app/services/category.service.ts          |  8 ++---
 src/app/services/expense.service.ts           |  8 ++---
 src/app/services/merchant.service.ts          | 16 +++++++--
 src/app/services/tag.service.ts               |  4 +--
 9 files changed, 75 insertions(+), 51 deletions(-)

diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts
index 6a4f799..32491ce 100644
--- a/src/app/components/expense/expense.component.ts
+++ b/src/app/components/expense/expense.component.ts
@@ -46,8 +46,8 @@ export class ExpenseComponent {
     this.savingExpense.set(true);
     const snackId = this.snackBar.staticBar('Tracking new expense...');
     try {
-      await this.expenseService.postExpense(postExpense);
-      await this.expenseService.fetchExpenses();
+      await this.expenseService.create(postExpense);
+      await this.expenseService.fetch();
       this.resetForm();
       this.snackBar.dismiss(snackId);
       this.snackBar.autoBar('Expense tracked!');
@@ -79,7 +79,7 @@ export class ExpenseComponent {
     this.savingExpense.set(true);
     const snackId = this.snackBar.staticBar('Updating expense...');
     try {
-      const expense = await this.expenseService.updateExpense(putExpense);
+      const expense = await this.expenseService.update(putExpense);
       this.expense.set(expense);
       this.form()?.refresh(expense);
       this.editingExpense.set(false);
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index b0a71a0..41fec0b 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -18,12 +18,12 @@ export class CategoriesComponent {
   public constructor(private readonly categoryService: CategoryService) { }
 
   public async createCategory(name: string): Promise<void> {
-    await this.categoryService.createCategory({ name });
-    await this.categoryService.fetchCategories();
+    await this.categoryService.create({ name });
+    await this.categoryService.fetch();
   }
 
   public async updateCategory(category: Category): Promise<void> {
-    await this.categoryService.updateCategory(category);
-    await this.categoryService.fetchCategories();
+    await this.categoryService.update(category);
+    await this.categoryService.fetch();
   }
 }
diff --git a/src/app/components/metadata/merchants/merchants.component.html b/src/app/components/metadata/merchants/merchants.component.html
index 1b0bb83..7c0e464 100644
--- a/src/app/components/metadata/merchants/merchants.component.html
+++ b/src/app/components/metadata/merchants/merchants.component.html
@@ -1,17 +1,24 @@
 <div class="merchants-container">
-  <div class="merchant-list-header">
-    <p>Merchants</p>
-    <app-divider />
-  </div>
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>Merchants</mat-card-title>
+    </mat-card-header>
 
-  <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
+    <mat-card-content>
+      <div class="new-merchant">
+        <app-metadata-form (newMetaData)="createMerchant($event.name)" [editing]="true" [label]="'New Merchant'"/>
       </div>
-    }
-  </div>
+
+      <div class="merchant-list">
+        @for (merchant of merchants(); track merchant.id) {
+          <app-metadata-form [metadata]="merchant" (newMetaData)="updateMerchant($event)" />
+        }
+        @if (!merchants().length) {
+          <div>
+            No merchants to display
+          </div>
+        }
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/components/metadata/merchants/merchants.component.scss b/src/app/components/metadata/merchants/merchants.component.scss
index 8d34c6c..7f8f410 100644
--- a/src/app/components/metadata/merchants/merchants.component.scss
+++ b/src/app/components/metadata/merchants/merchants.component.scss
@@ -1,28 +1,21 @@
-.merchants-container {
-  display: grid;
-  gap: 1rem;
-}
+@use "variables";
 
-.merchant-list-header {
-  padding-top: 1rem;
+.merchants-container {
+  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  p {
-    font-size: 1.8rem;
-    line-height: 100%;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  app-divider {
+  mat-card {
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }
 
+.new-merchant {
+  padding-top: 0.5rem;
+}
+
 .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 7c8d730..78d93be 100644
--- a/src/app/components/metadata/merchants/merchants.component.ts
+++ b/src/app/components/metadata/merchants/merchants.component.ts
@@ -1,11 +1,13 @@
 import { Component, computed } from '@angular/core';
-import { MerchantService } from '../../../services/merchant.service';
-import { DividerComponent } from '../../divider/divider.component';
+import { Merchant, MerchantService } from '../../../services/merchant.service';
+import { MatCardModule } from '@angular/material/card';
+import { MetadataFormComponent } from '../metadata-form/metadata-form.component';
 
 @Component({
   selector: 'app-merchants',
   imports: [
-    DividerComponent
+    MatCardModule,
+    MetadataFormComponent
   ],
   templateUrl: './merchants.component.html',
   styleUrl: './merchants.component.scss'
@@ -14,4 +16,14 @@ export class MerchantsComponent {
   protected merchants = computed(() => this.merchantService.merchants());
 
   public constructor(private readonly merchantService: MerchantService) { }
+
+  public async createMerchant(name: string): Promise<void> {
+    await this.merchantService.create({ name });
+    await this.merchantService.fetch();
+  }
+
+  public async updateMerchant(merchant: Merchant): Promise<void> {
+    await this.merchantService.update(merchant);
+    await this.merchantService.fetch();
+  }
 }
diff --git a/src/app/services/category.service.ts b/src/app/services/category.service.ts
index 67b96a4..b1b4ac3 100644
--- a/src/app/services/category.service.ts
+++ b/src/app/services/category.service.ts
@@ -10,18 +10,18 @@ export class CategoryService {
   public readonly categoryPath = 'http://localhost:3000/common-cents/categories';
 
   public constructor(private readonly http: HttpService) {
-    void this.fetchCategories();
+    void this.fetch();
   }
 
-  public async fetchCategories(): Promise<void> {
+  public async fetch(): Promise<void> {
     this.internalCategories.set(await this.http.get<Category[]>(this.categoryPath));
   }
 
-  public async createCategory(category: CreateCategory): Promise<Category> {
+  public async create(category: CreateCategory): Promise<Category> {
     return await this.http.post<Category>(this.categoryPath, category);
   }
 
-  public async updateCategory(category: Category): Promise<Category> {
+  public async update(category: Category): Promise<Category> {
     return await this.http.put<Category>(this.categoryPath, category);
   }
 }
diff --git a/src/app/services/expense.service.ts b/src/app/services/expense.service.ts
index 0113335..0ca6ff7 100644
--- a/src/app/services/expense.service.ts
+++ b/src/app/services/expense.service.ts
@@ -14,18 +14,18 @@ export class ExpenseService {
   public readonly expensePath = 'http://localhost:3000/common-cents/expenses'; // TODO: refactor
 
   public constructor(private readonly http: HttpService) {
-    void this.fetchExpenses();
+    void this.fetch();
   }
 
-  public async fetchExpenses(): Promise<void> {
+  public async fetch(): Promise<void> {
     this.internalExpenses.set(await this.http.get(this.expensePath));
   }
 
-  public async postExpense(createExpense: CreateExpense): Promise<Expense> {
+  public async create(createExpense: CreateExpense): Promise<Expense> {
     return await this.http.post<Expense>(this.expensePath, createExpense);
   }
 
-  public async updateExpense(updateExpense: UpdateExpense): Promise<Expense> {
+  public async update(updateExpense: UpdateExpense): Promise<Expense> {
     return await this.http.put<Expense>(this.expensePath, updateExpense);
   }
 }
diff --git a/src/app/services/merchant.service.ts b/src/app/services/merchant.service.ts
index 8cca35b..1d0290b 100644
--- a/src/app/services/merchant.service.ts
+++ b/src/app/services/merchant.service.ts
@@ -10,15 +10,27 @@ export class MerchantService {
   public readonly merchantPath = 'http://localhost:3000/common-cents/merchants';
 
   public constructor(private readonly http: HttpService) {
-    void this.fetchMerchants();
+    void this.fetch();
   }
 
-  public async fetchMerchants(): Promise<void> {
+  public async fetch(): Promise<void> {
     this.internalMerchants.set(await this.http.get<Merchant[]>(this.merchantPath));
   }
+
+  public async create(merchant: CreateMerchant): Promise<Merchant> {
+    return await this.http.post<Merchant>(this.merchantPath, merchant);
+  }
+
+  public async update(merchant: Merchant): Promise<Merchant> {
+    return await this.http.put<Merchant>(this.merchantPath, merchant);
+  }
 }
 
 export interface Merchant {
   id: string;
   name: string;
 }
+
+export interface CreateMerchant {
+  name: string;
+}
diff --git a/src/app/services/tag.service.ts b/src/app/services/tag.service.ts
index 06a373b..a3d493e 100644
--- a/src/app/services/tag.service.ts
+++ b/src/app/services/tag.service.ts
@@ -10,10 +10,10 @@ export class TagService {
   public readonly tagPath = 'http://localhost:3000/common-cents/tags';
 
   public constructor(private readonly http: HttpService) {
-    void this.fetchTags();
+    void this.fetch();
   }
 
-  public async fetchTags(): Promise<void> {
+  public async fetch(): Promise<void> {
     this.internalTags.set(await this.http.get<Tag[]>(this.tagPath));
   }
 }
-- 
2.47.3


From 410c84b3e5ba85cf77156272bc0877d375888040 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 12:32:30 -0600
Subject: [PATCH 18/18] updated tag tab

---
 .../metadata/tags/tags.component.html         | 33 +++++++++++--------
 .../metadata/tags/tags.component.scss         | 25 +++++---------
 .../metadata/tags/tags.component.ts           | 18 ++++++++--
 src/app/services/tag.service.ts               | 12 +++++++
 4 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/src/app/components/metadata/tags/tags.component.html b/src/app/components/metadata/tags/tags.component.html
index c5e59e0..d0ec707 100644
--- a/src/app/components/metadata/tags/tags.component.html
+++ b/src/app/components/metadata/tags/tags.component.html
@@ -1,17 +1,24 @@
 <div class="tags-container">
-  <div class="tag-list-header">
-    <p>Tags</p>
-    <app-divider />
-  </div>
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>Tags</mat-card-title>
+    </mat-card-header>
 
-  <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
+    <mat-card-content>
+      <div class="new-tag">
+        <app-metadata-form (newMetaData)="createTag($event.name)" [editing]="true" [label]="'New Tag'"/>
       </div>
-    }
-  </div>
+
+      <div class="tag-list">
+        @for (tag of tags(); track tag.id) {
+          <app-metadata-form [metadata]="tag" (newMetaData)="updateTag($event)" />
+        }
+        @if (!tags().length) {
+          <div>
+            No tags to display
+          </div>
+        }
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/components/metadata/tags/tags.component.scss b/src/app/components/metadata/tags/tags.component.scss
index 5772b6d..d841d0f 100644
--- a/src/app/components/metadata/tags/tags.component.scss
+++ b/src/app/components/metadata/tags/tags.component.scss
@@ -1,28 +1,21 @@
-.tags-container {
-  display: grid;
-  gap: 1rem;
-}
+@use "variables";
 
-.tag-list-header {
-  padding-top: 1rem;
+.tags-container {
+  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  p {
-    font-size: 1.8rem;
-    line-height: 100%;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  app-divider {
+  mat-card {
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }
 
+.new-tag {
+  padding-top: 0.5rem;
+}
+
 .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 04979e6..2d1ae29 100644
--- a/src/app/components/metadata/tags/tags.component.ts
+++ b/src/app/components/metadata/tags/tags.component.ts
@@ -1,11 +1,13 @@
 import { Component, computed } from '@angular/core';
-import { TagService } from '../../../services/tag.service';
-import { DividerComponent } from '../../divider/divider.component';
+import { Tag, TagService } from '../../../services/tag.service';
+import { MatCardModule } from '@angular/material/card';
+import { MetadataFormComponent } from '../metadata-form/metadata-form.component';
 
 @Component({
   selector: 'app-tags',
   imports: [
-    DividerComponent
+    MatCardModule,
+    MetadataFormComponent
   ],
   templateUrl: './tags.component.html',
   styleUrl: './tags.component.scss'
@@ -14,4 +16,14 @@ export class TagsComponent {
   protected tags = computed(() => this.tagService.tags());
 
   public constructor(private readonly tagService: TagService) { }
+
+  public async createTag(name: string): Promise<void> {
+    await this.tagService.create({ name });
+    await this.tagService.fetch();
+  }
+
+  public async updateTag(tag: Tag): Promise<void> {
+    await this.tagService.update(tag);
+    await this.tagService.fetch();
+  }
 }
diff --git a/src/app/services/tag.service.ts b/src/app/services/tag.service.ts
index a3d493e..c23ccab 100644
--- a/src/app/services/tag.service.ts
+++ b/src/app/services/tag.service.ts
@@ -16,9 +16,21 @@ export class TagService {
   public async fetch(): Promise<void> {
     this.internalTags.set(await this.http.get<Tag[]>(this.tagPath));
   }
+
+  public async create(tag: CreateTag): Promise<Tag> {
+    return await this.http.post<Tag>(this.tagPath, tag);
+  }
+
+  public async update(tag: Tag): Promise<Tag> {
+    return await this.http.put<Tag>(this.tagPath, tag);
+  }
 }
 
 export interface Tag {
   id: string;
   name: string;
 }
+
+export interface CreateTag {
+  name: string;
+}
-- 
2.47.3