PostDetailsDrawer (پنل جزئیات)

معرفی

<PostDetailsDrawer> Surface canonical برای نمایش جزئیات کامل یک پست در دسکتاپ است. الگوی Linear inbox / Brandwatch / Gmail — کاربر می‌تواند بدون بستن پنل، با j و k به پست بعدی/قبلی در فید برود.

• چه زمانی استفاده کنیم: برای نمایش پست انتخاب‌شده در <PostList>. در موبایل به‌طور خودکار به‌صورت full-screen bottom sheet دیده می‌شود.
• چه زمانی استفاده نکنیم: برای modalهای موقت اطلاع‌رسانی — از <Dialog> استفاده کنید.

زمین بازی

با تغییر کنترل‌های زیر، حالت‌های مختلف پنل جزئیات را زنده ببینید — از نبود تحلیل هوشمند تا متن‌های طولانی، انواع رسانه، حالت بحرانی و پنل بدون نظرات.

استفاده

import { PostDetailsDrawer } from '@partodata/ui'
;<PostDetailsDrawer
  open={Boolean(detailsPost)}
  onOpenChange={(o) => !o && setDetailsPost(null)}
  post={detailsPost}
  details={detailsByPostId[detailsPost.id]}
  bookmarked={bookmarkedIds.has(detailsPost.id)}
  onBookmark={handleBookmark}
  onNext={() => navigate(1)}
  onPrevious={() => navigate(-1)}
/>

Tabs

• post — متن، رسانه، URL preview، نقل‌قول، سیگنال‌ها (sentiment/emotion/flow/severity/cluster/language)، گرید متریک‌ها. در context="detail" و url قابل پخش، video به HTML5 <video controls> تبدیل می‌شود.
• comments — نظرات تو‌در‌تو با enrichment کامل (replyCount, edited, badge, authorReply, hiddenByModerator, toxicityScore, translatedText toggle). تو در تو با depth.
• analysis — surface غنی شامل:
  • خلاصه پست
  • کارت سه‌گانه: نیت پیام + اطمینان مدل + تأثیرگذاری نویسنده
  • توزیع احساسات (نمودار میله‌ای ۹-کلاسه)
  • موضوعات، موجودیت‌های شناسایی‌شده (شخص/برند/مکان/…)
  • ریسک‌های شناسایی‌شده
  • اطلاعات پلتفرم (platformMeta) به صورت key-value list — متفاوت برای هر منبع (Instagram saves/location، Twitter retweet/quote، YouTube subscribers، Press AVE، …)
  • تاریخ تولید تحلیل
• transcript — رونوشت ویدیو/صوت + OCR.

کیبورد

• j / ↓ → پست بعدی
• k / ↑ → پست قبلی
• Esc → بستن

RTL

درآور در پنل‌های افکارسنجی همیشه روی لبه‌ی بصری راست ظاهر می‌شود (جایی که چشم RTL در آنجا anchor شده). پیاده‌سازی: ترکیب dir="rtl" صریح روی SheetContent + override فیزیکی (!start-auto !end-auto !right-0 !left-auto) تا از سناریوهای portal-context که dir را به ارث نمی‌برند هم امن باشد.

راهنمای استفاده

جدول ویژگی‌ها

PostDetails

دسترسی‌پذیری

• پنل روی primitive Sheet (Radix Dialog) ساخته شده است: هنگام باز شدن role="dialog" و aria-modal دارد، فوکوس داخل پنل trap می‌شود و هنگام بستن به عنصر قبلی برمی‌گردد.
• عنوان دیالوگ با SheetTitle مخفی (sr-only) به‌صورت «جزئیات پست از (نام نویسنده)» رندر می‌شود — صفحه‌خوان نام دیالوگ را با هویت پست اعلام می‌کند، بدون تکرار بصری هدر.
• دکمه بستن داخلی Sheet متن sr-only «بستن» دارد؛ همه اکشن‌های آیکنی هدر aria-label دارند: «نشانه‌گذاری / حذف از نشان‌شده‌ها»، «کپی لینک» و «مشاهده در مبدأ». پس از کپی موفق، aria-label دکمه کپی به «کپی شد» تغییر می‌کند.
• تب‌ها Radix Tabs هستند (role="tablist" / tab / tabpanel) با ناوبری Arrow بین triggerها؛ تب‌های فاقد داده disabled می‌شوند و از ترتیب فوکوس خارج‌اند.
• میان‌برهای j/k/↓/↑ فقط وقتی پنل باز است فعال‌اند و اگر فوکوس داخل input یا textarea باشد، غیرفعال می‌شوند تا تایپ کاربر ربوده نشود. Esc را خود Sheet مدیریت می‌کند (بخش «کیبورد» بالا).
• حالت بارگذاری هر تب با role="status" و aria-busy="true" رندر می‌شود تا صفحه‌خوان در جریان واکشی details قرار بگیرد.
• در نمودار «توزیع احساسات»، هر میله role="progressbar" با aria-valuenow/aria-valuemin/aria-valuemax و aria-label شامل نام احساس و درصد آن است.

کامپوننت‌های مرتبط

• برای فید خود پست‌ها → <PostList> (که با onOpenDetails خودش drawer را باز می‌کند)
• برای quoted/embedded posts درون drawer → <PostQuotedEmbed> (رندر می‌شود وقتی post.quoted ست شده)
• برای اکشن‌های گروهی روی پست‌های انتخاب‌شده → <PostBulkActionBar>