ui improvements

2026-06-17 23:07:59 +02:00
parent ed16d5dcda
commit 06e5600447
5 changed files with 119 additions and 56 deletions
@@ -90,6 +90,18 @@ useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
    messages.value.push(e.message);
 });

+function formatTimestamp(isoString: string): { full: string; time: string } {
+    const date = new Date(isoString);
+    return {
+        full: date.toLocaleString(),
+        time: date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        }),
+    };
+}
+
 const participantsById = computed(() => {
    const list = props.participants || [];
    return list.reduce(
@@ -245,13 +257,14 @@ function closeLightbox() {
                        <span class="c-chat__message-author">{{
                            message.user.name
                        }}</span>
-                        <span class="c-chat__message-time">{{
-                            new Date(message.created_at).toLocaleString()
-                        }}</span>
+                        <span
+                            class="c-chat__message-time"
+                            :title="formatTimestamp(message.created_at).full"
+                        >
+                            {{ formatTimestamp(message.created_at).time }}
+                        </span>
                    </div>
-                    <p class="c-chat__message-text">
-                        {{ message.content }}
-                    </p>
+                    <p class="c-chat__message-text" v-html="parseMessageContent(message)"></p>

                    <!-- Attached Media Display -->
                    <div
@@ -293,13 +306,11 @@ function closeLightbox() {
                            class="c-chat__system-text"
                            v-html="parseMessageContent(message)"
                        ></span>
-                        <span class="c-chat__system-time">
-                            {{
-                                new Date(message.created_at).toLocaleTimeString(
-                                    [],
-                                    { hour: '2-digit', minute: '2-digit' },
-                                )
-                            }}
+                        <span
+                            class="c-chat__system-time"
+                            :title="formatTimestamp(message.created_at).full"
+                        >
+                            {{ formatTimestamp(message.created_at).time }}
                        </span>
                    </div>
                </template>