feat: Implement i18n infrastructure

frontend/components/PlaylistCard.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Playlist } from '../types';
 import { Disc3, Clock } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 interface PlaylistCardProps {
   playlist: Playlist;
 }
 
 const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
+  const { t } = useLanguage();
   return (
     <div className="group flex flex-col w-full p-2.5 bg-gray-800/60 rounded-md border border-gray-700/50 hover:bg-gray-700 hover:border-plex-orange/50 transition-all duration-200 cursor-pointer shadow-sm">
       <div className="flex items-center justify-between">
@@ -16,11 +18,11 @@ const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
       </div>
       
       <div className="flex items-center mt-1.5 space-x-4 text-xs text-gray-500 group-hover:text-gray-400">
-        <span className="flex items-center" title="Track Count">
+        <span className="flex items-center" title={t('playlist.trackCount')}>
           <Disc3 size={12} className="mr-1.5 opacity-70" />
           {playlist.trackCount}
         </span>
-        <span className="flex items-center" title="Last Updated">
+        <span className="flex items-center" title={t('playlist.lastUpdated')}>
           <Clock size={12} className="mr-1.5 opacity-70" />
           {new Date(playlist.lastUpdated).toLocaleDateString()}
         </span>