zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reactions and a bunch of bug fixes

Browse Source
This commit is contained in:
Zoe
2023-01-15 23:54:38 -06:00
parent f1c5537697
commit 1cba5ea335
25 changed files with 1170 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/Message.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div class="message-content">
<div
class="absolute right-0 mr-10 -top-[15px] h-fit opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
<div class="relative">
<div
class="bg-[hsl(220,calc(1*7.7%),22.9%)] hover:bg-[hsl(220,calc(1*7.7%),28.6%)] transition-colors border border-[rgb(32,34,37)] rounded-md flex text-[hsl(216,3.7%,73.5%)] w-fit h-fit">
<button class="p-1">
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24">
<path fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m13 19l-1 1l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 0 1 8.003 5.996M14 16h6m-3-3v6" />
</svg>
</button>
</div>
</div>
</div>
<div class="message-sender-text">
<p class="mb-1 font-semibold w-fit"
v-if="showUsername">
{{ message.creator.username }}
</p>
<p class="break-words max-w-full">{{ message.body }}</p>
</div>
<div v-for="invite in message.invites">
<InviteCard :invite="invite" />
</div>
<div class="flex gap-2">
<button @click="toggleReaction(message.id, reaction.emoji.name)"
v-for="reaction in message.reactions"
class="py-0.5 px-1.5 bg-[hsl(223,6.9%,19.8%)] border items-center flex rounded-lg border-[hsl(223,6.9%,19.8%)] hover:border-[hsl(223,6.9%,33.3%)] hover:bg-[hsl(223,6.9%,21.3%)] transition-colors shadow-sm max-h-[30px]"
:class="(reaction.users.find((e) => e.id === user.id)) ? 'border-[rgb(88,101,242)] hover:border-[rgb(88,101,242)]' : ''">
<div class="flex items-center mr-0.5 w-4 drop-shadow"
v-html="twemoji(reaction.emoji.name)">
</div>
<div class="relative overflow-hidden ml-1.5">
<div class="min-w-[9px] h-6"
:key="reaction.count">
<span>{{ reaction.count }}</span>
</div>
</div>
</button>
</div>
</div>
</template>
<script lang="ts">
import { PropType } from 'vue';
import { IMessage } from '~/types';
import { useGlobalStore } from '~/stores/store';
import twemoji from 'twemoji'
export default {
props: {
message: {
type: Object as PropType<IMessage>,
required: true
},
showUsername: {
type: Boolean,
required: true
}
},
data() {
return {
user: storeToRefs(useGlobalStore()).user,
}
},
methods: {
async toggleReaction(messageId: string, emoji: string) {
const route = useRoute()
const { message } = await $fetch(`/api/channels/${route.params.id}/messages/${messageId}/reactions/${emoji}`, { method: "POST" }) as IMessage
console.log(message)
useGlobalStore().updateMessage(messageId, message)
},
twemoji(emoji: string) {
return twemoji.parse(emoji, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' })
},
}
}
</script>

208
components/MessagePane.vue
View File

@@ -36,39 +36,23 @@
</svg> </svg>
</span> </span>
<span class="text-zinc-100 font-semibold">{{ <span class="text-zinc-100 font-semibold">{{
server.dmParticipants.find((e: IUser) => e.id !== server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username
user.id).username
}}</span> }}</span>
</div> </div>
</div> </div>
<div class="w-full h-[calc(100%-76px-48px)] top-[48px] absolute overflow-y-scroll pb-1" <div class="w-full h-[calc(100%-76px-48px)] top-[48px] absolute overflow-y-scroll pb-1"
id="conversation-pane"> id="conversation-pane">
<div> <div>
<div v-if="conversation.length === 0"> <div v-if="server.messages.length === 0">
<p>No messages yet</p> <p>No messages yet</p>
</div> </div>
<div v-else <div v-else
v-for="(message, i) in conversation"> v-for="(message, i) in server.messages"
<div class="transition-[backdrop-filter] hover:backdrop-brightness-110 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2" class="relative">
:class="(i === 0 || conversation[i - 1].creator.id !== message.creator.id) ? <div class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 group"
(i === conversation.length - 1 || conversation[i + 1].creator.id !== message.creator.id) ? :class="calculateMessageClasses(message, i)">
/* above and below message is not ours */ '' : <Message :message="message"
/* below message is ours */ 'mb-0 pb-0.5' : :showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" />
(i === conversation.length - 1 || conversation[i + 1].creator.id !== message.creator.id) ?
/* above message is ours */ 'mt-0 pt-0.5 pb-1' :
/* above and below message is ours */ 'mt-0 mb-0 py-0.5'">
<div>
<div class="message-sender-text">
<p class="mb-1 font-semibold"
v-if="i === 0 || conversation[i - 1].creator.id !== message.creator.id">
{{ message.creator.username }}
</p>
<p class="break-words max-w-full">{{ message.body }}</p>
</div>
<div v-for="invite in message.invites">
<InviteCard :invite="invite" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -135,26 +119,25 @@
<script lang="ts"> <script lang="ts">
import { Server } from 'socket.io'; import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store'; import { useGlobalStore } from '~/stores/store';
import { IMessage, IUser } from '~/types'; import { IChannel, IMessage, IUser, SafeUser } from '~/types';
export default { export default {
props: ['server'],
data() { data() {
return { return {
user: storeToRefs(useGlobalStore()).user, user: storeToRefs(useGlobalStore()).user,
server: storeToRefs(useGlobalStore()).activeChannel,
messageContent: '', messageContent: '',
conversation: this.server.messages as IMessage[],
canSendNotifications: false, canSendNotifications: false,
servers: storeToRefs(useGlobalStore()).servers, servers: storeToRefs(useGlobalStore()).servers,
usersTyping: [] as string[], usersTyping: [] as string[],
socket: storeToRefs(useGlobalStore()).socket as unknown as Server, socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
showSearch: false, showSearch: false,
searchResults: [] as IUser[], searchResults: [] as SafeUser[],
search: '' search: '',
} }
}, },
mounted() { mounted() {
const route = useRoute() if (!this.user) throw new Error('User not found, but sessionToken cookie is set')
Notification.requestPermission().then((result) => { Notification.requestPermission().then((result) => {
const permission = (result === 'granted') ? true : false const permission = (result === 'granted') ? true : false
@@ -165,80 +148,37 @@ export default {
if (!conversationDiv) throw new Error('conversation div not found') if (!conversationDiv) throw new Error('conversation div not found')
this.scrollToBottom() this.scrollToBottom()
this.socket.on(`message-${route.params.id}`, (ev: { message: IMessage }) => { this.listenToWebsocket(conversationDiv)
const { message } = ev
if (message.creator.id === this.user.id) return;
if (!document.hasFocus()) {
new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: route.params.id });
}
const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
if (mentions) {
const participants = (this.server.DM) ? this.server.dmParticipants : this.server.participants;
mentions.forEach((e: string) => {
if (!e) return
const id = e.split('<@')[1]?.split('>')[0];
if (!id) return;
const user = participants.find((e) => e.id === id)
message.body = message.body.split(e).join(`@${user.username}`)
});
}
this.conversation.push(message)
const lastElementChild = conversationDiv.children[0]?.lastElementChild
if (!lastElementChild) return;
setTimeout(() => {
if (conversationDiv.scrollTop + 20 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return;
conversationDiv.scrollTop = conversationDiv.scrollHeight;
})
});
let timeout: NodeJS.Timeout;
this.socket.on(`typing-${route.params.id}`, (ev: string) => {
if (ev === this.user.username) return;
clearTimeout(timeout)
timeout = setTimeout(() => {
this.usersTyping = this.usersTyping.filter(username => username !== ev)
}, 750);
if (this.usersTyping.includes(ev)) return;
this.usersTyping.push(ev);
})
},
unmounted() {
this.socket.removeAllListeners();
}, },
methods: { methods: {
async sendMessage() { async sendMessage() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>; const headers = useRequestHeaders(['cookie']) as Record<string, string>;
if (!this.messageContent) return; if (!this.messageContent) return;
const message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: route.params.id }, headers }) const message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.server.id }, headers })
if (!message) return; if (!message) return;
if (this.conversation.includes(message)) return; if (this.server.messages.includes(message)) return;
const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g); const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
if (mentions) { if (mentions) {
const participants = (this.server.DM) ? this.server.dmParticipants : this.server.server.participants; const participants = (this.server.DM) ? this.server.dmParticipants : this.server.server.participants;
console.log(participants) if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`)
mentions.forEach((e: string) => { mentions.forEach((e: string) => {
if (!e) return if (!e) return
const id = e.split('<@')[1]?.split('>')[0]; const id = e.split('<@')[1]?.split('>')[0];
if (!id) return; if (!id) return;
const user = participants.find((e) => e.id === id) const user = participants.find((e) => e.id === id)
if (!user) return;
message.body = message.body.split(e).join(`@${user.username}`) message.body = message.body.split(e).join(`@${user.username}`)
console.log(id)
}); });
} }
this.conversation.push(message) this.server.messages.push(message)
console.log('sent')
this.messageContent = ''; this.messageContent = '';
const conversationDiv = document.getElementById('conversation-pane'); const conversationDiv = document.getElementById('conversation-pane');
if (!conversationDiv) throw new Error('wtf'); if (!conversationDiv) throw new Error('wtf');
setTimeout(() => { setTimeout(() => {
conversationDiv.scrollTop = conversationDiv.scrollHeight; conversationDiv.scrollTop = conversationDiv.scrollHeight;
}) })
@@ -262,8 +202,23 @@ export default {
if (event.ctrlKey) { if (event.ctrlKey) {
return return
} }
const route = useRoute()
this.socket.emit(`typing`, route.params.id); this.socket.emit(`typing`, this.server.id);
},
calculateMessageClasses(message: IMessage, i: number) {
if (i === 0 || this.server.messages[i - 1]?.creator.id !== message.creator.id) {
if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
return 'mb-0 pb-0.5';
}
} else {
if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
return 'mt-0 mb-0 py-0.5';
} else {
return 'mt-0 pt-0.5 pb-1';
}
}
return '';
}, },
checkForMentions() { checkForMentions() {
const input = document.getElementById('messageBox') as HTMLTextAreaElement; const input = document.getElementById('messageBox') as HTMLTextAreaElement;
@@ -278,13 +233,21 @@ export default {
participants = this.server.server.participants participants = this.server.server.participants
} }
this.search = this.messageContent.split(' ')[this.messageContent.substring(0, startPosition).split(' ').length - 1].slice(1); if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`)
const search = this.messageContent.split(' ')[this.messageContent.substring(0, startPosition).split(' ').length - 1]?.slice(1);
if (!search) return
this.search = search;
if (this.search.length === 0) { if (this.search.length === 0) {
this.showSearch = false this.showSearch = false
return; return;
} }
const results = participants.filter((e: IUser) => e.username.includes(this.search)).sort((a: IUser, b: IUser) => { const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6
let results = participants.filter((e: SafeUser) => e.username.includes(this.search))
results.sort((a: SafeUser, b: SafeUser) => {
const usernameA = a.username.toLowerCase(); const usernameA = a.username.toLowerCase();
const usernameB = b.username.toLowerCase(); const usernameB = b.username.toLowerCase();
@@ -297,6 +260,10 @@ export default {
} }
}) })
if (results.length > maxResults) {
results.length = maxResults
}
if (results.length === 0) { if (results.length === 0) {
this.showSearch = false; this.showSearch = false;
return; return;
@@ -313,11 +280,68 @@ export default {
if (cursorPos === 0) return false; if (cursorPos === 0) return false;
return this.inMention(cursorPos - 1) return this.inMention(cursorPos - 1)
}, },
completeMention(user: IUser) { completeMention(user: SafeUser) {
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`) this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`)
this.showSearch = false; this.showSearch = false;
document.getElementById('messageBox')?.focus() document.getElementById('messageBox')?.focus()
},
listenToWebsocket(conversationDiv: HTMLElement) {
this.socket.removeAllListeners();
this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage }) => {
const { message } = ev
const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
if (mentions) {
const participants = (this.server.DM) ? this.server.dmParticipants : this.server.server.participants;
if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`)
mentions.forEach((e: string) => {
if (!e) return
const id = e.split('<@')[1]?.split('>')[0];
if (!id) return;
const user = participants.find((e) => e.id === id)
if (!user) return;
message.body = message.body.split(e).join(`@${user.username}`)
});
} }
if (this.server.messages.find((e) => e.id === message.id)) {
// message is already in the server, replace it with the updated message
console.log(message.id, message)
useGlobalStore().updateMessage(message.id, message)
return;
}
if (message.creator.id === this.user.id) return;
if (!document.hasFocus()) {
new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: this.server.id.toString() });
}
this.server.messages.push(message)
const lastElementChild = conversationDiv.children[0]?.lastElementChild
if (!lastElementChild) return;
setTimeout(() => {
if (conversationDiv.scrollTop + 20 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return;
conversationDiv.scrollTop = conversationDiv.scrollHeight;
})
});
let timeout: NodeJS.Timeout;
this.socket.on(`typing-${this.server.id}`, (ev: string) => {
if (ev === this.user.username) return;
clearTimeout(timeout)
timeout = setTimeout(() => {
this.usersTyping = this.usersTyping.filter(username => username !== ev)
}, 750);
if (this.usersTyping.includes(ev)) return;
this.usersTyping.push(ev);
})
},
// resizeTextarea() { // resizeTextarea() {
// const textArea = document.getElementById('messageBox') // const textArea = document.getElementById('messageBox')
// const textBox = document.getElementById('textBox') // const textBox = document.getElementById('textBox')
@@ -343,18 +367,4 @@ export default {
background-color: hsl(220, calc(1 * 7.7%), 22.9%); background-color: hsl(220, calc(1 * 7.7%), 22.9%);
bottom: calc(0px - 0.5rem); bottom: calc(0px - 0.5rem);
} }
.message-container {
transition: backdrop-filter 150ms cubic-bezier(.37, .64, .59, .33);
margin-top: 0.35rem;
margin-bottom: 0.35rem;
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.message-container:hover {
backdrop-filter: brightness(1.15);
}
</style> </style>

2
components/Nav.vue
View File

@@ -34,7 +34,7 @@
</div> </div>
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col"> <div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
<nuxt-link v-for="server in servers" <nuxt-link v-for="server in servers"
:to="'/channel/' + server.channels[0].id"> :to="'/channel/' + server.channels[0]?.id">
<div :key="server.id" <div :key="server.id"
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]"> class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]">
<svg width="32" <svg width="32"

7
components/Sidebar.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<aside <aside
class="bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none grid grid-rows-[93.5%_1fr] relative z-[2]"> class="bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none grid grid-rows-[93.5%_1fr] relative z-[2]">
<div v-if="serverType === 'dms' || !server.id"> <div v-if="serverType === 'dms' || !server">
<div> <div>
<nuxt-link v-for="dm in dms" <nuxt-link v-for="dm in dms"
:to="'/channel/@me/' + dm.id"> :to="'/channel/@me/' + dm.id">
<div <div
class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors"> class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
{{ dm.dmParticipants.find((e) => e.id !== user.id).username }} {{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
@@ -231,7 +231,6 @@ import { useGlobalStore } from '~/stores/store';
import { IChannel, IRole } from '~/types'; import { IChannel, IRole } from '~/types';
export default { export default {
props: ['server'],
data() { data() {
return { return {
server: storeToRefs(useGlobalStore()).activeServer, server: storeToRefs(useGlobalStore()).activeServer,
@@ -262,7 +261,7 @@ export default {
if (!channel) return; if (!channel) return;
this.server.channels?.push(channel) useGlobalStore().addChannel(this.server.id, channel);
this.createChannelModelOpen = false; this.createChannelModelOpen = false;
}, },
openChannel(id: string) { openChannel(id: string) {

2
layouts/default.vue
View File

@@ -44,7 +44,7 @@ export default {
globalStore.setServers(servers) globalStore.setServers(servers)
globalStore.setDms(dms) globalStore.setDms(dms)
if (route.params.id && typeof route.params.id === 'string') { if (route.params.id && typeof route.params.id === 'string') {
globalStore.setActive(route.path.includes('@me') ? 'dms' : 'servers', route.params.id) globalStore.setActiveServer(route.path.includes('@me') ? 'dms' : 'servers', route.params.id)
} }
} }
}, },

3
nuxt.config.ts
View File

@@ -1,7 +1,7 @@
// https://v3.nuxtjs.org/api/configuration/nuxt.config // https://v3.nuxtjs.org/api/configuration/nuxt.config
export default { export default {
ssr: true, ssr: false,
app: { app: {
head: { head: {
meta: [ meta: [
@@ -35,6 +35,7 @@ export default {
], ],
}, },
], ],
'@vueuse/nuxt',
], ],
typescript: { typescript: {

343
package-lock.json generated
View File

@@ -12,12 +12,16 @@
"pinia": "^2.0.28", "pinia": "^2.0.28",
"socket.io": "^4.5.4", "socket.io": "^4.5.4",
"socket.io-client": "^4.5.4", "socket.io-client": "^4.5.4",
"twemoji": "^14.0.2",
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxt/kit": "^3.0.0", "@nuxt/kit": "^3.0.0",
"@types/bcryptjs": "^2.4.2", "@types/bcryptjs": "^2.4.2",
"@types/twemoji": "^13.1.2",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@vueuse/core": "^9.10.0",
"@vueuse/nuxt": "^9.10.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"postcss": "^8.4.20", "postcss": "^8.4.20",
"prisma": "^4.8.0", "prisma": "^4.8.0",
@@ -1140,12 +1144,28 @@
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==" "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
}, },
"node_modules/@types/twemoji": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/@types/twemoji/-/twemoji-13.1.2.tgz",
"integrity": "sha512-vPNsrN08aRI2Gmdo+Ds3zZXzUk6igp1Hg+JPCeHavpiUGfgth/tGiHLQxfSrKzPXeRC0zbLs8WaUZSYxRWPbNg==",
"deprecated": "This is a stub types definition. twemoji provides its own type definitions, so you do not need this installed.",
"dev": true,
"dependencies": {
"twemoji": "*"
}
},
"node_modules/@types/uuid": { "node_modules/@types/uuid": {
"version": "9.0.0", "version": "9.0.0",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==", "integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
"dev": true "dev": true
}, },
"node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
"dev": true
},
"node_modules/@unhead/dom": { "node_modules/@unhead/dom": {
"version": "1.0.14", "version": "1.0.14",
"resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.0.14.tgz", "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.0.14.tgz",
@@ -1479,6 +1499,47 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
"integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
}, },
"node_modules/@vueuse/core": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.10.0.tgz",
"integrity": "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==",
"dev": true,
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.10.0",
"@vueuse/shared": "9.10.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"dev": true,
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/head": { "node_modules/@vueuse/head": {
"version": "1.0.22", "version": "1.0.22",
"resolved": "https://registry.npmjs.org/@vueuse/head/-/head-1.0.22.tgz", "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-1.0.22.tgz",
@@ -1493,6 +1554,98 @@
"vue": ">=2.7 || >=3" "vue": ">=2.7 || >=3"
} }
}, },
"node_modules/@vueuse/metadata": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.10.0.tgz",
"integrity": "sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/nuxt": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.10.0.tgz",
"integrity": "sha512-Re63RiUzsEbYGGrES+2YY3Elqblu0XVIVogBJydLBgK4sINDbfnqX0MHDpBuV8MC2SZ/3ojQPMOaJdYIIidJeg==",
"dev": true,
"dependencies": {
"@nuxt/kit": "^3.0.0",
"@vueuse/core": "9.10.0",
"@vueuse/metadata": "9.10.0",
"local-pkg": "^0.4.2",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"nuxt": "^3.0.0"
}
},
"node_modules/@vueuse/nuxt/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"dev": true,
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/shared": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.10.0.tgz",
"integrity": "sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==",
"dev": true,
"dependencies": {
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"dev": true,
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@zhead/schema": { "node_modules/@zhead/schema": {
"version": "1.0.9", "version": "1.0.9",
"resolved": "https://registry.npmjs.org/@zhead/schema/-/schema-1.0.9.tgz", "resolved": "https://registry.npmjs.org/@zhead/schema/-/schema-1.0.9.tgz",
@@ -6929,6 +7082,62 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}, },
"node_modules/twemoji": {
"version": "14.0.2",
"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.2.tgz",
"integrity": "sha512-BzOoXIe1QVdmsUmZ54xbEH+8AgtOKUiG53zO5vVP2iUu6h5u9lN15NcuS6te4OY96qx0H7JK9vjjl9WQbkTRuA==",
"dependencies": {
"fs-extra": "^8.0.1",
"jsonfile": "^5.0.0",
"twemoji-parser": "14.0.0",
"universalify": "^0.1.2"
}
},
"node_modules/twemoji-parser": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
"integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA=="
},
"node_modules/twemoji/node_modules/fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
},
"engines": {
"node": ">=6 <7 || >=8"
}
},
"node_modules/twemoji/node_modules/fs-extra/node_modules/jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/twemoji/node_modules/jsonfile": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
"integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
"dependencies": {
"universalify": "^0.1.2"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/twemoji/node_modules/universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"engines": {
"node": ">= 4.0.0"
}
},
"node_modules/type-fest": { "node_modules/type-fest": {
"version": "3.5.0", "version": "3.5.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.5.0.tgz", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.5.0.tgz",
@@ -8541,12 +8750,27 @@
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==" "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
}, },
"@types/twemoji": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/@types/twemoji/-/twemoji-13.1.2.tgz",
"integrity": "sha512-vPNsrN08aRI2Gmdo+Ds3zZXzUk6igp1Hg+JPCeHavpiUGfgth/tGiHLQxfSrKzPXeRC0zbLs8WaUZSYxRWPbNg==",
"dev": true,
"requires": {
"twemoji": "*"
}
},
"@types/uuid": { "@types/uuid": {
"version": "9.0.0", "version": "9.0.0",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==", "integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
"dev": true "dev": true
}, },
"@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
"dev": true
},
"@unhead/dom": { "@unhead/dom": {
"version": "1.0.14", "version": "1.0.14",
"resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.0.14.tgz", "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.0.14.tgz",
@@ -8833,6 +9057,27 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
"integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
}, },
"@vueuse/core": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.10.0.tgz",
"integrity": "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==",
"dev": true,
"requires": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.10.0",
"@vueuse/shared": "9.10.0",
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"dev": true,
"requires": {}
}
}
},
"@vueuse/head": { "@vueuse/head": {
"version": "1.0.22", "version": "1.0.22",
"resolved": "https://registry.npmjs.org/@vueuse/head/-/head-1.0.22.tgz", "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-1.0.22.tgz",
@@ -8844,6 +9089,52 @@
"@unhead/vue": "^1.0.9" "@unhead/vue": "^1.0.9"
} }
}, },
"@vueuse/metadata": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.10.0.tgz",
"integrity": "sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw==",
"dev": true
},
"@vueuse/nuxt": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.10.0.tgz",
"integrity": "sha512-Re63RiUzsEbYGGrES+2YY3Elqblu0XVIVogBJydLBgK4sINDbfnqX0MHDpBuV8MC2SZ/3ojQPMOaJdYIIidJeg==",
"dev": true,
"requires": {
"@nuxt/kit": "^3.0.0",
"@vueuse/core": "9.10.0",
"@vueuse/metadata": "9.10.0",
"local-pkg": "^0.4.2",
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"dev": true,
"requires": {}
}
}
},
"@vueuse/shared": {
"version": "9.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.10.0.tgz",
"integrity": "sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==",
"dev": true,
"requires": {
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"dev": true,
"requires": {}
}
}
},
"@zhead/schema": { "@zhead/schema": {
"version": "1.0.9", "version": "1.0.9",
"resolved": "https://registry.npmjs.org/@zhead/schema/-/schema-1.0.9.tgz", "resolved": "https://registry.npmjs.org/@zhead/schema/-/schema-1.0.9.tgz",
@@ -12591,6 +12882,58 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}, },
"twemoji": {
"version": "14.0.2",
"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.2.tgz",
"integrity": "sha512-BzOoXIe1QVdmsUmZ54xbEH+8AgtOKUiG53zO5vVP2iUu6h5u9lN15NcuS6te4OY96qx0H7JK9vjjl9WQbkTRuA==",
"requires": {
"fs-extra": "^8.0.1",
"jsonfile": "^5.0.0",
"twemoji-parser": "14.0.0",
"universalify": "^0.1.2"
},
"dependencies": {
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
},
"dependencies": {
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
"requires": {
"graceful-fs": "^4.1.6"
}
}
}
},
"jsonfile": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
"integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^0.1.2"
}
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
}
}
},
"twemoji-parser": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
"integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA=="
},
"type-fest": { "type-fest": {
"version": "3.5.0", "version": "3.5.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.5.0.tgz", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.5.0.tgz",

4
package.json
View File

@@ -14,12 +14,16 @@
"pinia": "^2.0.28", "pinia": "^2.0.28",
"socket.io": "^4.5.4", "socket.io": "^4.5.4",
"socket.io-client": "^4.5.4", "socket.io-client": "^4.5.4",
"twemoji": "^14.0.2",
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxt/kit": "^3.0.0", "@nuxt/kit": "^3.0.0",
"@types/bcryptjs": "^2.4.2", "@types/bcryptjs": "^2.4.2",
"@types/twemoji": "^13.1.2",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@vueuse/core": "^9.10.0",
"@vueuse/nuxt": "^9.10.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"postcss": "^8.4.20", "postcss": "^8.4.20",
"prisma": "^4.8.0", "prisma": "^4.8.0",

18
pages/channel/@me/[id].vue
View File

@@ -13,27 +13,27 @@ definePageMeta({
export default { export default {
async setup() { async setup() {
const route = useRoute() const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string> const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers }) const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
if (!server) throw new Error('could not find the dm') if (!server) throw new Error('could not find the dm')
useGlobalStore().addDM(server); useGlobalStore().addDM(server);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?') if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
useGlobalStore().setActive('dms', route.params.id); useGlobalStore().setActiveServer('dms', route.params.id);
function parseBody(body) { function parseBody(body: string) {
const mentions = body.match(/<@([a-z]|[0-9]){25}>/g); const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
if (mentions) { if (mentions) {
mentions.forEach((e: string) => { mentions.forEach((e: string) => {
if (!e) return if (!e) return
const id = e.split('<@')[1]?.split('>')[0]; const id = e.split('<@')[1]?.split('>')[0];
if (!id) return; if (!id) return;
const user = server.dmParticipants.find((e) => e.id === id) const user = server.dmParticipants?.find((e) => e.id === id)
if (!user) return;
body = body.split(e).join(`@${user.username}`) body = body.split(e).join(`@${user.username}`)
}); });
} }
return body return body
} }
@@ -41,6 +41,8 @@ export default {
e.body = parseBody(e.body) e.body = parseBody(e.body)
}) })
useGlobalStore().setActiveChannel(server)
return { return {
server server
} }
@@ -48,7 +50,9 @@ export default {
async updated() { async updated() {
const route = useRoute() const route = useRoute()
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?') if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
if (useGlobalStore().activeServer !== this.server) useGlobalStore().setActive('dms', route.params.id) if (useGlobalStore().activeServer !== this.server) {
useGlobalStore().setActiveServer('dms', route.params.id)
}
}, },
} }
</script> </script>

2
pages/channel/@me/index.vue
View File

@@ -20,7 +20,7 @@ export default {
} }
}, },
mounted() { mounted() {
useGlobalStore().setActive('dms', '@me') useGlobalStore().setActiveServer('dms', '@me')
}, },
methods: { methods: {
async startDM() { async startDM() {

84
pages/channel/[id].vue
View File

@@ -3,6 +3,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store' import { useGlobalStore } from '~/stores/store'
import { IChannel } from '~/types' import { IChannel } from '~/types'
@@ -11,43 +12,17 @@ definePageMeta({
}) })
export default { export default {
async setup() { data() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
useGlobalStore().addServer(realServer);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
useGlobalStore().setActive('servers', route.params.id)
function parseBody(body) {
const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
if (mentions) {
mentions.forEach((e: string) => {
if (!e) return
const id = e.split('<@')[1]?.split('>')[0];
if (!id) return;
const user = realServer?.participants.find((e) => e.id === id)
body = body.split(e).join(`@${user.username}`)
});
}
return body
}
server.messages?.forEach((e) => {
e.body = parseBody(e.body)
})
return { return {
server, socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
} }
}, },
mounted() {
this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
const newChannel = ev as IChannel
useGlobalStore().addChannel(this.server.serverId, newChannel)
})
},
async updated() { async updated() {
const route = useRoute() const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>; const headers = useRequestHeaders(['cookie']) as Record<string, string>;
@@ -57,8 +32,47 @@ export default {
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?') if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
if (useGlobalStore().activeServer.id !== this.server.id) { if (useGlobalStore().activeServer.id !== this.server.id) {
useGlobalStore().setActive('servers', route.params.id) useGlobalStore().setActiveServer('servers', route.params.id)
// update the server with the refreshed data
useGlobalStore().updateServer(route.params.id, this.server.server)
} }
},
async setup() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
useGlobalStore().addServer(realServer);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
useGlobalStore().setActiveServer('servers', route.params.id)
function parseBody(body: string) {
const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
if (mentions) {
mentions.forEach((e: string) => {
if (!e) return
const id = e.split('<@')[1]?.split('>')[0];
if (!id) return;
const user = realServer?.participants.find((e) => e.id === id)
if (!user) return;
body = body.split(e).join(`@${user.username}`)
});
} }
return body
}
server.messages?.forEach((e) => {
e.body = parseBody(e.body)
})
useGlobalStore().setActiveChannel(server)
return {
server,
}
},
} }
</script> </script>

6
pages/signup.vue
View File

@@ -63,15 +63,19 @@ export default {
const token = useCookie('sessionToken') const token = useCookie('sessionToken')
token.value = user.token token.value = user.token
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` } const headers = { Cookie: `sessionToken=${token.value}` }
const { servers, dms } = await $fetch('/api/user/getServers', { headers }) const { servers, dms } = await $fetch('/api/user/getServers', { headers })
if (!servers || !dms) return;
globalStore.setServers(servers) globalStore.setServers(servers)
globalStore.setDms(dms) globalStore.setDms(dms)
useGlobalStore().setUser(user.user) globalStore.setUser(user.user)
navigateTo('/channel/@me') navigateTo('/channel/@me')
})
} }
} }
} }

