fix: avatars

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-let images: FileList | null = $state(null);
+let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
  // activeTab = newTab;
@@ -37,9 +37,9 @@
  previousTab = newTab;
  if (newTab === 'profile') {
  goto(`/profile/${ownerId}`);
- } else if (newTab === "post") {
-uploadedImages.value = null;
-imageInput.value = "";
+ } else if (newTab === 'post') {
+uploadedImages.value = null;
+imageInput.value = '';
  imageInput.click();
  } else {
  goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
  ownerId = getAuthId()
  activeTab = _activeTab.split('/').pop() ?? '';
- if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
- if (uploadedImages.value)
- revokeImageUrls(uploadedImages.value);
- uploadedImages.value = Array.from(images).map(file => ({
- url: URL.createObjectURL(file),
- alt: file.name
- }));
+ if (
+ images &&
+ images.length > 0 &&
+ activeTab !== 'post' &&
+ previousTab === 'post' &&
+ !_activeTab.includes('post/audience')
+ ) {
+ if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+ 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");
-}
+if (uploadedImages.value.length > 0) {
+goto('/post');
+}
  }
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<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/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte

@@ -51,13 +51,14 @@
  <button
  type="button"
  class="rounded-full p-2 hover:bg-gray-100"
-on:click={closeCreatePostModal}
+onclick={closeCreatePostModal}
  >
  ✕
  </button>
  </div>
 
  <div class="mb-4">
+ <!-- svelte-ignore element_invalid_self_closing_tag -->
  <textarea
  bind:value={text}
  placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
  <div class="mb-4 grid grid-cols-2 gap-4">
  {#each images as image, index}
  <div class="relative">
+ <!-- svelte-ignore a11y_img_redundant_alt -->
  <img
  src={image}
  alt="Post image"
@@ -78,7 +80,7 @@
  <button
  type="button"
  class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-on:click={() => removeImage(index)}
+onclick={() => removeImage(index)}
  >
  ✕
  </button>
@@ -87,14 +89,17 @@
  </div>
  {/if}
 
- <div class="flex items-center justify-between">
- <label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
- <input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+ <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>
 
  <Button
  variant="secondary"
+ size="sm"
  callback={handleSubmit}
  isLoading={isSubmitting}
  disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
  <div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
- class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+ class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
  onclick={handleSend}
 	>
  <HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
  avatar: string;
  username: string;
- userId: string;
+ userId?: string;
  imgUris: string[];
-caption: string;
- count: {
+text: string;
+ count?: {
  likes: number;
  comments: number;
  };
@@ -58,6 +58,7 @@
 
 	const {
  avatar,
+ userId,
  username,
  imgUris: uris,
  text,
@@ -67,9 +68,8 @@
  ...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+ variant = 'user',
+ profileData,
+ handleSinglePost,
+ handleFollow,
+ handleMessage
+	}: {
+ variant: 'user' | 'other';
+ profileData: userProfile;
+ handleSinglePost: (post: PostData) => void;
+ handleFollow: () => Promise<void>;
+ handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
  </div>
  {#if variant === 'other'}
  <div class="flex gap-2">
- <Button variant="primary" callback={handleFollow}>Follow</Button>
- <Button variant="primary" callback={handleMessage}>Message</Button>
+ <Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+ <Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
  </div>
  {/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
  {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
- <li class="mb-6">
+ <li class="mb-6 list-none">
  <Post
- avatar={'https://picsum.photos/200/200'}
+ avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
  username={profileData?.username}
  imgUris={post.imgUris ?? []}
- text={post.text}
- time={new Date(post.createdAt).toLocaleDateString()}
+ text={post.caption}
+ time={post.time ? new Date(post.time).toLocaleDateString() : ''}
  callback={{
  like: async () => {
  try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-import type { Image } from '$lib/types';
+import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
  images: Image[];
  width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	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(' '))}
+	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(' ')
+	)}
 >
 	{#each images as image, i}
- <div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+ <div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
  <Cross
- class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+ class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
  onclick={() => callback(i)}
  />
  <img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, 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'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-value: null,
+value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-value: null,
+value: null
 });
 
 export const audience: { value: string } = $state({
- value: "Everyone",
-});
+	value: 'Everyone'
+});
+

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

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-const token = localStorage.getItem('pictique_auth_token');
-if (token) {
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
-}
+const token = localStorage.getItem('pictique_auth_token');
+if (token) {
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
+}
 };
 
 export const login = (token: string) => {
-setAuthToken(token);
-apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-isAuthenticated.set(true);
+setAuthToken(token);
+apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+isAuthenticated.set(true);
 };
 
 export const logout = () => {
-removeAuthToken();
-delete apiClient.defaults.headers.common['Authorization'];
-isAuthenticated.set(false);
-};
+removeAuthToken();
+delete apiClient.defaults.headers.common['Authorization'];
+isAuthenticated.set(false);
+};