From 8720b2fcc7051cbed5c01de437c02843b0ed4447 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Tue, 15 Apr 2025 21:24:01 +0800
Subject: [PATCH 01/10] Init, add some TODOs

---
 src/components/StatusBar/LogLevelSelect/index.tsx | 1 -
 src/components/StatusBar/TimezoneSelect.tsx       | 1 +
 src/components/StatusBar/index.tsx                | 1 +
 src/contexts/StateContextProvider.tsx             | 3 +++
 src/services/LogFileManager/index.ts              | 4 +++-
 src/services/MainWorker.ts                        | 3 +++
 src/services/decoders/ClpIrDecoder/index.ts       | 4 +++-
 src/typings/decoders.ts                           | 1 +
 src/typings/worker.ts                             | 3 +++
 9 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/StatusBar/TimezoneSelect.tsx

diff --git a/src/components/StatusBar/LogLevelSelect/index.tsx b/src/components/StatusBar/LogLevelSelect/index.tsx
index 57287c04b..ab0feb890 100644
--- a/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -45,7 +45,6 @@ import LogLevelChip from "./LogLevelChip";
 
 import "./index.css";
 
-
 interface LogSelectOptionProps {
     isChecked: boolean;
     logLevelName: string;
diff --git a/src/components/StatusBar/TimezoneSelect.tsx b/src/components/StatusBar/TimezoneSelect.tsx
new file mode 100644
index 000000000..5cd4bf6cb
--- /dev/null
+++ b/src/components/StatusBar/TimezoneSelect.tsx
@@ -0,0 +1 @@
+// TODO-ZZX: 用chatgpt完成这个文件
\ No newline at end of file
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
index 7c0bce7df..7c784b8a6 100644
--- a/src/components/StatusBar/index.tsx
+++ b/src/components/StatusBar/index.tsx
@@ -65,6 +65,7 @@ const StatusBar = () => {
                 {/* This is left blank intentionally until status messages are implemented. */}
             </Typography>
 
+            // TODO-ZZX: 把dropdown插入到想要的位置
             <Tooltip title={"Copy link to clipboard"}>
                 <span>
                     <Button
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index 7948b77de..91f6ba9ee 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -196,6 +196,7 @@ const loadPageByCursor = (
     workerPostReq(worker, WORKER_REQ_CODE.LOAD_PAGE, {
         cursor: cursor,
         isPrettified: isPrettified,
+        // TODO-ZZX: 新增参数
     });
 };
 
@@ -424,6 +425,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             decoderOptions: getConfig(CONFIG_KEY.DECODER_OPTIONS),
             fileSrc: fileSrc,
             isPrettified: isPrettifiedRef.current,
+            // TODO-ZZX: 新增参数，时区
             pageSize: getConfig(CONFIG_KEY.PAGE_SIZE),
         });
     }, [
@@ -476,6 +478,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},
             isPrettified: isPrettifiedRef.current,
             logLevelFilter: filter,
+            // TODO-ZZX: 新增参数
         });
     }, []);
 
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index dbef950e1..34ce2b371 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -246,6 +246,7 @@ class LogFileManager {
      *
      * @param cursor The cursor indicating the page to load. See {@link CursorType}.
      * @param isPrettified Are the log messages pretty printed.
+     * // TODO-ZZX: 新增一个参数，表示从UI里选择的时区，得加默认UTC
      * @return An object containing the logs as a string, a map of line numbers to log event
      * numbers, and the line number of the first line in the cursor identified event.
      * @throws {Error} if any error occurs during decode.
@@ -282,11 +283,12 @@ class LogFileManager {
         results.forEach((r) => {
             const [
                 msg,
-                ,
+                timestamp,
                 ,
                 logEventNum,
             ] = r;
 
+            console.log(timestamp);
             const printedMsg = (isPrettified) ?
                 `${jsBeautify(msg)}\n` :
                 msg;
diff --git a/src/services/MainWorker.ts b/src/services/MainWorker.ts
index 4587d8899..6d884756b 100644
--- a/src/services/MainWorker.ts
+++ b/src/services/MainWorker.ts
@@ -96,6 +96,7 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 });
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
+                    // TODO-ZZX: 从args里传入时区
                     LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified)
                 );
                 break;
@@ -106,6 +107,7 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 }
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
+                    // TODO-ZZX: 从args里传入时区
                     LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified)
                 );
                 break;
@@ -117,6 +119,7 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 LOG_FILE_MANAGER.setLogLevelFilter(args.logLevelFilter);
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
+                    // TODO-ZZX: 从args里传入时区
                     LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified)
                 );
                 break;
diff --git a/src/services/decoders/ClpIrDecoder/index.ts b/src/services/decoders/ClpIrDecoder/index.ts
index 1d13b29d5..b68f26748 100644
--- a/src/services/decoders/ClpIrDecoder/index.ts
+++ b/src/services/decoders/ClpIrDecoder/index.ts
@@ -91,6 +91,7 @@ class ClpIrDecoder implements Decoder {
                 message, timestamp,
             ] = r;
 
+            // TODO-ZZX: 转成指定时区
             const dayJsTimestamp: Dayjs = convertToDayjsTimestamp(timestamp);
             r[0] = dayJsTimestamp.format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
         }
@@ -146,7 +147,7 @@ class ClpIrDecoder implements Decoder {
         // TODO: Correct DecodeResult typing in `clp-ffi-js` and remove below type assertion.
         const results =
             this.#streamReader.decodeRange(beginIdx, endIdx, useFilter) as Nullable<DecodeResult[]>;
-
+        
         if (null === results) {
             return null;
         }
@@ -167,6 +168,7 @@ class ClpIrDecoder implements Decoder {
                 timestamp,
                 level,
             ] = r;
+            // TODO-ZZX: 这里也得转换成指定的时区
             const dayJsTimestamp: Dayjs = convertToDayjsTimestamp(timestamp);
             let fields: JsonObject = {};
 
diff --git a/src/typings/decoders.ts b/src/typings/decoders.ts
index 49aec7dec..37504bc28 100644
--- a/src/typings/decoders.ts
+++ b/src/typings/decoders.ts
@@ -97,6 +97,7 @@ interface Decoder {
         beginIdx: number,
         endIdx: number,
         useFilter: boolean
+        // TODO-ZZX: 新增参数，用来表示时区，给它一个默认值，UTC时区
     ): Nullable<DecodeResult[]>;
 }
 
diff --git a/src/typings/worker.ts b/src/typings/worker.ts
index 07bdfff39..2847145b6 100644
--- a/src/typings/worker.ts
+++ b/src/typings/worker.ts
@@ -103,15 +103,18 @@ type WorkerReqMap = {
         cursor: CursorType;
         decoderOptions: DecoderOptions;
         isPrettified: boolean;
+        // TODO-ZZX: 新增时区参数
     };
     [WORKER_REQ_CODE.LOAD_PAGE]: {
         cursor: CursorType;
         isPrettified: boolean;
+        // TODO-ZZX: 新增时区参数
     };
     [WORKER_REQ_CODE.SET_FILTER]: {
         cursor: CursorType;
         logLevelFilter: LogLevelFilter;
         isPrettified: boolean;
+        // TODO-ZZX: 新增时区参数
     };
     [WORKER_REQ_CODE.START_QUERY]: {
         queryString: string;

From c154ff1b11d5b09ccfee3a0e9a7199d1f36d42b3 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Sat, 19 Apr 2025 19:02:13 +0800
Subject: [PATCH 02/10] Add a timezone drop down

---
 src/components/StatusBar/TimezoneSelect.tsx   |   1 -
 .../StatusBar/TimezoneSelect/index.css        |  31 ++++
 .../StatusBar/TimezoneSelect/index.tsx        | 150 ++++++++++++++++++
 src/components/StatusBar/index.tsx            |   3 +-
 src/typings/states.ts                         |   5 +
 5 files changed, 188 insertions(+), 2 deletions(-)
 delete mode 100644 src/components/StatusBar/TimezoneSelect.tsx
 create mode 100644 src/components/StatusBar/TimezoneSelect/index.css
 create mode 100644 src/components/StatusBar/TimezoneSelect/index.tsx

diff --git a/src/components/StatusBar/TimezoneSelect.tsx b/src/components/StatusBar/TimezoneSelect.tsx
deleted file mode 100644
index 5cd4bf6cb..000000000
--- a/src/components/StatusBar/TimezoneSelect.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// TODO-ZZX: 用chatgpt完成这个文件
\ No newline at end of file
diff --git a/src/components/StatusBar/TimezoneSelect/index.css b/src/components/StatusBar/TimezoneSelect/index.css
new file mode 100644
index 000000000..82ef6d1ac
--- /dev/null
+++ b/src/components/StatusBar/TimezoneSelect/index.css
@@ -0,0 +1,31 @@
+/* Since timezone is not multi select, and multi select has a different style in Joy components, so we have to manually
+ tune the style
+*/
+.timezone-select {
+    margin-right: 1px;
+}
+
+.timezone-select-render-value-box {
+    display: flex;
+    gap: 2px;
+}
+
+.timezone-select-render-value-box-label {
+    padding: 0 !important;
+
+    font-size: 0.95rem !important;
+    font-weight: 500 !important;
+    line-height: 1.5 !important;
+
+    background-color: initial !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.timezone-select-render-value-box-label-disabled {
+    color: #686f76 !important;
+}
+
+.timezone-select-listbox {
+    max-height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height)) !important;
+}
diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
new file mode 100644
index 000000000..91cbb865c
--- /dev/null
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -0,0 +1,150 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import {
+    Box,
+    Chip,
+    ListDivider,
+    ListItemContent,
+    Option,
+    Select,
+    SelectOption,
+} from "@mui/joy";
+
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import "./index.css";
+import { SelectValue } from "@mui/base/useSelect";
+import { StateContext } from "../../../contexts/StateContextProvider";
+import { isDisabled } from "../../../utils/states";
+import { UI_ELEMENT } from "../../../typings/states";
+
+const LOGGER_TIMEZONE = "Logger";
+const COMMON_TIMEZONES = [
+    "America/New_York",
+    "Europe/London",
+    "Asia/Shanghai",
+    "Asia/Tokyo",
+    "Australia/Sydney",
+    "Pacific/Honolulu",
+    "America/Los_Angeles",
+    "America/Chicago",
+    "America/Denver",
+    "Asia/Kolkata",
+    "Europe/Berlin",
+    "Europe/Moscow",
+    "Asia/Dubai",
+    "Asia/Singapore",
+    "Asia/Seoul",
+    "Pacific/Auckland",
+];
+
+const getLongOffsetOfTimezone = (tz: string): string => {
+    return Intl.DateTimeFormat(undefined, {
+        timeZone: tz,
+        timeZoneName: "longOffset",
+    }).formatToParts().find(p => p.type === "timeZoneName")?.value ?? "Unknown timezone"
+};
+
+const TimezoneSelect = () => {
+    const {uiState} = useContext(StateContext);
+
+    const [browserTimezone, setBrowserTimezone] = useState<string | null>(null);
+    const [selectedTimezone, setSelectedTimezone] = useState<string | null>(null);
+
+    const disabled = isDisabled(uiState, UI_ELEMENT.TIMEZONE_SETTER);
+
+    useEffect(() => {
+        const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        setBrowserTimezone(tz);
+    }, []);
+
+    useEffect(() => {
+        if (!disabled) {
+            setSelectedTimezone(LOGGER_TIMEZONE);
+        }
+    }, [disabled]);
+
+    const handleRenderValue = (selected: SelectValue<SelectOption<string>, false>) => (
+        <Box className="timezone-select-render-value-box">
+            <Chip className="timezone-select-render-value-box-label">Timezone</Chip>
+            <Chip>{selected?.label}</Chip>
+        </Box>
+    );
+
+    const handleOptionClick = useCallback((ev: React.MouseEvent) => {
+        const currentTarget = ev.currentTarget as HTMLElement;
+        const value = currentTarget.dataset.value!;
+        setSelectedTimezone(value);
+    }, []);
+
+    return (
+        <Select
+            className="timezone-select"
+            disabled={disabled}
+            value={selectedTimezone}
+            onChange={(_, value) => {
+                if (value) setSelectedTimezone(value);
+            }}
+            renderValue={handleRenderValue}
+            size="sm"
+            variant="soft"
+            indicator={<KeyboardArrowUpIcon />}
+            placeholder={
+                <Box className="timezone-select-render-value-box">
+                    <Chip className={`timezone-select-render-value-box-label ${disabled ?
+                        "timezone-select-render-value-box-label-disabled" :
+                        ""}`}>
+                        Timezone
+                    </Chip>
+                </Box>
+            }
+            slotProps={{
+                listbox: {
+                    className: "timezone-select-listbox",
+                    placement: "top-end",
+                    modifiers: [
+                        { name: "equalWidth", enabled: false },
+                        { name: "offset", enabled: false },
+                    ],
+                },
+            }}
+        >
+            <Option
+                key={LOGGER_TIMEZONE}
+                value={LOGGER_TIMEZONE}
+                data-value={LOGGER_TIMEZONE}
+                onClick={handleOptionClick}
+            >
+                <ListItemContent>{LOGGER_TIMEZONE}</ListItemContent>
+            </Option>
+
+            {browserTimezone && browserTimezone !== "UTC" && (
+                <Option
+                    key={browserTimezone}
+                    value={browserTimezone}
+                    data-value={browserTimezone}
+                    onClick={handleOptionClick}
+                >
+                    <ListItemContent>
+                        ({getLongOffsetOfTimezone(browserTimezone)}) {browserTimezone} (Browser Timezone)
+                    </ListItemContent>
+                </Option>
+            )}
+            
+            <ListDivider role="separator" inset="gutter" />
+            
+            {COMMON_TIMEZONES.map((label) => (
+                <Option
+                    key={label}
+                    value={label}
+                    data-value={label}
+                    onClick={handleOptionClick}
+                >
+                    <ListItemContent>
+                        ({getLongOffsetOfTimezone(label)}) {label}
+                    </ListItemContent>
+                </Option>
+            ))}
+        </Select>
+    );
+};
+
+export default TimezoneSelect;
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
index 7c784b8a6..0808c3e17 100644
--- a/src/components/StatusBar/index.tsx
+++ b/src/components/StatusBar/index.tsx
@@ -24,6 +24,7 @@ import LogLevelSelect from "./LogLevelSelect";
 import StatusBarToggleButton from "./StatusBarToggleButton";
 
 import "./index.css";
