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

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">