feat(examples): Chat/Channel Detail Panel layout example (#45)

[IgorShevchik]

$(cat <<'EOF'

Summary

• Adds channel-panel example page to both playgrounds/demo and playgrounds/nuxt
• Registers channel-panel in useNavigation composable in both playgrounds
• Demonstrates composition of a Bitrix24-style chat/channel detail sidebar using standard b24ui components with minimal custom styling

Components used

UI element	Component
Square channel avatar	B24Avatar with size="3xl" + b24ui.root: 'rounded-xl'
Grouped member avatars	B24AvatarGroup + B24Button
Sound / Auto-delete toggles	B24Switch in flex row with icon
Favorites / Links counters	B24Badge
Media, Tasks, Meetings empty states	B24Empty
Section "+ Add" actions	B24Button
Section dividers	divide-y divide-default via B24Card b24ui prop

Test plan

• Open channel-panel in demo playground — panel renders centered
• Open channel-panel in nuxt playground — panel renders centered
• Toggle Sound switch — state changes
• Toggle Auto-delete switch — sub-label updates
• Verify responsive layout on mobile (narrow viewport) and desktop

Closes #45
EOF
)

---

Generated by Claude Code

[IgorShevchik]

Review note (cross-PR consistency) — there's a problem with the examples navigation that needs resolving before merge. Flagging on both this PR and #47, since they collide.

1. Guaranteed merge conflict with #47. Both this PR and #47 add an examples const and a { id: 'examples', label: 'Examples' } group to the same lines of playgrounds/nuxt/app/composables/useNavigation.ts and playgrounds/demo/app/composables/useNavigation.ts (plus an icon import at the same location). Whichever merges second will conflict in four files.

2. The two PRs implement the group inconsistently — this is the thing to settle together:

• This PR (feat(examples): Chat/Channel Detail Panel layout example (#45) #46): examples items route to to: /components/${example}, page under pages/components/channel-panel.vue. Note the item lives in the Examples group yet routes into /components/*, and channel-panel is not in the components array — so it's a recipe shown under a group whose route tree is the components one.
• feat(examples): task form layout recipe (#44) #47: routes to to: /examples/${example} with a new pages/examples/ directory.

Current repo practice keeps everything under pages/components/* → /components/* (no /examples/ tree exists yet), and surfaces composed examples through the relevant component docs page via ::component-example (your card.md change does this correctly). If a dedicated top-level examples group/route is genuinely wanted, please align it with #47 rather than shipping two variants.

Good here: this PR correctly registers references/recipes/detail-panel.md in skills/index.json — that's the pattern #47 is currently missing.

Minor: label: upperName(example) here vs upperName(example.split('/').pop() as string) used by the components/#47 mapping — pick one for consistency.

Suggested resolution: coordinate one convention with #47, land one PR first, rebase the other.

---

Generated by Claude Code