From 9cf7a8efea3b48786d5402f24aa61ffbacc04e66 Mon Sep 17 00:00:00 2001
From: Yeonguk <choo121600@gmail.com>
Date: Sun, 29 Jun 2025 00:12:20 +0900
Subject: [PATCH 1/2] feat: Add real-time clock updates to timezone selector

---
 .../ui/src/layouts/Nav/TimezoneSelector.tsx      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
index 8be9fd9a650b7..7a458f668c3a2 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
@@ -21,7 +21,7 @@ import { Select, type SingleValue } from "chakra-react-select";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useTimezone } from "src/context/timezone";
@@ -33,6 +33,8 @@ dayjs.extend(timezone);
 const TimezoneSelector: React.FC = () => {
   const { selectedTimezone, setSelectedTimezone } = useTimezone();
   const { t: translate } = useTranslation("common");
+  const [currentTime, setCurrentTime] = useState<string>("");
+
   const timezones = useMemo<Array<string>>(() => {
     const tzList = Intl.supportedValuesOf("timeZone");
     const guessedTz = dayjs.tz.guess();
@@ -56,7 +58,17 @@ const TimezoneSelector: React.FC = () => {
     }
   };
 
-  const currentTime = dayjs().tz(selectedTimezone).format("YYYY-MM-DD HH:mm:ss");
+  useEffect(() => {
+    const updateTime = () => {
+      setCurrentTime(dayjs().tz(selectedTimezone).format("YYYY-MM-DD HH:mm:ss"));
+    };
+
+    updateTime();
+
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [selectedTimezone]);
 
   return (
     <VStack align="stretch" gap={6}>

From a3eb1902cd840c71e2a20f5a1ef453bd490479d8 Mon Sep 17 00:00:00 2001
From: Yeonguk <choo121600@gmail.com>
Date: Sun, 29 Jun 2025 01:22:11 +0900
Subject: [PATCH 2/2] Add real-time clock update to user setting button Nav

---
 .../ui/src/layouts/Nav/UserSettingsButton.tsx    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
index 4eca5ea77d8c5..3b9321525ad58 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
@@ -20,7 +20,7 @@ import { useDisclosure } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FiClock, FiGrid, FiLogOut, FiMoon, FiSun, FiUser, FiGlobe } from "react-icons/fi";
 import { MdOutlineAccountTree } from "react-icons/md";
@@ -49,8 +49,20 @@ export const UserSettingsButton = () => {
 
   const [time, setTime] = useState(dayjs());
 
+  useEffect(() => {
+    const updateTime = () => {
+      setTime(dayjs());
+    };
+
+    updateTime();
+
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [selectedTimezone]);
+
   return (
-    <Menu.Root onOpenChange={() => setTime(dayjs())} positioning={{ placement: "right" }}>
+    <Menu.Root positioning={{ placement: "right" }}>
       <Menu.Trigger asChild>
         <NavButton icon={<FiUser size="1.75rem" />} title={translate("user")} />
       </Menu.Trigger>