From 7e73bb592a006c6207deee1b08cc42592e7716e4 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 22 May 2026 00:49:25 -0700
Subject: [PATCH] [eric] toolbar: hide popover internal Search/Schedule chips +
 New btn when pills are above

---
 .../app/pages/Dashboard/DashboardToolbar.tsx  |  1 +
 .../app/pages/Workflows/SchedulePopover.tsx   | 28 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 28bca414..31b7093c 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -508,6 +508,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
             <SchedulePopover
               mode={popoverMode}
               onModeChange={setPopoverMode}
+              hideTopChrome
               historyResults={historySearch.results.map((e) => ({ id: e.id, name: e.name, closed_at: e.closed_at }))}
               historyLoading={historySearch.loading}
               historyQuery={historyQuery}
diff --git a/frontend/src/app/pages/Workflows/SchedulePopover.tsx b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
index 560666c6..8f9bad29 100644
--- a/frontend/src/app/pages/Workflows/SchedulePopover.tsx
+++ b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
@@ -32,11 +32,15 @@ interface Props {
   onExpand: () => void;
   historyScrollRef?: React.RefObject<HTMLDivElement>;
   onHistoryScroll?: () => void;
+  /** When true, hides the internal Search/Schedule chips + redundant "+ New"
+   *  pill. The new DashboardToolbar pills above the popover replace them. */
+  hideTopChrome?: boolean;
 }
 
 export default function SchedulePopover({
   mode, onModeChange, historyResults, historyLoading, historyQuery, onHistoryQueryChange,
   onHistorySelect, onNewChat, onWorkflowSelect, onExpand, historyScrollRef, onHistoryScroll,
+  hideTopChrome = false,
 }: Props) {
   const c = useClaudeTokens();
   const [calendarView, setCalendarView] = useState<'Week' | 'Month' | 'List'>('Week');
@@ -83,11 +87,15 @@ export default function SchedulePopover({
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', width: POPOVER_W, maxWidth: POPOVER_W, gap: 0.75, flexShrink: 0 }}>
-      {/* Floating mode chips OUTSIDE the content card (Figma image #30) */}
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.6, px: 0.5 }}>
-        <ModeChip label="Search" icon={<SearchIcon sx={{ fontSize: 14 }} />} active={mode === 'search'} onClick={() => onModeChange('search')} />
-        <ModeChip label="Schedule" icon={<CalendarMonthIcon sx={{ fontSize: 14 }} />} active={mode === 'schedule'} onClick={() => onModeChange('schedule')} />
-      </Box>
+      {/* Floating mode chips. Hidden when the parent toolbar supplies its
+          own pill row (Image #32 / #54); kept around so the legacy callers
+          that surface Schedule mode still have a way in. */}
+      {!hideTopChrome && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.6, px: 0.5 }}>
+          <ModeChip label="Search" icon={<SearchIcon sx={{ fontSize: 14 }} />} active={mode === 'search'} onClick={() => onModeChange('search')} />
+          <ModeChip label="Schedule" icon={<CalendarMonthIcon sx={{ fontSize: 14 }} />} active={mode === 'schedule'} onClick={() => onModeChange('schedule')} />
+        </Box>
+      )}
 
       {/* Content card — separately bordered/rounded, like image #30.
           Inner content crossfades on tab switch so search↔schedule isn't
@@ -122,10 +130,12 @@ export default function SchedulePopover({
                 placeholder="Search past chats..."
                 sx={{ flex: 1, fontSize: '0.85rem', color: c.text.primary, '& input::placeholder': { color: c.text.ghost, opacity: 1 } }}
               />
-              <Box onClick={onNewChat} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.45, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
-                <AddIcon sx={{ fontSize: 12 }} />
-                New
-              </Box>
+              {!hideTopChrome && (
+                <Box onClick={onNewChat} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.45, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
+                  <AddIcon sx={{ fontSize: 12 }} />
+                  New
+                </Box>
+              )}
             </Box>
             <Box ref={historyScrollRef} onScroll={onHistoryScroll} sx={{ flex: 1, overflowY: 'auto', borderTop: `1px solid ${c.border.subtle}` }}>
               {historyResults.length === 0 && !historyLoading && (