Improve announcements UI

[gaidheal1]

Summary

• Extracts the desktop popover and mobile dropdown-panel announcement UI out of Navbar.tsx into a new Navbar/Announcements.tsx (AnnouncementsBell, MobileAnnouncements), sharing one internal list-rendering component instead of duplicating the accordion markup twice.
• Navbar.tsx keeps ownership of the data layer (useAnnouncements, mutations, unread-count sync) and passes it down as props — no duplicated queries/mutations.
• Styles split out into Announcements.module.scss; Navbar.module.scss shrinks by ~155 lines.
• Fixes the announcements bell rendering visibly taller than the other nav buttons — it hard-coded a 2.4rem box instead of deriving its height from padding + line-height like its siblings.
• Renders announcement body as Markdown (react-markdown) instead of plain text.

UX polish

• Hover effect on list items.
• "Mark read" is hidden while an item is collapsed, shown only once expanded.
• Collapsed items show a rotating chevron affordance (points down at rest, rotates to point up when expanded).
• Removed a stray green focus ring on announcement titles/summaries — no custom focus style, falls back to the site-wide :focus-visible outline.
• "Mark all read" is hidden entirely (not just disabled) when there are no unread items.
• Summary text hides once an item is expanded, since the full body is then redundant with it.
• Backend: Announcement.save() now auto-sets published_at the first time an announcement is saved as published, if it isn't already set (idempotent — won't overwrite an existing value).
• Frontend: announcement items now display their published date/time (formatPublishedAt, following the existing formatDueAt convention).
• Django admin: published_at becomes read-only once set, via AnnouncementAdmin.get_readonly_fields — still editable while unset or on a new unsaved announcement.
• Reduced font sizes throughout the announcements UI (title, header, summary, published date, body text, action buttons) for a more compact list, and fixed a pre-existing bug where .body's font-size was never actually applied to the rendered markdown <p>/<li> elements (a global bare p { } rule was winning over the inherited container size).

Known issue

• Announcements list: extra space above title when item expands #785 tracks an unresolved, cosmetic bug: expanding an item slightly increases the top margin above its own title. Investigated but not root-caused yet; left open on purpose rather than guessing at a fix.

Testing

• npx eslint on changed files: clean
• npx tsc --noEmit: clean
• npx vitest run src/layout/Navbar/Navbar.test.tsx: 12/12 passing
• Backend core/tests.py additions (AnnouncementSaveTest, AnnouncementAdminReadonlyFieldsTest) cover the published_at auto-set and admin read-only behavior — not yet run against Docker in this session.

🤖 Generated with Claude Code