feat: Make timezone setting functional — apply IANA timezone across all date/time displays

AmirMohammad Cheraghali · AmirMohammad Cheraghali · commit b0a75738bbbc · 2026-03-22T11:39:32.000+01:00
diff --git a/src/components/FavoritesPanel.tsx b/src/components/FavoritesPanel.tsx
@@ -4,6 +4,7 @@ import type { Favorite } from '../hooks/useFavorites';
 import type { HistoryItem } from '../hooks/useHistory';
 
 import { type DataSource } from '../utils/pdbUtils';
+import { useTimezone, formatDate } from '../lib/timezoneUtils';
 
 interface FavoritesPanelProps {
     favorites: Favorite[];
@@ -31,6 +32,7 @@ export const FavoritesPanel: React.FC<FavoritesPanelProps> = ({
     showTabs = true,
 }) => {
     const [activeTab, setActiveTab] = useState<'favorites' | 'history'>(initialTab);
+    const timezone = useTimezone();
 
     // Sync active tab with prop (for external switching)
     React.useEffect(() => {
@@ -137,7 +139,7 @@ export const FavoritesPanel: React.FC<FavoritesPanelProps> = ({
                                                 <div className={`text-sm ${subtleText}`}>
                                                     {fav.dataSource === 'pdb' ? 'PDB' : fav.dataSource === 'alphafold' ? 'AlphaFold' : 'PubChem'}: {fav.id}
                                                     {' • '}
-                                                    {new Date(fav.addedAt).toLocaleDateString()}
+                                                    {formatDate(new Date(fav.addedAt), timezone)}
                                                 </div>
                                             </div>
                                         </button>
@@ -183,7 +185,7 @@ export const FavoritesPanel: React.FC<FavoritesPanelProps> = ({
                                                     <span className={`px-1.5 rounded ${isLightMode ? 'bg-neutral-200' : 'bg-neutral-800'}`}>
                                                         {item.dataSource === 'pdb' ? 'PDB' : item.dataSource === 'alphafold' ? 'AF DB' : 'CHEM'}
                                                     </span>
-                                                    {new Date(item.timestamp).toLocaleTimeString()}
+                                                    {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                                 </div>
                                             </div>
                                         </button>
diff --git a/src/components/GalleryModal.tsx b/src/components/GalleryModal.tsx
@@ -14,6 +14,7 @@ import {
 } from 'lucide-react';
 import clsx from 'clsx';
 import type { Snapshot, Movie } from '../types';
+import { useTimezone, formatDate, formatDateTime } from '../lib/timezoneUtils';
 
 interface GalleryModalProps {
     isOpen: boolean;
@@ -40,6 +41,7 @@ export const GalleryModal: React.FC<GalleryModalProps> = ({
     onDownloadMovie,
     isLightMode
 }) => {
+    const timezone = useTimezone();
     const [activeTab, setActiveTab] = useState<'all' | 'snapshots' | 'movies'>('all');
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
@@ -183,7 +185,7 @@ export const GalleryModal: React.FC<GalleryModalProps> = ({
                                         {/* Overlay Info */}
                                         <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/80 via-black/40 to-transparent text-white opacity-0 group-hover:opacity-100 transition-opacity">
                                             <p className="text-xs font-bold truncate">{item.pdbId || 'Structure'}</p>
-                                            <p className="text-[10px] opacity-80">{new Date(item.timestamp).toLocaleDateString()}</p>
+                                            <p className="text-[10px] opacity-80">{formatDate(new Date(item.timestamp), timezone)}</p>
                                         </div>
                                     </div>
                                 ))}
@@ -249,7 +251,7 @@ export const GalleryModal: React.FC<GalleryModalProps> = ({
                                         <div className="flex items-center gap-3">
                                             <Calendar className="w-4 h-4 text-purple-500" />
                                             <p className={clsx("text-xs", isLightMode ? "text-neutral-700" : "text-neutral-300")}>
-                                                {new Date(selectedItem.timestamp).toLocaleString()}
+                                                {formatDateTime(new Date(selectedItem.timestamp), timezone)}
                                             </p>
                                         </div>
                                         {selectedItem.type === 'snapshot' && (
diff --git a/src/components/dashboard/ActivityTimeline.tsx b/src/components/dashboard/ActivityTimeline.tsx
@@ -5,6 +5,7 @@ import {
 } from 'lucide-react';
 import { useAuth } from '../../lib/AuthContext';
 import { getActivityLog, type ActivityLog, type ActivityAction } from '../../lib/structuresService';
+import { useTimezone, formatTime } from '../../lib/timezoneUtils';
 
 // ─── Helpers ──────────────────────────────────────────────────────
 
@@ -27,19 +28,22 @@ const ACTION_CONFIG: Record<ActivityAction, { label: string; icon: React.Element
     duplicate: { label: 'Duplicated', icon: Copy, color: 'text-pink-400', bg: 'bg-pink-500/10 border-pink-500/20' },
 };
 
-// Group consecutive logs by date
-function groupByDate(logs: ActivityLog[]) {
+// Group consecutive logs by date (timezone-aware)
+function groupByDate(logs: ActivityLog[], timezone: string) {
     const groups: { date: string; items: ActivityLog[] }[] = [];
+
+    const todayLabel = new Date().toLocaleDateString(undefined, { timeZone: timezone, year: 'numeric', month: '2-digit', day: '2-digit' });
+    const yesterdayDate = new Date(Date.now() - 86400000);
+    const yesterdayLabel = yesterdayDate.toLocaleDateString(undefined, { timeZone: timezone, year: 'numeric', month: '2-digit', day: '2-digit' });
+
     for (const log of logs) {
         const d = new Date(log.created_at);
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(today.getDate() - 1);
+        const dLabel = d.toLocaleDateString(undefined, { timeZone: timezone, year: 'numeric', month: '2-digit', day: '2-digit' });
 
         let label: string;
-        if (d.toDateString() === today.toDateString()) label = 'Today';
-        else if (d.toDateString() === yesterday.toDateString()) label = 'Yesterday';
-        else label = d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+        if (dLabel === todayLabel) label = 'Today';
+        else if (dLabel === yesterdayLabel) label = 'Yesterday';
+        else label = d.toLocaleDateString(undefined, { timeZone: timezone, weekday: 'short', month: 'short', day: 'numeric' });
 
         const last = groups[groups.length - 1];
         if (last && last.date === label) last.items.push(log);
@@ -84,6 +88,7 @@ function StatsBar({ logs }: { logs: ActivityLog[] }) {
 
 export const ActivityTimeline = () => {
     const { user } = useAuth();
+    const timezone = useTimezone();
     const [logs, setLogs] = useState<ActivityLog[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -105,7 +110,7 @@ export const ActivityTimeline = () => {
     useEffect(() => { load(); }, [load]);
 
     const visible = filter === 'all' ? logs : logs.filter(l => l.action === filter);
-    const grouped = groupByDate(visible);
+    const grouped = groupByDate(visible, timezone);
 
     const FILTERS: { key: ActivityAction | 'all'; label: string }[] = [
         { key: 'all', label: 'All' },
@@ -212,7 +217,10 @@ export const ActivityTimeline = () => {
                                     </div>
 
                                     {/* Time */}
-                                    <span className="text-xs text-[var(--text-muted)] group-hover:text-[var(--text-muted)] transition-colors whitespace-nowrap shrink-0">
+                                    <span
+                                        className="text-xs text-[var(--text-muted)] group-hover:text-[var(--text-muted)] transition-colors whitespace-nowrap shrink-0"
+                                        title={formatTime(log.created_at, timezone)}
+                                    >
                                         {timeAgo(log.created_at)}
                                     </span>
                                 </div>
diff --git a/src/components/dashboard/DashboardHome.tsx b/src/components/dashboard/DashboardHome.tsx
@@ -7,6 +7,7 @@ import {
 } from 'lucide-react';
 import { useAuth } from '../../lib/AuthContext';
 import { listStructures, getActivityLog, type Structure, type ActivityLog, type ActivityAction } from '../../lib/structuresService';
+import { useTimezone, formatTime } from '../../lib/timezoneUtils';
 
 // ─── Helpers ──────────────────────────────────────────────────────
 
@@ -164,7 +165,7 @@ function TopStructures({ structures }: { structures: Structure[] }) {
 
 // ─── Recent Activity Feed ─────────────────────────────────────────
 
-function RecentFeed({ logs }: { logs: ActivityLog[] }) {
+function RecentFeed({ logs, timezone }: { logs: ActivityLog[], timezone: string }) {
     const recent = logs.slice(0, 7);
     if (recent.length === 0) return null;
 
@@ -191,7 +192,10 @@ function RecentFeed({ logs }: { logs: ActivityLog[] }) {
                                     <span className="text-xs text-neutral-300 font-medium truncate">{log.structure_name}</span>
                                 )}
                             </div>
-                            <span className="text-xs text-neutral-700 shrink-0">{timeAgo(log.created_at)}</span>
+                            <span
+                                className="text-xs text-neutral-700 shrink-0"
+                                title={formatTime(log.created_at, timezone)}
+                            >{timeAgo(log.created_at)}</span>
                         </div>
                     );
                 })}
@@ -231,6 +235,7 @@ function StarredRow({ structures }: { structures: Structure[] }) {
 
 export const DashboardHome = () => {
     const { user } = useAuth();
+    const timezone = useTimezone();
     const [structures, setStructures] = useState<Structure[]>([]);
     const [logs, setLogs] = useState<ActivityLog[]>([]);
     const [loading, setLoading] = useState(true);
@@ -254,9 +259,10 @@ export const DashboardHome = () => {
     }).length;
 
     const greeting = () => {
-        const h = new Date().getHours();
-        if (h < 12) return 'Good morning';
-        if (h < 18) return 'Good afternoon';
+        const h = new Date().toLocaleString('en-US', { timeZone: timezone, hour: 'numeric', hour12: false });
+        const hour = parseInt(h, 10);
+        if (hour < 12) return 'Good morning';
+        if (hour < 18) return 'Good afternoon';
         return 'Good evening';
     };
 
@@ -327,7 +333,7 @@ export const DashboardHome = () => {
                 <div className="lg:col-span-2 space-y-4">
                     <StarredRow structures={structures} />
                     <TopStructures structures={structures} />
-                    <RecentFeed logs={logs} />
+                    <RecentFeed logs={logs} timezone={timezone} />
 
                     {/* Empty state */}
                     {structures.length === 0 && (
diff --git a/src/components/dashboard/MyStructures.tsx b/src/components/dashboard/MyStructures.tsx
@@ -9,6 +9,7 @@ import {
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../lib/AuthContext';
 import { useTranslation } from '../../lib/i18n';
+import { timeAgo } from '../../lib/timezoneUtils';
 import {
     listStructures, uploadStructure, toggleStar, deleteStructure,
     renameStructure, updateNotes, updateTags, importFromRCSB,
@@ -56,15 +57,6 @@ function formatBytes(bytes: number | null): string {
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function timeAgo(iso: string): string {
-    const d = Date.now() - new Date(iso).getTime(), m = Math.floor(d / 60000);
-    if (m < 1) return 'just now';
-    if (m < 60) return `${m}m ago`;
-    const h = Math.floor(m / 60);
-    if (h < 24) return `${h}h ago`;
-    const dy = Math.floor(h / 24);
-    return dy < 7 ? `${dy}d ago` : new Date(iso).toLocaleDateString();
-}
 
 // ── Tag system ────────────────────────────────────────────────────
 
diff --git a/src/lib/timezoneUtils.ts b/src/lib/timezoneUtils.ts
@@ -0,0 +1,102 @@
+import { useAuth } from './AuthContext';
+
+/** Maps the human-readable timezone labels used in AccountSettings → IANA identifiers */
+export const TIMEZONE_MAP: Record<string, string> = {
+    'Pacific Time (PT)': 'America/Los_Angeles',
+    'Mountain Time (MT)': 'America/Denver',
+    'Central Time (CT)': 'America/Chicago',
+    'Eastern Time (ET)': 'America/New_York',
+    'Central European Time (CET)': 'Europe/Paris',
+    'Greenwich Mean Time (GMT)': 'Europe/London',
+    'Coordinated Universal Time (UTC)': 'UTC',
+    'Japan Standard Time (JST)': 'Asia/Tokyo',
+    'China Standard Time (CST)': 'Asia/Shanghai',
+    'India Standard Time (IST)': 'Asia/Kolkata',
+    'Australian Eastern Time (AET)': 'Australia/Sydney',
+};
+
+/** Resolves a stored timezone preference string to an IANA id */
+export function resolveTimezone(preference: string | undefined): string {
+    if (!preference) return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return TIMEZONE_MAP[preference] ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+
+/** Hook that returns the currently authenticated user's IANA timezone */
+export function useTimezone(): string {
+    const { user } = useAuth();
+    return resolveTimezone(user?.user_metadata?.timezone);
+}
+
+/**
+ * Format an ISO date string (or Date) as a short date: e.g. "Mar 22, 2026"
+ */
+export function formatDate(
+    iso: string | Date,
+    timezone: string,
+    options?: Intl.DateTimeFormatOptions
+): string {
+    const date = typeof iso === 'string' ? new Date(iso) : iso;
+    if (isNaN(date.getTime())) return '—';
+    return date.toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        timeZone: timezone,
+        ...options,
+    });
+}
+
+/**
+ * Format an ISO date string (or Date) as a time: e.g. "2:34 PM"
+ */
+export function formatTime(
+    iso: string | Date,
+    timezone: string,
+    options?: Intl.DateTimeFormatOptions
+): string {
+    const date = typeof iso === 'string' ? new Date(iso) : iso;
+    if (isNaN(date.getTime())) return '—';
+    return date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: timezone,
+        ...options,
+    });
+}
+
+/**
+ * Format an ISO date string (or Date) as a full datetime: e.g. "Mar 22, 2026, 2:34 PM"
+ */
+export function formatDateTime(
+    iso: string | Date,
+    timezone: string,
+    options?: Intl.DateTimeFormatOptions
+): string {
+    const date = typeof iso === 'string' ? new Date(iso) : iso;
+    if (isNaN(date.getTime())) return '—';
+    return date.toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: timezone,
+        ...options,
+    });
+}
+
+/**
+ * Relative time string ("just now", "5m ago", "2h ago", "3d ago")
+ * identical to the existing logic in several components — centralised here.
+ */
+export function timeAgo(iso: string | Date): string {
+    const date = typeof iso === 'string' ? new Date(iso) : iso;
+    const m = Math.floor((Date.now() - date.getTime()) / 60000);
+    if (m < 1)  return 'just now';
+    if (m < 60) return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h}h ago`;
+    const d = Math.floor(h / 24);
+    if (d < 7)  return `${d}d ago`;
+    return formatDate(date, Intl.DateTimeFormat().resolvedOptions().timeZone);
+}
