[Remove Vuetify from Studio] Offline alert bar in Channels

[MisRob]

🙂 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 #5060.

Complexity: Low

Summary

Migrate the offline alert bar in Channels from Vuetify to Kolibri Design System.

shared/views/OfflineText that is built with Vuetify components is used for the banner.

To remove this dependency from ChannelListIndex, replace this instance of OfflineText with shared/views/StudioOfflineAlert (a new component that doesn't use Vuetify). Do not modify shared/views/OfflineText or how it's used in other areas of the codebase.

How to get there

• Login as user@a.com with password a
• Go to Channels
• Turn on / off offline mode in browser development tools

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not refactor any other areas of the codebase
• Do not modify OfflineText

Expected UI/UX changes

• None

Acceptance criteria

• The specification above is followed
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

[AadarshM07]

Hey @MisRob , I would like to take this up. Can you assign it to me?

[LianaHarris360]

Hi @AadarshM07, after your assigned issue to remove the Vuetify layout components from the Settings index page is resolved, we can assign you to this one if it’s still available, thank you!

[V-Premnath]

Hi @MisRob , I would like to solve this issue. can you assign this to me

[LianaHarris360]

Sure @V-Premnath you can be assigned to this! Before your assignment, please note that new contributors must read the contributing guidelines linked in the issue header, especially the "Using generative AI" section. Would you please confirm that you've reviewed it?

[V-Premnath]

Yes @MisRob I have already reviewed the guidelines. I would be happy to get assigned to resolve this issue.

[learning-equality-bot]

Automatically unassigning @V-Premnath due to no comments here, or updates on the associated pull request for 1 month. @V-Premnath, if you're still interested in this issue or already have work in progress, please message us here, and we'll assign you again. Thank you!