new-log-viewer: Add tabbed Sidebar with resizable panel; Rearrange open and settings buttons.

new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css

@@ -0,0 +1,23 @@
+.resize-handle {
+    cursor: ew-resize;
+
+    z-index: var(--ylv-resize-handle-z-index);
+
+    box-sizing: border-box;
+    width: var(--ylv-panel-resize-handle-width);
+    height: 100%;
+
+    /* stylelint-disable-next-line custom-property-pattern */
+    background-color: var(--joy-palette-background-surface, #fbfcfe);
+    /* stylelint-disable-next-line custom-property-pattern */
+    border-right: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
+}
+
+.resize-handle-holding,
+.resize-handle:hover {
+    box-sizing: initial;
+
+    /* stylelint-disable-next-line custom-property-pattern */
+    background-color: var(--joy-palette-primary-solidHoverBg, #0258a8);
+    border-right: initial;
+}

new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx

@@ -0,0 +1,81 @@
+import React, {
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
+
+import "./ResizeHandle.css";
+
+
+interface ResizeHandleProps {
+    onHandleRelease: () => void,
+
+    /**
+     * Gets triggered when a resize event occurs.
+     *
+     * @param resizeHandlePosition The horizontal distance, in pixels, between the mouse pointer
+     * and the left edge of the viewport.
+     */
+    onResize: (resizeHandlePosition: number) => void,
+}
+
+/**
+ * A vertical handle for resizing an object.
+ *
+ * @param props
+ * @param props.onResize The method to call when a resize occurs.
+ * @param props.onHandleRelease
+ * @return
+ */
+const ResizeHandle = ({
+    onResize,
+    onHandleRelease,
+}: ResizeHandleProps) => {
+    const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
+
+    const handleMouseDown = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        setIsMouseDown(true);
+    };
+
+    const handleMouseMove = useCallback((ev: MouseEvent) => {
+        ev.preventDefault();
+        onResize(ev.clientX);
+    }, [onResize]);
+
+    const handleMouseUp = useCallback((ev: MouseEvent) => {
+        ev.preventDefault();
+        setIsMouseDown(false);
+        onHandleRelease();
+    }, [onHandleRelease]);
+
+    // On `isMouseDown` change, add / remove event listeners.
+    useEffect(() => {
+        if (isMouseDown) {
+            window.addEventListener("mousemove", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+        }
+
+        return () => {
+            // Always clean up the event listeners before the hook is re-run due to `isMouseDown`
+            // changes / when the component is unmounted.
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [
+        handleMouseMove,
+        handleMouseUp,
+        isMouseDown,
+    ]);
+
+    return (
+        <div
+            className={`resize-handle ${isMouseDown ?
+                "resize-handle-holding" :
+                ""}`}
+            onMouseDown={handleMouseDown}/>
+    );
+};
+
+
+export default ResizeHandle;

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import {
+    ListItem,
+    ListItemContent,
+    ListItemDecorator,
+    Typography,
+    TypographyProps,
+} from "@mui/joy";
+
+
+interface CustomListItemProps {
+    content: string,
+    icon: React.ReactNode,
+    slotProps?: {
+        content?: TypographyProps
+    },
+    title: string
+}
+
+/**
+ * Renders a custom list item with an icon, a title and a context text.
+ *
+ * @param props
+ * @param props.content
+ * @param props.icon
+ * @param props.slotProps
+ * @param props.title
+ * @return
+ */
+const CustomListItem = ({content, icon, slotProps, title}: CustomListItemProps) => (
+    <ListItem>
+        <ListItemDecorator>
+            {icon}
+        </ListItemDecorator>
+        <ListItemContent>
+            <Typography level={"title-sm"}>
+                {title}
+            </Typography>
+            <Typography
+                {...slotProps?.content}
+                level={"body-sm"}
+            >
+                {content}
+            </Typography>
+        </ListItemContent>
+    </ListItem>
+);
+
+export default CustomListItem;

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css

@@ -0,0 +1,14 @@
+.sidebar-tab-panel {
+    padding: 0.75rem;
+}
+
+.sidebar-tab-panel-title-container {
+    user-select: none;
+    margin-bottom: 0.5rem !important;
+}
+
+.sidebar-tab-panel-title {
+    font-size: 0.875rem !important;
+    font-weight: 400 !important;
+    text-transform: uppercase;
+}

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import {
+    DialogContent,
+    DialogTitle,
+    TabPanel,
+    Typography,
+} from "@mui/joy";
+
+import "./CustomTabPanel.css";
+
+
+interface CustomTabPanelProps {
+    children: React.ReactNode,
+    tabName: string,
+    title: string,
+}
+
+/**
+ * Renders a customized tab panel to be extended for displaying extra information in the sidebar.
+ *
+ * @param props
+ * @param props.children
+ * @param props.tabName
+ * @param props.title
+ * @return
+ */
+const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => {
+    return (
+        <TabPanel
+            className={"sidebar-tab-panel"}
+            value={tabName}
+        >
+            <DialogTitle className={"sidebar-tab-panel-title-container"}>
+                <Typography
+                    className={"sidebar-tab-panel-title"}
+                    level={"body-md"}
+                >
+                    {title}
+                </Typography>
+            </DialogTitle>
+            <DialogContent>
+                {children}
+            </DialogContent>
+        </TabPanel>
+    );
+};
+
+
+export default CustomTabPanel;

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx

@@ -0,0 +1,61 @@
+import {
+    useContext,
+    useMemo,
+} from "react";
+
+import {
+    Divider,
+    List,
+} from "@mui/joy";
+
+import AbcIcon from "@mui/icons-material/Abc";
+import StorageIcon from "@mui/icons-material/Storage";
+
+import {StateContext} from "../../../../contexts/StateContextProvider";
+import {
+    TAB_DISPLAY_NAMES,
+    TAB_NAME,
+} from "../../../../typings/tab";
+import {formatSizeInBytes} from "../../../../utils/units";
+import CustomListItem from "./CustomListItem";
+import CustomTabPanel from "./CustomTabPanel";
+
+
+/**
+ * Displays a panel containing the file name and on-disk size of the selected file.
+ *
+ * @return
+ */
+const FileInfoTabPanel = () => {
+    const {fileName, onDiskFileSizeInBytes} = useContext(StateContext);
+
+    const isFileUnloaded = 0 === fileName.length;
+    const formattedOnDiskSize = useMemo(
+        () => formatSizeInBytes(onDiskFileSizeInBytes, false),
+        [onDiskFileSizeInBytes]
+    );
+
+    return (
+        <CustomTabPanel
+            tabName={TAB_NAME.FILE_INFO}
+            title={TAB_DISPLAY_NAMES[TAB_NAME.FILE_INFO]}
+        >
+            {isFileUnloaded ?
+                "No file is open." :
+                <List>
+                    <CustomListItem
+                        content={fileName}
+                        icon={<AbcIcon/>}
+                        slotProps={{content: {sx: {wordBreak: "break-word"}}}}
+                        title={"Name"}/>
+                    <Divider/>
+                    <CustomListItem
+                        content={formattedOnDiskSize}
+                        icon={<StorageIcon/>}
+                        title={"On-disk Size"}/>
+                </List>}
+        </CustomTabPanel>
+    );
+};
+
+export default FileInfoTabPanel;

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.css

@@ -0,0 +1,10 @@
+.sidebar-tab-button {
+    justify-content: center !important;
+    width: 48px;
+    height: 48px;
+    padding: 0 !important;
+}
+
+.sidebar-tab-button-icon {
+    font-size: 32px !important;
+}

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx

@@ -0,0 +1,57 @@
+import {
+    Tab,
+    Tooltip,
+} from "@mui/joy";
+
+import {SvgIconComponent} from "@mui/icons-material";
+
+import {
+    TAB_DISPLAY_NAMES,
+    TAB_NAME,
+} from "../../../../typings/tab";
+
+import "./TabButton.css";
+
+
+interface TabButtonProps {
+    tabName: TAB_NAME,
+    Icon: SvgIconComponent,
+    onTabButtonClick: (tabName: TAB_NAME) => void
+}
+
+/**
+ * Renders a tooltip-wrapped tab button.
+ *
+ * @param props
+ * @param props.tabName
+ * @param props.Icon
+ * @param props.onTabButtonClick
+ * @return
+ */
+const TabButton = ({tabName, Icon, onTabButtonClick}: TabButtonProps) => {
+    const handleClick = () => {
+        onTabButtonClick(tabName);
+    };
+
+    return (
+        <Tooltip
+            arrow={true}
+            key={tabName}
+            placement={"right"}
+            title={TAB_DISPLAY_NAMES[tabName]}
+            variant={"outlined"}
+        >
+            <Tab
+                className={"sidebar-tab-button"}
+                color={"neutral"}
+                indicatorPlacement={"left"}
+                slotProps={{root: {onClick: handleClick}}}
+                value={tabName}
+            >
+                <Icon className={"sidebar-tab-button-icon"}/>
+            </Tab>
+        </Tooltip>
+    );
+};
+
+export default TabButton;

new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.css

@@ -0,0 +1,9 @@
+.sidebar-tabs {
+    flex-grow: 1;
+    width: calc(100% - var(--ylv-panel-resize-handle-width));
+    height: 100%;
+}
+
+.sidebar-tab-list-spacing {
+    flex-grow: 1;
+}