From e8d85284c701fc6056616552569db46613d40318 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Mon, 2 Jun 2025 19:44:54 +0530
Subject: [PATCH 1/4] feat: added uploaded post view component.

---
 .../UploadedPostView.stories.ts               | 48 +++++++++++++++++++
 .../UploadedPostView/UploadedPostView.svelte  | 44 +++++++++++++++++
 platforms/metagram/src/lib/fragments/index.ts | 23 ++++-----
 platforms/metagram/src/lib/icons/Cross.svelte | 23 +++++++++
 platforms/metagram/src/lib/icons/index.ts     | 23 ++++-----
 5 files changed, 139 insertions(+), 22 deletions(-)
 create mode 100644 platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
 create mode 100644 platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
 create mode 100644 platforms/metagram/src/lib/icons/Cross.svelte

diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
new file mode 100644
index 00000000..fa969054
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
@@ -0,0 +1,48 @@
+import type { ComponentProps } from "svelte";
+import UploadedPostView from "./UploadedPostView.svelte";
+
+export default {
+    title: "UI/UploadedPostView",
+    component: UploadedPostView,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: UploadedPostView;
+        props: ComponentProps<typeof UploadedPostView>;
+    }) => ({
+        Component: UploadedPostView,
+        props: args,
+    }),
+};
+
+const IMAGES = [
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+];
+
+export const Primary = {
+    args: {
+        images: IMAGES,
+    },
+};
diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
new file mode 100644
index 00000000..207f18f8
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Cross } from '$lib/icons';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IImage {
+		url: string;
+		alt: string;
+	}
+
+	interface IUploadedPostViewProps extends HTMLAttributes<HTMLImageElement> {
+		images: IImage[];
+		width?: string;
+		height?: string;
+	}
+
+	let {
+		images,
+		width = 'w-full',
+		height = 'h-full',
+		...restProps
+	}: IUploadedPostViewProps = $props();
+
+	const crossHandler = (i: number) => {
+		images = images.filter((_, index) => index !== i);
+	};
+</script>
+
+<article class="max-w-screen flex flex-row items-center gap-4 scroll-auto">
+	{#each images as image, i}
+		<div class={cn(['relative shrink-0'])}>
+			<Cross
+				class="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 cursor-pointer"
+				onclick={() => crossHandler(i)}
+			/>
+			<img
+				{...restProps}
+				src={image.url}
+				alt={image.alt}
+				class={cn(['rounded-lg', width, height, restProps.class])}
+			/>
+		</div>
+	{/each}
+</article>
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 417014c2..78bb9642 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1,11 +1,12 @@
-export { default as Header } from './Header/Header.svelte';
-export { default as BottomNav } from './BottomNav/BottomNav.svelte';
-export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
-export { default as MessageInput } from './MessageInput/MessageInput.svelte';
-export { default as InputFile } from './InputFile/InputFile.svelte';
-export { default as Drawer } from './Drawer/Drawer.svelte';
-export { default as Message } from './Message/Message.svelte';
-export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
-export { default as Modal } from './Modal/Modal.svelte';
-export { default as SideBar } from './SideBar/SideBar.svelte';
-export { default as Post } from './Post/Post.svelte';
+export { default as Header } from "./Header/Header.svelte";
+export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
+export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
+export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
+export { default as InputFile } from "./InputFile/InputFile.svelte";
+export { default as Drawer } from "./Drawer/Drawer.svelte";
+export { default as Message } from "./Message/Message.svelte";
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
+export { default as Modal } from "./Modal/Modal.svelte";
+export { default as SideBar } from "./SideBar/SideBar.svelte";
+export { default as Post } from "./Post/Post.svelte";
+export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";
diff --git a/platforms/metagram/src/lib/icons/Cross.svelte b/platforms/metagram/src/lib/icons/Cross.svelte
new file mode 100644
index 00000000..13777e71
--- /dev/null
+++ b/platforms/metagram/src/lib/icons/Cross.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#DA4A11', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<rect width="24" height="24" rx="12" fill={color} />
+	<path
+		d="M16.0837 7.91663L7.91699 16.0833M7.91699 7.91663L16.0837 16.0833"
+		stroke="white"
+		stroke-width="1.75"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/platforms/metagram/src/lib/icons/index.ts b/platforms/metagram/src/lib/icons/index.ts
index e68aa3b3..f89c024a 100644
--- a/platforms/metagram/src/lib/icons/index.ts
+++ b/platforms/metagram/src/lib/icons/index.ts
@@ -1,11 +1,12 @@
-export { default as Icons } from './Icons.svelte';
-export { default as Like } from './Like.svelte';
-export { default as Refresh } from './Refresh.svelte';
-export { default as Comment } from './Comment.svelte';
-export { default as VerticalDots } from './VerticalDots.svelte';
-export { default as Home } from './Home.svelte';
-export { default as Flash } from './Flash.svelte';
-export { default as CommentsTwo } from './CommentsTwo.svelte';
-export { default as Search } from './Search.svelte';
-export { default as Camera } from './Camera.svelte';
-export { default as Settings } from './Settings.svelte';
+export { default as Icons } from "./Icons.svelte";
+export { default as Like } from "./Like.svelte";
+export { default as Refresh } from "./Refresh.svelte";
+export { default as Comment } from "./Comment.svelte";
+export { default as VerticalDots } from "./VerticalDots.svelte";
+export { default as Home } from "./Home.svelte";
+export { default as Flash } from "./Flash.svelte";
+export { default as CommentsTwo } from "./CommentsTwo.svelte";
+export { default as Search } from "./Search.svelte";
+export { default as Camera } from "./Camera.svelte";
+export { default as Settings } from "./Settings.svelte";
+export { default as Cross } from "./Cross.svelte";

From 048381671573882008e7042e40a717620b0f8f40 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Mon, 2 Jun 2025 20:48:04 +0530
Subject: [PATCH 2/4] fix: fixed the outline and color.

---
 .../UploadedPostView/UploadedPostView.svelte          | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
index 207f18f8..15c0612f 100644
--- a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
@@ -28,16 +28,21 @@
 
 <article class="max-w-screen flex flex-row items-center gap-4 scroll-auto">
 	{#each images as image, i}
-		<div class={cn(['relative shrink-0'])}>
+		<div class={cn(['group relative shrink-0'])}>
 			<Cross
-				class="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 cursor-pointer"
+				class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
 				onclick={() => crossHandler(i)}
 			/>
 			<img
 				{...restProps}
 				src={image.url}
 				alt={image.alt}
-				class={cn(['rounded-lg', width, height, restProps.class])}
+				class={cn([
+					'rounded-lg outline-[#DA4A11] group-hover:outline-2',
+					width,
+					height,
+					restProps.class
+				])}
 			/>
 		</div>
 	{/each}

From 0793780b2c90212ae486fa2df596eaa69b6fc90b Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 3 Jun 2025 14:07:27 +0530
Subject: [PATCH 3/4] fix: moved function to external definition.

---
 .../UploadedPostView.stories.ts               |  7 ++-
 .../UploadedPostView/UploadedPostView.svelte  | 48 ++++++++++++++++---
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
index fa969054..01f0eba1 100644
--- a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
@@ -14,7 +14,7 @@ export default {
     }),
 };
 
