feat: Add timezone select UI to the status bar.

src/components/AppController.tsx

@@ -24,10 +24,11 @@ import {
  * NOTE: this may modify the URL parameters.
  */
 const updateViewHashParams = () => {
-    const {isPrettified, logEventNum} = getWindowUrlHashParams();
-    const {updateIsPrettified, updateLogEventNum} = useViewStore.getState();
+    const {isPrettified, logEventNum, timezone} = getWindowUrlHashParams();
+    const {updateIsPrettified, updateTimezoneName, updateLogEventNum} = useViewStore.getState();
 
     updateIsPrettified(isPrettified);
+    updateTimezoneName(timezone);
     updateLogEventNum(logEventNum);
 };
 

src/components/StatusBar/LogLevelSelect/index.css

@@ -14,5 +14,5 @@
 }
 
 .log-level-select-listbox {
-    max-height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height)) !important;
+    max-height: var(--ylv-list-box-max-height) !important;
 }

src/components/StatusBar/TimezoneSelect/TimezoneCategoryChip.css

@@ -0,0 +1,8 @@
+.timezone-category-chip {
+    cursor: pointer;
+}
+
+.timezone-category-chip-default-timezone {
+    /* Disable `Chip`'s background style. */
+    background-color: initial !important;
+}

src/components/StatusBar/TimezoneSelect/TimezoneCategoryChip.tsx

@@ -0,0 +1,69 @@
+import {Chip} from "@mui/joy";
+import {DefaultColorPalette} from "@mui/joy/styles/types/colorSystem";
+
+import {TIMEZONE_CATEGORY} from "../../../typings/date";
+
+import "./TimezoneCategoryChip.css";
+
+
+interface TimezoneTypeMetadata {
+    label: string;
+    color: DefaultColorPalette;
+}
+
+const TIMEZONE_CATEGORY_METADATA: Record<TIMEZONE_CATEGORY, TimezoneTypeMetadata> = {
+    [TIMEZONE_CATEGORY.DEFAULT]: {
+        label: "Default",
+        color: "neutral",
+    },
+    [TIMEZONE_CATEGORY.BROWSER]: {
+        label: "Browser",
+        color: "warning",
+    },
+    [TIMEZONE_CATEGORY.LOGGER]: {
+        label: "Logger",
+        color: "primary",
+    },
+    [TIMEZONE_CATEGORY.MANUAL]: {
+        label: "Manual",
+        color: "success",
+    },
+};
+
+interface TimezoneCategoryChipProps {
+    category: TIMEZONE_CATEGORY;
+    disabled: boolean;
+}
+
+/**
+ * Render a chip that represents the category of the timezone.
+ *
+ * @param props
+ * @param props.category
+ * @param props.disabled
+ * @return
+ */
+const TimezoneCategoryChip = ({
+    category,
+    disabled,
+}: TimezoneCategoryChipProps) => {
+    const isDefault = category === TIMEZONE_CATEGORY.DEFAULT;
+
+    return (
+        <Chip
+            color={TIMEZONE_CATEGORY_METADATA[category].color}
+            disabled={disabled}
+            sx={{borderRadius: "xs"}}
+            className={`timezone-category-chip ${isDefault ?
+                "timezone-category-chip-default-timezone" :
+                ""}`}
+        >
+            {"Timezone"}
+            {false === isDefault && " | "}
+            {false === isDefault && TIMEZONE_CATEGORY_METADATA[category].label}
+        </Chip>
+    );
+};
+
+
+export default TimezoneCategoryChip;

src/components/StatusBar/TimezoneSelect/index.css

@@ -0,0 +1,14 @@
+.timezone-select {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --Input-focusedThickness: 0 !important;
+}
+
+.timezone-select-listbox {
+    min-width: fit-content;
+    max-height: var(--ylv-list-box-max-height) !important;
+}
+
+.timezone-select-pop-up-indicator {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --Icon-fontSize: 1.1rem !important;
+}

src/components/StatusBar/TimezoneSelect/index.tsx

