Refactor: Extract filterTransientProps utility function

Created a reusable utility function to filter out styled-components
transient props (starting with '$') before spreading to DOM elements.

Changes:
- Created filterTransientProps utility in utils/filterTransientProps.ts
- Replaced all inline filter logic with utility function calls in:
  - Topbar/styled.tsx (6 components)
  - Toolbar/styled.tsx (PlainButton)
  - components/Button.tsx (PlainButton)

Benefits:
- Eliminates code duplication across components
- Centralizes transient prop filtering logic
- Improves maintainability and consistency

Addresses review comment from @RoyEJohnson on PR #2846

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Update styled.tsx

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/app/components/Button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { isDefined } from '../guards';
 import theme from '../theme';
 import { linkColor, linkHover } from './Typography/Links.constants';
+import { filterTransientProps } from '../content/components/utils/filterTransientProps';
 // Note: Button.css is imported globally from src/app/index.tsx to ensure consistent
 // CSS ordering across code-split chunks and to avoid PrettyFormatPluginError in jest snapshots
 
@@ -176,14 +177,7 @@ export function ButtonGroup({
 
 export const PlainButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
   function PlainButton({ className, ...props }, ref) {
-    // Filter out transient props (starting with $) to prevent them from being forwarded to the DOM
-    // Styled-components uses transient props for style-only props that shouldn't appear as HTML attributes
-    const safeProps = Object.keys(props).reduce((acc, key) => {
-      if (!key.startsWith('$')) {
-        acc[key] = props[key as keyof typeof props];
-      }
-      return acc;
-    }, {} as Record<string, unknown>) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    const safeProps = filterTransientProps(props) as React.ButtonHTMLAttributes<HTMLButtonElement>;
     return (
       <button
         {...safeProps}

src/app/content/components/Toolbar/styled.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components/macro';
 import classNames from 'classnames';
 import theme from '../../../theme';
 import { toolbarIconColor } from '../constants';
+import { filterTransientProps } from '../utils/filterTransientProps';
 
 interface IconProps extends React.SVGAttributes<SVGSVGElement> {
   className?: string;
@@ -118,14 +119,7 @@ interface PlainButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
 
 export const PlainButton = React.forwardRef<HTMLButtonElement, PlainButtonProps>(
   ({ className, style, children, ...props }, ref) => {
-    // Filter out transient props (starting with $) to prevent them from being forwarded to the DOM
-    // Styled-components uses transient props for style-only props that shouldn't appear as HTML attributes
-    const safeProps = Object.keys(props).reduce((acc, key) => {
-      if (!key.startsWith('$')) {
-        acc[key] = (props as Record<string, unknown>)[key];
-      }
-      return acc;
-    }, {} as Record<string, unknown>) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    const safeProps = filterTransientProps(props) as React.ButtonHTMLAttributes<HTMLButtonElement>;
 
     return (
       <button

src/app/content/components/Topbar/styled.tsx

@@ -27,6 +27,7 @@ import { FilterDropdown } from '../popUp/Filters';
 import { toolbarIconStyles } from '../Toolbar/iconStyles';
 import { buttonMinWidth, PlainButton } from '../Toolbar/Toolbar.legacy';
 import { disablePrintClass } from '../utils/disablePrint';
+import { filterTransientProps } from '../utils/filterTransientProps';
 import { isVerticalNavOpenConnector } from '../utils/sidebar';
 
 interface IconProps extends React.SVGAttributes<SVGSVGElement> {
@@ -142,14 +143,7 @@ interface MenuButtonProps {
 
 export function MenuButton(props: MenuButtonProps) {
   const intl = useIntl();
-
-  // Filter transient props before spreading to DOM
-  const safeProps = Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
-    if (!key.startsWith('$')) {
-      acc[key] = (props as Record<string, unknown>)[key];
-    }
-    return acc;
-  }, {});
+  const safeProps = filterTransientProps(props as Record<string, unknown>);
 
   return (
     <PlainButton
@@ -177,14 +171,7 @@ export function SearchButton(
   { desktop, mobile, ariaLabelId, colorSchema, className, style, ...props }: SearchButtonProps
 ) {
   const intl = useIntl();
-
-  // Filter transient props before spreading to DOM
-  const safeProps = Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
-    if (!key.startsWith('$')) {
-      acc[key] = (props as Record<string, unknown>)[key];
-    }
-    return acc;
-  }, {});
+  const safeProps = filterTransientProps(props);
 
   // Get search icon color from theme
   const iconColor = colorSchema ? theme.color.primary[colorSchema].foreground : toolbarIconColor.base;
@@ -229,13 +216,7 @@ interface CloseButtonProps {
 }
 
 export function CloseButton({ desktop, formSubmitted, className, style, ...props }: CloseButtonProps) {
-  // Filter transient props before spreading to DOM
-  const safeProps = Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
-    if (!key.startsWith('$')) {
-      acc[key] = (props as Record<string, unknown>)[key];
-    }
-    return acc;
-  }, {});
+  const safeProps = filterTransientProps(props);
 
   return (
     <PlainButton
@@ -270,13 +251,7 @@ interface CloseButtonNewProps {
 }
 
 export function CloseButtonNew({ children, className, style, ...props }: CloseButtonNewProps) {
-  // Filter transient props before spreading to DOM
-  const safeProps = Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
-    if (!key.startsWith('$')) {
-      acc[key] = (props as Record<string, unknown>)[key];
-    }
-    return acc;
-  }, {});
+  const safeProps = filterTransientProps(props);
 
   return (
     <button
@@ -361,13 +336,7 @@ export function SearchInput({ desktop, mobile, autoFocus, className, style, ...p
     }
   }, [autoFocus]);
 
-  // Filter transient props before spreading to DOM
-  const safeProps = Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
-    if (!key.startsWith('$')) {
-      acc[key] = (props as Record<string, unknown>)[key];
-    }
-    return acc;
-  }, {});
+  const safeProps = filterTransientProps(props);
 
   return (
     <input
@@ -621,14 +590,7 @@ export function TextResizerChangeButton(
   { ariaLabelId, children, className, style, ...props }: TextResizerChangeButtonProps
 ) {
   const intl = useIntl();
-
-  // Filter transient props before spreading to DOM
-  const safeProps = Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
-    if (!key.startsWith('$')) {
-      acc[key] = (props as Record<string, unknown>)[key];
-    }
-    return acc;
-  }, {});
+  const safeProps = filterTransientProps(props);
 
   return (
     <PlainButton

src/app/content/components/utils/filterTransientProps.ts

@@ -0,0 +1,25 @@
+/**
+ * Filters out transient props (props starting with '$') that are used by styled-components
+ * but should not be passed to DOM elements.
+ *
+ * @param props - The props object to filter
+ * @returns A new object with transient props removed
+ *
+ * @example
+ * ```tsx
+ * function MyComponent(props: MyProps) {
+ *   const safeProps = filterTransientProps(props);
+ *   return <div {...safeProps}>Content</div>;
+ * }
+ * ```
+ */
+export function filterTransientProps<T extends Record<string, unknown>>(
+  props: T
+): Record<string, unknown> {
+  return Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
+    if (!key.startsWith('$')) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+}