MM: fix(photo-addon): use 24-hour time format in lightbox

packages/web-app-photo-addon/src/components/PhotoLightbox.vue

@@ -890,12 +890,12 @@ onUnmounted(() => {
 function formatExifDate(dateStr: string): string {
   try {
     const d = new Date(dateStr)
-    return d.toLocaleDateString(getUserLocale(), {
+    return d.toLocaleString(getUserLocale(), {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
       hour: '2-digit',
-      minute: '2-digit'
+      minute: '2-digit',
     })
   } catch {
     return dateStr

packages/web-app-photo-addon/src/composables/usePhotos.ts

@@ -269,7 +269,8 @@ export function usePhotos() {
   /**
    * Format date key for display based on mode
    */
-  function formatDateKey(dateKey: string, mode: GroupMode): string {
+  function formatDateKey(dateKey: string, mode: GroupMode, locale?: string): string {
+    const loc = locale || undefined
     const today = new Date()
     const yesterday = new Date(today)
     yesterday.setDate(yesterday.getDate() - 1)
@@ -280,21 +281,21 @@ export function usePhotos() {
       case 'month': {
         const [year, month] = dateKey.split('-').map(Number)
         const date = new Date(year, month - 1, 1)
-        return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })
+        return date.toLocaleDateString(loc, { year: 'numeric', month: 'long' })
       }
       case 'week': {
         const [year, weekPart] = dateKey.split('-W')
         const weekNum = parseInt(weekPart)
         const { start: weekStart, end: weekEnd } = getWeekDateRange(parseInt(year), weekNum)
-        return `${weekStart.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} - ${weekEnd.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`
+        return `${weekStart.toLocaleDateString(loc, { month: 'short', day: 'numeric' })} - ${weekEnd.toLocaleDateString(loc, { month: 'short', day: 'numeric', year: 'numeric' })}`
       }
       case 'day':
       default: {
         const [year, month, day] = dateKey.split('-').map(Number)
         const date = new Date(year, month - 1, day)
         if (date.toDateString() === today.toDateString()) return 'Today'
         if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
-        return date.toLocaleDateString(undefined, {
+        return date.toLocaleDateString(loc, {
           weekday: 'long',
           year: 'numeric',
           month: 'long',

packages/web-app-photo-addon/src/views/PhotosView.vue

@@ -35,7 +35,7 @@
             </button>
           </div>
           <!-- EXIF only toggle (hidden in map view) -->
-          <span v-if="viewType !== 'map'" class="oc-switch" :title="$gettext('When disabled, only shows photos without EXIF metadata.\nWhen enabled, only shows photos with EXIF metadata.\nEXIF metadata such as camera, model, time stamp, location...')">
+          <span v-if="viewType !== 'map'" class="oc-switch" :title="$gettext('Show only photos with an EXIF date (date taken).\nPhotos without an EXIF date are positioned by file modification date, which may not reflect when the photo was actually taken.\nEXIF date is required for accurate timeline placement, as EXIF location is required for map view.')">
             <span id="exif-only-toggle-label">{{ $gettext('EXIF only') }}</span>
             <button
               class="oc-switch-btn"
@@ -224,7 +224,8 @@ const {
 } = usePhotos()
 
 // Initialize translations
-const { $gettext, getMonthNames } = useTranslations()
+const { $gettext, getUserLocale, getMonthNames } = useTranslations()
+const userLocale = getUserLocale()
 
 const clientService = useClientService()
 const spacesStore = useSpacesStore()
@@ -850,7 +851,7 @@ function formatDateHeader(dateKey: string): string {
     startDate.setDate(jan1.getDate() + (weekNum - 1) * 7 - jan1.getDay() + 1)
     const endDate = new Date(startDate)
     endDate.setDate(startDate.getDate() + 6)
-    return `${startDate.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} - ${endDate.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`
+    return `${startDate.toLocaleDateString(userLocale, { month: 'short', day: 'numeric' })} - ${endDate.toLocaleDateString(userLocale, { month: 'short', day: 'numeric', year: 'numeric' })}`
   }
 
   const parts = dateKey.split('-')
@@ -861,7 +862,7 @@ function formatDateHeader(dateKey: string): string {
   if (parts.length === 2) {
     // Month: 2026-01
     const date = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, 1)
-    return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })
+    return date.toLocaleDateString(userLocale, { year: 'numeric', month: 'long' })
   }
 
   // Full date: 2026-01-11
@@ -870,7 +871,7 @@ function formatDateHeader(dateKey: string): string {
   if (date.toDateString() === today.toDateString()) return $gettext('Today')
   if (date.toDateString() === yesterday.toDateString()) return $gettext('Yesterday')
 
-  return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+  return date.toLocaleDateString(userLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
 }
 
 // Handle date filter change - reload photos starting from selected month