refactor(query): Refactor QueryInputBox into a dedicated component from SearchTabPanel.

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.css

@@ -0,0 +1,33 @@
+.query-input-box-with-progress {
+    /* JoyUI has a rounding issue when calculating the Textarea width, causing it to overflow its
+      container. */
+    margin-right: 1px;
+}
+
+.query-input-box {
+    flex-direction: row !important;
+    border-radius: 0 !important;
+}
+
+.query-option-button {
+    width: 1.5rem !important;
+    min-width: 0 !important;
+    height: 1.5rem !important;
+    min-height: 0 !important;
+
+    font-family: Inter, sans-serif !important;
+}
+
+.query-input-box-textarea {
+    width: 0;
+}
+
+.query-input-box-end-decorator {
+    display: block !important;
+    margin-block-start: 0 !important;
+}
+
+.query-input-box-linear-progress {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --LinearProgress-radius: 0 !important;
+}

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.tsx

@@ -0,0 +1,120 @@
+import React, {
+    useContext,
+    useState,
+} from "react";
+
+import {
+    LinearProgress,
+    Stack,
+    Textarea,
+} from "@mui/joy";
+
+import {StateContext} from "../../../../../contexts/StateContextProvider";
+import {
+    QUERY_PROGRESS_VALUE_MAX,
+    QueryArgs,
+} from "../../../../../typings/query";
+import {UI_ELEMENT} from "../../../../../typings/states";
+import {isDisabled} from "../../../../../utils/states";
+import ToggleIconButton from "./ToggleIconButton";
+
+import "./QueryInputBox.css";
+
+
+/**
+ * Provides a text input and optional toggles for submitting search queries.
+ *
+ * @return
+ */
+const QueryInputBox = () => {
+    const {queryProgress, startQuery, uiState} = useContext(StateContext);
+
+    const [queryString, setQueryString] = useState<string>("");
+    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
+    const [isRegex, setIsRegex] = useState<boolean>(false);
+
+    const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
+        startQuery({
+            isCaseSensitive: isCaseSensitive,
+            isRegex: isRegex,
+            queryString: queryString,
+            ...newArgs,
+        });
+    };
+
+    const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setQueryString(ev.target.value);
+        handleQuerySubmit({queryString: ev.target.value});
+    };
+
+    const handleCaseSensitivityButtonClick = () => {
+        handleQuerySubmit({isCaseSensitive: !isCaseSensitive});
+        setIsCaseSensitive(!isCaseSensitive);
+    };
+
+    const handleRegexButtonClick = () => {
+        handleQuerySubmit({isRegex: !isRegex});
+        setIsRegex(!isRegex);
+    };
+
+    const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
+
+    return (
+        <div className={"query-input-box-with-progress"}>
+            <Textarea
+                className={"query-input-box"}
+                maxRows={7}
+                placeholder={"Search"}
+                size={"sm"}
+                endDecorator={
+                    <Stack
+                        direction={"row"}
+                        spacing={0.25}
+                    >
+                        <ToggleIconButton
+                            className={"query-option-button"}
+                            disabled={isQueryInputBoxDisabled}
+                            isChecked={isCaseSensitive}
+                            size={"sm"}
+                            tooltipTitle={"Match case"}
+                            variant={"plain"}
+                            onClick={handleCaseSensitivityButtonClick}
+                        >
+                            Aa
+                        </ToggleIconButton>
+
+                        <ToggleIconButton
+                            className={"query-option-button"}
+                            disabled={isQueryInputBoxDisabled}
+                            isChecked={isRegex}
+                            size={"sm"}
+                            tooltipTitle={"Use regular expression"}
+                            variant={"plain"}
+                            onClick={handleRegexButtonClick}
+                        >
+                            .*
+                        </ToggleIconButton>
+                    </Stack>
+                }
+                slotProps={{
+                    textarea: {
+                        className: "query-input-box-textarea",
+                        disabled: isQueryInputBoxDisabled,
+                    },
+                    endDecorator: {className: "query-input-box-end-decorator"},
+                }}
+                onChange={handleQueryInputChange}/>
+            <LinearProgress
+                className={"query-input-box-linear-progress"}
+                determinate={true}
+                thickness={4}
+                value={queryProgress * 100}
+                color={QUERY_PROGRESS_VALUE_MAX === queryProgress ?
+                    "success" :
+                    "primary"}/>
+        </div>
+    );
+};
+
+
+export default QueryInputBox;

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css

@@ -5,40 +5,6 @@
     height: 100%;
 }
 
