fix(pwa+timezone)

frontend/src/views/Posts.vue

@@ -99,7 +99,9 @@
       <div
         v-for="post in posts"
         :key="post.id"
-        class="card p-4 sm:p-6"
+        :id="`post-${post.id}`"
+        class="card p-4 sm:p-6 transition-all duration-300"
+        :class="{ 'ring-2 ring-primary-500 bg-primary-50': route.query.highlight == post.id }"
       >
         <!-- Post Header -->
         <div class="flex items-start space-x-3 mb-4">
@@ -282,13 +284,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useToast } from 'vue-toastification'
 import axios from '@/utils/axios'
 import { getMediaUrl } from '@/utils/axios'
-import { formatDistanceToNow } from 'date-fns'
-import { fr } from 'date-fns/locale'
+import { formatRelativeDateInFrenchTimezone } from '@/utils/dateUtils'
 import {
   Plus,
   User,
@@ -305,6 +307,8 @@ import MentionInput from '@/components/MentionInput.vue'
 
 const authStore = useAuthStore()
 const toast = useToast()
+const route = useRoute()
+const router = useRouter()
 
 const user = computed(() => authStore.user)
 const posts = ref([])
@@ -324,7 +328,7 @@ const newPost = ref({
 })
 
 function formatRelativeDate(date) {
-  return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
+  return formatRelativeDateInFrenchTimezone(date)
 }
 
 function handleMentionsChanged(mentions) {
@@ -514,8 +518,36 @@ function canDeleteComment(comment) {
   return user.value && (comment.author_id === user.value.id || user.value.is_admin)
 }
 
-onMounted(() => {
-  fetchPosts()
-  fetchUsers()
+// Fonction pour scroller vers un post spécifique
+async function scrollToPost(postId) {
+  await nextTick()
+  const postElement = document.getElementById(`post-${postId}`)
+  if (postElement) {
+    postElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    // Retirer le highlight après 3 secondes
+    setTimeout(() => {
+      if (route.query.highlight) {
+        router.replace({ query: {} })
+      }
+    }, 3000)
+  }
+}
+
+// Watcher pour le highlight dans la query
+watch(() => route.query.highlight, async (postId) => {
+  if (postId && posts.value.length > 0) {
+    await scrollToPost(parseInt(postId))
+  }
+}, { immediate: true })
+
+onMounted(async () => {
+  await fetchPosts()
+  await fetchUsers()
+  
+  // Si on a un highlight dans la query, scroller vers le post
+  if (route.query.highlight) {
+    await nextTick()
+    await scrollToPost(parseInt(route.query.highlight))
+  }
 })
 </script>