various improvements
This commit is contained in:
21
components/DropdownItem.vue
Normal file → Executable file
21
components/DropdownItem.vue
Normal file → Executable file
@@ -1,15 +1,18 @@
|
||||
<template>
|
||||
<li>
|
||||
<button
|
||||
class="w-full cursor-pointer bg-inherit hover:backdrop-brightness-150 text-left px-3 py-1.5 rounded-md flex items-center justify-between transition-all"
|
||||
:class="(danger) ? 'hover:bg-[var(--primary-danger)]' : ''">
|
||||
<slot />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="w-full cursor-pointer bg-inherit hover:backdrop-brightness-150 text-left px-3 py-1.5 rounded-md flex items-center justify-between transition-all"
|
||||
:class="(danger) ? 'hover:bg-[var(--primary-danger)]' : ''"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['danger']
|
||||
}
|
||||
props: {
|
||||
danger: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
24
components/DropdownMenu.vue
Normal file → Executable file
24
components/DropdownMenu.vue
Normal file → Executable file
@@ -1,17 +1,23 @@
|
||||
<template>
|
||||
<Transition name="pop-in">
|
||||
<div ref="dropdown" class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left"
|
||||
:class="(inverted) ? 'dropdown-inverse' : 'dropdown'"
|
||||
v-if="opened">
|
||||
<slot />
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="pop-in">
|
||||
<div
|
||||
v-if="opened"
|
||||
ref="dropdown"
|
||||
class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left"
|
||||
:class="(inverted) ? 'dropdown-inverse' : 'dropdown'"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: ['opened', 'inverted'],
|
||||
}
|
||||
props: {
|
||||
opened: Boolean,
|
||||
inverted: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
410
components/EmojiPicker.vue
Normal file → Executable file
410
components/EmojiPicker.vue
Normal file → Executable file
@@ -1,27 +1,31 @@
|
||||
<script lang="ts">
|
||||
import emojiJson from '~/assets/json/emoji.json'
|
||||
import emojiJson from '~/assets/json/emoji.json';
|
||||
|
||||
export default {
|
||||
props: ['opened'],
|
||||
props: {
|
||||
opened: Boolean,
|
||||
},
|
||||
emits: ['picked-emoji'],
|
||||
data() {
|
||||
return {
|
||||
emojis: emojiJson.filter((e) => e.has_img_twitter),
|
||||
emojis: emojiJson,
|
||||
categories: [
|
||||
{ name: "people", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('smileys')).concat(emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('people'))) },
|
||||
{ name: "nature", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('nature')) },
|
||||
{ name: "food", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('food')) },
|
||||
{ name: "activities", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('activities')) },
|
||||
{ name: "travel", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('travel')) },
|
||||
{ name: "objects", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('objects')) },
|
||||
{ name: "symbols", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('symbols')) },
|
||||
{ name: "flags", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('flags')) }
|
||||
{ name: 'people', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('smileys')).concat(emojiJson.filter((e) => e.category.toLowerCase().includes('people'))) },
|
||||
{ name: 'nature', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('nature')) },
|
||||
{ name: 'food', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('food')) },
|
||||
{ name: 'activities', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('activities')) },
|
||||
{ name: 'travel', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('travel')) },
|
||||
{ name: 'objects', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('objects')) },
|
||||
{ name: 'symbols', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('symbols')) },
|
||||
{ name: 'flags', emojis: emojiJson.filter((e) => e.category.toLowerCase().includes('flags')) }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
emojiStyles(emojiShortName: string, width: number) {
|
||||
const emojis = emojiJson.filter((e) => e.has_img_twitter)
|
||||
const emoji = emojis.find((e) => e.short_name === emojiShortName)
|
||||
const emojis = emojiJson;
|
||||
const emoji = emojis.find((e) => e.short_names[0] === emojiShortName);
|
||||
if (!emoji) return;
|
||||
const sheet_x = (emoji.sheet_y * (width + 2));
|
||||
const sheet_y = (emoji.sheet_x * (width + 2));
|
||||
return {
|
||||
@@ -31,169 +35,237 @@ export default {
|
||||
display: 'inline-block',
|
||||
'background-position': `-${sheet_y + 1}px -${sheet_x + 1}px`,
|
||||
'background-size': '6480% 6480%'
|
||||
}
|
||||
};
|
||||
},
|
||||
scrollTo(categoryName: string) {
|
||||
document.getElementById('emoji-pane').scrollTop = document.getElementById(categoryName).offsetTop - 92;
|
||||
const emojiPane = document.getElementById('emojiPane');
|
||||
const category = document.getElementById(categoryName);
|
||||
if (!emojiPane || !category) return;
|
||||
emojiPane.scrollTop = category.offsetTop - 96;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="opened"
|
||||
class="rounded-lg shadow-md p-3 z-10 bg-[var(--primary-dark)]">
|
||||
<div class="py-1.5 flex flex-col">
|
||||
<div class="flex-row gap-x-2 overflow-x-scroll">
|
||||
<button @click="scrollTo('people')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" />
|
||||
<path d="M10 10c-.5-1-2.5-1-3 0m10 0c-.5-1-2.5-1-3 0m.5 5a3.5 3.5 0 0 1-5 0" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('nature')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m16 5l3 3l-2 1l4 4l-3 1l4 4h-9m2 3v-3m-7-5l-2-2m2 1l2-2M8 21V8m-2.176 7.995a3 3 0 0 1-2.743-3.69a2.998 2.998 0 0 1 .304-4.833A3 3 0 0 1 8 3.765a3 3 0 0 1 4.614 3.707a2.997 2.997 0 0 1 .305 4.833A3 3 0 0 1 10 16H6z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('food')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('activities')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5H12z" />
|
||||
<path d="m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('travel')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m14.5 6.5l3-2.9a2.05 2.05 0 0 1 2.9 2.9l-2.9 3L20 17l-2.5 2.55L14 13l-3 3v3l-2 2l-1.5-4.5L3 15l2-2h3l3-3l-6.5-3.5L7 4l7.5 2.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('objects')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M3 14c.83.642 2.077 1.017 3.5 1c1.423.017 2.67-.358 3.5-1c.83-.642 2.077-1.017 3.5-1c1.423-.017 2.67.358 3.5 1M8 3a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2m4-4a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2" />
|
||||
<path d="M3 10h14v5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-5z" />
|
||||
<path d="M16.746 16.726a3 3 0 1 0 .252-5.555" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('symbols')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="9" />
|
||||
<path d="M12 7v5l3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="scrollTo('flags')"
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="py-1.5 flex flex-col">
|
||||
<div class="flex-row gap-x-2 overflow-x-scroll">
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('people')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" />
|
||||
<path d="M10 10c-.5-1-2.5-1-3 0m10 0c-.5-1-2.5-1-3 0m.5 5a3.5 3.5 0 0 1-5 0" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('nature')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m16 5l3 3l-2 1l4 4l-3 1l4 4h-9m2 3v-3m-7-5l-2-2m2 1l2-2M8 21V8m-2.176 7.995a3 3 0 0 1-2.743-3.69a2.998 2.998 0 0 1 .304-4.833A3 3 0 0 1 8 3.765a3 3 0 0 1 4.614 3.707a2.997 2.997 0 0 1 .305 4.833A3 3 0 0 1 10 16H6z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('food')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('activities')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5H12z"
|
||||
/>
|
||||
<path d="m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('travel')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m14.5 6.5l3-2.9a2.05 2.05 0 0 1 2.9 2.9l-2.9 3L20 17l-2.5 2.55L14 13l-3 3v3l-2 2l-1.5-4.5L3 15l2-2h3l3-3l-6.5-3.5L7 4l7.5 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('objects')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M3 14c.83.642 2.077 1.017 3.5 1c1.423.017 2.67-.358 3.5-1c.83-.642 2.077-1.017 3.5-1c1.423-.017 2.67.358 3.5 1M8 3a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2m4-4a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2"
|
||||
/>
|
||||
<path d="M3 10h14v5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-5z" />
|
||||
<path d="M16.746 16.726a3 3 0 1 0 .252-5.555" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('symbols')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9"
|
||||
/>
|
||||
<path d="M12 7v5l3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 bg-inherit hover:backdrop-brightness-125 rounded-md transition-all"
|
||||
@click="scrollTo('flags')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[375px] max-h-[450px] overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker"
|
||||
id="emoji-pane">
|
||||
<div class="text-black flex flex-col category bg-[var(--primary-dark)]"
|
||||
v-for="category in categories">
|
||||
<h6 class="uppercase text-[var(--primary-text)] sticky top-0 bg-inherit z-10 py-1">{{
|
||||
category.name
|
||||
}}</h6>
|
||||
<div class="flex flex-wrap"
|
||||
:id="category.name">
|
||||
<button v-for="emoji in category.emojis"
|
||||
class="p-2 rounded bg-inherit hover:backdrop-brightness-[1.45] h-12 transition-all emoji"
|
||||
@click="$emit('pickedEmoji', emoji.short_name)"
|
||||
:aria-label='emoji.name.toLowerCase()'>
|
||||
<span :style="emojiStyles(emoji.short_name, 32)"
|
||||
draggable="false"
|
||||
class="w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="emoji-pane"
|
||||
class="overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker max-h-[450px]"
|
||||
>
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.name"
|
||||
class="text-black flex flex-col category bg-[var(--primary-dark)]"
|
||||
>
|
||||
<h6 class="uppercase text-[var(--primary-text)] sticky top-0 bg-inherit z-10 py-1">
|
||||
{{
|
||||
category.name
|
||||
}}
|
||||
</h6>
|
||||
<div
|
||||
:id="category.name"
|
||||
class="flex flex-wrap"
|
||||
>
|
||||
<button
|
||||
v-for="emoji in category.emojis"
|
||||
:key="emoji.name.toLowerCase()"
|
||||
:aria-label="emoji.name.toLowerCase()"
|
||||
class="p-2 rounded bg-inherit hover:backdrop-brightness-[1.45] h-12 transition-all emoji"
|
||||
@click="$emit('picked-emoji', emoji.short_names[0])"
|
||||
>
|
||||
<span
|
||||
:style="emojiStyles(emoji.short_names[0], 32)"
|
||||
draggable="false"
|
||||
class="w-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
80
components/InviteCard.vue
Normal file → Executable file
80
components/InviteCard.vue
Normal file → Executable file
@@ -1,54 +1,72 @@
|
||||
<template>
|
||||
<div class="w-6/12 bg-[var(--primary-500)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
|
||||
<p class="text-sm font-semibold text-zinc-100">You've been invited to join a
|
||||
server</p>
|
||||
<span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</span>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"></span>
|
||||
<span>{{ invite.server.participants.length }} Members</span>
|
||||
</div>
|
||||
<div class="flex w-full justify-end">
|
||||
<button @click="joinServer(invite)"
|
||||
class="font-semibold rounded px-4 py-2 transition-colors"
|
||||
:class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'">
|
||||
<span v-if="userInServer">
|
||||
Joined
|
||||
</span>
|
||||
<span v-else>
|
||||
Join
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-6/12 bg-[var(--primary-500)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
|
||||
<p class="text-sm font-semibold text-zinc-100">
|
||||
You've been invited to join a
|
||||
server
|
||||
</p>
|
||||
<span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</span>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex items-center mr-4">
|
||||
<span
|
||||
class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
|
||||
/>
|
||||
<span>{{ invite.server.participants.length }} Members</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
|
||||
/>
|
||||
<span>{{ invite.server.participants.filter((e: IUser) => e.online === true).length }} Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full justify-end">
|
||||
<button
|
||||
class="font-semibold rounded px-4 py-2 transition-colors"
|
||||
:class="(userInServer) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'"
|
||||
@click="joinServer(invite)"
|
||||
>
|
||||
<span v-if="userInServer">
|
||||
Joined
|
||||
</span>
|
||||
<span v-else>
|
||||
Join
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { IInviteCode, IUser } from '~/types'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IInviteCode, IUser } from '~/types';
|
||||
|
||||
export default {
|
||||
props: ['invite'],
|
||||
props: {
|
||||
invite: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: storeToRefs(useGlobalStore()).user,
|
||||
servers: storeToRefs(useGlobalStore()).servers,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userInServer(): boolean {
|
||||
return !!this.invite.server.participants.find((e: IUser) => e.id === this.user.id)
|
||||
return !!this.invite.server.participants.find((e: IUser) => e.id === this.user.id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async joinServer(invite: IInviteCode) {
|
||||
if (this.userInServer) return;
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const { server } = await $fetch('/api/guilds/joinGuild', { method: 'POST', body: { inviteId: invite.id }, headers })
|
||||
const { server } = await $fetch('/api/guilds/joinGuild', { method: 'POST', body: { inviteId: invite.id }, headers });
|
||||
if (!server) return;
|
||||
this.servers?.push(server)
|
||||
this.invite.server.participants.push(this.user)
|
||||
this.servers?.push(server);
|
||||
this.invite.server.participants.push(this.user);
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
323
components/Message.vue
Normal file → Executable file
323
components/Message.vue
Normal file → Executable file
@@ -1,119 +1,170 @@
|
||||
<template>
|
||||
<div class="relative message-wrapper"
|
||||
@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 :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="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"
|
||||
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>
|
||||
<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"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="5"
|
||||
cy="12"
|
||||
r="1" />
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="1" />
|
||||
<circle cx="19"
|
||||
cy="12"
|
||||
r="1" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="bg-[var(--primary-text)] rounded"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button v-if="message.creator.id === user.id"
|
||||
@click="deleteMessage()"
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center">
|
||||
<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="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
|
||||
:class="classes">
|
||||
<div class="message-content">
|
||||
<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"
|
||||
v-html="message.body"></p>
|
||||
</div>
|
||||
<div v-for="invite in message.invites">
|
||||
<InviteCard :invite="invite" />
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button @click="toggleReaction(reaction.emoji.name)"
|
||||
v-for="reaction in message.reactions"
|
||||
class="py-0.5 px-1.5 bg-[var(--primary-500)] border items-center flex rounded-lg border-[var(--primary-500)] hover:border-[var(--reaction-border)] hover:bg-[var(--reaction-hover)] 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-6 drop-shadow">
|
||||
<span :style="emojiStyles(reaction.emoji.name, 16)"></span>
|
||||
</div>
|
||||
<div class="relative overflow-hidden ml-1.5">
|
||||
<div class="min-w-[9px] h-6"
|
||||
:key="reaction.count">
|
||||
<span class="dropshadow-sm">{{ reaction.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative message-wrapper"
|
||||
@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
|
||||
: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
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
|
||||
@click="openEmojiPicker()"
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
v-if="!shiftPressed && !overflowShown"
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
|
||||
@click="overflowShown = true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="12"
|
||||
r="1"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="1"
|
||||
/>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="12"
|
||||
r="1"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="shiftPressed || overflowShown"
|
||||
class="flex"
|
||||
>
|
||||
<button
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"
|
||||
@click="copy(message.id)"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="bg-[var(--primary-text)] rounded"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
v-if="message.creator.id === user.id"
|
||||
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center"
|
||||
@click="deleteMessage()"
|
||||
>
|
||||
<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="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
|
||||
:class="classes"
|
||||
>
|
||||
<div class="message-content">
|
||||
<div class="message-sender-text">
|
||||
<p
|
||||
v-if="showUsername"
|
||||
class="mb-1 font-semibold w-fit"
|
||||
>
|
||||
{{ message.creator.username }}
|
||||
</p>
|
||||
<p
|
||||
class="break-words max-w-full"
|
||||
v-html="message.body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="invite in message.invites"
|
||||
:key="invite.id"
|
||||
>
|
||||
<InviteCard :invite="invite" />
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button
|
||||
v-for="reaction in message.reactions"
|
||||
:key="reaction.emoji"
|
||||
class="py-0.5 px-1.5 bg-[var(--primary-500)] border items-center flex rounded-lg border-[var(--primary-500)] hover:border-[var(--reaction-border)] hover:bg-[var(--reaction-hover)] 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)]' : ''"
|
||||
@click="toggleReaction(reaction.emoji)"
|
||||
>
|
||||
<div class="flex items-center mr-0.5 w-6 drop-shadow">
|
||||
<span :style="emojiStyles(reaction.emoji, 16)" />
|
||||
</div>
|
||||
<div class="relative overflow-hidden ml-1.5">
|
||||
<div
|
||||
:key="reaction.users.length"
|
||||
class="min-w-[9px] h-6"
|
||||
>
|
||||
<span class="dropshadow-sm">{{ reaction.users.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { IEmojiPickerData, IMessage } from '~/types';
|
||||
import { IPopupData, IMessage } from '~/types';
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import emojiJson from '~/assets/json/emoji.json';
|
||||
|
||||
export default {
|
||||
@@ -140,33 +191,26 @@ export default {
|
||||
user: storeToRefs(useGlobalStore()).user,
|
||||
emojiPickerOpen: false,
|
||||
overflowShown: false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const { text, copy, copied, isSupported } = useClipboard()
|
||||
|
||||
return {
|
||||
copy
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const { $listen } = useNuxtApp()
|
||||
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 (useGlobalStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
|
||||
const replacementEmoji = emojiJson.find((e) => e.short_names[0] === emoji);
|
||||
if (!replacementEmoji?.emoji) return;
|
||||
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
|
||||
this.toggleReaction(replacementEmoji.emoji)
|
||||
if (this.message.reactions?.find((e) => e.emoji === replacementEmoji.emoji)) return;
|
||||
this.toggleReaction(replacementEmoji.emoji);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async toggleReaction(emoji: string) {
|
||||
const route = useRoute()
|
||||
let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: "POST" }) as { message: IMessage }
|
||||
const route = useRoute();
|
||||
let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: 'POST' }) as { message: IMessage };
|
||||
|
||||
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)
|
||||
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
|
||||
|
||||
useGlobalStore().updateMessage(this.message.id, message)
|
||||
useGlobalStore().updateMessage(this.message.id, message);
|
||||
},
|
||||
openEmojiPicker() {
|
||||
const actionButtons = document.getElementById(`actions-${this.message.id}`);
|
||||
@@ -181,15 +225,15 @@ export default {
|
||||
top,
|
||||
right: actionButtons.clientWidth + 40,
|
||||
openedBy: {
|
||||
type: "message",
|
||||
type: 'message',
|
||||
messageId: this.message.id
|
||||
}
|
||||
} as IEmojiPickerData
|
||||
useGlobalStore().toggleEmojiPicker(payload)
|
||||
} as IPopupData;
|
||||
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)
|
||||
const emojis = emojiJson;
|
||||
const twemoji = emojis.find((e) => e.emoji === emoji);
|
||||
if (twemoji === undefined || twemoji.sheet_x === undefined || twemoji.sheet_y === undefined) {
|
||||
return {};
|
||||
}
|
||||
@@ -197,19 +241,22 @@ export default {
|
||||
const sheet_y = (twemoji.sheet_x * (32 + 2)) / 2;
|
||||
return {
|
||||
background: 'url(/32.png)',
|
||||
width: `${width + 1}px`,
|
||||
height: `${width + 1}px`,
|
||||
width: `${width}px`,
|
||||
height: `${width}px`,
|
||||
display: 'inline-block',
|
||||
'background-position': `-${sheet_y}px -${sheet_x}px`,
|
||||
'background-size': '1037px 1037px'
|
||||
}
|
||||
};
|
||||
},
|
||||
async deleteMessage() {
|
||||
const route = useRoute()
|
||||
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: "POST" })
|
||||
const route = useRoute();
|
||||
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: 'DELETE' });
|
||||
},
|
||||
copy(text: string) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
390
components/MessagePane.vue
Normal file → Executable file
390
components/MessagePane.vue
Normal file → Executable file
@@ -1,123 +1,173 @@
|
||||
<template>
|
||||
<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">
|
||||
<span class="mr-1">
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-zinc-100 font-semibold">{{ server.name }}</span>
|
||||
</div>
|
||||
<div v-else
|
||||
class="flex items-center">
|
||||
<span class="mr-1">
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="4" />
|
||||
<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-zinc-100 font-semibold">{{
|
||||
server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<span class="mr-1">
|
||||
<svg
|
||||
class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-zinc-100 font-semibold">{{ server.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center"
|
||||
>
|
||||
<span class="mr-1">
|
||||
<svg
|
||||
class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="4"
|
||||
/>
|
||||
<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-zinc-100 font-semibold">{{
|
||||
server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
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>
|
||||
<div v-if="server.messages.length === 0">
|
||||
<p>No messages yet</p>
|
||||
</div>
|
||||
<Message v-else
|
||||
v-for="(message, i) in server.messages"
|
||||
:message="message"
|
||||
:shiftPressed="shiftPressed"
|
||||
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
|
||||
:classes="calculateMessageClasses(message, i)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showSearch"
|
||||
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5">
|
||||
<div class="relative flex flex-col">
|
||||
<div v-for="user in searchResults"
|
||||
class="mx-2 my-1 w-[calc(100vw-88px-240px-64px-16px)] px-4 py-3 hover:backdrop-brightness-125 select-none rounded-md transition-all"
|
||||
@click="completeMention(user)">
|
||||
{{ user.username }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section
|
||||
class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]"
|
||||
>
|
||||
<div
|
||||
id="conversation-pane"
|
||||
class="h-full overflow-y-scroll"
|
||||
>
|
||||
<div class="w-full pb-1 bg-inherit">
|
||||
<div>
|
||||
<div v-if="server.messages.length === 0">
|
||||
<p>No messages yet</p>
|
||||
</div>
|
||||
<Message
|
||||
v-for="(message, i) in server.messages"
|
||||
v-else
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
:shift-pressed="shiftPressed"
|
||||
:show-username="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
|
||||
:classes="calculateMessageClasses(message, i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showSearch"
|
||||
class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5"
|
||||
>
|
||||
<div class="relative flex flex-col">
|
||||
<div
|
||||
v-for="resultingUser in searchResults"
|
||||
:key="resultingUser.id"
|
||||
class="mx-2 my-1 w-[calc(100vw-88px-240px-64px-16px)] px-4 py-3 hover:backdrop-brightness-125 select-none rounded-md transition-all"
|
||||
@click="completeMention(resultingUser)"
|
||||
>
|
||||
{{ resultingUser.username }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit mb-1">
|
||||
<form @keyup="checkForMentions"
|
||||
@keypress="typing($event)"
|
||||
@submit.prevent="sendMessage"
|
||||
@keydown.enter.exact.prevent="sendMessage"
|
||||
class="relative px-4 w-full pt-1.5 h-fit pb-1">
|
||||
<div id="textbox"
|
||||
class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--message-input-color)] placeholder:text-[var(--primary-placeholder)] flex flex-row">
|
||||
<textarea type="text"
|
||||
id="messageBox"
|
||||
class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]"
|
||||
cols="1"
|
||||
v-model="messageContent"
|
||||
placeholder="Send a Message..." />
|
||||
<input type="submit"
|
||||
class="absolute -top-full -left-full invisible"
|
||||
id="submit">
|
||||
<label for="submit"
|
||||
class="py-1 px-1.5 h-fit my-auto cursor-pointer"
|
||||
role="button"><svg width="32"
|
||||
height="26"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" />
|
||||
</svg></label>
|
||||
</div>
|
||||
<div class="w-full h-4">
|
||||
<p class="text-sm"
|
||||
v-if="usersTyping.length > 0">
|
||||
<span v-if="usersTyping.length < 4">
|
||||
<span v-for="(username, i) in usersTyping"
|
||||
class="font-semibold">
|
||||
<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span>
|
||||
{{ username }}
|
||||
<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span>
|
||||
</span>
|
||||
is typing
|
||||
</span>
|
||||
<span v-else>Several users are typing</span>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit mb-1">
|
||||
<form
|
||||
class="relative px-4 w-full pt-1.5 h-fit pb-1"
|
||||
@keyup="checkForMentions"
|
||||
@keypress="typing($event)"
|
||||
@submit.prevent="sendMessage"
|
||||
@keydown.enter.exact.prevent="sendMessage"
|
||||
>
|
||||
<div
|
||||
id="textbox"
|
||||
class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--message-input-color)] placeholder:text-[var(--primary-placeholder)] flex flex-row"
|
||||
>
|
||||
<textarea
|
||||
id="messageBox"
|
||||
v-model="messageContent"
|
||||
maxlength="5000"
|
||||
type="text"
|
||||
class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]"
|
||||
cols="1"
|
||||
placeholder="Send a Message..."
|
||||
/>
|
||||
<input
|
||||
id="submit"
|
||||
type="submit"
|
||||
class="absolute -top-full -left-full invisible"
|
||||
>
|
||||
<label
|
||||
for="submit"
|
||||
class="py-1 px-1.5 h-fit my-auto cursor-pointer"
|
||||
role="button"
|
||||
><svg
|
||||
width="32"
|
||||
height="26"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3"
|
||||
/>
|
||||
</svg></label>
|
||||
</div>
|
||||
<div class="w-full h-4">
|
||||
<p
|
||||
v-if="usersTyping.length > 0"
|
||||
class="text-sm"
|
||||
>
|
||||
<span v-if="usersTyping.length < 4">
|
||||
<span
|
||||
v-for="(username, i) in usersTyping"
|
||||
:key="username"
|
||||
class="font-semibold"
|
||||
>
|
||||
<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span>
|
||||
{{ username }}
|
||||
<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span>
|
||||
</span>
|
||||
is typing
|
||||
</span>
|
||||
<span v-else>Several users are typing</span>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -139,42 +189,42 @@ export default {
|
||||
showSearch: false,
|
||||
searchResults: [] as SafeUser[],
|
||||
search: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (!this.user) throw new Error('User not found, but sessionToken cookie is set')
|
||||
if (!this.user) throw new Error('User not found, but sessionToken cookie is set');
|
||||
|
||||
Notification.requestPermission().then((result) => {
|
||||
const permission = (result === 'granted') ? true : false
|
||||
this.canSendNotifications = permission
|
||||
const permission = (result === 'granted') ? true : false;
|
||||
this.canSendNotifications = permission;
|
||||
});
|
||||
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
if (!conversationDiv) throw new Error('conversation div not found')
|
||||
this.scrollToBottom()
|
||||
if (!conversationDiv) throw new Error('conversation div not found');
|
||||
this.scrollToBottom();
|
||||
|
||||
this.listenToWebsocket(conversationDiv)
|
||||
this.listenToWebsocket(conversationDiv);
|
||||
},
|
||||
methods: {
|
||||
async sendMessage() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
if (!this.messageContent) return;
|
||||
|
||||
let message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.server.id }, headers })
|
||||
let message: IMessage = await $fetch(`/api/channels/${this.server.id}/sendMessage`, { method: 'post', body: { body: this.messageContent }, headers });
|
||||
|
||||
if (!message) return;
|
||||
if (this.server.messages.includes(message)) return;
|
||||
|
||||
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)
|
||||
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
|
||||
|
||||
this.server.messages.push(message)
|
||||
this.server.messages.push(message);
|
||||
this.messageContent = '';
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
if (!conversationDiv) throw new Error('wtf');
|
||||
|
||||
setTimeout(() => {
|
||||
conversationDiv.scrollTop = conversationDiv.scrollHeight;
|
||||
})
|
||||
});
|
||||
},
|
||||
scrollToBottom() {
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
@@ -183,38 +233,38 @@ export default {
|
||||
},
|
||||
typing(event: KeyboardEvent) {
|
||||
const specialKeys = [
|
||||
"Backspace",
|
||||
"Enter",
|
||||
"Shift",
|
||||
"Control"
|
||||
]
|
||||
'Backspace',
|
||||
'Enter',
|
||||
'Shift',
|
||||
'Control'
|
||||
];
|
||||
if (specialKeys.indexOf(event.key) !== -1) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.ctrlKey) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
this.socket.emit(`typing`, this.server.id);
|
||||
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)
|
||||
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
|
||||
this.shiftPressed = true;
|
||||
}
|
||||
},
|
||||
keyUnpressed(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Shift') {
|
||||
this.shiftPressed = false
|
||||
this.shiftPressed = false;
|
||||
}
|
||||
},
|
||||
calculateMessageClasses(message: IMessage, i: number) {
|
||||
@@ -238,81 +288,81 @@ export default {
|
||||
const endPosition = input.selectionEnd;
|
||||
|
||||
if (startPosition === endPosition && this.inMention(startPosition)) {
|
||||
let participants
|
||||
let participants;
|
||||
if (this.server.DM) {
|
||||
participants = this.server.dmParticipants
|
||||
participants = this.server.dmParticipants;
|
||||
} else {
|
||||
participants = this.server.server.participants
|
||||
participants = this.server.server.participants;
|
||||
}
|
||||
|
||||
if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`)
|
||||
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
|
||||
if (!search) return;
|
||||
|
||||
this.search = search;
|
||||
if (this.search.length === 0) {
|
||||
this.showSearch = false
|
||||
this.showSearch = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6
|
||||
let results = participants.filter((e: SafeUser) => e.username.includes(this.search))
|
||||
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 usernameB = b.username.toLowerCase();
|
||||
|
||||
if (usernameA < usernameB) {
|
||||
return -1
|
||||
return -1;
|
||||
} else if (usernameA > usernameB) {
|
||||
return 1
|
||||
return 1;
|
||||
} else {
|
||||
return 0
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (results.length > maxResults) {
|
||||
results.length = maxResults
|
||||
results.length = maxResults;
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
this.showSearch = false;
|
||||
return;
|
||||
}
|
||||
this.searchResults = results
|
||||
this.searchResults = results;
|
||||
this.showSearch = true;
|
||||
} else {
|
||||
this.showSearch = false
|
||||
this.showSearch = false;
|
||||
}
|
||||
},
|
||||
inMention(cursorPos: number): boolean {
|
||||
if (this.messageContent[cursorPos - 1] === '@') return true;
|
||||
if (this.messageContent[cursorPos - 1] === ' ') return false;
|
||||
if (cursorPos === 0) return false;
|
||||
return this.inMention(cursorPos - 1)
|
||||
return this.inMention(cursorPos - 1);
|
||||
},
|
||||
completeMention(user: SafeUser) {
|
||||
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`)
|
||||
this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`);
|
||||
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, deleted?: boolean }) => {
|
||||
let { message, deleted } = ev
|
||||
let { message, deleted } = ev;
|
||||
|
||||
if (deleted) {
|
||||
useGlobalStore().removeMessage(message.id)
|
||||
useGlobalStore().removeMessage(message.id);
|
||||
return;
|
||||
}
|
||||
|
||||
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)
|
||||
message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
|
||||
|
||||
if (this.server.messages.find((e) => e.id === message.id)) {
|
||||
// message is already in the server, replace it with the updated message
|
||||
useGlobalStore().updateMessage(message.id, message)
|
||||
useGlobalStore().updateMessage(message.id, message);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -323,27 +373,27 @@ export default {
|
||||
new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: this.server.id.toString() });
|
||||
}
|
||||
|
||||
this.server.messages.push(message)
|
||||
this.server.messages.push(message);
|
||||
|
||||
const lastElementChild = conversationDiv.children[0]?.lastElementChild
|
||||
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)
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
this.usersTyping = this.usersTyping.filter(username => username !== ev)
|
||||
this.usersTyping = this.usersTyping.filter(username => username !== ev);
|
||||
}, 750);
|
||||
if (this.usersTyping.includes(ev)) return;
|
||||
this.usersTyping.push(ev);
|
||||
})
|
||||
});
|
||||
},
|
||||
// resizeTextarea() {
|
||||
// const textArea = document.getElementById('messageBox')
|
||||
@@ -357,5 +407,5 @@ export default {
|
||||
// console.log('a')
|
||||
// }
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
261
components/Nav.vue
Normal file → Executable file
261
components/Nav.vue
Normal file → Executable file
@@ -1,130 +1,177 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<nav
|
||||
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
|
||||
<div>
|
||||
<nuxt-link to="/channel/@me">
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300">
|
||||
<span>
|
||||
<svg width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="fire"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="24%"
|
||||
y2="48%">
|
||||
<stop offset="0%"
|
||||
stop-color="#ff0c41" />
|
||||
<stop offset="100%"
|
||||
stop-color="#ff6b0c" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="none"
|
||||
stroke="url(#fire)"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 12c2-2.96 0-7-1-8c0 3.038-1.773 4.741-3 6c-1.226 1.26-2 3.24-2 5a6 6 0 1 0 12 0c0-1.532-1.056-3.94-2-5c-1.786 3-2.791 3-4 2z" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5" />
|
||||
</div>
|
||||
<nuxt-link v-for="server in servers"
|
||||
:to="'/channel/' + server.channels[0]?.id">
|
||||
<button :key="server.id"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]">
|
||||
<svg width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 154">
|
||||
<defs>
|
||||
<linearGradient id="svgIDa"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="32%"
|
||||
y2="67.556%">
|
||||
<stop offset="0%"
|
||||
stop-color="#2298BD" />
|
||||
<stop offset="100%"
|
||||
stop-color="#0ED7B5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#svgIDa)"
|
||||
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="createServerModelOpen = true"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer">
|
||||
<svg width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m-7-7h14" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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-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>
|
||||
<div>
|
||||
<form @submit.prevent="createServer"
|
||||
class="w-3/5">
|
||||
<input v-model="serverName"
|
||||
type="text"
|
||||
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-[var(--message-input-color)] shadow-md" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black/70 w-screen h-screen"
|
||||
@click="createServerModelOpen = false">
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
|
||||
>
|
||||
<div>
|
||||
<nuxt-link to="/channel/@me">
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300"
|
||||
:class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="fire"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="24%"
|
||||
y2="48%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#ff0c41"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#ff6b0c"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="url(#fire)"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 12c2-2.96 0-7-1-8c0 3.038-1.773 4.741-3 6c-1.226 1.26-2 3.24-2 5a6 6 0 1 0 12 0c0-1.532-1.056-3.94-2-5c-1.786 3-2.791 3-4 2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
|
||||
</div>
|
||||
<nuxt-link
|
||||
v-for="server in servers"
|
||||
:key="server.id"
|
||||
:to="'/channel/' + server.channels[0]?.id"
|
||||
>
|
||||
<button
|
||||
:key="server.id"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
|
||||
:class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
|
||||
>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 154"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="svgIDa"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="32%"
|
||||
y2="67.556%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#2298BD"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#0ED7B5"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
fill="url(#svgIDa)"
|
||||
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"
|
||||
@click="createServerModelOpen = true"
|
||||
>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m-7-7h14"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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-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>
|
||||
<div>
|
||||
<form
|
||||
class="w-3/5"
|
||||
@submit.prevent="createServer"
|
||||
>
|
||||
<input
|
||||
v-model="serverName"
|
||||
type="text"
|
||||
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-[var(--message-input-color)] shadow-md"
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black/70 w-screen h-screen"
|
||||
@click="createServerModelOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IServer } from '~/types';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
servers: storeToRefs(useGlobalStore()).servers,
|
||||
serverType: storeToRefs(useGlobalStore()).activeServerType,
|
||||
activeServer: storeToRefs(useGlobalStore()).activeServer,
|
||||
createServerModelOpen: false,
|
||||
serverName: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async createServer() {
|
||||
const globalStore = useGlobalStore();
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers })
|
||||
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
|
||||
this.createServerModelOpen = false;
|
||||
this.serverName = '';
|
||||
globalStore.addServer(server)
|
||||
globalStore.addServer(server);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
25
components/Popup.vue
Executable file
25
components/Popup.vue
Executable file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="opened"
|
||||
class="z-10 bg-[var(--primary-dark)] w-fit rounded-md shadow-md p-3"
|
||||
>
|
||||
<div class="max-w-[350px] max-h-[450px] overflow-hidden">
|
||||
<EmojiPicker
|
||||
v-if="openedBy === 'emojiPicker'"
|
||||
@picked-emoji="$emit('picked-emoji', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
openedBy: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
opened: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
579
components/Sidebar.vue
Normal file → Executable file
579
components/Sidebar.vue
Normal file → Executable file
@@ -1,247 +1,328 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<aside class="bg-[var(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
|
||||
<div v-if="serverType === 'dms' || !server"
|
||||
class="h-full grid grid-rows-[48px_1fr] w-full">
|
||||
<section>
|
||||
<h4 @click="serverDropdownOpen = !serverDropdownOpen"
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all">
|
||||
<span>Direct messages</span>
|
||||
</h4>
|
||||
</section>
|
||||
<aside class="bg-[var(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
|
||||
<div
|
||||
v-if="serverType === 'dms' || !server"
|
||||
class="h-full grid grid-rows-[48px_1fr] w-full"
|
||||
>
|
||||
<section>
|
||||
<h4
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center p-1 bg-inherit transition-all"
|
||||
>
|
||||
<span>Direct messages</span>
|
||||
</h4>
|
||||
</section>
|
||||
|
||||
<div
|
||||
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">
|
||||
<div
|
||||
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all">
|
||||
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]">
|
||||
<section>
|
||||
<h4 @click="serverDropdownOpen = !serverDropdownOpen"
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg"
|
||||
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'">
|
||||
<span>{{ server.name }}</span>
|
||||
<button>
|
||||
<span v-if="!serverDropdownOpen"
|
||||
class="h-fit w-[20px]">
|
||||
<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="m6 9l6 6l6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="h-fit w-[20px]"
|
||||
v-else>
|
||||
<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="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div>
|
||||
<DropdownMenu :opened="serverDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
cy="7"
|
||||
r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
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"
|
||||
:key="dm.id"
|
||||
:to="'/channel/@me/' + dm.id"
|
||||
>
|
||||
<div
|
||||
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all"
|
||||
>
|
||||
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]"
|
||||
>
|
||||
<section>
|
||||
<h4
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg"
|
||||
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"
|
||||
@click="serverDropdownOpen = !serverDropdownOpen"
|
||||
>
|
||||
<span>{{ server.name }}</span>
|
||||
<button>
|
||||
<span
|
||||
v-if="!serverDropdownOpen"
|
||||
class="h-fit w-[20px]"
|
||||
>
|
||||
<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="m6 9l6 6l6-6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="h-fit w-[20px]"
|
||||
>
|
||||
<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="M18 6L6 18M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div>
|
||||
<DropdownMenu :opened="serverDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem
|
||||
v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite"
|
||||
>
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="h-fit">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="9"
|
||||
cy="7"
|
||||
r="4"
|
||||
/>
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div
|
||||
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"
|
||||
v-for="channel in server.channels"
|
||||
@click="openChannel(channel.id)"
|
||||
:key="channel.id">
|
||||
<span class="h-fit">
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>{{ channel.name }}</span>
|
||||
</button>
|
||||
<button v-if="userIsOwner || userIsAdmin"
|
||||
@click="openCreateChannelModel"
|
||||
class="flex text-center bg-inherit hover:backdrop-brightness-[1.45] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm cursor-pointer items-center">
|
||||
<span>
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
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="M12 5v14m-7-7h14" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Add channel</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
v-for="channel in server.channels"
|
||||
:key="channel.id"
|
||||
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"
|
||||
@click="openChannel(channel.id)"
|
||||
>
|
||||
<span class="h-fit">
|
||||
<svg
|
||||
class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>{{ channel.name }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="userIsOwner || userIsAdmin"
|
||||
class="flex text-center bg-inherit hover:backdrop-brightness-[1.45] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm cursor-pointer items-center"
|
||||
@click="openCreateChannelModel"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
class="text-zinc-300/80 my-auto"
|
||||
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="M12 5v14m-7-7h14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Add channel</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative bottom-0">
|
||||
<DropdownMenu class="bottom-full"
|
||||
:inverted="true"
|
||||
:opened="userDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
cy="7"
|
||||
r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="logout"
|
||||
danger="true">
|
||||
<span>
|
||||
Logout
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
|
||||
<path d="M7 12h14l-3-3m0 6l3-3" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
<div class="h-full p-3">
|
||||
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
|
||||
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span>
|
||||
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
|
||||
<button @click="userDropdownOpen = !userDropdownOpen"
|
||||
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z" />
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="relative bottom-0">
|
||||
<DropdownMenu
|
||||
class="bottom-full"
|
||||
:inverted="true"
|
||||
:opened="userDropdownOpen"
|
||||
>
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem
|
||||
v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite"
|
||||
>
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="9"
|
||||
cy="7"
|
||||
r="4"
|
||||
/>
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
danger="true"
|
||||
@click="logout"
|
||||
>
|
||||
<span>
|
||||
Logout
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2"
|
||||
/>
|
||||
<path d="M7 12h14l-3-3m0 6l3-3" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
<div class="h-full p-3">
|
||||
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
|
||||
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full" />
|
||||
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
|
||||
<button
|
||||
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"
|
||||
@click="userDropdownOpen = !userDropdownOpen"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div v-if="createChannelModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0">
|
||||
<div class="bg-black/70 w-screen h-screen"
|
||||
@click="createChannelModelOpen = false">
|
||||
</div>
|
||||
<div
|
||||
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>
|
||||
<div>
|
||||
<form @submit.prevent="createChannel"
|
||||
class="w-3/5">
|
||||
<input v-model="channelName"
|
||||
type="text"
|
||||
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-[var(--message-input-color)] shadow-md" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="createChannelModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0"
|
||||
>
|
||||
<div
|
||||
class="bg-black/70 w-screen h-screen"
|
||||
@click="createChannelModelOpen = false"
|
||||
/>
|
||||
<div
|
||||
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>
|
||||
<div>
|
||||
<form
|
||||
class="w-3/5"
|
||||
@submit.prevent="createChannel"
|
||||
>
|
||||
<input
|
||||
v-model="channelName"
|
||||
type="text"
|
||||
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-[var(--message-input-color)] shadow-md"
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -259,14 +340,14 @@ export default {
|
||||
serverDropdownOpen: false,
|
||||
userDropdownOpen: false,
|
||||
channelName: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userIsOwner() {
|
||||
return this.server && this.serverType === "servers" && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner
|
||||
return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner;
|
||||
},
|
||||
userIsAdmin() {
|
||||
return this.server && this.serverType === "servers" && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer
|
||||
return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -275,7 +356,7 @@ export default {
|
||||
},
|
||||
async createChannel() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel
|
||||
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
|
||||
|
||||
if (!channel) return;
|
||||
|
||||
@@ -283,22 +364,22 @@ export default {
|
||||
this.createChannelModelOpen = false;
|
||||
},
|
||||
openChannel(id: string) {
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
router.push({ params: { id } })
|
||||
router.push({ params: { id } });
|
||||
},
|
||||
async createInvite() {
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>
|
||||
const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers })
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers });
|
||||
},
|
||||
async logout() {
|
||||
await $fetch(`/api/user/logout`)
|
||||
await $fetch('/api/user/logout');
|
||||
useCookie('sessionToken').value = null;
|
||||
useCookie('userId').value = null;
|
||||
|
||||
useGlobalStore().logout();
|
||||
navigateTo('/login')
|
||||
navigateTo('/login');
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
16
components/UserProfile.vue
Executable file
16
components/UserProfile.vue
Executable file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IUser } from '~/types';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
user: {
|
||||
type: IUser,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user