-const IMAGES = [
+let images = [
     {
         url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
         alt: "Sample Image 1",
@@ -43,6 +43,9 @@ const IMAGES = [
 
 export const Primary = {
     args: {
-        images: IMAGES,
+        images: images,
+        callback: (i: number) => {
+            images = images.filter((_, index) => index !== i);
+        },
     },
 };
diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
index 15c0612f..7c2d56b0 100644
--- a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
@@ -8,30 +8,28 @@
 		alt: string;
 	}
 
-	interface IUploadedPostViewProps extends HTMLAttributes<HTMLImageElement> {
+	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
 		images: IImage[];
 		width?: string;
 		height?: string;
+		callback: (i: number) => void;
 	}
 
 	let {
 		images,
 		width = 'w-full',
 		height = 'h-full',
+		callback,
 		...restProps
 	}: IUploadedPostViewProps = $props();
-
-	const crossHandler = (i: number) => {
-		images = images.filter((_, index) => index !== i);
-	};
 </script>
 
-<article class="max-w-screen flex flex-row items-center gap-4 scroll-auto">
+<article class="max-w-screen flex flex-row items-center gap-4 scroll-auto" {...restProps}>
 	{#each images as image, i}
 		<div class={cn(['group relative shrink-0'])}>
 			<Cross
 				class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
-				onclick={() => crossHandler(i)}
+				onclick={() => callback(i)}
 			/>
 			<img
 				{...restProps}
@@ -47,3 +45,39 @@
 		</div>
 	{/each}
 </article>
+
+<!--
+    @component
+    export default UploadedPostView
+    @description
+    This component is a view for displaying uploaded images in a post. It allows users to see the images they have uploaded and provides a way to remove individual images.
+
+    @props
+    - images: An array of image objects, each containing a `url` and `alt` text.
+	- width: The width of the image container. Default is `w-full`.
+	- height: The height of the image container. Default is `h-full`.
+	- callback: A function that is called when the cross on the image is clicked, passing the index of the clicked image.
+    - ...restProps: Any other props that can be passed to a image container element.
+
+    @usage
+    ```html
+    <script lang="ts">
+		import { UploadedPostView } from '$lib/fragments';
+    </script>
+
+	<UploadedPostView
+		images={[
+		{
+			url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+			alt: "Sample Image 1",
+		},
+		{
+			url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+			alt: "Sample Image 1",
+        }]}
+		callback={(i: number) => {
+            images = images.filter((_, index) => index !== i);
+        }}
+    />
+    ```
+-->

From e7f9d0fb9e1f17dcd57993d8d691f687abd9ea17 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 3 Jun 2025 14:38:33 +0530
Subject: [PATCH 4/4] fix: fixed the restProps.

---
 .../UploadedPostView/UploadedPostView.svelte      | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
index 7c2d56b0..d8ac5856 100644
--- a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
@@ -24,7 +24,12 @@
 	}: IUploadedPostViewProps = $props();
 </script>
 
-<article class="max-w-screen flex flex-row items-center gap-4 scroll-auto" {...restProps}>
+<article
+	{...restProps}
+	class={cn(
+		['max-w-screen flex flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
+	)}
+>
 	{#each images as image, i}
 		<div class={cn(['group relative shrink-0'])}>
 			<Cross
@@ -32,15 +37,9 @@
 				onclick={() => callback(i)}
 			/>
 			<img
-				{...restProps}
 				src={image.url}
 				alt={image.alt}
-				class={cn([
-					'rounded-lg outline-[#DA4A11] group-hover:outline-2',
-					width,
-					height,
-					restProps.class
-				])}
+				class={cn(['rounded-lg outline-[#DA4A11] group-hover:outline-2', width, height])}
 			/>
 		</div>
 	{/each}