-.query-input-box-with-progress {
-    /* JoyUI has a rounding issue when calculating the Textarea width, causing it to overflow its
-      container. */
-    margin-right: 1px;
-}
-
-.query-input-box {
-    flex-direction: row !important;
-    border-radius: 0 !important;
-}
-
-.query-option-button {
-    width: 1.5rem !important;
-    min-width: 0 !important;
-    height: 1.5rem !important;
-    min-height: 0 !important;
-
-    font-family: Inter, sans-serif !important;
-}
-
-.query-input-box-textarea {
-    width: 0;
-}
-
-.query-input-box-end-decorator {
-    display: block !important;
-    margin-block-start: 0 !important;
-}
-
-.query-input-box-linear-progress {
-    /* stylelint-disable-next-line custom-property-pattern */
-    --LinearProgress-radius: 0 !important;
-}
-
 .query-results {
     overflow-y: auto;
     flex-grow: 1;

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx

@@ -1,34 +1,25 @@
-import React, {
+import {
     useContext,
     useState,
 } from "react";
 
 import {
     AccordionGroup,
     Box,
-    LinearProgress,
-    Stack,
-    Textarea,
 } from "@mui/joy";
 
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
 import {StateContext} from "../../../../../contexts/StateContextProvider";
-import {
-    QUERY_PROGRESS_VALUE_MAX,
-    QueryArgs,
-} from "../../../../../typings/query";
-import {UI_ELEMENT} from "../../../../../typings/states";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
-import {isDisabled} from "../../../../../utils/states";
 import CustomTabPanel from "../CustomTabPanel";
 import PanelTitleButton from "../PanelTitleButton";
+import QueryInputBox from "./QueryInputBox";
 import ResultsGroup from "./ResultsGroup";
-import ToggleIconButton from "./ToggleIconButton";
 
 import "./index.css";
 
@@ -39,42 +30,14 @@ import "./index.css";
  * @return
  */
 const SearchTabPanel = () => {
-    const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
+    const {queryResults} = useContext(StateContext);
+
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
-    const [queryString, setQueryString] = useState<string>("");
-    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
-    const [isRegex, setIsRegex] = useState<boolean>(false);
 
     const handleCollapseAllButtonClick = () => {
         setIsAllExpanded((v) => !v);
     };
 
-    const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
-        startQuery({
-            isCaseSensitive: isCaseSensitive,
-            isRegex: isRegex,
-            queryString: queryString,
-            ...newArgs,
-        });
-    };
-
-    const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setQueryString(ev.target.value);
-        handleQuerySubmit({queryString: ev.target.value});
-    };
-
-    const handleCaseSensitivityButtonClick = () => {
-        handleQuerySubmit({isCaseSensitive: !isCaseSensitive});
-        setIsCaseSensitive(!isCaseSensitive);
-    };
-
-    const handleRegexButtonClick = () => {
-        handleQuerySubmit({isRegex: !isRegex});
-        setIsRegex(!isRegex);
-    };
-
-    const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
-
     return (
         <CustomTabPanel
             tabName={TAB_NAME.SEARCH}
@@ -93,59 +56,7 @@ const SearchTabPanel = () => {
             }
         >
             <Box className={"search-tab-container"}>
-                <div className={"query-input-box-with-progress"}>
-                    <Textarea
-                        className={"query-input-box"}
-                        maxRows={7}
-                        placeholder={"Search"}
-                        size={"sm"}
-                        endDecorator={
-                            <Stack
-                                direction={"row"}
-                                spacing={0.25}
-                            >
-                                <ToggleIconButton
-                                    className={"query-option-button"}
-                                    disabled={isQueryInputBoxDisabled}
-                                    isChecked={isCaseSensitive}
-                                    size={"sm"}
-                                    tooltipTitle={"Match case"}
-                                    variant={"plain"}
-                                    onClick={handleCaseSensitivityButtonClick}
-                                >
-                                    Aa
-                                </ToggleIconButton>
-
-                                <ToggleIconButton
-                                    className={"query-option-button"}
-                                    disabled={isQueryInputBoxDisabled}
-                                    isChecked={isRegex}
-                                    size={"sm"}
-                                    tooltipTitle={"Use regular expression"}
-                                    variant={"plain"}
-                                    onClick={handleRegexButtonClick}
-                                >
-                                    .*
-                                </ToggleIconButton>
-                            </Stack>
-                        }
-                        slotProps={{
-                            textarea: {
-                                className: "query-input-box-textarea",
-                                disabled: isQueryInputBoxDisabled,
-                            },
-                            endDecorator: {className: "query-input-box-end-decorator"},
-                        }}
-                        onChange={handleQueryInputChange}/>
-                    <LinearProgress
-                        className={"query-input-box-linear-progress"}
-                        determinate={true}
-                        thickness={4}
-                        value={queryProgress * 100}
-                        color={QUERY_PROGRESS_VALUE_MAX === queryProgress ?
-                            "success" :
-                            "primary"}/>
-                </div>
+                <QueryInputBox/>
                 <AccordionGroup
                     className={"query-results"}
                     disableDivider={true}