[Remove Vuetify from Studio] Content library filter bar

[Swoyamjeetcodes]

Summary

• Removed Vuetify usage from the Content Library filter bar.
• Replaced VContainer with a plain wrapper div and explicit scoped styles for max-width, centering, and padding.
• Replaced VChip with shared StudioChip and updated chip-close handling from @input to @close.
• Replaced Vuetify spacing utility classes with local CSS classes.
• Updated tests to target StudioChip close button ([data-test="remove-chip"]) instead of Vuetify’s .v-chip__close.

Manual verification performed:

• Ran:
  pnpm test -- contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js --runInBand
• Result:
  PASS (1 suite, 4 tests)

References

• Closes [Remove Vuetify from Studio] Content library filter bar #5746

Reviewer guidance

• In Content Library, apply multiple filters (e.g. keywords, languages, coach content) and confirm chips render correctly.
• Remove individual chips and confirm corresponding query params are removed.
• Click Clear all and confirm all filter query params are cleared.
• Spot-check spacing/wrapping behavior of chips across narrow and wide viewports (visual parity after removing Vuetify utilities).

##Screenshots

Before	After

AI usage

• I used Codex to help draft the refactor summary and verify the focused test command.
• I reviewed the generated output and final diff manually, and confirmed the updated test suite passes.

[learning-equality-bot]

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

• You ran pre-commit locally
• All issue requirements are satisfied
• The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

[learning-equality-bot]

📢✨ Before we assign a reviewer, we'll turn on @rtibblesbot to pre-review. Its comments are generated by an LLM, and should be evaluated accordingly.

[learning-equality-bot]

📢✨ Before we assign a reviewer, we'll invite community pre-review. See the community review guidance for both authors and reviewers.

[rtibblesbot]

Clean Vuetify removal — VContainer → scoped CSS, VChip → StudioChip, event wiring updated correctly.

CI passing. No dev server available for visual verification.

• blocking: Missing screenshots (acceptance criteria requires them)
• suggestion: Dead .v-card CSS could be removed
• praise: Correct Vuetify spacing equivalents, good test update

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Reviewed the pull request diff checking for:

• Correctness: bugs, edge cases, undocumented behavior, resource leaks, hardcoded values
• Design: unnecessary complexity, naming, readability, comment accuracy, redundant state
• Architecture: duplicated concerns, minimal interfaces, composition over inheritance
• Testing: behavior-based assertions, mocks only at hard boundaries, accurate coverage
• Completeness: missing dependencies, unupdated usages, i18n, accessibility, security
• Principles: DRY (same reason to change), SRP, Rule of Three (no premature abstraction)
• Checked CI status and linked issue acceptance criteria
• For UI changes: inspected screenshots for layout, visual completeness, and consistency

[rtibblesbot]

Code changes look correct — Vuetify fully removed, StudioChip wired properly, CSS equivalents accurate, dead .v-card styles cleaned up.

Prior Finding Status

#	Finding	Severity	Status	Evidence
1	Missing screenshots	blocking	UNADDRESSED	No screenshots added, no reply
2	Dead .v-card CSS	suggestion	RESOLVED	Removed in 51b825d
3	Correct spacing equivalents	praise	—	—
4	Good test update	praise	—	—

Summary: 1/2 actionable prior findings resolved. 1 re-raised below.

CI passing. No dev server available for visual verification.

• blocking: Screenshots still missing (see inline comment)
• praise: .v-card cleanup is a nice finishing touch — component is now fully Vuetify-free

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Compared the current PR state against findings from a prior review:

• Retrieved prior bot reviews deterministically via the GitHub API
• Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
• Only raised NEW findings for newly introduced code
• Reviewed the pull request diff checking for correctness, design, architecture, testing, completeness, and adherence to DRY/SRP principles
• Checked CI status and linked issue acceptance criteria

[learning-equality-bot]

📢✨ Before we assign a reviewer, we'll turn on @rtibblesbot to pre-review. Its comments are generated by an LLM, and should be evaluated accordingly.

[rtibblesbot]

All prior findings resolved — screenshots added, .v-card cleanup done. Visual parity confirmed from before/after screenshots. CI passing.

Prior Finding Status

#	Finding	Severity	Status	Evidence
1	Missing screenshots	blocking	RESOLVED	Before/after screenshots added to PR description
2	Dead .v-card CSS	suggestion	RESOLVED	Removed in 51b825d (confirmed in prior review)
3	Correct spacing equivalents	praise	—	—
4	Good test update	praise	—	—

• praise: Clean, minimal PR — Vuetify fully removed with accurate CSS equivalents and proper StudioChip integration

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Compared the current PR state against findings from a prior review:

• Retrieved prior bot reviews deterministically via the GitHub API
• Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
• Only raised NEW findings for newly introduced code
• Reviewed the pull request diff checking for correctness, design, architecture, testing, completeness, and adherence to DRY/SRP principles
• Checked CI status and linked issue acceptance criteria