feat: group

platforms/pictique/src/lib/fragments/Group/Group.svelte

@@ -0,0 +1,53 @@
+<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 px-2 py-4',
+		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')}
+    />
+-->

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=""
 			/>

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';

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'
 });
-

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');
+	}
 };

platforms/pictique/src/lib/types.ts

@@ -1,49 +1,55 @@
-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;
 };
+
+export type GroupInfo = {
+	id: string;
+	name: string;
+	avatar: string;
+};