+import TimezoneSelect from "./TimezoneSelect";
 
 
 /**
@@ -65,7 +66,7 @@ const StatusBar = () => {
                 {/* This is left blank intentionally until status messages are implemented. */}
             </Typography>
 
-            // TODO-ZZX: 把dropdown插入到想要的位置
+            <TimezoneSelect/>
             <Tooltip title={"Copy link to clipboard"}>
                 <span>
                     <Button
diff --git a/src/typings/states.ts b/src/typings/states.ts
index 9f003c109..847dfaf45 100644
--- a/src/typings/states.ts
+++ b/src/typings/states.ts
@@ -39,6 +39,7 @@ enum UI_ELEMENT {
     PRETTIFY_BUTTON,
     PROGRESS_BAR,
     QUERY_INPUT_BOX,
+    TIMEZONE_SETTER
 }
 
 type UiElementRow = {
@@ -65,6 +66,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.PRETTIFY_BUTTON]: false,
         [UI_ELEMENT.PROGRESS_BAR]: false,
         [UI_ELEMENT.QUERY_INPUT_BOX]: false,
+        [UI_ELEMENT.TIMEZONE_SETTER]: false,
     },
     [UI_STATE.FILE_LOADING]: {
         [UI_ELEMENT.DRAG_AND_DROP]: false,
@@ -76,6 +78,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.PRETTIFY_BUTTON]: false,
         [UI_ELEMENT.PROGRESS_BAR]: true,
         [UI_ELEMENT.QUERY_INPUT_BOX]: false,
+        [UI_ELEMENT.TIMEZONE_SETTER]: false,
     },
     [UI_STATE.FAST_LOADING]: {
         [UI_ELEMENT.DRAG_AND_DROP]: true,
@@ -87,6 +90,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.PRETTIFY_BUTTON]: true,
         [UI_ELEMENT.PROGRESS_BAR]: true,
         [UI_ELEMENT.QUERY_INPUT_BOX]: false,
+        [UI_ELEMENT.TIMEZONE_SETTER]: true,
     },
     [UI_STATE.READY]: {
         [UI_ELEMENT.DRAG_AND_DROP]: true,
@@ -98,6 +102,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.PRETTIFY_BUTTON]: true,
         [UI_ELEMENT.PROGRESS_BAR]: false,
         [UI_ELEMENT.QUERY_INPUT_BOX]: true,
+        [UI_ELEMENT.TIMEZONE_SETTER]: true,
     },
 });
 

From be8e0c3ec9b537877d5a511c0ab25fe113cf63ec Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Sat, 19 Apr 2025 19:37:22 +0800
Subject: [PATCH 03/10] Add the selected timezone to the URL parameter

---
 src/components/StatusBar/TimezoneSelect/index.tsx | 8 ++++++++
 src/contexts/UrlContextProvider.tsx               | 1 +
 src/typings/url.ts                                | 4 +++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index 91cbb865c..c0cea434c 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -15,6 +15,8 @@ import { SelectValue } from "@mui/base/useSelect";
 import { StateContext } from "../../../contexts/StateContextProvider";
 import { isDisabled } from "../../../utils/states";
 import { UI_ELEMENT } from "../../../typings/states";
+import { updateWindowUrlHashParams } from "../../../contexts/UrlContextProvider";
+import { HASH_PARAM_NAMES } from "../../../typings/url";
 
 const LOGGER_TIMEZONE = "Logger";
 const COMMON_TIMEZONES = [
@@ -62,6 +64,12 @@ const TimezoneSelect = () => {
         }
     }, [disabled]);
 
+    useEffect(() => {
+        updateWindowUrlHashParams({
+            [HASH_PARAM_NAMES.LOG_TIMEZONE]: selectedTimezone,
+        });
+    }, [selectedTimezone]);
+
     const handleRenderValue = (selected: SelectValue<SelectOption<string>, false>) => (
         <Box className="timezone-select-render-value-box">
             <Chip className="timezone-select-render-value-box-label">Timezone</Chip>
diff --git a/src/contexts/UrlContextProvider.tsx b/src/contexts/UrlContextProvider.tsx
index 70740b997..f3d4689e8 100644
--- a/src/contexts/UrlContextProvider.tsx
+++ b/src/contexts/UrlContextProvider.tsx
@@ -32,6 +32,7 @@ const URL_SEARCH_PARAMS_DEFAULT = Object.freeze({
 const URL_HASH_PARAMS_DEFAULT = Object.freeze({
     [HASH_PARAM_NAMES.IS_PRETTIFIED]: false,
     [HASH_PARAM_NAMES.LOG_EVENT_NUM]: null,
+    [HASH_PARAM_NAMES.LOG_TIMEZONE]: null,
 });
 
 /**
diff --git a/src/typings/url.ts b/src/typings/url.ts
index b9e331228..239230e00 100644
--- a/src/typings/url.ts
+++ b/src/typings/url.ts
@@ -6,8 +6,9 @@ enum SEARCH_PARAM_NAMES {
 }
 
 enum HASH_PARAM_NAMES {
-    LOG_EVENT_NUM = "logEventNum",
     IS_PRETTIFIED = "isPrettified",
+    LOG_EVENT_NUM = "logEventNum",
+    LOG_TIMEZONE = "logTimeZone",
 }
 
 interface UrlSearchParams {
@@ -17,6 +18,7 @@ interface UrlSearchParams {
 interface UrlHashParams {
     [HASH_PARAM_NAMES.IS_PRETTIFIED]: boolean;
     [HASH_PARAM_NAMES.LOG_EVENT_NUM]: number;
+    [HASH_PARAM_NAMES.LOG_TIMEZONE]: string;
 }
 
 type UrlSearchParamUpdatesType = {

From 1bc4ed4b0340548feb8a9648a3a76e95a4e9bdd4 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Sat, 19 Apr 2025 20:11:06 +0800
Subject: [PATCH 04/10] Pass the selected timezone to worker so that we can
 format the tz there

---
 .../StatusBar/TimezoneSelect/index.tsx        |  3 +-
 src/contexts/StateContextProvider.tsx         | 64 ++++++++++++-------
 src/contexts/UrlContextProvider.tsx           |  5 ++
 src/services/LogFileManager/index.ts          |  5 +-
 src/services/MainWorker.ts                    |  9 +--
 src/typings/url.ts                            |  2 +-
 src/typings/worker.ts                         |  6 +-
 7 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index c0cea434c..ec6761469 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -65,8 +65,9 @@ const TimezoneSelect = () => {
     }, [disabled]);
 
     useEffect(() => {
+        const updatedTimezone = (LOGGER_TIMEZONE === selectedTimezone) ? null : selectedTimezone;
         updateWindowUrlHashParams({
-            [HASH_PARAM_NAMES.LOG_TIMEZONE]: selectedTimezone,
+            [HASH_PARAM_NAMES.LOG_TIMEZONE]: updatedTimezone,
         });
     }, [selectedTimezone]);
 
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index 91f6ba9ee..d4ff04490 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -62,7 +62,6 @@ import {
     UrlContext,
 } from "./UrlContextProvider";
 
-
 interface StateContextType {
     activeTabName: TAB_NAME;
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap;
@@ -187,16 +186,18 @@ const getPageNumCursor = (
  * @param worker
  * @param cursor
  * @param isPrettified is pretty-printing log messages enabled
+ * @param logTimezone format the timezone of the log timestamp
  */
 const loadPageByCursor = (
     worker: Worker,
     cursor: CursorType,
     isPrettified: boolean,
+    logTimezone: string | null
 ) => {
     workerPostReq(worker, WORKER_REQ_CODE.LOAD_PAGE, {
         cursor: cursor,
         isPrettified: isPrettified,
-        // TODO-ZZX: 新增参数
+        logTimezone: logTimezone
     });
 };
 
@@ -249,7 +250,7 @@ const updateUrlIfEventOnPage = (
 // eslint-disable-next-line max-lines-per-function, max-statements
 const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {postPopUp} = useContext(NotificationContext);
-    const {filePath, isPrettified, logEventNum} = useContext(UrlContext);
+    const {filePath, isPrettified, logEventNum, logTimezone} = useContext(UrlContext);
 
     // States
     const [activeTabName, setActiveTabName] = useState<TAB_NAME>(STATE_DEFAULT.activeTabName);
@@ -273,6 +274,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const isPrettifiedRef = useRef<boolean>(isPrettified ?? false);
     const logEventNumRef = useRef(logEventNum);
     const logExportManagerRef = useRef<null | LogExportManager>(null);
+    const logTimezoneRef = useRef<string | null>(logTimezone);
     const mainWorkerRef = useRef<null | Worker>(null);
     const numPagesRef = useRef<number>(numPages);
     const pageNumRef = useRef<number>(pageNum);
@@ -425,7 +427,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             decoderOptions: getConfig(CONFIG_KEY.DECODER_OPTIONS),
             fileSrc: fileSrc,
             isPrettified: isPrettifiedRef.current,
-            // TODO-ZZX: 新增参数，时区
+            logTimezone: logTimezoneRef.current,
             pageSize: getConfig(CONFIG_KEY.PAGE_SIZE),
         });
     }, [
@@ -466,7 +468,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
 
         setUiState(UI_STATE.FAST_LOADING);
-        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current);
+        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current, logTimezoneRef.current);
     }, [loadFile]);
 
     const filterLogs = useCallback((filter: LogLevelFilter) => {
@@ -478,13 +480,25 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},
             isPrettified: isPrettifiedRef.current,
             logLevelFilter: filter,
-            // TODO-ZZX: 新增参数
+            logTimezone: logTimezoneRef.current
         });
     }, []);
 
