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

Merge remote-tracking branch 'origin/main' into profile-modal
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-08-04 20:20:20 +02:00
commit 83d4f02c3a
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
18 changed files with 147 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

30
components/Message.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
<div v-if="props.replyMessage" class="message-reply-svg">
@ -47,7 +47,7 @@
</div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div>
<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
<div class="left-column">
@ -68,11 +68,14 @@ import { parse } from 'marked';
import type { MessageProps } from '~/types/props';
import MessageMedia from './MessageMedia.vue';
import MessageReply from './UserInterface/MessageReply.vue';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const { getDisplayName } = useProfile()
const props = defineProps<MessageProps>();
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
const messageElement = ref<HTMLDivElement>();
const dateHidden = ref<boolean>(true);
@ -128,9 +131,6 @@ onMounted(async () => {
}
if (mediaLinks.length) {
hasEmbed.value = true
setTimeout(() => {
scrollToBottom(document.getElementById("messages") as HTMLDivElement);
}, 500);
};
} catch (error) {
console.error(error);
@ -144,13 +144,19 @@ console.log("media links:", mediaLinks);
// showHover.value = !showHover.value;
//}
const menuItems = [
{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
const menuItems: ContextMenuItem[] = [
{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
]
console.log("me:", props.me);
if (props.author?.uuid == props.me.uuid) {
menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
// Inserts "edit" option at index 1 (below the "reply" option)
menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
}
if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) {
// Inserts "edit" option at index 2 (below the "edit" option)
menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
}
function getDayDifference(date1: Date, date2: Date) {
@ -286,3 +292,11 @@ function getDayDifference(date1: Date, date2: Date) {
padding-left: 1em;
}
</style>
<style>
.replying-to {
background-color: var(--primary-highlighted-color);
}
</style>

27
components/MessageArea.vue
View file

@ -1,7 +1,7 @@
<template>
<div id="message-area">
<div id="messages" ref="messagesElement">
<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
:format="timeFormat" :type="messagesType[message.uuid]"
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
@ -224,6 +224,10 @@ function sendMessage(e: Event) {
if (messageReply && messageReply.dataset.messageId) {
console.log("[MSG] message is a reply");
message.reply_to = messageReply.dataset.messageId;
const replyToMessage = document.querySelector(`.message[data-message-id='${message.reply_to}']`);
if (replyToMessage) {
replyToMessage.classList.remove("replying-to");
}
}
console.log("[MSG] sent message:", message);
@ -240,12 +244,8 @@ function sendMessage(e: Event) {
}
function getReplyMessage(id: string) {
console.log("[REPLYMSG] id:", id);
const messagesValues = Object.values(messages.value);
console.log("[REPLYMSG] messages values:", messagesValues);
for (const message of messagesValues) {
console.log("[REPLYMSG] message:", message);
console.log("[REPLYMSG] IDs match?", message.uuid == id);
if (message.uuid == id) return message;
}
}
@ -269,21 +269,14 @@ onMounted(async () => {
if (fetched) return;
fetched = true;
console.log("scroll height is at 10% or less");
//console.log("current oldest:", currentOldestMessage);
const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
if (olderMessages) {
if (olderMessages?.length) {
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);
for (const message of messages.value) {
groupMessage(message);
}
messages.value = [...olderMessages.map(msg => reactive(msg)), ...messages.value];
for (const message of messages.value) {
groupMessage(message);
}
offset += offset;
offset += amount;
}
} else {
fetched = false;

40
components/UserInterface/ContextMenu.vue
View file

@ -1,11 +1,15 @@
<template>
<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
{{ item.name }}
<div id="context-menu">
<button v-for="item of props.menuItems" class="context-menu-item"
:class="'context-menu-item-' + item.type"
@click="runCallback(item)">
{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
</button>
</div>
</template>
<script lang="ts" setup>
import type { ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
@ -19,7 +23,8 @@ onMounted(() => {
function runCallback(item: ContextMenuItem) {
removeContextMenu();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
removeContextMenu(contextMenu);
item.callback();
}
@ -31,14 +36,33 @@ function runCallback(item: ContextMenuItem) {
position: absolute;
display: flex;
flex-direction: column;
width: 10dvw;
border: .15rem solid cyan;
background-color: var(--background-color);
text-align: center;
width: 10rem;
border: .1rem solid var(--reply-text-color);
background-color: var(--sidebar-highlighted-background-color);
text-align: left;
z-index: 100;
}
.context-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 2rem;
width: 100%;
color: var(--text-color);
background-color: var(--sidebar-highlighted-background-color);
border: none;
text-align: left;
padding-left: 1rem;
padding-right: 1rem;
}
.context-menu-item:hover {
background-color: rgb(50, 50, 50);
}
.context-menu-item-danger {
color: var(--danger-text-color);
}
</style>

15
components/UserInterface/MessageReply.vue
View file

@ -46,11 +46,22 @@ onMounted(async () => {
function scrollToReply(e: MouseEvent) {
e.preventDefault();
console.log("clicked on reply box");
const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
if (reply) {
let replyId: string;
if (props.maxWidth == "reply") {
replyId = props.replyId;
} else {
replyId = props.id;
}
const reply = document.querySelector(`.message[data-message-id="${replyId}"]`);
if (reply instanceof HTMLDivElement) {
console.log("reply:", reply);
console.log("scrolling into view");
reply.scrollIntoView({ behavior: "smooth", block: "center" });
reply.style.transition = "background-color .3s";
reply.style.backgroundColor = "var(--primary-highlighted-color)";
setTimeout(() => {
reply.style.backgroundColor = "";
}, 1000);
}
}

20
components/UserInterface/ResizableSidebar.vue
View file

@ -1,7 +1,7 @@
<template>
<div ref="resizableSidebar" class="resizable-sidebar"
:style="{
'width': storedWidth ? `${storedWidth}px` : props.width,
'width': storedWidth ? storedWidth : props.width,
'min-width': props.minWidth,
'max-width': props.maxWidth,
'border': props.borderSides == 'all' ? borderStyling : undefined,
@ -21,7 +21,7 @@
</template>
<script lang="ts" setup>
import type { ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
@ -29,10 +29,18 @@ const borderStyling = ".1rem solid var(--padding-color)";
const resizableSidebar = ref<HTMLDivElement>();
const widthResizer = ref<HTMLDivElement>();
const storedWidth = ref<number>();
const storedWidth = ref<string>();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const menuItems: ContextMenuItem[] = [
{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
{ name: "Reset", callback: () => {
const defaultWidth = props.width ?? props.minWidth;
resizableSidebar.value!.style.width = defaultWidth;
if (props.localStorageName) {
localStorage.setItem(props.localStorageName, defaultWidth);
}
} }
]
onMounted(() => {
@ -42,7 +50,7 @@ onMounted(() => {
widthResizer.value.addEventListener("pointerdown", (e) => {
e.preventDefault();
if (e.button == 2) {
createContextMenu(e, menuItems);
showContextMenu(e, contextMenu.value, menuItems);
return
};
document.body.style.cursor = "ew-resize";
@ -88,7 +96,7 @@ function loadStoredWidth() {
if (props.localStorageName) {
const storedWidthValue = localStorage.getItem(props.localStorageName);
if (storedWidthValue) {
storedWidth.value = parseInt(storedWidthValue) || undefined;
storedWidth.value = storedWidthValue;
console.log("[res] loaded stored width");
}
}