Skip to content
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.

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

Made the email appear on fullscreen #391

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

rohanshrma222
Copy link

@rohanshrma222 rohanshrma222 commented Apr 6, 2025

This PR makes the email appear on full screen,Removed the split screen mode.

Fixes #344

Result Video attached :

fix.344.mp4

Summary by CodeRabbit

  • New Features

    • Introduced an enhanced email interface that displays complete email threads and supports seamless redirection between individual emails and the inbox.
  • UI Enhancements

    • Improved navigation by enabling direct URL-based transitions, including a new "Back to inbox" button in fullscreen email views for easier return to the main list.

Copy link

vercel bot commented Apr 6, 2025

@rohanshrma222 is attempting to deploy a commit to the Inbox Zero Team on Vercel.

A member of the Team first needs to authorize it.

@CLAassistant
Copy link

CLAassistant commented Apr 6, 2025

CLA assistant check
All committers have signed the CLA.

Copy link
Contributor

coderabbitai bot commented Apr 6, 2025

Walkthrough

This pull request introduces and refactors several email-related components. A new Mail component in the [...slug]/page.tsx file now handles email thread viewing with data fetching, pagination, and state management. An existing Mail component in mail/page.tsx is refactored to a simplified redirection component (MailRedirect) that uses Next.js routing hooks. Additionally, the EmailList component has been updated to navigate directly on thread selection, and the EmailPanel component now conditionally displays a "Back to inbox" button in fullscreen mode.

Changes

File(s) Change Summary
apps/web/app/(app)/mail/[...slug]/page.tsx
apps/web/app/(app)/mail/page.tsx
Added a new Mail component for thread handling (using useSWRInfinite and jotai) and refactored the legacy Mail component to MailRedirect for redirection based on URL parameters using Next.js hooks.
apps/web/components/email-list/EmailList.tsx Updated the email list component to use useRouter and useSearchParams for simplified navigation via router.push on email thread click, removing old state and scroll logic.
apps/web/components/email-list/EmailPanel.tsx Enhanced the email panel by incorporating ArrowLeftIcon and usePathname to detect fullscreen mode and render a "Back to inbox" button conditionally.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant M as Mail Component
  participant API as Email API
  participant AT as Atom (refetch)

  U->>M: Load email page with URL slug
  M->>API: Fetch email threads (with pagination)
  API-->>M: Return threads data
  M->>AT: Update refetch function for global access
  alt Viewing specific thread
    M->>UI: Render EmailPanel for the selected thread
  else
    M->>UI: Render EmailList
  end
Loading
sequenceDiagram
  participant U as User
  participant MR as MailRedirect Component
  participant R as Router

  U->>MR: Request the /mail page
  MR->>MR: Extract search parameters (type, threadId)
  alt threadId exists
    MR->>R: Redirect to specific thread view
  else 
    MR->>R: Redirect to general mail list view
  end
Loading
sequenceDiagram
  participant U as User
  participant EL as EmailList Component
  participant R as Router
  participant EP as EmailPanel Component

  U->>EL: Click on an email thread
  EL->>R: Navigate to URL with type and thread id
  R-->>EP: Load updated email panel view
  EP->>EP: Check view mode using pathname
  alt Fullscreen mode detected
    EP->>UI: Render "Back to inbox" button
  else 
    EP->>UI: Render without back button
  end
Loading

Assessment against linked issues

