mirror of https://github.com/ghostfolio/ghostfolio
Yip Shing him
3 weeks ago
22 changed files with 1771 additions and 523 deletions
@ -0,0 +1,547 @@ |
|||||
|
# Budget UI Repair Implementation Plan |
||||
|
|
||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. |
||||
|
|
||||
|
**Goal:** Fix the broken Budget page category management UI so the dialog is readable, actions render as compact icons, and the layout works in dark mode at desktop and narrow widths. |
||||
|
|
||||
|
**Architecture:** Keep the existing Angular Material dialog/table pattern, but stop relying on Material icon font ligatures for action buttons in the Budget feature. Use Ghostfolio's existing Ionic icon pattern for edit/delete actions, constrain action columns, and make the category form/table responsive with stable widths. |
||||
|
|
||||
|
**Tech Stack:** Angular 21 standalone components, Angular Material dialog/table/form controls, Ionic standalone icons, Jest, Nx. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Current Breakage From Screenshots |
||||
|
|
||||
|
- In `Manage categories`, action icons render as visible text (`edit delete`) and overflow the table row. |
||||
|
- The dialog content is too narrow for the form plus action column, so controls feel cramped and clipped. |
||||
|
- The category table action column has no stable width, so icon/text fallback can steal space from data columns. |
||||
|
- The Budget page uses the same `mat-icon` pattern for budget row edit/delete actions, so it should be fixed in the same pass. |
||||
|
|
||||
|
## File Structure |
||||
|
|
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.ts`: replace `MatIconModule` dependency with `IonIcon`, register `createOutline` and `trashOutline`. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.html`: replace `<mat-icon>` action content with `<ion-icon>`, add action button classes, and improve table/action markup. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.scss`: add responsive dialog form layout, stable action column/button sizing, color swatch truncation, and mobile table behavior. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.spec.ts`: assert icon buttons exist by aria labels, form actions remain usable, and category color renders without exposing raw icon ligature text. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/budget-page.component.ts`: replace `MatIconModule` dependency with `IonIcon`, register `createOutline` and `trashOutline`, widen category dialog. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/budget-page.html`: replace budget row `<mat-icon>` actions with Ionic icons and stable action button classes. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/budget-page.scss`: add stable table action sizing and horizontal overflow handling for dense budget rows. |
||||
|
- Modify `apps/client/src/app/pages/portfolio/budget/budget-page.component.spec.ts`: assert budget row actions render without raw icon words and dialog opens with the wider dimensions. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Task 1: Replace Broken Material Icon Ligatures In Category Dialog |
||||
|
|
||||
|
**Files:** |
||||
|
|
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.ts` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.html` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.spec.ts` |
||||
|
|
||||
|
- [ ] **Step 1: Write the failing icon rendering test** |
||||
|
|
||||
|
Add this assertion to `it('loads expense categories', ...)` after `await fixture.whenStable();`: |
||||
|
|
||||
|
```ts |
||||
|
expect( |
||||
|
fixture.nativeElement.querySelector('[aria-label="Edit category"] ion-icon') |
||||
|
).not.toBeNull(); |
||||
|
expect( |
||||
|
fixture.nativeElement.querySelector('[aria-label="Delete category"] ion-icon') |
||||
|
).not.toBeNull(); |
||||
|
expect(fixture.nativeElement.textContent).not.toContain('editdelete'); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: Run the category dialog spec and confirm it fails** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.spec.ts --runInBand --watchman=false |
||||
|
``` |
||||
|
|
||||
|
Expected: FAIL because the template still uses `<mat-icon>` instead of `<ion-icon>`. |
||||
|
|
||||
|
- [ ] **Step 3: Replace Material icons with Ionic icons in the component** |
||||
|
|
||||
|
In `manage-budget-categories-dialog.component.ts`, replace the `MatIconModule` import and component dependency with Ionic icons: |
||||
|
|
||||
|
```ts |
||||
|
import { IonIcon } from '@ionic/angular/standalone'; |
||||
|
import { addIcons } from 'ionicons'; |
||||
|
import { createOutline, trashOutline } from 'ionicons/icons'; |
||||
|
``` |
||||
|
|
||||
|
Remove: |
||||
|
|
||||
|
```ts |
||||
|
import { MatIconModule } from '@angular/material/icon'; |
||||
|
``` |
||||
|
|
||||
|
Update `imports`: |
||||
|
|
||||
|
```ts |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
IonIcon, |
||||
|
MatButtonModule, |
||||
|
MatDialogModule, |
||||
|
MatFormFieldModule, |
||||
|
MatInputModule, |
||||
|
MatTableModule, |
||||
|
ReactiveFormsModule |
||||
|
], |
||||
|
``` |
||||
|
|
||||
|
Add this constructor body after dependency injection parameters: |
||||
|
|
||||
|
```ts |
||||
|
) { |
||||
|
addIcons({ createOutline, trashOutline }); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: Replace the category action button markup** |
||||
|
|
||||
|
In `manage-budget-categories-dialog.html`, replace the two `<mat-icon>` button bodies with: |
||||
|
|
||||
|
```html |
||||
|
<button |
||||
|
class="category-action-button" |
||||
|
mat-icon-button |
||||
|
type="button" |
||||
|
[attr.aria-label]="'Edit category'" |
||||
|
(click)="onEditCategory(category)" |
||||
|
> |
||||
|
<ion-icon aria-hidden="true" name="create-outline" /> |
||||
|
</button> |
||||
|
<button |
||||
|
class="category-action-button" |
||||
|
mat-icon-button |
||||
|
type="button" |
||||
|
[attr.aria-label]="'Delete category'" |
||||
|
(click)="onDeleteCategory(category.id)" |
||||
|
> |
||||
|
<ion-icon aria-hidden="true" name="trash-outline" /> |
||||
|
</button> |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 5: Run the category dialog spec and confirm it passes** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.spec.ts --runInBand --watchman=false |
||||
|
``` |
||||
|
|
||||
|
Expected: PASS. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Task 2: Repair Category Dialog Layout And Responsiveness |
||||
|
|
||||
|
**Files:** |
||||
|
|
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.html` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.scss` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/budget-page.component.ts` |
||||
|
|
||||
|
- [ ] **Step 1: Widen the dialog safely** |
||||
|
|
||||
|
In `budget-page.component.ts`, update `onManageCategories()`: |
||||
|
|
||||
|
```ts |
||||
|
this.dialog |
||||
|
.open(GfManageBudgetCategoriesDialogComponent, { |
||||
|
maxWidth: 'calc(100vw - 2rem)', |
||||
|
width: '42rem' |
||||
|
}) |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: Add stable table classes in the category template** |
||||
|
|
||||
|
In `manage-budget-categories-dialog.html`, update the table element: |
||||
|
|
||||
|
```html |
||||
|
<table |
||||
|
class="category-table gf-table w-100" |
||||
|
mat-table |
||||
|
[dataSource]="dataSource" |
||||
|
> |
||||
|
``` |
||||
|
|
||||
|
Update the actions column cells: |
||||
|
|
||||
|
```html |
||||
|
<th |
||||
|
*matHeaderCellDef |
||||
|
class="category-actions-column text-right" |
||||
|
mat-header-cell |
||||
|
></th> |
||||
|
<td |
||||
|
*matCellDef="let category" |
||||
|
class="category-actions-column text-right" |
||||
|
mat-cell |
||||
|
> |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 3: Add defensive layout CSS** |
||||
|
|
||||
|
Replace `manage-budget-categories-dialog.scss` with: |
||||
|
|
||||
|
```scss |
||||
|
:host { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.category-form { |
||||
|
align-items: start; |
||||
|
display: grid; |
||||
|
gap: 1rem; |
||||
|
grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 10rem) auto; |
||||
|
} |
||||
|
|
||||
|
.category-form-actions { |
||||
|
align-items: center; |
||||
|
display: flex; |
||||
|
gap: 0.5rem; |
||||
|
justify-content: flex-end; |
||||
|
min-height: 3.5rem; |
||||
|
} |
||||
|
|
||||
|
.category-table { |
||||
|
table-layout: fixed; |
||||
|
} |
||||
|
|
||||
|
.category-table .mat-column-name { |
||||
|
width: 45%; |
||||
|
} |
||||
|
|
||||
|
.category-table .mat-column-color { |
||||
|
width: 35%; |
||||
|
} |
||||
|
|
||||
|
.category-actions-column { |
||||
|
white-space: nowrap; |
||||
|
width: 6rem; |
||||
|
} |
||||
|
|
||||
|
.category-action-button { |
||||
|
height: 2.25rem; |
||||
|
line-height: 2.25rem; |
||||
|
width: 2.25rem; |
||||
|
} |
||||
|
|
||||
|
.category-action-button ion-icon { |
||||
|
font-size: 1.125rem; |
||||
|
} |
||||
|
|
||||
|
.category-color { |
||||
|
align-items: center; |
||||
|
display: inline-flex; |
||||
|
gap: 0.5rem; |
||||
|
max-width: 100%; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.category-color-swatch { |
||||
|
border: 1px solid var(--border-color); |
||||
|
display: inline-block; |
||||
|
flex: 0 0 auto; |
||||
|
height: 1rem; |
||||
|
width: 1rem; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 767.98px) { |
||||
|
.category-form { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
|
||||
|
.category-form-actions { |
||||
|
justify-content: flex-start; |
||||
|
min-height: auto; |
||||
|
} |
||||
|
|
||||
|
.category-table { |
||||
|
min-width: 32rem; |
||||
|
} |
||||
|
|
||||
|
mat-dialog-content { |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: Update the budget page dialog width test** |
||||
|
|
||||
|
In `budget-page.component.spec.ts`, update the category dialog expectation to: |
||||
|
|
||||
|
```ts |
||||
|
expect(dialog.open).toHaveBeenCalledWith(expect.any(Function), { |
||||
|
maxWidth: 'calc(100vw - 2rem)', |
||||
|
width: '42rem' |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 5: Run the page and category specs** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.spec.ts --runInBand --watchman=false |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/budget-page.component.spec.ts --runInBand --watchman=false |
||||
|
``` |
||||
|
|
||||
|
Expected: both PASS. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Task 3: Fix Budget Table Row Action Icons And Dense Table Overflow |
||||
|
|
||||
|
**Files:** |
||||
|
|
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/budget-page.component.ts` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/budget-page.html` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/budget-page.scss` |
||||
|
- Modify: `apps/client/src/app/pages/portfolio/budget/budget-page.component.spec.ts` |
||||
|
|
||||
|
- [ ] **Step 1: Add failing budget action icon assertions** |
||||
|
|
||||
|
In `budget-page.component.spec.ts`, inside `it('loads and renders budgets for the selected month', ...)`, add: |
||||
|
|
||||
|
```ts |
||||
|
expect( |
||||
|
fixture.nativeElement.querySelector('[aria-label="Edit budget"] ion-icon') |
||||
|
).not.toBeNull(); |
||||
|
expect( |
||||
|
fixture.nativeElement.querySelector('[aria-label="Delete budget"] ion-icon') |
||||
|
).not.toBeNull(); |
||||
|
expect(fixture.nativeElement.textContent).not.toContain('editdelete'); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: Run the budget page spec and confirm it fails** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/budget-page.component.spec.ts --runInBand --watchman=false |
||||
|
``` |
||||
|
|
||||
|
Expected: FAIL because budget row actions still use `<mat-icon>`. |
||||
|
|
||||
|
- [ ] **Step 3: Replace Material icon dependency in the budget page** |
||||
|
|
||||
|
In `budget-page.component.ts`, add: |
||||
|
|
||||
|
```ts |
||||
|
import { IonIcon } from '@ionic/angular/standalone'; |
||||
|
import { addIcons } from 'ionicons'; |
||||
|
import { createOutline, trashOutline } from 'ionicons/icons'; |
||||
|
``` |
||||
|
|
||||
|
Remove: |
||||
|
|
||||
|
```ts |
||||
|
import { MatIconModule } from '@angular/material/icon'; |
||||
|
``` |
||||
|
|
||||
|
Update `imports`: |
||||
|
|
||||
|
```ts |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
GfValueComponent, |
||||
|
IonIcon, |
||||
|
MatButtonModule, |
||||
|
MatProgressBarModule, |
||||
|
MatTableModule, |
||||
|
ReactiveFormsModule |
||||
|
], |
||||
|
``` |
||||
|
|
||||
|
Add this constructor body after dependency injection parameters: |
||||
|
|
||||
|
```ts |
||||
|
) { |
||||
|
addIcons({ createOutline, trashOutline }); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: Replace budget row action markup** |
||||
|
|
||||
|
In `budget-page.html`, replace the two budget action button bodies with: |
||||
|
|
||||
|
```html |
||||
|
<button |
||||
|
class="budget-action-button" |
||||
|
mat-icon-button |
||||
|
type="button" |
||||
|
[attr.aria-label]="'Edit budget'" |
||||
|
(click)="onUpdateBudget(budget)" |
||||
|
> |
||||
|
<ion-icon aria-hidden="true" name="create-outline" /> |
||||
|
</button> |
||||
|
<button |
||||
|
class="budget-action-button" |
||||
|
mat-icon-button |
||||
|
type="button" |
||||
|
[attr.aria-label]="'Delete budget'" |
||||
|
(click)="onDeleteBudget(budget.id)" |
||||
|
> |
||||
|
<ion-icon aria-hidden="true" name="trash-outline" /> |
||||
|
</button> |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 5: Add stable budget table action CSS** |
||||
|
|
||||
|
Append to `budget-page.scss`: |
||||
|
|
||||
|
```scss |
||||
|
.budget-table-wrapper { |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
|
||||
|
.budget-table { |
||||
|
min-width: 56rem; |
||||
|
} |
||||
|
|
||||
|
.budget-table .mat-column-actions { |
||||
|
white-space: nowrap; |
||||
|
width: 6rem; |
||||
|
} |
||||
|
|
||||
|
.budget-action-button { |
||||
|
height: 2.25rem; |
||||
|
line-height: 2.25rem; |
||||
|
width: 2.25rem; |
||||
|
} |
||||
|
|
||||
|
.budget-action-button ion-icon { |
||||
|
font-size: 1.125rem; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
Wrap the table in `budget-page.html`: |
||||
|
|
||||
|
```html |
||||
|
<div class="budget-table-wrapper"> |
||||
|
<table class="budget-table gf-table w-100" mat-table [dataSource]="dataSource"> |
||||
|
... |
||||
|
</table> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 6: Run the budget page spec** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/budget-page.component.spec.ts --runInBand --watchman=false |
||||
|
``` |
||||
|
|
||||
|
Expected: PASS. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Task 4: Visual Verification In Browser |
||||
|
|
||||
|
**Files:** |
||||
|
|
||||
|
- No source edits expected unless verification finds a regression. |
||||
|
|
||||
|
- [ ] **Step 1: Start the dev server** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
pnpm start:dev |
||||
|
``` |
||||
|
|
||||
|
If the project uses the existing Nx command instead, run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/nx run client:serve:development-en --hmr -o |
||||
|
``` |
||||
|
|
||||
|
Expected: Budget page is available on the local dev server. |
||||
|
|
||||
|
- [ ] **Step 2: Open Budget page and Manage categories** |
||||
|
|
||||
|
Use the browser to navigate to the Budget page, then click `Manage categories`. |
||||
|
|
||||
|
Expected: |
||||
|
|
||||
|
- Dialog width is about `42rem` on desktop. |
||||
|
- Form fields and Create button are aligned on one row at desktop width. |
||||
|
- Table actions are two compact icon buttons, not visible `edit delete` text. |
||||
|
- The close button remains visible and aligned to the right. |
||||
|
|
||||
|
- [ ] **Step 3: Verify narrow width** |
||||
|
|
||||
|
Resize the viewport below `768px`. |
||||
|
|
||||
|
Expected: |
||||
|
|
||||
|
- Category form stacks vertically. |
||||
|
- Table can scroll horizontally if needed. |
||||
|
- No controls overlap or clip text. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Task 5: Final Verification And Commit |
||||
|
|
||||
|
**Files:** |
||||
|
|
||||
|
- All modified Budget UI files. |
||||
|
|
||||
|
- [ ] **Step 1: Run focused tests** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/manage-budget-categories-dialog/manage-budget-categories-dialog.component.spec.ts --runInBand --watchman=false |
||||
|
./node_modules/.bin/jest --config apps/client/jest.config.ts apps/client/src/app/pages/portfolio/budget/budget-page.component.spec.ts --runInBand --watchman=false |
||||
|
``` |
||||
|
|
||||
|
Expected: both PASS. |
||||
|
|
||||
|
- [ ] **Step 2: Run Angular compiler** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/ngc -p apps/client/tsconfig.app.json |
||||
|
``` |
||||
|
|
||||
|
Expected: exits with code 0. |
||||
|
|
||||
|
- [ ] **Step 3: Run client build if the local environment allows it** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
./node_modules/.bin/nx run client:build:development-en |
||||
|
``` |
||||
|
|
||||
|
Expected: PASS. If it still exits without diagnostics in this sandbox, record that `ngc` and focused specs passed, then rerun in the normal user terminal before merging. |
||||
|
|
||||
|
- [ ] **Step 4: Commit** |
||||
|
|
||||
|
Run: |
||||
|
|
||||
|
```bash |
||||
|
git add apps/client/src/app/pages/portfolio/budget |
||||
|
git commit -m "fix: repair budget category dialog layout" |
||||
|
``` |
||||
|
|
||||
|
Expected: commit succeeds. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Self-Review |
||||
|
|
||||
|
- Spec coverage: The plan directly addresses the visible broken category dialog, icon text overflow, table action clipping, and responsive layout. |
||||
|
- Placeholder scan: No `TODO`, `TBD`, or unspecified implementation steps remain. |
||||
|
- Type consistency: Uses `IonIcon`, `addIcons`, `createOutline`, and `trashOutline` consistently in both Budget page and category dialog. |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue