Fix/pictique issues (#775)

* fix: update CreatePostModal layout and button styling

* fix: reduce "new group" button size and set on top right corner

* fix: prevent empty messages, prevent spamming send button, improve styling

* fix: improve profile image upload handling and error messaging

* fix: profile placeholder url

* Add invitation to start conversation

* fix: enhance image upload validation, error handling in CreatePostModal & styling

* fix: refine image upload handling and validation across components

* fix: improve image upload validation and error handling across components

* fix: update maximum file size for profile picture upload to 500KB

Author: Bekiboo

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

@@ -1,63 +1,103 @@
 <script lang="ts">
 	import { closeCreatePostModal, createPost } from '$lib/stores/posts';
 	import { Button, Modal } from '$lib/ui';
+	import { formatSize, validateFileSize } from '$lib/utils/fileValidation';
 
 	let { open = $bindable() }: { open: boolean } = $props();
 
+	interface UploadItem {
+		file: File;
+		dataUrl: string;
+	}
+
 	let text = $state('');
-	let images = $state<string[]>([]);
+	let uploadItems = $state<UploadItem[]>([]);
 	let isSubmitting = $state(false);
+	let error = $state('');
+
+	const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB total
+	const MAX_FILE_SIZE = 1 * 1024 * 1024; // 1MB per individual image
+
+	let totalSize = $derived(uploadItems.reduce((sum, item) => sum + item.file.size, 0));
+	let usagePercentage = $derived((totalSize / MAX_TOTAL_SIZE) * 100);
+	let remainingSize = $derived(MAX_TOTAL_SIZE - totalSize);
 
 	const handleImageUpload = (event: Event) => {
 		const input = event.target as HTMLInputElement;
 		if (!input.files?.length) return;
 
 		const file = input.files[0];
+
+		const validation = validateFileSize(file, MAX_FILE_SIZE, totalSize, MAX_TOTAL_SIZE);
+		if (!validation.valid) {
+			error = validation.error || 'Invalid file';
+			input.value = '';
+			return;
+		}
+
+		error = '';
+
 		const reader = new FileReader();
 		reader.onload = (e) => {
 			const result = e.target?.result;
 			if (typeof result === 'string') {
-				console.log(result);
-				images = [...images, result];
+				// Atomically add both file and dataUrl together
+				uploadItems = [...uploadItems, { file, dataUrl: result }];
+			} else {
+				error = 'Failed to read image file';
 			}
 		};
+		reader.onerror = () => {
+			error = 'Error reading image file';
+		};
 		reader.readAsDataURL(file);
+		input.value = '';
 	};
 
 	const removeImage = (index: number) => {
-		images = images.filter((_, i) => i !== index);
+		uploadItems = uploadItems.filter((_, i) => i !== index);
+		error = '';
 	};
 
 	const handleSubmit = async () => {
-		if (!text.trim() && images.length === 0) return;
+		if (!text.trim() && uploadItems.length === 0) return;
 
 		try {
 			isSubmitting = true;
+			const images = uploadItems.map((item) => item.dataUrl);
 			await createPost(text, images);
 			closeCreatePostModal();
 			text = '';
-			images = [];
-		} catch (error) {
-			console.error('Failed to create post:', error);
+			uploadItems = [];
+			error = '';
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+			console.error('Failed to create post:', err);
 		} finally {
 			isSubmitting = false;
 		}
 	};
 </script>
 
 <Modal {open} onclose={closeCreatePostModal}>
-	<div class="w-full max-w-2xl rounded-lg bg-white p-6">
+	<div class="w-[80vw] max-w-sm rounded-lg bg-white p-6 sm:max-w-md md:max-w-lg lg:max-w-2xl">
 		<div class="mb-4 flex items-center justify-between">
 			<h2 class="text-xl font-semibold">Create Post</h2>
 			<button
 				type="button"
 				class="rounded-full p-2 hover:bg-gray-100"
 				onclick={closeCreatePostModal}
 			>
-				✕
+				{@render Cross()}
 			</button>
 		</div>
 
+		{#if error}
+			<div class="mb-4 rounded-md bg-red-500 px-4 py-2 text-sm text-white">
+				{error}
+			</div>
+		{/if}
+
 		<div class="mb-4">
 			<!-- svelte-ignore element_invalid_self_closing_tag -->
 			<textarea
@@ -68,45 +108,95 @@
 			/>
 		</div>
 
-		{#if images.length > 0}
-			<div class="mb-4 grid grid-cols-2 gap-4">
-				{#each images as image, index (index)}
-					<div class="relative">
-						<!-- svelte-ignore a11y_img_redundant_alt -->
-						<img
-							src={image}
-							alt="Post image"
-							class="aspect-square w-full rounded-lg object-cover"
-						/>
-						<button
-							type="button"
-							class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-							onclick={() => removeImage(index)}
-						>
-							✕
-						</button>
-					</div>
-				{/each}
+		<div class="mb-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+			{#each uploadItems as item, index (index)}
+				<div class="relative">
+					<!-- svelte-ignore a11y_img_redundant_alt -->
+					<img
+						src={item.dataUrl}
+						alt="Post image"
+						class="aspect-square w-full rounded-lg object-cover"
+					/>
+					<button
+						type="button"
+						class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
+						onclick={() => removeImage(index)}
+						aria-label="Remove image"
+					>
+						{@render Cross()}
+					</button>
+				</div>
+			{/each}
+
+			<!-- Add Photo Frame -->
+			{#if remainingSize > 0}
+				<label
+					class="flex aspect-square cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 transition-colors hover:border-gray-400 hover:bg-gray-100"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-gray-400"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+					</svg>
+					<span class="text-sm font-medium text-gray-600">Add Photo</span>
+					<input
+						type="file"
+						accept="image/*"
+						class="hidden"
+						onchange={handleImageUpload}
+					/>
+				</label>
+			{/if}
+		</div>
+
+		{#if uploadItems.length > 1}
+			<div class="mb-4">
+				<div class="mb-2 flex items-center justify-between text-sm">
+					<span class="text-gray-600">
+						{formatSize(totalSize)} / {formatSize(MAX_TOTAL_SIZE)}
+					</span>
+					<span class="text-gray-600">{formatSize(remainingSize)} remaining</span>
+				</div>
+				<div class="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+					<div
+						class="h-full transition-all duration-300"
+						class:bg-red-500={usagePercentage >= 90}
+						class:bg-yellow-500={usagePercentage >= 70 && usagePercentage < 90}
+						class:bg-green-500={usagePercentage < 70}
+						style="width: {Math.min(usagePercentage, 100)}%"
+					></div>
+				</div>
 			</div>
 		{/if}
 
-		<div class="flex items-center justify-between gap-2">
-			<label
-				class="w-full cursor-pointer rounded-full bg-gray-100 px-4 py-3 text-center hover:bg-gray-200"
-			>
-				<input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />
-				Add Photo
-			</label>
-
+		<div class="flex justify-end">
 			<Button
 				variant="secondary"
 				size="sm"
 				callback={handleSubmit}
 				isLoading={isSubmitting}
-				disabled={!text.trim() && images.length === 0}
+				disabled={!text.trim() && uploadItems.length === 0}
 			>
 				Post
 			</Button>
 		</div>
 	</div>
 </Modal>
+
+{#snippet Cross()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-4 w-4"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke="currentColor"
+		stroke-width="2"
+	>
+		<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+	</svg>
+{/snippet}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
+	import Button from '$lib/ui/Button/Button.svelte';
 	import { cn } from '$lib/utils';
 	import { SentIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
@@ -28,6 +29,19 @@
 	}: IMessageInputProps = $props();
 
 	const cBase = 'flex items-center justify-between gap-2';
+
+	let isSubmitting = $state(false);
+	let isDisabled = $derived(!value.trim() || isSubmitting);
+
+	const handleSubmit = async () => {
+		if (isDisabled) return;
+		isSubmitting = true;
+		try {
+			await handleSend();
+		} finally {
+			isSubmitting = false;
+		}
+	};
 </script>
 
 <div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
@@ -40,15 +54,18 @@
 		bind:value
 		{placeholder}
 		onkeydown={(e) => {
-			if (e.key === 'Enter') handleSend();
+			if (e.key === 'Enter' && !isDisabled) handleSubmit();
 		}}
 	/>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
-		onclick={handleSend}
+	<Button
+		class="bg-grey 	flex aspect-square h-13 w-13 items-center justify-center rounded-full px-0 transition-opacity {isDisabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer hover:opacity-80'}"
+		callback={handleSubmit}
+		disabled={isDisabled}
 	>
-		<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
-	</div>
+		<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-700)" />
+	</Button>
 </div>

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

@@ -15,7 +15,7 @@
 	}
 	let {
 		activeTab = $bindable('home'),
-		profileSrc = 'images/user.png',
+		profileSrc = '/images/user.png',
 		handlePost,
 		...restProps
 	}: ISideBarProps = $props();
@@ -164,7 +164,7 @@
 				/>
 			</span>
 			<h3
-				class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
+				class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-1`}
 			>
 				Profile
 			</h3>

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

@@ -22,23 +22,18 @@
 
 <article
 	{...restProps}
-	class={cn(
-		[
-			'flex min-h-max max-w-screen flex-row items-center gap-4 overflow-x-auto pr-4 pl-0.5',
-			restProps.class
-		].join(' ')
-	)}
+	class={cn(['grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4', restProps.class].join(' '))}
 >
-	{#each images as image, i (i)}
-		<div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
+	{#each images as image, i (image.url)}
+		<div class="group relative aspect-square">
 			<Cross
-				class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
+				class="absolute top-2 right-2 z-10 cursor-pointer rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
 				onclick={() => callback(i)}
 			/>
 			<img
 				src={image.url}
 				alt={image.alt}
-				class={cn(['rounded-lg outline-[#DA4A11] group-hover:outline-2', width, height])}
+				class="h-full w-full rounded-lg object-cover outline-[#DA4A11] group-hover:outline-2"
 			/>
 		</div>
 	{/each}

platforms/pictique/src/lib/stores/posts.ts

@@ -72,10 +72,17 @@ export const createPost = async (text: string, images: string[]) => {
 	try {
 		isLoading.set(true);
 		error.set(null);
-		const response = await apiClient.post('/api/posts', {
+		
+		const payload = {
 			text,
 			images: images.map((img) => img)
-		});
+		};
+		
+		// Log payload size for debugging
+		const payloadSize = new Blob([JSON.stringify(payload)]).size;
+		console.log(`Payload size: ${(payloadSize / 1024).toFixed(2)} KB (${images.length} images)`);
+		
+		const response = await apiClient.post('/api/posts', payload);
 		resetFeed();
 		await fetchFeed(1, 10, false);
 		return response.data;

platforms/pictique/src/lib/types.ts

@@ -73,6 +73,7 @@ export type userProfile = {
 export type Image = {
 	url: string;
 	alt: string;
+	size?: number;
 };
 
 export type GroupInfo = {