[Remove Vuetify from Studio] Migrate Studio's GlobalSnackbar and vuex/snackbar to KDS `KSnackbar` + `useKSnackbar`

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of https://github.com/learningequality/studio/issues/5060.

Complexity: Medium

Summary

Studio currently shows global notifications through its own GlobalSnackbar component, which is built around Vuetify's VSnackbar, with state managed in a vuex/snackbar module and accessed through a useSnackbar composable. Now that KDS provides a unified KSnackbar component and useKSnackbar composable, Studio should migrate to them and drop its Vuetify-based snackbar implementation.

This is part of the broader effort to remove Vuetify from Studio and unify snackbar logic across products.

Background

• KDS now ships KSnackbar and useKSnackbar (added in kolibri-design-system#1205). The composable manages global snackbar state as a singleton and the component supports action buttons, auto-hide timers, manual dismissal, backdrop mode, and keyboard accessibility, with screen reader announcements via useKLiveRegion.
• Studio's existing snackbar is implemented with:
  • GlobalSnackbar.vue (shared/views/GlobalSnackbar.vue) — wraps Vuetify's VSnackbar, mounted in four top-level views (SettingsIndex, ChannelEditIndex, ChannelListIndex, AdministrationIndex).
  • vuex/snackbar store module (shared/vuex/snackbar/index.js) — holds visibility/options state and exposes showSnackbar, showSnackbarSimple, and clearSnackbar actions. It supports text, duration, actionText, actionCallback, hideCallback, and a forceReuse flag (used to update text without re-running the show transition).
  • useSnackbar composable (shared/composables/useSnackbar.js, plus its __mocks__/useSnackbar.js) — thin wrapper over the store, exposing createSnackbar/clearSnackbar. This is the direct analog of KDS useKSnackbar.
  • Vuetify's VSnackbar is also globally registered in shared/app.js.
  • Snackbars are triggered from dozens of call sites across channelEdit, channelList, administration, settings, and shared.
• This issue is the Studio-side consumption work for the cross-repo effort tracked in learningequality/studio#5445.

See the KDS Snackbar documentation for the intended behavior and API.

Acceptance Criteria

• Studio's GlobalSnackbar component is replaced by KDS KSnackbar.
• Snackbar state previously managed by the vuex/snackbar module is managed via useKSnackbar, and the vuex/snackbar module is removed.
• Studio's useSnackbar composable (and its __mocks__) is replaced by KDS useKSnackbar.
• All existing call sites that trigger snackbars in Studio are migrated to useKSnackbar.
• Any snackbar features Studio relies on today are preserved through the KDS API — including action buttons (actionText/actionCallback), auto-hide/duration, manual dismissal/hideCallback, and the forceReuse text-update behavior.
• No regressions in user experience: snackbars appear, behave, and dismiss as they do today across the flows that use them.
• Vuetify's VSnackbar is no longer referenced anywhere in Studio, including its global registration in shared/app.js.
• Accessibility is preserved or improved (screen reader announcements, keyboard interaction, focus handling).
• Relevant tests are updated or added to cover the migrated snackbar behavior.

References

• KDS PR introducing the API: https://github.com/learningequality/kolibri-design-system/pull/1205
• Cross-repo tracking issue: https://github.com/learningequality/studio/issues/5445
• KDS Snackbar docs: https://design-system.learningequality.org/snackbars/