Objective Addressed Explanation
Mail: Full screen mode for emails (#344)

Possibly related PRs

Poem

I'm just a rabbit, hopping in the code,
Bringing full-screen emails on a cheerful road.
Threads unfurl with hooks that guide,
Redirections swift like a bouncy slide.
With icons and states, the views align,
In CodeRabbit style, everything's just fine!

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

Scope: all 2 workspace projects
 WARN  GET http://10.0.0.28:4873/turbo error (503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.1.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/typescript/-/typescript-5.8.2.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@vercel/style-guide/-/style-guide-6.0.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-config-prettier/-/eslint-config-prettier-10.1.1.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-config-turbo/-/eslint-config-turbo-2.4.4.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/eslint/-/eslint-9.23.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/turbo/-/turbo-2.4.4.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@typescript-eslint/parser/-/parser-8.27.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/prettier/-/prettier-3.5.3.tgz error (ERR_PNPM_FETCH_503). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/turbo error (503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/typescript/-/typescript-5.8.2.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.1.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/@vercel/style-guide/-/style-guide-6.0.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-config-prettier/-/eslint-config-prettier-10.1.1.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-config-turbo/-/eslint-config-turbo-2.4.4.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/eslint/-/eslint-9.23.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/turbo/-/turbo-2.4.4.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/@typescript-eslint/parser/-/parser-8.27.0.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
 WARN  GET http://10.0.0.28:4873/prettier/-/prettier-3.5.3.tgz error (ERR_PNPM_FETCH_503). Will retry in 1 minute. 1 retries left.
/tmp/eslint/packages/eslint-config:
 ERR_PNPM_FETCH_503  GET http://10.0.0.28:4873/typescript/-/typescript-5.8.2.tgz: Service Unavailable - 503

This error happened while installing a direct dependency of /tmp/eslint/packages/eslint-config

✨ 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
🪧 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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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.

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 resolve resolve all the CodeRabbit review comments.
  • @coderabbitai plan to trigger planning for file edits and PR creation.
  • @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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (3)
apps/web/components/email-list/EmailPanel.tsx (1)

35-36: Validate pathname before splitting.
Relying on pathname.split("/") might lead to unexpected results if pathname is empty or undefined. Consider a defensive check or default value to avoid potential runtime errors.

apps/web/app/(app)/mail/[...slug]/page.tsx (2)

34-49: SWR Infinite key generation.
Appending nextPageToken for subsequent pages is good. Consider adding a max page or fallback to avoid infinite scrolling loops.


69-92: In-memory removal of archived threads.
The approach for updating local SWR data helps keep the UI in sync. Consider logging or a user notification if many threads are removed at once.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 1c8d51b and 031c5eb.

📒 Files selected for processing (4)
  • apps/web/app/(app)/mail/[...slug]/page.tsx (1 hunks)
  • apps/web/app/(app)/mail/page.tsx (1 hunks)
  • apps/web/components/email-list/EmailList.tsx (3 hunks)
  • apps/web/components/email-list/EmailPanel.tsx (4 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
apps/web/app/(app)/mail/[...slug]/page.tsx (2)
apps/web/components/email-list/EmailPanel.tsx (1)
  • EmailPanel (11-107)
apps/web/components/email-list/EmailList.tsx (1)
  • List (37-160)
🔇 Additional comments (21)
apps/web/components/email-list/EmailPanel.tsx (3)

1-1: Imports look appropriate.
No immediate issues with the introduction of ArrowLeftIcon and usePathname.

Also applies to: 9-9


45-65: Fullscreen logic and “Back to inbox” button implementation.
Good addition of a dedicated back navigation for fullscreen mode. The UI changes are clear and consistent with the new route structure.


78-85: Conditional “Close” button toggle.
Hiding the “Close” button when in fullscreen helps avoid UI clutter. The fallback flow looks correct.

apps/web/components/email-list/EmailList.tsx (3)

35-35: New hooks imported successfully.
Using useRouter and useSearchParams aligns with Next.js best practices for route-based logic.


452-454:

❓ Verification inconclusive

Navigating to the new URL structure.
The route push is straightforward. Verify that thread.id is always defined to prevent potential undefined route segments.


🏁 Script executed:

#!/bin/bash
# Checking references to ensure thread.id is defined
rg -A 5 "onOpen.*thread.id"

Length of output: 29


Action: Ensure Valid thread.id Value

The current implementation routes with router.push(/mail/${type}/${thread.id}), which assumes that thread.id is always defined. Since the initial verification script did not yield output confirming that thread.id is reliably set, please manually verify that every thread instance used in this component guarantees the presence of an id. This could be ensured via type-checking or by having an explicit default/fallback in place.

  • Manual Check Needed: Confirm that the source (or parent component) passing thread enforces a valid id.
  • Guard/Fallback Consideration: If there's any chance that thread.id might be undefined, consider adding a conditional check before invoking router.push.

182-185:

❓ Verification inconclusive

Deriving mail type from search parameters.
Defaulting to "inbox" is a good fallback for a missing type. Ensure downstream logic handles unexpected search param values gracefully.

Would you like to confirm that only known mail types are passed? You can verify it across the codebase to see if additional checks or a fallback might be needed.


🏁 Script executed:

#!/bin/bash
rg -A 5 "router.push.*mail/.*" 

Length of output: 977


Mail Type Handling: Validate Allowed Values

Defaulting to "inbox" when no type is provided is a sensible fallback. However, the code currently passes the value from the search parameters directly into routing (e.g., router.push(\/mail/${type}/${thread.id}`)` in EmailList and similar in the mail page). Please verify that only expected, allowed mail types reach these routes. If there’s a chance that an unexpected value might be present, consider adding explicit validation or mapping to ensure that only known types are used, thereby preventing potential downstream issues.

apps/web/app/(app)/mail/page.tsx (3)

3-4: Importing from Next.js.
This makes sense for executing the redirection logic (useEffect, useRouter, useSearchParams).


7-11: MailRedirect component signature and parameter extraction.
The approach of retrieving type and threadId from search params is consistent with the new route logic.


14-20: Conditional redirection.
Using router.replace for both thread and list views is clear. Confirm any edge cases (e.g., invalid type) are handled.

Do you want to cover additional fallback routes if type is invalid or unknown?

apps/web/app/(app)/mail/[...slug]/page.tsx (12)

3-6: Imports for SWR, atoms, routing, and UI.
All additions look correct for data fetching and state management.


17-26: Extracting mailType and threadId from slug.
This is a neat way to handle dynamic routes. Validate usage for any potential empty slug scenario.


28-32: Handling label-based queries vs. mail type.
Great distinction for applying query.labelId or query.type automatically.


51-56: SWR Infinite config.
Using keepPreviousData and a smaller dedupingInterval helps performance. The approach is sound.


58-62: Deriving isLoadingMore and showLoadMore.
Straightforward logic ensures a smooth user experience.


64-67: Finding the selected thread.
Correctly filters by threadId. Confirm what happens if threadId is invalid or not found.


94-99: Registering the refetch method in an atom.
Makes sense for globally accessible refetch triggers.


100-102: Load more handler.
Incrementing size is the correct approach for paginated SWR data.


104-107: closePanel with router push.
Returns user to the mail list for the current mailType. Matches the full-screen flow.


108-119: Placeholder callback implementations.
Plan for future expansions. Good placeholder approach.


121-147: Rendering EmailPanel when in thread view.
Uses the selected thread logic properly. The skeleton for hooking up executePlan and other actions is ready.


149-170: Rendering email list when not in thread view.
Clean fallback. Good usage of <List> from EmailList.tsx.

@@ -31,6 +32,8 @@ export function EmailPanel({
refetch: () => void;
}) {
const isPlanning = useIsInAiQueue(row.id);
const pathname = usePathname();
const isFullscreen = pathname.split("/").length > 3; // Checking if we're in /mail/type/threadId
Copy link
Owner

Choose a reason for hiding this comment

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

super hacky. better to pass in props

Copy link
Owner

Choose a reason for hiding this comment

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

you can't rely on the url having 3+ parts to decide how to show the component

@elie222
Copy link
Owner

elie222 commented Apr 6, 2025

Hey, would be best if we did this like Gmail and kept the split screen option as it's already working. But also offered full screen mode.

Also I notice the path for the page is /mail/inbox/messageid.
no reason for it to be under /inbox. although gmail does do something like this with their urls doesn't seem a smart way to handle it.

may also be worth considering keeping the page as is and the full screen is more a modal type thing. similar to split screen mode, but it just covers the whole screen instead. this way you don't lose page context / need reload when you go back to inbox

@rohanshrma222
Copy link
Author

Thanks for the suggestion.

  1. Like in Gmail they have their setting for fullscreen view and split-screen, so how do you want me to do it add a button or
    something?
  2. Do you want to avoid a new route and make a fullscreen model there only?

@slothmc-ctrl
Copy link

Thanks for the suggestion.

1. Like in Gmail they have their setting for fullscreen view and split-screen, so how do you want me to do it  add a button or
   something?

2. Do you want to avoid a new route and make a fullscreen model there only?

Why not both ? Modal and new page button ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mail: Full screen mode for emails
4 participants