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

معرفی

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

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

زمین بازی

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

استفاده

import { PostDetailsDrawer } from '@parto-system-design/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

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

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