---
name: dyolink-frontend-structure
description: Audits or refactors Dyolink frontend folder layout (components vs components/ui, thin pages). Use when moving components, fixing structure violations, or when the user mentions folder rules, page.tsx bloat, or component organization.
---

# Frontend structure audit

## Target layout

```
components/ui/shared/     → reusable UI (Button, Dialog, …)
components/ui/{feature}/ → feature UI + {Feature}Page.tsx
components/shared/       → cross-feature non-UI
components/{feature}/      → feature non-UI (helpers, config)
app/**/page.tsx            → thin wrapper importing ui/{feature} page component
```

## Audit steps

1. List files in `components/` **outside** `ui/` — any `.tsx` with JSX → move to `components/ui/{feature}/`.
2. List files in `components/ui/` — any pure `.ts` helper → move to `components/{feature}/` or `components/shared/`.
3. List `app/**/page.tsx` — if > ~30 lines of logic/state, extract to `components/ui/{feature}/{Feature}Page.tsx`.
4. Update all `@/components/...` imports.
5. Run `npx tsc --noEmit` in `frontend/`.

## Common mistakes

| Wrong | Right |
|-------|-------|
| `components/today/TodayDashboard.tsx` | `components/ui/today/TodayDashboard.tsx` |
| `components/ui/treatment/treatmentTypeDisplay.ts` | `components/shared/treatmentTypeDisplay.ts` |
| Logic in `app/.../staff/page.tsx` | `components/ui/staff/StaffPage.tsx` |

## Non-UI that stays outside ui/

- `components/today/widget-registry.ts`, `chart-theme.ts` (config)
- `components/staff/workingHours.ts`
- `components/appointments/appointmentTime.ts`
- `components/i18n/LocaleSync.tsx` (null-render side effect for layout)