docs(#3746): Add notification panel documentation page

[twjeffery]

Summary

• Add documentation pages for Notification Panel and Notification Item (subcomponent) — Issue Docs: add notification centre documentation pages #3746
• Add 3 configuration examples showing the panel in context within the work side menu (basic, urgent, notification types)
• Add workspace-style preview layout to sandbox for notification panel and work side menu configs (grey background, content card)
• Add notification panel section to the Workspace example page with screenshot
• Improve how product-scale examples (like Workspace) display on component pages — they now show as a card with preview image, description, and link instead of "Preview not available"
• Document new preview customization options (previewStyle, previewWrapper) in ARCHITECTURE.md
• Replace subcomponent mappings table in ARCHITECTURE.md with a self-documenting grep command
• Remove padding on push drawer preview so it hugs the sandbox edges on scroll

What changed

New component pages:

• work-side-notification-panel.mdx — visible page named "Notification Panel"

• work-side-notification-item.mdx — hidden subcomponent page named "Notification Item"

• API JSON files manually extracted from Svelte source (components live inside work-side-menu/ directory, not their own folder)

Configuration preview improvements:

• Added previewStyle and previewWrapper optional fields to ComponentConfigurations type
• previewStyle applies CSS to the preview container (e.g. background color)
• previewWrapper wraps the component in layout HTML for the preview only — the code snippet shown to users contains just the component code, not the wrapper. Uses {{slot}} as placeholder.
• Applied to both notification panel and work side menu configs for a workspace-like preview
• Applied previewStyle: "padding: 0;" to push drawer config so it fills the preview edge-to-edge

ExampleDisplay improvement:

• Product-scale examples without code files (like Workspace) now render as a card with their preview image, description, and link to the example page, instead of "Preview not available" and "No Web Components code available"

Workspace example page:

• Added notification panel section between sidebar navigation and dashboard
• Added work-side-notification-panel and work-side-notification-item to the components list
• Replaced sticky action bar screenshot with corrected version

Test plan

• Verify notification panel page renders at /components/work-side-notification-panel
• Verify subcomponent (Notification Item) props appear on the panel page
• Verify all 3 config examples render correctly in the sandbox preview
• Verify code snippets show clean component code without wrapper HTML
• Verify work side menu configs also show workspace-style preview
• Verify workspace example page shows the new notification panel section
• Verify search finds "Notification Panel"
• Verify related components link between notification panel and work side menu
• Verify push drawer preview fills edge-to-edge without padding

[netlify]

✅ Deploy Preview for benji-docs-previews ready!

Name	Link
🔨 Latest commit	701d01f
🔍 Latest deploy log	https://app.netlify.com/projects/benji-docs-previews/deploys/69e1337fd44b3c0008545649
😎 Deploy Preview	https://deploy-preview-3828--benji-docs-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://GovAlta.github.io/ui-components/pr-preview-angular/pr-3828/
Built to branch gh-pages at 2026-04-30 21:36 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Preview links

Target	URL
Docs	https://govalta.github.io/ui-components/pr-preview/pr-3828/
React playground	https://govalta.github.io/ui-components/pr-preview-react/pr-3828/
Angular playground	https://govalta.github.io/ui-components/pr-preview-angular/pr-3828/

Built from commit 0e31200. Previews are removed automatically when this PR closes.

[ArakTaiRoth]

@twjeffery I think you need to run npm run build and commit search-index.json. With the current file setup as is, the Notification Panel isn't searchable.

[ArakTaiRoth]

@twjeffery There's no thumbnail added for the "Notification Panel" component

[ArakTaiRoth]

Not sure I fully understand what this activeTab property is supposed to do, so please correct me if I'm wrong. I assumed this would be the default active tab when the notification panel is opened. If that is correct, then it's not working. In WorkSideNotificationPanel.svelte on line 253, the initialTab property is hardcoded to always be Unread, or 1.

[vanessatran-ddi]

You are right, it is a good catch. I have logged it as a separate bug so it does not hold up this docs PR: #3896

[ArakTaiRoth]

Why did you remove the key property? It isn't required, but it's how React renders items and becomes a warning if it isn't included. And I see no reason to remove it.

[vanessatran-ddi]

Good catch - looks like I removed it by mistake, I added it back.

[willcodeforcoffee]

• Can we make the side-menu a little shorter? In all three of the examples the workspace is so tall that I had to scroll down to see the notifications. Users will want to see the Notifications right away.

• There is a weird bug: when I click "Mark all as read" the "Unread" tab background maintains the width even though the item shrank, so it overlaps the "Urgent" tab. It doesn't do this in the Workspace Demo site.

notification_badge_width.mp4

• In the Examples tab the image and "View example" link are broken:

They might need to use `baseUrl`?

• Events and Notification Item Events have an extra line in them?

[vanessatran-ddi]

Hello @willcodeforcoffee ,

1. Can we make the side-menu a little shorter? In all three of the examples the workspace is so tall that I had to scroll down to see the notifications. Users will want to see the Notifications right away. => Right now the style is being shared between work-side-notification-panel and work-side-menu, (min-height: 500px at workspacePreviewStyle). I will cc @twjeffery here for his input.

2. There is a weird bug: when I click "Mark all as read" the "Unread" tab background maintains the width even though the item shrank, so it overlaps the "Urgent" tab. => The workspace demo was using a customized local web-components, while this issue belongs to the current state of ui-components. You can see this happen at this workspace template demo too https://govalta.github.io/goa-workspace-playground/ which is from this template https://github.com/GovAlta/goa-workspace-playground. I created an issue separately for this Segmented tabs: active indicator does not resize when tab heading content changes #3897.

3. In the Examples tab the image and "View example" link are broken => Yes I fixed it.

4. Events and Notification Item Events have an extra line in them? => Good catch! The logic behind is we queue events based on the framework/language chosen. So when we toggle between language/framework tab, Astro renders the item but doesn't know whether the item is in the last position or not. I have a fixed on this PR, so you can test again.

Thank you @willcodeforcoffee