Feat: [LC-1411] Quick Nav

[goblincore]

Overview

Will add Loom explainer video later after I get some sleep but this is ready

🎟 Relevant Jira Issues

https://welibrary.atlassian.net/browse/LC-1411

📚 What is the context and goal of this PR?

Add Quick Nav feature on the Launchpad which is a new navigation component that allows a user to easily access certain actions related to a role they select including the new AI insights and skills management features

🥴 TL; RL:

New Quick Nav

💡 Feature Breakdown (screenshots & videos encouraged!)

See video for general idea:

Screen.Recording.2025-12-18.at.5.21.43.PM.mov

Updated Launchpad with trigger to new quick nav (also triggers automatically upon login though disabled if claiming and other flows):

QuickNav:

Role Selector:

New Issue Credentials Selector and Modal:

• LaunchPad quick actions & behavior
  • Added/expanded LaunchPad quick action modal + related quick-nav SVG icon set.
  • Added logic for when to show the action modal footer buttons.
  • Added gating/guards to avoid auto-triggering quick nav when other flows/query params are active.
• Role-based quick actions (LaunchPadActionModal)
  • Learner:
    • Updated learner menu actions + icon/color mappings.
  • Teacher:
    • View Learner Insights -> /ai/insights?tab=learner-insights
    • Request Learner Insights -> opens Request Insights modal (creates/uses AI Insights contract + service as needed)
    • Edit Skills Frameworks -> /skills?tab=admin-panel
    • Updated teacher menu button colors/icons.
  • Guardian:
    • Updated guardian menu actions/colors/icons.
    • View Child Insights -> /ai/insights?tab=child-insights
    • Family quick-nav improvements (boost child, add/switch child flows).
  • Admin:
    • Import Credentials (renamed from Import Credential) -> opens Bulk Import Credentials modal (same as Admin Tools)
    • Updated admin quick nav options wiring.
  • Developer:
    • Wired developer quick nav actions (API token, signing authority, consent flow, switch network, docs) and icons.
• Deep-link support
  • /ai/insights respects tab query param for initial tab selection.
  • /skills respects tab query param for initial tab selection (My Hub / Admin Panel).
• Modals / UI polish
  • Added Issue Managed Boost selector flow (used by Issue/Create credential entry points).
  • Changed search to use query regex instead of just searching client query cache
  • Improved role selector UX (layout + alignment):
    • Icon + title + checkmark alignment
    • Description layout
    • Prevent layout shift from scrollbars
    • Guard role selection for child profiles (cannot change role).
  • LaunchPadActionModal footer icons updated to use colored active Passport/LaunchPad icons.
  • Minor icon component tweak: navbar Passport icon now respects className for consistent sizing.
• Supporting fixes
  • Type fixes in skills helpers and consent/contract hooks where needed for correctness.
  • Misc styling tweaks (modal/freeform transitions + modal scrollbar behavior).

🛠 Important tradeoffs made:

• Does not attempt to refine components that were already made that are accessed from quick menu so that they better fit together. EG for example as guardian you can issue a boost to a child and it just brings up the existing child selector and doesn't make a new custom component that might be better UI

• Used URL query params for tab pre-selection to keep navigation simple and shareable.

🔍 Types of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Chore (refactor, documentation update, etc)

💳 Does This Create Any New Technical Debt? ( If yes, please describe and add JIRA TODOs )

• No
• Yes

Testing

🔬 How Can Someone QA This?

Login and test it out for various roles.

📱 🖥 Which devices would you like help testing on?

• iOS Simulator
• Android Simulator
• Chromium

🧪 Code Coverage

No new automated tests added (UI routing + modal wiring).

Documentation

📜 Gitbook

Not needed.

📊 Storybook

Not applicable.

✅ PR Checklist

• Related to a Jira issue (create one if not)
• My code follows style guidelines (eslint / prettier)
• I have manually tested common end-2-end cases
• I have reviewed my code
• I have commented my code, particularly where ambiguous
• New and existing unit tests pass locally with my changes
• I have made corresponding changes to gitbook documentation

🚀 Ready to squash-and-merge?:

• Code is backwards compatible
• There is not a "Do Not Merge" label on this PR
• I have thoughtfully considered the security implications of this change.
• This change does not expose new public facing endpoints that do not have authentication

✨ PR Description

Purpose: Add Quick Navigation modal feature to improve user role-based navigation and streamline common actions across LearnCard application
Main changes:
- Implemented LaunchPadActionModal with role-based action menus (learner, teacher, guardian, admin, developer)
- Added 20+ new quick navigation SVG icons and role selector modal component
- Enhanced FreeformModal with blur backdrop, scrolling behavior, and responsive layout improvements
- Refactored AccountSwitcherModal and LaunchPadHeader to support initial step navigation and child-only filtering

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Description using Guidelines Learn how}

[changeset-bot]

🦋 Changeset detected

