[LC-1677] Pathways 2.0 - Grow Skills by smurflo2 · Pull Request #1168 · learningeconomy/LearnCard

smurflo2 · 2026-04-13T21:47:29Z

Overview

🎟 Relevant Jira Issues

📚 What is the context and goal of this PR?

New look for pathways content - now Grow Skills - as well as a Grow Skills modal. The modal will show you the pre-generated recommended content for you and you also have the ability to query for different content. It has tabs as well as a text filter.

Notably, it seems to be kind of hard to get AI sessions to actually generate, but that's a problem for another ticket. As far as this PR goes, both states are handled gracefully.

🥴 TL; RL:

New look + modal for pathways content -> "Grow Skills"

💡 Feature Breakdown (screenshots & videos encouraged!)

https://www.loom.com/share/56a4247ebb11487984fd8b8b3130ad77

🛠 Important tradeoffs made:

🔍 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?

Have pre-generated pathway content**
- something like: be consented to LearnCard AI with everything Live Syncing -> have data in your wallet (upload transcript, sync demo school, etc.)
Go to AI Pathways
See pre-generated content in Grow Skills section
Cards should be side scrollable
Grow Skills button at the bottom of that page opens that content in a modal with the cards interwoven.
The tabs and filter input can filter the content
You can add a custom search via the top Pathways input
Back to homepage
Clicking View All opens that same modal but with that particular category tab selected
You can also get there through the Explore Pathways flow. When you do that, the search query should be passed through to the Grow Skills modal

📱 🖥 Which devices would you like help testing on?

🧪 Code Coverage

Documentation

📝 Documentation Checklist

User-Facing Docs (docs/ → docs.learncard.com)

Tutorial — New capability that users need to learn (docs/tutorials/)
How-To Guide — New workflow or integration (docs/how-to-guides/)
Reference — New/changed API, config, or SDK method (docs/sdks/)
Concept — New mental model or architecture explanation (docs/core-concepts/)
App Flows — Changes to LearnCard App or ScoutPass user flows (docs/apps/)

Internal/AI Docs

AGENTS.md — New pattern, flow, or context that AI assistants need
Code comments/JSDoc — Complex logic that needs inline explanation

Visual Documentation

Mermaid diagram — Complex flow, state machine, or architecture

💭 Documentation Notes

✅ 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 completed the Documentation Checklist above (or explained why N/A)
I have considered product analytics for user-facing features (use @analytics in learn-card-app)

🚀 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: Implement comprehensive Pathways 2.0 Grow Skills feature with modal-based UI, skill-based content discovery, and redesigned user experience for AI learning pathways.

Main changes:

Added GrowSkillsModal with tabbed interface (All/AI Sessions/Courses/Media) and semantic skill search integration for personalized content discovery
Implemented carousel-based content sections with new GrowSkillsAiSessionItem, GrowSkillsCourseItem, and GrowSkillsMediaItem components featuring drag-aware click handling
Refactored AiPathways page to replace inline content with GrowSkillsPathwaysHome component and optimized course normalization to deduplicate programs by ID

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 · 2026-04-13T21:47:36Z

🦋 Changeset detected

Latest commit: dd0954c

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

This PR includes changesets to release 2 packages

Name	Type
learn-card-base	Patch
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 · 2026-04-13T21:47:36Z

✅ Deploy Preview for app-store-1-basic-launchpad-app canceled.

Name	Link
🔨 Latest commit	`dd0954c`
🔍 Latest deploy log	https://app.netlify.com/projects/app-store-1-basic-launchpad-app/deploys/69debcbfec49f20008c1fb7e

netlify · 2026-04-13T21:47:36Z

✅ Deploy Preview for learncarddocs canceled.

Name	Link
🔨 Latest commit	`dd0954c`
🔍 Latest deploy log	https://app.netlify.com/projects/learncarddocs/deploys/69debcbff29dd70008460eb8

netlify · 2026-04-13T21:47:36Z

✅ Deploy Preview for staging-learncardapp ready!

