Migrate Studio snackbar to KDS

[Monier-Ayman]

Summary

This PR migrates Studio's snackbar implementation from Vuetify/Vuex to the Kolibri Design System's KSnackbar and useKSnackbar, as part of the effort to remove Vuetify from Studio.

What changed

Snackbar infrastructure

• Replaced the Vuetify VSnackbar implementation in GlobalSnackbar.vue with KDS KSnackbar.
• Migrated snackbar state management from the Vuex snackbar module to useKSnackbar.
• Removed the old shared/vuex/snackbar module.
• Removed the old useSnackbar composable and its mock.
• Removed the snackbar module registration from the shared Vuex store.
• Removed the global VSnackbar registration from shared/app.js.

Snackbar callers

Migrated all existing Studio snackbar callers to useKSnackbar, including:

• Channel actions and channel management
• Content node editing and options
• Clipboard actions
• Import from Channels
• Submission and review workflows
• Move operations
• Tree and staging views
• File uploads and progress
• Trash actions
• Channel invitations and sharing
• Account and password settings
• Storage requests
• Token copying
• Error/technical message handling
• Community library update notifications

Existing snackbar behavior was preserved where applicable, including:

• Custom messages and durations
• Auto-dismiss behavior
• Persistent snackbars
• Action buttons and callbacks
• Undo actions
• Manual dismissal
• hideCallback behavior
• Promise-based flows that depended on snackbar dismissal

The existing showSnackbarOnCompleteSync method was kept because its name is part of the surrounding workflow; its snackbar implementation now uses useKSnackbar.

Accessibility

The new KSnackbar implementation uses the accessibility features provided by the Kolibri Design System, including the existing announce and assertive options where appropriate.

Tests

Updated affected tests and mocks to use useKSnackbar instead of the removed snackbar implementation.

The affected test suite was run with Jest in-band:

• 21 test suites passed
• 303 tests passed
• 1 test skipped
• 0 failures

Also verified with:

git diff --check

with no whitespace errors.

References

Closes #5955

Notes

The old forceReuse option had no actual callers in Studio. The KDS snackbar handles reactive text updates directly, so no additional forceReuse migration was necessary.

This PR is focused on replacing the snackbar infrastructure while preserving the existing user-facing behavior.

AI Usage

I used AI (Antigravity) as a coding assistant while working on this migration. I planned and implemented the changes myself, with AI helping me investigate the existing implementation, work through some of the changes, and review parts of the implementation.

I reviewed and refined all changes myself, verified the behavior against the issue requirements, checked the existing code and history, and ran the affected Jest tests and local pre-commit checks.

[learning-equality-bot]

👋 Hi @Monier-Ayman, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

• Contribution is aligned with our contributing guidelines

• Pull request description has correctly filled AI usage section & follows our AI guidance:

  AI guidance

  
  

  State explicitly whether you didn't use or used AI & how.

  If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

  • Disclose — Be open about when you've used AI for support.
  • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
  • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
  • Process sharing — Explain how you used the AI so others can learn.

  
  

  Examples of good disclosures:

  "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

  "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.

[Monier-Ayman]

Hi @akolson! The PR is ready for review. I’ve completed the migration and verified the affected tests pass. 🙌

[akolson]

Hi @Monier-Ayman! Sure, I’ll take a look. Also, please be sure to always include the References section in the PR description so the assigned issue and PR can be auto-linked. Thank you!

[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]

🟡 Waiting for changes

Last updated: 2026-10-05 15:11 UTC

[rtibblesbot]

PR #6144: removing the Vuex snackbar module left consumers behind, and several specs got weaker. Call-site migrations match KDS 5.9.0 useKSnackbar and keep the old 6000 ms timing.

CI failing: Frontend tests, linting and build. Locally, ReviewSubmissionSidePanel.spec.js fails 3 tests. SubmitToCommunityLibrarySidePanel.spec.js fails 1.

Manual QA in the browser passed for trash undo, import/search, sharing, account settings, admin actions and the notifications error, including RTL. Redis MISCONF on the QA stack blocked duplicate, clipboard, quick edit, move and channel list. Those passed in scratch Jest against the real GlobalSnackbar. They still need a browser pass.

• blocking: unmigrated consumers of the removed store module (baseStore.js)
• blocking: unused test bindings plus vacuous assertions (studioCopyToken.spec.js, trashModal.spec.js)
• suggestion: other specs dropped their text assertions
• suggestion: snackbar options repeated at every call site
• suggestion: time-limited Cancel/Undo not reachable by keyboard
• suggestion: no test for GlobalSnackbar wiring

