Feat/mobile upload flow

[Sahil2004]

Description of change

Mobile Upload Flow.

Issue Number

Closes #192

Type of change

• New (a change which implements a new feature)

How the change has been tested

manually.

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• New Features

  • Added the ability to select and upload multiple images when creating a post.
  • Introduced a new post creation page with image preview, caption input, audience selection, and a placeholder for posting.
  • Added an audience selection page with options for post visibility ("Everyone," "Only Followers," "No one").

• Improvements

  • Enhanced the bottom navigation to support image uploads directly from the "post" tab.
  • Improved layout and scrolling for the uploaded post view.
  • Updated header behavior and page headings for post creation and audience selection flows.
  • Added unique identifiers to radio input elements for better accessibility.

• Bug Fixes

  • Corrected type annotation for settings tile status to accept any string value.

[coderabbitai]

Walkthrough

This update implements an image upload and post creation flow for mobile. It enhances the bottom navigation to trigger image selection, introduces new state management for uploaded images and audience, adds new pages for post creation and audience selection, and updates UI components and layout logic to support and display the new upload flow.

Changes

Files/Paths	Change Summary
BottomNav.svelte, UploadedPostView.svelte, InputRadio.svelte, SettingsTile.svelte, Header.svelte	Enhanced navigation, image upload trigger, layout/styling tweaks, radio input id addition, conditional action menu rendering
store.svelte.ts	Added uploadedImages and audience state variables
+layout.svelte	Updated heading and header variant logic for /post and /post/audience routes
post/+page.svelte, post/audience/+page.svelte	Added new pages for post creation and audience selection
types.ts	Added new exported Image type
lib/utils/index.ts, lib/utils/memoryHelper.ts	Added new memory helper utility revokeImageUrls and exported it

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BottomNav
    participant FileInput
    participant Store
    participant Router
    participant PostPage

    User->>BottomNav: Clicks "post" tab
    BottomNav->>FileInput: Triggers file picker dialog
    User->>FileInput: Selects image(s)
    FileInput->>BottomNav: Updates images variable
    BottomNav->>Store: Updates uploadedImages with selected files
    BottomNav->>Router: Navigates to "/post"
    Router->>PostPage: Loads post creation UI
    PostPage->>Store: Reads uploadedImages, audience
    User->>PostPage: Edits caption, audience, submits post

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Implement upload post flow for mobile (#192)	✅
Should work as expected (#192)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes found.

Possibly related PRs

• feat: added uploaded post view component. #182: Adds UploadedPostView for displaying uploaded images, which is now used in the new post creation flow.
• feat: BottomNav #132: Introduces the initial BottomNav component, which is now extended for image upload functionality.

Suggested reviewers

• coodos
• sosweetham

Poem

A tap on "post"—the picker appears,
Choose your images, let go of fears!
The rabbit hops, the files now store,
To upload and share, with friends galore.
Audience set, a caption to boast—
Soon you'll be ready to publish your post!
🐇✨

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🔭 Outside diff range comments (1)

platforms/metagram/src/lib/fragments/Header/Header.svelte (1)

86-95: ⚠️ Potential issue

Fix unreachable conditional logic.

The ActionMenu will never render due to a logical error in the conditional structure. When isCallBackNeeded is true, the first condition (line 86) will always match, preventing the else if condition (line 93) from ever executing.

Consider this fix to make the logic work as intended:

-{#if isCallBackNeeded}
+{#if isCallBackNeeded && (!options || variant !== 'secondary')}
 	<button
 		class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
 		onclick={callback}
 	>
 		<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
 	</button>
-{:else if variant === 'secondary' && options && isCallBackNeeded}
+{:else if variant === 'secondary' && options}
 	<ActionMenu {options} />
 {/if}

🧹 Nitpick comments (7)

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

1-21: LGTM! Clean implementation with minor accessibility suggestions.

The audience selection UI is well-implemented with proper label-input association and state management. The radio button group correctly uses the same name attribute and binds to the shared audience store.

Consider these minor accessibility improvements:

-<h1 class="mb-4">Who can see your posts?</h1>
+<h1 class="mb-4" id="audience-heading">Who can see your posts?</h1>
-<span class="flex flex-col gap-4">
+<fieldset class="flex flex-col gap-4" aria-labelledby="audience-heading">
+	<legend class="sr-only">Post audience selection</legend>
 	<label for="Everyone" class="flex items-center justify-between">
 		Everyone
 		<InputRadio value="Everyone" name="audience" bind:selected={audience.value} />
 	</label>
 	<!-- ... other labels ... -->
-</span>
+</fieldset>

This adds semantic structure and improves screen reader experience.

platforms/metagram/src/lib/store/store.svelte.ts (1)

24-26: Consider using a union type for audience values.

The audience field could benefit from a union type to ensure only valid values are used instead of any string.

+type AudienceType = "Everyone" | "Only Followers" | "No one";

-export const audience: { value: string } = $state({
+export const audience: { value: AudienceType } = $state({
    value: "Everyone",
});

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

21-24: Simplify image removal logic.

The image removal callback can be simplified and made more readable.

-callback={(i: number) => {
-    if (uploadedImages.value)
-        uploadedImages.value = uploadedImages.value.filter((_, index) => index !== i);
-}}
+callback={(i: number) => {
+    uploadedImages.value = uploadedImages.value?.filter((_, index) => index !== i) ?? null;
+}}

---

17-18: Add defensive check for images prop.

The nullish coalescing operator is good, but consider the edge case where uploadedImages.value is an empty array.

The current implementation handles the null case well with ?? []`.

---

38-38: Implement the post creation functionality.

The placeholder alert should be replaced with actual post creation logic.

This TODO needs to be implemented to complete the upload flow. The function should:

1. Validate required fields (images, caption)
2. Create a post object with the uploaded images and caption
3. Submit to backend/store
4. Navigate back or show success message

Do you want me to help implement this functionality or open an issue to track it?

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte (2)

36-39: Review the file input reset approach.

The logic correctly triggers the file picker for the post tab, but consider using a more explicit reset method:

-            imageInput.value = "";
+            imageInput.value = "";
+            images = null;

This ensures both the DOM element and the bound variable are properly reset.

---

60-60: Consider accessibility implications of hidden file input.

While the hidden file input pattern is functional, consider adding proper ARIA labels or alternative accessible triggers for screen readers.

-<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"
+    aria-label="Select images to upload"
+/>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 486ffc2 and 8c32220.

📒 Files selected for processing (9)

• platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte (3 hunks)
• platforms/metagram/src/lib/fragments/Header/Header.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte (1 hunks)
• platforms/metagram/src/lib/store/store.svelte.ts (1 hunks)
• platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte (1 hunks)
• platforms/metagram/src/routes/(protected)/+layout.svelte (3 hunks)
• platforms/metagram/src/routes/(protected)/post/+page.svelte (1 hunks)
• platforms/metagram/src/routes/(protected)/post/audience/+page.svelte (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

platforms/metagram/src/lib/store/store.svelte.ts (1)

platforms/metagram/src/lib/types.ts (1)

• PostData (20-32)

🔇 Additional comments (9)

platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte (1)

30-30: Good accessibility improvement, but verify uniqueness.

Adding the id attribute improves accessibility by enabling proper label-input association. However, ensure that value props are unique across all InputRadio instances to avoid duplicate IDs, which would be invalid HTML.

platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.svelte (1)

9-9: LGTM! Critical type annotation fix.

The correction from the literal type 'string' to the general string type is essential. The previous type would only accept the exact string "string" as a value, which clearly wasn't the intended behavior.

platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte (2)

29-29: Question: Verify the asymmetric padding design choice.

The padding classes pl-0.5 pr-4 create asymmetric left/right padding. Is this intentional for the design, or should it be symmetric?

---

32-32: LGTM: Good addition of vertical spacing.

The vertical margins mt-3 mb-2 improve the visual spacing for the image containers.

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

4-4: LGTM: Import reordering improves organization.

Alphabetical ordering of imports enhances code readability.

---

61-64: LGTM: Clear route-based heading logic.

The new route conditions properly handle the post upload flow with descriptive headings:

• "Audience" for audience selection
• "Upload photo" for the main post creation page

---

91-91: LGTM: Consistent header variant styling.

Extending the secondary variant to include /post routes maintains UI consistency with the message routes.

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte (2)

4-7: LGTM! Clean import organization.

The imports are properly organized and the new uploadedImages store import is correctly added.

---

23-24: LGTM! Proper variable declarations.

The variables are correctly typed and use appropriate Svelte 5 state management.

[coderabbitai]

🛠️ Refactor suggestion

Potential navigation issue with history.back().

Using window.history.back() can cause unpredictable behavior if the user didn't navigate from within the app (e.g., direct URL access, page refresh).

-window.history.back();
+goto('/home');

This ensures users are redirected to a known safe route instead of relying on browser history.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In platforms/metagram/src/routes/(protected)/post/+page.svelte around lines 9 to
13, replace the use of window.history.back() with a programmatic navigation to a
specific safe route within the app (e.g., the home page or a dashboard). This
avoids unpredictable behavior when the user accesses the page directly or
refreshes, ensuring consistent and controlled redirection.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

platforms/metagram/src/lib/utils/memoryHelper.ts (1)

3-5: Improve performance by using for...of instead of forEach.

The function correctly implements memory cleanup for image URLs, and the optional chaining provides good safety. However, consider using for...of instead of forEach for better performance, especially when working with large image arrays.

Apply this diff to improve performance:

-export const revokeImageUrls = (imageArray: Image[]) => {
-    imageArray?.forEach((img) => URL.revokeObjectURL(img.url));
-};
+export const revokeImageUrls = (imageArray: Image[]) => {
+    if (!imageArray) return;
+    for (const img of imageArray) {
+        URL.revokeObjectURL(img.url);
+    }
+};

🧰 Tools

🪛 Biome (1.9.4)

[error] 4-4: Prefer for...of instead of forEach.

forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

(lint/complexity/noForEach)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7f3a1a5 and 18e135d.

📒 Files selected for processing (4)

• platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte (3 hunks)
• platforms/metagram/src/lib/utils/index.ts (1 hunks)
• platforms/metagram/src/lib/utils/memoryHelper.ts (1 hunks)
• platforms/metagram/src/routes/(protected)/post/+page.svelte (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• platforms/metagram/src/routes/(protected)/post/+page.svelte
• platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte

🧰 Additional context used

🧬 Code Graph Analysis (1)

platforms/metagram/src/lib/utils/memoryHelper.ts (1)

platforms/metagram/src/lib/types.ts (1)

• Image (45-48)

🪛 Biome (1.9.4)

platforms/metagram/src/lib/utils/memoryHelper.ts

[error] 4-4: Prefer for...of instead of forEach.

forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

(lint/complexity/noForEach)

🔇 Additional comments (1)

platforms/metagram/src/lib/utils/index.ts (1)

1-3: LGTM! Clean export organization for the new memory utility.

The addition of the memoryHelper export properly exposes the new utility for image URL cleanup, which is essential for the mobile upload flow. The quote style standardization also improves consistency.