Merge remote-tracking branch 'origin/main' into time-format

components/Me/AddFriend.vue

@@ -0,0 +1,63 @@
+<template>
+	<div style="text-align: left;">
+		<h3>Add a Friend</h3>
+		Enter a friend's Gorb username to send them a friend request.
+	</div>
+	
+	<div id="add-friend-search-bar">
+		<input id="add-friend-search-input" ref="inputField"
+				placeholder="blahaj.enjoyer" maxlength="32" @keypress.enter="sendRequest"/> <!-- REMEMBER TO CHANGE THIS WHEN WE ADD FEDERATION--> 
+		<Button id="friend-request-button" :callback="sendRequest" text="Send Friend Request"></Button>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Button from '../UserInterface/Button.vue';
+
+const inputField = ref<HTMLInputElement>();
+const { addFriend } = useApi();
+
+
+async function sendRequest() {
+	if (inputField.value) {
+		try {
+			await addFriend(inputField.value.value)
+			alert("Friend request sent!")
+		} catch {
+			alert("Request failed :(")
+		} 
+	}
+}
+</script>
+<style>
+
+#add-friend-search-bar {
+	display: flex;
+
+	text-align: left;
+	margin-top: .8em;
+	padding: .3em .3em;
+
+	border-radius: 1em;
+	border: 1px solid var(--accent-color);
+}
+
+#add-friend-search-input {
+	border: none;
+	box-sizing: border-box;
+
+	margin: 0 .2em;
+
+	flex-grow: 1;
+	
+	color: inherit;
+	background-color: unset;
+	font-weight: medium;
+	letter-spacing: .04em;
+}
+
+#add-friend-search-input:empty:before {
+	content: attr(placeholder);
+	color: gray;
+}
+</style>

components/Me/DirectMessagesSidebar.vue

@@ -0,0 +1,41 @@
+<template>
+	<div id="middle-left-column">
+		<div id="friend-sidebar">
+			<div>
+				<h3>Direct Messages</h3>
+			</div>
+			<VerticalSpacer />
+
+			<NuxtLink class="user-item" :href="`/me/friends`" 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"
+						:href="`/me/${user.uuid}`"/> 
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+
+const { fetchFriends } = useApi();
+
+const friends = await fetchFriends()
+</script>
+
+<style>
+#middle-left-column {
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+}
+
+#friend-sidebar {
+	padding-left: .5em;
+	padding-right: .5em;
+}
+</style>

components/Me/FriendsList.vue

@@ -0,0 +1,58 @@
+<template>
+	<input id="search-friend-bar" placeholder="search"/>
+
+	<!-- we aren't checking for the "all" variant, since this is the default and fallback one -->
+
+	<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
+	<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
+	<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }}</p>
+
+	<div id="friends-list">
+		<div v-if="props.variant === 'online'">
+			Not Implemented
+		</div>
+
+		<div v-else-if="props.variant === 'pending'">
+			Not Implemented
+		</div>
+
+		<div v-else>
+			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+			:href="`/me/${user.uuid}`"/> 
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const { fetchFriends } = useApi();
+
+const friends = await fetchFriends()
+
+const props = defineProps<{
+    variant: string
+}>();
+</script>
+
+<style>
+#search-friend-bar {
+	text-align: left;
+	margin-top: .8em;
+	padding: .3em .5em;
+	width: 100%;
+
+	border-radius: 1em;
+	border: 1px solid var(--accent-color);
+
+	box-sizing: border-box;
+	
+	color: inherit;
+	background-color: unset;
+	font-weight: medium;
+	letter-spacing: .04em;
+}
+
+#search-friend-bar:empty:before {
+	content: attr(placeholder);
+	color: gray;
+}
+</style>

components/Member/MemberEntry.vue

@@ -10,7 +10,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
-import UserPopup from './UserPopup.vue';
 
 const props = defineProps<{
     member: GuildMemberResponse

components/Message.vue

@@ -2,6 +2,36 @@
 	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			: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"
+				style="overflow: visible;">
+				<defs
+					id="defs1" />
+				<g
+					id="layer1"
+					transform="translate(40,-35)">
+					<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"
+						id="path3-5" />
+					<path
+						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
+						d="M 69.899501,174.963 120.2803,87.700931"
+						id="path3-5-2" />
+					</g>
+				</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" />
 		<div class="left-column">
@@ -211,6 +241,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	background-color: rgba(90, 255, 200, 0.233);
 }
 
+.message-reply-svg {
+	display: flex;
+	justify-content: center;
+}
+
 </style>
 
 <style module>

components/MessageReply.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="props.maxWidth == 'full' ? 'message-reply' : undefined" :class="{ 'message-reply-preview' : props.maxWidth == 'reply' }"
   		:data-message-id="props.id" @click="scrollToReply">
-    <p id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></p>
+    <span id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></span>
 	<!-- <span id="message-reply-cancel"><Icon name="lucide:x" /></span> -->
   </div>
 </template>
@@ -61,7 +61,6 @@ function scrollToReply(e: MouseEvent) {
 #message-reply, .message-reply-preview {
 	display: flex;
 	text-align: left;
-	border-bottom: 1px solid var(--padding-color);
 	margin-bottom: .5rem;
 	cursor: pointer;
 	overflow: hidden;
@@ -72,16 +71,17 @@ function scrollToReply(e: MouseEvent) {
 }
 
 .message-reply-preview {
-	width: 30%;
 	margin-left: .5dvw;
 }
 
 #reply-text {
-	color: rgb(150, 150, 150);
+	color: var(--reply-text-color);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	margin-bottom: 0;
+	margin-top: .2rem;
+	border-bottom: 1px solid var(--padding-color);
 
 }
 

components/Settings/UserSettings/Account.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();

components/Settings/UserSettings/Privacy.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
 </script>
 
 <style scoped>

components/Settings/UserSettings/Profile.vue

@@ -33,6 +33,9 @@
 </template>
 
 <script lang="ts" setup>
+import UserPopup from '~/components/User/UserPopup.vue';
+import Button from '~/components/UserInterface/Button.vue';
+
 import type { UserResponse } from '~/types/interfaces';
 
 let newPfpFile: File;

components/User/UserEntry.vue

@@ -0,0 +1,40 @@
+<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>
+	</NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+    user: UserResponse
+}>();
+</script>
+
+<style>
+.user-item {
+    display: flex;
+	align-items: center;
+	text-align: left;
+
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+    
+    text-decoration: none;
+    color: inherit;
+}
+
+.user-item:hover {
+    background-color: #00000020
+}
+
+.user-avatar {
+    width: 2.3em;
+    height: 2.3em;
+    border-radius: 50%;
+}
+</style>

components/UserArea.vue

@@ -1,20 +0,0 @@
-<template>
-	<div id="user-panel">
-		HELLO!!
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-	user: UserResponse,
-}>();
-
-</script>
-
-<style scoped>
-#user-panel {
-	width: 100%;
-}
-</style>

components/UserInterface/VerticalSpacer.vue

@@ -0,0 +1,12 @@
+<template>
+  <span class="spacer"></span>
+</template>
+
+<style scoped>
+.spacer {
+  height: 0.2dvh;
+  display: block;
+  margin: 0.8dvh 0.2dvw;
+  background-color: var(--padding-color);
+}
+</style>