Skip to content

Replace Pages landing site with mailbox shell#55

Merged
bdtran2002 merged 9 commits intomainfrom
pages-demo-v2
Apr 28, 2026
Merged

Replace Pages landing site with mailbox shell#55
bdtran2002 merged 9 commits intomainfrom
pages-demo-v2

Conversation

@bdtran2002
Copy link
Copy Markdown
Owner

@bdtran2002 bdtran2002 commented Apr 27, 2026

Summary

  • replace the static GitHub Pages landing page with a browser-only Mail.tm mailbox that mirrors the extension's full-page mailbox flow much more closely
  • add focused shell, detail, and mobile polish so the Pages experience looks and behaves like the extension mailbox without extension-only APIs
  • refresh the checked-in Firefox addon snapshot so CI stays green after the mailbox UI changes

Verification

  • bun run ci:check
  • browser smoke test on the local docs app, including temp mailbox creation

Summary by CodeRabbit

  • New Features
    • Dynamic interactive mailbox interface with inbox list and detailed message viewing
    • Real-time message polling and automatic synchronization of new messages
    • Intelligent automatic extraction and display of verification links and codes from message content
    • Mobile-responsive design for seamless access across devices
    • Automatic session persistence using browser storage for continuity

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 27, 2026

Warning

Rate limit exceeded

@bdtran2002 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 37 minutes and 12 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4d268386-d074-4d3d-83e1-103ebaa52c2b

📥 Commits

Reviewing files that changed from the base of the PR and between 6e3fc66 and d42712c.

📒 Files selected for processing (2)
  • docs/app.js
  • docs/styles.css
📝 Walkthrough

Walkthrough

Converts a static marketing site to a dynamic Mail.tm temporary mailbox web application, adding a complete front-end controller (app.js) that manages session state, inbox fetching, message display, verification link extraction, and API interactions. Also updates Firefox addon build artifacts with new hashed bundle references.

Changes

Cohort / File(s) Summary
Web Mailbox Frontend
docs/app.js, docs/index.html, docs/styles.css
New dynamic mailbox UI replaces static marketing content. Adds complete front-end controller with session management, Mail.tm API wrapper, inbox/message rendering, verification link/code extraction with regex and sanitization, and event handling. Includes 970 lines of CSS design system with dark color scheme, responsive grid layout, message row states, and mobile breakpoints.
Firefox Addon Bundle Entrypoints
firefox-addon/popup.html, firefox-addon/sidepanel.html, firefox-addon/mailbox.html, firefox-addon/options.html
Updates all HTML asset references to new hashed chunk and stylesheet filenames following build regeneration.
Firefox Addon Bundled Chunks
firefox-addon/chunks/popup-*.js, firefox-addon/chunks/sidepanel-*.js, firefox-addon/chunks/mailbox-*.js, firefox-addon/chunks/options-*.js, firefox-addon/chunks/settings-*.js
Chunk bundle updates: deleted old popup and sidepanel bundles, added new popup and sidepanel entrypoints, and swapped module import paths to new hashed dependency filenames across all chunk files.
Firefox Addon Stylesheet
firefox-addon/assets/settings-*.css
Regenerated minified Tailwind CSS output; no functional changes to selectors or theme structure.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client (Browser)
    participant Storage as localStorage
    participant API as Mail.tm API
    participant DOM as DOM/UI

    Client->>+Storage: Load session token on startup
    Storage-->>-Client: Restore cached token
    
    rect rgba(100, 150, 255, 0.5)
    Note over Client: Mailbox Initialization
    Client->>+API: GET /domains (list available domains)
    API-->>-Client: Return domain list
    Client->>Client: Generate random credentials
    Client->>+API: POST /accounts (create mailbox)
    API-->>-Client: Return account & token
    Client->>Storage: Cache new token
    end
    
    rect rgba(100, 200, 150, 0.5)
    Note over Client: Inbox Polling
    Client->>+API: GET /messages (fetch inbox)
    API-->>-Client: Return message summaries
    Client->>DOM: Render message list (unread states)
    Client->>Storage: Update last-checked timestamp
    end
    
    rect rgba(200, 150, 100, 0.5)
    Note over Client: Message Detail View
    Client->>+API: GET /messages/{id} (fetch full content)
    API-->>-Client: Return full message body
    Client->>Client: Extract verification links/codes via regex
    Client->>Client: Sanitize HTML (remove unsafe tags/attrs)
    Client->>DOM: Render message detail + verification actions
    Client->>API: PATCH /messages/{id} (mark as seen)
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested reviewers

  • Lomzem
  • Ultramas

