FIX: tooltip added for navigation icons

[MuKuL-DiXiT]

Closes #222

📝 Description

added tooltips to navigations icons in dashboard and dashboard/*
This pull request will add hover tooltips to the dashboard navigation icons, improving usability and accessibility.

🔧 Changes Made

Added native browser tooltips to navigation icon buttons by including title={label} on the element.
Ensured the fix preserves all existing functionality, styling, and accessibility (sr-only content still available).
No structural or stylistic changes were introduced — this is a minimal, safe UX improvement.

📷 Screenshot

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works.

Summary by CodeRabbit

• Chores

  • Removed example environment configuration files from the repository.

• Style

  • Added hover tooltips to navigation buttons across multiple pages for improved accessibility and user experience.

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

[coderabbitai]

Walkthrough

This PR removes sample environment configuration files from both backend and frontend, and adds title attributes to navigation link and button components across four frontend pages to provide native browser tooltips for improved accessibility.

Changes

Cohort / File(s)	Summary
Environment Configuration Removal Backend/.env-example, Frontend/env-example	Removed template environment variable files containing placeholder credentials and API keys (SUPABASE_URL, SUPABASE_ANON_KEY, YOUTUBE_API_KEY, GROQ_API_KEY, GEMINI_API_KEY, etc.)
Navigation Tooltip Enhancement Frontend/src/pages/CollaborationDetails.tsx, Frontend/src/pages/Collaborations.tsx, Frontend/src/pages/DashboardPage.tsx, Frontend/src/pages/Messages.tsx	Added title attributes to Link and Button components in navigation elements, exposing visible labels as native browser tooltips on hover (e.g., title={label}, title="logout") for improved accessibility and user guidance

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• All changes follow a consistent, repetitive pattern (adding title attributes to UI components)
• No logic changes, control flow modifications, or functional alterations
• Simple accessibility enhancements with minimal risk of unintended side effects

Possibly related PRs

• FEAT(frontend): initialize Next.js project structure and configuration #131: Introduced the frontend env-example and modified the same frontend page components; this PR removes the env-example and refines the title attribute usage in those pages.

Poem

🐰 A rabbit hops through the UI,
Adding titles beneath each sky,
No more guessing what icons do—
Tooltips bloom in gray and blue!
Accessibility, our gift so true. ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR removes two environment example files (Backend/.env-example and Frontend/env-example), which are unrelated to the tooltip feature and appear to be out-of-scope changes not mentioned in issue #222.	Consider moving the environment file deletions to a separate PR focused on configuration cleanup, or clarify their necessity in the PR description.
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 (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the primary change—adding tooltips to navigation icons via the title attribute, which directly addresses issue #222.
Linked Issues check	✅ Passed	The PR successfully implements the suggested fix from issue #222 by adding title attributes to Link and Button elements across dashboard navigation pages, providing visible tooltips on hover.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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: 0

🧹 Nitpick comments (2)

Frontend/src/pages/Collaborations.tsx (1)

64-77: Move title attribute to Link element for consistency.

The title attribute is currently on the Button component (line 70), but in the other files in this PR (CollaborationDetails.tsx, Messages.tsx, DashboardPage.tsx), the title is placed directly on the Link element. While Radix UI's asChild pattern should forward props to the child component, placing the title directly on the Link is more explicit and maintains consistency across the codebase.

Apply this diff:

                <Button
                  key={to}
                  variant="ghost"
                  size="sm"
                  className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]"
                  asChild
-                  title={label}
                >
-                  <Link to={to}>
+                  <Link to={to} title={label}>
                    <Icon className="h-5 w-5" />
                    <span className="sr-only">{label}</span>
                  </Link>
                </Button>

Frontend/src/pages/DashboardPage.tsx (1)

71-73: Simplify JSX expression for title attribute.

The title attribute uses an unnecessary JSX expression with quotes: title={"logout"}. For string literals, you can use the simpler syntax title="logout".

Apply this diff:

-  <Button onClick={logout} title={"logout"} variant="ghost">
+  <Button onClick={logout} title="logout" variant="ghost">
    <LogOut className="h-5 w-5" />  
  </Button>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3be437 and e7eed33.

📒 Files selected for processing (6)

• Backend/.env-example (0 hunks)
• Frontend/env-example (0 hunks)
• Frontend/src/pages/CollaborationDetails.tsx (1 hunks)
• Frontend/src/pages/Collaborations.tsx (1 hunks)
• Frontend/src/pages/DashboardPage.tsx (2 hunks)
• Frontend/src/pages/Messages.tsx (1 hunks)

💤 Files with no reviewable changes (2)

• Frontend/env-example
• Backend/.env-example

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: Saahi30
Repo: AOSSIE-Org/InPactAI PR: 98
File: Frontend/src/pages/CollaborationDetails.tsx:234-234
Timestamp: 2025-07-14T11:45:01.864Z
Learning: In frontend-only PRs, hardcoded URLs (like dummy PDF URLs for contracts) and mock data are acceptable and intentional placeholders for UI development, to be replaced during backend integration phase.

🔇 Additional comments (3)

Frontend/src/pages/CollaborationDetails.tsx (1)

333-345: LGTM! Tooltip implementation is correct.

The title attribute is properly placed on the Link element, which will provide native browser tooltips on hover. This implementation is consistent with the pattern used in Messages.tsx and DashboardPage.tsx.

Frontend/src/pages/Messages.tsx (1)

208-220: LGTM! Tooltip implementation is correct.

The title attribute is properly placed on the Link element, providing native browser tooltips for the navigation icons. This implementation is consistent with the accessibility improvements across the PR.

Frontend/src/pages/DashboardPage.tsx (1)

47-59: LGTM! Tooltip implementation is correct.

The title attribute is properly placed on the Link element, providing native browser tooltips for the navigation icons. This follows the consistent pattern used across the PR.

[MuKuL-DiXiT]

@Saahi30 its been a while since I raised this PR, could you please review it