[Remove Vuetify from Studio] Main navigation 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: High

Summary

Remove Vuetify from the main navigation (top bar + user menu + side panel) in Channels:

Currently, AppBar that is built with several Vuetify components is used:

studio/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue

Lines 30 to 64 in 0b06a91

	<AppBar v-else>
	<template
	v-if="loggedIn"
	#tabs
	>
	<VTab
	v-for="listType in lists"
	:key="listType.id"
	:to="getChannelLink(listType)"
	@click="trackTabClick(listType)"
	>
	<VBadge
	:value="invitationsByListCounts[listType]"
	color="black"
	>
	<template #badge>
	<span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
	</template>
	<span>{{ translateConstant(listType) }}</span>
	</VBadge>
	</VTab>
	<VTab
	:to="catalogLink"
	@click="publicTabClick"
	>
	{{ $tr('catalog') }}
	</VTab>
	<VTab
	:to="channelSetLink"
	@click="channelSetsTabClick"
	>
	{{ $tr('channelSets') }}
	</VTab>
	</template>
	</AppBar>

To remove these Vuetify dependencies:

• Build new components frontend/shared/views/StudioNavigation.vue and frontend/shared/views/StudioNavigationTab.vue without Vuetify and then update the above place to:

<StudioNavigation v-else>
  <template v-if="loggedIn" #tabs>
    <StudioNavigationTab ... >
      ...
    </StudioNavigationTab>
    
    <StudioNavigationTab ... >
      ...
    </StudioNavigationTab>
    
    ...
  </template>
</StudioNavigation>

• For side panel, utilize existing SidePanelModal
• Remove VBadge in favor of a custom implementation.

There should be no changes in before / after user experience - examine AppBar and its sub-components for details of what features need to be re-implemented.

Don't refactor AppBar, MainNavigationDrawer, other sub-components of AppBar, or any other areas of the codebase (StudioNavigation will be introduced to other plugins in the scope of upcoming issues).

How to get there

• Login as a@a.com with password a
• Go to Channels

Guidance

• Read the project this issue is part of
• KDS components that will be handy: KToolbar, KDropdownMenu, KButton, KRouterLink, KExternalLink, and possibly others
• Note that KDS KTabs... components are not suitable for use as it's a different a11y pattern than the main navigation, e.g. keyboard navigation differs
• Use shared/views/SidePanelModal for the side navigation - it contains backdrop as well as all important a11y patterns
• Kolibri has a very similar main navigation - there will likely be plenty of useful code, or can serve as reference
  • /kolibri/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
  • Also would be nice to have skip navigation-like functionality (kolibri/packages/kolibri/components/SkipNavigationLink.vue)

Out of Scope

• Do not refactor AppBar, MainNavigationDrawer, and other sub-components of AppBar
• Do not use the new StudioNavigation in other plugins, such as Settings or Admin.
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS

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 (preview with pnpm run devserver since :hot doesn't render RTL properly)
• 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 @testing-library/vue (Vue Testing Library).

[MisRob]

Reserved for @habibayman

[MisRob]

Hi @habibayman, I'm starting my vacation soon, and will be back on September 22. In case you needed anything, I will get back to you as soon as I'm back, or just use the Slack channel as we agreed. Thanks a lot for helping with this :)

[vtushar06]

Hi @habibayman,

Hope you're progressing well with the Vuetify removal project! With 8+ PRs including 2 medium-complexity contributions under my belt, I'm very interested in supporting this important KDS migration effort.

Rather than taking over any of your excellent work, I'd love to collaborate on complementary tasks like:

• Component research and documentation
• KDS implementation testing
• Accessibility compliance validation
• RTL language support verification

My Vue.js experience and familiarity with Learning Equality's development standards could be valuable for this architectural improvement. Would you be open to collaboration or could you point me toward related preparatory work?

Happy to discuss over Slack if preferred.

[MisRob]

Hi @vtushar06, we appreciate the offer - this issue is not available though - high complexity issues have internal nature and we can only assign them to GSoC students or contributors who worked with us for many years for a number of reasons.

You're welcome to collaborate with contributors if they are open to it on low to medium complexity - just please contact them with moderation.

[vtushar06]

Sure @MisRob, If any Medium Level Issue is there for future, Please Consider me to deeper my understandings with codebase and community.Thanks😊

[MisRob]

Thank you for your understanding @vtushar06. I will keep you in mind and as soon as I prepare a medium one, I will be very happy to let you know. It's really nice to see your growth and again thanks for all the support for this project.

[MisRob]

@habibayman I only put 'help wanted' here so I can track it a bit better - the assignment still applies of course! Thank you.

[MisRob]

Updated the issue with a note on SidePanelModal