Example: Chat / Channel Detail Panel Layout Using Standard Components

[IgorShevchik]

Overview

Create a demo layout that replicates a Bitrix24-style chat/channel detail side panel using standard components only. The goal is to demonstrate how out-of-the-box components can be composed into a real-world sidebar UI with minimal custom styling.

Reference Screenshot

⚠️ Attach the reference screenshot here (see task description for the original image).

The panel represents a channel/group-chat info sidebar and contains the following sections from top to bottom:

┌─────────────────────────────┐
│      [Square Avatar 24]     │  ← large square avatar
│   Channel name / subtitle   │
│  👤👤👤👤 +1  [+ Add]      │  ← grouped small user avatars
├─────────────────────────────┤
│ 🔊 Sound              [ON]  │  ← toggle row
│ 🕐 Auto-delete msgs  [OFF]  │  ← toggle row + sub-label
├─────────────────────────────┤
│ ℹ️  Group chat              │  ← icon + label row (read-only)
│ ⭐ Favorites           [0]  │  ← icon + label + badge
│ 🔗 Links from messages [18] │  ← icon + label + badge
├─────────────────────────────┤
│ Media & Files               │  ← section heading
│   [🖼] No media or files    │  ← empty state with icon
├─────────────────────────────┤
│ Tasks              [+ Add]  │  ← section heading + action
│   [✅] No tasks             │  ← empty state with icon
├─────────────────────────────┤
│ Meetings           [+ Add]  │  ← section heading + action
│   [📅] No meetings          │  ← empty state with icon
└─────────────────────────────┘

UI Elements to Implement

Element	Description
Square avatar	Large rounded-square avatar at the top (e.g. channel logo)
Grouped user avatars	A compact avatar group (overlapping small circles) with overflow counter +N and an "+ Add" button
Toggle rows	Label + icon on the left, toggle switch on the right; optional sub-label below
Icon + label rows	Info/nav rows with a leading icon, text label, and optional numeric badge on the right
Section blocks	Titled sections with an optional + Add action in the header and an empty-state placeholder (icon + text) when the list is empty

Requirements

• Responsive — layout adapts gracefully to narrow (mobile) and wider (sidebar/desktop) widths
• Minimum custom styling — rely on component defaults; avoid overriding design tokens or adding bespoke CSS where a standard prop suffices
• Standard components only — use only components available in b24ui; no third-party UI libraries

Goal

Serve as a reference example showing how standard b24ui components can be assembled into a non-trivial, production-like detail panel without heavy customisation.

Acceptance Criteria

• Large square avatar is displayed at the top
• Grouped small user avatars render with overflow counter and "+ Add" button
• Toggle rows for Sound and Auto-delete messages work correctly
• Icon + label rows render with optional badge counts
• Section blocks (Media, Tasks, Meetings) show heading, optional action button, and empty-state placeholder
• No significant inline styles or custom CSS classes beyond component props
• Works on mobile and desktop viewports

[IgorShevchik]

🎉 Shipped in #46 — your channel info sidebar is now living rent-free in the docs!

The panel is built entirely from standard b24ui components — no custom CSS, no third-party libraries, just composition:

What	How
Square avatar	B24Avatar + :b24ui="{ root: 'rounded-xl' }"
Members group with +N overflow	B24AvatarGroup :max="4" + one extra child
Toggle rows (icon + label + switch)	B24Switch label="..." + flex-row-reverse via b24ui
Sub-label aligned under text, not icon	invisible <span class="size-5 shrink-0" /> spacer
Section dividers	divide-y divide-default on B24Card body
Empty section placeholders	B24Empty + :b24ui="{ root: 'ring-0 rounded-none py-3' }"

Where to find it:

• 📖 Docs — Card page → Examples → Channel detail panel (with a collapsible code block)
• 🛝 Demo playground — Components → Card page, scroll to the bottom
• 🤖 AI skill — detail-panel recipe in skills/b24-ui-nuxt

Want to generate a similar panel with AI? Paste this prompt into Cursor, Windsurf or any Claude-powered assistant:

You are a Bitrix24 UI expert. Help me build an entity detail sidebar
using only @bitrix24/b24ui-nuxt components.

Before writing any code, ask me:
- What entity is this panel for?
- Which header info (avatar shape, title, subtitle, member group)?
- Which toggles and their defaults?
- Which info rows and counters?
- Which content sections and their empty states?

Thanks for the well-scoped issue — the ASCII art layout spec made it a pleasure to implement! 🙏

---

Generated by Claude Code