Skip to content

Feat/UI overhaul - #30

Merged
rahul-vyas-dev merged 1 commit into
AOSSIE-Org:new-designfrom
rahul-vyas-dev:feat/ui-overhaul
Aug 12, 2026
Merged

Feat/UI overhaul#30
rahul-vyas-dev merged 1 commit into
AOSSIE-Org:new-designfrom
rahul-vyas-dev:feat/ui-overhaul

Conversation

@rahul-vyas-dev

@rahul-vyas-dev rahul-vyas-dev commented Aug 12, 2026

Copy link
Copy Markdown

Additional Notes:

Addressed all the comments from codeRabbitAI.

Checklist

  • My code follows the project's code style and conventions
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or errors
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there
  • I have read the Contributing Guidelines

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

  • Bug Fixes

    • Improved mobile navigation by allowing the menu button to open the sidebar on click.
    • Added clearer, more semantic controls for closing the mobile navigation overlay.
    • Improved theme initialization to better respect saved preferences and system settings.
    • Enhanced download-link security when opening files in a new tab.
  • Documentation

    • Updated deployment instructions and project structure references.
    • Clarified that production start commands are optional for static hosting.
  • Localization

    • Refined the Hindi home-page hero translation.

@github-actions github-actions Bot added no-issue-linked PR is not linked to any issue ci-cd CI/CD pipeline changes configuration Configuration file changes documentation Changes to documentation files github-actions GitHub Actions workflow changes size/XL Extra large PR (>500 lines changed) labels Aug 12, 2026
@coderabbitai

coderabbitai Bot commented Aug 12, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

This pull request scopes deployment permissions to the deploy job, updates deployment documentation, improves component typing and accessibility, adjusts navigation and theme initialization, handles empty user-agent values, and changes the Hindi hero title.

Changes

Deployment and UI refinements

Layer / File(s) Summary
Deployment permissions and documentation
.github/workflows/CD.yml, Tasks.md, README.md
The deploy job now declares the required repository, Pages, and OIDC permissions. Documentation references CD.yml and marks npm run start as optional for static hosting.
Component safety and typing
src/components/Download.tsx, src/components/MockUp.tsx, src/components/ShuffleGrid.tsx, src/components/SocialMediaCTA.tsx
Download links use noopener,noreferrer. StaticImageData uses a type-only import. Timeout state is typed and conditionally cleared. CTA buttons declare type="button".
Navigation and client-state behavior
src/components/ui/Navbar.tsx, src/context/theme-provider.tsx, src/hooks/usePlatform.ts
Navbar links use locale-aware navigation. Mobile controls support click interaction and semantic overlay buttons. Theme preferences resolve after mount. Empty user-agent values map to Windows.
Hindi hero text
src/messages/hi.json
The Hindi hero title removes “ओपन-सोर्स गैलरी”.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Suggested labels: Typescript Lang

Suggested reviewers: m4dhav

Poem

A rabbit checks the deployer's gate,
Types each timeout neat and straight.
The menu button hops with cheer,
Theme choices wait until they’re clear.
Hindi stars shine bright and new—
“ओपन-सोर्स गैलरी” bids adieu.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title identifies the main frontend UI changes and is concise, although it does not mention the related documentation and configuration updates.
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.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

@github-actions github-actions Bot added first-time-contributor First PR of an external contributor pending-coderabbit-review labels Aug 12, 2026
@rahul-vyas-dev
rahul-vyas-dev changed the base branch from main to new-design August 12, 2026 10:22
@github-actions github-actions Bot added frontend Changes to frontend code javascript JavaScript/TypeScript code changes size/M Medium PR (51-200 lines changed) and removed size/XL Extra large PR (>500 lines changed) labels Aug 12, 2026
@socket-security

Copy link
Copy Markdown

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm damerau-levenshtein is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package-lock.jsonnpm/eslint-config-next@16.2.11npm/damerau-levenshtein@1.0.8

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/damerau-levenshtein@1.0.8. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
Obfuscated code: npm eslint-plugin-react is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package-lock.jsonnpm/eslint-config-next@16.2.11npm/eslint-plugin-react@7.37.5

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/eslint-plugin-react@7.37.5. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@rahul-vyas-dev

Copy link
Copy Markdown
Author

@coderabbitai review.

@coderabbitai

coderabbitai Bot commented Aug 12, 2026

Copy link
Copy Markdown

@rahul-vyas-dev I will review pull request #30.

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
src/components/ui/Navbar.tsx (1)

189-196: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Make the overlay button accessible and non-submitting.

