Merge pull request 'Polish GUI' (#7) from GUI-polish into main

Reviewed-on: #7
Reviewed-by: SauceyRed <saucey@saucey.red>

app.vue

@@ -9,17 +9,17 @@
 
 const banner = useState("banner", () => false);
 
-let current_theme = "dark" // default theme
+let currentTheme = "dark" // default theme
-const saved_theme = localStorage.getItem("selectedTheme");
+const savedTheme = localStorage.getItem("selectedTheme");
-if (saved_theme) {
+if (savedTheme) {
-	current_theme = saved_theme;
+	currentTheme = savedTheme;
 }
 
 useHead({
   link: [
     {
       rel: "stylesheet",
-      href: `/themes/${current_theme}.css`
+      href: `/themes/${currentTheme}.css`
     }
   ]
 })

components/MemberEntry.vue

@@ -0,0 +1,40 @@
+<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>
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { GuildMemberResponse } from '~/types/interfaces';
+import UserPopup from './UserPopup.vue';
+
+const props = defineProps<{
+    member: GuildMemberResponse
+}>();
+
+const isPopupVisible = ref(false);
+
+const togglePopup = () => {
+    isPopupVisible.value = false;
+    // isPopupVisible.value = !isPopupVisible.value;
+};
+
+const hidePopup = () => {
+    isPopupVisible.value = false;
+};
+</script>
+
+<style>
+.member-item {
+    position: relative; /* Set the position to relative for absolute positioning of the popup */
+}
+
+.profile-popup {
+    position: absolute; /* Use absolute positioning */
+    left: -100px; /* Adjust this value to position the popup to the left */
+}
+</style>

components/Message.vue

@@ -10,6 +10,8 @@
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
+					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
+					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
@@ -49,6 +51,7 @@ const messageElement = ref<HTMLDivElement>();
 const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
+const currentDate: Date = new Date()
 
 console.log("message:", props.text);
 console.log("author:", props.username);
@@ -74,6 +77,17 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
+function getDayDifference(date1: Date, date2: Date) {
+    const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+    const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+
+    const timeDifference = midnight2.getTime() - midnight1.getTime();
+
+    const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
+
+    return Math.round(dayDifference);
+}
+
 </script>
 
 <style scoped>
@@ -81,7 +95,7 @@ onMounted(async () => {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 2rem 1fr;
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
@@ -129,10 +143,11 @@ onMounted(async () => {
 }
 
 .left-column {
+	min-width: 2rem;
 	display: flex;
+	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
-	
 }
 
 .author-username {

components/Settings/UserSettings/Account.vue

@@ -1,33 +1,16 @@
 <template>
-  <div>
+  <div v-if="user">
-    <h1>My Account</h1>
+    <h1>Account</h1>
 
-    <div class="profile-container">
+    <p class="subtitle">E-MAIL</p>
-      <div class="user-data-fields" v-if="user">
+    <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
-        <p class="subtitle">AVATAR</p>
+    <br>
-        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
+    <Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
-        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
-        
-        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
-        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
-        <label for="profile-username-input" class="subtitle">USERNAME</label>
-        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
-        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
-        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
-        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
-
-        <br>
-        <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
-      </div>
-
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
-    </div>
-
-    <h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
-    <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
     
-    <h2>Account Deletion</h2>
+    <p class="subtitle">PASSWORD</p>
+    <Button text="Reset Password" :callback=resetPassword></Button>
+    
+    <p class="subtitle">ACCOUNT DELETION</p>
     <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
 
   </div>
@@ -44,22 +27,13 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
+async function changeEmail() {
-
-const saveChanges = async () => {
   if (!user) return;
-  
+
+
   const formData = new FormData()
-  
-  if (newPfpFile) {
-    formData.append("avatar", newPfpFile)
-  }
-  
   const bytes = new TextEncoder().encode(JSON.stringify({
-    display_name: user.display_name,
+    email: user.email,
-    username: user.username,
-    pronouns: user.pronouns,
-    about: user.about,
   }));
   formData.append('json', new Blob([bytes], { type: 'application/json' }));
   
@@ -78,58 +52,29 @@ const saveChanges = async () => {
 };
 
 
-const removeAvatar = async () => {
+async function resetPassword () {
-  alert("TBD")
+  await fetchWithApi("/auth/reset-password", {
-  // await fetchWithApi(`/auth/reset-password`);
+    method: 'GET',
-}
+    headers: {
-
+      'Content-Type': 'application/json',
-const changeAvatar = async () => {
+    },
-  if (!user) return;
+    query: {
-
+      identifier: user?.username
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = 'image/*';
-
-  input.addEventListener("change", (e: Event) => {
-    if (input.files?.length && input.files.length > 0) {
-      const file = input.files[0];
-      if (!file) return;
-
-      newPfpFile = file
-      
-      const reader = new FileReader();
-      reader.addEventListener("onload", () => {
-        if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
-        }
-      });
-      reader.readAsDataURL(file);
     }
-  })
+  });
-
-  input.click()
 }
 
-const resetPassword = async () => {
+async function deleteAccount() {
-  alert("TBD")
-  // await fetchWithApi(`/auth/reset-password`);
-}
-
-const deleteAccount = async () => {
   alert("TBD")
 }
 </script>
 
 <style scoped>
-.profile-container {
-  display: flex;
-}
-
 .subtitle {
   display: block;
   font-size: 0.8em;
   font-weight: 800;
-  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 
 .user-data-fields {

components/Settings/UserSettings/Profile.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <h1>Profile</h1>
+
+    <div class="profile-container">
+      <div class="user-data-fields" v-if="user">
+        <p class="subtitle">AVATAR</p>
+        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
+        
+        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
+        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
+        <label for="profile-username-input" class="subtitle">USERNAME</label>
+        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
+        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
+        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
+        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
+        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
+
+        <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
+      </div>
+
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchUser } = useAuth();
+
+const user: UserResponse | undefined = await fetchUser()
+if (!user) {
+  alert("could not fetch user info, aborting :(")
+}
+
+let newPfpFile: File;
+
+async function saveChanges() {
+  if (!user) return;
+  
+  const formData = new FormData()
+  
+  if (newPfpFile) {
+    formData.append("avatar", newPfpFile)
+  }
+  
+  const bytes = new TextEncoder().encode(JSON.stringify({
+    display_name: user.display_name,
+    username: user.username,
+    pronouns: user.pronouns,
+    about: user.about,
+  }));
+  formData.append('json', new Blob([bytes], { type: 'application/json' }));
+  
+  try {
+    await fetchWithApi('/me', {
+      method: 'PATCH',
+      body: formData
+    })
+
+    alert('success!!')
+  } catch (error: any) {
+    if (error?.response?.status !== 200) {
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+    }
+  }
+};
+
+
+async function removeAvatar() {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+async function changeAvatar() {
+  if (!user) return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+
+  input.addEventListener("change", (e: Event) => {
+    if (input.files?.length && input.files.length > 0) {
+      const file = input.files[0];
+      if (!file) return;
+
+      newPfpFile = file
+      
+      const reader = new FileReader();
+      reader.addEventListener("onload", () => {
+        if (reader.result && typeof reader.result === 'string') {
+          user.avatar = reader.result;
+        }
+      });
+      reader.readAsDataURL(file);
+    }
+  })
+
+  input.click()
+}
+</script>
+
+<style scoped>
+.profile-container {
+  display: flex;
+}
+
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
+.user-data-fields {
+  min-width: 35dvw;
+  max-width: 35dvw;
+}
+
+.profile-data-input {
+  min-width: 30dvw;
+  margin: 0.07dvh;
+  padding: 0.1dvh 0.7dvw;
+  height: 2.5em;
+  font-size: 1em;
+  border-radius: 8px;
+  border: none;
+  color: var(--text-color);
+  background-color: var(--accent-color);
+}
+
+.profile-popup {
+  margin-left: 2dvw;
+}
+</style>

components/UserArea.vue

@@ -0,0 +1,20 @@
+<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/UserPopup.vue

@@ -1,6 +1,8 @@
 <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" />
+
     <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">

layouts/client.vue

@@ -5,17 +5,20 @@
 			<div class="homebar-item">
 				main bar
 			</div>
-			</div>
+		</div>
-				<div id="left-column">
+		<div id="left-column">
 			<NuxtLink id="home-button" href="/">
-				<Icon name="lucide:house" class="white" size="2rem" />
+				<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="server-icon" :src="guild.icon" :alt="guild.name"/>
+					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-					<Icon v-else name="lucide:server" class="server-icon white" :alt="guild.name" />
+					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 				</NuxtLink>
 			</div>
+			<NuxtLink id="settings-menu" href="/settings">
+				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
+			</NuxtLink>
 		</div>
 		<slot />
 	</div>
@@ -78,7 +81,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-right: .5dvw;
 }
 
-.server-icon {
+.sidebar-icon {
 	width: 3rem;
 	height: 3rem;
 }
@@ -110,6 +113,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-bottom: 1dvh;
 }
 
+#settings-menu {
+	position: absolute;
+	bottom: .25dvh
+}
+
 #servers-list {
 	display: flex;
 	flex-direction: column;

pages/servers/[serverId]/channels/[channelId].vue

@@ -26,11 +26,7 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<div id="members-container">
 			<div id="members-list">
-				<div class="member-item" v-for="member of members" tabindex="0">
+				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
-					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
-					<Icon v-else class="member-avatar" name="lucide:user" />
-					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
-				</div>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -50,7 +46,8 @@ const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
-import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+import UserPopup from "~/components/UserPopup.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
@@ -78,6 +75,9 @@ function toggleInvitePopup(e: Event) {
 	e.preventDefault();
 	showInvitePopup.value = !showInvitePopup.value;
 }
+
+function handleMemberClick(member: GuildMemberResponse) {
+}
 </script>
 
 <style>
@@ -113,7 +113,7 @@ function toggleInvitePopup(e: Event) {
 	gap: 1em;
 	align-items: center;
 	text-align: left;
-	
+	cursor: pointer;
 }
 
 #channels-list {

pages/settings.vue

@@ -39,6 +39,7 @@ 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';
@@ -53,7 +54,8 @@ const settingsCategories = {
   userSettings: {
     displayName: "User Settings",
     pages: [
-      { displayName: "My Account", pageData: Account },
+      { displayName: "Profile", pageData: Profile },
+      { displayName: "Account", pageData: Account },
       { displayName: "Privacy", pageData: Privacy },
       { displayName: "Devices", pageData: Devices },
       { displayName: "Connections", pageData: Connections },

public/icon.svg

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="drawing.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.35399828"
+     inkscape:cx="2.8248725"
+     inkscape:cy="731.64198"
+     inkscape:window-width="1440"
+     inkscape:window-height="863"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="matrix(0.93746412,0,0,0.93746412,18.749279,18.749282)">
+    <g
+       id="g1543"
+       style="display:inline"
+       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-298.33565)">
+      <circle
+         style="fill:#000000;stroke-width:0.264583"
+         id="path60"
+         cx="106.78797"
+         cy="145.89536"
+         r="72.25267" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.257596"
+         id="path899"
+         cx="106.78797"
+         cy="145.89536"
+         r="65.485863" />
+    </g>
+    <g
+       id="g1460-1"
+       transform="matrix(4.1481001,0,0,4.1481002,45.149918,-354.52402)"
+       style="display:inline">
+      <circle
+         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
+         id="path1129-3"
+         cx="78.140816"
+         cy="136.65092"
+         r="17.372646" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
+         id="path1354-0"
+         cx="86.078323"
+         cy="136.65092"
+         r="11.576728" />
+    </g>
+    <g
+       id="g1460-1-3"
+       transform="matrix(4.1481001,0,0,4.1481002,-187.26754,-354.52402)"
+       style="display:inline">
+      <circle
+         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
+         id="path1129-3-4"
+         cx="78.140816"
+         cy="136.65092"
+         r="17.372646" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
+         id="path1354-0-6"
+         cx="86.078323"
+         cy="136.65092"
+         r="11.576728" />
+    </g>
+    <g
+       id="g3530"
+       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-294.3357)">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 c 0,0 -17.461156,15.02392 -28.153795,0.49121"
+         id="path1817" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 c 0,0 17.46116,15.02392 28.15379,0.49121"
+         id="path1817-6" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 -5.74494,-9.7603"
+         id="path2191"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 5.74494,-9.7603"
+         id="path2191-6"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 101.04303,158.3602 h 11.48988"
+         id="path2675"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>

types/interfaces.ts

@@ -62,7 +62,7 @@ export interface UserResponse {
 	about: string | null,
 	email?: string,
 	email_verified?: boolean
-  }
+}
 
 export interface StatsResponse {
 	accounts: number,