chore: fix checks of pictique.

Author: Sahil2004

platforms/pictique/src/lib/types.ts

@@ -1,80 +1,108 @@
-import type { SVGAttributes } from 'svelte/elements';
+import type { SVGAttributes } from "svelte/elements";
 
 export interface ISvgProps extends SVGAttributes<SVGElement> {
-	size?: number | string;
-	color?: string;
+    size?: number | string;
+    color?: string;
 }
 
 export type CommentType = {
-	commentId: string;
-	name: string;
-	userImgSrc: string;
-	comment: string;
-	isUpVoted: boolean;
-	isDownVoted: boolean;
-	upVotes: number;
-	time: string;
-	replies: CommentType[];
+    commentId: string;
+    name: string;
+    userImgSrc: string;
+    comment: string;
+    isUpVoted: boolean;
+    isDownVoted: boolean;
+    upVotes: number;
+    time: string;
+    replies: CommentType[];
 };
 
 export type PostData = {
-	createdAt: string | number | Date;
-	id: string;
-	avatar: string;
-	userId: string;
-	handle: string;
-	imgUris: string[];
-	caption: string;
-	time: string;
-	count: {
-		likes: number;
-		comments: number;
-	};
+    createdAt: string | number | Date;
+    id: string;
+    avatar: string;
+    userId: string;
+    handle: string;
+    imgUris: string[];
+    caption: string;
+    time: string;
+    count: {
+        likes: number;
+        comments: number;
+    };
 };
 
 export interface Post {
-	id: string;
-	text: string;
-	images: string[];
-	author: {
-		id: string;
-		handle: string;
-		name: string;
-		avatarUrl: string;
-	};
-	createdAt: string;
-	likedBy: userProfile[];
-	comments: {
-		id: string;
-		text: string;
-		author: {
-			id: string;
-			handle: string;
-			name: string;
-			avatarUrl: string;
-		};
-		createdAt: string;
-	}[];
+    id: string;
+    text: string;
+    images: string[];
+    author: {
+        id: string;
+        handle: string;
+        name: string;
+        avatarUrl: string;
+    };
+    createdAt: string;
+    likedBy: userProfile[];
+    comments: {
+        id: string;
+        text: string;
+        author: {
+            id: string;
+            handle: string;
+            name: string;
+            avatarUrl: string;
+        };
+        createdAt: string;
+    }[];
 }
 
 export type userProfile = {
-	userId: string;
-	username: string;
-	avatarUrl: string;
-	totalPosts: number;
-	followers: number;
-	following: number;
-	userBio: string;
-	posts: PostData[];
+    id: string;
+    handle: string;
+    name: string;
+    description: string;
+    avatarUrl: string;
+    totalPosts: number;
+    followers: number;
+    following: number;
+    posts: PostData[];
 };
 
 export type Image = {
-	url: string;
-	alt: string;
+    url: string;
+    alt: string;
 };
 
 export type GroupInfo = {
-	id: string;
-	name: string;
-	avatar: string;
+    id: string;
+    name: string;
+    avatar: string;
+};
+
+export type Chat = {
+    id: string;
+    avatar: string;
+    handle: string;
+    unread: boolean;
+    text: string;
+    participants: {
+        id: string;
+        name?: string;
+        handle?: string;
+        ename?: string;
+        avatarUrl: string;
+    }[];
+    latestMessage: {
+        text: string;
+        isRead: boolean;
+    };
+};
+
+export type MessageType = {
+    id: string;
+    avatar: string;
+    handle: string;
+    unread: boolean;
+    text: string;
 };

platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { ChatMessage, MessageInput } from '$lib/fragments';
-	import { Avatar, Button, Input, Label } from '$lib/ui';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
+	import { ChatMessage, MessageInput } from '$lib/fragments';
 	import Settings from '$lib/icons/Settings.svelte';
+	import { Avatar, Button, Input, Label } from '$lib/ui';
 	import { clickOutside } from '$lib/utils';
 	import { Pen01FreeIcons } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { onMount } from 'svelte';
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');
@@ -63,8 +63,8 @@
 		setTimeout(scrollToBottom, 0);
 	});
 