@@ -0,0 +1,115 @@
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from "react";
+
+import {SelectValue} from "@mui/base/useSelect";
+import {Autocomplete} from "@mui/joy";
+
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+
+import useUiStore from "../../../stores/uiStore";
+import useViewStore from "../../../stores/viewStore";
+import {
+    BROWSER_TIMEZONE_NAME,
+    DEFAULT_TIMEZONE_NAME,
+    getTimezoneCategory,
+    INTL_SUPPORTED_TIMEZONE_NAMES,
+    LOGGER_TIMEZONE_NAME,
+    UTC_TIMEZONE_OFFSET_NAMES,
+} from "../../../typings/date";
+import {UI_ELEMENT} from "../../../typings/states";
+import {HASH_PARAM_NAMES} from "../../../typings/url";
+import {isDisabled} from "../../../utils/states";
+import {updateWindowUrlHashParams} from "../../../utils/url";
+import TimezoneCategoryChip from "./TimezoneCategoryChip.tsx";
+
+import "./index.css";
+
+
+/**
+ * The timezone select dropdown menu, the selectable options can be classified as three types:
+ * - Default (use the origin timezone of the log events)
+ * - Browser Timezone (use the timezone that the browser is currently using)
+ * - Frequently-used Timezone
+ *
+ * @return A timezone select dropdown menu
+ */
+const TimezoneSelect = () => {
+    const uiState = useUiStore((state) => state.uiState);
+    const timezoneName = useViewStore((state) => state.timezoneName);
+
+    const [inputWidth, setInputWidth] = useState<string>(`${timezoneName.length}ch`);
+    const timezoneNameOptions = useMemo(() => [
+        DEFAULT_TIMEZONE_NAME,
+        BROWSER_TIMEZONE_NAME,
+        LOGGER_TIMEZONE_NAME,
+        ...UTC_TIMEZONE_OFFSET_NAMES,
+        ...INTL_SUPPORTED_TIMEZONE_NAMES.filter(
+            (tzName) => tzName !== BROWSER_TIMEZONE_NAME
+        ),
+    ], []);
+
+    const handleTimezoneSelectChange =
+        useCallback((_: unknown, value: SelectValue<string, false>) => {
+            if (null === value) {
+                throw new Error("Unexpected null value in non-clearable timezone select.");
+            }
+
+            const {updateTimezoneName} = useViewStore.getState();
+            updateTimezoneName(value);
+            updateWindowUrlHashParams({
+                [HASH_PARAM_NAMES.TIMEZONE]: value,
+            });
+        }, []);
+
+    useEffect(() => {
+        // Update the input width based on the selected timezone name.
+        setInputWidth(`${timezoneName.length}ch`);
+    }, [timezoneName]);
+
+
+    const disabled = isDisabled(uiState, UI_ELEMENT.TIMEZONE_SETTER);
+
+    return (
+        <Autocomplete
+            className={"timezone-select"}
+            componentName={"button"}
+            disableClearable={true}
+            disabled={disabled}
+            groupBy={getTimezoneCategory}
+            openOnFocus={true}
+            options={timezoneNameOptions}
+            popupIcon={<KeyboardArrowUpIcon/>}
+            size={"sm"}
+            value={timezoneName}
+            variant={"soft"}
+            slotProps={{
+                popupIndicator: {
+                    className: "timezone-select-pop-up-indicator",
+                },
+                input: {
+                    sx: {
+                        width: inputWidth,
+                    },
+                },
+                listbox: {
+                    className: "timezone-select-listbox",
+                    placement: "top-end",
+                    modifiers: [
+                        // Remove gap between the listbox and the `Select` button.
+                        {name: "offset", enabled: false},
+                    ],
+                },
+            }}
+            startDecorator={<TimezoneCategoryChip
+                category={getTimezoneCategory(timezoneName)}
+                disabled={disabled}/>}
+            onChange={handleTimezoneSelectChange}/>
+    );
+};
+
+
+export default TimezoneSelect;

