show timezone city in today's date header

Author: ComputelessComputer

src/components/layout/AppLayout.tsx

@@ -13,6 +13,7 @@ import "../editor/Editor.css";
 import { listen, } from "@tauri-apps/api/event";
 import { watch, } from "@tauri-apps/plugin-fs";
 import { useCurrentDate, } from "../../hooks/useCurrentDate";
+import { useTimezoneCity, } from "../../hooks/useTimezoneCity";
 import { resolveAssetUrl, saveImage, } from "../../services/images";
 import type { LibraryItem, } from "../../services/library";
 import { getJournalDir, getNotePath, initJournalScope, } from "../../services/paths";
@@ -40,6 +41,7 @@ function insertImageViaView(file: File, view: EditorView,) {
 
 function DateHeader({ date, }: { date: string; },) {
   const showToday = isToday(date,);
+  const city = useTimezoneCity();
 
   return (
     <div className="flex items-center gap-4">
@@ -57,6 +59,11 @@ function DateHeader({ date, }: { date: string; },) {
           today
         </span>
       )}
+      {showToday && city && (
+        <span className="text-sm text-gray-400 dark:text-gray-500 font-sans">
+          {city}
+        </span>
+      )}
     </div>
   );
 }

src/hooks/useTimezoneCity.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from "react";
+
+function getCity(): string {
+  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return tz.split("/",).pop()?.replace(/_/g, " ",) ?? "";
+}
+
+/**
+ * Returns the city derived from the system timezone (e.g. "Seoul", "Lisbon"),
+ * reactively updated when:
+ * - The window regains focus (user switches back to app after traveling)
+ * - The document becomes visible (computer wakes from sleep in a new timezone)
+ */
+export function useTimezoneCity(): string {
+  const [city, setCity,] = useState(getCity,);
+
+  useEffect(() => {
+    function check() {
+      setCity((prev,) => {
+        const next = getCity();
+        return prev !== next ? next : prev;
+      },);
+    }
+
+    function onVisibilityChange() {
+      if (document.visibilityState === "visible") check();
+    }
+
+    document.addEventListener("visibilitychange", onVisibilityChange,);
+    window.addEventListener("focus", check,);
+
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange,);
+      window.removeEventListener("focus", check,);
+    };
+  }, [],);
+
+  return city;
+}