---

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

How was this generated?

Ran a phased review pipeline over the pull request diff:

• Classified the diff to select review passes (core, frontend, backend) and whether manual QA was required
• Core review pass checked correctness, design, architecture, testing, completeness, and DRY/SRP/Rule-of-Three principles
• Specialized frontend/backend review passes applied framework-specific lenses where those files changed
• For UI changes: manual QA and an accessibility audit against a live dev server, when available
• Checked CI status and linked issue acceptance criteria
• Synthesized one review from those passes and chose the verdict from the findings, CI status, and QA evidence

[Monier-Ayman]

Hi @rtibblesbot, thanks for the detailed review. I went through the feedback and pushed the fixes.

I fixed the remaining Vuex snackbar usage, restored the snackbar text assertions, added autofocus for the temporary Cancel/Undo actions, kept the 6000ms duration where needed, and fixed the GlobalSnackbar callback/cleanup behavior with tests.

I also cleaned up the unused test variables. The affected tests are now 123/123 passing, ESLint is clean, and git diff --check passes.

Thanks again for pointing these out!

[rtibblesbot]

PR #6144: 2 of 9 prior findings are still open; 7 are resolved or acknowledged.

CI passing. Manual QA did not run.

Still open:

• studioCopyToken.spec.js:79,90 — mockStore is still destructured and unused. Drop it; it no longer blocks.
• useCommunityLibraryUpdates.js:178 — the error snackbar still dismisses at the 5000 ms default. Add duration: 6000, as NotificationsModal/index.vue does.

New suggestions are inline:

• GlobalSnackbar calls hideCallback twice.
• Its spec mocks the composable.
• The EditSourceModal text assertions never run.

Prior-finding status

RESOLVED — contentcuration/contentcuration/frontend/shared/vuex/baseStore.js:52 — removing module left unmigrated consumers
UNADDRESSED — contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/tests/studioCopyToken.spec.js:90 — mockStore unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/trash/tests/trashModal.spec.js — dispatchSpy unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — snackbar text not checked
UNADDRESSED — contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — 5000 ms duration
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:604 — Cancel unreachable by keyboard
RESOLVED — contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue — callback wiring untested
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue — deferral unneeded
ACKNOWLEDGED — contentcuration/contentcuration/frontend/shared/composables/useToken.js:42 — setup-time useKSnackbar() fixes TDZ (praise)

---

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

How was this generated?

Ran an automatic code-only delta review triggered by new commits on a previously reviewed PR:

• Retrieved prior bot reviews via the GitHub API
• Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
• Only raised NEW findings for newly introduced code
• Core review pass only — specialized frontend/backend lenses and manual QA run when a review is explicitly requested
• Synthesized one review from the passes and chose the verdict from the findings, CI status, and QA evidence

Superseded by my review of 7f8524b: no blocking findings remain.

[Monier-Ayman]

@rtibblesbot Thanks for the review! I addressed all the points you mentioned and pushed the fixes in f5c91a024.

I removed the unused mockStore, added the 6000ms duration, fixed the GlobalSnackbar callback handling and tests, and fixed the async assertions in EditSourceModal.

I also ran the affected tests and ESLint, and everything passed.

[rtibblesbot]

PR #6144: all 13 prior findings resolved or acknowledged. Two new test-value suggestions inline.

CI passing. Manual QA did not run. The UI is untested.

Prior-finding status

RESOLVED — contentcuration/contentcuration/frontend/shared/vuex/baseStore.js:52 — Removing module leaves unmigrated consumers
RESOLVED — contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — mockStore now unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/trash/tests/trashModal.spec.js — dispatchSpy now unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — Test no longer checks snackbar text
RESOLVED — contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — Snackbar dismisses after 5000 ms
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:604 — Keyboard users can't reach Cancel before it expires
RESOLVED — contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue — Nothing tests callback wiring
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue — Deferral isn't needed
ACKNOWLEDGED — contentcuration/contentcuration/frontend/shared/composables/useToken.js:42 — useKSnackbar() at setup fixes latent TDZ bug
RESOLVED — contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
RESOLVED — contentcuration/contentcuration/frontend/shared/views/tests/GlobalSnackbar.spec.js — Spec can't catch double hideCallback
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — Assertion runs after the test has passed
ACKNOWLEDGED — contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue:917 — autofocus: true on Undo/Cancel snackbars

