Feat/UI overhaul - #29
Merged
Zahnentferner merged 6 commits intoAug 12, 2026
Merged
Conversation
WalkthroughThe PR replaces the starter homepage with a localized PictoPy website. It adds responsive sections, theme and download controls, locale-prefixed routing, static export settings, GitHub Pages deployment, updated translations, and project documentation. ChangesPictoPy website launch
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. 🔧 Biome (2.5.6)src/app/[locale]/globals.cssFile contains syntax errors that prevent linting: Line 4: Tailwind-specific syntax is disabled. src/index.cssFile contains syntax errors that prevent linting: Line 5: Tailwind-specific syntax is disabled.; Line 11: Tailwind-specific syntax is disabled. 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. Comment |
github-actions
Bot
added
configuration
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Link your account with GitcordThanks for opening this PR, @rahul-vyas-dev! To receive Discord notifications and contributor tracking for this organization:
Once linked, Gitcord can notify you about reviews, merges, and more. — Posted by Gitcord |
|
Please resolve the merge conflicts before review. Your PR will only be reviewed by a maintainer after all conflicts have been resolved. 📺 Watch this video to understand why conflicts occur and how to resolve them: |
- removed old design. - add Navbar component with mobile support and theme toggle functionality. - Added mock-up compo. - Implemented a responsive Navbar component with language selection and download link. - Added MobileSidebar for mobile navigation. - Integrated theme toggle functionality using context and persist it in local storage. - Added button styles and variants for consistency. - Created utility hooks for platform detection and download link fetching. - Defined constants for navigation items and platform configurations. - Updated global styles and removed deprecated Tailwind configuration. - Auto fetches latest version of PictoPy from using github REST API. Co-authored-by: Saksham <reach2saksham2004@gmail.com>
…or improved layout and functionality.
- Refactor components for improved localization and theme management - Added localization support for all UI elements in English and Hindi.
rahul-vyas-dev
force-pushed
the
feat/ui-overhaul
branch
from
August 4, 2026 12:55
500992f to
76f9613
Compare
github-actions
Bot
added
documentation
Author
Author
|
I’ll set up the CD pipeline once my exam on August 6 is over. |
github-actions
Bot
added
ci-cd
Member
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 29
🤖 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 24-25: Update the Checkout step using actions/checkout@v4 to set
persist-credentials to false, unless a later workflow step explicitly requires
Git authentication.
- Around line 10-13: Update the workflow permissions and job configuration so
the build job receives only contents: read, while the deploy job receives pages:
write and id-token: write. Remove deployment permissions from the workflow-level
scope, and keep configure-pages running without those permissions.
- Line 25: Update all five external action references in the workflow, including
the uses entry for actions/checkout, to immutable full commit SHAs instead of
mutable major tags. Preserve each action’s release tag in an adjacent comment
for maintenance.
In `@Contributors.md`:
- Line 16: Update the Rahul contributor entry in Contributors.md to remove the
personal email address or replace it with the project contact address unless
documented consent to publish it is available.
In `@README.md`:
- Around line 274-278: Update the README navigation example surrounding the Link
usage to reflect the documented default-locale rule: state that English resolves
to /about while Hindi resolves to /hi/about, keeping the example’s /about href
unchanged.
- Around line 123-197: Update the README project-tree heading/introduction to
describe the full repository structure rather than only the i18n files. In the
components tree, use sibling branch markers for providers/ and ui/ so both
directories are represented correctly, and remove the duplicate
eslint.config.mjs entry near the tree’s end.
- Around line 384-388: Replace the README documentation for npm run start with
instructions to serve the statically exported out directory, or reference a
dedicated preview script if one exists. Ensure the documented command matches
the output: "export" setting in next.config.ts and does not invoke next start.
In `@src/components/Download.tsx`:
- Around line 104-107: Update the release state initialization and fallback
handling in Download to use the Home.Download localization key for loading text
instead of hardcoded “Loading...”. Store the fallback date as an ISO value, then
format it with the existing locale using the same approach as the GitHub release
date.
- Around line 78-82: Update the window.open call in the onClick handler to pass
"noopener,noreferrer" as its third argument when opening link, while preserving
the existing "_blank" target and link guard.
In `@src/components/Hero.tsx`:
- Around line 19-29: Move the downloads-section id from the hero heading to the
root section rendered by Download, and remove it from the heading in Hero. Keep
the existing button scroll behavior and ensure it targets the section containing
the download controls.
In `@src/components/HomePage.tsx`:
- Around line 14-20: Add a localized FAQ component to the HomePage composition
after SocialMediaCTA, including the required localized questions and answers.
Reuse the project’s existing localization mechanism and FAQ component
conventions, ensuring the section renders before the homepage composition ends.
In `@src/components/MockUp.tsx`:
- Line 1: Use type-only imports for the type-only symbols: update
StaticImageData in src/components/MockUp.tsx lines 1-1 and
src/components/MockUpWithDesc.tsx lines 1-1, and import FC with import type in
src/components/Download.tsx line 2.
- Around line 35-60: Update the visible text in the MockUp component, including
the PictoPy/menu labels, date, and time, to use the project’s translation
resources; if the mock window is intended to be purely decorative, remove these
text elements instead. Keep the existing layout and responsive visibility
behavior unchanged.
- Around line 66-72: Update the MockUp component’s Image loading behavior to
accept a priority or preload prop, defaulting to lazy loading. Pass that prop
only from the first visible MockUp usage in HomePage, while leaving the
lower-page mockup unprioritized.
In `@src/components/ShuffleGrid.tsx`:
- Line 25: Update the timeoutRef declaration in ShuffleGrid to replace any with
ReturnType<typeof setTimeout> | null, preserving its existing null
initialization and timer-handle usage.
In `@src/components/SocialMediaCTA.tsx`:
- Around line 78-86: Update the button in SocialMediaCTA to explicitly set
type="button" so opening card.link does not submit a containing form; leave the
existing onClick navigation behavior unchanged.
In `@src/components/ui/Navbar.tsx`:
- Around line 117-120: Update the Navbar component’s user-visible “Download”,
“Toggle Light”, and “Toggle Dark” labels to use translation keys via
useTranslations instead of hardcoded English strings. Add the corresponding keys
to the locale message resources, including Hindi, while preserving the existing
theme-toggle and download behavior.
- Around line 126-133: Update the mobile menu Button in Navbar to open the
sidebar via an onClick handler calling setSidebarOpen(true), while preserving
onMouseEnter only if hover activation remains required.
- Around line 188-195: Replace the sidebar overlay div in the Navbar component
with a full-screen button using type="button", inset-0, and a localized
accessible name; preserve the existing sidebarOpen opacity, pointer-events,
transition, responsive visibility, and onClick behavior.
- Around line 35-52: Update the navbar links in the navItems definition to use
Link from `@/i18n/navigation` and ensure every destination resolves to an existing
locale-prefixed route. Either add locale-scoped pages for documentation,
contribute, about, and contact, or replace those hrefs with routes already
defined by the app; preserve the displayed labels and localePrefix: "always"
behavior.
In `@src/const/const.ts`:
- Around line 71-86: Remove the hardcoded label fields from the platformConfig
entries for mac, windows, and linux, and update the consuming Download rendering
logic to use localized Home.Download text at render time instead of reading
platformConfig labels.
In `@src/context/theme-provider.tsx`:
- Around line 19-45: Initialize ThemeProvider's theme state with the server-safe
Light value instead of getInitialTheme, then read the stored theme or matchMedia
preference inside an effect and update the state before applying it. Ensure the
effect applies the resolved theme to the document and persists it, preserving
the existing dark-class and localStorage behavior while keeping server and
initial client rendering consistent.
In `@src/hooks/useDownloadLink.ts`:
- Around line 16-31: Update getLatestRelease to cache the in-flight request as a
shared Promise<GitHubRelease> before awaiting fetch, so concurrent callers reuse
it. Clear the promise cache when the request rejects, while preserving the
existing response validation and returned release behavior.
In `@src/hooks/usePlatform.ts`:
- Around line 7-19: Update the platform-detection logic in usePlatform so the
initial render returns a stable fallback without accessing navigator, then read
navigator.userAgent inside useEffect and update the platform and isMobile state
after mount. Preserve the existing user-agent classification for browser
execution while remaining safe during Next.js server prerendering.
In `@src/index.css`:
- Line 1: Remove the Inter `@import` from src/index.css and configure the font
through next/font/google in the locale layout. Use the layout’s Inter
configuration to apply the generated font class or variable to the document,
preserving the existing typography while enabling self-hosting and preloading.
In `@src/messages/en.json`:
- Around line 41-68: Replace the placeholder feature and metrics entries in
src/messages/en.json lines 41-68 with approved, verifiable content, or remove
those cards; then add equivalent approved Hindi translations in
src/messages/hi.json lines 42-69. Update the feature section and Metrics keys
consistently in both locale files, without retaining unsupported claims or
authoring instructions.
In `@src/messages/hi.json`:
- Around line 18-19: Update the heroTitle and heroSubtitle translations in the
Hindi messages to remove the duplicated “ओपन-सोर्स गैलरी” text: keep
heroSubtitle as the gallery phrase and change heroTitle to the Hindi equivalent
of “सबसे उन्नत,” matching the English two-line layout.
In `@Tasks.md`:
- Line 13: Update the GitHub Pages deployment checklist entry in Tasks.md to
reference .github/workflows/CD.yml, the workflow added by this PR, or document
why both nextjs.yml and CD.yml remain active if applicable.
- Around line 1-2: Update Tasks.md so the file begins immediately with a
level-one Markdown heading, changing the existing “Project Maturity & TODO
Checklist” heading from ## to # and removing the leading blank line.
🪄 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: ec328e5c-dd2e-4582-9e8d-ab393d5cd559
⛔ Files ignored due to path filters (4)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/brand/icons/pictopy_logo.svgis excluded by!**/*.svgsrc/assets/PictoPy_Logo.pngis excluded by!**/*.pngsrc/assets/pictopy_logo.svgis excluded by!**/*.svg
📒 Files selected for processing (35)
.github/workflows/CD.ymlContributors.mdREADME.mdTasks.mdnext.config.tspackage.jsonsrc/app/[locale]/globals.csssrc/app/[locale]/layout.tsxsrc/app/[locale]/page.tsxsrc/app/page.tsxsrc/app/sitemap.tssrc/components/Download.tsxsrc/components/Hero.tsxsrc/components/HomePage.tsxsrc/components/LanguageSwitcher.tsxsrc/components/MacMockDesc.tsxsrc/components/Metrics.tsxsrc/components/MockUp.tsxsrc/components/MockUpWithDesc.tsxsrc/components/ShuffleGrid.tsxsrc/components/SocialMediaCTA.tsxsrc/components/ThemeToggle.tsxsrc/components/providers/theme-provider.tsxsrc/components/ui/Navbar.tsxsrc/components/ui/button.tsxsrc/const/const.tssrc/context/theme-provider.tsxsrc/hooks/useDownloadLink.tssrc/hooks/usePlatform.tssrc/i18n/metadata.tssrc/i18n/routing.tssrc/index.csssrc/messages/en.jsonsrc/messages/hi.jsonsrc/proxy.ts
💤 Files with no reviewable changes (3)
- src/components/providers/theme-provider.tsx
- src/components/ThemeToggle.tsx
- src/proxy.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Screenshots/Recordings:
Screen recording: - https://1drv.ms/v/c/2b55451e453f4443/IQB_cSK6h1NqQI5z3Hg9BEMOAW9FKtHajIZPBytcSXo_qtI?e=TCIOhr
Additional Notes:
This PR introduces the new webpage design implementation based on the approved Figma design.
Added the new design from Figma: https://www.figma.com/design/7tHcjQQSoGGL2jZfs5OzQK/GSoC-AOSSIE-Designs-Public?node-id=0-1&p=f&t=eRMb0uwF93p8Qmlu-0
All components are designed in a modular and reusable way to ensure better maintainability and scalability.
Remaining implementation updates will be handled by Saksham.
Checklist
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
New Features
Documentation
Deployment