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

made emojipicker work 10x better, also fixed a few bugs

Browse Source
This commit is contained in:
Zoe
2023-01-20 00:48:49 -06:00
parent bf5245bec4
commit b6d3b045aa
15 changed files with 625 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/main.css
View File

@@ -7,7 +7,7 @@
--foreground-color: hsl(230,26%,13%);
--primary-accent: hsl(180,55%,45%);
--message-input-color: hsl(228,27.3%,25%);
--primary-placeholder: hsl(180,25%,65%);
--primary-placeholder: hsl(218,11%,65%);
--primary-dark: hsl(225, 7.7%, 10.2%); /* dropdown and emoji picker bg */

91
components/Message.vue
View File

@@ -1,17 +1,11 @@
<template>
<div class="relative message-wrapper"
@mouseenter="mouseEnter()"
@mouseleave="mouseLeave()">
@mouseleave="overflowShown = false">
<div class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-[5]"
:class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''">
<div class="absolute top-0 w-[375px]"
:style="emojiPickerStyles">
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerOpen" />
</div>
<div id="actions"
<div :id="`actions-${message.id}`"
class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden">
<button @click="emojiPickerOpen = !emojiPickerOpen"
<button @click="openEmojiPicker()"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit">
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
@@ -25,8 +19,8 @@
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>
<button v-if="!actionButtonOverflowMenuOpen"
@click="actionButtonOverflowMenuOpen = true"
<button v-if="!shiftPressed && !overflowShown"
@click="overflowShown = true"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit">
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
@@ -49,8 +43,7 @@
</g>
</svg>
</button>
<div @click="actionButtonOverflowMenuOpen = false"
v-if="actionButtonOverflowMenuOpen"
<div v-if="shiftPressed || overflowShown"
class="flex">
<button @click="copy(message.id)"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center">
@@ -118,7 +111,7 @@
<script lang="ts">
import { PropType } from 'vue';
import { IMessage } from '~/types';
import { IEmojiPickerData, IMessage } from '~/types';
import { useGlobalStore } from '~/stores/store';
import { useClipboard } from '@vueuse/core'
import emojiJson from '~/assets/json/emoji.json';
@@ -133,6 +126,10 @@ export default {
type: Boolean,
required: true
},
shiftPressed: {
type: Boolean,
required: true
},
classes: {
type: String,
required: true
@@ -142,8 +139,7 @@ export default {
return {
user: storeToRefs(useGlobalStore()).user,
emojiPickerOpen: false,
emojiPickerStyles: this.calculateEmojiPickerRight(),
actionButtonOverflowMenuOpen: false,
overflowShown: false
}
},
setup() {
@@ -153,6 +149,16 @@ export default {
copy
}
},
mounted() {
const { $listen } = useNuxtApp()
$listen('pickedEmoji', (emoji) => {
if (useGlobalStore().emojiPickerData.openedBy.messageId !== this.message.id) return;
const replacementEmoji = emojiJson.find((e) => e.short_name === emoji);
if (!replacementEmoji?.emoji) return;
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
this.toggleReaction(replacementEmoji.emoji)
});
},
methods: {
async toggleReaction(emoji: string) {
const route = useRoute()
@@ -162,6 +168,25 @@ export default {
useGlobalStore().updateMessage(this.message.id, message)
},
openEmojiPicker() {
const actionButtons = document.getElementById(`actions-${this.message.id}`);
if (!actionButtons) return;
const elementRect = actionButtons.getBoundingClientRect();
let top = elementRect.top + window.pageYOffset;
if (top + 522 > window.innerHeight) top = window.innerHeight - 522;
const payload = {
top,
right: actionButtons.clientWidth + 40,
openedBy: {
type: "message",
messageId: this.message.id
}
} as IEmojiPickerData
useGlobalStore().toggleEmojiPicker(payload)
},
emojiStyles(emoji: string, width: number) {
const emojis = emojiJson.filter((e) => e.has_img_twitter)
const twemoji = emojis.find((e) => e.emoji === emoji)
@@ -179,44 +204,10 @@ export default {
'background-size': '1037px 1037px'
}
},
pickedEmoji(emoji: string) {
const replacementEmoji = emojiJson.find((e) => e.short_name === emoji);
if (!replacementEmoji?.emoji) return;
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
this.toggleReaction(replacementEmoji.emoji)
this.emojiPickerOpen = false;
},
async deleteMessage() {
const route = useRoute()
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: "POST" })
},
calculateEmojiPickerRight() {
const actions = document.getElementById('actions')
if (!actions) return {}
const right = actions.clientWidth + 8
return {
right: right + 'px'
}
},
keyPressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.actionButtonOverflowMenuOpen = true
}
},
keyUnpressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.actionButtonOverflowMenuOpen = false
}
},
mouseEnter() {
document.body.addEventListener('keydown', this.keyPressed, false);
document.body.addEventListener('keyup', this.keyUnpressed, false);
},
mouseLeave() {
this.actionButtonOverflowMenuOpen = false
document.body.removeEventListener('keydown', this.keyPressed, false)
document.body.removeEventListener('keyup', this.keyUnpressed, false)
}
}
}
</script>

