From 2611f0077b177ef79163b0884e868995ef565a03 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 17 Jul 2025 21:41:45 +0530
Subject: [PATCH 01/11] feat: group

---
 .../src/lib/fragments/Group/Group.svelte      |  59 +++++
 platforms/pictique/src/lib/fragments/index.ts |   1 +
 .../(protected)/group/[id]/+page.svelte       | 205 ++++++++++++++++++
 .../routes/(protected)/messages/+page.svelte  |   3 +
 4 files changed, 268 insertions(+)
 create mode 100644 platforms/pictique/src/lib/fragments/Group/Group.svelte
 create mode 100644 platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte

diff --git a/platforms/pictique/src/lib/fragments/Group/Group.svelte b/platforms/pictique/src/lib/fragments/Group/Group.svelte
new file mode 100644
index 00000000..928de7ae
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Group/Group.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Avatar from '../../ui/Avatar/Avatar.svelte';
+	import { cn } from '../../utils';
+
+	interface IGroupProps extends HTMLAttributes<HTMLButtonElement> {
+		avatar: string;
+		name: string;
+		unread?: boolean;
+		callback: () => void;
+	}
+
+	const {
+		avatar,
+		name,
+		unread = false,
+		callback,
+		...restProps
+	}: IGroupProps = $props();
+</script>
+
+<button
+	{...restProps}
+	class={cn([
+		'relative flex w-full cursor-pointer items-center gap-3 rounded-lg py-4 px-2',
+		restProps.class
+	])}
+	onclick={callback}
+>
+	<Avatar src={avatar} alt="Group Avatar" size="md" />
+	<span class="flex w-full items-center justify-between">
+		<h2 class="text-left font-medium">{name}</h2>
+		{#if unread}
+			<span class="h-2 w-2 rounded-full bg-blue-500"></span>
+		{/if}
+	</span>
+</button>
+
+<!--
+@component
+@name GroupItem
+@description A group item component that displays a group avatar and name, with an optional unread indicator.
+@props
+    - avatar: string - The URL of the group avatar image.
+    - name: string - The group name.
+    - unread: boolean - Optional. Indicates if there are unread messages. Defaults to false.
+    - callback: () => void - Function to call when the group is clicked.
+@usage
+    <script>
+        import GroupItem from '$lib/ui/GroupItem.svelte';
+    </script>
+
+    <GroupItem
+        avatar="https://example.com/group-avatar.jpg"
+        name="Study Buddies"
+        unread={true}
+        callback={() => console.log('Group clicked')}
+    />
+-->
diff --git a/platforms/pictique/src/lib/fragments/index.ts b/platforms/pictique/src/lib/fragments/index.ts
index abe4ed0e..bba6128a 100644
--- a/platforms/pictique/src/lib/fragments/index.ts
+++ b/platforms/pictique/src/lib/fragments/index.ts
@@ -17,3 +17,4 @@ export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
 export { default as UserRequest } from './UserRequest/UserRequest.svelte';
 export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
+export { default as Group } from "./Group/Group.svelte";
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
new file mode 100644
index 00000000..d16f4341
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { ChatMessage, MessageInput } from '$lib/fragments';
+	import { Avatar, Button } from '$lib/ui';
+	import { clickOutside } from '$lib/utils';
+
+	let messagesContainer: HTMLDivElement;
+	let messageValue = $state('');
+	let showMembers = $state(false);
+
+	let userId = 'user-1';
+
+	let group = {
+		id: 'group-123',
+		name: 'Design Team',
+		avatar: 'https://i.pravatar.cc/150?img=15',
+		description: 'Discuss all design-related tasks and updates here.',
+		members: [
+			{ id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' },
+			{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
+			{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
+		]
+	};
+
+	let messages = $state([
+		{
+			id: 'msg-1',
+			isOwn: false,
+			userImgSrc: 'https://i.pravatar.cc/150?img=2',
+			time: '2 minutes ago',
+			message: 'Hey everyone, can we finalize the color palette today?'
+		},
+		{
+			id: 'msg-2',
+			isOwn: true,
+			userImgSrc: 'https://i.pravatar.cc/150?img=1',
+			time: '1 minute ago',
+			message: 'Yes, I just pushed a new draft to Figma.'
+		}
+	]);
+
+	let openMenuId = $state<string | null>(null);
+
+	function scrollToBottom() {
+		if (messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		}
+	}
+
+	onMount(() => {
+		setTimeout(scrollToBottom, 0);
+	});
+
+	function handleSend() {
+		if (!messageValue.trim()) return;
+		messages = [
+			...messages,
+			{
+				id: `msg-${Date.now()}`,
+				isOwn: true,
+				userImgSrc: group.members.find((m) => m.id === userId)?.avatar || '',
+				time: 'just now',
+				message: messageValue
+			}
+		];
+		messageValue = '';
+		setTimeout(scrollToBottom, 0);
+	}
+
+	function currentUserRole() {
+		return group.members.find((m) => m.id === userId)?.role;
+	}
+
+	function canManage(member: { id?: string; name?: string; avatar?: string; role: any; }) {
+		const current = currentUserRole();
+		if (member.role === 'owner') return false;
+		if (current === 'owner') return true;
+		if (current === 'admin' && member.role === 'member') return true;
+		return false;
+	}
+
+	function promoteToAdmin(memberId: string) {
+		const m = group.members.find((m) => m.id === memberId);
+		if (m && m.role === 'member') m.role = 'admin';
+		openMenuId = null;
+	}
+
+	function removeMember(memberId: string) {
+		group.members = group.members.filter((m) => m.id !== memberId || m.role === 'owner');
+		openMenuId = null;
+	}
+
+	function addMember() {
+		const newId = `user-${Date.now()}`;
+		group.members = [
+			...group.members,
+			{
+				id: newId,
+				name: `New Member ${group.members.length + 1}`,
+				avatar: `https://i.pravatar.cc/150?u=${newId}`,
+				role: 'member'
+			}
+		];
+	}
+</script>
+
+<section class="flex items-center justify-between gap-4 px-4 py-3 border-b border-gray-200">
+	<div class="flex items-center gap-4">
+		<Avatar src={group.avatar} />
+		<div>
+			<h1 class="text-lg font-semibold">{group.name}</h1>
+			<p class="text-sm text-gray-600">{group.description}</p>
+		</div>
+	</div>
+	<Button
+		variant="secondary"
+		size="sm"
+		class="w-[max-content]"
+		callback={() => {
+			showMembers = !showMembers;
+			openMenuId = null;
+		}}
+	>
+		{showMembers ? 'Hide Members' : 'View Members'}
+	</Button>
+</section>
+
+{#if showMembers}
+	<section class="px-4 py-3 border-b border-gray-200 space-y-4">
+		{#each group.members as member (member.id)}
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<Avatar src={member.avatar} size="sm" />
+					<div>
+						<span class="text-sm font-medium">{member.name}</span>
+						{#if member.role !== 'member'}
+							<span class="ml-2 text-xs text-gray-500">({member.role})</span>
+						{/if}
+					</div>
+				</div>
+
+				{#if canManage(member)}
+					<div class="relative" use:clickOutside={() => (openMenuId = null)}>
+						<button
+							onclick={() => {(openMenuId = openMenuId === member.id ? null : member.id)}}
+						>
+							⋮
+						</button>
+
+						{#if openMenuId === member.id}
+							<div class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-lg border z-10">
+								<ul class="text-sm">
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									{#if currentUserRole() === 'owner' && member.role === 'member'}
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+										<li
+											class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+											onclick={() => promoteToAdmin(member.id)}
+										>
+											Make admin
+										</li>
+									{/if}
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+									<li
+										class="px-4 py-2 hover:bg-red-50 text-red-600 cursor-pointer"
+										onclick={() => removeMember(member.id)}
+									>
+										Remove member
+									</li>
+								</ul>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/each}
+
+		<Button size="sm" variant="primary" class="w-[max-content] mt-4" callback={addMember}>
+			Add Member
+		</Button>
+	</section>
+{/if}
+
+<section class="chat relative px-0">
+	<div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}>
+		{#each messages as msg (msg.id)}
+			<ChatMessage
+				isOwn={msg.isOwn}
+				userImgSrc={msg.userImgSrc}
+				time={msg.time}
+				message={msg.message}
+			/>
+		{/each}
+	</div>
+
+	<MessageInput
+		class="sticky start-0 bottom-[-15px] w-full"
+		variant="dm"
+		src={group.avatar}
+		bind:value={messageValue}
+		{handleSend}
+	/>
+</section>
diff --git a/platforms/pictique/src/routes/(protected)/messages/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
index 892c4269..854bab27 100644
--- a/platforms/pictique/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
@@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import { apiClient } from '$lib/utils/axios';
 	import { heading } from '../../store';
+	import Group from '$lib/fragments/Group/Group.svelte';
 
 	let messages = $state([]);
 
@@ -45,5 +46,7 @@
 			You don't have any messages yet, please start a Direct Message with Someone by searching
 			their name
 		</div>
+		<!-- group id needs to be added -->
+		<Group name="Developers" avatar="https://picsum.photos/200/300" unread={true} callback={() => goto("/group/123")}/>
 	{/if}
 </section>

From d70a8b40f1a91f19d3cf9cc0b45e3f5464cc2581 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 17 Jul 2025 22:14:37 +0530
Subject: [PATCH 02/11] fix: separate page added for members

---
 .../(protected)/group/[id]/+page.svelte       | 104 +-------------
 .../group/[id]/members/+page.svelte           | 129 ++++++++++++++++++
 2 files changed, 134 insertions(+), 99 deletions(-)
 create mode 100644 platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index d16f4341..07abd324 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -2,13 +2,14 @@
 	import { onMount } from 'svelte';
 	import { ChatMessage, MessageInput } from '$lib/fragments';
 	import { Avatar, Button } from '$lib/ui';
-	import { clickOutside } from '$lib/utils';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');
-	let showMembers = $state(false);
 
 	let userId = 'user-1';
+	let id = page.params.id;
 
 	let group = {
 		id: 'group-123',
@@ -66,42 +67,6 @@
 		messageValue = '';
 		setTimeout(scrollToBottom, 0);
 	}
-
-	function currentUserRole() {
-		return group.members.find((m) => m.id === userId)?.role;
-	}
-
-	function canManage(member: { id?: string; name?: string; avatar?: string; role: any; }) {
-		const current = currentUserRole();
-		if (member.role === 'owner') return false;
-		if (current === 'owner') return true;
-		if (current === 'admin' && member.role === 'member') return true;
-		return false;
-	}
-
-	function promoteToAdmin(memberId: string) {
-		const m = group.members.find((m) => m.id === memberId);
-		if (m && m.role === 'member') m.role = 'admin';
-		openMenuId = null;
-	}
-
-	function removeMember(memberId: string) {
-		group.members = group.members.filter((m) => m.id !== memberId || m.role === 'owner');
-		openMenuId = null;
-	}
-
-	function addMember() {
-		const newId = `user-${Date.now()}`;
-		group.members = [
-			...group.members,
-			{
-				id: newId,
-				name: `New Member ${group.members.length + 1}`,
-				avatar: `https://i.pravatar.cc/150?u=${newId}`,
-				role: 'member'
-			}
-		];
-	}
 </script>
 
 <section class="flex items-center justify-between gap-4 px-4 py-3 border-b border-gray-200">
@@ -117,72 +82,13 @@
 		size="sm"
 		class="w-[max-content]"
 		callback={() => {
-			showMembers = !showMembers;
-			openMenuId = null;
+			goto(`/group/${id}/members`)
 		}}
 	>
-		{showMembers ? 'Hide Members' : 'View Members'}
+		View Members
 	</Button>
 </section>
 
-{#if showMembers}
-	<section class="px-4 py-3 border-b border-gray-200 space-y-4">
-		{#each group.members as member (member.id)}
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-3">
-					<Avatar src={member.avatar} size="sm" />
-					<div>
-						<span class="text-sm font-medium">{member.name}</span>
-						{#if member.role !== 'member'}
-							<span class="ml-2 text-xs text-gray-500">({member.role})</span>
-						{/if}
-					</div>
-				</div>
-
-				{#if canManage(member)}
-					<div class="relative" use:clickOutside={() => (openMenuId = null)}>
-						<button
-							onclick={() => {(openMenuId = openMenuId === member.id ? null : member.id)}}
-						>
-							⋮
-						</button>
-
-						{#if openMenuId === member.id}
-							<div class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-lg border z-10">
-								<ul class="text-sm">
-									<!-- svelte-ignore a11y_click_events_have_key_events -->
-									{#if currentUserRole() === 'owner' && member.role === 'member'}
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
-										<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-										<li
-											class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-											onclick={() => promoteToAdmin(member.id)}
-										>
-											Make admin
-										</li>
-									{/if}
-									<!-- svelte-ignore a11y_click_events_have_key_events -->
-									<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-									<li
-										class="px-4 py-2 hover:bg-red-50 text-red-600 cursor-pointer"
-										onclick={() => removeMember(member.id)}
-									>
-										Remove member
-									</li>
-								</ul>
-							</div>
-						{/if}
-					</div>
-				{/if}
-			</div>
-		{/each}
-
-		<Button size="sm" variant="primary" class="w-[max-content] mt-4" callback={addMember}>
-			Add Member
-		</Button>
-	</section>
-{/if}
-
 <section class="chat relative px-0">
 	<div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}>
 		{#each messages as msg (msg.id)}
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
new file mode 100644
index 00000000..3a441f84
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Avatar, Button } from '$lib/ui';
+	import { clickOutside } from '$lib/utils';
+
+	let groupId = page.params.id;
+
+	let userId = 'user-1'; // Simulated current user
+
+	let group = $state({
+		id: groupId,
+		name: 'Design Team',
+		avatar: 'https://i.pravatar.cc/150?img=15',
+		description: 'Discuss all design-related tasks and updates here.',
+		members: [
+			{ id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' },
+			{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
+			{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
+		]
+	});
+
+	let openMenuId = $state<string | null>(null);
+
+	function currentUserRole() {
+		return group.members.find((m) => m.id === userId)?.role;
+	}
+
+	function canManage(member: { id?: string; name?: string; avatar?: string; role: any; }) {
+		const current = currentUserRole();
+		if (member.role === 'owner') return false;
+		if (current === 'owner') return true;
+		if (current === 'admin' && member.role === 'member') return true;
+		return false;
+	}
+
+	function promoteToAdmin(memberId: string) {
+		const m = group.members.find((m) => m.id === memberId);
+		if (m && m.role === 'member') m.role = 'admin';
+		openMenuId = null;
+	}
+
+	function removeMember(memberId: string) {
+		group.members = group.members.filter((m) => m.id !== memberId || m.role === 'owner');
+		openMenuId = null;
+	}
+
+	function addMember() {
+		const newId = `user-${Date.now()}`;
+		group.members = [
+			...group.members,
+			{
+				id: newId,
+				name: `New Member ${group.members.length + 1}`,
+				avatar: `https://i.pravatar.cc/150?u=${newId}`,
+				role: 'member'
+			}
+		];
+	}
+</script>
+
+<section class="mx-auto w-full h-[80vh] flex flex-col justify-between">
+	<div>
+	<div class="flex items-center gap-4 mb-6">
+		<Avatar src={group.avatar} />
+		<div>
+			<h1 class="text-xl font-semibold">{group.name}</h1>
+			<p class="text-sm text-gray-600">{group.description}</p>
+		</div>
+	</div>
+
+	<div class="space-y-6">
+		{#each group.members as member (member.id)}
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<Avatar src={member.avatar} size="sm" />
+					<div>
+						<p class="text-sm font-medium">{member.name}</p>
+						{#if member.role !== 'member'}
+							<p class="text-xs text-gray-500">{member.role}</p>
+						{/if}
+					</div>
+				</div>
+
+				{#if canManage(member)}
+					<div class="relative" use:clickOutside={() => (openMenuId = null)}>
+						<button
+							onclick={() => (openMenuId = openMenuId === member.id ? null : member.id)}
+						>
+							⋮
+						</button>
+
+						{#if openMenuId === member.id}
+							<div class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-lg border z-10">
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<ul class="text-sm">
+									{#if currentUserRole() === 'owner' && member.role === 'member'}
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+										<li
+											class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+											onclick={() => promoteToAdmin(member.id)}
+										>
+											Make admin
+										</li>
+									{/if}
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+									<li
+										class="px-4 py-2 hover:bg-red-50 text-red-600 cursor-pointer"
+										onclick={() => removeMember(member.id)}
+									>
+										Remove member
+									</li>
+								</ul>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+	</div>
+
+	<div class="flex justify-center">
+		<Button size="sm" variant="secondary" class="mt-6" callback={addMember}>
+			Add Member
+		</Button>
+	</div>
+</section>

From 5202216942beb9fa3291d3619c578a2c71d9a880 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 12:22:11 +0530
Subject: [PATCH 03/11] fix: added a edit modal

---
 .../(protected)/group/[id]/+page.svelte       | 105 +++++++++++++++---
 .../group/[id]/members/+page.svelte           |   2 +-
 2 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 07abd324..e96875ac 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { ChatMessage, MessageInput } from '$lib/fragments';
-	import { Avatar, Button } from '$lib/ui';
+	import { Avatar, Button, Input, Label } from '$lib/ui';
+	import { InputFile } from '$lib/fragments';
+	import { HugeiconsFreeIcons, Edit01FreeIcons } from '@hugeicons/core-free-icons';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
+	import Settings from '$lib/icons/Settings.svelte';
+	import { clickOutside } from '$lib/utils';
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');
+	let openMenuId = $state<string | null>(null);
 
 	let userId = 'user-1';
 	let id = page.params.id;
@@ -40,8 +45,6 @@
 		}
 	]);
 
-	let openMenuId = $state<string | null>(null);
-
 	function scrollToBottom() {
 		if (messagesContainer) {
 			messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -67,8 +70,39 @@
 		messageValue = '';
 		setTimeout(scrollToBottom, 0);
 	}
+
+	// Edit Dialog state and logic
+	let openEditDialog = $state(false);
+	let groupName = $state(group.name);
+	let groupDescription = $state(group.description);
+	let groupImageDataUrl = $state(group.avatar);
+	let groupImageFiles = $state<FileList | undefined>();
+
+	function handleGroupImageChange() {
+		if (groupImageFiles && groupImageFiles[0]) {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				if (e.target?.result) {
+					groupImageDataUrl = e.target.result as string;
+				}
+			};
+			reader.readAsDataURL(groupImageFiles[0]);
+		}
+	}
+
+	$effect(() => {
+		if (groupImageFiles) handleGroupImageChange();
+	});
+
+	function saveGroupInfo() {
+		group.name = groupName;
+		group.description = groupDescription;
+		group.avatar = groupImageDataUrl;
+		openEditDialog = false;
+	}
 </script>
 
+<!-- Group Header -->
 <section class="flex items-center justify-between gap-4 px-4 py-3 border-b border-gray-200">
 	<div class="flex items-center gap-4">
 		<Avatar src={group.avatar} />
@@ -77,18 +111,26 @@
 			<p class="text-sm text-gray-600">{group.description}</p>
 		</div>
 	</div>
-	<Button
-		variant="secondary"
-		size="sm"
-		class="w-[max-content]"
-		callback={() => {
-			goto(`/group/${id}/members`)
-		}}
-	>
-		View Members
-	</Button>
+	<div class="flex items-center gap-2">
+		<Button
+			variant="secondary"
+			size="sm"
+			class="w-[max-content]"
+			callback={() => {
+				goto(`/group/${id}/members`);
+			}}
+		>
+			View Members
+		</Button>
+		<button
+			onclick={() => (openEditDialog = true)}
+		>
+			<Settings  size="24px" color="var(--color-brand-burnt-orange)" />
+		</button>
+	</div>
 </section>
 
+<!-- Chat Area -->
 <section class="chat relative px-0">
 	<div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}>
 		{#each messages as msg (msg.id)}
@@ -109,3 +151,40 @@
 		{handleSend}
 	/>
 </section>
+
+<dialog open={openEditDialog} use:clickOutside={() => openEditDialog = false} onclose={() => (openEditDialog = false)} class="absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4" >
+	<div class="flex flex-col gap-6">
+		<div>
+			<InputFile
+				bind:files={groupImageFiles}
+				accept="image/*"
+				label="Upload Group Avatar"
+				cancelLabel="Remove"
+				oncancel={() => {
+					groupImageDataUrl = '';
+					groupImageFiles = undefined;
+				}}
+			/>
+			{#if groupImageDataUrl}
+				<img
+					src={groupImageDataUrl}
+					alt="Group preview"
+					class="mt-2 h-24 w-24 rounded-full object-cover"
+				/>
+			{/if}
+		</div>
+
+		<div>
+			<Label>Group Name</Label>
+			<Input type="text" placeholder="Edit group name" bind:value={groupName} />
+		</div>
+
+		<div>
+			<Label>Description</Label>
+			<Input type="text" placeholder="Edit group description" bind:value={groupDescription} />
+		</div>
+
+		<hr class="text-grey" />
+		<Button size="sm" variant="secondary" callback={saveGroupInfo}>Save Changes</Button>
+	</div>
+</dialog>
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
index 3a441f84..f351c05f 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
@@ -5,7 +5,7 @@
 
 	let groupId = page.params.id;
 
-	let userId = 'user-1'; // Simulated current user
+	let userId = 'user-1'; 
 
 	let group = $state({
 		id: groupId,

From 0c50d7e5b55b42d99363d700c40412f3d74e59b5 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 12:46:15 +0530
Subject: [PATCH 04/11] fix: responsiveness

---
 .../(protected)/group/[id]/+page.svelte       | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index e96875ac..b52a94a0 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -3,20 +3,21 @@
 	import { ChatMessage, MessageInput } from '$lib/fragments';
 	import { Avatar, Button, Input, Label } from '$lib/ui';
 	import { InputFile } from '$lib/fragments';
-	import { HugeiconsFreeIcons, Edit01FreeIcons } from '@hugeicons/core-free-icons';
+	import { Edit01FreeIcons } from '@hugeicons/core-free-icons';
+	import {HugeiconsIcon} from "@hugeicons/svelte";
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import Settings from '$lib/icons/Settings.svelte';
 	import { clickOutside } from '$lib/utils';
+	import VerticalDots from '$lib/icons/VerticalDots.svelte';
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');
-	let openMenuId = $state<string | null>(null);
 
 	let userId = 'user-1';
 	let id = page.params.id;
 
-	let group = {
+	let group = $state({
 		id: 'group-123',
 		name: 'Design Team',
 		avatar: 'https://i.pravatar.cc/150?img=15',
@@ -26,7 +27,7 @@
 			{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
 			{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
 		]
-	};
+	});
 
 	let messages = $state([
 		{
@@ -71,7 +72,6 @@
 		setTimeout(scrollToBottom, 0);
 	}
 
-	// Edit Dialog state and logic
 	let openEditDialog = $state(false);
 	let groupName = $state(group.name);
 	let groupDescription = $state(group.description);
@@ -102,8 +102,7 @@
 	}
 </script>
 
-<!-- Group Header -->
-<section class="flex items-center justify-between gap-4 px-4 py-3 border-b border-gray-200">
+<section class="flex flex-col md:flex-row items-center justify-between gap-4 px-2 md:px-4 py-3 border-b border-gray-200">
 	<div class="flex items-center gap-4">
 		<Avatar src={group.avatar} />
 		<div>
@@ -124,13 +123,13 @@
 		</Button>
 		<button
 			onclick={() => (openEditDialog = true)}
+			class="border border-brand-burnt-orange-900 rounded-full p-2"
 		>
 			<Settings  size="24px" color="var(--color-brand-burnt-orange)" />
 		</button>
 	</div>
 </section>
 
-<!-- Chat Area -->
 <section class="chat relative px-0">
 	<div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}>
 		{#each messages as msg (msg.id)}
@@ -152,7 +151,7 @@
 	/>
 </section>
 
-<dialog open={openEditDialog} use:clickOutside={() => openEditDialog = false} onclose={() => (openEditDialog = false)} class="absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4" >
+<dialog open={openEditDialog} use:clickOutside={() => openEditDialog = false} onclose={() => (openEditDialog = false)} class="w-full max-w-[300px] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-2 border border-gray-100 rounded-4xl" >
 	<div class="flex flex-col gap-6">
 		<div>
 			<InputFile
@@ -166,10 +165,11 @@
 				}}
 			/>
 			{#if groupImageDataUrl}
-				<img
+				<Avatar
+				class="mt-4"
 					src={groupImageDataUrl}
 					alt="Group preview"
-					class="mt-2 h-24 w-24 rounded-full object-cover"
+					size="lg"
 				/>
 			{/if}
 		</div>

From d3d2485b70eab5843c52d223e1fc6d96e5a717ba Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 12:46:31 +0530
Subject: [PATCH 05/11] fix: responsiveness

---
 .../pictique/src/routes/(protected)/group/[id]/+page.svelte    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index b52a94a0..d1a43573 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -3,13 +3,10 @@
 	import { ChatMessage, MessageInput } from '$lib/fragments';
 	import { Avatar, Button, Input, Label } from '$lib/ui';
 	import { InputFile } from '$lib/fragments';
-	import { Edit01FreeIcons } from '@hugeicons/core-free-icons';
-	import {HugeiconsIcon} from "@hugeicons/svelte";
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import Settings from '$lib/icons/Settings.svelte';
 	import { clickOutside } from '$lib/utils';
-	import VerticalDots from '$lib/icons/VerticalDots.svelte';
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');

From be3ec6f4e578e3a9941595a53dc64b49e5941390 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 13:10:58 +0530
Subject: [PATCH 06/11] fix: role based editing

---
 .../(protected)/group/[id]/+page.svelte       | 91 +++++++++++--------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index d1a43573..a311b583 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { ChatMessage, MessageInput } from '$lib/fragments';
+	import { ChatMessage, MessageInput, InputFile } from '$lib/fragments';
 	import { Avatar, Button, Input, Label } from '$lib/ui';
-	import { InputFile } from '$lib/fragments';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import Settings from '$lib/icons/Settings.svelte';
@@ -10,7 +9,6 @@
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');
-
 	let userId = 'user-1';
 	let id = page.params.id;
 
@@ -75,28 +73,28 @@
 	let groupImageDataUrl = $state(group.avatar);
 	let groupImageFiles = $state<FileList | undefined>();
 
-	function handleGroupImageChange() {
-		if (groupImageFiles && groupImageFiles[0]) {
+	$effect(()=> {
+		if (groupImageFiles?.[0]) {
+			const file = groupImageFiles[0];
 			const reader = new FileReader();
 			reader.onload = (e) => {
 				if (e.target?.result) {
 					groupImageDataUrl = e.target.result as string;
 				}
 			};
-			reader.readAsDataURL(groupImageFiles[0]);
+			reader.readAsDataURL(file);
 		}
-	}
-
-	$effect(() => {
-		if (groupImageFiles) handleGroupImageChange();
-	});
-
+	}) 
+		
 	function saveGroupInfo() {
 		group.name = groupName;
 		group.description = groupDescription;
 		group.avatar = groupImageDataUrl;
 		openEditDialog = false;
 	}
+
+	const currentUser = group.members.find((m) => m.id === userId);
+	const canEdit = currentUser?.role === 'admin' || currentUser?.role === 'owner';
 </script>
 
 <section class="flex flex-col md:flex-row items-center justify-between gap-4 px-2 md:px-4 py-3 border-b border-gray-200">
@@ -118,12 +116,14 @@
 		>
 			View Members
 		</Button>
-		<button
-			onclick={() => (openEditDialog = true)}
-			class="border border-brand-burnt-orange-900 rounded-full p-2"
-		>
-			<Settings  size="24px" color="var(--color-brand-burnt-orange)" />
-		</button>
+		{#if canEdit}
+			<button
+				onclick={() => (openEditDialog = true)}
+				class="border border-brand-burnt-orange-900 rounded-full p-2"
+			>
+				<Settings size="24px" color="var(--color-brand-burnt-orange)" />
+			</button>
+		{/if}
 	</div>
 </section>
 
@@ -148,40 +148,55 @@
 	/>
 </section>
 
-<dialog open={openEditDialog} use:clickOutside={() => openEditDialog = false} onclose={() => (openEditDialog = false)} class="w-full max-w-[300px] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-2 border border-gray-100 rounded-4xl" >
+<dialog
+	open={openEditDialog}
+	use:clickOutside={() => (openEditDialog = false)}
+	onclose={() => (openEditDialog = false)}
+	class="w-[90vw] md:max-w-[30vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
+>
 	<div class="flex flex-col gap-6">
 		<div>
-			<InputFile
-				bind:files={groupImageFiles}
-				accept="image/*"
-				label="Upload Group Avatar"
-				cancelLabel="Remove"
-				oncancel={() => {
-					groupImageDataUrl = '';
-					groupImageFiles = undefined;
-				}}
-			/>
-			{#if groupImageDataUrl}
-				<Avatar
-				class="mt-4"
-					src={groupImageDataUrl}
-					alt="Group preview"
-					size="lg"
+			{#if canEdit}
+				<InputFile
+					bind:files={groupImageFiles}
+					accept="image/*"
+					label="Upload Group Avatar"
+					cancelLabel="Remove"
+					oncancel={() => {
+						groupImageDataUrl = '';
+						groupImageFiles = undefined;
+					}}
 				/>
 			{/if}
+			{#if groupImageDataUrl}
+				<Avatar class="mt-4" src={groupImageDataUrl} alt="Group preview" size="lg" />
+			{/if}
 		</div>
 
 		<div>
 			<Label>Group Name</Label>
-			<Input type="text" placeholder="Edit group name" bind:value={groupName} />
+			{#if canEdit}
+				<Input type="text" placeholder="Edit group name" bind:value={groupName} />
+			{:else}
+				<p class="text-gray-700">{group.name}</p>
+			{/if}
 		</div>
 
 		<div>
 			<Label>Description</Label>
-			<Input type="text" placeholder="Edit group description" bind:value={groupDescription} />
+			{#if canEdit}
+				<Input type="text" placeholder="Edit group description" bind:value={groupDescription} />
+			{:else}
+				<p class="text-gray-700">{group.description}</p>
+			{/if}
 		</div>
 
 		<hr class="text-grey" />
-		<Button size="sm" variant="secondary" callback={saveGroupInfo}>Save Changes</Button>
+		<div class="flex items-center gap-2">
+			<Button size="sm" variant="primary" callback={() => {(openEditDialog = false)}}>Cancel</Button>
+			{#if canEdit}
+				<Button size="sm" variant="secondary" callback={saveGroupInfo}>Save Changes</Button>
+			{/if}
+		</div>
 	</div>
 </dialog>

From cf4617dc585e0b71a66ea9fe06f7372f587ea81c Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 13:20:10 +0530
Subject: [PATCH 07/11] fix: user role based edit in group info

---
 .../src/routes/(protected)/group/[id]/+page.svelte | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index a311b583..1ee3f300 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -116,14 +116,12 @@
 		>
 			View Members
 		</Button>
-		{#if canEdit}
-			<button
-				onclick={() => (openEditDialog = true)}
-				class="border border-brand-burnt-orange-900 rounded-full p-2"
-			>
-				<Settings size="24px" color="var(--color-brand-burnt-orange)" />
-			</button>
-		{/if}
+		<button
+			onclick={() => (openEditDialog = true)}
+			class="border border-brand-burnt-orange-900 rounded-full p-2"
+		>
+			<Settings size="24px" color="var(--color-brand-burnt-orange)" />
+		</button>
 	</div>
 </section>
 

From 25613d5e8569951984d69a8baf992a8db10d010e Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 13:37:11 +0530
Subject: [PATCH 08/11] fix: edit image with pencil icon

---
 .../(protected)/group/[id]/+page.svelte       | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 1ee3f300..71d3fe53 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -6,6 +6,8 @@
 	import { page } from '$app/state';
 	import Settings from '$lib/icons/Settings.svelte';
 	import { clickOutside } from '$lib/utils';
+	import { Pen01FreeIcons } from '@hugeicons/core-free-icons';
+	import {HugeiconsIcon} from "@hugeicons/svelte"
 
 	let messagesContainer: HTMLDivElement;
 	let messageValue = $state('');
@@ -153,21 +155,30 @@
 	class="w-[90vw] md:max-w-[30vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
 >
 	<div class="flex flex-col gap-6">
-		<div>
+		<!-- Group Avatar with Edit Icon -->
+		<div class="relative w-[96px] h-[96px] self-center">
+			<img
+				src={groupImageDataUrl || '/images/avatar-placeholder.png'}
+				alt="Group Avatar"
+				class="w-full h-full object-cover rounded-full border border-gray-300"
+			/>
 			{#if canEdit}
-				<InputFile
-					bind:files={groupImageFiles}
+				<!-- Hidden file input trigger -->
+				<input
+					type="file"
 					accept="image/*"
-					label="Upload Group Avatar"
-					cancelLabel="Remove"
-					oncancel={() => {
-						groupImageDataUrl = '';
-						groupImageFiles = undefined;
+					class="hidden"
+					id="group-avatar-input"
+					onchange={(e) => {
+						const files = (e.target as HTMLInputElement).files;
+						if (files && files[0]) {
+							groupImageFiles = files;
+						}
 					}}
 				/>
-			{/if}
-			{#if groupImageDataUrl}
-				<Avatar class="mt-4" src={groupImageDataUrl} alt="Group preview" size="lg" />
+				<label for="group-avatar-input" class="absolute bottom-0 right-0 bg-brand-burnt-orange  border border-brand-burnt-orange rounded-full p-1 shadow cursor-pointer">
+					<HugeiconsIcon icon={Pen01FreeIcons} color="white"/>
+				</label>
 			{/if}
 		</div>
 
@@ -180,6 +191,7 @@
 			{/if}
 		</div>
 
+		<!-- Group Description -->
 		<div>
 			<Label>Description</Label>
 			{#if canEdit}
@@ -190,6 +202,7 @@
 		</div>
 
 		<hr class="text-grey" />
+
 		<div class="flex items-center gap-2">
 			<Button size="sm" variant="primary" callback={() => {(openEditDialog = false)}}>Cancel</Button>
 			{#if canEdit}
@@ -198,3 +211,4 @@
 		</div>
 	</div>
 </dialog>
+

From a0ff772a938ff9d689cf079649c7c52a87fad1f6 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 14:12:37 +0530
Subject: [PATCH 09/11] fix: added a text area

---
 .../src/lib/fragments/Group/Group.svelte      |  10 +-
 .../SettingsNavigationButton.svelte           |   2 +-
 platforms/pictique/src/lib/fragments/index.ts |   2 +-
 .../pictique/src/lib/store/store.svelte.ts    |   1 -
 platforms/pictique/src/lib/stores/posts.ts    | 106 +++++++++---------
 platforms/pictique/src/lib/types.ts           |  66 +++++------
 .../(protected)/group/[id]/+page.svelte       |   9 +-
 7 files changed, 94 insertions(+), 102 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/Group/Group.svelte b/platforms/pictique/src/lib/fragments/Group/Group.svelte
index 928de7ae..d4967445 100644
--- a/platforms/pictique/src/lib/fragments/Group/Group.svelte
+++ b/platforms/pictique/src/lib/fragments/Group/Group.svelte
@@ -10,19 +10,13 @@
 		callback: () => void;
 	}
 
-	const {
-		avatar,
-		name,
-		unread = false,
-		callback,
-		...restProps
-	}: IGroupProps = $props();
+	const { avatar, name, unread = false, callback, ...restProps }: IGroupProps = $props();
 </script>
 
 <button
 	{...restProps}
 	class={cn([
-		'relative flex w-full cursor-pointer items-center gap-3 rounded-lg py-4 px-2',
+		'relative flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-4',
 		restProps.class
 	])}
 	onclick={callback}
diff --git a/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte b/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
index 05617d8b..1461331e 100644
--- a/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
+++ b/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
@@ -38,7 +38,7 @@
 			<img
 				width="24px"
 				height="24px"
-				class="flex aspect-square size-10 items-center justify-center rounded-full md:size-12 object-cover"
+				class="flex aspect-square size-10 items-center justify-center rounded-full object-cover md:size-12"
 				src={profileSrc}
 				alt=""
 			/>
diff --git a/platforms/pictique/src/lib/fragments/index.ts b/platforms/pictique/src/lib/fragments/index.ts
index bba6128a..ad355640 100644
--- a/platforms/pictique/src/lib/fragments/index.ts
+++ b/platforms/pictique/src/lib/fragments/index.ts
@@ -17,4 +17,4 @@ export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
 export { default as UserRequest } from './UserRequest/UserRequest.svelte';
 export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
-export { default as Group } from "./Group/Group.svelte";
+export { default as Group } from './Group/Group.svelte';
diff --git a/platforms/pictique/src/lib/store/store.svelte.ts b/platforms/pictique/src/lib/store/store.svelte.ts
index 1a090e49..f2c1e026 100644
--- a/platforms/pictique/src/lib/store/store.svelte.ts
+++ b/platforms/pictique/src/lib/store/store.svelte.ts
@@ -23,4 +23,3 @@ export const uploadedImages: { value: Image[] | null } = $state({
 export const audience: { value: string } = $state({
 	value: 'Everyone'
 });
-
diff --git a/platforms/pictique/src/lib/stores/posts.ts b/platforms/pictique/src/lib/stores/posts.ts
index bb653d14..a9fbfc71 100644
--- a/platforms/pictique/src/lib/stores/posts.ts
+++ b/platforms/pictique/src/lib/stores/posts.ts
@@ -3,28 +3,28 @@ import { apiClient } from '$lib/utils/axios';
 import { goto } from '$app/navigation';
 
 export interface Post {
-    id: string;
-    text: string;
-    images: string[];
-    author: {
-        id: string;
-        handle: string;
-        name: string;
-        avatarUrl: string;
-    };
-    createdAt: string;
-    likedBy: string[];
-    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: string[];
+	comments: {
+		id: string;
+		text: string;
+		author: {
+			id: string;
+			handle: string;
+			name: string;
+			avatarUrl: string;
+		};
+		createdAt: string;
+	}[];
 }
 
 export const posts = writable<Post[]>([]);
@@ -36,41 +36,41 @@ export const openCreatePostModal = () => isCreatePostModalOpen.set(true);
 export const closeCreatePostModal = () => isCreatePostModalOpen.set(false);
 
 export const fetchFeed = async (page = 1, limit = 10_000) => {
-    try {
-        isLoading.set(true);
-        error.set(null);
-        const response = await apiClient.get(`/api/posts/feed?page=${page}&limit=${limit}`);
-        posts.set(response.data);
-    } catch (err) {
-        error.set(err instanceof Error ? err.message : 'Failed to fetch feed');
-    } finally {
-        isLoading.set(false);
-    }
+	try {
+		isLoading.set(true);
+		error.set(null);
+		const response = await apiClient.get(`/api/posts/feed?page=${page}&limit=${limit}`);
+		posts.set(response.data);
+	} catch (err) {
+		error.set(err instanceof Error ? err.message : 'Failed to fetch feed');
+	} finally {
+		isLoading.set(false);
+	}
 };
 
 export const createPost = async (text: string, images: string[]) => {
-    try {
-        isLoading.set(true);
-        error.set(null);
-        const response = await apiClient.post('/api/posts', {
-            text,
-            images: images.map((img) => img)
-        });
-        await fetchFeed(1);
-        return response.data;
-    } catch (err) {
-        error.set(err instanceof Error ? err.message : 'Failed to create post');
-        throw err;
-    } finally {
-        isLoading.set(false);
-    }
+	try {
+		isLoading.set(true);
+		error.set(null);
+		const response = await apiClient.post('/api/posts', {
+			text,
+			images: images.map((img) => img)
+		});
+		await fetchFeed(1);
+		return response.data;
+	} catch (err) {
+		error.set(err instanceof Error ? err.message : 'Failed to create post');
+		throw err;
+	} finally {
+		isLoading.set(false);
+	}
 };
 
 export const toggleLike = async (postId: string) => {
-    try {
-        const response = await apiClient.post(`/api/posts/${postId}/like`);
-        return response.data;
-    } catch (err) {
-        throw new Error(err instanceof Error ? err.message : 'Failed to toggle like');
-    }
+	try {
+		const response = await apiClient.post(`/api/posts/${postId}/like`);
+		return response.data;
+	} catch (err) {
+		throw new Error(err instanceof Error ? err.message : 'Failed to toggle like');
+	}
 };
diff --git a/platforms/pictique/src/lib/types.ts b/platforms/pictique/src/lib/types.ts
index b21b4334..6d76ed35 100644
--- a/platforms/pictique/src/lib/types.ts
+++ b/platforms/pictique/src/lib/types.ts
@@ -1,49 +1,49 @@
-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;
-    username: string;
-    imgUris: string[];
-    caption: string;
-    time: string;
-    count: {
-        likes: number;
-        comments: number;
-    };
+	id: string;
+	avatar: string;
+	userId: string;
+	username: string;
+	imgUris: string[];
+	caption: string;
+	time: string;
+	count: {
+		likes: number;
+		comments: number;
+	};
 };
 
 export type userProfile = {
-    userId: string;
-    username: string;
-    avatarUrl: string;
-    totalPosts: number;
-    followers: number;
-    following: number;
-    userBio: string;
-    posts: PostData[];
+	userId: string;
+	username: string;
+	avatarUrl: string;
+	totalPosts: number;
+	followers: number;
+	following: number;
+	userBio: string;
+	posts: PostData[];
 };
 
 export type Image = {
-    url: string;
-    alt: string;
+	url: string;
+	alt: string;
 };
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 71d3fe53..53a24267 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { ChatMessage, MessageInput, InputFile } from '$lib/fragments';
+	import { ChatMessage, MessageInput } from '$lib/fragments';
 	import { Avatar, Button, Input, Label } from '$lib/ui';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
@@ -155,7 +155,6 @@
 	class="w-[90vw] md:max-w-[30vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
 >
 	<div class="flex flex-col gap-6">
-		<!-- Group Avatar with Edit Icon -->
 		<div class="relative w-[96px] h-[96px] self-center">
 			<img
 				src={groupImageDataUrl || '/images/avatar-placeholder.png'}
@@ -163,7 +162,6 @@
 				class="w-full h-full object-cover rounded-full border border-gray-300"
 			/>
 			{#if canEdit}
-				<!-- Hidden file input trigger -->
 				<input
 					type="file"
 					accept="image/*"
@@ -191,11 +189,12 @@
 			{/if}
 		</div>
 
-		<!-- Group Description -->
 		<div>
 			<Label>Description</Label>
 			{#if canEdit}
-				<Input type="text" placeholder="Edit group description" bind:value={groupDescription} />
+				<!-- svelte-ignore element_invalid_self_closing_tag -->
+				<textarea rows="2"
+				maxlength="60" placeholder="Edit group description" class="w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent" bind:value={groupDescription} />
 			{:else}
 				<p class="text-gray-700">{group.description}</p>
 			{/if}

From a419df9147bc048b4b9d037931e1b1085fd142c8 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 15:04:57 +0530
Subject: [PATCH 10/11] feat: new group functionality and textarea fixed

---
 platforms/pictique/src/lib/types.ts           |   6 +
 .../routes/(protected)/messages/+page.svelte  | 164 ++++++++++++++++--
 2 files changed, 157 insertions(+), 13 deletions(-)

diff --git a/platforms/pictique/src/lib/types.ts b/platforms/pictique/src/lib/types.ts
index 6d76ed35..153522a1 100644
--- a/platforms/pictique/src/lib/types.ts
+++ b/platforms/pictique/src/lib/types.ts
@@ -47,3 +47,9 @@ export type Image = {
 	url: string;
 	alt: string;
 };
+
+export type GroupInfo = {
+	id: string;
+	name: string;
+	avatar: string;
+};
\ No newline at end of file
diff --git a/platforms/pictique/src/routes/(protected)/messages/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
index 854bab27..915f8336 100644
--- a/platforms/pictique/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
@@ -1,16 +1,35 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { Message } from '$lib/fragments';
 	import { onMount } from 'svelte';
-	import { apiClient } from '$lib/utils/axios';
-	import { heading } from '../../store';
+	import { Message } from '$lib/fragments';
 	import Group from '$lib/fragments/Group/Group.svelte';
+	import { Button, Avatar, Input } from '$lib/ui';
+	import { clickOutside } from '$lib/utils';
+	import { heading } from '../../store';
+	import { apiClient } from '$lib/utils/axios';
+
+	import {
+		searchUsers,
+		searchResults,
+		isSearching,
+		searchError
+	} from '$lib/stores/users';
+	import type { GroupInfo } from '$lib/types';
 
 	let messages = $state([]);
+	let groups: GroupInfo[] = $state([]);
+	let allMembers = $state([]);
+	let selectedMembers = $state<string[]>([]);
+	let currentUserId = '';
+	let openNewChatModal = $state(false);
+	let searchValue = $state('');
+	let debounceTimer: NodeJS.Timeout;
 
-	onMount(async () => {
+	async function loadMessages() {
 		const { data } = await apiClient.get('/api/chats');
 		const { data: userData } = await apiClient.get('/api/users');
+		currentUserId = userData.id;
+
 		messages = data.chats.map((c) => {
 			const members = c.participants.filter((u) => u.id !== userData.id);
 			const memberNames = members.map((m) => m.name ?? m.handle ?? m.ename);
@@ -23,14 +42,80 @@
 				text: c.latestMessage?.text ?? 'No message yet'
 			};
 		});
+	}
+
+	onMount(async () => {
+		await loadMessages();
+
+		const memberRes = await apiClient.get('/api/members');
+		allMembers = memberRes.data;
 	});
+
+	function toggleMemberSelection(id: string) {
+		if (selectedMembers.includes(id)) {
+			selectedMembers = selectedMembers.filter((m) => m !== id);
+		} else {
+			selectedMembers = [...selectedMembers, id];
+		}
+	}
+
+	function handleSearch(value: string) {
+		searchValue = value;
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			searchUsers(value);
+		}, 300);
+	}
+
+	async function createChat() {
+		if (selectedMembers.length === 0) return;
+
+		try {
+			if (selectedMembers.length === 1) {
+				await apiClient.post(`/api/chats/`, {
+					name:
+						allMembers.find((m) => m.id === selectedMembers[0])?.name ??
+						'New Chat',
+					participantIds: [selectedMembers[0]]
+				});
+				await loadMessages(); // 🛠️ Refresh to include the new direct message
+			} else {
+				const groupMembers = allMembers.filter((m) =>
+					selectedMembers.includes(m.id)
+				);
+				const groupName = groupMembers.map((m) => m.name ?? m.handle ?? m.ename).join(', ');
+				groups = [
+					...groups,
+					{
+						id: Math.random().toString(36).slice(2),
+						name: groupName,
+						avatar: '/images/group.png'
+					}
+				];
+			}
+		} catch (err) {
+			console.error('Failed to create chat:', err);
+		} finally {
+			openNewChatModal = false;
+			selectedMembers = [];
+			searchValue = '';
+		}
+	}
 </script>
 
-<section>
-	{#if messages && messages.length > 0}
+
+<section class="px-4 py-4">
+	<div class="flex justify-end mb-4">
+		<Button variant="secondary" size="sm" callback={() => {(openNewChatModal = true)}}>
+			New Chat
+		</Button>
+	</div>
+
+	{#if messages.length > 0}
+		<h3 class="text-md font-semibold text-gray-700 mb-2">Messages</h3>
 		{#each messages as message}
 			<Message
-				class="mb-6"
+				class="mb-2"
 				avatar={message.avatar}
 				username={message.username}
 				text={message.text}
@@ -41,12 +126,65 @@
 				}}
 			/>
 		{/each}
-	{:else}
-		<div class="w-full px-5 py-5 text-center">
-			You don't have any messages yet, please start a Direct Message with Someone by searching
-			their name
+	{/if}
+
+	{#if groups.length > 0}
+		<h3 class="text-md font-semibold text-gray-700 mb-2 mt-6">Groups</h3>
+		{#each groups as group}
+			<Group
+				name={group.name || "New Group"}
+				avatar={group.avatar}
+				unread={true}
+				callback={() => goto(`/group/${group.id}`)}
+			/>
+		{/each}
+	{:else if messages.length === 0}
+		<div class="w-full px-5 py-5 text-center text-sm text-gray-500">
+			You don't have any messages yet. Start a Direct Message by searching a name.
 		</div>
-		<!-- group id needs to be added -->
-		<Group name="Developers" avatar="https://picsum.photos/200/300" unread={true} callback={() => goto("/group/123")}/>
 	{/if}
+
+	<dialog
+		open={openNewChatModal}
+		use:clickOutside={() => (openNewChatModal = false)}
+		onclose={() => (openNewChatModal = false)}
+		class="w-[90vw] md:max-w-[40vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
+	>
+		<div class="bg-white rounded-xl w-full p-6 space-y-6 relative">
+			<h2 class="text-xl font-semibold">Start a New Chat</h2>
+
+			<Input
+				type="text"
+				bind:value={searchValue}
+				placeholder="Search users..."
+				oninput={(e: Event) => handleSearch((e.target as HTMLInputElement).value)}
+			/>
+
+			{#if $isSearching}
+				<div class="text-gray-500 mt-2">Searching...</div>
+			{:else if $searchError}
+				<div class="text-red-500 mt-2">{$searchError}</div>
+			{/if}
+
+			<div class="max-h-[250px] overflow-y-auto space-y-3">
+				{#each $searchResults.filter(m => m.id !== currentUserId) as member}
+					<label class="flex items-center space-x-3 cursor-pointer">
+						<input
+							type="checkbox"
+							checked={selectedMembers.includes(member.id)}
+							onchange={() => toggleMemberSelection(member.id)}
+							class="accent-brand focus:ring"
+						/>
+						<Avatar src={member.avatarUrl} size="sm" />
+						<span class="text-sm">{member.name ?? member.handle ?? member.ename}</span>
+					</label>
+				{/each}
+			</div>
+
+			<div class="flex justify-end gap-2 pt-4">
+				<Button size="sm" variant="secondary" callback={() => {(openNewChatModal = false)}}>Cancel</Button>
+				<Button size="sm" variant="primary" callback={createChat}>Start Chat</Button>
+			</div>
+		</div>
+	</dialog>
 </section>

From de6a1b4c87cd4d50d8157badc25422b655e192ce Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 18 Jul 2025 15:30:32 +0530
Subject: [PATCH 11/11] feat: new group functionality and textarea fixed

---
 .../pictique/src/routes/(protected)/group/[id]/+page.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 53a24267..cabebf45 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -194,7 +194,7 @@
 			{#if canEdit}
 				<!-- svelte-ignore element_invalid_self_closing_tag -->
 				<textarea rows="2"
-				maxlength="60" placeholder="Edit group description" class="w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent" bind:value={groupDescription} />
+				maxlength="260" placeholder="Edit group description" class="w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent" bind:value={groupDescription} />
 			{:else}
 				<p class="text-gray-700">{group.description}</p>
 			{/if}