Skip to content

Conversation

devvsakib
Copy link
Owner

@devvsakib devvsakib commented Oct 6, 2025

this pr closes #275 and #274

Summary by CodeRabbit

  • New Features

    • Introduced a JWT Decoder tool in Dev Area for client-side token decoding, displaying header and payload, with options to copy and clear results.
    • Enabled and linked the JWT Decoder from the Dev Tools grid for direct access.
  • Style

    • Adjusted page layout with a container and padding for more consistent spacing and responsive behavior across Dev Area pages.
  • Chores

    • Added an icon library dependency to support UI enhancements.

Copy link

vercel bot commented Oct 6, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
devtoolsarena Ready Ready Preview Comment Oct 6, 2025 0:38am

Copy link

coderabbitai bot commented Oct 6, 2025

Walkthrough

Introduces a JWT Decoder tool: adds lucide-react dependency, implements JwtDecoder component with parsing/decoding utilities, wires it into DevArea tools and links, and adjusts Layout to wrap children in a container for spacing. No backend changes.

Changes

Cohort / File(s) Summary
Dependencies
package.json
Added runtime dependency lucide-react@^0.544.0.
JWT Decoder Component
src/components/DevAreaTools/JwtDecoder.jsx
New React component and utilities: base64UrlToBase64, decodeBase64UrlJson, parseJWT, default JWTDecoder UI with decode/clear/copy actions.
DevArea wiring
src/pages/DevArea/DevTools.jsx, src/pages/DevArea/index.jsx
Registered jwtdecoder tool and updated DevArea tool list/link from /devarea/jwt (unavailable) to /devarea/jwtdecoder (available).
Layout container
src/components/Layout/Layout.jsx
Wrapped children in div.container mx-auto p-4 min-h-screen inside the existing relative container.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant DT as DevArea/DevTools
  participant JD as JWTDecoder
  participant Util as parseJWT/decodeBase64UrlJson
  participant CB as Clipboard API

  U->>DT: Select "JWT Decoder"
  DT->>JD: Render component
  U->>JD: Paste token + click Decode
  JD->>Util: parseJWT(token)
  Util-->>JD: {header, payload, signature} or error
  alt Success
    JD-->>U: Show header/payload JSON and signature
    U->>JD: Click Copy Payload
    JD->>CB: writeText(payload)
    CB-->>JD: resolve/reject
    JD-->>U: Copy status
  else Error
    JD-->>U: Display error message
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

Possibly related PRs

Suggested labels

hacktoberfest, hacktoberfest-accepted

Poem

New tool hops in with quiet cheer,
A token’s tale becomes crystal clear.
I nibble bytes, decode the night,
Headers, payloads—brought to light.
Click to copy—swift, sincere,
A happy hare of dev frontier. 🐇🔐

Pre-merge checks and finishing touches

❌ 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%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title succinctly highlights the addition of the new JWT Decoder feature alongside the layout fix, accurately reflecting the two primary changes in the pull request without extraneous detail.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch development

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

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

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4ddef9c and 2462889.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (5)
  • package.json (1 hunks)
  • src/components/DevAreaTools/JwtDecoder.jsx (1 hunks)
  • src/components/Layout/Layout.jsx (1 hunks)
  • src/pages/DevArea/DevTools.jsx (1 hunks)
  • src/pages/DevArea/index.jsx (1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/pages/DevArea/DevTools.jsx (2)
src/pages/DevArea/index.jsx (1)
  • tools (7-48)
src/components/DevAreaTools/JwtDecoder.jsx (1)
  • JWTDecoder (47-173)

Comment on lines +19 to +21
<div className="container mx-auto p-4 min-h-screen">
{children}
</div>
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Revert the global container wrapper to avoid breaking page layouts.

Layout wraps every page. Forcing a .container mx-auto min-h-screen around all children clamps their width and adds another viewport-height requirement on top of the existing flex layout. That combination causes full-width pages (hero sections, canvases, editors) to collapse into the container breakpoint and introduces guaranteed vertical overflow because the header + footer now sit on top of a second min-h-screen. Please drop this wrapper (or make it opt-in per page) so existing screens keep their layout stability.

-                <div className='relative'>
-                    <div className="container mx-auto p-4 min-h-screen">
-                        {children}
-                    </div>
-                </div>
+                <div className='relative'>
+                    {children}
+                </div>
📝 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
<div className="container mx-auto p-4 min-h-screen">
{children}
</div>
<div className='relative'>
{children}
</div>
🤖 Prompt for AI Agents
In src/components/Layout/Layout.jsx around lines 19-21, the component currently
wraps every page with a forced <div className="container mx-auto p-4
min-h-screen"> which clamps width and enforces a second min-h-screen; remove
that global wrapper so children are rendered directly to preserve full-width and
existing flex layouts. If an opt-in container is needed, replace the hard
wrapper with a conditional: accept a prop (e.g., useContainer or
containerClassName) and only apply the container classes when that prop is
true/provided, or move the container markup into pages that actually require it.

@devvsakib devvsakib merged commit cfd9d6f into main Oct 6, 2025
4 of 5 checks passed
@devvsakib devvsakib self-assigned this Oct 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a JWT Decoder component to the app

1 participant