-    // Synchronize `isPrettifiedRef` with `isPrettified`.
+    // Synchronize `isPrettifiedRef` with `isPrettified`, and repaint the page with prettifying accordingly
     useEffect(() => {
         isPrettifiedRef.current = isPrettified ?? false;
+
+        if (null === mainWorkerRef.current) {
+            return;
+        }
+
+        const cursor: CursorType = {
+            code: CURSOR_CODE.EVENT_NUM,
+            args: {eventNum: logEventNumRef.current ?? 1},
+        };
+
+        setUiState(UI_STATE.FAST_LOADING);
+        loadPageByCursor(mainWorkerRef.current, cursor, isPrettified ?? false, logTimezoneRef.current);
     }, [isPrettified]);
 
     // Synchronize `logEventNumRef` with `logEventNum`.
@@ -492,6 +506,24 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         logEventNumRef.current = logEventNum;
     }, [logEventNum]);
 
+    // Synchronize `logTimezoneRef` with `logTimezone`, and repaint the page with specified timestamp zone
+    useEffect(() => {
+        logTimezoneRef.current = logTimezone;
+
+        if (null === mainWorkerRef.current) {
+            return;
+        }
+
+        const cursor: CursorType = {
+            code: CURSOR_CODE.EVENT_NUM,
+            args: {eventNum: logEventNumRef.current ?? 1},
+        };
+
+        setUiState(UI_STATE.FAST_LOADING);
+        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current, logTimezone);
+
+    }, [logTimezone]);
+
     // Synchronize `pageNumRef` with `pageNum`.
     useEffect(() => {
         pageNumRef.current = pageNum;
@@ -511,22 +543,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
     }, [uiState]);
 
-    useEffect(() => {
-        if (null === mainWorkerRef.current) {
-            return;
-        }
-
-        const cursor: CursorType = {
-            code: CURSOR_CODE.EVENT_NUM,
-            args: {eventNum: logEventNumRef.current ?? 1},
-        };
-
-        setUiState(UI_STATE.FAST_LOADING);
-        loadPageByCursor(mainWorkerRef.current, cursor, isPrettified ?? false);
-    }, [
-        isPrettified,
-    ]);
-
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
     useEffect(() => {
         if (null === mainWorkerRef.current) {
@@ -553,7 +569,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         };
 
         setUiState(UI_STATE.FAST_LOADING);
-        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current);
+        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current, logTimezoneRef.current);
     }, [
         logEventNum,
         numEvents,
diff --git a/src/contexts/UrlContextProvider.tsx b/src/contexts/UrlContextProvider.tsx
index f3d4689e8..3052f1f39 100644
--- a/src/contexts/UrlContextProvider.tsx
+++ b/src/contexts/UrlContextProvider.tsx
@@ -219,6 +219,11 @@ const getWindowUrlHashParams = () => {
         urlHashParams[HASH_PARAM_NAMES.IS_PRETTIFIED] = "true" === isPrettified;
     }
 
+    const logTimezone = hashParams.get(HASH_PARAM_NAMES.LOG_TIMEZONE);
+    if (null !== logTimezone) {
+        urlHashParams[HASH_PARAM_NAMES.LOG_TIMEZONE] = logTimezone;
+    }
+
     return urlHashParams;
 };
 
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 34ce2b371..6f279bac4 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -246,13 +246,14 @@ class LogFileManager {
      *
      * @param cursor The cursor indicating the page to load. See {@link CursorType}.
      * @param isPrettified Are the log messages pretty printed.
-     * // TODO-ZZX: 新增一个参数，表示从UI里选择的时区，得加默认UTC
+     * @param logTimezone Format the log timestamp to specified timezone.
      * @return An object containing the logs as a string, a map of line numbers to log event
      * numbers, and the line number of the first line in the cursor identified event.
      * @throws {Error} if any error occurs during decode.
      */
-    loadPage (cursor: CursorType, isPrettified: boolean): WorkerResp<WORKER_RESP_CODE.PAGE_DATA> {
+    loadPage (cursor: CursorType, isPrettified: boolean, logTimezone: string): WorkerResp<WORKER_RESP_CODE.PAGE_DATA> {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
+        console.log(`Timezone here!: ${logTimezone}`)
         const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
         const numActiveEvents: number = filteredLogEventMap ?
             filteredLogEventMap.length :
diff --git a/src/services/MainWorker.ts b/src/services/MainWorker.ts
index 6d884756b..99a041589 100644
--- a/src/services/MainWorker.ts
+++ b/src/services/MainWorker.ts
@@ -96,8 +96,7 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 });
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
-                    // TODO-ZZX: 从args里传入时区
-                    LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified)
+                    LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified, args.logTimezone)
                 );
                 break;
             }
@@ -107,8 +106,7 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 }
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
-                    // TODO-ZZX: 从args里传入时区
-                    LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified)
+                    LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified, args.logTimezone)
                 );
                 break;
             case WORKER_REQ_CODE.SET_FILTER:
@@ -119,8 +117,7 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 LOG_FILE_MANAGER.setLogLevelFilter(args.logLevelFilter);
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
-                    // TODO-ZZX: 从args里传入时区
-                    LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified)
+                    LOG_FILE_MANAGER.loadPage(args.cursor, args.isPrettified, args.logTimezone)
                 );
                 break;
             case WORKER_REQ_CODE.START_QUERY:
