[Remove Vuetify from Studio] Offline alert bar in Settings

[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: Medium

Summary

Migrate the offline alert bar in Settings 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 SettingsIndex, create a new shared/views/StudioOfflineAlert component that doesn't use Vuetify. Then use StudioOfflineAlert in SettingsIndex instead of OfflineText. Do not modify shared/views/OfflineText or how it's used in other areas of the codebase.

StudioOfflineAlert requirements

• Expected usage example:

// SettingsIndex.vue

<StudioOfflineAlert :offset="112" />

• Visually same output as OfflineText
• Sticky behavior is same
• offset prop is same
• Internal logic related to offline mapped state and libraryMode is same
• Other than above, implementation doesn't map exactly to that of OfflineText, and is limited only to logic that is needed in Settings:
  • No need for indicator and offlineText props and related logic
  • Shows as bar by default so toolbar prop is not needed
• Use KTransition in component-vertical-slide-out-in mode for transition.
• Use token.surface for bar background color
• OfflineText has several markup, a11y, and visual problems. Avoid them in StudioOfflineAlert by ensuring:
  • It renders as <div>, not <nav>
  • On all screen sizes, alert text doesn't overflow the bar area
  • On all screen sizes, it is positioned below the main navigation without any gap
  • Announce appearance and disappearance of the alert to screen reader users via useKLiveRegion. When the alert appears, send polite message You seem to be offline. Your changes will be saved once your connection is back. When the alert disappears, send polite message You are back online. Messages need to be translated.

How to get there

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

Guidance

• Read the project this issue is part of

Out of Scope

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

Expected UI/UX changes

• Except bugfixes listed above that will be resolved by the new component, none.

Acceptance criteria

General

• 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.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant
• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use Vue Testing Library.

[AadarshM07]

Hey @MisRob ,
I would really like to work on this. Can you assign this to me?

[MisRob]

Hi @AadarshM07, happy to. Please try to follow all guidance carefully and let me know if you had any questions.

[MisRob]

Hi @AadarshM07, do you still plan to work on this?

[AadarshM07]

Hey @MisRob , Apologies for the delay, I was occupied with sem-exams over the past few weeks. Now that they're over, I'm looking into this and will raise a PR soon

[MisRob]

It's okay @AadarshM07, just checking-in. Thanks for letting me know.

[AadarshM07]

Hi @MisRob , As per the spec, token.surface needs to be used as the background color. However, I’m not sure how to access token.surface properly within the component’s scoped CSS. I checked the documentation, but I couldn’t find a clear example. could you please guide me or point to a reference where it's implemented?

[AlexVelezLl]

Hi @AadarshM07! Unfortunatelly right now we aren't able to access design tokens in the component's style block. What we do with styles depending on these tokens is to add them as inline styles directly in the template (e.g. here), or we can also create computed properties for this (e.g. here) :). Hope this helps

[AadarshM07]

Got it, thank you!