trunk-merge/pr-108896/91445bc8-77e0-4bd6-8e5f-202f267ff86a-bisection

frontend/src/layout/today/TodayPaneSection.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react'
+
+import { IconChevronDown, IconChevronRight } from '@posthog/icons'
+
+import { cn } from 'lib/utils/css-classes'
+
+interface TodayPaneSectionProps {
+    label: string
+    open: boolean
+    count: number
+    onToggle: () => void
+    actions?: JSX.Element | null
+    divider?: boolean
+    dataAttr: string
+    children: ReactNode
+}
+
+export function TodayPaneSection({
+    label,
+    open,
+    count,
+    onToggle,
+    actions,
+    divider = false,
+    dataAttr,
+    children,
+}: TodayPaneSectionProps): JSX.Element {
+    const Caret = open ? IconChevronDown : IconChevronRight
+    return (
+        <section aria-label={label} className={cn('TodayPaneSection', divider && 'TodayPaneSection--divider')}>
+            <div className="TodayPaneSection__header">
+                <button
+                    type="button"
+                    className="TodayPaneSection__toggle Today__label"
+                    aria-expanded={open}
+                    data-attr={dataAttr}
+                    onClick={onToggle}
+                >
+                    <span>{label}</span>
+                    <Caret className="TodayPaneSection__caret" />
+                    {!open && count > 0 && <span className="TodayPaneSection__count">{count}</span>}
+                </button>
+                {open && actions && <div className="TodayPaneSection__actions">{actions}</div>}
+            </div>
+            {open && <div className="TodayPaneSection__body">{children}</div>}
+        </section>
+    )
+}

frontend/src/layout/today/TodayShell.scss

@@ -51,6 +51,107 @@
     letter-spacing: 0.08em;
 }
 
+.TodayPaneSection {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 8px;
+
+    &:first-child {
+        margin-top: 12px;
+    }
+
+    &--divider {
+        border-top: 1px solid var(--today-line);
+    }
+}
+
+.TodayPaneSection__header {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    height: 32px;
+    margin-top: 4px;
+}
+
+.TodayPaneSection__toggle {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 4px;
+    align-items: center;
+    min-width: 0;
+    padding: 4px 8px;
+    text-align: left;
+    border-radius: 6px;
+    transition: color 0.16s;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            color: var(--today-ink);
+        }
+    }
+}
+
+.TodayPaneSection__caret {
+    flex: 0 0 11px;
+    width: 11px;
+    height: 11px;
+    opacity: 0.7;
+}
+
+.TodayPaneSection__count {
+    margin-left: 2px;
+    font-variant-numeric: tabular-nums;
+    color: var(--today-muted);
+}
+
+.TodayPaneSection__actions {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+}
+
+.TodayPaneSection__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.TodayPane__group {
+    padding: 12px 8px 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--today-muted);
+
+    &--first {
+        padding-top: 4px;
+    }
+}
+
+.TodayPane__dot {
+    width: 6px;
+    height: 6px;
+    background: var(--today-faint);
+    border-radius: 50%;
+
+    &[data-status='queued'],
+    &[data-status='in_progress'] {
+        background: var(--warning);
+    }
+
+    &[data-status='completed'] {
+        background: var(--success);
+    }
+
+    &[data-status='failed'] {
+        background: var(--danger);
+    }
+
+    &[data-kind='chat'] {
+        background: transparent;
+        border: 1px solid var(--today-faint);
+    }
+}
+
 .TodayPane__state {
     display: flex;
     flex-direction: column;