MM: feat(advanced-search): align date display to oCIS locale

packages/web-app-advanced-search/src/components/SearchResults.vue

@@ -32,7 +32,7 @@
           <span class="item-path">{{ getPath(item) }}</span>
         </div>
         <span class="item-size">{{ formatBytes(item.size) }}</span>
-        <span class="item-date">{{ formatDate(item.mdate) }}</span>
+        <span class="item-date">{{ formatDate(item.mdate, userLocale) }}</span>
         <button
           type="button"
           class="oc-button-reset item-menu-btn"
@@ -102,7 +102,7 @@
           <td class="oc-table-cell cell-path" :title="getPath(item)">{{ getPath(item) }}</td>
           <td class="oc-table-cell cell-type">{{ item.mimeType || $gettext('folder') }}</td>
           <td class="oc-table-cell cell-size">{{ formatBytes(item.size) }}</td>
-          <td class="oc-table-cell cell-date">{{ formatDate(item.mdate) }}</td>
+          <td class="oc-table-cell cell-date">{{ formatDate(item.mdate, userLocale) }}</td>
           <td v-if="hasPhotoItems" class="oc-table-cell cell-camera">{{ getCameraInfo(item) }}</td>
           <td v-if="hasPhotoItems" class="oc-table-cell cell-date">{{ getPhotoDate(item) }}</td>
           <td class="oc-table-cell cell-actions">
@@ -128,7 +128,8 @@ import type { SearchResource, ResultViewMode } from '../types'
 import { useTranslations } from '../composables/useTranslations'
 import { formatBytes, formatDate, getFileIcon } from '../utils/format'
 
-const { $gettext } = useTranslations()
+const { $gettext, getUserLocale } = useTranslations()
+const userLocale = getUserLocale()
 
 const props = withDefaults(defineProps<{
   items: SearchResource[]
@@ -283,7 +284,7 @@ function getCameraInfo(item: SearchResource): string {
 
 function getPhotoDate(item: SearchResource): string {
   if (!item.photo?.takenDateTime) return '—'
-  return formatDate(item.photo.takenDateTime)
+  return formatDate(item.photo.takenDateTime, userLocale)
 }
 </script>
 

packages/web-app-advanced-search/src/utils/format.ts

@@ -23,22 +23,47 @@ export function formatBytes(bytes: number | string | undefined): string {
 }
 
 /**
- * Format date string for display
+ * Format date string for display using the user's oCIS locale.
  * @param dateStr - ISO date string or date-like string
- * @param options - Intl.DateTimeFormat options
- * @returns Formatted date string
+ * @param locale - BCP 47 locale string from oCIS user settings (e.g., "de", "en-US").
+ *                 Falls back to browser default if undefined.
+ * @returns Locale-formatted date string
  */
-export function formatDate(dateStr: string | undefined): string {
+export function formatDate(dateStr: string | undefined, locale?: string): string {
   if (!dateStr) return '—'
 
   try {
     const date = new Date(dateStr)
     if (isNaN(date.getTime())) return '—'
-    // ISO 8601 format (YYYY-MM-DD) per international standard
-    const y = date.getFullYear()
-    const m = String(date.getMonth() + 1).padStart(2, '0')
-    const d = String(date.getDate()).padStart(2, '0')
-    return `${y}-${m}-${d}`
+    return date.toLocaleDateString(locale || undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  } catch {
+    return '—'
+  }
+}
+
+/**
+ * Format date+time string for display using the user's oCIS locale.
+ * @param dateStr - ISO date string or date-like string
+ * @param locale - BCP 47 locale string from oCIS user settings
+ * @returns Locale-formatted date+time string (24-hour format)
+ */
+export function formatDateTime(dateStr: string | undefined, locale?: string): string {
+  if (!dateStr) return '—'
+
+  try {
+    const date = new Date(dateStr)
+    if (isNaN(date.getTime())) return '—'
+    return date.toLocaleString(locale || undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
   } catch {
     return '—'
   }

packages/web-app-advanced-search/src/views/AdvancedSearchView.vue

@@ -205,7 +205,7 @@
           >
             {{ query.name }}
           </button>
-          <span class="saved-date">{{ formatDate(query.savedAt) }}</span>
+          <span class="saved-date">{{ formatDate(query.savedAt, userLocale) }}</span>
           <button class="oc-button-reset delete-btn" :aria-label="$gettext('Delete')" @click="deleteQuery(query.id)"><svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z" /></svg></button>
         </li>
       </ul>
@@ -279,7 +279,8 @@ import SearchStats from '../components/SearchStats.vue'
 import ResultContextMenu from '../components/ResultContextMenu.vue'
 
 // Translations
-const { $gettext, $ngettext } = useTranslations()
+const { $gettext, $ngettext, getUserLocale } = useTranslations()
+const userLocale = getUserLocale()
 
 // Theme detection for native controls (color-scheme)
 const themeStore = useThemeStore()