31
components/MessagePane.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]">
<div class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
<div class="w-full px-4 py-3 z-[1]">
<div v-if="!server.DM"
class="flex items-center">
@@ -42,7 +42,7 @@
</div>
<section
class="bg-[var(--foreground-color)] my-3 mx-1 h-[calc(100%-24px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]">
class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]">
<div class="h-full overflow-y-scroll" id="conversation-pane">
<div class="w-full pb-1 bg-inherit">
<div>
@@ -52,8 +52,9 @@
<Message v-else
v-for="(message, i) in server.messages"
:message="message"
:classes="calculateMessageClasses(message, i)"
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" />
:shiftPressed="shiftPressed"
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
:classes="calculateMessageClasses(message, i)" />
</div>
</div>
<div v-if="showSearch"
@@ -131,6 +132,7 @@ export default {
server: storeToRefs(useGlobalStore()).activeChannel,
messageContent: '',
canSendNotifications: false,
shiftPressed: false,
servers: storeToRefs(useGlobalStore()).servers,
usersTyping: [] as string[],
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
@@ -196,6 +198,25 @@ export default {
this.socket.emit(`typing`, this.server.id);
},
mouseEnter() {
document.body.addEventListener('keydown', this.keyPressed, false);
document.body.addEventListener('keyup', this.keyUnpressed, false);
},
mouseLeave() {
this.shiftPressed = false
document.body.removeEventListener('keydown', this.keyPressed, false)
document.body.removeEventListener('keyup', this.keyUnpressed, false)
},
keyPressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.shiftPressed = true
}
},
keyUnpressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.shiftPressed = false
}
},
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) {
@@ -291,9 +312,7 @@ export default {
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.body)
useGlobalStore().updateMessage(message.id, message)
console.log('raw', useGlobalStore().activeChannel.messages.find((e) => e.id === message.id)?.body)
return;
}

8
components/Nav.vue
View File

@@ -81,7 +81,7 @@
<div v-if="createServerModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0">
<div
class="p-4 z-20 absolute bg-[var(--primary-600)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
<h2 class="font-semibold text-xl">
Create a server:
</h2>
@@ -90,14 +90,14 @@
class="w-3/5">
<input v-model="serverName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-zinc-700 shadow-md border border-zinc-700/80"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
placeholder="Server name" />
<input type="submit"
class="py-2 px-3 rounded-md bg-zinc-700 shadow-md border border-zinc-700/80" />
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
</form>
</div>
</div>
<div class="bg-zinc-900/80 w-screen h-screen"
<div class="bg-black/70 w-screen h-screen"
@click="createServerModelOpen = false">
</div>
</div>

12
components/Sidebar.vue
View File

@@ -10,7 +10,7 @@
</section>
<div
class="h-[calc(100%-24px)] my-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
<div class="h-fit">
<nuxt-link v-for="dm in dms"
:to="'/channel/@me/' + dm.id">
@@ -95,7 +95,7 @@
<div
class="h-[calc(100%-24px)] my-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
<button
class="flex text-center bg-inherit hover:backdrop-brightness-[1.35] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
@@ -221,11 +221,11 @@
<div v-if="createChannelModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0">
<div class="bg-[var(--primary-600)] w-screen h-screen"
<div class="bg-black/70 w-screen h-screen"
@click="createChannelModelOpen = false">
</div>
<div
class="p-4 z-20 absolute bg-zinc-800 shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
<h2 class="font-semibold text-xl">
Create a channel:
</h2>
@@ -234,10 +234,10 @@
class="w-3/5">
<input v-model="channelName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-zinc-700 shadow-md border border-zinc-700/80"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md"
placeholder="Channel name" />
<input type="submit"
class="py-2 px-3 rounded-md bg-zinc-700 shadow-md border border-zinc-700/80" />
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
</form>
</div>
</div>

