feat(settings): Move settings from the modal into a tab panel.

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

@@ -1,5 +1,7 @@
 .sidebar-tab-panel {
-    padding: 0.75rem;
+    min-width: 0 !important;
+    padding: 0.75rem !important;
+    padding-right: 0.5rem !important;
 }
 
 .sidebar-tab-panel-container {

src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/ThemeSwitchFormField.css

@@ -0,0 +1,3 @@
+.theme-switch-toggle-button-group {
+    flex-wrap: wrap;
+}

src/components/modals/SettingsModal/ThemeSwitchFormField.tsx → src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/ThemeSwitchFormField.tsx

@@ -12,7 +12,9 @@ import DarkModeIcon from "@mui/icons-material/DarkMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import SettingsBrightnessIcon from "@mui/icons-material/SettingsBrightness";
 
-import {THEME_NAME} from "../../../typings/config";
+import {THEME_NAME} from "../../../../../typings/config";
+
+import "./ThemeSwitchFormField.css";
 
 
 /**
@@ -29,6 +31,7 @@ const ThemeSwitchFormField = () => {
                 Theme
             </FormLabel>
             <ToggleButtonGroup
+                className={"theme-switch-toggle-button-group"}
                 size={"sm"}
                 value={mode as string}
                 onChange={(__, newValue) => {

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

@@ -0,0 +1,16 @@
+.settings-tab-container {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    height: 100%;
+}
+
+.settings-form-fields-container {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 0.75rem;
+}

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

@@ -0,0 +1,183 @@
+import React, {
+    useCallback,
+    useContext,
+} from "react";
+
+import {
+    Box,
+    Button,
+    Divider,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Link,
+} from "@mui/joy";
+
+import {NotificationContext} from "../../../../../contexts/NotificationContextProvider";
+import {Nullable} from "../../../../../typings/common";
+import {
+    CONFIG_KEY,
+    LOCAL_STORAGE_KEY,
+} from "../../../../../typings/config";
+import {LOG_LEVEL} from "../../../../../typings/logs";
+import {DO_NOT_TIMEOUT_VALUE} from "../../../../../typings/notifications";
+import {
+    TAB_DISPLAY_NAMES,
+    TAB_NAME,
+} from "../../../../../typings/tab";
+import {
+    getConfig,
+    setConfig,
+} from "../../../../../utils/config";
+import CustomTabPanel from "../CustomTabPanel";
+import ThemeSwitchFormField from "./ThemeSwitchFormField";
+
+import "./index.css";
+
+
+const CONFIG_FORM_FIELDS = [
+    {
+        helperText: (
+            <span>
+                {"[JSON] Format string for formatting a JSON log event as plain text. See the "}
+                <Link
+                    href={"https://docs.yscope.com/yscope-log-viewer/main/user-guide/format-struct-logs-overview.html"}
+                    level={"body-sm"}
+                    rel={"noopener"}
+                    target={"_blank"}
+                >
+                    format string syntax docs
+                </Link>
+                {" or leave this blank to display the entire log event."}
+            </span>
+        ),
+        initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
+        key: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
+        label: "Decoder: Format string",
+        type: "text",
+    },
+    {
+        helperText: "[JSON] Key to extract the log level from.",
+        initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
+        key: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
+        label: "Decoder: Log level key",
+        type: "text",
+    },
+    {
+        helperText: "[JSON] Key to extract the log timestamp from.",
+        initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
+        key: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
+        label: "Decoder: Timestamp key",
+        type: "text",
+    },
+    {
+        helperText: "Number of log messages to display per page.",
+        initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
+        key: LOCAL_STORAGE_KEY.PAGE_SIZE,
+        label: "View: Page size",
+        type: "number",
+    },
+];
+
+/**
+ * Handles the reset event for the configuration form.
+ *
+ * @param ev
+ */
+const handleConfigFormReset = (ev: React.FormEvent) => {
+    ev.preventDefault();
+    window.localStorage.clear();
+    window.location.reload();
+};
+
+/**
+ * Displays a setting tab panel for configurations.
+ *
+ * @return
+ */
+const SettingsTabPanel = () => {
+    const {postPopUp} = useContext(NotificationContext);
+
+    const handleConfigFormSubmit = useCallback(
+        (ev: React.FormEvent) => {
+            ev.preventDefault();
+            const formData = new FormData(ev.target as HTMLFormElement);
+            const getFormDataValue = (key: string) => formData.get(key) as string;
+
+            const formatString = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
+            const logLevelKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
+            const timestampKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
+            const pageSize = getFormDataValue(LOCAL_STORAGE_KEY.PAGE_SIZE);
+
+            let error: Nullable<string> = null;
+            error ||= setConfig({
+                key: CONFIG_KEY.DECODER_OPTIONS,
+                value: {formatString, logLevelKey, timestampKey},
+            });
+            error ||= setConfig({
+                key: CONFIG_KEY.PAGE_SIZE,
+                value: Number(pageSize),
+            });
+
+            if (null !== error) {
+                postPopUp({
+                    level: LOG_LEVEL.ERROR,
+                    message: error,
+                    timeoutMillis: DO_NOT_TIMEOUT_VALUE,
+                    title: "Unable to apply config.",
+                });
+            } else {
+                window.location.reload();
+            }
+        },
+        [postPopUp],
+    );
+
+    return (
+        <CustomTabPanel
+            tabName={TAB_NAME.SETTINGS}
+            title={TAB_DISPLAY_NAMES[TAB_NAME.SETTINGS]}
+        >
+            <form
+                className={"settings-tab-container"}
+                tabIndex={-1}
+                onReset={handleConfigFormReset}
+                onSubmit={handleConfigFormSubmit}
+            >
+                <Box className={"settings-form-fields-container"}>
+                    <ThemeSwitchFormField/>
+                    {CONFIG_FORM_FIELDS.map((field, index) => (
+                        <FormControl key={index}>
+                            <FormLabel>
+                                {field.label}
+                            </FormLabel>
+                            <Input
+                                defaultValue={field.initialValue}
+                                name={field.key}
+                                type={field.type}/>
+                            <FormHelperText>
+                                {field.helperText}
+                            </FormHelperText>
+                        </FormControl>
+                    ))}
+                </Box>
+                <Divider/>
+                <Button
+                    color={"primary"}
+                    type={"submit"}
+                >
+                    Apply & Reload
+                </Button>
+                <Button
+                    color={"neutral"}
+                    type={"reset"}
+                >
+                    Reset Default
+                </Button>
+            </form>
+        </CustomTabPanel>
+    );
+};
+
+export default SettingsTabPanel;

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

@@ -1,5 +1,5 @@
 import {
-    forwardRef,
+    Ref,
     useContext,
 } from "react";
 
@@ -17,9 +17,9 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import {StateContext} from "../../../../contexts/StateContextProvider";
 import {TAB_NAME} from "../../../../typings/tab";
 import {openInNewTab} from "../../../../utils/url";
-import SettingsModal from "../../../modals/SettingsModal";
 import FileInfoTabPanel from "./FileInfoTabPanel";
 import SearchTabPanel from "./SearchTabPanel";
+import SettingsTabPanel from "./SettingsTabPanel";
 import TabButton from "./TabButton";
 
 import "./index.css";
@@ -39,84 +39,68 @@ const TABS_INFO_LIST: Readonly<Array<{
 ]);
 
 interface SidebarTabsProps {
-    activeTabName: TAB_NAME;
-    onActiveTabNameChange: (newValue: TAB_NAME) => void;
+    ref: Ref<HTMLDivElement>;
 }
 
 /**
  * Displays a set of tabs in a vertical orientation.
  *
- * @param tabListRef Reference object used to access the TabList DOM element.
+ * @param props
+ * @param props.ref Reference object used to access the TabList DOM element.
  * @return
  */