Name	Link
🔨 Latest commit	`dd0954c`
🔍 Latest deploy log	https://app.netlify.com/projects/staging-learncardapp/deploys/69debcbf5af9670008406912
😎 Deploy Preview	https://deploy-preview-1168--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.

atlassian · 2026-04-13T21:47:36Z

To enable Rovo Dev code reviews, link your GitHub account to your Atlassian account.

This is a one-time task that takes less than a minute. Once your account is linked, resubmit the pull request to trigger a code review.

github-actions · 2026-04-13T21:47:50Z

👋 Hey there! It looks like you modified code, but didn't update the documentation in /docs.

If this PR introduces new features, changes APIs, or modifies behavior that users or developers need to know about, please consider updating the docs.

🏄 Windsurf Tip

You can ask Windsurf to help:

"Analyze the changes in this PR and update the gitbook docs in /docs accordingly."

Windsurf will review your changes and suggest appropriate documentation updates based on what was modified.

📚 Documentation Guide

Change Type	Doc Location
New feature/API	`docs/tutorials/` or `docs/how-to-guides/`
SDK/API changes	`docs/sdks/`
New concepts	`docs/core-concepts/`
App UI/UX flows	`docs/apps/` (LearnCard App, ScoutPass)
Internal patterns	`AGENTS.md`

This is an automated reminder. If no docs are needed, feel free to ignore this message.

gitstream-cm

✨ PR Review

The PR introduces a comprehensive "Grow Skills" feature with new UI components and modals. The implementation is generally well-structured, but there are a few issues related to state initialization timing and React hooks dependencies that could cause unexpected behavior.

2 issues detected:

🐞 Bug - useState initialization captures percentage before async data loads, causing incorrect conditional rendering 🛠️

Details: The isInitialPercentageAboveZero state is initialized with percentage > 0, but percentage comes from an async hook. If the hook hasn't loaded yet and returns 0 initially, then later loads to a non-zero value, the component won't re-render the cards in the correct order because the state is frozen at initialization. This will cause the "What Would You Like To Do" card to appear in the wrong position.

File: apps/learn-card-app/src/pages/ai-pathways/AiPathways.tsx (23-23)
_{🛠️ A suggested code correction is included in the review comments.}

🐞 Bug - useEffect is missing handleGetVideoMetadata from its dependency array, causing potential stale closure issues

Details: The useEffect hook calls handleGetVideoMetadata() which is defined inline without useCallback, but the function is not included in the dependency array. This violates React's exhaustive-deps rule and could lead to stale closures or unexpected behavior when dependencies change.
File: apps/learn-card-app/src/pages/ai-pathways/GrowSkillsMediaItem.tsx (104-111)

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}

rhen92

@smurflo2 this is looking really nice! I did notice a couple things that need to be addressed.

Before opening up the "Grow Skills" modal, its very fickle in where you have to click to open up the videos in the media section.

Screen.Recording.2026-04-14.at.11.47.09.AM.mov

There is a broken video for one of the media that popped up for me. Is there a way we can handle if there is no video present.

Screen.Recording.2026-04-14.at.11.30.48.AM.mov

When you try to filter and there is no matches, can we add a phrase something similar to the Explore Roles section?

I had an issue where multiple of the same course were populating for me.

Screen.Recording.2026-04-14.at.11.36.37.AM.mov

I had another issue where those same repeat courses would stay behind when I would try to search for a different role.

Screen.Recording.2026-04-14.at.11.40.59.AM.mov

gerardopar

@smurflo2 pretty slick!

I ran into an issue where the modal remains open after navigating into a session. Aside from that—and the issues @rhen92 mentioned—this is looking good to me 👍🏽

smurflo2 · 2026-04-14T21:09:37Z

@smurflo2 this is looking really nice! I did notice a couple things that need to be addressed.

Before opening up the "Grow Skills" modal, its very fickle in where you have to click to open up the videos in the media section.

There is a broken video for one of the media that popped up for me. Is there a way we can handle if there is no video present.

When you try to filter and there is no matches, can we add a phrase something similar to the Explore Roles section?

I had an issue where multiple of the same course were populating for me.

I had another issue where those same repeat courses would stay behind when I would try to search for a different role.

