From cf5f40b59245ae1d5c03b6590759bd789b7dc95c Mon Sep 17 00:00:00 2001
From: cpadm <57954026+cpAdm@users.noreply.github.com>
Date: Sat, 15 Nov 2025 15:39:46 +0100
Subject: [PATCH] feat: Move actions filter to toolbar

Closes: #37952
---
 packages/trace-viewer/src/ui/workbench.css     |  9 ---------
 packages/trace-viewer/src/ui/workbench.tsx     | 18 ++++++++++++------
 .../web/src/components/dialogToolbarButton.tsx | 17 ++++++++++++-----
 packages/web/src/components/tabbedPane.tsx     |  4 ++--
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/trace-viewer/src/ui/workbench.css b/packages/trace-viewer/src/ui/workbench.css
index 99f1576a43665..03084c7c11f19 100644
--- a/packages/trace-viewer/src/ui/workbench.css
+++ b/packages/trace-viewer/src/ui/workbench.css
@@ -39,15 +39,6 @@
   color: var(--vscode-editorCodeLens-foreground);
 }
 
-.workbench-actions-status-bar {
-  padding: 2px;
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: 1px solid var(--vscode-panel-border);
-}
-
 .workbench-actions-hidden-count {
   padding-right: 4px;
   user-select: none;
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 6a736b22e0225..36a38d155ac29 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -335,10 +335,6 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
         revealConsole={() => selectPropertiesTab('console')}
         isLive={isLive}
       />
-      <div className='workbench-actions-status-bar'>
-        {!!hiddenActionsCount && <span className='workbench-actions-hidden-count' title={hiddenActionsCount + ' actions hidden by filters'}>{hiddenActionsCount} hidden</span>}
-        <ActionsFilterButton counters={model?.actionCounters} />
-      </div>
     </div>
   };
   const metadataTab: TabbedPaneTabModel = {
@@ -347,6 +343,8 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
     component: <MetadataView model={model}/>
   };
 
+  const actionsFilterWithCount = selectedNavigatorTab === 'actions' && <ActionsFilterButton counters={model?.actionCounters} hiddenActionsCount={hiddenActionsCount} />;
+
   return <div className='vbox workbench' {...(inert ? { inert: true } : {})}>
     {!hideTimeline && <Timeline
       model={model}
@@ -381,6 +379,7 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
         sidebar={
           <TabbedPane
             tabs={[actionsTab, metadataTab]}
+            rightToolbar={[actionsFilterWithCount]}
             selectedTab={selectedNavigatorTab}
             setSelectedTab={setSelectedNavigatorTab}
           />
@@ -405,9 +404,16 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
   </div>;
 };
 
-const ActionsFilterButton: React.FC<{ counters?: Map<string, number> }> = ({ counters }) => {
+const ActionsFilterButton: React.FC<{ counters?: Map<string, number>; hiddenActionsCount: number }> = ({ counters, hiddenActionsCount }) => {
   const [actionsFilter, setActionsFilter] = useSetting<ActionGroup[]>('actionsFilter', []);
-  return <DialogToolbarButton icon='filter' title='Filter actions' dialogDataTestId='actions-filter-dialog'>
+
+  const iconRef = React.useRef<HTMLButtonElement>(null);
+  const buttonChildren = <>
+    {hiddenActionsCount > 0 && <span className='workbench-actions-hidden-count' title={hiddenActionsCount + ' actions hidden by filters'}>{hiddenActionsCount} hidden</span>}
+    <span ref={iconRef} className='codicon codicon-filter'></span>
+  </>;
+
+  return <DialogToolbarButton title='Filter actions' dialogDataTestId='actions-filter-dialog' buttonChildren={buttonChildren} anchorRef={iconRef} >
     <SettingsView
       settings={[
         {
diff --git a/packages/web/src/components/dialogToolbarButton.tsx b/packages/web/src/components/dialogToolbarButton.tsx
index df561202514f4..3cc326e3434d9 100644
--- a/packages/web/src/components/dialogToolbarButton.tsx
+++ b/packages/web/src/components/dialogToolbarButton.tsx
@@ -21,20 +21,27 @@ import { Dialog } from '../shared/dialog';
 export interface DialogToolbarButtonProps {
   title?: string;
   icon?: string;
+  buttonChildren?: React.ReactNode;
+  anchorRef?: React.RefObject<HTMLElement | null>;
   dialogDataTestId?: string;
 }
 
-export const DialogToolbarButton: React.FC<React.PropsWithChildren<DialogToolbarButtonProps>> = ({ title, icon, dialogDataTestId, children }) => {
-  const hostingRef = React.useRef<HTMLButtonElement>(null);
+export const DialogToolbarButton: React.FC<React.PropsWithChildren<DialogToolbarButtonProps>> = ({ title, icon, buttonChildren, anchorRef, dialogDataTestId, children }) => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const anchor = anchorRef ?? buttonRef;
+
   const [open, setOpen] = React.useState(false);
   return (
     <>
       <ToolbarButton
-        ref={hostingRef}
+        ref={buttonRef}
         icon={icon}
         title={title}
         onClick={() => setOpen(current => !current)}
-      />
+      >
+        {buttonChildren}
+      </ToolbarButton>
+
       <Dialog
         style={{
           backgroundColor: 'var(--vscode-sideBar-background)',
@@ -44,7 +51,7 @@ export const DialogToolbarButton: React.FC<React.PropsWithChildren<DialogToolbar
         // TODO: Temporary spacing until design of toolbar buttons is revisited
         verticalOffset={8}
         requestClose={() => setOpen(false)}
-        anchor={hostingRef}
+        anchor={anchor}
         dataTestId={dialogDataTestId}
       >
         {children}
diff --git a/packages/web/src/components/tabbedPane.tsx b/packages/web/src/components/tabbedPane.tsx
index 84cbc9f3b676f..a031cdaa077ba 100644
--- a/packages/web/src/components/tabbedPane.tsx
+++ b/packages/web/src/components/tabbedPane.tsx
@@ -30,8 +30,8 @@ export interface TabbedPaneTabModel {
 
 export const TabbedPane: React.FunctionComponent<{
   tabs: TabbedPaneTabModel[],
-  leftToolbar?: React.ReactElement[],
-  rightToolbar?: React.ReactElement[],
+  leftToolbar?: React.ReactNode[],
+  rightToolbar?: React.ReactNode[],
   selectedTab?: string,
   setSelectedTab?: (tab: string) => void,
   dataTestId?: string,