Skip to content

feat: added uploaded post view component. #182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 3, 2025
Merged

feat: added uploaded post view component. #182

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e8d8528
feat: added uploaded post view component.
Sahil2004 Jun 2, 2025
0483816
fix: fixed the outline and color.
Sahil2004 Jun 2, 2025
8879916
fix: merge conflict.
Sahil2004 Jun 2, 2025
4e83783
fix: merge conflict.
Sahil2004 Jun 3, 2025
0793780
fix: moved function to external definition.
Sahil2004 Jun 3, 2025
a83fd24
Merge branch 'main' into feat/uploadedPostView
Sahil2004 Jun 3, 2025
e7f9d0f
fix: fixed the restProps.
Sahil2004 Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
};
49 changes: 49 additions & 0 deletions platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<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">
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix CSS class issue: 'scroll-auto' should be 'overflow-auto'.

The scroll-auto class is not a valid Tailwind CSS class for controlling scroll behavior.

-<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 overflow-x-auto">

Use overflow-x-auto to enable horizontal scrolling when content overflows.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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 overflow-x-auto">
🤖 Prompt for AI Agents 
In platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
at line 29, replace the invalid Tailwind CSS class 'scroll-auto' with
'overflow-x-auto' to correctly enable horizontal scrolling when the content
overflows.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya do this

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sosweetham Perfect! I'll implement that CSS class fix for you.

flowchart TB
    A["Task: Fix CSS class in UploadedPostView.svelte"]
    A --> B["Replace 'scroll-auto' with 'overflow-x-auto' in article element"]
Loading

Another agent will handle implementing this change for you. The fix will ensure proper horizontal scrolling behavior when the uploaded images overflow the container width.

⏳ Preparing changes...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A summary of the edits CodeRabbit can apply:

Will replace the invalid Tailwind CSS class 'scroll-auto' with 'overflow-x-auto' in UploadedPostView.svelte to enable proper horizontal scrolling.

A plan of each step that CodeRabbit will take in order to execute the edits for each file (with inline rough draft snippets):

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

Open platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte and locate the article element at line 29 with the class attribute containing "scroll-auto".

On line 29, replace scroll-auto with overflow-x-auto so that the line reads:

<article class="max-w-screen flex flex-row items-center gap-4 overflow-x-auto">

Ensure only that class name changes and the rest of the attribute stays identical.

Save the file and verify that the indentation and formatting remain consistent with the surrounding code.

Run the application (or component story/tests) to confirm that horizontal scrolling is enabled when the image list overflows the container.

  • ✅ Create PR with these edits
  • 📌 Create commit in current branch
  • 📋 Get copyable edits

{#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)}
/>
<img
{...restProps}
src={image.url}
alt={image.alt}
class={cn([
'rounded-lg outline-[#DA4A11] group-hover:outline-2',
width,
height,
restProps.class
])}
/>
</div>
{/each}
</article>
33 changes: 17 additions & 16 deletions platforms/metagram/src/lib/fragments/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
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 RightAside } from './RightAside/RightAside.svelte';
export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
export { default as Post } from './Post/Post.svelte';
export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
export { default as Comment } from './Comment/Comment.svelte';
export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.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 RightAside } from "./RightAside/RightAside.svelte";
export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
export { default as Post } from "./Post/Post.svelte";
export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";
export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte";
export { default as Comment } from "./Comment/Comment.svelte";
export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
23 changes: 23 additions & 0 deletions platforms/metagram/src/lib/icons/Cross.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
23 changes: 12 additions & 11 deletions platforms/metagram/src/lib/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 CommentIcon } from './CommentIcon.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 CommentIcon } from "./CommentIcon.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";