@rhen92 Thanks for testing! Lot of great catches here.

This is due to the interaction between Swiper and onClick. Basically if you dragged the cards at all, it wouldn't consider it a click. I added some logic to loosen that. So now if you drag 10px or less then it'll still open the details modal
Okay so this is just a broken CareerOneStop page. There's no video for us to get and the page we fallback to is broken. I updated it so that if it's not a youtube link, we just open it in a new tab rather than trying to lightbox it. This way it's at least clear that it's something broken on their end, not ours 🤷

3. Done 4. Again with the bad data from CareerOneStop 🤦. It was giving us two items with identical IDs (and most other info duplicated, but with one or two fields different). I added some logic to collapse mostly-duplicate items. 5. Can you still get this to happen after the duplicate item fix?

@gerardopar Fixed 👍

gitstream-cm

✨ PR Review

The PR introduces a comprehensive "Grow Skills" feature with modals, carousels, and various content types. The code is generally well-structured, but there is a significant React hooks issue that needs to be addressed.

1 issues detected:

🐞 Bug - useEffect calls a function not included in its dependency array, violating React hooks rules 🛠️

Details: The useEffect calls handleGetVideoMetadata() which is defined inline without being wrapped in useCallback. The function is not included in the dependency array, violating React's exhaustive-deps rule. This could lead to stale closures or unexpected behavior when dependencies change, particularly if the function logic or its dependencies are modified later.

File: apps/learn-card-app/src/pages/ai-pathways/GrowSkillsMediaItem.tsx (116-116)
_{🛠️ 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 · 2026-04-14T22:19:43Z

🥷 Code experts: gerardopar, TaylorBeeston

gerardopar, smurflo2 have most 👩‍💻 activity in the files.
gerardopar, smurflo2 have most 🧠 knowledge in the files.

See details

AGENTS.md

Activity based on git-commit:

	gerardopar	smurflo2
APR		2 additions & 0 deletions
MAR		314 additions & 58 deletions
FEB
JAN
DEC
NOV

Knowledge based on git-blame:
smurflo2: 25%

apps/learn-card-app/src/components/main-subheader/MainSubHeader.tsx

Activity based on git-commit:

	gerardopar	smurflo2
APR
MAR
FEB	1 additions & 1 deletions	32 additions & 37 deletions
JAN
DEC
NOV

Knowledge based on git-blame:
smurflo2: 18%
gerardopar: 1%

apps/learn-card-app/src/components/main-subheader/MainSubHeader.types.ts

Activity based on git-commit:

	gerardopar	smurflo2
APR
MAR
FEB	10 additions & 0 deletions
JAN
DEC
NOV

Knowledge based on git-blame:
gerardopar: 3%

apps/learn-card-app/src/pages/SkillFrameworks/CompetencyIcon.tsx

Activity based on git-commit:

	gerardopar	smurflo2
APR		1 additions & 1 deletions
MAR		14 additions & 4 deletions
FEB		5 additions & 1 deletions
JAN
DEC
NOV

Knowledge based on git-blame:
smurflo2: 53%

apps/learn-card-app/src/pages/ai-pathways/AiPathways.tsx

Activity based on git-commit:

	gerardopar	smurflo2
APR	17 additions & 24 deletions	24 additions & 2 deletions
MAR		3 additions & 0 deletions
FEB	147 additions & 0 deletions
JAN
DEC
NOV

Knowledge based on git-blame:
gerardopar: 75%
smurflo2: 1%

apps/learn-card-app/src/pages/ai-pathways/ExplorePathwaysModal.tsx

Activity based on git-commit:

	gerardopar	smurflo2
APR	52 additions & 34 deletions	618 additions & 0 deletions
MAR
FEB
JAN
DEC
NOV

Knowledge based on git-blame:
smurflo2: 92%
gerardopar: 8%

apps/learn-card-app/src/pages/ai-pathways/ExploreRoles.tsx

Activity based on git-commit:

	gerardopar	smurflo2
APR	236 additions & 0 deletions
MAR
FEB
JAN
DEC
NOV