-const SidebarTabs = forwardRef<HTMLDivElement, SidebarTabsProps>((
-    {
-        activeTabName,
-        onActiveTabNameChange,
-    },
-    tabListRef
-) => {
-    const {isSettingsModalOpen, setIsSettingsModalOpen} = useContext(StateContext);
-
-    const handleSettingsModalClose = () => {
-        setIsSettingsModalOpen(false);
-    };
+const SidebarTabs = ({
+    ref,
+}: SidebarTabsProps) => {
+    const {activeTabName, changeActiveTabName} = useContext(StateContext);
 
     const handleTabButtonClick = (tabName: TAB_NAME) => {
         switch (tabName) {
-            case TAB_NAME.SETTINGS:
-                setIsSettingsModalOpen(true);
-                break;
             case TAB_NAME.DOCUMENTATION:
                 openInNewTab(DOCUMENTATION_URL);
                 break;
             default:
-                onActiveTabNameChange(tabName);
+                changeActiveTabName(tabName);
         }
     };
 
     return (
-        <>
-            <Tabs
-                className={"sidebar-tabs"}
-                orientation={"vertical"}
-                value={activeTabName}
-                variant={"plain"}
+        <Tabs
+            className={"sidebar-tabs"}
+            orientation={"vertical"}
+            value={activeTabName}
+            variant={"plain"}
+        >
+            <TabList
+                ref={ref}
+                size={"lg"}
             >
-                <TabList
-                    ref={tabListRef}
-                    size={"lg"}
-                >
-                    {TABS_INFO_LIST.map(({tabName, Icon}) => (
-                        <TabButton
-                            Icon={Icon}
-                            key={tabName}
-                            tabName={tabName}
-                            onTabButtonClick={handleTabButtonClick}/>
-                    ))}
-
-                    {/* Forces the help and settings tabs to the bottom of the sidebar. */}
-                    <div className={"sidebar-tab-list-spacing"}/>
-
-                    <TabButton
-                        Icon={HelpOutlineIcon}
-                        tabName={TAB_NAME.DOCUMENTATION}
-                        onTabButtonClick={handleTabButtonClick}/>
-
+                {TABS_INFO_LIST.map(({tabName, Icon}) => (
                     <TabButton
-                        Icon={SettingsOutlinedIcon}
-                        tabName={TAB_NAME.SETTINGS}
+                        Icon={Icon}
+                        key={tabName}
+                        tabName={tabName}
                         onTabButtonClick={handleTabButtonClick}/>
-                </TabList>
-                <FileInfoTabPanel/>
-                <SearchTabPanel/>
-            </Tabs>
-            <SettingsModal
-                isOpen={isSettingsModalOpen}
-                onClose={handleSettingsModalClose}/>
-        </>
+                ))}
+
+                {/* Forces the help and settings tabs to the bottom of the sidebar. */}
+                <div className={"sidebar-tab-list-spacing"}/>
+
+                <TabButton
+                    Icon={HelpOutlineIcon}
+                    tabName={TAB_NAME.DOCUMENTATION}
+                    onTabButtonClick={handleTabButtonClick}/>
+
+                <TabButton
+                    Icon={SettingsOutlinedIcon}
+                    tabName={TAB_NAME.SETTINGS}
+                    onTabButtonClick={handleTabButtonClick}/>
+            </TabList>
+            <FileInfoTabPanel/>
+            <SearchTabPanel/>
+            <SettingsTabPanel/>
+        </Tabs>
     );
-});
+};
 
-SidebarTabs.displayName = "SidebarTabs";
 export default SidebarTabs;