🐰 A mailbox springs to life with JavaScript's might,
Session tokens cached, API calls set tight,
Verification codes hide in messages revealed,
The addon bundles rebrand, their hashes now sealed,
From static to dynamic, the web app takes flight! ✉️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: replacing a static landing page with a dynamic mailbox shell, which aligns with the primary objective of the PR.
Description check ✅ Passed The PR description provides a clear summary of changes, mentions verification steps, but does not explicitly address all template items like title format or squash-merge conventions.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch pages-demo-v2

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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@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: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/app.js`:
- Around line 761-793: refreshInbox currently allows concurrent requests so
slow/stale responses can overwrite newer state; modify refreshInbox to serialize
calls and ignore stale async responses by creating an epoch/requestId (e.g.,
increment state.inboxEpoch or create localRequestId) before the API call,
capture it in a local variable, and after each await (especially after
api('/messages') and after openMessage) verify the epoch/requestId still matches
state.inboxEpoch and bail out if not; also set a simple in-flight flag or store
a Promise (e.g., state.refreshInboxInFlight) to serialize simultaneous
invocations (await the existing in-flight Promise or replace it when starting a
new refresh) and apply the same epoch/guard pattern to the other similar
method(s) referenced around lines 862-864 so late responses cannot mutate
state.selectedMessage, state.messages, state.unreadIds, or state.lastCheckedAt.
- Around line 696-702: The session object currently persists
credentials.password into state.session (the assignment that sets accountId,
address, password, token, createdAt); remove the password property so the
generated mailbox password is not stored in session/localStorage, and audit any
subsequent reads of state.session.password (remove or replace them to use the
issued token such as token.token or other secure flows). Update the session
assignment to only include accountId, address, token (token.token) and
createdAt, and ensure no other code relies on the removed credentials.password
property.

In `@docs/styles.css`:
- Around line 35-40: The stylelint rule is failing because font-family names are
using single quotes; update the font declarations to follow the configured
quoting style by replacing single quotes with double quotes for multi-word
families and removing quotes for single-word families: in the "font" shorthand
change 'Figtree' to Figtree (no quotes) and change 'Segoe UI' to "Segoe UI", and
apply the same change to the other occurrence of 'Figtree'/'Segoe UI' later in
the file so the font and background declarations comply with
font-family-name-quotes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 66fd6df0-f71a-4cc9-ab30-22dcae22fa11

📥 Commits

Reviewing files that changed from the base of the PR and between 72b0613 and 6e3fc66.

📒 Files selected for processing (18)
  • docs/app.js
  • docs/index.html
  • docs/styles.css
  • firefox-addon/assets/settings-Dj5O1ufp.css
  • firefox-addon/chunks/mailbox-D7TplG1-.js
  • firefox-addon/chunks/mailbox-app-B46xbCzH.js
  • firefox-addon/chunks/mailbox-rendering-BS6ps4ro.js
  • firefox-addon/chunks/options-BLhumBH5.js
  • firefox-addon/chunks/popup-BK7dL13P.js
  • firefox-addon/chunks/popup-Dhx6oSf8.js
  • firefox-addon/chunks/settings-BRO6b84y.js
  • firefox-addon/chunks/settings-CSfJ1QfQ.js
  • firefox-addon/chunks/sidepanel-BEBJmFqu.js
  • firefox-addon/chunks/sidepanel-BemESDTs.js
  • firefox-addon/mailbox.html
  • firefox-addon/options.html
  • firefox-addon/popup.html
  • firefox-addon/sidepanel.html
💤 Files with no reviewable changes (2)
  • firefox-addon/chunks/popup-BK7dL13P.js
  • firefox-addon/chunks/sidepanel-BemESDTs.js

Comment thread docs/app.js
Comment thread docs/app.js
Comment thread docs/styles.css
Comment on lines +35 to +40
font:
14px/1.4 'Figtree',
'Segoe UI',
system-ui,
sans-serif;
background: linear-gradient(180deg, #131111 0%, #111010 100%);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix stylelint font-family-name-quotes violations before merge.

Line 36 and Line 119 use quoted font-family names that violate the configured lint rule and can fail CI.

🛠️ Proposed fix
   font:
-    14px/1.4 'Figtree',
+    14px/1.4 Figtree,
     'Segoe UI',
     system-ui,
     sans-serif;
@@
 .brand-copy strong,
 .column-head h1,
 .detail-empty h2,
 .detail-view h2 {
   display: block;
-  font-family: 'Fraunces', Georgia, 'Iowan Old Style', serif;
+  font-family: Fraunces, Georgia, 'Iowan Old Style', serif;
   letter-spacing: -0.02em;
 }

Also applies to: 119-120

🧰 Tools
🪛 Stylelint (17.9.0)

[error] 36-36: Expected no quotes around "Figtree" (font-family-name-quotes)

(font-family-name-quotes)

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/styles.css` around lines 35 - 40, The stylelint rule is failing because
font-family names are using single quotes; update the font declarations to
follow the configured quoting style by replacing single quotes with double
quotes for multi-word families and removing quotes for single-word families: in
the "font" shorthand change 'Figtree' to Figtree (no quotes) and change 'Segoe
UI' to "Segoe UI", and apply the same change to the other occurrence of
'Figtree'/'Segoe UI' later in the file so the font and background declarations
comply with font-family-name-quotes.

@bdtran2002 bdtran2002 merged commit 9ccc98a into main Apr 28, 2026
3 checks passed
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.

1 participant