0
prisma/dev.db
View File

16
prisma/schema.prisma
View File

@@ -17,6 +17,9 @@ model User {
session Session[] session Session[]
channels Channel[] channels Channel[]
roles Role[] roles Role[]
createdAt DateTime @default(now())
Reaction Reaction? @relation(fields: [reactionId], references: [id])
reactionId String?
} }
model Server { model Server {
@@ -26,6 +29,7 @@ model Server {
channels Channel[] channels Channel[]
roles Role[] roles Role[]
InviteCode InviteCode[] InviteCode InviteCode[]
createdAt DateTime @default(now())
} }
model Role { model Role {
@@ -56,6 +60,9 @@ model Message {
userId String userId String
channelId String channelId String
invites InviteCode[] invites InviteCode[]
reactions Reaction[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
} }
model InviteCode { model InviteCode {
@@ -80,3 +87,12 @@ model ExpiredSession {
id String @id @default(cuid()) id String @id @default(cuid())
token String token String
} }
model Reaction {
id String @id @default(cuid())
emoji Json
count Int
users User[]
Message Message? @relation(fields: [messageId], references: [id])
messageId String?
}

63
server/api/channels/[id]/index.get.ts
View File

@@ -33,7 +33,55 @@ export default defineEventHandler(async (event) => {
id: true, id: true,
username: true username: true
} }
},
channels: {
select: {
id: true,
DM: true,
name: true,
messages: {
select: {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
} }
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
},
reactions: {
select: {
id: true,
emoji: true,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
}
}
}
}
},
} }
}, },
messages: { messages: {
@@ -61,6 +109,19 @@ export default defineEventHandler(async (event) => {
} }
} }
} }
},
reactions: {
select: {
id: true,
emoji: true,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
} }
} }
}, },
@@ -93,6 +154,8 @@ export default defineEventHandler(async (event) => {
} }
}) as IServer | null; }) as IServer | null;
if (!server) return;
const userInServer: Array<SafeUser> | undefined = server?.participants.filter((e: SafeUser) => e.id === event.context.user.id) const userInServer: Array<SafeUser> | undefined = server?.participants.filter((e: SafeUser) => e.id === event.context.user.id)
if (!userInServer) { if (!userInServer) {

173
server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts Normal file
View File

@@ -0,0 +1,173 @@
import { IChannel, IServer, SafeUser } from '~/types'
import { PrismaClient } from '@prisma/client'
import { node } from 'unenv'
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => {
if (!event.context.user.authenticated) {
event.node.res.statusCode = 401;
return {
message: 'You must be logged in to send a message.'
}
}
const emoji = decodeURIComponent(event.context.params.name)
if (emoji.length !== 2) {
event.node.res.statusCode = 400;
return {
message: 'reaction is not an emoji or more than one emoji.'
}
}
const first = emoji.charCodeAt(0);
const second = emoji.charCodeAt(1);
if (!((first >= 0xD800 && first <= 0xDBFF) && (second >= 0xDC00 && second <= 0xDFFF))) {
event.node.res.statusCode = 400;
return {
message: 'reaction is not an emoji or more than one emoji.'
}
}
const messageSelect = {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
}
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
},
reactions: {
select: {
id: true,
emoji: true,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
}
}
const message = await prisma.message.findFirst({
where: {
id: event.context.params.messageId
},
select: messageSelect
})
if (!message.id) {
event.node.res.statusCode = 404;
return {
message: `message with id "${event.context.params.messageId}" not found.`
}
}
const reactionInMessage = message.reactions.find((e) => e.emoji.name === emoji)
let count;
if (reactionInMessage?.count) {
count = reactionInMessage.count + 1;
} else {
count = 1;
}
if (reactionInMessage && reactionInMessage.users.find((e) => e.id === event.context.user.id)) {
// remove reaction
await prisma.reaction.update({
where: {
id: reactionInMessage.id
},
data: {
count: reactionInMessage.count - 1,
users: {
disconnect: [{ id: event.context.user.id }]
}
}
})
const updatedMessage = await prisma.message.findFirst({
where: {
id: event.context.params.messageId
},
select: messageSelect
})
global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage });
return { message: updatedMessage }
}
let reaction;
if (reactionInMessage) {
// reaction already exists, so up the count by one and add the user to the users who have reacted
reaction = await prisma.reaction.update({
where: {
id: reactionInMessage.id
},
data: {
count,
users: {
connect: [{
id: event.context.user.id,
}]
},
}
})
} else {
reaction = await prisma.reaction.create({
data: {
emoji: {
name: emoji,
id: null
},
count: count,
users: {
connect: [{
id: event.context.user.id,
}]
},
Message: {
connect: {
id: message.id,
}
}
}
})
}
if (!reaction.messageId) return;
const updatedMessage = await prisma.message.findFirst({
where: {
id: reaction.messageId,
},
select: messageSelect
})
global.io.emit(`message-${event.context.params.id}`, { message: updatedMessage });
return { message: updatedMessage }
})

