feat(query): Add a "Search" tab in the Sidebar for wildcard queries.

src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import {
+    ButtonGroup,
     DialogContent,
     DialogTitle,
     TabPanel,
@@ -14,6 +15,7 @@ interface CustomTabPanelProps {
     children: React.ReactNode,
     tabName: string,
     title: string,
+    titleButtons?: React.ReactNode,
 }
 
 /**
@@ -23,9 +25,15 @@ interface CustomTabPanelProps {
  * @param props.children
  * @param props.tabName
  * @param props.title
+ * @param props.titleButtons
  * @return
  */
-const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => {
+const CustomTabPanel = ({
+    children,
+    tabName,
+    title,
+    titleButtons,
+}: CustomTabPanelProps) => {
     return (
         <TabPanel
             className={"sidebar-tab-panel"}
@@ -38,6 +46,13 @@ const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => {
                 >
                     {title}
                 </Typography>
+                <ButtonGroup
+                    size={"sm"}
+                    spacing={"1px"}
+                    variant={"plain"}
+                >
+                    {titleButtons}
+                </ButtonGroup>
             </DialogTitle>
             <DialogContent>
                 {children}

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

@@ -0,0 +1,23 @@
+.result-button {
+    user-select: none;
+
+    overflow: hidden;
+    display: flex !important;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.result-text {
+    display: inline !important;
+    font-size: 0.875rem !important;
+    font-weight: 400 !important;
+}
+
+.before-match,
+.match,
+.after-match {
+    overflow: hidden;
+    flex: 1 1 0; /* Allow each item to take an equal part */
+    text-overflow: ellipsis;
+}

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

@@ -0,0 +1,61 @@
+import {
+    ListItemButton,
+    Typography,
+} from "@mui/joy";
+
+import "./Result.css";
+
+
+interface ResultProps {
+    message: string,
+    matchRange: [number, number]
+}
+
+/**
+ * Displays a button containing a message, which highlights a specific range of text.
+ *
+ * @param props
+ * @param props.message
+ * @param props.matchRange A two-element array indicating the start and end indices of the substring
+ * to be highlighted.
+ * @return
+ */
+const Result = ({message, matchRange}: ResultProps) => {
+    const [
+        beforeMatch,
+        match,
+        afterMatch,
+    ] = [
+        message.slice(0, matchRange[0]),
+        message.slice(...matchRange),
+        message.slice(matchRange[1]),
+    ];
+
+    return (
+        <ListItemButton className={"result-button"}>
+            <Typography
+                className={"result-text before-match"}
+                level={"body-xs"}
+            >
+                {beforeMatch}
+            </Typography>
+            <Typography
+                className={"result-text match"}
+                level={"body-xs"}
+                sx={{
+                    backgroundColor: "warning.softBg",
+                }}
+            >
+                {match}
+            </Typography>
+            <Typography
+                className={"result-text after-match"}
+                level={"body-xs"}
+            >
+                {afterMatch}
+            </Typography>
+        </ListItemButton>
+    );
+};
+
+export default Result;

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

@@ -0,0 +1,22 @@
+.results-group-title-button {
+    flex-direction: row-reverse !important;
+    gap: 2px !important;
+    padding-inline-start: 0 !important;
+}
+
+.results-group-title-container {
+    display: flex;
+    flex-grow: 1;
+}
+
+.results-group-title-text-container {
+    flex-grow: 1;
+    gap: 0.1rem;
+    align-items: center;
+}
+
+.results-group-content {
+    margin-left: 1.5px !important;
+    /* stylelint-disable-next-line custom-property-pattern */
+    border-left: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
+}

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

@@ -0,0 +1,103 @@
+import {
+    useEffect,
+    useState,
+} from "react";
+import * as React from "react";
+
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Chip,
+    List,
+    Stack,
+    Typography,
+} from "@mui/joy";
+
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+
+import {QueryResultsType} from "../../../../../typings/worker";
+import Result from "./Result";
+
+import "./ResultsGroup.css";
+
+
+interface ResultsGroupProps {
+    isAllExpanded: boolean,
+    pageNum: number,
+    results: QueryResultsType[],
+}
+
+/**
+ * Renders a group of results. Each group contains a list of results from a single page.
+ *
+ * @param props
+ * @param props.isAllExpanded
+ * @param props.pageNum
+ * @param props.results
+ * @return
+ */
+const ResultsGroup = ({
+    isAllExpanded,
+    pageNum,
+    results,
+}: ResultsGroupProps) => {
+    const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded);
+
+    const handleAccordionChange = (
+        _: React.SyntheticEvent,
+        newValue: boolean
+    ) => {
+        setIsExpanded(newValue);
+    };
+
+    // On `isAllExpanded` updates, sync current results group's expand status.
+    useEffect(() => {
+        setIsExpanded(isAllExpanded);
+    }, [isAllExpanded]);
+
+    return (
+        <Accordion
+            expanded={isExpanded}
+            onChange={handleAccordionChange}
+        >
+            <AccordionSummary
+                slotProps={{
+                    button: {className: "results-group-title-button"},
+                }}
+            >
+                <Box className={"results-group-title-container"}>
+                    <Stack
+                        className={"results-group-title-text-container"}
+                        direction={"row"}
+                    >
+                        <DescriptionOutlinedIcon fontSize={"inherit"}/>
+                        <Typography
+                            level={"title-sm"}
+                        >
+                            Page
+                            {" "}
+                            {pageNum}
+                        </Typography>
+                    </Stack>
+                    <Chip size={"sm"}>
+                        {results.length}
+                    </Chip>
+                </Box>
+            </AccordionSummary>
+            <AccordionDetails className={"results-group-content"}>
+                <List size={"sm"}>
+                    {results.map((r, index) => (
+                        <Result
+                            key={index}
+                            matchRange={r.matchRange}
+                            message={r.message}/>
+                    ))}
+                </List>
+            </AccordionDetails>
+        </Accordion>
+    );
+};
+
+export default ResultsGroup;

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

@@ -0,0 +1,116 @@
+import React, {
+    useContext,
+    useRef,
+    useState,
+} from "react";
+
+import {
+    AccordionGroup,
+    IconButton,
+    Textarea,
+    ToggleButtonGroup,
+} from "@mui/joy";
+
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+
+import {StateContext} from "../../../../../contexts/StateContextProvider";
+import {
+    TAB_DISPLAY_NAMES,
+    TAB_NAME,
+} from "../../../../../typings/tab";
+import CustomTabPanel from "../CustomTabPanel";
+import TitleButton from "../TitleButton";
+import ResultsGroup from "./ResultsGroup";
+
+
+enum SEARCH_OPTION {
+    IS_CASE_SENSITIVE = "isCaseSensitive",
+    IS_REGEX = "isRegex"
+}
+
+/**
+ * Displays a panel for submitting search queries and viewing query results.
+ *
+ * @return
+ */
+const SearchTabPanel = () => {
+    const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
+    const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]);
+    const searchTextRef = useRef<HTMLTextAreaElement>(null);
+    const {queryResults, startQuery} = useContext(StateContext);
+    const handleSearch = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if ("Enter" === event.key && searchTextRef.current) {
+            event.preventDefault();
+            const isCaseSensitive = searchOptions.includes(SEARCH_OPTION.IS_CASE_SENSITIVE);
+            const isRegex = searchOptions.includes(SEARCH_OPTION.IS_REGEX);
+            startQuery(searchTextRef.current.value, isRegex, isCaseSensitive);
+        }
+    };
+
+    return (
+        <CustomTabPanel
+            tabName={TAB_NAME.SEARCH}
+            title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
+            titleButtons={
+                <TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
+                    {isAllExpanded ?
+                        <UnfoldLessIcon/> :
+                        <UnfoldMoreIcon/>}
+                </TitleButton>
+            }
+        >
+            <Textarea
+                maxRows={7}
+                placeholder={"Search"}
+                size={"sm"}
+                sx={{flexDirection: "row", zIndex: 0}}
+                endDecorator={
+                    <>
+                        <ToggleButtonGroup
+                            size={"sm"}
+                            spacing={0.3}
+                            sx={{borderRadius: "2px"}}
+                            value={searchOptions}
+                            variant={"plain"}
+                            onChange={(_, newValue) => {
+                                setSearchOptions(newValue);
+                            }}
+                        >
+                            <IconButton
+                                sx={{fontFamily: "Inter"}}
+                                value={SEARCH_OPTION.IS_CASE_SENSITIVE}
+                            >
+                                Aa
+                            </IconButton>
+                            <IconButton
+                                sx={{fontFamily: "Inter"}}
+                                value={SEARCH_OPTION.IS_REGEX}
+                            >
+                                .*
+                            </IconButton>
+                        </ToggleButtonGroup>
+                    </>
+                }
+                slotProps={{
+                    textarea: {ref: searchTextRef},
+                    endDecorator: {sx: {marginBlockStart: 0, display: "block"}},
+                }}
+                onKeyDown={handleSearch}/>
+            <AccordionGroup
+                disableDivider={true}
+                size={"sm"}
+            >
+                {Array.from(queryResults.entries()).map(([pageNum, results], index) => (
+                    <ResultsGroup
+                        isAllExpanded={isAllExpanded}
+                        key={index}
+                        pageNum={pageNum}
+                        results={results}/>
+                ))}
+            </AccordionGroup>
+        </CustomTabPanel>
+    );
+};
+
+export default SearchTabPanel;

src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css

@@ -0,0 +1,5 @@
+.sidebar-tab-title-button {
+    z-index: 0 !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+}