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

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

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

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

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

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

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

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