Latest commit: e0e008d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
learn-card-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for learncarddocs canceled.

Name	Link
🔨 Latest commit	e0e008d
🔍 Latest deploy log	https://app.netlify.com/projects/learncarddocs/deploys/6944893f96418e0008676eee

[netlify]

✅ Deploy Preview for staging-learncardapp ready!

Name	Link
🔨 Latest commit	e0e008d
🔍 Latest deploy log	https://app.netlify.com/projects/staging-learncardapp/deploys/6944894002fdba0008a3c331
😎 Deploy Preview	https://deploy-preview-862--staging-learncardapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gitstream-cm]

✨ PR Review

The PR introduces a comprehensive Quick Nav feature with role-based actions and improved navigation. The implementation is generally solid, but there are several critical issues that need attention: a React hook dependency violation, a potential regex injection vulnerability, and unsafe type assertions that bypass TypeScript's type safety.

3 issues detected:

🐞 Bug - The effect reads `claim` but doesn't declare it as a dependency, causing potential stale closure bugs

Details: The useEffect hook that conditionally shows LaunchPadActionModal uses the claim variable in its logic (line 177-179) but does not include it in the dependency array. This violates React's exhaustive-deps rule and can lead to stale closures where the effect uses an outdated value of claim if it changes between renders.
File: apps/learn-card-app/src/pages/launchPad/LaunchPad.tsx

🔒 Security - Unescaped user input in RegExp constructor can break search or cause unexpected matching 🛠️

Details: User input from debouncedSearchInput is directly passed to the RegExp constructor without escaping special regex characters. Users could input characters like [, ], (, ), *, +, etc., which would either break the search functionality or cause unexpected matching behavior. While this is client-side, it can still cause the application to crash or behave unpredictably.
File: apps/learn-card-app/src/pages/launchPad/LaunchPadHeader/IssueManagedBoostSelector.tsx (100-114)
_{🛠️ A suggested code correction is included in the review comments.}

🧹 Maintainability - Using `as any` bypasses type safety and can hide runtime type errors

Details: The code uses as any to cast the result of useLaunchPadContracts() to LaunchPadItem[]. This completely bypasses TypeScript's type checking and can hide type mismatches that could cause runtime errors. The type assertion suggests a fundamental type incompatibility that should be properly resolved rather than suppressed.
File: apps/learn-card-app/src/pages/launchPad/LaunchPad.tsx

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Review using Guidelines Learn how}

[gitstream-cm]

✨ PR Review

The PR introduces a comprehensive Quick Nav feature with role-based actions. The implementation is generally solid with good type safety improvements in helper functions. However, there's a dependency array issue in a useEffect that could cause stale closures.

1 issues detected:

🐞 Bug - The effect reads `claim` on line 177 but doesn't list it as a dependency, violating React's rules of hooks

Details: The useEffect hook uses the claim query parameter to determine whether to skip showing the action modal, but claim is not included in the dependency array. This could cause the effect to use a stale value of claim if the query parameter changes.
File: apps/learn-card-app/src/pages/launchPad/LaunchPad.tsx

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Review using Guidelines Learn how}

[gitstream-cm]

✨ PR Review

The PR adds a comprehensive Quick Nav feature with role-based actions and improved navigation. The implementation is generally solid, but there are security concerns with user input handling that need to be addressed before merging.

1 issues detected:

🔒 Security - User input is used directly in RegExp constructor without sanitization, which can break search functionality or cause runtime errors. 🛠️

Details: User input from debouncedSearchInput is directly passed to the RegExp constructor without escaping special regex characters. This can cause the application to crash or behave unpredictably when users input special characters like '[', ']', '(', ')', '*', '+', etc.
File: apps/learn-card-app/src/pages/launchPad/LaunchPadHeader/IssueManagedBoostSelector.tsx (114-114)
_{🛠️ A suggested code correction is included in the review comments.}

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Review using Guidelines Learn how}

[gitstream-cm]

✨ PR Review

The PR adds a comprehensive Quick Nav feature with role-based actions. The implementation is generally well-structured, but there is a critical security issue with unescaped regex input in the new IssueManagedBoostSelector component that needs to be addressed.

1 issues detected:

🔒 Security - Unescaped user input in RegExp constructor can cause crashes or unexpected behavior 🛠️

Details: User input from debouncedSearchInput is passed directly to the RegExp constructor without escaping special regex characters. Users could input characters like '[', ']', '(', ')', '*', '+', etc., which would either break the search functionality or cause the application to crash with a regex parsing error.
File: apps/learn-card-app/src/pages/launchPad/LaunchPadHeader/IssueManagedBoostSelector.tsx (114-114)
_{🛠️ A suggested code correction is included in the review comments.}

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Review using Guidelines Learn how}

[gerardopar]

Screen.Recording.2025-12-18.at.2.58.44.PM.mov

@goblincore super slick! LGTM! 🚀🚀