fix: Ensure deterministic and safe project sorting to prevent hydration issues

[AnshuPriya-1]

Addressed Issues:

Fixes #663

Description

This PR ensures deterministic and safe sorting of projects on the /projects page to prevent potential hydration mismatches.

Changes

• Introduced a dedicated sortedProjects variable for stable sorting
• Used localeCompare with { sensitivity: 'base' } for case-insensitive sorting
• Added safeguards for undefined values ((a.name || ''))
• Avoided sorting directly during render to maintain consistency between server and client

Motivation

Although the hydration issue was previously resolved upstream, this change adds an additional safeguard to ensure:

• consistent ordering across renders
• prevention of future hydration mismatches due to unstable or unsafe sorting

Result

• Stable rendering of project list
• Improved robustness and maintainability

Screenshots/Recordings:

No UI changes. This PR focuses on improving internal rendering consistency and preventing potential hydration mismatches.

Additional Notes:

This change is a preventive improvement to ensure consistent behavior between server-side and client-side rendering, especially in cases where project names may vary in casing or be undefined.

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• 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 Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• Bug Fixes

  • Projects list now sorts alphabetically using case-insensitive comparison for consistent ordering.
  • Handles missing or undefined project names gracefully to prevent sorting issues.

• Updates

  • Updated the OpenChat project link to point to its dedicated project page (/projects/openchat).

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fc60a33f-229b-4bea-8992-ce1ceac7103b

📥 Commits

Reviewing files that changed from the base of the PR and between e8f34e3 and aa28f12.

📒 Files selected for processing (1)

• src/helper/projects.js

✅ Files skipped from review due to trivial changes (1)

• src/helper/projects.js

---

📝 Walkthrough

Walkthrough

Replaced inline sorting in the Projects page render with a precomputed sortedProjects array that uses localeCompare with { sensitivity: 'base' } and treats missing name values as empty strings. Also updated the OpenChat project link from '#' to '/projects/openchat'.

Changes

Cohort / File(s)	Summary
Projects Page Sort Logic src/app/projects/page.jsx	Moved inline projects.slice().sort(...) into a sortedProjects variable; sorting now uses name.localeCompare(..., { sensitivity: 'base' }) and treats undefined/null names as '', making sort case-insensitive and null-tolerant.
Project Entry Link src/helper/projects.js	Updated OpenChat project's link.href from '#' to '/projects/openchat' (label unchanged).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat: add missing AOSSIE, StabilityNexus, and DjedAlliance projects #641 — Also modifies src/app/projects/page.jsx sorting and updates entries in src/helper/projects.js; likely overlaps with sorting and project-list edits.

Suggested reviewers

• Zahnentferner

Poem

"I nibble through arrays at dawn's first light,
I sort by name with gentle might,
Case no longer sparks a fight,
Links now point where rabbits sight,
Hooray — the Projects page sleeps tight." 🐇✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The OpenChat link update to '/projects/openchat' is a minor out-of-scope change unrelated to fixing the hydration issue in issue #663.	Revert the OpenChat link change to '#' or move it to a separate PR focused on link corrections, keeping this PR focused solely on hydration fix.
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 (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: ensuring deterministic and safe project sorting to prevent hydration issues, which directly addresses the core objective of the PR.
Linked Issues check	✅ Passed	The PR fully addresses the hydration error by implementing stable, case-insensitive sorting with null-safety checks, matching all requirements from issue #663.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[Aditya30ag]

Hey,
Previously we were sorting inline with projects.slice().sort(...), and now we’re introducing a separate sortedProjects variable. right

[AnshuPriya-1]

Hii @Aditya30ag
Yes, earlier sorting was being done inline using:
projects.slice().sort(...)
In this PR, I moved the sorting logic to a dedicated sortedProjects variable to ensure deterministic and stable ordering before render.
This helps avoid potential hydration mismatches caused by differences between server-side and client-side rendering when sorting happens during render.
It also improves readability and ensures the sorting logic is applied consistently in one place.