2
nuxt.config.ts
View File

@@ -1,7 +1,7 @@
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default {
ssr: false,
ssr: true,
app: {
head: {
meta: [

859
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -12,6 +12,7 @@
"bcryptjs": "^2.4.3",
"emoji-datasource-twitter": "^14.0.0",
"emoji-regex": "^10.2.1",
"mitt": "^3.0.0",
"nuxt": "^3.0.0",
"pinia": "^2.0.28",
"socket.io": "^4.5.4",

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

@@ -1,5 +1,12 @@
<template>
<MessagePane />
<div class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
<Transition>
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" />
</Transition>
</div>
</template>
<script lang="ts">
@@ -11,6 +18,15 @@ definePageMeta({
})
export default {
data() {
return {
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
}
}
},
async setup() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>
@@ -22,6 +38,7 @@ export default {
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
useGlobalStore().setActiveServer('dms', route.params.id);
useGlobalStore().setActiveChannel(server)
useGlobalStore().closeEmojiPicker()
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
@@ -34,9 +51,29 @@ export default {
async updated() {
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 (useGlobalStore().activeServer !== this.server) {
if (useGlobalStore().activeServer.id !== this.server.id) {
useGlobalStore().closeEmojiPicker()
useGlobalStore().setActiveServer('dms', route.params.id)
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp()
$emit('pickedEmoji', emoji)
useGlobalStore().closeEmojiPicker()
},
}
}
</script>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

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

@@ -1,5 +1,12 @@
<template>
<MessagePane />
<div class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
<Transition>
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" />
</Transition>
</div>
</template>
<script lang="ts">
@@ -15,6 +22,11 @@ export default {
data() {
return {
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
}
}
},
mounted() {
@@ -31,7 +43,8 @@ export default {
this.server = await $fetch(`/api/channels/${route.params.id}`, { headers });
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().activeChannel.id !== this.server.id) {
useGlobalStore().closeEmojiPicker()
useGlobalStore().setActiveServer('servers', route.params.id)
// update the server with the refreshed data
useGlobalStore().updateServer(route.params.id, this.server.server)
@@ -49,6 +62,7 @@ export default {
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)
useGlobalStore().setActiveChannel(server)
useGlobalStore().closeEmojiPicker()
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
@@ -58,5 +72,12 @@ export default {
server,
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp()
$emit('pickedEmoji', emoji)
useGlobalStore().closeEmojiPicker()
},
}
}
</script>

12
plugins/mitt.ts Normal file
View File

@@ -0,0 +1,12 @@
import mitt from 'mitt'
export default defineNuxtPlugin(() => {
const emitter = mitt()
return {
provide: {
emit: emitter.emit, // Will emit an event
listen: emitter.on // Will register a listener for an event
}
}
})

73
prisma/schema.prisma
View File

@@ -1,34 +1,50 @@
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id String @id @default(cuid())
email String @unique
username String @unique
passwordhash String
servers Server[]
createdAt DateTime @default(now())
messages Message[]
session Session[]
channels Channel[]
roles Role[]
createdAt DateTime @default(now())
Reactions Reaction[]
channels Channel[] @relation("ChannelToUser")
Reactions Reaction[] @relation("ReactionToUser")
roles Role[] @relation("RoleToUser")
servers Server[] @relation("ServerToUser")
incomingFriendRequests friendRequest[] @relation("FriendRequestToUser")
outgoingFriendRequests friendRequest[] @relation("UserToFriendRequest")
friends User[] @relation("UserToFriends")
// This second "side" of the UserFriends relation exists solely
// to satisfy prisma's requirements; we won't access it directly.
symmetricFriends User[] @relation("UserToFriends")
}
model friendRequest {
id String @id @default(cuid())
sender User @relation(fields: [senderId], references: [id], name: "UserToFriendRequest")
recipient User @relation(fields: [recipientId], references: [id], name: "FriendRequestToUser")
senderId String
recipientId String
status String @default("sent")
}
model Server {
id String @id @default(cuid())
name String
participants User[]
channels Channel[]
roles Role[]
InviteCode InviteCode[]
createdAt DateTime @default(now())
channels Channel[]
InviteCode InviteCode[]
roles Role[]
participants User[] @relation("ServerToUser")
}
model Role {
@@ -36,43 +52,43 @@ model Role {
name String
administrator Boolean @default(false)
owner Boolean @default(false)
users User[]
server Server? @relation(fields: [serverId], references: [id])
serverId String?
server Server? @relation(fields: [serverId], references: [id])
users User[] @relation("RoleToUser")
}
model Channel {
id String @id @default(cuid())
name String
server Server? @relation(fields: [serverId], references: [id])
serverId String?
messages Message[]
DM Boolean @default(false)
dmParticipants User[]
server Server? @relation(fields: [serverId], references: [id])
messages Message[]
dmParticipants User[] @relation("ChannelToUser")
}
model Message {
id String @id @default(cuid())
body String
channel Channel @relation(fields: [channelId], references: [id])
creator User @relation(fields: [userId], references: [id])
userId String
channelId String
invites InviteCode[]
reactions Reaction[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
invites InviteCode[]
channel Channel @relation(fields: [channelId], references: [id])
creator User @relation(fields: [userId], references: [id])
reactions Reaction[]
}
model InviteCode {
id String @id @default(cuid())
server Server @relation(fields: [serverId], references: [id])
expires Boolean @default(false)
expiryDate DateTime?
maxUses Int @default(0)
serverId String
message Message? @relation(fields: [messageId], references: [id])
messageId String?
message Message? @relation(fields: [messageId], references: [id])
server Server @relation(fields: [serverId], references: [id])
}
model Session {
@@ -82,16 +98,11 @@ model Session {
user User @relation(fields: [userId], references: [id])
}
model ExpiredSession {
id String @id @default(cuid())
token String
}
model Reaction {
id String @id @default(cuid())
emoji Json
count Int
users User[]
Message Message? @relation(fields: [messageId], references: [id])
messageId String?
Message Message? @relation(fields: [messageId], references: [id])
users User[] @relation("ReactionToUser")
}

6
server/api/getCurrentUser.get.ts
View File

@@ -17,6 +17,12 @@ export default defineEventHandler(async (event) => {
select: {
id: true,
username: true,
friends: {
select: {
id: true,
username: true,
}
}
}
}) as SafeUser | null;

30
stores/store.ts
View File

@@ -1,7 +1,7 @@
import { channel } from "diagnostics_channel";
import { serve } from "esbuild";
import { Socket } from "socket.io-client";
import { SafeUser, IServer, IChannel, IMessage } from "../types";
import { SafeUser, IServer, IChannel, IMessage, IEmojiPickerData } from "../types";
export const useGlobalStore = defineStore('global', {
state: () => ({
@@ -11,6 +11,7 @@ export const useGlobalStore = defineStore('global', {
user: {} as SafeUser,
dms: [] as IChannel[],
servers: [] as IServer[],
emojiPickerData: {} as IEmojiPickerData,
socket: null as unknown
}),
actions: {
@@ -89,6 +90,33 @@ export const useGlobalStore = defineStore('global', {
if (!this.activeChannel.messages.find(m => m.id === messageId)) return;
this.activeChannel.messages = this.activeChannel.messages.filter(m => m.id !== messageId)
},
openEmojiPicker(payload: IEmojiPickerData) {
this.emojiPickerData.top = payload.top;
this.emojiPickerData.right = payload.right;
this.emojiPickerData.openedBy = payload.openedBy;
this.emojiPickerData.opened = true;
},
toggleEmojiPicker(payload: IEmojiPickerData) {
let messageId;
if (this.emojiPickerData.openedBy === undefined) {
messageId = null
} else {
messageId = this.emojiPickerData.openedBy.messageId || null
}
console.log(!this.emojiPickerData.opened || payload.openedBy.messageId !== messageId, this.emojiPickerData.opened, payload.openedBy.messageId, messageId)
if (!this.emojiPickerData.opened || payload.openedBy.messageId !== messageId) {
this.openEmojiPicker(payload)
} else {
this.closeEmojiPicker()
}
},
closeEmojiPicker() {
console.log('closeEmojiPicker')
if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
this.emojiPickerData.opened = false;
},
logout() {
this.dms = []
this.servers = []

10
types/index.ts
View File

@@ -76,3 +76,13 @@ export interface IReaction {
Message: IMessage;
messageId: string;
}
export interface IEmojiPickerData {
opened: boolean;
top: number;
right: number;
openedBy: {
type: "message" | "messageInput";
messageId?: string;
};
}