Replace Vuetify (VLayout, VBtn) with KDS components in GenericError.vue

[Kartikayy007]

Summary

Removed Vuetify dependencies from the GenericError.vue component by replacing them with Kolibri Design System (KDS) components.

Changes Made

• Replaced AppError with StudioAppError (Vuetify-free version).
• Replaced VLayout wrapper with KButtonGroup for semantic button grouping.
• Replaced VBtn components with:
  • KButton (Refresh)
  • KRouterLink (Navigation)
• Maintained all existing functionality and user interactions.

Manual Verification

• Modified ChannelListIndex.vue to force display error page (v-if="true").
• Tested all three buttons:
  • Refresh
  • Back to Home
  • Help report link
• Verified modal opens when clicking the help link.
• Checked RTL layout compatibility.

Screenshots

After (with KDS):

References

• Fixes [Remove Vuetify from Studio] 'Something went wrong' error page in Channels #5297 — "Something went wrong" error page in Channels.
• Parent issue Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System #5060

---

Reviewer Guidance

How to Test

1. Edit:

   // contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
   <ChannelListAppError
     v-if="true"
     :error="{ errorType: 'UNKNOWN' }"
   />

[rtibbles]

Everything is looking good, except that the Back to Home button is not functional.

[rtibbles]

To maintain the link-type behaviour here, this needs to be a KRouterLink instead of a KButton, with the backHomeLink object using v-bind instead:

```suggestion
          <KRouterLink
            v-bind="backHomeLink"
            appearance="raised-button"
            :text="$tr('backToHomeAction')"
          />

Alternatively, if that doesn't play nicely with KButtonGroup you can bind the @click event of the KButton to trigger programmatic navigation with Vue Router https://v3.router.vuejs.org/guide/essentials/navigation.html

@click="$router.push(backHomeLink)"

in place of the v-bind.

[Kartikayy007]

right, ill update it