Merge branch 'main' into password-reset
This commit is contained in:
commit
52af245fdf
33 changed files with 373 additions and 195 deletions
5
app.vue
5
app.vue
|
|
@ -6,9 +6,6 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
|
||||
import { render } from 'vue';
|
||||
|
||||
const banner = useState("banner", () => false);
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -65,7 +62,7 @@ useHead({
|
|||
<style>
|
||||
html,
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
|
||||
box-sizing: border-box;
|
||||
color: var(--text-color);
|
||||
background: var(--optional-body-background);
|
||||
|
|
|
|||
44
components/Avatar.vue
Normal file
44
components/Avatar.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<NuxtImg v-if="displayAvatar"
|
||||
class="display-avatar"
|
||||
:src="displayAvatar"
|
||||
:alt="displayName" />
|
||||
<Icon v-else
|
||||
name="lucide:user"
|
||||
:alt="displayName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NuxtImg } from '#components';
|
||||
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<{
|
||||
user?: UserResponse,
|
||||
member?: GuildMemberResponse,
|
||||
}>();
|
||||
|
||||
|
||||
let displayName: string
|
||||
let displayAvatar: string | null
|
||||
|
||||
const user = props.user || props.member?.user
|
||||
|
||||
if (user) {
|
||||
displayName = getDisplayName(user, props.member)
|
||||
|
||||
if (user.avatar) {
|
||||
displayAvatar = user.avatar
|
||||
} else if (!isCanvasBlocked()){
|
||||
displayAvatar = generateDefaultIcon(displayName, user.uuid)
|
||||
} else {
|
||||
displayAvatar = null
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.display-avatar {
|
||||
border-radius: var(--pfp-radius);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
|
||||
<img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
|
||||
<Icon v-else class="member-avatar" name="lucide:user" />
|
||||
<span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
|
||||
<Avatar :member="props.member" class="member-avatar"/>
|
||||
<span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
|
||||
<UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -6,14 +6,14 @@
|
|||
</div>
|
||||
<VerticalSpacer />
|
||||
|
||||
<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
|
||||
<NuxtLink class="user-item" :href="`/me`" tabindex="0">
|
||||
<Icon class="user-avatar" name="lucide:user" />
|
||||
<span class="user-display-name">Friends</span>
|
||||
</NuxtLink>
|
||||
<VerticalSpacer />
|
||||
|
||||
<div id="direct-message-list">
|
||||
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
|
||||
<UserEntry v-for="user of friends" :user="user"
|
||||
:href="`/me/${user.uuid}`"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
|
||||
<div v-else>
|
||||
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
|
||||
<UserEntry v-for="user of friends" :user="user" :name="getDisplayName(user)"
|
||||
:href="`/me/${user.uuid}`"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +26,9 @@
|
|||
<script lang="ts" setup>
|
||||
const { fetchFriends } = useApi();
|
||||
|
||||
const friends = await fetchFriends()
|
||||
const friends = await fetchFriends().then((response) => {
|
||||
return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
variant: string
|
||||
|
|
|
|||
|
|
@ -4,22 +4,14 @@
|
|||
:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
|
||||
<div v-if="props.replyMessage" class="message-reply-svg">
|
||||
<svg
|
||||
width="1.5em"
|
||||
height="1.5em"
|
||||
viewBox="0 0 151.14355 87.562065"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
width="1.5em" height="1.5em"
|
||||
viewBox="0 0 150 87.5" version="1.1" id="svg1"
|
||||
style="overflow: visible;">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
<defs id="defs1" />
|
||||
<g id="layer1"
|
||||
transform="translate(40,-35)">
|
||||
<g
|
||||
id="g3"
|
||||
transform="translate(-35,-20)">
|
||||
<g id="g3"
|
||||
transform="translate(-35,-20)">
|
||||
<path
|
||||
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
|
||||
d="m 120.02168,87.850978 100.76157,2.4e-5"
|
||||
|
|
@ -32,16 +24,17 @@
|
|||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
|
||||
:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
|
||||
<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
|
||||
:author="getDisplayName(props.replyMessage.user)"
|
||||
:text="props.replyMessage?.message"
|
||||
:reply-id="props.replyMessage.uuid" max-width="reply" />
|
||||
<div class="left-column">
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
|
||||
<Icon v-else name="lucide:user" class="message-author-avatar" />
|
||||
<Avatar :user="props.author" class="message-author-avatar"/>
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-metadata">
|
||||
<span class="message-author-username" tabindex="0">
|
||||
{{ author?.display_name || author?.username }}
|
||||
<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
|
||||
{{ getDisplayName(props.author) }}
|
||||
</span>
|
||||
<span class="message-date" :title="date.toString()">
|
||||
<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
|
||||
|
|
@ -228,7 +221,6 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
.message-author-avatar {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div id="message-area">
|
||||
<div id="messages" ref="messagesElement">
|
||||
<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
|
||||
<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
|
||||
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
|
||||
:format="timeFormat" :type="messagesType[message.uuid]"
|
||||
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
|
||||
:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
|
||||
:message="message" :is-reply="message.reply_to"
|
||||
:author-color="`${generateIrcColor(message.user.uuid)}`"
|
||||
:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
|
||||
</div>
|
||||
<div id="message-box" class="rounded-corners">
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
|
||||
import scrollToBottom from '~/utils/scrollToBottom';
|
||||
import { generateIrcColor } from '#imports';
|
||||
|
||||
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
|
||||
|
||||
|
|
|
|||
11
components/Settings/AppSettings/index.ts
Normal file
11
components/Settings/AppSettings/index.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import Appearance from './Appearance.vue';
|
||||
import Notifications from './Notifications.vue';
|
||||
import Keybinds from './Keybinds.vue';
|
||||
import Language from './Language.vue';
|
||||
|
||||
export {
|
||||
Appearance,
|
||||
Notifications,
|
||||
Keybinds,
|
||||
Language,
|
||||
}
|
||||
13
components/Settings/UserSettings/index.ts
Normal file
13
components/Settings/UserSettings/index.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Profile from './Profile.vue';
|
||||
import Account from './Account.vue';
|
||||
import Privacy from './Privacy.vue';
|
||||
import Devices from './Devices.vue';
|
||||
import Connections from './Connections.vue';
|
||||
|
||||
export {
|
||||
Profile,
|
||||
Account,
|
||||
Privacy,
|
||||
Devices,
|
||||
Connections,
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
|
||||
<img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
|
||||
<Icon v-else class="user-avatar" name="lucide:user" />
|
||||
<span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
|
||||
<Avatar :user="props.user" class="user-avatar"/>
|
||||
|
||||
<span class="user-display-name">{{ getDisplayName(props.user) }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
|
|
@ -12,6 +12,7 @@ import type { UserResponse } from '~/types/interfaces';
|
|||
const props = defineProps<{
|
||||
user: UserResponse
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -35,6 +36,5 @@ const props = defineProps<{
|
|||
.user-avatar {
|
||||
width: 2.3em;
|
||||
height: 2.3em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<div id="profile-popup">
|
||||
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
|
||||
<Icon v-else id="avatar" name="lucide:user" />
|
||||
<Avatar :user="props.user" id="avatar"/>
|
||||
|
||||
<div id="cover-color"></div>
|
||||
<div id="main-body">
|
||||
<p id="display-name">
|
||||
<strong>{{ props.user.display_name }}</strong>
|
||||
<strong>{{ getDisplayName(props.user) }}</strong>
|
||||
</p>
|
||||
<p id="username-and-pronouns">
|
||||
{{ props.user.username }}
|
||||
|
|
|
|||
|
|
@ -33,8 +33,13 @@ export const useApi = () => {
|
|||
return await fetchWithApi(`/users/${userId}`);
|
||||
}
|
||||
|
||||
async function fetchFriends(): Promise<UserResponse[] | undefined> {
|
||||
return await fetchWithApi('/me/friends')
|
||||
async function fetchFriends(): Promise<UserResponse[]> {
|
||||
const response = await fetchWithApi('/me/friends')
|
||||
if (Array.isArray(response)) {
|
||||
return response
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
async function addFriend(username: string): Promise<void> {
|
||||
|
|
|
|||
|
|
@ -8,27 +8,39 @@
|
|||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
<div id = "page-content">
|
||||
<div id="page-content">
|
||||
<div id="left-column">
|
||||
<div id="left-column-top">
|
||||
<div class="left-column-segment">
|
||||
<NuxtLink id="home-button" href="/me">
|
||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||
</NuxtLink>
|
||||
<div id="servers-list">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
|
||||
<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
|
||||
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-column-bottom">
|
||||
<VerticalSpacer />
|
||||
<div class="left-column-segment" id="left-column-middle">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
|
||||
<NuxtImg v-if="guild.icon"
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name"
|
||||
:src="guild.icon" />
|
||||
<NuxtImg v-else-if="!blockedCanvas"
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name"
|
||||
:src="generateDefaultIcon(guild.name, guild.uuid)" />
|
||||
<Icon v-else name="lucide:server"
|
||||
:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<VerticalSpacer />
|
||||
<div class="left-column-segment">
|
||||
<div ref="createButtonContainer">
|
||||
<button id="create-button" @click.prevent="createDropdown">
|
||||
<Icon id="create-icon" name="lucide:square-plus" />
|
||||
<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
|
||||
<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
|
||||
</button>
|
||||
</div>
|
||||
<NuxtLink id="settings-menu" href="/settings">
|
||||
<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
|
||||
<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
|
||||
<Icon name="lucide:settings" alt="Settings menu" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,6 +54,7 @@ import { ModalBase } from '#components';
|
|||
import { render } from 'vue';
|
||||
import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
|
||||
import type { GuildResponse } from '~/types/interfaces';
|
||||
|
||||
const loading = useState("loading", () => false);
|
||||
|
|
@ -50,6 +63,8 @@ const createButtonContainer = ref<HTMLButtonElement>();
|
|||
|
||||
const api = useApi();
|
||||
|
||||
const blockedCanvas = isCanvasBlocked()
|
||||
|
||||
const options = [
|
||||
{ name: "Join", value: "join", callback: async () => {
|
||||
console.log("join guild!");
|
||||
|
|
@ -112,7 +127,7 @@ const options = [
|
|||
h("input", {
|
||||
id: "guild-name-input",
|
||||
type: "text",
|
||||
placeholder: `${user?.display_name || user?.username}'s Awesome Bouncy Castle'`,
|
||||
placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
|
||||
style: "width: 100%"
|
||||
}),
|
||||
h(Button, {
|
||||
|
|
@ -202,67 +217,30 @@ function createDropdown() {
|
|||
#left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .75em;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
|
||||
padding-left: var(--sidebar-margin);
|
||||
padding-right: var(--sidebar-margin);
|
||||
padding-top: .5em;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
|
||||
background: var(--optional-sidebar-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
}
|
||||
|
||||
#left-column-top, #left-column-bottom {
|
||||
.left-column-segment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5dvh;
|
||||
overflow-y: scroll;
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#left-column-top::-webkit-scrollbar, #left-column-bottom::-webkit-scrollbar {
|
||||
.left-column-segment::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#left-column-bottom {
|
||||
padding-top: 1dvh;
|
||||
border-top: 1px solid var(--padding-color);
|
||||
}
|
||||
|
||||
#middle-left-column {
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
}
|
||||
|
||||
#home-button {
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-bottom: 1dvh;
|
||||
}
|
||||
|
||||
#servers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
width: 3.2rem;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
#create-button {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#create-icon {
|
||||
float: left;
|
||||
#left-column-middle {
|
||||
overflow-y: scroll;
|
||||
flex-grow: 1;
|
||||
gap: var(--sidebar-icon-gap);
|
||||
}
|
||||
|
||||
#middle-left-column {
|
||||
|
|
@ -275,24 +253,31 @@ function createDropdown() {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#home-button {
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-bottom: .375em;
|
||||
height: var(--sidebar-icon-width);
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
color: var(--primary-color)
|
||||
.guild-icon {
|
||||
border-radius: var(--guild-icon-radius);
|
||||
}
|
||||
|
||||
#settings-menu:hover {
|
||||
color: var(--primary-highlighted-color)
|
||||
.sidebar-icon {
|
||||
width: var(--sidebar-icon-width);
|
||||
height: var(--sidebar-icon-width);
|
||||
}
|
||||
|
||||
.sidebar-bottom-buttons {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 2.4rem;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-bottom-buttons:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"typescript": "^5.8.3",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
"vue-router": "^4.5.1",
|
||||
"xxhash-wasm": "^1.1.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.11.0",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
|
|
@ -22,8 +22,6 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { StatsResponse } from '~/types/interfaces';
|
||||
|
||||
|
||||
definePageMeta({
|
||||
layout: "auth"
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<NuxtLayout name="client">
|
||||
<DirectMessagesSidebar />
|
||||
<div :id="$style['page-content']">
|
||||
<div :id="$style['navigation-bar']">
|
||||
<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
|
||||
<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
|
||||
<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
|
||||
<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<AddFriend v-if="filter == 'add'"></AddFriend>
|
||||
<FriendsList v-else :variant="filter"></FriendsList>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import AddFriend from '~/components/Me/AddFriend.vue';
|
||||
import FriendsList from '~/components/Me/FriendsList.vue';
|
||||
|
||||
const { fetchFriends } = useApi();
|
||||
|
||||
let filter = ref("all");
|
||||
|
||||
const friends = await fetchFriends()
|
||||
|
||||
function updateFilter(newFilter: string) {
|
||||
filter.value = newFilter;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
#page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
margin: .75em;
|
||||
}
|
||||
|
||||
#navigation-bar {
|
||||
display: flex;
|
||||
align-items: left;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
|
||||
gap: .5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,56 @@
|
|||
<template>
|
||||
<NuxtLayout name="client">
|
||||
<DirectMessagesSidebar />
|
||||
<div :id="$style['page-content']">
|
||||
<div :id="$style['navigation-bar']">
|
||||
<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
|
||||
<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
|
||||
<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
|
||||
<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<AddFriend v-if="filter == 'add'"></AddFriend>
|
||||
<FriendsList v-else :variant="filter"></FriendsList>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import AddFriend from '~/components/Me/AddFriend.vue';
|
||||
import FriendsList from '~/components/Me/FriendsList.vue';
|
||||
|
||||
const { fetchFriends } = useApi();
|
||||
|
||||
let filter = ref("all");
|
||||
|
||||
const friends = await fetchFriends()
|
||||
|
||||
function updateFilter(newFilter: string) {
|
||||
filter.value = newFilter;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style module>
|
||||
#page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
margin: .75em;
|
||||
}
|
||||
|
||||
#navigation-bar {
|
||||
display: flex;
|
||||
align-items: left;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
|
||||
gap: .5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<script lang="ts" setup>
|
||||
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
|
||||
import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
|
||||
import MemberEntry from "~/components/Member/MemberEntry.vue";
|
||||
import MemberEntry from "~/components/Guild/MemberEntry.vue";
|
||||
import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
|
||||
|
||||
const route = useRoute();
|
||||
|
|
|
|||
|
|
@ -46,9 +46,13 @@
|
|||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Profile, Account, Privacy, Devices, Connections } from '~/components/Settings/UserSettings';
|
||||
import { Appearance, Notifications, Keybinds, Language } from '~/components/Settings/AppSettings';
|
||||
|
||||
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
|
||||
|
||||
const { logout } = useAuth()
|
||||
const appConfig = useRuntimeConfig()
|
||||
|
||||
|
|
@ -62,17 +66,6 @@ interface Category {
|
|||
pages: Page[];
|
||||
}
|
||||
|
||||
import Profile from '~/components/Settings/UserSettings/Profile.vue';
|
||||
import Account from '~/components/Settings/UserSettings/Account.vue';
|
||||
import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
|
||||
import Devices from '~/components/Settings/UserSettings/Devices.vue';
|
||||
import Connections from '~/components/Settings/UserSettings/Connections.vue';
|
||||
|
||||
import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
|
||||
import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
|
||||
import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
|
||||
import Language from '~/components/Settings/AppSettings/Language.vue';
|
||||
|
||||
const settingsCategories = {
|
||||
userSettings: {
|
||||
displayName: "User Settings",
|
||||
|
|
|
|||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
|
|
@ -47,6 +47,9 @@ importers:
|
|||
vue-router:
|
||||
specifier: ^4.5.1
|
||||
version: 4.5.1(vue@3.5.13(typescript@5.8.3))
|
||||
xxhash-wasm:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
devDependencies:
|
||||
'@iconify-json/lucide':
|
||||
specifier: ^1.2.44
|
||||
|
|
@ -4744,6 +4747,9 @@ packages:
|
|||
engines: {node: '>= 0.10.0'}
|
||||
hasBin: true
|
||||
|
||||
xxhash-wasm@1.1.0:
|
||||
resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
|
||||
|
||||
y18n@5.0.8:
|
||||
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -10146,6 +10152,8 @@ snapshots:
|
|||
cssfilter: 0.0.10
|
||||
optional: true
|
||||
|
||||
xxhash-wasm@1.1.0: {}
|
||||
|
||||
y18n@5.0.8: {}
|
||||
|
||||
yallist@3.1.1: {}
|
||||
|
|
|
|||
|
|
@ -18,4 +18,11 @@
|
|||
--secondary-highlighted-color: #885830;
|
||||
--accent-color: #a04b24;
|
||||
--accent-highlighted-color: #b86038;
|
||||
|
||||
--sidebar-width: 2.5em;
|
||||
--standard-radius: .5em;
|
||||
--button-radius: .6em;
|
||||
--guild-icon-radius: 20%;
|
||||
--pfp-radius: 50%;
|
||||
--preferred-font: Arial;
|
||||
}
|
||||
|
|
@ -18,4 +18,14 @@
|
|||
--secondary-highlighted-color: #8f5b2c;
|
||||
--accent-color: #b35719;
|
||||
--accent-highlighted-color: #c76a2e;
|
||||
|
||||
--sidebar-icon-width: 2.5em;
|
||||
--sidebar-icon-gap: .25em;
|
||||
--sidebar-margin: .5em;
|
||||
|
||||
--standard-radius: .5em;
|
||||
--button-radius: .6em;
|
||||
--guild-icon-radius: 15%;
|
||||
--pfp-radius: 50%;
|
||||
--preferred-font: Arial;
|
||||
}
|
||||
|
|
@ -20,6 +20,12 @@
|
|||
--accent-color: #ff218c80;
|
||||
--accent-highlighted-color: #df1b6f80;
|
||||
|
||||
--sidebar-width: 2.5em;
|
||||
--standard-radius: .5em;
|
||||
--button-radius: .6em;
|
||||
--pfp-radius: 50%;
|
||||
--preferred-font: Arial;
|
||||
|
||||
--optional-body-background: ; /* background element for the body */
|
||||
--optional-chat-background: ; /* background element for the chat box */
|
||||
--optional-topbar-background: ; /* background element for the topbar */
|
||||
|
|
|
|||
|
|
@ -18,4 +18,10 @@
|
|||
--secondary-highlighted-color: #f8b68a;
|
||||
--accent-color: #e68b4e;
|
||||
--accent-highlighted-color: #f69254;
|
||||
|
||||
--sidebar-width: 2.5em;
|
||||
--standard-radius: .5em;
|
||||
--button-radius: .6em;
|
||||
--pfp-radius: 50%;
|
||||
--preferred-font: Arial;
|
||||
}
|
||||
|
|
@ -19,6 +19,12 @@
|
|||
--accent-color: #ff218c80;
|
||||
--accent-highlighted-color: #df1b6f80;
|
||||
|
||||
--sidebar-width: 2.5em;
|
||||
--standard-radius: .5em;
|
||||
--button-radius: .6em;
|
||||
--pfp-radius: 50%;
|
||||
--preferred-font: Arial;
|
||||
|
||||
/* --optional-body-background: background */
|
||||
--optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
|
||||
--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import type { RuntimeNuxtHooks } from 'nuxt/schema';
|
||||
|
||||
declare module "nuxt/schema" {
|
||||
interface RuntimeNuxtHooks {
|
||||
"app:message:right-clicked": (payload: { messageId: string }) => void
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import type { MessageResponse, UserResponse } from "./interfaces";
|
|||
export interface MessageProps {
|
||||
class?: string,
|
||||
img?: string | null,
|
||||
author?: UserResponse
|
||||
author: UserResponse
|
||||
text: string,
|
||||
timestamp: number,
|
||||
format: "12" | "24",
|
||||
type: "normal" | "grouped",
|
||||
marginBottom: boolean,
|
||||
authorColor: string,
|
||||
last: boolean,
|
||||
messageId: string,
|
||||
replyingTo?: boolean,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { NitroFetchRequest, NitroFetchOptions } from "nitropack";
|
||||
import type { NitroFetchOptions } from "nitropack";
|
||||
|
||||
export default async <T>(path: string, options: NitroFetchOptions<string> = {}) => {
|
||||
console.log("path received:", path);
|
||||
|
|
|
|||
38
utils/generateDefaultIcon.ts
Normal file
38
utils/generateDefaultIcon.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
export default (name: string, seed: string): string => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (canvas && ctx) {
|
||||
canvas.width = 256;
|
||||
canvas.height = 256;
|
||||
|
||||
// get the first char from every word in the guild name
|
||||
let previewName = "";
|
||||
if (name.length > 3) {
|
||||
let guildName: string[] = name.split(' ')
|
||||
for (let i = 0; i < 3; i ++) {
|
||||
if (guildName.length > i) {
|
||||
previewName += guildName[i].charAt(0)
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
previewName = name
|
||||
}
|
||||
|
||||
// fill background using seeded colour
|
||||
ctx.fillStyle = generateIrcColor(seed, 50)
|
||||
ctx.fillRect(0, 0, 256, 256)
|
||||
|
||||
ctx.fillStyle = 'white'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.font = `bold 96px Arial, Helvetica, sans-serif`
|
||||
// 136 isn't actually centered, but it *looks* centered
|
||||
ctx.fillText(previewName, 128, 136)
|
||||
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
|
||||
return "https://tenor.com/view/dame-da-ne-guy-kiryukazuma-kiryu-yakuza-yakuza-0-gif-14355451116903905918"
|
||||
}
|
||||
13
utils/generateIrcColor.ts
Normal file
13
utils/generateIrcColor.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import xxhash from "xxhash-wasm"
|
||||
|
||||
let h64: CallableFunction;
|
||||
(async () => {
|
||||
h64 = (await xxhash()).h64;
|
||||
})();
|
||||
|
||||
export default (seed: string, saturation: number = 100, lightness: number = 50): string => {
|
||||
const idHash = useState(`h64Hash-${seed}`, () => h64(seed))
|
||||
const hashValue: bigint = idHash.value
|
||||
|
||||
return `hsl(${hashValue % 360n}, ${saturation}%, ${lightness}%)`
|
||||
}
|
||||
7
utils/getDisplayName.ts
Normal file
7
utils/getDisplayName.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
|
||||
|
||||
export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
|
||||
if (member?.nickname) return member.nickname
|
||||
if (user.display_name) return user.display_name
|
||||
return user.username
|
||||
}
|
||||
50
utils/isCanvasBlocked.ts
Normal file
50
utils/isCanvasBlocked.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
//
|
||||
// Canvas Blocker &
|
||||
// Firefox privacy.resistFingerprinting Detector.
|
||||
// (c) 2018 // JOHN OZBAY // CRYPT.EE
|
||||
// MIT License
|
||||
//
|
||||
export default () => {
|
||||
// create a 1px image data
|
||||
var blocked = false;
|
||||
var canvas = document.createElement("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
// some blockers just return an undefined ctx. So let's check that first.
|
||||
if (ctx) {
|
||||
var imageData = ctx.createImageData(1,1);
|
||||
var originalImageData = imageData.data;
|
||||
|
||||
// set pixels to RGB 128
|
||||
originalImageData[0]=128;
|
||||
originalImageData[1]=128;
|
||||
originalImageData[2]=128;
|
||||
originalImageData[3]=255;
|
||||
|
||||
// set this to canvas
|
||||
ctx.putImageData(imageData,1,1);
|
||||
|
||||
try {
|
||||
// now get the data back from canvas.
|
||||
var checkData = ctx.getImageData(1, 1, 1, 1).data;
|
||||
|
||||
// If this is firefox, and privacy.resistFingerprinting is enabled,
|
||||
// OR a browser extension blocking the canvas,
|
||||
// This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
|
||||
|
||||
// so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
|
||||
if (originalImageData[0] !== checkData[0] && originalImageData[1] !== checkData[1]) {
|
||||
blocked = true;
|
||||
console.log("Canvas is blocked. Will display warning.");
|
||||
}
|
||||
} catch (error) {
|
||||
// some extensions will return getImageData null. this is to account for that.
|
||||
blocked = true;
|
||||
console.log("Canvas is blocked. Will display warning.");
|
||||
}
|
||||
} else {
|
||||
blocked = true;
|
||||
console.log("Canvas is blocked. Will display warning.");
|
||||
}
|
||||
return blocked;
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
|
|||
const messageBox = document.getElementById("message-box") as HTMLDivElement;
|
||||
if (messageBox) {
|
||||
const div = document.createElement("div");
|
||||
const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
|
||||
const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
|
||||
messageBox.prepend(div);
|
||||
render(messageReply, div);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue