working version

backup/_data/src/components/Mentions.vue

@@ -0,0 +1,79 @@
+<template>
+  <span class="mentions-container">
+    <template v-for="(part, index) in parsedContent" :key="index">
+      <router-link
+        v-if="part.type === 'mention'"
+        :to="`/profile/${part.userId}`"
+        class="mention-link"
+      >
+        @{{ part.username }}
+      </router-link>
+      <span v-else>{{ part.text }}</span>
+    </template>
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
+  },
+  mentions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const parsedContent = computed(() => {
+  if (!props.content) return []
+  
+  const parts = []
+  let currentIndex = 0
+  
+  // Parcourir le contenu pour trouver les mentions
+  props.content.split(/(@\w+)/).forEach((part, index) => {
+    if (part.startsWith('@')) {
+      const username = part.substring(1)
+      const mention = props.mentions.find(m => m.username === username)
+      
+      if (mention) {
+        parts.push({
+          type: 'mention',
+          username: mention.username,
+          userId: mention.id,
+          text: part
+        })
+      } else {
+        // Mention non trouvée, traiter comme du texte normal
+        parts.push({ type: 'text', text: part })
+      }
+    } else if (part.trim()) {
+      parts.push({ type: 'text', text: part })
+    }
+  })
+  
+  return parts
+})
+</script>
+
+<style scoped>
+.mentions-container {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.mention-link {
+  @apply font-medium transition-colors cursor-pointer;
+  text-decoration: none;
+  color: #8b5cf6;
+  filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.3));
+}
+
+.mention-link:hover {
+  color: #7c3aed;
+  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
+}
+</style>