Call Popup
着信通知を積み上げて表示する固定幅パネル。NotificationButton から開かれ、対応履歴を一覧しながら次に取るべき着信を判断するための領域。オペレーターが常に視界に置く CTI 業務の中核 UI。
プレビュー
左が空状態、右が着信 4 件が積まれた状態。閉じる ✕ を押すとその通知だけが取り除かれる想定。
状態
空状態
着信が 1 件も無い状態。ベルアイコンと「着信通知エリア」のプレースホルダーテキストを中央に配置する。
着信あり
着信カードを縦に積み上げる。件数がパネル高を超えたら内部でスクロールする。
着信カードの構造
1 件の着信は「ヘッダー (名前 + 閉じるボタン)」と「メタ情報 (時刻・電話番号・所属)」の 2 段構成。所属は省略可能。
実装例
import { CallPopup, type CallItem } from "@/components/CallPopup";
const items: CallItem[] = [
{ id: "1", name: "山田 太郎", timestamp: "2026-07-16 17:40:49", phone: "09012345678", department: "経理部" },
{ id: "2", name: "佐藤 花子", timestamp: "2026-07-17 09:15:30", phone: "08098765432", department: "営業部" },
];
export function Example() {
return <CallPopup items={items} onDismiss={(id) => console.log("dismiss", id)} />;
}利用基準
使うべき時
- 画面右端に固定配置し、NotificationButton の開閉トグルで表示/収納する
- 1 件の着信につき 1 枚のカードを積み上げる (時系列は新しい順)
- 件数がパネル高を超えたら内部でスクロールさせる
- 対応が完了した着信は ✕ で明示的に消してもらう
使わない時
- 汎用のお知らせ・システム通知 (メンテナンス告知など) を混在させる → 別領域で扱う
- パネル内にボタンやリンクを増やしてダッシュボード化する (一覧の見通しが落ちる)
- 着信中の相手を Call Popup 内で強調する (それは NotificationButton 側の役割)
- 幅を可変にする (レイアウト全体のグリッドが崩れる)
仕様
- primitive:
src/components/CallPopup.tsx - 幅: 272px 固定 (col2 =
--width-col-2、開いた状態)。閉じた状態は width 0 でアニメーションしながら畳む - 内部スクロール: shadcn ScrollArea (
src/components/ui/scroll-area.tsx) を使用。スクロールバーは幅 10px のオーバーレイ表示で、パネル右端の内側 4px の位置に重なる。見切れるカードは枠の直前まで表示される - パディング: 24px (
--spacing-s)、カード間 gap は 16px (--spacing-xs) - 背景:
--bg-over-background、外枠:--border-default1px、角丸:--radius-l(12px) - カード背景:
--bg-surface、shadow は0 1px 1px var(--overlay-shadow) - 各メタ行 (時刻・電話番号・所属) は 12px アイコン +
--font-size-xsテキスト、色は--text-secondary