G.2 — Promote reusable bits to `app/components/` (closes #252)

[v-patel]

G.2 — Promote reusable bits to app/components/ (closes #252)

What's wrong

There is no app/components/ directory. Every page in app/pages/** inlines its UI — and its CSS. This is also why the stylesheets are hard to consolidate (#252).

How to fix

Identify the obvious candidates, extract one at a time, and let pages import them. Suggested first batch:

• AnnouncementCard.vue — the announcement render block in app/pages/reader/home.vue.
• FormListRow.vue — the row layout used in admin form list pages.
• ModalShell.vue — the modal wrapper repeated across admin pages.
• Navbar.vue — extract from the layout.
• Toast.vue — even though @nuxt/ui has its own, we may want a thin wrapper.

For each component, move its scoped CSS out of the page and either keep <style scoped> inside the component or move shared bits into a single app/assets/css/components.css.

Files

• New: app/components/
• Refactor: app/pages/**, app/layouts/**

Severity

M.

Acceptance

• At least 4 reusable components extracted.
• No regression in any page that used the inlined version.
• app/assets/css/main.css is the single global stylesheet (or, if there are still per-component styles, they're scoped).