---

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

How was this generated?

Ran an automatic code-only delta review triggered by new commits on a previously reviewed PR:

• Retrieved prior bot reviews via the GitHub API
• Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
• Only raised NEW findings for newly introduced code
• Core review pass only — specialized frontend/backend lenses and manual QA run when a review is explicitly requested
• Synthesized one review from the passes and chose the verdict from the findings, CI status, and QA evidence

[Monier-Ayman]

@rtibblesbot Thanks for the review! I addressed the two suggestions:

• Updated GlobalSnackbar tests to verify the actual KSnackbar props.
• Updated EditSourceModal tests to trigger the submit event and wait for flushPromises(), and removed the duplicate test.

The affected tests are passing.

[rtibblesbot]

PR #6144: all 15 prior findings resolved. CI passing. Manual QA did not run. The UI is unverified.

Prior-finding status

RESOLVED — shared/vuex/baseStore.js:52 — Removing module leaves unmigrated consumers
RESOLVED — shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — unused mockStore
RESOLVED — channelEdit/views/trash/tests/trashModal.spec.js — unused dispatchSpy
RESOLVED — QuickEditModal/tests/EditTitleDescriptionModal.spec.js — snackbar text unchecked
RESOLVED — useCommunityLibraryUpdates.js:178 — 5000 ms vs 6000 ms duration
RESOLVED — SubmitToCommunityLibrarySidePanel/index.vue:604 — Cancel unreachable by keyboard
RESOLVED — shared/views/GlobalSnackbar.vue:15 — callback wiring untested
RESOLVED — channelEdit/views/CurrentTopicView.vue — unneeded hideCallback deferral
RESOLVED — useToken.js:42 — praise: useKSnackbar() at setup fixes TDZ bug
RESOLVED — shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — mock can't catch double hideCallback
RESOLVED — QuickEditModal/tests/EditSourceModal.spec.js — assertion runs after test completes
RESOLVED — QuickEditModal/tests/EditSourceModal.spec.js — duplicate imported-node test
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — :text assertion reads back the ref
RESOLVED — CurrentTopicView.vue:917 — praise: autofocus: true on Undo/Cancel

---

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

How was this generated?

Ran an automatic code-only delta review triggered by new commits on a previously reviewed PR:

• Retrieved prior bot reviews via the GitHub API
• Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
• Only raised NEW findings for newly introduced code
• Core review pass only — specialized frontend/backend lenses and manual QA run when a review is explicitly requested
• Synthesized one review from the passes and chose the verdict from the findings, CI status, and QA evidence

[Monier-Ayman]

@rtibblesbot Could you please run the review/checks again on the latest commit? I’ve fixed the formatting issues and pushed the update. Thanks!

[rtibblesbot]

Thanks @Monier-Ayman — the re-review picks up new commits automatically; the status comment above updates when it runs. CI shows no checks on fdf4611 yet, likely because workflows on fork PRs need a maintainer to approve them.

[rtibblesbot]

PR #6144: all 16 prior findings resolved. The new commits are formatting only. No new findings. CI passing. UI unverified: manual QA did not run.

Prior-finding status

RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — assertion passes with :text binding deleted
RESOLVED — channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — duplicate imported-node test
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js:56 — praise: real useKSnackbar singleton with toHaveBeenCalledTimes(1)
RESOLVED — shared/vuex/baseStore.js:52 — removing module leaves three unmigrated consumers
RESOLVED — shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — unused mockStore
RESOLVED — channelEdit/views/trash/tests/trashModal.spec.js — unused dispatchSpy
RESOLVED — channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — no longer checks snackbar text
RESOLVED — shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — 5000 ms duration
RESOLVED — channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:604 — keyboard users can't reach Cancel
RESOLVED — shared/views/GlobalSnackbar.vue:15 — callback wiring untested
RESOLVED — channelEdit/views/CurrentTopicView.vue — deferral not needed
RESOLVED — shared/composables/useToken.js:42 — praise: setup-time useKSnackbar() fixes TDZ bug
RESOLVED — shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — spec mocks useKSnackbar, can't catch double call
RESOLVED — channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — assertion runs after synchronous test ends
RESOLVED — channelEdit/views/CurrentTopicView.vue:917 — praise: autofocus: true on Undo/Cancel snackbars

---

Written by rtibblesbot, an LLM-based coding agent.