Merge pull request #357 from Ibk-Bless/frontend-datetime-aria-notfound-imageopt

feat: enhance date/time utilities, ARIA labels, 404 page, and icon op…

Author: floxxih

frontend/src/app/not-found.tsx

@@ -13,40 +13,40 @@ export default function NotFound() {
   return (
     <main
       id="main-content"
-      className="container mx-auto flex min-h-[70vh] flex-col items-center justify-center px-4 text-center"
+      className="container mx-auto flex min-h-[70vh] flex-col items-center justify-center px-4 py-8 text-center"
       aria-labelledby="notfound-heading"
     >
       <div
-        className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-surface-overlay border border-border text-text-muted"
+        className="mb-6 flex h-16 w-16 sm:h-20 sm:w-20 items-center justify-center rounded-full bg-surface-overlay border border-border text-text-muted"
         aria-hidden="true"
       >
-        <Compass className="h-10 w-10" />
+        <Compass className="h-8 w-8 sm:h-10 sm:w-10" />
       </div>
 
       <h1
         id="notfound-heading"
-        className="text-4xl font-extrabold tracking-tight text-text-primary"
+        className="text-3xl sm:text-4xl font-extrabold tracking-tight text-text-primary"
       >
         404 — Destination Unknown
       </h1>
 
-      <p className="mt-4 max-w-md text-text-secondary">
+      <p className="mt-4 max-w-md text-sm sm:text-base text-text-secondary px-4">
         The page you are looking for has either sailed past the timelock or never existed in this
         chain.
       </p>
 
       <nav
-        className="mt-10 flex flex-wrap items-center justify-center gap-3"
+        className="mt-8 sm:mt-10 flex flex-col sm:flex-row flex-wrap items-center justify-center gap-3 w-full max-w-md px-4"
         aria-label="Recovery navigation"
       >
-        <Link href="/">
-          <Button size="lg" className="rounded-xl px-8">
+        <Link href="/" className="w-full sm:w-auto">
+          <Button size="lg" className="rounded-xl px-6 sm:px-8 w-full sm:w-auto">
             <Home className="mr-2 h-5 w-5" aria-hidden="true" />
             Return to Bridge
           </Button>
         </Link>
-        <Link href="/swap">
-          <Button variant="outline" size="lg" className="rounded-xl px-8">
+        <Link href="/swap" className="w-full sm:w-auto">
+          <Button variant="outline" size="lg" className="rounded-xl px-6 sm:px-8 w-full sm:w-auto">
             Go to Swap
             <ArrowRight className="ml-2 h-5 w-5" aria-hidden="true" />
           </Button>

frontend/src/lib/utils.ts

@@ -25,6 +25,12 @@ export function formatAmount(amount: string | number, decimals = 7): string {
 /** Format a date to a relative time string */
 export function formatRelativeTime(date: string | Date): string {
   const d = typeof date === "string" ? new Date(date) : date;
+  
+  // Handle invalid dates
+  if (isNaN(d.getTime())) {
+    return "Invalid date";
+  }
+  
   const diff = Date.now() - d.getTime();
   const seconds = Math.floor(diff / 1000);
   const minutes = Math.floor(seconds / 60);
@@ -37,6 +43,62 @@ export function formatRelativeTime(date: string | Date): string {
   return "just now";
 }
 
+/** Format a date to absolute UTC timestamp */
+export function formatAbsoluteUTC(date: string | Date): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  
+  // Handle invalid dates
+  if (isNaN(d.getTime())) {
+    return "Invalid date";
+  }
+  
+  return d.toISOString().replace("T", " ").substring(0, 19) + " UTC";
+}
+
+/** Format a date to absolute local timestamp */
+export function formatAbsoluteLocal(date: string | Date): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  
+  // Handle invalid dates
+  if (isNaN(d.getTime())) {
+    return "Invalid date";
+  }
+  
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  }).format(d);
+}
+
+/** Format a date with explicit UTC/local behavior */
+export function formatTimestamp(
+  date: string | Date,
+  options: {
+    mode?: "relative" | "absolute";
+    timezone?: "utc" | "local";
+  } = {}
+): string {
+  const { mode = "relative", timezone = "local" } = options;
+  
+  const d = typeof date === "string" ? new Date(date) : date;
+  
+  // Handle invalid dates
+  if (isNaN(d.getTime())) {
+    return "Invalid date";
+  }
+  
+  if (mode === "relative") {
+    return formatRelativeTime(d);
+  }
+  
+  return timezone === "utc" ? formatAbsoluteUTC(d) : formatAbsoluteLocal(d);
+}
+
 /** Map chain name to its display color / class */
 export const CHAIN_COLORS: Record<string, string> = {
   stellar: "text-chain-stellar",