[Remove Vuetify from Studio] Side panel (container only) in Content Library

[Prashant-thakur77]

FIxes #5528
This PR replaces the Vuetify VNavigationDrawer component in the Content Library side panel with a custom implementation using the Kolibri Design System. The changes include:

For small screens: Using the existing SidePanelModal component to display panel content in a full-screen modal (improving on the previous partial-width behavior)

For medium/large screens: Displaying the panel content as a non-modal page section without using SidePanelModal

Created a reusable inner panel component that works for both modal and non-modal layouts
(Specific tests are yet written for this component,needs clearification)

Preserved all existing filtering functionality and accessibility features

Ensured RTL/LTR compliance and proper mobile responsiveness

Screencast.From.2025-11-17.01-41-20.webm

References

Sub-issue of #5060.

Reviewer guidance

How to get there
Login as [email protected] with password a
Go to Channels > Content Library

Guidance
How to run Kolibri
Find detailed guidance with many code examples in KDS documentation
Read #5060 for more useful references

[Prashant-thakur77]

Also, regarding the wrapped string translation issue: since the strings have been moved from the old CatalogFilters component to the new component, they are not updating with the selected language. I wanted to confirm whether I should update the translation entries in the language JSON files by replacing the old component keys with the new component keys.

Just let me know what you prefer, and I’ll go ahead with it! :)

[AlexVelezLl]

Thanks a lot @Prashant-thakur77! We are on a good track! The only alarming thing I found is that the general layout could be handled differently to improve code maintainability; everything else is mostly nitpicks. If you have any questions or run into any problems with the proper layout, whether with flex layouts or without vh, let us know, and we can figure it out together!

[AlexVelezLl]

I think we can avoid using CatalogFilters as a wrapper component that is responsible for rendering the entire page container. It seems the primary motivation is to set the content area width to width: calc(100% - 335px), but this imposes a very specific, rigid width, which is harder to maintain in the future if any spec changes.

To make this layout more flexible, we can use a parent component for the side panel and the main content with display: flex and flex-direction: row, and set the side panel to a width of 300px, leaving the remaining width for the main content. This way, if in the future we want to change the side panel width, we can override the 300px width, making this layout even flexible enough to support a resizable side panel that takes advantage of the flex machinery.

[Prashant-thakur77]

Updated according to your comment

[AlexVelezLl]

Seems like there isn't a css class called filter-panel-rtl

[Prashant-thakur77]

removed

[AlexVelezLl]

In general, We don't usually make differentiations between "mobile vs desktop", and use instead wording like "windowIsSmall" because a Mobile device could render a "windowIsLarge" layout if we rotate it and see the content in landscape mode, and a desktop device could render a "windowIsSmall" layout if the window is shrinked or the user display is splitted displaying two or more apps.

So, it'd be great if we could call all these properties in terms of windowIsSmall/windowIsMedium/windowIsLarge naming that are the ones exposed by the useKResponsiveWindow composable.

[AlexVelezLl]

In this aside node, we should also set these styles:

• Background color: $themeTokens.surface
• Border: $themeTokens.fineLine

[Prashant-thakur77]

updated

[AlexVelezLl]

Seems like the SidePanelModal does not have a fullscreen prop

[Prashant-thakur77]

removed

[AlexVelezLl]

idem, let's just return the windowIsSmall property as is.

[Prashant-thakur77]

updated

[AlexVelezLl]

As a general comment - let's try to remove unnecessary comments. As a specific comment - don't fully get this comment about the close button for mobile modal 😅, in theory, CatalogFilterPanelContent should know nothing about the container where it is being rendered.

[Prashant-thakur77]

updated and will keep in mind

[AlexVelezLl]

I know this wasn't introduced by you 😅. But could you please remove this menu-props prop that is not relevant for the LanguageFilter component? Thanks!

[Prashant-thakur77]

updated

[AlexVelezLl]

Could we set a horizontal padding of 24px to match the original styles? thanks!

[Prashant-thakur77]

updated the horizontal padding to 24 px

[AlexVelezLl]

We can update this KImg to:

      <KImg
        isDecorative
        :src="require('shared/images/le-logo.svg')"
        backgroundColor="transparent"
        scaleType="fitXY"
        :style="{
          width: '90px',
          height: '60px'
        }"
      />

Changes:

• This image is decorative, i.e. this does not add any information to the page, so we can use the isDecorative prop instead of adding an altText.
• The KImg documentation shows an example with the scaleType set to fitXY, there we see that the :style prop is preferred to set the width and height of the image.
• The default background color is a light gray color, so there was a light gray background, and we need to set it to transparent for this.

[Prashant-thakur77]

Updated ..

[AlexVelezLl]

Idem, let's avoid using the vh unit.

[Prashant-thakur77]

The problem mentioned in below comment #5555 (comment)

[Prashant-thakur77]

@AlexVelezLl thanks for your review,I will start working on your comments :)

[Prashant-thakur77]

Screencast.From.2025-12-15.17-48-37.webm

Hlo @AlexVelezLl while working on the changes needed i am a bit confused in a issue here,so the deal is without using vh i am not able to make the scrolling as it was before ,as you can see the video for the help ,the learning equality logo isnt sticking at a place,i would love to know if there is some easier solution for this issue,other than that i have tried to resolve other review changes you have mentioned (this one belongs to this comment #5555 (comment) ) other than this at other places the vh issue is resolved and the other comments are also addressed.
See i also found that the issue can also be resolved by using style position: fixed (As done here #5555 (comment)).
So what should be my next steps in this matter,should i use vh to resolve it or use position fixed,Or is there some other method you think will be more suitable?

Future note: Currently i have implemeted it by using vh but i do think using fixed at this place will be better :),so do tell me what should be our preference:) and by using fixed we would not be needed to use vh at all>.

[Prashant-thakur77]

@AlexVelezLl one more issue i would like to point is that before

::v-deep .v-messages {
display: none;
}

this style was use to reduce the gap between filters like in

Before

After

So should i add the above style as it involves using v-deep or should i keep as i have already done.:)