[refactor] update listing pages to match design

[jinkang-0]

🎋 Description

🌴 What's new in this PR

What's new:

• Modified all listing pages (cases, LCA, language support) to match design
  • Added respective filters
• Added custom scrollbars to listings page + dropdown menus
• Now updates selected card when filters change
• Tweaked filtering to not filter out NULL values (but sort them to the end)

🌲 Screenshots

Cases

LCA

Language Support

🌳 How to review

First get this branch onto your local machine

# fetch from github, only necessary for first time review
git fetch origin ijp-129-update-listing-pages-to-match-design

# checkout to the branch
git checkout ijp-129-update-listing-pages-to-match-design

# pull updates, skip for first time review
git pull origin ijp-129-update-listing-pages-to-match-design

For future reviews if you fetched to local machine before this has rebased:

# toss uncommitted changes
# CAUTION: only do this if you're absolutely SURE you're on this branch
# double check: jinkang/ijp-129-update-listing-pages-to-match-design
git reset --hard

# delete this branch
git checkout main
git branch -D ijp-129-update-listing-pages-to-match-design

# redo setup
git fetch origin ijp-129-update-listing-pages-to-match-design
git checkout ijp-129-update-listing-pages-to-match-design
git pull origin ijp-129-update-listing-pages-to-match-design

Start the server

npm run dev

Code Review (recommended order):

• @/components/ListingPage/
• @/app/cases/
• @/app/limited-case-assignments/
• @/app/language-support/

🌱 Next steps

🔗 Relevant Links

ℹ️ Online sources

Very helpful scrollbar gist: https://gist.github.com/spemer/a0e218bbb45433bd611e68446523a00b

🪴 Related PRs

CC: @varortz, @kyrenetam

[linear]

IJP-129 Update listing pages to match design

[ccatherinetan]

When you set a filter and the case currently displayed in the ListingDetails section is not included in that filter group, we do not swap the ListingDetails to the first item of the filtered group. Is this the intended behavior?

[varortz]

lgtm!

[ccatherinetan]

looks good!