v0.0.10

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -34,8 +34,8 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.21",
 		"postcss-cli": "^10.1.0",
-		"prettier": "^3.0.0",
-		"prettier-plugin-svelte": "^2.9.0",
+		"prettier": "^2.8.4 <2.9.0",
+		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^3.55.1",
 		"svelte-check": "^3.0.4",
 		"svelte-preprocess": "^5.0.1",
@@ -53,7 +53,7 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
-		"daisyui": "^3.1.0",
+		"daisyui": "^3.2.1",
 		"emoji-picker-element": "^1.18.1",
 		"nprogress": "^0.2.0",
 		"playwright-e2e-coverage-report": "^1.0.28",

src/hooks.server.ts

@@ -56,7 +56,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	}
 
 	if (Authenticate({ pathname, user_role: role || 'user' })) {
-		if (maintenanceMode && !['/contact', '/legal', '/careers'].includes(pathname)) {
+		if (maintenanceMode) {
 			if (pathname === '/maintenance') {
 				return await resolve(event)
 			} else {

src/lib/assets/icons/drawer/IconDrawerStreak.svelte

@@ -8,5 +8,9 @@
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+		d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
 </svg>

src/lib/assets/icons/profile/IconProfileStreak.svelte

@@ -8,5 +8,9 @@
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+		d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
 </svg>

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -48,7 +48,7 @@
 			<p class="text-2xl truncate text-white font-semibold">{channel.title || ''}</p>
 			<div class="flex flex-row items-center gap-2">
 				<div class="avatar">
-					<div class="w-14 mask {channel.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+					<div class="w-14 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={channel.avatar} alt="" />
 					</div>
 				</div>

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -50,7 +50,7 @@
 			<p class="text-lg font-semibold truncate">{channel.title}</p>
 			<div class="flex flex-row gap-2 max-w-[25rem]">
 				<div class="avatar">
-					<div class="w-12 mask {channel.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+					<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={channel.avatar} alt="" />
 					</div>
 				</div>

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -13,7 +13,7 @@
 	<td>
 		<div class="flex items-center space-x-2 my-3 pl-3">
 			<div class="avatar">
-				<div class="w-12 mask {channel.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+				<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 					<img src={channel.avatar} alt="" />
 				</div>
 			</div>

src/lib/components/Browse/Sections/ItemUser.svelte

@@ -9,7 +9,7 @@
 		<a class="rounded-md" href="/profile/{user.username}">
 			<div class="text-center space-y-3 w-[200px]">
 				<div class="avatar">
-					<div class="w-36 mask {user.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+					<div class="w-36 mask {user?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={user.avatar} alt="" />
 					</div>
 				</div>

src/lib/components/Browse/Sections/SectionCarousel.svelte

@@ -3,7 +3,9 @@
 	import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
 	import LoadingItemCarousel from '$lib/components/Browse/Sections/LoadingItemCarousel.svelte'
 	import { onMount } from 'svelte'
-	import Swiper, { Navigation } from 'swiper'
+	import Swiper from 'swiper'
+	import { Navigation } from 'swiper/modules'
+
 	import ItemCarousel from '$lib/components/Browse/Sections/ItemCarousel.svelte'
 	import 'swiper/css'
 
@@ -60,7 +62,8 @@
 {:then value}
 	{#if value?.length > 0}
 		<div class={'relative p-1 transition-opacity ease-in duration-100 ' + swiperClass}>
-			<div class="btn btn-neutral text-white p-2 btn-prev btn-square absolute top-2/4 left-1 z-10 ml-3">
+			<div
+				class="btn btn-neutral text-white p-2 btn-prev btn-square absolute top-2/4 left-1 z-10 ml-3">
 				<IconDrawerLeft />
 			</div>
 			<div class="swiper carousel !pt-10 mx-8">
@@ -70,7 +73,8 @@
 					{/each}
 				</div>
 			</div>
-			<div class="btn btn-neutral text-white z-10 p-2 btn-next btn-square absolute top-2/4 right-1 mr-3">
+			<div
+				class="btn btn-neutral text-white z-10 p-2 btn-next btn-square absolute top-2/4 right-1 mr-3">
 				<IconDrawerChevron />
 			</div>
 		</div>

src/lib/components/Channel/Chat/ChatInput.svelte

@@ -8,8 +8,9 @@
 	import EmojiPicker from '$lib/components/Channel/Chat/EmojiPicker.svelte'
 	import GifPicker from '$lib/components/Channel/Chat/GifPicker.svelte'
 
-	export let channel: any
-	export let users: any
+	export let channel: any,
+		viewers: any[] = []
+
 	let selectedCommand = 0
 	let selectedUser = 0
 	let inputBox: any = null
@@ -19,14 +20,18 @@
 		$channel_connection === `open-${channel._id}` && $page.data.user?.userId
 	$: isHost = channel.user === $page.data.user?.userId
 
+	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
+
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
 
 	const sendMessage = () => {
-		if (messageIsCommand) {
-			if (selectedCommand && selectedUser >= 0) {
-				const user = users[selectedUser]
+		if (messageIsCommand && !chatMessage.startsWith('/ai ')) {
+			if (selectedCommand) {
+				const usernameFromMsg = chatMessage.substring(chatMessage.indexOf('@') + 1)
+				const user = viewersWithOutHost.find((viewer: any) => viewer.username === usernameFromMsg)
+				if (!user) return
 				executeCommand(selectedCommand, user.userId)
 			}
 		} else if (!chatMessage.startsWith('/') || chatMessage.startsWith('/ai')) {
@@ -55,15 +60,15 @@
 	}
 
 	const slectCommandfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedCommand < 3) {
+		if (key === 'ArrowDown' && selectedCommand < 4) {
 			selectedCommand++
-		} else if (key === 'ArrowUp' && selectedCommand >= 1) {
+		} else if (key === 'ArrowUp' && selectedCommand >= 2) {
 			selectedCommand--
 		}
 	}
 
 	const slectUserfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedUser < users.length) {
+		if (key === 'ArrowDown' && selectedUser < viewers.length) {
 			selectedUser++
 		} else if (key === 'ArrowUp' && selectedUser >= 0) {
 			selectedUser--
@@ -109,6 +114,7 @@
 	// toggle commands handlers
 
 	const toggleBan = (userId: string) => {
+		if (channel.user === userId) return
 		let isEnabled = false
 		if (!channel.bans.includes(userId)) {
 			channel.bans.push(userId)
@@ -126,6 +132,7 @@
 	}
 
 	const toggleMod = (userId: string) => {
+		if (channel.user === userId) return
 		if (!channel.bans.includes(userId)) {
 			let isEnabled = false
 			if (!channel.mods?.includes(userId)) {
@@ -143,6 +150,7 @@
 	}
 
 	const toggleGuest = (userId: string) => {
+		if (channel.user === userId) return
 		if (!channel.bans.includes(userId)) {
 			let isEnabled = false
 			if (!channel.guests.includes(userId) && channel.guests.length < 9) {
@@ -187,16 +195,14 @@
 	]
 
 	$: messageIsCommand =
-		chatMessage &&
-		chatMessage.startsWith('/') &&
-		/[a-z] @[a-z]/.test(chatMessage.substr(1)) &&
-		chatMessage.startsWith('/ai ')
+		chatMessage && chatMessage.startsWith('/') && /[a-z] @[a-z]/.test(chatMessage.substr(1))
 
 	$: showUsers = chatMessage && chatMessage.endsWith('@')
 	$: showCommandOptions =
 		chatMessage &&
 		chatMessage.startsWith('/') &&
 		!chatMessage.startsWith('/ai ') &&
+		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
 </script>
@@ -253,12 +259,12 @@
 			</div>
 		{/if}
 
-		{#if users.length > 0 && showUsers}
+		{#if viewersWithOutHost.length > 0 && showUsers}
 			<div
 				class={'dropdown dropdown-top w-full rounded-box bg-white ' +
 					(showUsers ? 'dropdown-open' : '')}>
 				<ul class="dropdown-content menu p-2 shadow bg-base-300 rounded-box w-full">
-					{#each users as user, idx}
+					{#each viewersWithOutHost as user, idx}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<li
 							on:click={() => {
@@ -293,8 +299,8 @@
 							e.preventDefault()
 							if (showUsers) {
 								if (selectedUser >= 0) {
-									const user = users[selectedUser]
-									chatMessage = chatMessage.replace(/@/, '@' + user.username) + ' '
+									const user = viewers[selectedUser]
+									chatMessage = chatMessage.replace(/@/, '@' + user.username)
 								}
 							} else {
 								if (selectedCommand) {

src/lib/components/Channel/Chat/DrawerChat.svelte

@@ -11,10 +11,11 @@
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
 
 	export let channel: any = undefined,
-		showEditChannelDrawer: boolean = false
+		showEditChannelDrawer: boolean = false,
+		viewers: any[] = []
 	let chatHistory: any[] = [],
 		chatDrawerElement: HTMLElement
-	let cursor = "";
+	let cursor = ''
 
 	channel_message.subscribe((value) => {
 		if (!value) return
@@ -30,7 +31,7 @@
 						channel,
 						currentUserId: $page.data.user?.userId
 					})
-					return message;
+					return message
 				})
 
 				chatHistory = [...chatHistory, ...messages]
@@ -68,14 +69,6 @@
 		$is_chat_drawer_open = false
 	})
 
-	const createuserList = (list: any[]) => {
-		let users: any = {}
-		list.forEach((chat) => {
-			if ($page.data.user?.userId !== chat.user.userId) users[chat.user.userId] = chat.user
-		})
-		return Object.keys(users).map((key) => users[key])
-	}
-
 	const loadMore = () => {
 		if (
 			$channel_connection === `open-${channel._id}` &&
@@ -85,12 +78,10 @@
 				channelSocket: channel.socket,
 				channelId: channel._id,
 				skip: 100,
-				cursor: cursor || "none"
+				cursor: cursor || 'none'
 			})
 		}
 	}
-
-	$: users = createuserList(chatHistory)
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
@@ -102,6 +93,6 @@
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>
 	<div class="flex flex-row mt-auto p-3 w-full">
-		<ChatInput bind:channel bind:users />
+		<ChatInput bind:channel bind:viewers />
 	</div>
 </div>

src/lib/components/Channel/Chat/DropdownViewChannel.svelte

@@ -119,7 +119,7 @@
 			<a href="/profile/{host?.username}">
 				<div class="flex flex-wrap gap-2">
 					<div class="avatar online">
-						<div class="w-12 mask {host.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+						<div class="w-12 mask {host?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 							<img src={host?.avatar} alt="" />
 						</div>
 					</div>

src/lib/components/Channel/Chat/FloatingMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { clickOutside } from '../../../utils.js'
+	import { clickOutside } from '$lib/utils.js'
 	export let id: string = 'float-menu'
 	export let icon: any = null
 	export let label: string = '',