feat: refactor date formatting and timezone utilities for improved consistency and functionality

src/components/LocaleProvider.tsx

@@ -1,5 +1,5 @@
 import { type Locale, LocaleProviderContext } from '@/contexts/LocaleContext'
-import { getSupportedTimezones } from '@/lib/utils/locale'
+import { getSupportedTimezones } from '@/utils/locale'
 import { useEffect, useState } from 'react'
 
 type LocaleProviderProps = {

src/components/playlists/PlaylistRow.tsx

@@ -2,6 +2,7 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { TableCell, TableRow } from '@/components/ui/table'
 import type { Playlist } from '@/lib/api/services/playlists'
+import { formatDate, formatDateDistanceToNow } from '@/utils/format-date'
 import { formatDuration } from '@/utils/format-duration'
 import { Calendar, Clock, Edit, Music, Play, User } from 'lucide-react'
 
@@ -12,10 +13,6 @@ interface PlaylistRowProps {
 }
 
 export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps) {
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString()
-  }
-
   return (
     <TableRow className="hover:bg-muted/50">
       <TableCell>
@@ -31,12 +28,14 @@ export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps
           </div>
         </div>
       </TableCell>
-      <TableCell>
-        {playlist.genre ? (
-          <Badge variant="secondary">{playlist.genre}</Badge>
-        ) : (
-          <span className="text-muted-foreground">-</span>
-        )}
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          {playlist.genre ? (
+            <Badge variant="secondary">{playlist.genre}</Badge>
+          ) : (
+            <span className="text-muted-foreground">-</span>
+          )}
+        </div>
       </TableCell>
       <TableCell>
         {playlist.user_name ? (
@@ -48,22 +47,22 @@ export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps
           <span className="text-muted-foreground">System</span>
         )}
       </TableCell>
-      <TableCell className="text-center">
-        <div className="flex items-center justify-center gap-1">
+      <TableCell>
+        <div className="flex items-center gap-1">
           <Music className="h-3 w-3 text-muted-foreground" />
           {playlist.sound_count}
         </div>
       </TableCell>
-      <TableCell className="text-center">
-        <div className="flex items-center justify-center gap-1">
+      <TableCell>
+        <div className="flex items-center gap-1">
           <Clock className="h-3 w-3 text-muted-foreground" />
           {formatDuration(playlist.total_duration || 0)}
         </div>
       </TableCell>
-      <TableCell className="text-center">
-        <div className="flex items-center justify-center gap-1">
+      <TableCell>
+        <div className="flex items-center gap-1">
           <Calendar className="h-3 w-3 text-muted-foreground" />
-          {formatDate(playlist.created_at)}
+          {formatDateDistanceToNow(playlist.created_at)}
         </div>
       </TableCell>
       <TableCell className="text-center">

src/components/playlists/PlaylistTable.tsx

@@ -21,11 +21,11 @@ export function PlaylistTable({ playlists, onEdit, onSetCurrent }: PlaylistTable
         <TableHeader>
           <TableRow>
             <TableHead>Name</TableHead>
-            <TableHead>Genre</TableHead>
+            <TableHead className="text-center">Genre</TableHead>
             <TableHead>User</TableHead>
-            <TableHead className="text-center">Tracks</TableHead>
-            <TableHead className="text-center">Duration</TableHead>
-            <TableHead className="text-center">Created</TableHead>
+            <TableHead>Tracks</TableHead>
+            <TableHead>Duration</TableHead>
+            <TableHead>Created</TableHead>
             <TableHead className="text-center">Status</TableHead>
             <TableHead className="text-center">Actions</TableHead>
           </TableRow>

src/components/playlists/playlist-edit/PlaylistStatsCard.tsx

@@ -2,6 +2,7 @@ import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { NumberFlowDuration } from '@/components/ui/number-flow-duration'
 import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists'
+import { formatDate } from '@/utils/format-date'
 import NumberFlow from '@number-flow/react'
 import { Clock } from 'lucide-react'
 
@@ -42,14 +43,14 @@ export function PlaylistStatsCard({ playlist, sounds }: PlaylistStatsCardProps)
           <div className="flex justify-between text-sm">
             <span>Created:</span>
             <span>
-              {new Date(playlist.created_at).toLocaleDateString()}
+              {formatDate(playlist.created_at, true, true)}
             </span>
           </div>
           {playlist.updated_at && (
             <div className="flex justify-between text-sm">
               <span>Updated:</span>
               <span>
-                {new Date(playlist.updated_at).toLocaleDateString()}
+                {formatDate(playlist.updated_at, true, true)}
               </span>
             </div>
           )}