[HUD][cost analysis] Change regex button to use component (#6987)

Please review #6986 first

I created a component for the regex toggle search in an earlier PR, so
this converts the cost analysis page to also use it.

Also this fixes some warning I got about InputProps being deprecated and
replaced with slotProps.input

Changes:
* I think there is slightly more animation now
* The button changed shape slightly
* The tooltip is different "Enable regex pattern matching" -> "Enable
regex search"

Old:
<img width="211" height="67" alt="image"
src="https://github.com/user-attachments/assets/09db8ac2-6aa0-4295-a94e-6e44c2b4f8c8"
/>

New:
<img width="215" height="58" alt="image"
src="https://github.com/user-attachments/assets/d5b62281-f734-449f-b552-e5eec8526235"
/>

Author: clee2000

torchci/pages/cost_analysis.tsx

@@ -18,6 +18,7 @@ import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import CopyLink from "components/common/CopyLink";
 import MultiSelectPicker from "components/common/MultiSelectPicker";
+import RegexButton from "components/common/RegexButton";
 import TimeSeriesPanel, {
   ChartType,
   Granularity,
@@ -650,45 +651,13 @@ export default function Page() {
           variant="outlined"
           fullWidth
           value={inputValue}
-          InputProps={{
-            startAdornment: <FaFilter />,
-            endAdornment: (
-              <Tooltip
-                title={
-                  isRegex
-                    ? "Disable regex pattern matching"
-                    : "Enable regex pattern matching"
-                }
-              >
-                <div
-                  style={{ cursor: "pointer" }}
-                  onClick={() => setIsRegex(!isRegex)}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      padding: "4px 8px",
-                      marginRight: "4px",
-                      borderRadius: "4px",
-                      fontSize: "0.75rem",
-                      fontFamily: "monospace",
-                      backgroundColor: isRegex
-                        ? "rgba(63, 81, 181, 0.1)"
-                        : "transparent",
-                      color: isRegex ? "primary.main" : "text.secondary",
-                      border: isRegex
-                        ? "1px solid rgba(63, 81, 181, 0.5)"
-                        : "1px solid transparent",
-                      transition: "all 0.2s",
-                    }}
-                  >
-                    .*
-                  </div>
-                </div>
-              </Tooltip>
-            ),
+          slotProps={{
+            input: {
+              startAdornment: <FaFilter />,
+              endAdornment: (
+                <RegexButton isRegex={isRegex} setIsRegex={setIsRegex} />
+              ),
+            },
           }}
         />
       </Box>