src/components/StatusBar/index.tsx

@@ -24,6 +24,7 @@ import {
 } from "../../utils/url";
 import LogLevelSelect from "./LogLevelSelect";
 import StatusBarToggleButton from "./StatusBarToggleButton";
+import TimezoneSelect from "./TimezoneSelect";
 
 import "./index.css";
 
@@ -89,6 +90,7 @@ const StatusBar = () => {
             </Tooltip>
             <Divider orientation={"vertical"}/>
 
+            <TimezoneSelect/>
             <LogLevelSelect/>
             <Divider orientation={"vertical"}/>
 

src/main.css

@@ -23,6 +23,9 @@ html {
     --ylv-status-bar-height: 32px;
     --ylv-menu-bar-height: 32px;
     --ylv-panel-resize-handle-width: 4px;
+    --ylv-list-box-max-height: calc(
+        100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height)
+    );
 
     /* z-index globals
      *

src/stores/viewStore/createViewFormattingSlice.ts

@@ -1,11 +1,13 @@
 import {StateCreator} from "zustand";
 
+import {DEFAULT_TIMEZONE_NAME} from "../../typings/date";
 import {UI_STATE} from "../../typings/states";
 import {
     CURSOR_CODE,
     CursorType,
 } from "../../typings/worker";
 import useLogFileManagerStore from "../logFileManagerProxyStore";
+import useLogFileStore from "../logFileStore";
 import {handleErrorWithNotification} from "../notificationStore";
 import useUiStore from "../uiStore";
 import {VIEW_EVENT_DEFAULT} from "./createViewEventSlice";
@@ -18,6 +20,7 @@ import {
 
 const VIEW_FORMATTING_DEFAULT: ViewFormattingValues = {
     isPrettified: false,
+    timezoneName: DEFAULT_TIMEZONE_NAME,
 };
 
 /**
@@ -59,6 +62,48 @@ const createViewFormattingSlice: StateCreator<
             updatePageData(pageData);
         })().catch(handleErrorWithNotification);
     },
+    updateTimezoneName: (newTimezoneName: string) => {
+        if ("" === newTimezoneName) {
+            newTimezoneName = DEFAULT_TIMEZONE_NAME;
+        }
+
+        const {numEvents} = useLogFileStore.getState();
+        if (0 === numEvents) {
+            return;
+        }
+
+        const {timezoneName} = get();
+        if (newTimezoneName === timezoneName) {
+            return;
+        }
+
+        const {setUiState} = useUiStore.getState();
+        setUiState(UI_STATE.FAST_LOADING);
+
+        set({timezoneName: newTimezoneName});
+
+        const {logEventNum} = get();
+        let cursor: CursorType = {code: CURSOR_CODE.LAST_EVENT, args: null};
+        if (VIEW_EVENT_DEFAULT.logEventNum !== logEventNum) {
+            cursor = {
+                code: CURSOR_CODE.EVENT_NUM,
+                args: {eventNum: logEventNum},
+            };
+        }
+
+        (async () => {
+            const {logFileManagerProxy} = useLogFileManagerStore.getState();
+            const {isPrettified, updatePageData} = get();
+
+            // await logFileManagerProxy.setTimezone(newTimezoneName);
+            const pageData = await logFileManagerProxy.loadPage(
+                cursor,
+                isPrettified,
+            );
+
+            updatePageData(pageData);
+        })().catch(handleErrorWithNotification);
+    },
 });
 
 export default createViewFormattingSlice;

src/stores/viewStore/types.ts

@@ -32,10 +32,12 @@ type ViewEventSlice = ViewEventValues & ViewEventActions;
 
 interface ViewFormattingValues {
     isPrettified: boolean;
+    timezoneName: string;
 }
 
 interface ViewFormattingActions {
     updateIsPrettified: (newIsPrettified: boolean) => void;
+    updateTimezoneName: (newTimezoneName: string) => void;
 }
 
 type ViewFormattingSlice = ViewFormattingValues & ViewFormattingActions;