When sidebarOpen is false, this invisible button remains focusable. It has no accessible name. It also defaults to type="submit" inside an ancestor form.

Render it only while the sidebar is open. Set type="button". Add a localized aria-label, such as a closeMenu translation.

Proposed fix
-      <button
-        className={`fixed bg-bg z-40 transition-opacity duration-300 min-[1000px]:hidden ${
-          sidebarOpen
-            ? "opacity-100 pointer-events-auto"
-            : "opacity-0 pointer-events-none"
-        }`}
-        onClick={() => setSidebarOpen(false)}
-      />
+      {sidebarOpen && (
+        <button
+          type="button"
+          aria-label={tN("closeMenu")}
+          className="fixed bg-bg z-40 transition-opacity duration-300 min-[1000px]:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}

As per path instructions, user-visible strings should be externalized to resource files (i18n).

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ui/Navbar.tsx` around lines 189 - 196, Update the overlay
button in the Navbar component to render only when sidebarOpen is true,
preventing an invisible focusable element. Set its type to button and add an
aria-label using the localized closeMenu translation rather than a hardcoded
string.

Sources: Path instructions, Linters/SAST tools

README.md (1)

381-385: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Document static deployment instead of npm run start

output: "export" generates static files in out, and npm run start invokes the incompatible next start command. Document deployment of out to static hosting. For local preview, use npx serve@latest out.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 381 - 385, Update the README deployment section to
describe serving the statically generated out directory on static hosting
instead of running npm run start. Add the local preview command using npx
serve@latest out, while preserving the existing export workflow context.

Source: MCP tools

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/CD.yml:
- Around line 50-53: Add concise inline comments to the permissions block
documenting that pages: write enables GitHub Pages deployment and id-token:
write enables OIDC authentication; leave contents: read unchanged.
- Around line 50-53: Add a workflow-level permissions block in CD.yml with at
least contents: read to establish a least-privilege baseline for build and other
non-deploy jobs. Keep pages: write and id-token: write scoped exclusively to the
deploy job’s permissions block.
- Around line 55-58: Update the “Deploy to GitHub Pages” step’s
actions/deploy-pages reference to the specified immutable commit SHA, retaining
the v4 version comment.

---

Outside diff comments:
In `@README.md`:
- Around line 381-385: Update the README deployment section to describe serving
the statically generated out directory on static hosting instead of running npm
run start. Add the local preview command using npx serve@latest out, while
preserving the existing export workflow context.

In `@src/components/ui/Navbar.tsx`:
- Around line 189-196: Update the overlay button in the Navbar component to
render only when sidebarOpen is true, preventing an invisible focusable element.
Set its type to button and add an aria-label using the localized closeMenu
translation rather than a hardcoded string.
🪄 Autofix

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: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: caa0f9a2-5652-437f-844f-101c2763c7ac

📥 Commits

Reviewing files that changed from the base of the PR and between 0cce22c and 2f944a5.

📒 Files selected for processing (11)
  • .github/workflows/CD.yml
  • README.md
  • Tasks.md
  • src/components/Download.tsx
  • src/components/MockUp.tsx
  • src/components/ShuffleGrid.tsx
  • src/components/SocialMediaCTA.tsx
  • src/components/ui/Navbar.tsx
  • src/context/theme-provider.tsx
  • src/hooks/usePlatform.ts
  • src/messages/hi.json

Comment thread .github/workflows/CD.yml
Comment thread .github/workflows/CD.yml
@gitcordapp

gitcordapp Bot commented Aug 12, 2026

Copy link
Copy Markdown

Link your account with Gitcord

Thanks for opening this PR, @rahul-vyas-dev!

To receive Discord notifications and contributor tracking for this organization:

  1. Join Discord: https://discord.gg/hjUhu33uAn
  2. In Discord, run /link rahul-vyas-dev
  3. Paste the verification code into your GitHub bio (or a public gist)
  4. Click Verify in Discord (or run /verify-link rahul-vyas-dev)

Once linked, Gitcord can notify you about reviews, merges, and more.

Posted by Gitcord

@rahul-vyas-dev
rahul-vyas-dev merged commit b1a9745 into AOSSIE-Org:new-design Aug 12, 2026
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci-cd CI/CD pipeline changes configuration Configuration file changes documentation Changes to documentation files first-time-contributor First PR of an external contributor frontend Changes to frontend code github-actions GitHub Actions workflow changes javascript JavaScript/TypeScript code changes no-issue-linked PR is not linked to any issue pending-coderabbit-review size/M Medium PR (51-200 lines changed)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant