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

Merge branch 'main' into settings-page
All checks were successful
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
JustTemmie 2025-06-23 18:52:41 +00:00
commit 1302826ba8
9 changed files with 153 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<Banner v-if="banner" />
<NuxtPage />
<NuxtPage :keepalive="true" />
</div>
</template>
@ -12,6 +12,12 @@ const banner = useState("banner", () => false);
</script>
<style>
:root {
--background-color: rgb(30, 30, 30);
--main-text-color: rgb(190, 190, 190);
--outline-border: 1px solid rgb(150, 150, 150);
}
html,
body {
font-family: Arial, Helvetica, sans-serif;
@ -22,7 +28,7 @@ body {
}
*:focus-visible {
outline: 1px solid rgb(150, 150, 150);
outline: var(--outline-border);
}
a {

91
components/Message.vue
View file

@ -1,38 +1,36 @@
<template>
<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 v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
<div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
<Icon v-else name="lucide:user" class="message-author-avatar" />
</div>
<div class="message-data">
<div class="message-metadata">
<span class="message-author-username">
<span class="message-author-username" tabindex="0">
{{ username }}
</span>
<span class="message-date" :title="date.toString()">
{{ messageDate }}
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
</span>
</div>
<div class="message-text" v-html="sanitized"></div>
<div class="message-text" v-html="sanitized" tabindex="0"></div>
</div>
</div>
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
<div class="left-column">
<div>
<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
{{ messageDate }}
</span>
</div>
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
</span>
</div>
<div class="message-data">
<div class="message-text" v-html="sanitized"></div>
<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import DOMPurify from 'dompurify';
import { parseInline } from 'marked';
import { parse } from 'marked';
const props = defineProps<{
class?: string,
@ -46,38 +44,20 @@ const props = defineProps<{
last: boolean
}>();
const messageDate = ref<string>();
const messageElement = ref<HTMLDivElement>();
const dateHidden = ref<boolean>(true);
const date = new Date(props.timestamp);
let dateHour = date.getHours();
let dateMinute = date.getMinutes();
if (props.format == "12") {
if (dateHour > 12) {
dateHour = dateHour - 12;
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
} else {
if (dateHour == 0) {
dateHour = 12;
}
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
}
} else {
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
}
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"] });
const parsed = await parse(props.text, { gfm: true });
sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
console.log("adding listeners")
await nextTick();
messageElement.value?.addEventListener("mouseenter", (e: Event) => {
@ -101,14 +81,24 @@ onMounted(async () => {
text-align: left;
/* border: 1px solid lightcoral; */
display: grid;
grid-template-columns: 1fr 19fr;
grid-template-columns: 2dvw 1fr;
align-items: center;
column-gap: 1dvw;
width: 100%;
}
.message:hover {
background-color: rgb(20, 20, 20);
}
.normal-message {
margin-top: 1dvh;
}
.grouped-message {
margin-top: .3em;
}
#last-message {
margin-bottom: 2dvh;
}
@ -124,8 +114,8 @@ onMounted(async () => {
margin-left: .5dvw;
display: flex;
flex-direction: column;
gap: 1dvh;
height: 100%;
height: fit-content;
width: 100%;
}
.message-author {
@ -134,15 +124,15 @@ onMounted(async () => {
}
.message-author-avatar {
height: 2.3em;
width: 2.3em;
width: 100%;
border-radius: 50%;
}
.left-column {
margin-right: .5dvw;
display: flex;
text-align: center;
align-content: center;
white-space: nowrap;
}
.author-username {
@ -156,10 +146,29 @@ onMounted(async () => {
cursor: default;
}
.side-message-date {
font-size: .625em;
display: flex;
align-items: center;
align-content: center;
}
/*
.message-date-tooltip {
height: 20px;;
width: 20px;
}
*/
</style>
</style>
<style module>
.message-text ul, h1, h2, h3, h4, h5, h6 {
padding-top: 1dvh;
padding-bottom: 1dvh;
margin: 0;
}
.message-text ul {
padding-left: 2dvw;
}
</style>

45
components/MessageArea.vue
View file

@ -20,7 +20,7 @@
</template>
<script lang="ts" setup>
import type { MessageResponse } from '~/types/interfaces';
import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
import scrollToBottom from '~/utils/scrollToBottom';
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
@ -101,6 +101,11 @@ if (messagesRes) {
}
}
function pushMessage(message: MessageResponse) {
groupMessage(message);
messages.value.push(message);
}
const messages = ref<MessageResponse[]>([]);
const messageInput = ref<string>();
@ -137,14 +142,13 @@ if (accessToken && apiBase) {
console.log("message uuid:", event.data.uuid);
const parsedData = JSON.parse(event.data);
groupMessage(parsedData);
console.log("parsed message type:", messagesType.value[parsedData.uuid]);
console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
messages.value.push(parsedData);
pushMessage(parsedData);
await nextTick();
if (messagesElement.value) {
console.log("scrolling to bottom");
scrollToBottom(messagesElement);
scrollToBottom(messagesElement.value);
}
});
@ -168,7 +172,7 @@ const route = useRoute();
onMounted(async () => {
if (import.meta.server) return;
if (messagesElement.value) {
scrollToBottom(messagesElement);
scrollToBottom(messagesElement.value);
let fetched = false;
const amount = messages.value.length;
let offset = messages.value.length;
@ -203,14 +207,40 @@ onMounted(async () => {
}
});
let scrollPosition = ref<Record<string, ScrollPosition>>({});
onActivated(async () => {
await nextTick();
console.log("scroll activated");
if (messagesElement.value) {
if (scrollPosition.value[route.params.channelId as string]) {
console.log("saved scroll position:", scrollPosition.value);
setScrollPosition(messagesElement.value, scrollPosition.value[route.params.channelId as string]);
console.log("scrolled to saved scroll position");
} else {
scrollToBottom(messagesElement.value);
console.log("scrolled to bottom");
}
}
});
const router = useRouter();
router.beforeEach((to, from, next) => {
console.log("scroll hi");
if (messagesElement.value && from.params.channelId) {
scrollPosition.value[from.params.channelId as string] = getScrollPosition(messagesElement.value)
console.log("set saved scroll position to:", scrollPosition.value);
}
next()
})
</script>
<style scoped>
#message-area {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 8fr 1fr;
justify-content: space-between;
padding-left: 1dvw;
padding-right: 1dvw;
overflow: hidden;
@ -247,7 +277,6 @@ onMounted(async () => {
overflow-y: scroll;
display: flex;
flex-direction: column;
gap: 1dvh;
padding-left: 1dvw;
padding-right: 1dvw;
}

10
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -96,13 +96,17 @@ function toggleInvitePopup(e: Event) {
}
#members-list {
display: grid;
grid-template-columns: auto;
display: flex;
flex-direction: column;
overflow-y: scroll;
padding-left: 1dvw;
padding-right: 1dvw;
margin-top: 1dvh;
}
.member-item {
display: grid;
grid-template-columns: 2dvw auto;
grid-template-columns: 2dvw 1fr;
margin-top: .5em;
margin-bottom: .5em;
gap: 1em;

11
types/interfaces.ts
View file

@ -72,3 +72,14 @@ export interface StatsResponse {
email_verification_required: boolean,
build_number: string
}
export interface ScrollPosition {
scrollHeight: number,
scrollWidth: number,
scrollTop: number,
scrollLeft: number
offsetHeight: number,
offsetWidth: number,
offsetTop: number,
offsetLeft: number
}

36
utils/fetchWithApi.ts
View file

@ -9,8 +9,6 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
path = path.slice(0, path.lastIndexOf("/"));
}
console.log("formatted path:", path);
const accessToken = useCookie("access_token");
console.log("access token:", accessToken.value);
const apiBase = useCookie("api_base").value;
const apiVersion = useRuntimeConfig().public.apiVersion;
console.log("heyoooo")
@ -21,23 +19,24 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
}
console.log("path:", path)
const { revoke, refresh } = useAuth();
console.log("access token 2:", accessToken.value);
let headers: HeadersInit = {};
if (accessToken.value) {
headers = {
...options.headers,
"Authorization": `Bearer ${accessToken.value}`
};
} else {
headers = {
...options.headers
};
}
let reauthFailed = false;
while (!reauthFailed) {
const accessToken = useCookie("access_token");
console.log("access token:", accessToken.value);
if (accessToken.value) {
headers = {
...options.headers,
"Authorization": `Bearer ${accessToken.value}`
};
} else {
headers = {
...options.headers
};
}
try {
console.log("fetching:", URL.parse(apiBase + path));
const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
@ -74,9 +73,10 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
console.log("Path is refresh endpoint, throwing error");
throw error;
}
} else {
console.log("throwing error:", error);
throw error;
}
console.log("throwing error");
throw error;
}
}
}

14
utils/getScrollPosition.ts Normal file
View file

@ -0,0 +1,14 @@
import type { ScrollPosition } from "~/types/interfaces";
export default (element: HTMLElement): ScrollPosition => {
return {
scrollHeight: element.scrollHeight,
scrollWidth: element.scrollWidth,
scrollTop: element.scrollTop,
scrollLeft: element.scrollLeft,
offsetHeight: element.offsetHeight,
offsetWidth: element.offsetWidth,
offsetTop: element.offsetTop,
offsetLeft: element.offsetLeft
};
}

6
utils/scrollToBottom.ts
View file

@ -1,6 +1,6 @@
export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
if (element.value) {
element.value.scrollTo({ top: element.value.scrollHeight });
export default (element: HTMLElement) => {
if (element) {
element.scrollTo({ top: element.scrollHeight });
return;
}
}

5
utils/setScrollPosition.ts Normal file
View file

@ -0,0 +1,5 @@
import type { ScrollPosition } from "~/types/interfaces";
export default (element: HTMLElement, scrollPosition: ScrollPosition) => {
return element.scrollTo({ top: scrollPosition.scrollTop, left: scrollPosition.scrollLeft });
}