diff --git a/classes/Message.ts b/classes/Message.ts index a782d6a..de0d12b 100644 --- a/classes/Message.ts +++ b/classes/Message.ts @@ -12,4 +12,8 @@ export default class Message { this.userUuid = user_uuid; this.message = message; } + + getTimestamp() { + return uuidToTimestamp(this.uuid); + } } \ No newline at end of file diff --git a/components/Guild/ChannelNavbar.vue b/components/Guild/ChannelNavbar.vue new file mode 100644 index 0000000..c490d73 --- /dev/null +++ b/components/Guild/ChannelNavbar.vue @@ -0,0 +1,85 @@ + + + + + \ No newline at end of file diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue new file mode 100644 index 0000000..50c376e --- /dev/null +++ b/components/Guild/GuildSidebar.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue index baf0e67..1c7b843 100644 --- a/components/Guild/MemberEntry.vue +++ b/components/Guild/MemberEntry.vue @@ -32,7 +32,13 @@ function hideModalPopup() { diff --git a/components/Guild/MemberList.vue b/components/Guild/MemberList.vue new file mode 100644 index 0000000..9b4fa19 --- /dev/null +++ b/components/Guild/MemberList.vue @@ -0,0 +1,47 @@ + + + + + \ No newline at end of file diff --git a/components/Message.vue b/components/Message.vue index c6207a1..c926616 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -1,22 +1,24 @@ @@ -69,37 +71,33 @@ import MessageReply from './UserInterface/MessageReply.vue'; import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces'; const { getDisplayName } = useProfile() -const { getUser } = useAuth() const props = defineProps(); -const me = await getUser() - const contextMenu = useState("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] })); const messageElement = ref(); const dateHidden = ref(true); -const date = uuidToDate(props.message.uuid); - +const date = new Date(props.timestamp); const currentDate: Date = new Date() console.log("[MSG] message to render:", props.message); -console.log("author:", props.message.member); +console.log("author:", props.author); console.log("[MSG] reply message:", props.replyMessage); const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g; const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]); -const mediaLinks = ref([]); +const mediaLinks: string[] = []; console.log("link matches:", linkMatches); -const hideText = ref(false); +const hasEmbed = ref(false); const sanitized = ref(); onMounted(async () => { - const parsed = await parse(props.message.message, { gfm: true }); + const parsed = await parse(props.text, { gfm: true }); sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: [ "strong", "em", "br", "blockquote", @@ -123,35 +121,23 @@ onMounted(async () => { console.log("added listeners"); } - const links: string[] = []; for (const link of linkMatches) { - console.log("link:", link); - try { - const res = await $fetch.raw(link); - if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) { - console.log("link is image"); - links.push(link); - } - } catch (error) { - console.error(error); + console.log("link:", link); + try { + const res = await $fetch.raw(link); + if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) { + console.log("link is image"); + mediaLinks.push(link); } - - mediaLinks.value = [...links]; + if (mediaLinks.length) { + hasEmbed.value = true + }; + } catch (error) { + console.error(error); } +} - if (mediaLinks.value.length) { - const nonLinks = props.message.message.split(linkRegex); - let invalidContent = false; - for (const nonLink of nonLinks) { - if (nonLink != "" && nonLink != "\n" && nonLink != "
") { - invalidContent = true; - break; - } - } - hideText.value = !invalidContent; - }; - - console.log("media links:", mediaLinks); +console.log("media links:", mediaLinks); }); //function toggleTooltip(e: Event) { @@ -162,13 +148,13 @@ const menuItems: ContextMenuItem[] = [ { name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } } ] -console.log("me:", me); -if (props.message.member.user.uuid == me!.uuid) { +console.log("me:", props.me); +if (props.author?.user.uuid == props.me.uuid) { // Inserts "edit" option at index 1 (below the "reply" option) menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } }); } -if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) { +if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) { // Inserts "edit" option at index 2 (below the "edit" option) menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} }); } @@ -188,20 +174,14 @@ function getDayDifference(date1: Date, date2: Date) { \ No newline at end of file diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue index f6f40f4..98c41f9 100644 --- a/components/Settings/AppSettings/Appearance.vue +++ b/components/Settings/AppSettings/Appearance.vue @@ -34,8 +34,7 @@ {{ layout.displayName }} - - + @@ -61,8 +60,8 @@ import { settingSave, settingsLoad } from '#imports'; const runtimeConfig = useRuntimeConfig() const baseURL = runtimeConfig.app.baseURL; -const styleFolder = `${baseURL}/themes/style` -const layoutFolder = `${baseURL}/themes/layout` +const styleFolder = `${baseURL}themes/style` +const layoutFolder = `${baseURL}themes/layout` const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"] @@ -116,7 +115,6 @@ async function parseTheme(url: string): Promise { break case "previewImageUrl": previewImageUrl = `${layoutFolder}/${lineArray[1].trim()}` - console.log(previewImageUrl) break } } diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue index 79e95bd..2ea411b 100644 --- a/components/UserInterface/ResizableSidebar.vue +++ b/components/UserInterface/ResizableSidebar.vue @@ -135,8 +135,7 @@ function loadStoredWidth() { .sidebar-content { width: 100%; - padding-left: .25em; - padding-right: .25em; + height: 100%; } .sidebar-content > :first-child { diff --git a/components/UserInterface/SidebarColumn.vue b/components/UserInterface/SidebarColumn.vue new file mode 100644 index 0000000..f09cee3 --- /dev/null +++ b/components/UserInterface/SidebarColumn.vue @@ -0,0 +1,218 @@ + + + + + \ No newline at end of file diff --git a/layouts/client.vue b/layouts/client.vue index 800a097..eb1c524 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -1,59 +1,17 @@ diff --git a/pages/index.vue b/pages/index.vue index cb5f57e..30e0793 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,18 +1,4 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue index 209ffab..650e14f 100644 --- a/pages/me/[userId].vue +++ b/pages/me/[userId].vue @@ -8,6 +8,14 @@ \ No newline at end of file diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css index 1cee0b4..37b5834 100644 --- a/public/themes/layout/gorb.css +++ b/public/themes/layout/gorb.css @@ -8,8 +8,11 @@ complementaryColor = white --sidebar-icon-width: 2.5em; --sidebar-icon-gap: .25em; --sidebar-margin: .5em; + + --navbar-height: 5dvh; + --navbar-icon-size: 3dvh; + --navbar-gap: calc(3dvh * .2); - --minor-radius: .35em; --standard-radius: .5em; --button-radius: .6em; --guild-icon-radius: 15%; diff --git a/public/themes/style/ash.css b/public/themes/style/ash.css index e33fbf6..495fa15 100644 --- a/public/themes/style/ash.css +++ b/public/themes/style/ash.css @@ -10,15 +10,15 @@ complementaryColor = white --reply-text-color: #969696; --danger-text-color: #ff0000; - --chat-background-color: #383432; - --chat-highlighted-background-color: #4c4a48; + --chat-background-color: #2f2e2d; + --chat-highlighted-background-color: #3f3b38; --chat-important-background-color: #ffcf5f38; --chat-important-highlighted-background-color: #ffa86f4f; --chat-featured-message-color: #4f3f2f60; --popup-background-color: #2f2828; --popup-highlighted-background-color: #382f2f; - --sidebar-background-color: #322f2d; + --sidebar-background-color: #3e3a37; --sidebar-highlighted-background-color: #46423b; --topbar-background-color: #3a3733; --chatbox-background-color: #3a3733; diff --git a/public/themes/style/dark.css b/public/themes/style/dark.css index 420e8c9..d23ed76 100644 --- a/public/themes/style/dark.css +++ b/public/themes/style/dark.css @@ -10,16 +10,16 @@ complementaryColor = white --reply-text-color: #969696; --danger-text-color: #ff0000; - --chat-background-color: #282624; - --chat-highlighted-background-color: #383430; + --chat-background-color: #1f1e1d; + --chat-highlighted-background-color: #2f2b28; --chat-important-background-color: #ffc44f2f; --chat-important-highlighted-background-color: #ffa45f4a; --chat-featured-message-color: #4f2f1f58; --popup-background-color: #2f1f1f; --popup-highlighted-background-color: #3f2f2f; - --sidebar-background-color: #1f1e1d; - --sidebar-highlighted-background-color: #2f2b28; + --sidebar-background-color: #2e2a27; + --sidebar-highlighted-background-color: #36322b; --topbar-background-color: #2a2723; --chatbox-background-color: #1a1713; diff --git a/public/themes/style/light.css b/public/themes/style/light.css index cd1f55b..78bf2f9 100644 --- a/public/themes/style/light.css +++ b/public/themes/style/light.css @@ -10,13 +10,13 @@ complementaryColor = black --reply-text-color: #969696; --danger-text-color: #ff0000; - --chat-background-color: #f0edeb; - --chat-highlighted-background-color: #aba8a4; + --chat-background-color: #f0ebe8; + --chat-highlighted-background-color: #e8e4e0; --chat-important-background-color: #df5f0b26; --chat-important-hightlighted-background-color: #df5f0b3d; --chat-featured-message-color: #e8ac841f; - --popup-background-color: #b8b4b0; - --popup-highlighted-background-color: #a6a4a2; + --popup-background-color: #e8e4e0; + --popup-highlighted-background-color: #dfdbd6; --sidebar-background-color: #dbd8d4; --sidebar-highlighted-background-color: #d4d0ca; diff --git a/types/interfaces.ts b/types/interfaces.ts index d175d76..bb6489b 100644 --- a/types/interfaces.ts +++ b/types/interfaces.ts @@ -121,3 +121,22 @@ export interface ContextMenuInterface { pointerY: number, items: ContextMenuItem[] } + +export interface NavbarItem { + title: string, + icon: string, + hasPing?: boolean, // whether to draw a "ping" icon or not + callback: (...args: any[]) => any; +} + +export interface INavbar { + guild: GuildResponse + channel: ChannelResponse +} + +export interface NavbarOptions { + guild?: GuildResponse + channel?: ChannelResponse + isDirectMessages?: boolean +} + diff --git a/types/props.ts b/types/props.ts index 5796d83..f25ae8d 100644 --- a/types/props.ts +++ b/types/props.ts @@ -1,9 +1,21 @@ -import type { MessageResponse, UserResponse } from "./interfaces"; +import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces"; export interface MessageProps { - message: MessageResponse, - replyMessage?: MessageResponse, + class?: string, + img?: string | null, + author: GuildMemberResponse + text: string, + timestamp: number, + format: "12" | "24", type: "normal" | "grouped", + marginBottom: boolean, + authorColor: string, + last: boolean, + messageId: string, + replyingTo?: boolean, editing?: boolean, + me: UserResponse + message: MessageResponse, + replyMessage?: MessageResponse isMentioned?: boolean, } \ No newline at end of file diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts index 1ff4df7..83f4eda 100644 --- a/utils/replyToMessage.ts +++ b/utils/replyToMessage.ts @@ -9,7 +9,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: getDisplayName(props.message.member), text: props.message.message || "", 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); const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);