61
server/api/guilds/[id]/addChannel.post.ts
View File

@@ -61,8 +61,69 @@ export default defineEventHandler(async (event) => {
id: server.id id: server.id
} }
} }
},
select: {
id: true,
name: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true
}
},
channels: {
select: {
id: true,
DM: true,
name: true
}
},
}
},
messages: {
select: {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
}
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
}
}
},
DM: true,
dmParticipants: {
select: {
id: true,
username: true
}
},
serverId: true,
} }
}) as IChannel }) as IChannel
global.io.emit(`addChannel-${server.id}`, channel)
return channel return channel
}) })

61
server/api/guilds/[id]/index.get.ts
View File

@@ -21,10 +21,63 @@ export default defineEventHandler(async (event) => {
where: { where: {
id: event.context.params.id id: event.context.params.id
}, },
include: { select: {
participants: true, id: true,
channels: true, name: true,
roles: true participants: {
select: {
id: true,
username: true
}
},
channels: {
select: {
id: true,
DM: true,
name: true,
messages: {
select: {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
}
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
},
reactions: {
select: {
id: true,
emoji: true,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
}
}
}
}
},
} }
}) as IServer | null; }) as IServer | null;

2
server/api/login.post.ts
View File

@@ -14,8 +14,6 @@ export default defineEventHandler(async (event) => {
} }
} }
let user = await prisma.user.findFirst({ let user = await prisma.user.findFirst({
where: { where: {
username: body.username username: body.username

15
server/api/signup.post.ts
View File

@@ -45,6 +45,21 @@ export default defineEventHandler(async (event) => {
select: { select: {
id: true, id: true,
username: true, username: true,
servers: {
participants: {
select: {
id: true,
username: true
}
},
channels: {
select: {
id: true,
DM: true,
name: true,
}
},
}
}, },
}) as unknown as IUser }) as unknown as IUser

62
server/api/user/getServers.get.ts
View File

@@ -25,9 +25,69 @@ export default defineEventHandler(async (event) => {
select: { select: {
id: true, id: true,
DM: true, DM: true,
name: true name: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true,
username: true
} }
}, },
channels: {
select: {
id: true,
DM: true,
name: true,
messages: {
select: {
id: true,
body: true,
creator: {
select: {
id: true,
username: true
}
},
invites: {
select: {
id: true,
server: {
select: {
id: true,
name: true,
participants: {
select: {
id: true
}
}
}
}
}
},
reactions: {
select: {
id: true,
emoji: true,
count: true,
users: {
select: {
id: true,
username: true
}
}
}
}
}
}
}
},
}
},
},
},
participants: { participants: {
select: { select: {
id: true, id: true,

2
server/middleware/socket.ts
View File

@@ -17,7 +17,6 @@ export default defineEventHandler(({ node }) => {
return; return;
} }
console.time()
const { user } = await prisma.session.findFirst({ const { user } = await prisma.session.findFirst({
where: { where: {
token token
@@ -87,7 +86,6 @@ export default defineEventHandler(({ node }) => {
} }
} }
}) as { user: IUser } | null; }) as { user: IUser } | null;
console.timeEnd();
if (!user) { if (!user) {
return; return;

84
stores/store.ts
View File

@@ -1,8 +1,11 @@
import { channel } from "diagnostics_channel";
import { serve } from "esbuild";
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import { SafeUser, IServer, IChannel } from "../types"; import { SafeUser, IServer, IChannel, IMessage } from "../types";
export const useGlobalStore = defineStore('global', { export const useGlobalStore = defineStore('global', {
state: () => ({ state: () => ({
activeChannel: {} as IChannel,
activeServer: {} as IServer | IChannel, activeServer: {} as IServer | IChannel,
activeServerType: '' as "dms" | "servers" | undefined, activeServerType: '' as "dms" | "servers" | undefined,
user: {} as SafeUser, user: {} as SafeUser,
@@ -11,27 +14,7 @@ export const useGlobalStore = defineStore('global', {
socket: null as unknown socket: null as unknown
}), }),
actions: { actions: {
setUser(user: SafeUser) { setActiveServer(type: "servers" | "dms", channelId: string) {
this.user = user;
},
addServer(server: IServer) {
if (!this.servers || this.servers.find((e) => e.id === server.id)) return;
this.servers.push(server)
},
addDM(dmChannel: IChannel) {
if (!this.dms || this.dms.find((e) => e.id === dmChannel.id)) return;
this.dms.push(dmChannel)
},
setServers(servers: Array<IServer>) {
this.servers = servers
},
setDms(dms: Array<IChannel>) {
this.dms = dms
},
setSocket(socket: Socket) {
this.socket = socket
},
setActive(type: "servers" | "dms", channelId: string) {
if (channelId === '@me') { if (channelId === '@me') {
this.activeServer = {} as IServer | IChannel this.activeServer = {} as IServer | IChannel
this.activeServerType = 'dms' this.activeServerType = 'dms'
@@ -42,24 +25,71 @@ export const useGlobalStore = defineStore('global', {
const searchableArray: IChannel[] | IServer[] | undefined = this[type] const searchableArray: IChannel[] | IServer[] | undefined = this[type]
if (!searchableArray) return; if (!searchableArray) return;
let activeServerIndex: number; let activeServer: number;
if (type === 'servers') { if (type === 'servers') {
activeServerIndex = searchableArray.findIndex((e) => { activeServer = searchableArray.find((e) => {
return e.channels.some((channel: IChannel) => channel.id === channelId) return e.channels.some((channel: IChannel) => channel.id === channelId)
}) })
} else { } else {
activeServerIndex = searchableArray.findIndex((e) => { activeServer = searchableArray.find((e) => {
return e.id === channelId return e.id === channelId
}) })
} }
this.activeServer = this.servers[activeServerIndex] this.activeServer = activeServer
},
setActiveChannel(channel: IChannel) {
this.activeChannel = channel;
},
updateServer(channelId: string, server: IServer) {
const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId))
this.servers[serverIndex] = server
},
setServers(servers: Array<IServer>) {
this.servers = servers
},
addChannel(serverId: string, channel: IChannel) {
const serverIndex = this.servers.findIndex(s => s.id === serverId)
const server = this.servers[serverIndex]
if (serverIndex < 0 || !server) return;
if (server.channels.find((c) => c.id === channel.id)) return;
server.channels.push(channel)
},
addDM(dmChannel: IChannel) {
if (this.dms.find((e) => e.id === dmChannel.id)) {
const index = this.dms.findIndex((e) => e.id === dmChannel.id)
this.dms[index] = dmChannel
return;
}
this.dms.push(dmChannel)
},
addServer(server: IServer) {
if (this.servers.find((e) => e.id === server.id)) {
const index = this.servers.findIndex((e) => e.id === server.id)
this.servers[index] = server
return;
}
this.servers.push(server)
},
setDms(dms: Array<IChannel>) {
this.dms = dms
},
setSocket(socket: Socket) {
this.socket = socket
},
setUser(user: SafeUser) {
this.user = user;
},
updateMessage(messageId: string, message: IMessage) {
const messageIndex = this.activeChannel.messages.findIndex((e) => e.id === messageId)
if (messageIndex < 0) return;
this.activeChannel.messages[messageIndex] = message
}, },
logout() { logout() {
this.dms = [] this.dms = []
this.servers = [] this.servers = []
this.socket = null this.socket = null
this.activeServer = {} as IServer | IChannel this.activeServer = {} as IChannel
} }
}, },
}) })

23
tsconfig.json
View File

@@ -1,3 +1,26 @@
{ {
"compilerOptions": {
"target": "ES2020",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"sourceMap": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,
"jsx": "preserve",
"noUncheckedIndexedAccess": true,
"noImplicitAny": true,
"allowJs": true
},
"extends": "./.nuxt/tsconfig.json" "extends": "./.nuxt/tsconfig.json"
} }

19
types/index.ts
View File

@@ -6,6 +6,7 @@ export interface IUser {
servers?: Array<IServer>; servers?: Array<IServer>;
channels?: Array<IChannel>; channels?: Array<IChannel>;
roles?: Array<IRole>; roles?: Array<IRole>;
createdAt: Date;
} }
export type SafeUser = Omit<Omit<IUser, 'passwordhash'>, 'email'> export type SafeUser = Omit<Omit<IUser, 'passwordhash'>, 'email'>
@@ -23,7 +24,7 @@ export interface IChannel {
id: string; id: string;
name: string; name: string;
server: IServer; server: IServer;
messages?: Array<IMessage> messages: Array<IMessage>
DM: boolean; DM: boolean;
dmParticipants?: Array<SafeUser>; dmParticipants?: Array<SafeUser>;
serverId: string; serverId: string;
@@ -37,6 +38,9 @@ export interface IMessage {
userId: string; userId: string;
channelId: string; channelId: string;
invites?: IInviteCode[]; invites?: IInviteCode[];
reactions?: IReaction[];
createdAt: Date;
updatedAt: Date;
} }
export interface IInviteCode { export interface IInviteCode {
@@ -59,3 +63,16 @@ export interface IRole {
server?: IServer; server?: IServer;
serverId?: string; serverId?: string;
} }
export interface IReaction {
id: string;
emoji: {
name: string;
id?: string;
};
count: number;
previousCount?: number;
users: IUser[];
Message: IMessage;
messageId: string;
}