-	function handleSend() {
-		if (!messageValue.trim()) return;
+	async function handleSend() {
+		if (!messageValue.trim()) return Promise.resolve();
 		messages = [
 			...messages,
 			{
@@ -152,7 +152,7 @@
 	</div>
 
 	<MessageInput
-		class="sticky start-0 bottom-[-15px] w-full"
+		class="sticky bottom-[-15px] start-0 w-full"
 		variant="dm"
 		src={group.avatar}
 		bind:value={messageValue}
@@ -188,7 +188,7 @@
 				/>
 				<label
 					for="group-avatar-input"
-					class="bg-brand-burnt-orange border-brand-burnt-orange absolute right-0 bottom-0 cursor-pointer rounded-full border p-1 shadow"
+					class="bg-brand-burnt-orange border-brand-burnt-orange absolute bottom-0 right-0 cursor-pointer rounded-full border p-1 shadow"
 				>
 					<HugeiconsIcon icon={Pen01FreeIcons} color="white" />
 				</label>
@@ -212,7 +212,7 @@
 					rows="2"
 					maxlength="260"
 					placeholder="Edit group description"
-					class="bg-grey text-black-800 font-geist placeholder:text-black-600 invalid:border-red invalid:text-red focus:invalid:text-black-800 w-full rounded-4xl border border-transparent px-6 py-3.5 text-[15px] font-normal outline-0 focus:invalid:border-transparent"
+					class="bg-grey text-black-800 font-geist placeholder:text-black-600 invalid:border-red invalid:text-red focus:invalid:text-black-800 rounded-4xl w-full border border-transparent px-6 py-3.5 text-[15px] font-normal outline-0 focus:invalid:border-transparent"
 					bind:value={groupDescription}
 				/>
 			{:else}

platforms/pictique/src/routes/(protected)/messages/+page.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
 	import { Message } from '$lib/fragments';
 	import Group from '$lib/fragments/Group/Group.svelte';
-	import { Button, Avatar, Input } from '$lib/ui';
+	import { isSearching, searchError, searchResults, searchUsers } from '$lib/stores/users';
+	import type { Chat, GroupInfo, MessageType } from '$lib/types';
+	import { Avatar, Button, Input } from '$lib/ui';
 	import { clickOutside } from '$lib/utils';
-	import { heading } from '../../store';
 	import { apiClient } from '$lib/utils/axios';
+	import { onMount } from 'svelte';
+	import { heading } from '../../store';
 
-	import { searchUsers, searchResults, isSearching, searchError } from '$lib/stores/users';
-	import type { GroupInfo } from '$lib/types';
-
-	let messages = $state([]);
+	let messages = $state<MessageType[]>([]);
 	let groups: GroupInfo[] = $state([]);
-	let allMembers = $state([]);
+	let allMembers = $state<Record<string, string>[]>([]);
 	let selectedMembers = $state<string[]>([]);
 	let currentUserId = '';
 	let openNewChatModal = $state(false);
 	let searchValue = $state('');
 	let debounceTimer: NodeJS.Timeout;
 
 	async function loadMessages() {
-		const { data } = await apiClient.get('/api/chats');
+		const { data } = await apiClient.get<{ chats: Chat[] }>('/api/chats');
 		const { data: userData } = await apiClient.get('/api/users');
 		currentUserId = userData.id;
 
@@ -67,7 +66,7 @@
 
 		try {
 			if (selectedMembers.length === 1) {
-				await apiClient.post(`/api/chats/`, {
+				await apiClient.post('/api/chats/', {
 					name: allMembers.find((m) => m.id === selectedMembers[0])?.name ?? 'New Chat',
 					participantIds: [selectedMembers[0]]
 				});
@@ -125,7 +124,7 @@
 	{/if}
 
 	{#if groups.length > 0}
-		<h3 class="text-md mt-6 mb-2 font-semibold text-gray-700">Groups</h3>
+		<h3 class="text-md mb-2 mt-6 font-semibold text-gray-700">Groups</h3>
 		{#each groups as group}
 			<Group
 				name={group.name || 'New Group'}