gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'main' into settings-page

Browse source
This commit is contained in:
Twig 2025-06-02 12:36:20 +02:00
commit 8a3bb89f8a
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
7 changed files with 76 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/Channel.vue
View file

@ -1,11 +1,11 @@
<template>
<div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
<NuxtLink class="channel-list-link" :href="props.href">
<div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
# {{ props.name }}
</NuxtLink>
</div>
<div v-else class="channel-list-link-container rounded-corners">
<NuxtLink class="channel-list-link" :href="props.href">
<div v-else class="channel-list-link-container rounded-corners" tabindex="0">
<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
# {{ props.name }}
</NuxtLink>
</div>

23
components/Message.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
<div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
<Icon v-else name="lucide:user" class="message-author-avatar" />
@ -13,12 +13,10 @@
{{ messageDate }}
</span>
</div>
<div class="message-text">
{{ text }}
</div>
<div class="message-text" v-html="sanitized"></div>
</div>
</div>
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message">
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
<div class="left-column">
<div>
<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
@ -27,14 +25,15 @@
</div>
</div>
<div class="message-data">
<div class="message-text">
{{ text }}
</div>
<div class="message-text" v-html="sanitized"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import DOMPurify from 'dompurify';
import { parseInline } from 'marked';
const props = defineProps<{
class?: string,
img?: string | null,
@ -74,7 +73,11 @@ if (props.format == "12") {
console.log("message:", props.text);
console.log("author:", props.username);
const sanitized = ref<string>();
onMounted(async () => {
const parsed = await parseInline(props.text, {gfm: true });
sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] });
console.log("adding listeners")
await nextTick();
messageElement.value?.addEventListener("mouseenter", (e: Event) => {
@ -102,8 +105,8 @@ onMounted(async () => {
align-items: center;
}
.message-margin-bottom {
margin-bottom: 1dvh;
.normal-message {
margin-top: 1dvh;
}
#last-message {

1
components/MessageArea.vue
View file

@ -185,6 +185,7 @@ onMounted(async () => {
olderMessages.reverse();
console.log("older messages:", olderMessages);
if (olderMessages.length == 0) return;
olderMessages.reverse();
for (const [i, oldMessage] of olderMessages.entries()) {
console.log("old message:", oldMessage);
messages.value.unshift(oldMessage);