From 9a4dc2e71b300afc9089df7e9034032e885ab2cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Wed, 4 Mar 2026 17:29:24 +0100 Subject: [PATCH] fix: make Timestamp component locale-aware via formatTimestamp Timestamp was hardcoded to "es" locale. Now uses formatTimestamp() from useLocale.ts for consistent locale-aware time formatting. Added Timestamp to CLAUDE.md shared components documentation. Co-Authored-By: Claude Opus 4.6 --- CLAUDE.md | 1 + src/components/Timestamp.tsx | 10 ++-------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index bffbed0..0713d37 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -346,6 +346,7 @@ This allows `applyTheme()` to switch themes at runtime. - **`Label`** (`src/components/ui/label.tsx`): Dotted-border tag/badge for metadata labels (language, kind, status, metric type). Two sizes: `sm` (default) and `md`. Use instead of ad-hoc `` tags for tag-like indicators. - **`RichText`** (`src/components/nostr/RichText.tsx`): Universal Nostr content renderer. Parses mentions, hashtags, custom emoji, media embeds, and nostr: references. Use for any event body text — never render `event.content` as a raw string. - **`CustomEmoji`** (`src/components/nostr/CustomEmoji.tsx`): Renders NIP-30 custom emoji images inline. Shows shortcode tooltip, handles load errors gracefully. + - **`Timestamp`** (`src/components/Timestamp.tsx`): Locale-aware short time display (e.g., "2:30 PM" or "14:30"). Takes a Unix timestamp in seconds. Use for inline time rendering in chat messages, lists, and log entries. For other formats (relative, date, datetime), use `formatTimestamp()` from `src/hooks/useLocale.ts`. ## Important Patterns diff --git a/src/components/Timestamp.tsx b/src/components/Timestamp.tsx index f2461bd..0c99206 100644 --- a/src/components/Timestamp.tsx +++ b/src/components/Timestamp.tsx @@ -1,11 +1,5 @@ -import { useMemo } from "react"; +import { formatTimestamp } from "@/hooks/useLocale"; export default function Timestamp({ timestamp }: { timestamp: number }) { - const formatted = useMemo(() => { - const intl = new Intl.DateTimeFormat("es", { - timeStyle: "short", - }); - return intl.format(timestamp * 1000); - }, [timestamp]); - return formatted; + return formatTimestamp(timestamp, "time"); }