Feat/mobile upload flow

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
 	import { goto } from '$app/navigation';
-	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
 	import { page } from '$app/state';
+	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+    import { uploadedImages } from '$lib/store/store.svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
 		activeTab?: string;
@@ -19,6 +20,9 @@
 	let _activeTab = $derived(page.url.pathname);
 	let fullPath = $derived(page.url.pathname);
 
+	let imageInput: HTMLInputElement;
+    let images: FileList | null = $state(null);
+
 	const handleNavClick = (newTab: string) => {
 		// activeTab = newTab;
 		isNavigatingThroughNav.value = true;
@@ -29,16 +33,31 @@
 		previousTab = newTab;
 		if (newTab === 'profile') {
 			goto(`/profile/${ownerId}`);
+		} else if (newTab === "post") {
+            uploadedImages.value = null;
+            imageInput.value = "";
+			imageInput.click();
 		} else {
 			goto(`/${newTab}`);
 		}
 	};
 
 	$effect(() => {
 		activeTab = _activeTab.split('/').pop() ?? '';
+		if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
+            uploadedImages.value = Array.from(images).map(file => ({
+                url: URL.createObjectURL(file),
+                alt: file.name
+            }));
+			images = null; // To prevent re-triggering the effect and thus making an infinite loop with /post route's effect when the length of uploadedImages goes to 0
+            if (uploadedImages.value.length > 0) {
+                goto("/post");
+            }
+		}
 	});
 </script>
 
+<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <nav
 	aria-label="Main navigation"

platforms/metagram/src/lib/fragments/Header/Header.svelte

@@ -90,7 +90,7 @@
 		>
 			<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
 		</button>
-	{:else if variant === 'secondary' && options}
+	{:else if variant === 'secondary' && options && isCallBackNeeded}
 		<ActionMenu {options} />
 	{/if}
 </header>

platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.svelte

@@ -6,7 +6,7 @@
 
 	interface ISettingsTile extends HTMLButtonAttributes {
 		title: string;
-		currentStatus: 'string';
+		currentStatus: string;
 	}
 
 	const { title, currentStatus, ...restProps }: ISettingsTile = $props();

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

@@ -26,14 +26,12 @@
 
 <article
 	{...restProps}
-	class={cn(
-		['flex max-w-screen flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
-	)}
+	class={cn(['pl-0.5 pr-4 max-w-screen flex flex-row items-center gap-4 overflow-x-auto min-h-max', restProps.class].join(' '))}
 >
 	{#each images as image, i}
-		<div class={cn(['group relative shrink-0'])}>
+		<div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
 			<Cross
-				class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
+				class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
 				onclick={() => callback(i)}
 			/>
 			<img

platforms/metagram/src/lib/store/store.svelte.ts

@@ -1,17 +1,26 @@
-import type { PostData } from '$lib/types';
+import type { PostData } from "$lib/types";
 
 export const isNavigatingThroughNav = $state({
-	value: false
+    value: false,
 });
 
 export const showComments = $state({
-	value: false
+    value: false,
 });
 
 export const ownerId = $state({
-	value: '1'
+    value: "1",
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-	value: null
+    value: null,
+});
+
+export const uploadedImages: { value: { url: string; alt: string }[] | null } =
+    $state({
+        value: null,
+    });
+
+export const audience: { value: string } = $state({
+    value: "Everyone",
 });

platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte

@@ -27,6 +27,7 @@
 	{value}
 	bind:group={selected}
 	bind:this={radioElement}
+    id={value}
 	{name}
 	checked={selected === value}
 	class={cn(['hidden', restProps.class].join(' '))}

platforms/metagram/src/routes/(protected)/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
-	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
+	import { BottomNav, Comment, Header, MessageInput, SideBar } from '$lib/fragments';
 	import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
@@ -58,8 +58,10 @@
 			heading = 'Feed';
 		} else if (route.includes('discover')) {
 			heading = 'Search';
+		} else if (route.includes('/post/audience')) {
+			heading = 'Audience';
 		} else if (route.includes('post')) {
-			heading = 'Post';
+			heading = 'Upload photo';
 		} else if (route === `/messages/${idFromParams}`) {
 			heading = 'User Name';
 		} else if (route.includes('messages')) {
@@ -86,7 +88,7 @@
 			</button>
 		{:else}
 			<Header
-				variant={route === `/messages/${idFromParams}`
+				variant={route === `/messages/${idFromParams}` || route.includes("/post")
 					? 'secondary'
 					: route.includes('profile')
 						? 'tertiary'

platforms/metagram/src/routes/(protected)/post/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { SettingsTile, UploadedPostView } from '$lib/fragments';
+	import { audience, uploadedImages } from '$lib/store/store.svelte';
+	import { Button, Textarea } from '$lib/ui';
+
+	let caption: string = $state('');
+
+    $effect(() => {
+		if (!uploadedImages.value || uploadedImages.value.length === 0) {
+			window.history.back();
+		}
+    })
+</script>
+
+<section class="h-fit w-full flex flex-col gap-3 justify-stretch">
+	<UploadedPostView
+		images={uploadedImages.value ?? []}
+		width="w-auto"
+		height="h-40"
+		callback={(i: number) => {
+			if (uploadedImages.value)
+				uploadedImages.value = uploadedImages.value.filter((_, index) => index !== i);
+		}}
+	/>
+
+    <label for="caption">
+        <span class="block mb-2 font-semibold">Add a caption</span>
+		<Textarea name="caption" rows={3} bind:value={caption} placeholder="Hey guys..." />
+	</label>
+
+	<SettingsTile
+		title="Who can see your posts?"
+		currentStatus={audience.value}
+		onclick={() => goto('/post/audience')}
+	/>
+
+	<Button variant="secondary" callback={() => alert('TODO: Post created!')} class="mt-1">Post</Button>
+</section>

platforms/metagram/src/routes/(protected)/post/audience/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { audience } from '$lib/store/store.svelte';
+    import { InputRadio } from '$lib/ui';
+</script>
+
+<h1 class="mb-4">Who can see your posts?</h1>
+<span class="flex flex-col gap-4">
+	<label for="Everyone" class="flex items-center justify-between">
+		Everyone
+		<InputRadio value="Everyone" name="audience" bind:selected={audience.value} />
+	</label>
+	<label for="Only Followers" class="flex items-center justify-between">
+		Only Followers
+		<InputRadio value="Only Followers" name="audience" bind:selected={audience.value} />
+	</label>
+	<label for="No one" class="flex items-center justify-between">
+		No one
+		<InputRadio value="No one" name="audience" bind:selected={audience.value} />
+	</label>
+</span>