added user locale support for date formatting and input fields across components, updated TODO.md

TODO.md

@@ -15,6 +15,7 @@
 - [ ] Full-text search across all articles (beyond just fuzzy search in filter)
 - [ ] Article preview/summary - Show excerpt before opening full article
 - [ ] Reading time estimation - Display estimated read time per article
+- [ ] Add other LLM Systems like LM Studio and APIs for online models
 
 ## Feed Management & Discovery
 - [ ] Display Stale Feeds
@@ -28,6 +29,7 @@
 ## User Experience
 - [x] Dark/light theme toggle
 - [x] Infinite scroll / load more functionality for articles
+- [ ] App language depending on user locale
 - [ ] Customizable article layout - List view, card view, magazine style
 - [ ] Keyboard shortcuts - Navigate articles without mouse
 - [ ] Offline reading support - Cache articles for offline access

frontend/src/components/NewsFilters.vue

@@ -86,6 +86,7 @@
                   <input
                     type="date"
                     v-model="filters.fromDate"
+                    :lang="dateLocale"
                     class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-green-500 focus:border-green-500 dark:text-gray-200"
                   />
                 </div>
@@ -94,6 +95,7 @@
                   <input
                     type="date"
                     v-model="filters.toDate"
+                    :lang="dateLocale"
                     class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-green-500 focus:border-green-500 dark:text-gray-200"
                   />
                 </div>
@@ -196,6 +198,7 @@
                 <input
                   type="date"
                   v-model="filters.fromDate"
+                  :lang="dateLocale"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                 />
               </div>
@@ -204,6 +207,7 @@
                 <input
                   type="date"
                   v-model="filters.toDate"
+                  :lang="dateLocale"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                 />
               </div>
@@ -260,13 +264,15 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, computed} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {useNews} from '../stores/useNews';
 import {useFeeds} from '../stores/useFeeds';
 
 const news = useNews();
 const feeds = useFeeds();
 
+const dateLocale = computed(() => news.clientLocale || 'en-US');
+
 const isLoading = ref(false);
 const showFilters = ref(false);
 

frontend/src/components/NewsList.vue

@@ -21,14 +21,18 @@
       >
         <!-- Article Header -->
         <div class="flex-1 p-4 sm:p-6">
-        <div class="flex items-start justify-between mb-3">
+          <div class="flex items-start justify-between mb-3">
             <span
               class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
               {{ article.country }}
             </span>
             <time
               :datetime="new Date(article.published * 1000).toISOString()"
-              class="text-xs text-gray-500 flex-shrink-0 ml-2"
+              :title="new Date(article.published * 1000).toLocaleString(userLocale.value, {
+                dateStyle: 'full',
+                timeStyle: 'long'
+              })"
+              class="text-xs text-gray-500 flex-shrink-0 ml-2 cursor-help hover:text-green-600 dark:hover:text-green-400 transition-colors relative group"
             >
               {{ formatDate(article.published) }}
             </time>
@@ -52,7 +56,7 @@
         <!-- Article Footer -->
         <div
           class="flex justify-between items-center gap-4 p-4 sm:p-6">
-        <button
+          <button
             @click="openModal(article)"
             class="flex-1 inline-flex items-center justify-center cursor-pointer px-4 py-2 text-sm font-medium rounded-lg bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 transition-colors"
           >
@@ -104,10 +108,12 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, onUnmounted, watch} from 'vue';
+import {ref, onMounted, onUnmounted, watch, computed} from 'vue';
 import {useNews} from '../stores/useNews';
 import ArticleModal from './ArticleModal.vue';
 
+const userLocale = computed(() => news.clientLocale || 'en-US');
+
 const news = useNews();
 const loading = ref(false);
 
@@ -197,7 +203,7 @@ function formatDate(timestamp: number): string {
   } else if (diffInHours < 48) {
     return 'Yesterday';
   } else {
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(userLocale.value, {
       month: 'short',
       day: 'numeric',
       year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined

frontend/src/stores/useNews.ts

@@ -13,6 +13,7 @@ export const useNews = defineStore('news', {
     }[],
     lastSync: 0,
     clientTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    clientLocale: Intl.DateTimeFormat().resolvedOptions().locale,
     page: 1,
     pageSize: 12,
     hasMore: true,
@@ -117,7 +118,7 @@ export const useNews = defineStore('news', {
 
     // New convenience methods
     async getAllNews() {
-      return this.getNews({ all_countries: 'true', all_dates: 'true' });
+      return this.getNews({all_countries: 'true', all_dates: 'true'});
     },
 
     async getNewsForCountries(countries: string[], from?: string, to?: string) {