Adding cursor

[Munishgowda]

Added Cursor to Languages

Proposed change

Resolves #2672

Add the PR description here.

Checklist

• I've read and followed the contributing guidelines.
• I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Caution

Review failed

The head commit changed during the review from 888e6d6 to e6e165e.

Summary by CodeRabbit

• Performance

  • Optimized frontend service memory allocation for improved performance.

• Style

  • Enhanced visual feedback on interactive list items with improved cursor indication.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Two independent modifications: a Node.js heap memory configuration added to the local Docker compose file for the frontend service, and a cursor-pointer CSS utility class added to ToggleableList item buttons for improved UX affordance on interactive elements.

Changes

Cohort / File(s)	Summary
Docker configuration docker-compose/local.yaml	Added NODE_OPTIONS environment variable to frontend service to increase Node.js heap memory allocation to 8192 MB
Frontend styling frontend/src/components/ToggleableList.tsx	Added cursor-pointer utility class to ToggleableList item buttons to indicate interactive elements

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Changes are purely cosmetic/configuration with no logic modifications
• Single-line additions with straightforward, repetitive patterns

Suggested labels

frontend

Suggested reviewers

• arkid15r
• kasya

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The docker-compose/local.yaml NODE_OPTIONS change appears unrelated to the issue #2672 objective of adding cursor pointer styling to Languages/Topics items.	Remove the docker-compose/local.yaml NODE_OPTIONS change, which is out of scope for issue #2672, or provide justification for this modification in the PR description.
Title check	❓ Inconclusive	The title is vague and does not clearly convey the main change; it lacks specificity about what cursor change was made or where it applies.	Improve the title to be more specific, such as 'Add pointer cursor to ToggleableList items' or 'Add cursor pointer to Languages and Topics items'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description mentions adding cursor to Languages and links to issue #2672, which aligns with the changeset modifications to the ToggleableList component.
Linked Issues check	✅ Passed	The PR implements the main objective from issue #2672 by adding cursor: pointer styling to the ToggleableList component, which addresses the Languages and Topics items interactivity indication requirement.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/components/ToggleableList.tsx (1)

42-42: Good addition for UX affordance, but consider disabled state.

The cursor-pointer class appropriately signals that the items are interactive, directly addressing issue #2672. However, when isDisabled is true, the pointer cursor still appears even though clicking has no effect (line 43 conditionally prevents the action). This could mislead users.

Consider conditionally applying the cursor based on the disabled state:

-            className="cursor-pointer rounded-lg border border-gray-400 px-3 py-1 text-sm hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700"
+            className={`rounded-lg border border-gray-400 px-3 py-1 text-sm hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700 ${!isDisabled ? 'cursor-pointer' : 'cursor-default opacity-50'}`}

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e6bed92 and 127fdb3.

📒 Files selected for processing (2)

• docker-compose/local.yaml (1 hunks)
• frontend/src/components/ToggleableList.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-09-17T02:42:41.928Z

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.

Applied to files:

• frontend/src/components/ToggleableList.tsx

🔇 Additional comments (1)

frontend/src/components/ToggleableList.tsx (1)

8-27: ToggleableList is confirmed as the component rendering Languages and Topics.

The component is imported in frontend/src/components/CardDetailsPage.tsx (line 36) and used at lines 193–197 for Languages and line 200 for Topics, each with appropriate icons and labels.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kasya]

@Munishgowda Thanks for working on this! Left s request ⬇️

[kasya]

@Munishgowda This component has a isDisabled prop.
I believe when the click is disabled we should not show the cursor. Can you update this to be a dynamic value?

[arkid15r]

@Munishgowda please also update tests for this component.