diff --git a/src/typings/url.ts b/src/typings/url.ts
index 239230e00..27feafb75 100644
--- a/src/typings/url.ts
+++ b/src/typings/url.ts
@@ -8,7 +8,7 @@ enum SEARCH_PARAM_NAMES {
 enum HASH_PARAM_NAMES {
     IS_PRETTIFIED = "isPrettified",
     LOG_EVENT_NUM = "logEventNum",
-    LOG_TIMEZONE = "logTimeZone",
+    LOG_TIMEZONE = "logTimezone",
 }
 
 interface UrlSearchParams {
diff --git a/src/typings/worker.ts b/src/typings/worker.ts
index 2847145b6..d7badd767 100644
--- a/src/typings/worker.ts
+++ b/src/typings/worker.ts
@@ -103,18 +103,18 @@ type WorkerReqMap = {
         cursor: CursorType;
         decoderOptions: DecoderOptions;
         isPrettified: boolean;
-        // TODO-ZZX: 新增时区参数
+        logTimezone: string | null;
     };
     [WORKER_REQ_CODE.LOAD_PAGE]: {
         cursor: CursorType;
         isPrettified: boolean;
-        // TODO-ZZX: 新增时区参数
+        logTimezone: string | null;
     };
     [WORKER_REQ_CODE.SET_FILTER]: {
         cursor: CursorType;
         logLevelFilter: LogLevelFilter;
         isPrettified: boolean;
-        // TODO-ZZX: 新增时区参数
+        logTimezone: string | null;
     };
     [WORKER_REQ_CODE.START_QUERY]: {
         queryString: string;

From 8808871b3c634d80fd185ab15e8a555fe2ae3541 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Sat, 19 Apr 2025 21:37:47 +0800
Subject: [PATCH 05/10] Finish the basic timestamp switching

---
 .../StatusBar/TimezoneSelect/index.tsx        | 25 ++++++++++++++-----
 src/services/LogFileManager/index.ts          | 11 ++++----
 src/services/decoders/ClpIrDecoder/index.ts   | 20 +++++++++------
 src/services/decoders/JsonlDecoder/index.ts   |  1 +
 src/typings/decoders.ts                       |  5 ++--
 5 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index ec6761469..a1855371c 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import {
     Box,
     Chip,
@@ -15,7 +15,7 @@ import { SelectValue } from "@mui/base/useSelect";
 import { StateContext } from "../../../contexts/StateContextProvider";
 import { isDisabled } from "../../../utils/states";
 import { UI_ELEMENT } from "../../../typings/states";
-import { updateWindowUrlHashParams } from "../../../contexts/UrlContextProvider";
+import { updateWindowUrlHashParams, UrlContext } from "../../../contexts/UrlContextProvider";
 import { HASH_PARAM_NAMES } from "../../../typings/url";
 
 const LOGGER_TIMEZONE = "Logger";
@@ -47,10 +47,13 @@ const getLongOffsetOfTimezone = (tz: string): string => {
 
 const TimezoneSelect = () => {
     const {uiState} = useContext(StateContext);
+    const {logTimezone} = useContext(UrlContext);
 
     const [browserTimezone, setBrowserTimezone] = useState<string | null>(null);
     const [selectedTimezone, setSelectedTimezone] = useState<string | null>(null);
 
+    const logTimezoneRef = useRef<string | null>(logTimezone);
+
     const disabled = isDisabled(uiState, UI_ELEMENT.TIMEZONE_SETTER);
 
     useEffect(() => {
@@ -65,10 +68,20 @@ const TimezoneSelect = () => {
     }, [disabled]);
 
     useEffect(() => {
-        const updatedTimezone = (LOGGER_TIMEZONE === selectedTimezone) ? null : selectedTimezone;
-        updateWindowUrlHashParams({
-            [HASH_PARAM_NAMES.LOG_TIMEZONE]: updatedTimezone,
-        });
+        logTimezoneRef.current = logTimezone;
+        if (!disabled) {
+            setSelectedTimezone(logTimezone);
+        }
+    }, [logTimezone]);
+
+    useEffect(() => {
+        // Avoid infinite loop, also make sure if user directly changes the URL, the selected option matches that
+        if (selectedTimezone !== logTimezoneRef.current) {
+            const updatedTimezone = (LOGGER_TIMEZONE === selectedTimezone) ? null : selectedTimezone;
+            updateWindowUrlHashParams({
+                [HASH_PARAM_NAMES.LOG_TIMEZONE]: updatedTimezone,
+            });
+        }
     }, [selectedTimezone]);
 
     const handleRenderValue = (selected: SelectValue<SelectOption<string>, false>) => (
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 6f279bac4..ec35988ab 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -38,7 +38,6 @@ import {
     loadFile,
 } from "./utils";
 
-
 const MAX_QUERY_RESULT_COUNT = 1_000;
 
 /**
@@ -223,6 +222,7 @@ class LogFileManager {
             beginLogEventIdx,
             endLogEventIdx,
             false,
+            null
         );
 
         if (null === results) {
@@ -251,9 +251,8 @@ class LogFileManager {
      * numbers, and the line number of the first line in the cursor identified event.
      * @throws {Error} if any error occurs during decode.
      */
-    loadPage (cursor: CursorType, isPrettified: boolean, logTimezone: string): WorkerResp<WORKER_RESP_CODE.PAGE_DATA> {
+    loadPage (cursor: CursorType, isPrettified: boolean, logTimezone: string | null): WorkerResp<WORKER_RESP_CODE.PAGE_DATA> {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
-        console.log(`Timezone here!: ${logTimezone}`)
         const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
         const numActiveEvents: number = filteredLogEventMap ?
             filteredLogEventMap.length :
@@ -271,6 +270,7 @@ class LogFileManager {
             pageBegin,
             pageEnd,
             null !== filteredLogEventMap,
+            logTimezone
         );
 
         if (null === results) {
@@ -369,7 +369,7 @@ class LogFileManager {
     #queryChunkAndScheduleNext (
         queryId: number,
         chunkBeginIdx: number,
-        queryRegex: RegExp
+        queryRegex: RegExp,
     ): void {
         if (queryId !== this.#queryId) {
             // Current task no longer corresponds to the latest query in the LogFileManager.
@@ -390,7 +390,8 @@ class LogFileManager {
         const decodedEvents = this.#decoder.decodeRange(
             chunkBeginIdx,
             chunkEndIdx,
-            null !== filteredLogEventMap
+            null !== filteredLogEventMap,
+            null
         );
 
         if (null === decodedEvents) {
diff --git a/src/services/decoders/ClpIrDecoder/index.ts b/src/services/decoders/ClpIrDecoder/index.ts
index b68f26748..c7ae787d4 100644
--- a/src/services/decoders/ClpIrDecoder/index.ts
+++ b/src/services/decoders/ClpIrDecoder/index.ts
@@ -28,7 +28,6 @@ import {
     StructuredIrNamespaceKeys,
 } from "./utils";
 
-
 class ClpIrDecoder implements Decoder {
     #streamReader: ClpStreamReader;
 
@@ -83,17 +82,22 @@ class ClpIrDecoder implements Decoder {
      * Formats unstructured log events by prepending a formatted timestamp to each message.
      *
      * @param logEvents
+     * @param logTimezone
      * @return The formatted log events.
      */
-    static #formatUnstructuredResults = (logEvents: DecodeResult[]): DecodeResult[] => {
+    static #formatUnstructuredResults = (logEvents: DecodeResult[], logTimezone: string | null): DecodeResult[] => {
         for (const r of logEvents) {
             const [
                 message, timestamp,
             ] = r;
 
-            // TODO-ZZX: 转成指定时区
             const dayJsTimestamp: Dayjs = convertToDayjsTimestamp(timestamp);
-            r[0] = dayJsTimestamp.format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
+            if (null !== logTimezone) {
+                r[0] = dayJsTimestamp.tz(logTimezone).format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
+            } else {
+                // TODO-ZZX: 能读取原始数据中的timezone后这里转成对应的原始数据中的timezone
+                r[0] = dayJsTimestamp.format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
+            }
         }
 
         return logEvents;
@@ -135,13 +139,15 @@ class ClpIrDecoder implements Decoder {
      * @param beginIdx
      * @param endIdx
      * @param useFilter
+     * @param timezone
      * @return
      * @throws {Error} if the formatter is not set for structured logs.
      */
     decodeRange (
         beginIdx: number,
         endIdx: number,
-        useFilter: boolean
+        useFilter: boolean,
+        timezone: string | null
     ): Nullable<DecodeResult[]> {
         // eslint-disable-next-line no-warning-comments
         // TODO: Correct DecodeResult typing in `clp-ffi-js` and remove below type assertion.
@@ -159,16 +165,16 @@ class ClpIrDecoder implements Decoder {
                 throw new Error("Formatter is not set for structured logs.");
             }
 
-            return ClpIrDecoder.#formatUnstructuredResults(results);
+            return ClpIrDecoder.#formatUnstructuredResults(results, timezone);
         }
 
+        // TODO: Support specifying timezone for JSON log events
         for (const r of results) {
             const [
                 message,
                 timestamp,
                 level,
             ] = r;
-            // TODO-ZZX: 这里也得转换成指定的时区
             const dayJsTimestamp: Dayjs = convertToDayjsTimestamp(timestamp);
             let fields: JsonObject = {};
 
diff --git a/src/services/decoders/JsonlDecoder/index.ts b/src/services/decoders/JsonlDecoder/index.ts
index a189a07f4..a9282044d 100644
--- a/src/services/decoders/JsonlDecoder/index.ts
+++ b/src/services/decoders/JsonlDecoder/index.ts
@@ -100,6 +100,7 @@ class JsonlDecoder implements Decoder {
         beginIdx: number,
         endIdx: number,
         useFilter: boolean,
+        _timezone: string | null
     ): Nullable<DecodeResult[]> {
         if (useFilter && null === this.#filteredLogEventMap) {
             return null;
diff --git a/src/typings/decoders.ts b/src/typings/decoders.ts
index 37504bc28..8f03a7aa7 100644
--- a/src/typings/decoders.ts
+++ b/src/typings/decoders.ts
@@ -90,14 +90,15 @@ interface Decoder {
      * @param beginIdx
      * @param endIdx
      * @param useFilter Whether to decode from the filtered or unfiltered log events collection.
+     * @param timezone Format the epoch to specified timezone
      * @return The decoded log events on success or null if any log event in the range doesn't exist
      * (e.g., the range exceeds the number of log events in the collection).
      */
     decodeRange(
         beginIdx: number,
         endIdx: number,
-        useFilter: boolean
-        // TODO-ZZX: 新增参数，用来表示时区，给它一个默认值，UTC时区
+        useFilter: boolean,
+        timezone: string | null,
     ): Nullable<DecodeResult[]>;
 }
 

From 546eb3c982d5329e457cd053d7c203010529eb8b Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Sat, 19 Apr 2025 23:20:17 +0800
Subject: [PATCH 06/10] Fix lint

---
 docs/src/dev-guide/contributing-validation.md |   1 +
 .../StatusBar/LogLevelSelect/index.tsx        |   1 +
 .../StatusBar/TimezoneSelect/index.tsx        | 215 +++++++++++-------
 src/components/StatusBar/index.tsx            |   2 +-
 src/contexts/StateContextProvider.tsx         |  33 ++-
 src/services/LogFileManager/index.ts          |  14 +-
 src/services/decoders/ClpIrDecoder/index.ts   |  14 +-
 src/services/decoders/JsonlDecoder/index.ts   |   5 +-
 src/typings/states.ts                         |   2 +-
 9 files changed, 187 insertions(+), 100 deletions(-)

diff --git a/docs/src/dev-guide/contributing-validation.md b/docs/src/dev-guide/contributing-validation.md
index 12f597409..fd1fcf757 100644
--- a/docs/src/dev-guide/contributing-validation.md
+++ b/docs/src/dev-guide/contributing-validation.md
@@ -40,5 +40,6 @@ still be tested manually:
   * Toggling tabbed panels in the sidebar
   * Using keyboard shortcuts
   * Toggling "Prettify" in both the status bar and the address bar
+  * Select different timezone in the "Timezone" dropdown menu in the status bar or URL
 
 [gh-workflow-test]: https://github.com/y-scope/yscope-log-viewer/blob/main/.github/workflows/test.yaml
diff --git a/src/components/StatusBar/LogLevelSelect/index.tsx b/src/components/StatusBar/LogLevelSelect/index.tsx
index ab0feb890..57287c04b 100644
--- a/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -45,6 +45,7 @@ import LogLevelChip from "./LogLevelChip";
 
 import "./index.css";
 
+
 interface LogSelectOptionProps {
     isChecked: boolean;
     logLevelName: string;
diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index a1855371c..53efeb0b2 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -1,4 +1,12 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+import {SelectValue} from "@mui/base/useSelect";
 import {
     Box,
     Chip,
@@ -10,15 +18,20 @@ import {
 } from "@mui/joy";
 
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+
+import {StateContext} from "../../../contexts/StateContextProvider";
+import {
+    updateWindowUrlHashParams,
+    UrlContext,
+} from "../../../contexts/UrlContextProvider";
+import {UI_ELEMENT} from "../../../typings/states";
+import {HASH_PARAM_NAMES} from "../../../typings/url";
+import {isDisabled} from "../../../utils/states";
+
 import "./index.css";
-import { SelectValue } from "@mui/base/useSelect";
-import { StateContext } from "../../../contexts/StateContextProvider";
-import { isDisabled } from "../../../utils/states";
-import { UI_ELEMENT } from "../../../typings/states";
-import { updateWindowUrlHashParams, UrlContext } from "../../../contexts/UrlContextProvider";
-import { HASH_PARAM_NAMES } from "../../../typings/url";
-
-const LOGGER_TIMEZONE = "Logger";
+
+
+const LOGGER_TIMEZONE = "Logger Timezone";
 const COMMON_TIMEZONES = [
     "America/New_York",
     "Europe/London",
@@ -38,13 +51,82 @@ const COMMON_TIMEZONES = [
     "Pacific/Auckland",
 ];
 
+/**
+ * Convert the timezone string to GMT +/- minutes
+ *
+ * @param tz
+ * @return The GMT +/- minutes shown before the timezone string
+ */
 const getLongOffsetOfTimezone = (tz: string): string => {
-    return Intl.DateTimeFormat(undefined, {
+    return new Intl.DateTimeFormat("default", {
         timeZone: tz,
         timeZoneName: "longOffset",
-    }).formatToParts().find(p => p.type === "timeZoneName")?.value ?? "Unknown timezone"
+    }).formatToParts()
+        .find((p) => "timeZoneName" === p.type)?.value ?? "Unknown timezone";
 };
 
+/**
+ * Render the selected timezone option in the status bar
+ *
+ * @param selected
+ * @return The selected timezone shown in the status bar
+ */
+const handleRenderValue = (selected: SelectValue<SelectOption<string>, false>) => (
+    <Box className={"timezone-select-render-value-box"}>
+        <Chip className={"timezone-select-render-value-box-label"}>Timezone</Chip>
+        <Chip>
+            {selected?.label}
+        </Chip>
+    </Box>
+);
+
+/**
+ * Render the timezone options in the dropdown menu
+ *
+ * @param value
+ * @param label
+ * @param onClick
+ * @param suffix
+ * @return An option box in the dropdown menu
+ */
+const renderTimezoneOption = (
+    value: string,
+    label: string,
+    onClick: React.MouseEventHandler,
+    suffix?: string
+) => (
+    <Option
+        data-value={value}
+        key={value}
+        value={value}
+        onClick={onClick}
+    >
+        {LOGGER_TIMEZONE !== value &&
+            <ListItemContent>
+                (
+                {getLongOffsetOfTimezone(value)}
+                )
+                {" "}
+                {label}
+                {" "}
+                {suffix ?? ""}
+            </ListItemContent>}
+
+        {LOGGER_TIMEZONE === value &&
+            <ListItemContent>
+                {LOGGER_TIMEZONE}
+            </ListItemContent>}
+    </Option>
+);
+
+/**
+ * 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} = useContext(StateContext);
     const {logTimezone} = useContext(UrlContext);
@@ -57,63 +139,52 @@ const TimezoneSelect = () => {
     const disabled = isDisabled(uiState, UI_ELEMENT.TIMEZONE_SETTER);
 
     useEffect(() => {
-        const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const tz = new Intl.DateTimeFormat().resolvedOptions().timeZone;
         setBrowserTimezone(tz);
     }, []);
 
-    useEffect(() => {
-        if (!disabled) {
-            setSelectedTimezone(LOGGER_TIMEZONE);
-        }
-    }, [disabled]);
-
     useEffect(() => {
         logTimezoneRef.current = logTimezone;
         if (!disabled) {
-            setSelectedTimezone(logTimezone);
+            setSelectedTimezone(logTimezone ?? LOGGER_TIMEZONE);
         }
-    }, [logTimezone]);
+    }, [disabled,
+        logTimezone]);
 
     useEffect(() => {
-        // Avoid infinite loop, also make sure if user directly changes the URL, the selected option matches that
         if (selectedTimezone !== logTimezoneRef.current) {
-            const updatedTimezone = (LOGGER_TIMEZONE === selectedTimezone) ? null : selectedTimezone;
+            const updatedTimezone = (LOGGER_TIMEZONE === selectedTimezone) ?
+                null :
+                selectedTimezone;
+
             updateWindowUrlHashParams({
                 [HASH_PARAM_NAMES.LOG_TIMEZONE]: updatedTimezone,
             });
         }
     }, [selectedTimezone]);
 
-    const handleRenderValue = (selected: SelectValue<SelectOption<string>, false>) => (
-        <Box className="timezone-select-render-value-box">
-            <Chip className="timezone-select-render-value-box-label">Timezone</Chip>
-            <Chip>{selected?.label}</Chip>
-        </Box>
-    );
-
     const handleOptionClick = useCallback((ev: React.MouseEvent) => {
         const currentTarget = ev.currentTarget as HTMLElement;
-        const value = currentTarget.dataset.value!;
+        const value = currentTarget.dataset.value ?? LOGGER_TIMEZONE;
         setSelectedTimezone(value);
     }, []);
 
     return (
         <Select
-            className="timezone-select"
+            className={"timezone-select"}
             disabled={disabled}
-            value={selectedTimezone}
-            onChange={(_, value) => {
-                if (value) setSelectedTimezone(value);
-            }}
+            indicator={<KeyboardArrowUpIcon/>}
             renderValue={handleRenderValue}
-            size="sm"
-            variant="soft"
-            indicator={<KeyboardArrowUpIcon />}
+            size={"sm"}
+            value={selectedTimezone}
+            variant={"soft"}
             placeholder={
-                <Box className="timezone-select-render-value-box">
-                    <Chip className={`timezone-select-render-value-box-label ${disabled ?
-                        "timezone-select-render-value-box-label-disabled" :
-                        ""}`}>
+                <Box className={"timezone-select-render-value-box"}>
+                    <Chip
+                        className={`timezone-select-render-value-box-label ${disabled ?
+                            "timezone-select-render-value-box-label-disabled" :
+                            ""}`}
+                    >
                         Timezone
                     </Chip>
                 </Box>
@@ -123,48 +194,34 @@ const TimezoneSelect = () => {
                     className: "timezone-select-listbox",
                     placement: "top-end",
                     modifiers: [
-                        { name: "equalWidth", enabled: false },
-                        { name: "offset", enabled: false },
+                        {name: "equalWidth", enabled: false},
+                        {name: "offset", enabled: false},
                     ],
                 },
             }}
+            onChange={(_, value) => {
+                if (value) {
+                    setSelectedTimezone(value);
+                }
+            }}
         >
-            <Option
-                key={LOGGER_TIMEZONE}
-                value={LOGGER_TIMEZONE}
-                data-value={LOGGER_TIMEZONE}
-                onClick={handleOptionClick}
-            >
-                <ListItemContent>{LOGGER_TIMEZONE}</ListItemContent>
-            </Option>
-
-            {browserTimezone && browserTimezone !== "UTC" && (
-                <Option
-                    key={browserTimezone}
-                    value={browserTimezone}
-                    data-value={browserTimezone}
-                    onClick={handleOptionClick}
-                >
-                    <ListItemContent>
-                        ({getLongOffsetOfTimezone(browserTimezone)}) {browserTimezone} (Browser Timezone)
-                    </ListItemContent>
-                </Option>
+            {renderTimezoneOption(LOGGER_TIMEZONE, LOGGER_TIMEZONE, handleOptionClick)}
+
+            {browserTimezone &&
+                renderTimezoneOption(
+                    browserTimezone,
+                    browserTimezone,
+                    handleOptionClick,
+                    "(Browser Timezone)"
+                )}
+
+            <ListDivider
+                inset={"gutter"}
+                role={"separator"}/>
+
+            {COMMON_TIMEZONES.map(
+                (label) => renderTimezoneOption(label, label, handleOptionClick)
             )}
-            
-            <ListDivider role="separator" inset="gutter" />
-            
-            {COMMON_TIMEZONES.map((label) => (
-                <Option
-                    key={label}
-                    value={label}
-                    data-value={label}
-                    onClick={handleOptionClick}
-                >
-                    <ListItemContent>
-                        ({getLongOffsetOfTimezone(label)}) {label}
-                    </ListItemContent>
-                </Option>
-            ))}
         </Select>
     );
 };
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
index 0808c3e17..211032c5c 100644
--- a/src/components/StatusBar/index.tsx
+++ b/src/components/StatusBar/index.tsx
@@ -22,9 +22,9 @@ import {ACTION_NAME} from "../../utils/actions";
 import {isDisabled} from "../../utils/states";
 import LogLevelSelect from "./LogLevelSelect";
 import StatusBarToggleButton from "./StatusBarToggleButton";
+import TimezoneSelect from "./TimezoneSelect";
 
 import "./index.css";
-import TimezoneSelect from "./TimezoneSelect";
 
 
 /**
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index d4ff04490..6bac7944d 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -62,6 +62,7 @@ import {
     UrlContext,
 } from "./UrlContextProvider";
 
+
 interface StateContextType {
     activeTabName: TAB_NAME;
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap;
@@ -197,7 +198,7 @@ const loadPageByCursor = (
     workerPostReq(worker, WORKER_REQ_CODE.LOAD_PAGE, {
         cursor: cursor,
         isPrettified: isPrettified,
-        logTimezone: logTimezone
+        logTimezone: logTimezone,
     });
 };
 
@@ -468,7 +469,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
 
         setUiState(UI_STATE.FAST_LOADING);
-        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current, logTimezoneRef.current);
+        loadPageByCursor(
+            mainWorkerRef.current,
+            cursor,
+            isPrettifiedRef.current,
+            logTimezoneRef.current
+        );
     }, [loadFile]);
 
     const filterLogs = useCallback((filter: LogLevelFilter) => {
@@ -480,11 +486,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},
             isPrettified: isPrettifiedRef.current,
             logLevelFilter: filter,
-            logTimezone: logTimezoneRef.current
+            logTimezone: logTimezoneRef.current,
         });
     }, []);
 
-    // Synchronize `isPrettifiedRef` with `isPrettified`, and repaint the page with prettifying accordingly
+    // Synchronize `isPrettifiedRef` with `isPrettified`,
+    // and repaint the page with prettifying accordingly
     useEffect(() => {
         isPrettifiedRef.current = isPrettified ?? false;
 
@@ -498,7 +505,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         };
 
         setUiState(UI_STATE.FAST_LOADING);
-        loadPageByCursor(mainWorkerRef.current, cursor, isPrettified ?? false, logTimezoneRef.current);
+        loadPageByCursor(
+            mainWorkerRef.current,
+            cursor,
+            isPrettified ?? false,
+            logTimezoneRef.current
+        );
     }, [isPrettified]);
 
     // Synchronize `logEventNumRef` with `logEventNum`.
@@ -506,7 +518,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         logEventNumRef.current = logEventNum;
     }, [logEventNum]);
 
-    // Synchronize `logTimezoneRef` with `logTimezone`, and repaint the page with specified timestamp zone
+    // Synchronize `logTimezoneRef` with `logTimezone`,
+    // and repaint the page with specified timestamp zone
     useEffect(() => {
         logTimezoneRef.current = logTimezone;
 
@@ -521,7 +534,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
         setUiState(UI_STATE.FAST_LOADING);
         loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current, logTimezone);
-
     }, [logTimezone]);
 
     // Synchronize `pageNumRef` with `pageNum`.
@@ -569,7 +581,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         };
 
         setUiState(UI_STATE.FAST_LOADING);
-        loadPageByCursor(mainWorkerRef.current, cursor, isPrettifiedRef.current, logTimezoneRef.current);
+        loadPageByCursor(
+            mainWorkerRef.current,
+            cursor,
+            isPrettifiedRef.current,
+            logTimezoneRef.current
+        );
     }, [
         logEventNum,
         numEvents,
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index ec35988ab..8adbee1a1 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -38,6 +38,7 @@ import {
     loadFile,
 } from "./utils";
 
+
 const MAX_QUERY_RESULT_COUNT = 1_000;
 
 /**
@@ -251,7 +252,11 @@ class LogFileManager {
      * numbers, and the line number of the first line in the cursor identified event.
      * @throws {Error} if any error occurs during decode.
      */
-    loadPage (cursor: CursorType, isPrettified: boolean, logTimezone: string | null): WorkerResp<WORKER_RESP_CODE.PAGE_DATA> {
+    loadPage (
+        cursor: CursorType,
+        isPrettified: boolean,
+        logTimezone: string | null
+    ): WorkerResp<WORKER_RESP_CODE.PAGE_DATA> {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
         const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
         const numActiveEvents: number = filteredLogEventMap ?
@@ -274,9 +279,7 @@ class LogFileManager {
         );
 
         if (null === results) {
-            throw new Error("Error occurred during decoding. " +
-                `pageBegin=${pageBegin}, ` +
-                `pageEnd=${pageEnd}`);
+            throw new Error(`Failed decoding, pageBegin=${pageBegin}, pageEnd=${pageEnd}`);
         }
         const messages: string[] = [];
         const beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap = new Map();
@@ -284,12 +287,11 @@ class LogFileManager {
         results.forEach((r) => {
             const [
                 msg,
-                timestamp,
+                ,
                 ,
                 logEventNum,
             ] = r;
 
-            console.log(timestamp);
             const printedMsg = (isPrettified) ?
                 `${jsBeautify(msg)}\n` :
                 msg;
diff --git a/src/services/decoders/ClpIrDecoder/index.ts b/src/services/decoders/ClpIrDecoder/index.ts
index c7ae787d4..13bf4d759 100644
--- a/src/services/decoders/ClpIrDecoder/index.ts
+++ b/src/services/decoders/ClpIrDecoder/index.ts
@@ -28,6 +28,7 @@ import {
     StructuredIrNamespaceKeys,
 } from "./utils";
 
+
 class ClpIrDecoder implements Decoder {
     #streamReader: ClpStreamReader;
 
@@ -85,7 +86,10 @@ class ClpIrDecoder implements Decoder {
      * @param logTimezone
      * @return The formatted log events.
      */
-    static #formatUnstructuredResults = (logEvents: DecodeResult[], logTimezone: string | null): DecodeResult[] => {
+    static #formatUnstructuredResults = (
+        logEvents: DecodeResult[],
+        logTimezone: string | null
+    ): DecodeResult[] => {
         for (const r of logEvents) {
             const [
                 message, timestamp,
@@ -95,7 +99,8 @@ class ClpIrDecoder implements Decoder {
             if (null !== logTimezone) {
                 r[0] = dayJsTimestamp.tz(logTimezone).format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
             } else {
-                // TODO-ZZX: 能读取原始数据中的timezone后这里转成对应的原始数据中的timezone
+                // eslint-disable-next-line no-warning-comments
+                // TODO: ZZX, replace with the original log timezone
                 r[0] = dayJsTimestamp.format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
             }
         }
@@ -153,7 +158,7 @@ class ClpIrDecoder implements Decoder {
         // TODO: Correct DecodeResult typing in `clp-ffi-js` and remove below type assertion.
         const results =
             this.#streamReader.decodeRange(beginIdx, endIdx, useFilter) as Nullable<DecodeResult[]>;
-        
+
         if (null === results) {
             return null;
         }
@@ -168,7 +173,8 @@ class ClpIrDecoder implements Decoder {
             return ClpIrDecoder.#formatUnstructuredResults(results, timezone);
         }
 
-        // TODO: Support specifying timezone for JSON log events
+        // eslint-disable-next-line no-warning-comments
+        // TODO: Support specifying timezone for JSON log events.
         for (const r of results) {
             const [
                 message,
diff --git a/src/services/decoders/JsonlDecoder/index.ts b/src/services/decoders/JsonlDecoder/index.ts
index a9282044d..604de6d1e 100644
--- a/src/services/decoders/JsonlDecoder/index.ts
+++ b/src/services/decoders/JsonlDecoder/index.ts
@@ -100,7 +100,10 @@ class JsonlDecoder implements Decoder {
         beginIdx: number,
         endIdx: number,
         useFilter: boolean,
-        _timezone: string | null
+        // eslint-disable-next-line no-warning-comments
+        // TODO: Support specifying timezone for JSON log events.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _: string | null
     ): Nullable<DecodeResult[]> {
         if (useFilter && null === this.#filteredLogEventMap) {
             return null;
diff --git a/src/typings/states.ts b/src/typings/states.ts
index 847dfaf45..201a9cfcf 100644
--- a/src/typings/states.ts
+++ b/src/typings/states.ts
@@ -39,7 +39,7 @@ enum UI_ELEMENT {
     PRETTIFY_BUTTON,
     PROGRESS_BAR,
     QUERY_INPUT_BOX,
-    TIMEZONE_SETTER
+    TIMEZONE_SETTER,
 }
 
 type UiElementRow = {

From c721100ca87a25db1625066e51e250dce9b96779 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Tue, 13 May 2025 20:57:57 +0800
Subject: [PATCH 07/10] Apply on the latest code

---
 .../StatusBar/TimezoneSelect/index.tsx        |  5 +--
 src/contexts/AppController.tsx                | 16 ++++++-
 src/services/LogFileManager/index.ts          | 11 ++++-
 src/services/LogFileManagerProxy.ts           | 12 ++++--
 src/services/decoders/ClpIrDecoder/index.ts   |  2 +-
 src/stores/logFileStore.ts                    |  4 +-
 src/stores/viewStore.ts                       | 43 +++++++++++++++++--
 7 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index 53efeb0b2..f3922fd51 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -19,7 +19,6 @@ import {
 
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 
-import {StateContext} from "../../../contexts/StateContextProvider";
 import {
     updateWindowUrlHashParams,
     UrlContext,
@@ -29,12 +28,12 @@ import {HASH_PARAM_NAMES} from "../../../typings/url";
 import {isDisabled} from "../../../utils/states";
 
 import "./index.css";
+import useUiStore from "../../../stores/uiStore";
 
 
 const LOGGER_TIMEZONE = "Logger Timezone";
 const COMMON_TIMEZONES = [
     "America/New_York",
-    "Europe/London",
     "Asia/Shanghai",
     "Asia/Tokyo",
     "Australia/Sydney",
@@ -128,7 +127,7 @@ const renderTimezoneOption = (
  * @return A timezone select dropdown menu
  */
 const TimezoneSelect = () => {
-    const {uiState} = useContext(StateContext);
+    const uiState = useUiStore((state) => state.uiState);
     const {logTimezone} = useContext(UrlContext);
 
     const [browserTimezone, setBrowserTimezone] = useState<string | null>(null);
diff --git a/src/contexts/AppController.tsx b/src/contexts/AppController.tsx
index 2a2949bfc..9e2dde9dd 100644
--- a/src/contexts/AppController.tsx
+++ b/src/contexts/AppController.tsx
@@ -84,7 +84,7 @@ const updateUrlIfEventOnPage = (
  */
 const AppController = ({children}: StateContextProviderProps) => {
     const {postPopUp} = useContext(NotificationContext);
-    const {filePath, isPrettified, logEventNum} = useContext(UrlContext);
+    const {filePath, isPrettified, logEventNum, logTimezone} = useContext(UrlContext);
 
     // States
     const beginLineNumToLogEventNum = useViewStore((state) => state.beginLineNumToLogEventNum);
@@ -93,12 +93,15 @@ const AppController = ({children}: StateContextProviderProps) => {
     const {logFileManagerProxy} = useLogFileManagerStore.getState();
     const numEvents = useLogFileStore((state) => state.numEvents);
     const setLogEventNum = useContextStore((state) => state.setLogEventNum);
+    const setLogTimezone = useViewStore((state) => state.updateLogTimezone)
     const setUiState = useUiStore((state) => state.setUiState);
     const setPostPopUp = useContextStore((state) => state.setPostPopUp);
 
     // Refs
     const isPrettifiedRef = useRef<boolean>(isPrettified ?? false);
     const logEventNumRef = useRef(logEventNum);
+    const logTimezoneRef = useRef(logTimezone);
+
 
     // Synchronize `logEventNumRef` with `logEventNum`.
     useEffect(() => {
@@ -120,6 +123,15 @@ const AppController = ({children}: StateContextProviderProps) => {
         setIsPrettified,
     ]);
 
+    // Synchronize `logTimezoneRef` with `logTimezone`.
+    useEffect(() => {
+        logTimezoneRef.current = logTimezone;
+        setLogTimezone(logTimezoneRef.current);
+    }, [
+        logTimezone,
+        setLogTimezone,
+    ]);
+
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
     useEffect(() => {
         if (0 === numEvents || URL_HASH_PARAMS_DEFAULT.logEventNum === logEventNum) {
@@ -144,7 +156,7 @@ const AppController = ({children}: StateContextProviderProps) => {
         setUiState(UI_STATE.FAST_LOADING);
 
         (async () => {
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettifiedRef.current);
+            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettifiedRef.current, logTimezoneRef.current);
             useViewStore.getState().updatePageData(pageData);
         })().catch((e: unknown) => {
             postPopUp({
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 779de1165..e560586cd 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -253,6 +253,7 @@ class LogFileManager {
             beginLogEventIdx,
             endLogEventIdx,
             false,
+            null
         );
 
         if (null === results) {
@@ -276,11 +277,15 @@ class LogFileManager {
      *
      * @param cursor The cursor indicating the page to load. See {@link CursorType}.
      * @param isPrettified Are the log messages pretty printed.
+     * @param logTimezone Format the log timestamp to specified timezone.
      * @return An object containing the logs as a string, a map of line numbers to log event
      * numbers, and the line number of the first line in the cursor identified event.
      * @throws {Error} if any error occurs during decode.
      */
-    loadPage (cursor: CursorType, isPrettified: boolean): PageData {
+    loadPage (
+        cursor: CursorType,
+        isPrettified: boolean,
+        logTimezone: string | null): PageData {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
         const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
         const numActiveEvents: number = filteredLogEventMap ?
@@ -299,6 +304,7 @@ class LogFileManager {
             pageBegin,
             pageEnd,
             null !== filteredLogEventMap,
+            logTimezone
         );
 
         if (null === results) {
@@ -417,7 +423,8 @@ class LogFileManager {
         const decodedEvents = this.#decoder.decodeRange(
             chunkBeginIdx,
             chunkEndIdx,
-            null !== filteredLogEventMap
+            null !== filteredLogEventMap,
+            null,
         );
 
         if (null === decodedEvents) {
diff --git a/src/services/LogFileManagerProxy.ts b/src/services/LogFileManagerProxy.ts
index 6410bd376..d18152590 100644
--- a/src/services/LogFileManagerProxy.ts
+++ b/src/services/LogFileManagerProxy.ts
@@ -41,20 +41,24 @@ class LogFileManagerProxy {
         };
     }
 
-    loadPage (cursor: CursorType, isPrettified: boolean): PageData {
+    loadPage (
+        cursor: CursorType,
+        isPrettified: boolean,
+        logTimezone: string | null): PageData {
         const logFileManager = this.#getLogFileManager();
-        return logFileManager.loadPage(cursor, isPrettified);
+        return logFileManager.loadPage(cursor, isPrettified, logTimezone);
     }
 
     setFilter (
         cursor: CursorType,
         isPrettified: boolean,
-        logLevelFilter: LogLevelFilter
+        logLevelFilter: LogLevelFilter,
+        logTimezone: string | null
     ): PageData {
         const logFileManager = this.#getLogFileManager();
         logFileManager.setLogLevelFilter(logLevelFilter);
 
-        return this.loadPage(cursor, isPrettified);
+        return this.loadPage(cursor, isPrettified, logTimezone);
     }
 
     exportLogs (): void {
diff --git a/src/services/decoders/ClpIrDecoder/index.ts b/src/services/decoders/ClpIrDecoder/index.ts
index 35a4a0da1..012172721 100644
--- a/src/services/decoders/ClpIrDecoder/index.ts
+++ b/src/services/decoders/ClpIrDecoder/index.ts
@@ -100,7 +100,7 @@ class ClpIrDecoder implements Decoder {
                 r[0] = dayJsTimestamp.tz(logTimezone).format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
             } else {
                 // eslint-disable-next-line no-warning-comments
-                // TODO: ZZX, replace with the original log timezone
+                // TODO: Replace with the original log timezone
                 r[0] = dayJsTimestamp.format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
             }
         }
diff --git a/src/stores/logFileStore.ts b/src/stores/logFileStore.ts
index 706dfdeea..2c4cf940c 100644
--- a/src/stores/logFileStore.ts
+++ b/src/stores/logFileStore.ts
@@ -106,7 +106,7 @@ const useLogFileStore = create<LogFileState>((set, get) => ({
         const {logFileManagerProxy} = useLogFileManagerProxyStore.getState();
         const {clearQuery} = useQueryStore.getState();
         const {setUiState} = useUiStore.getState();
-        const {isPrettified, setLogData, updatePageData} = useViewStore.getState();
+        const {isPrettified, logTimezone, setLogData, updatePageData} = useViewStore.getState();
 
         setFileName("Loading...");
         setOnDiskFileSizeInBytes(LOG_FILE_STORE_DEFAULT.onDiskFileSizeInBytes);
@@ -131,7 +131,7 @@ const useLogFileStore = create<LogFileState>((set, get) => ({
                 Comlink.proxy(handleExportChunk),
                 Comlink.proxy(handleQueryResults)
             );
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified);
+            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified, logTimezone);
             set(fileInfo);
             updatePageData(pageData);
 
diff --git a/src/stores/viewStore.ts b/src/stores/viewStore.ts
index d8934cf85..0fd280cbc 100644
--- a/src/stores/viewStore.ts
+++ b/src/stores/viewStore.ts
@@ -31,6 +31,7 @@ interface ViewStoreValues {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap;
     isPrettified: boolean;
     logData: string;
+    logTimezone: string | null;
     numPages: number;
     pageNum: number;
 }
@@ -44,6 +45,7 @@ interface ViewStoreActions {
 
     loadPageByAction: (navAction: NavigationAction) => void;
     updateIsPrettified: (newIsPrettified: boolean) => void;
+    updateLogTimezone: (newLogTimezone: string | null) => void;
     updatePageData: (pageData: PageData) => void;
 }
 
@@ -53,6 +55,7 @@ const VIEW_STORE_DEFAULT: ViewStoreValues = {
     beginLineNumToLogEventNum: new Map<number, number>(),
     isPrettified: false,
     logData: "No file is open.",
+    logTimezone: null,
     numPages: 0,
     pageNum: 0,
 };
@@ -124,7 +127,8 @@ const useViewStore = create<ViewState>((set, get) => ({
                     },
                 },
                 get().isPrettified,
-                filter
+                filter,
+                get().logTimezone
             );
 
             updatePageData(pageData);
@@ -140,7 +144,7 @@ const useViewStore = create<ViewState>((set, get) => ({
         startQuery();
     },
     loadPageByAction: (navAction: NavigationAction) => {
-        const {isPrettified, numPages, pageNum, updatePageData} = get();
+        const {isPrettified, logTimezone, numPages, pageNum, updatePageData} = get();
         const {logEventNum, postPopUp} = useContextStore.getState();
         const {logFileManagerProxy} = useLogFileManagerStore.getState();
         const {fileSrc, loadFile} = useLogFileStore.getState();
@@ -177,7 +181,7 @@ const useViewStore = create<ViewState>((set, get) => ({
         setUiState(UI_STATE.FAST_LOADING);
 
         (async () => {
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified);
+            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified, logTimezone);
             updatePageData(pageData);
         })().catch((e: unknown) => {
             postPopUp({
@@ -220,7 +224,38 @@ const useViewStore = create<ViewState>((set, get) => ({
         }
 
         (async () => {
-            const pageData = await logFileManagerProxy.loadPage(cursor, newIsPrettified);
+            const pageData = await logFileManagerProxy.loadPage(cursor, newIsPrettified, get().logTimezone);
+            updatePageData(pageData);
+        })().catch((e: unknown) => {
+            postPopUp({
+                level: LOG_LEVEL.ERROR,
+                message: String(e),
+                timeoutMillis: DO_NOT_TIMEOUT_VALUE,
+                title: "Action failed",
+            });
+        });
+    },
+    updateLogTimezone: (newLogTimezone: string | null) => {
+        const {updatePageData} = get();
+        const {logEventNum, postPopUp} = useContextStore.getState();
+        const {logFileManagerProxy} = useLogFileManagerStore.getState();
+        const {setUiState} = useUiStore.getState();
+        if (newLogTimezone === get().logTimezone) {
+            return;
+        }
+        set({logTimezone: newLogTimezone});
+
+        setUiState(UI_STATE.FAST_LOADING);
+        let cursor: CursorType = {code: CURSOR_CODE.LAST_EVENT, args: null};
+        if (CONTEXT_STORE_DEFAULT.logEventNum !== logEventNum) {
+            cursor = {
+                code: CURSOR_CODE.EVENT_NUM,
+                args: {eventNum: logEventNum},
+            };
+        }
+
+        (async () => {
+            const pageData = await logFileManagerProxy.loadPage(cursor, get().isPrettified, newLogTimezone);
             updatePageData(pageData);
         })().catch((e: unknown) => {
             postPopUp({

From 6c67f2ed13dbb159e49057eecd6f2152bfca6468 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Tue, 13 May 2025 21:28:10 +0800
Subject: [PATCH 08/10] Fix lint

---
 src/components/StatusBar/TimezoneSelect/index.tsx |  2 +-
 src/contexts/AppController.tsx                    | 10 +++++++---
 src/services/LogFileManager/index.ts              |  7 +++----
 src/services/LogFileManagerProxy.ts               |  3 ++-
 src/stores/viewStore.ts                           | 14 ++++++++++++--
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index f3922fd51..6457a2ea2 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -23,12 +23,12 @@ import {
     updateWindowUrlHashParams,
     UrlContext,
 } from "../../../contexts/UrlContextProvider";
+import useUiStore from "../../../stores/uiStore";
 import {UI_ELEMENT} from "../../../typings/states";
 import {HASH_PARAM_NAMES} from "../../../typings/url";
 import {isDisabled} from "../../../utils/states";
 
 import "./index.css";
-import useUiStore from "../../../stores/uiStore";
 
 
 const LOGGER_TIMEZONE = "Logger Timezone";
diff --git a/src/contexts/AppController.tsx b/src/contexts/AppController.tsx
index 9e2dde9dd..d90a4851e 100644
--- a/src/contexts/AppController.tsx
+++ b/src/contexts/AppController.tsx
@@ -93,7 +93,7 @@ const AppController = ({children}: StateContextProviderProps) => {
     const {logFileManagerProxy} = useLogFileManagerStore.getState();
     const numEvents = useLogFileStore((state) => state.numEvents);
     const setLogEventNum = useContextStore((state) => state.setLogEventNum);
-    const setLogTimezone = useViewStore((state) => state.updateLogTimezone)
+    const setLogTimezone = useViewStore((state) => state.updateLogTimezone);
     const setUiState = useUiStore((state) => state.setUiState);
     const setPostPopUp = useContextStore((state) => state.setPostPopUp);
 
@@ -102,7 +102,6 @@ const AppController = ({children}: StateContextProviderProps) => {
     const logEventNumRef = useRef(logEventNum);
     const logTimezoneRef = useRef(logTimezone);
 
-
     // Synchronize `logEventNumRef` with `logEventNum`.
     useEffect(() => {
         if (null !== logEventNum) {
@@ -156,7 +155,12 @@ const AppController = ({children}: StateContextProviderProps) => {
         setUiState(UI_STATE.FAST_LOADING);
 
         (async () => {
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettifiedRef.current, logTimezoneRef.current);
+            const pageData = await logFileManagerProxy.loadPage(
+                cursor,
+                isPrettifiedRef.current,
+                logTimezoneRef.current,
+            );
+
             useViewStore.getState().updatePageData(pageData);
         })().catch((e: unknown) => {
             postPopUp({
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index e560586cd..879c542ca 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -285,7 +285,8 @@ class LogFileManager {
     loadPage (
         cursor: CursorType,
         isPrettified: boolean,
-        logTimezone: string | null): PageData {
+        logTimezone: string | null
+    ): PageData {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
         const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
         const numActiveEvents: number = filteredLogEventMap ?
@@ -308,9 +309,7 @@ class LogFileManager {
         );
 
         if (null === results) {
-            throw new Error("Error occurred during decoding. " +
-                `pageBegin=${pageBegin}, ` +
-                `pageEnd=${pageEnd}`);
+            throw new Error(`Failed decoding, pageBegin=${pageBegin}, pageEnd=${pageEnd}`);
         }
         const messages: string[] = [];
         const beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap = new Map();
diff --git a/src/services/LogFileManagerProxy.ts b/src/services/LogFileManagerProxy.ts
index d18152590..648782f9c 100644
--- a/src/services/LogFileManagerProxy.ts
+++ b/src/services/LogFileManagerProxy.ts
@@ -44,7 +44,8 @@ class LogFileManagerProxy {
     loadPage (
         cursor: CursorType,
         isPrettified: boolean,
-        logTimezone: string | null): PageData {
+        logTimezone: string | null
+    ): PageData {
         const logFileManager = this.#getLogFileManager();
         return logFileManager.loadPage(cursor, isPrettified, logTimezone);
     }
diff --git a/src/stores/viewStore.ts b/src/stores/viewStore.ts
index 0fd280cbc..2e6424791 100644
--- a/src/stores/viewStore.ts
+++ b/src/stores/viewStore.ts
@@ -224,7 +224,12 @@ const useViewStore = create<ViewState>((set, get) => ({
         }
 
         (async () => {
-            const pageData = await logFileManagerProxy.loadPage(cursor, newIsPrettified, get().logTimezone);
+            const pageData = await logFileManagerProxy.loadPage(
+                cursor,
+                newIsPrettified,
+                get().logTimezone,
+            );
+
             updatePageData(pageData);
         })().catch((e: unknown) => {
             postPopUp({
@@ -255,7 +260,12 @@ const useViewStore = create<ViewState>((set, get) => ({
         }
 
         (async () => {
-            const pageData = await logFileManagerProxy.loadPage(cursor, get().isPrettified, newLogTimezone);
+            const pageData = await logFileManagerProxy.loadPage(
+                cursor,
+                get().isPrettified,
+                newLogTimezone,
+            );
+
             updatePageData(pageData);
         })().catch((e: unknown) => {
             postPopUp({

From 16e463933ecb831a6ecb9ab481f34010694f269c Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Tue, 13 May 2025 21:36:14 +0800
Subject: [PATCH 09/10] Disable prettify and timezone button when fast loading
 to fix #249)

---
 src/typings/states.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/typings/states.ts b/src/typings/states.ts
index 201a9cfcf..a85ba7b64 100644
--- a/src/typings/states.ts
+++ b/src/typings/states.ts
@@ -87,10 +87,10 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
         [UI_ELEMENT.NAVIGATION_BAR]: true,
         [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.PRETTIFY_BUTTON]: true,
+        [UI_ELEMENT.PRETTIFY_BUTTON]: false,
         [UI_ELEMENT.PROGRESS_BAR]: true,
         [UI_ELEMENT.QUERY_INPUT_BOX]: false,
-        [UI_ELEMENT.TIMEZONE_SETTER]: true,
+        [UI_ELEMENT.TIMEZONE_SETTER]: false,
     },
     [UI_STATE.READY]: {
         [UI_ELEMENT.DRAG_AND_DROP]: true,

From e703ddb5d2ed9b193f4848de2ff472299162bed5 Mon Sep 17 00:00:00 2001
From: zzxthehappiest <zzxthehappiest@gmail.com>
Date: Mon, 9 Jun 2025 21:09:05 -0400
Subject: [PATCH 10/10] Fix

---
 src/components/AppController.tsx              |  4 +-
 .../StatusBar/TimezoneSelect/index.tsx        | 36 ++++++-------
 src/services/LogFileManagerProxy.ts           |  4 +-
 src/services/decoders/ClpIrDecoder/index.ts   | 52 ++++++-------------
 src/stores/logFileStore.ts                    |  2 +-
 src/stores/viewStore.ts                       | 18 +++++--
 src/utils/url.ts                              |  3 ++
 7 files changed, 52 insertions(+), 67 deletions(-)

diff --git a/src/components/AppController.tsx b/src/components/AppController.tsx
index 5ab15563d..db5b29d94 100644
--- a/src/components/AppController.tsx
+++ b/src/components/AppController.tsx
@@ -208,9 +208,9 @@ const AppController = ({children}: AppControllerProps) => {
                 code: CURSOR_CODE.EVENT_NUM,
                 args: {eventNum: clampedLogEventNum},
             };
-            const {isPrettified} = useViewStore.getState();
+            const {isPrettified, logTimezone} = useViewStore.getState();
 
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified);
+            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified, logTimezone);
             const {updatePageData} = useViewStore.getState();
             updatePageData(pageData);
         })().catch(handleErrorWithNotification);
diff --git a/src/components/StatusBar/TimezoneSelect/index.tsx b/src/components/StatusBar/TimezoneSelect/index.tsx
index 6457a2ea2..f91144eb3 100644
--- a/src/components/StatusBar/TimezoneSelect/index.tsx
+++ b/src/components/StatusBar/TimezoneSelect/index.tsx
@@ -1,8 +1,6 @@
 import React, {
     useCallback,
-    useContext,
     useEffect,
-    useRef,
     useState,
 } from "react";
 
@@ -19,14 +17,12 @@ import {
 
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 
-import {
-    updateWindowUrlHashParams,
-    UrlContext,
-} from "../../../contexts/UrlContextProvider";
 import useUiStore from "../../../stores/uiStore";
+import useViewStore from "../../../stores/viewStore.ts";
 import {UI_ELEMENT} from "../../../typings/states";
 import {HASH_PARAM_NAMES} from "../../../typings/url";
 import {isDisabled} from "../../../utils/states";
+import {updateWindowUrlHashParams} from "../../../utils/url";
 
 import "./index.css";
 
@@ -128,13 +124,13 @@ const renderTimezoneOption = (
  */
 const TimezoneSelect = () => {
     const uiState = useUiStore((state) => state.uiState);
-    const {logTimezone} = useContext(UrlContext);
+
+    const {logTimezone} = useViewStore.getState();
+    const updateLogTimezone = useViewStore((state) => state.updateLogTimezone);
 
     const [browserTimezone, setBrowserTimezone] = useState<string | null>(null);
     const [selectedTimezone, setSelectedTimezone] = useState<string | null>(null);
 
-    const logTimezoneRef = useRef<string | null>(logTimezone);
-
     const disabled = isDisabled(uiState, UI_ELEMENT.TIMEZONE_SETTER);
 
     useEffect(() => {
@@ -143,24 +139,22 @@ const TimezoneSelect = () => {
     }, []);
 
     useEffect(() => {
-        logTimezoneRef.current = logTimezone;
-        if (!disabled) {
-            setSelectedTimezone(logTimezone ?? LOGGER_TIMEZONE);
-        }
-    }, [disabled,
-        logTimezone]);
-
-    useEffect(() => {
-        if (selectedTimezone !== logTimezoneRef.current) {
+        if (!disabled && selectedTimezone !== logTimezone) {
             const updatedTimezone = (LOGGER_TIMEZONE === selectedTimezone) ?
-                null :
-                selectedTimezone;
+                "" :
+                (selectedTimezone ?? "");
 
             updateWindowUrlHashParams({
                 [HASH_PARAM_NAMES.LOG_TIMEZONE]: updatedTimezone,
             });
+            updateLogTimezone(updatedTimezone);
         }
-    }, [selectedTimezone]);
+    }, [
+        disabled,
+        logTimezone,
+        selectedTimezone,
+        updateLogTimezone,
+    ]);
 
     const handleOptionClick = useCallback((ev: React.MouseEvent) => {
         const currentTarget = ev.currentTarget as HTMLElement;
diff --git a/src/services/LogFileManagerProxy.ts b/src/services/LogFileManagerProxy.ts
index 08f7004af..bb1e85f5f 100644
--- a/src/services/LogFileManagerProxy.ts
+++ b/src/services/LogFileManagerProxy.ts
@@ -44,7 +44,7 @@ class LogFileManagerProxy {
     loadPage (
         cursor: CursorType,
         isPrettified: boolean,
-        logTimezone: string | null
+        logTimezone: string
     ): PageData {
         const logFileManager = this.#getLogFileManager();
         return logFileManager.loadPage(cursor, isPrettified, logTimezone);
@@ -54,7 +54,7 @@ class LogFileManagerProxy {
         cursor: CursorType,
         isPrettified: boolean,
         logLevelFilter: LogLevelFilter,
-        logTimezone: string | null
+        logTimezone: string
     ): PageData {
         const logFileManager = this.#getLogFileManager();
         logFileManager.setLogLevelFilter(logLevelFilter);
diff --git a/src/services/decoders/ClpIrDecoder/index.ts b/src/services/decoders/ClpIrDecoder/index.ts
index 56ff6d421..2ffa7d70e 100644
--- a/src/services/decoders/ClpIrDecoder/index.ts
+++ b/src/services/decoders/ClpIrDecoder/index.ts
@@ -82,35 +82,6 @@ class ClpIrDecoder implements Decoder {
         return new ClpIrDecoder(module, dataArray, decoderOptions);
     }
 
-    /**
-     * Formats unstructured log events by prepending a formatted timestamp to each message.
-     *
-     * @param logEvents
-     * @param logTimezone
-     * @return The formatted log events.
-     */
-    static #formatUnstructuredResults = (
-        logEvents: DecodeResult[],
-        logTimezone: string | null
-    ): DecodeResult[] => {
-        for (const r of logEvents) {
-            const [
-                message, timestamp,
-            ] = r;
-
-            const dayJsTimestamp: Dayjs = convertToDayjsTimestamp(timestamp);
-            if (null !== logTimezone) {
-                r[0] = dayJsTimestamp.tz(logTimezone).format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
-            } else {
-                // eslint-disable-next-line no-warning-comments
-                // TODO: Replace with the original log timezone
-                r[0] = dayJsTimestamp.format("YYYY-MM-DDTHH:mm:ss.SSSZ") + message;
-            }
-        }
-
-        return logEvents;
-    };
-
     getEstimatedNumEvents (): number {
         return this.#streamReader.getNumEventsBuffered();
     }
@@ -155,7 +126,7 @@ class ClpIrDecoder implements Decoder {
         beginIdx: number,
         endIdx: number,
         useFilter: boolean,
-        timezone: string | null
+        timezone: string
     ): Nullable<DecodeResult[]> {
         // eslint-disable-next-line no-warning-comments
         // TODO: Correct DecodeResult typing in `clp-ffi-js` and remove below type assertion.
@@ -210,19 +181,28 @@ class ClpIrDecoder implements Decoder {
      * Formats unstructured log events by prepending a formatted timestamp to each message.
      *
      * @param logEvents
+     * @param logTimezone
      * @return The formatted log events.
      */
-    #formatUnstructuredResults (logEvents: DecodeResult[]): Nullable<DecodeResult[]> {
+    #formatUnstructuredResults (
+        logEvents: DecodeResult[],
+        logTimezone: string
+    ): Nullable<DecodeResult[]> {
         for (const r of logEvents) {
             const [
                 message, timestamp,
             ] = r;
 
-            const formattedTimestamp = convertToDayjsTimestamp(timestamp).format(
-                this.#timestampFormatString
-            );
-
-            r[0] = formattedTimestamp + message;
+            const formattedTimestamp: Dayjs = convertToDayjsTimestamp(timestamp);
+            if ("" !== logTimezone) {
+                r[0] =
+                    formattedTimestamp.tz(logTimezone).format(this.#timestampFormatString) +
+                    message;
+            } else {
+                // eslint-disable-next-line no-warning-comments
+                // TODO: Replace with the original log timezone
+                r[0] = formattedTimestamp.format(this.#timestampFormatString) + message;
+            }
         }
 
         return logEvents;
diff --git a/src/stores/logFileStore.ts b/src/stores/logFileStore.ts
index f272d436c..17743a74e 100644
--- a/src/stores/logFileStore.ts
+++ b/src/stores/logFileStore.ts
@@ -133,7 +133,7 @@ const useLogFileStore = create<LogFileState>((set, get) => ({
 
             set(fileInfo);
 
-            const {isPrettified, updatePageData} = useViewStore.getState();
+            const {isPrettified, logTimezone, updatePageData} = useViewStore.getState();
             const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified, logTimezone);
             updatePageData(pageData);
 
diff --git a/src/stores/viewStore.ts b/src/stores/viewStore.ts
index 682507bd6..5b7e38946 100644
--- a/src/stores/viewStore.ts
+++ b/src/stores/viewStore.ts
@@ -43,7 +43,7 @@ interface ViewStoreActions {
 
     loadPageByAction: (navAction: NavigationAction) => void;
     updateIsPrettified: (newIsPrettified: boolean) => void;
-    updateLogTimezone: (newLogTimezone: string | null) => void;
+    updateLogTimezone: (newLogTimezone: string) => void;
     updatePageData: (pageData: PageData) => void;
 }
 
@@ -174,7 +174,7 @@ const useViewStore = create<ViewState>((set, get) => ({
         (async () => {
             const {logFileManagerProxy} = useLogFileManagerStore.getState();
             const {isPrettified, logTimezone} = get();
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified. logTimezone);
+            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified, logTimezone);
 
             const {updatePageData} = get();
             updatePageData(pageData);
@@ -218,13 +218,17 @@ const useViewStore = create<ViewState>((set, get) => ({
         (async () => {
             const {logFileManagerProxy} = useLogFileManagerStore.getState();
             const {logTimezone} = get();
-            const pageData = await logFileManagerProxy.loadPage(cursor, newIsPrettified, logTimezone);
+            const pageData = await logFileManagerProxy.loadPage(
+                cursor,
+                newIsPrettified,
+                logTimezone
+            );
 
             const {updatePageData} = get();
             updatePageData(pageData);
         })().catch(handleErrorWithNotification);
     },
-    updateLogTimezone: (newLogTimezone: boolean) => {
+    updateLogTimezone: (newLogTimezone: string) => {
         const {logTimezone} = get();
         if (newLogTimezone === logTimezone) {
             return;
@@ -247,7 +251,11 @@ const useViewStore = create<ViewState>((set, get) => ({
         (async () => {
             const {logFileManagerProxy} = useLogFileManagerStore.getState();
             const {isPrettified} = get();
-            const pageData = await logFileManagerProxy.loadPage(cursor, isPrettified, newLogTimezone);
+            const pageData = await logFileManagerProxy.loadPage(
+                cursor,
+                isPrettified,
+                newLogTimezone
+            );
 
             const {updatePageData} = get();
             updatePageData(pageData);
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 5ae3ea68d..177221835 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -22,6 +22,7 @@ const URL_SEARCH_PARAMS_DEFAULT = Object.freeze({
 const URL_HASH_PARAMS_DEFAULT = Object.freeze({
     [HASH_PARAM_NAMES.IS_PRETTIFIED]: false,
     [HASH_PARAM_NAMES.LOG_EVENT_NUM]: 0,
+    [HASH_PARAM_NAMES.LOG_TIMEZONE]: "",
     [HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE]: false,
     [HASH_PARAM_NAMES.QUERY_IS_REGEX]: false,
     [HASH_PARAM_NAMES.QUERY_STRING]: "",
@@ -180,6 +181,8 @@ const parseWindowUrlHashParams = () : Partial<UrlHashParams> => {
             parsedHashParams[HASH_PARAM_NAMES.LOG_EVENT_NUM] = Number.isNaN(parsed) ?
                 0 :
                 parsed;
+        } else if (HASH_PARAM_NAMES.LOG_TIMEZONE === key) {
+            parsedHashParams[HASH_PARAM_NAMES.LOG_TIMEZONE] = value;
         } else if (HASH_PARAM_NAMES.QUERY_STRING === key) {
             parsedHashParams[HASH_PARAM_NAMES.QUERY_STRING] = value;
         } else if (HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE === key) {