Channel cards to unstable by MisRob · Pull Request #5696 · learningequality/studio

MisRob · 2026-02-10T15:26:50Z

Summary

Replaces Vuetify-based implementation by KCard on My Channels, Starred Channels, View-only Channels, and Content Library pages. On this opportunity introduces a new architecture of the related pages and resolves problems with understanding & maintaining monolithic and condition-heavy ChannelList + ChannelItem.

Before	After

References

Closes #5227
Closes #5524
Closes #5525
Closes #5526

Reviewer guidance

Code review:

80% of work are community contributions that were reviewed by myself and some also by @rtibbles. Then I added a final layer of work: abstractions, cleanup, user experience as well as internal architecture optimizations, fixes for few regressions, ... => I think it'd most meaningful to review affected files as a whole.

Local preview:

Run pnpm install first
Preview My Channels, Starred Channels, and View-only Channels pages
Preview Content Library when logged in and logged out

Notes

Before merging, [TODO REVERT] Temporarily install KDS fork commit needs to be reverted and a newly released KDS version with learningequality/kolibri-design-system#1203 installed.

Unstable to channel cards branch

KDS has recently started providing visuallyhidden so is not needed.

and related re-organization of files and tests. Also adds more tests to some components.

shape of loaded cards.

calculations. The feature is not needed in these use-cases.

bjester

Some review comments

bjester · 2026-02-17T19:27:58Z

contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js

+    loading.value = true;
+    store.dispatch('channel/loadChannelList', { listType }).then(() => {
+      loading.value = false;
+    });


If this fails to load (like it times out), what happens from the user perspective?

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioChannelCard/index.vue

bjester · 2026-02-17T19:49:25Z

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/index.vue

+        });
+      },
+      onCardClick(channel) {
+        window.location.href = window.Urls.channel(channel.id);


Nitpick: I prefer window.location.assign()

MisRob · 2026-02-18T07:30:55Z

~~I've just noticed on screenshots that I lost the invitations box being a bit wider than cards. Will fix this ~ is good for visual priority.~~

Resolved.

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioChannelsPage/index.vue

akolson · 2026-02-19T08:22:19Z

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue

+            <h1 class="visuallyhidden">{{ $tr('title') }}</h1>
+            <!-- minHeight to prevent layout shifts when loading state changes -->
+            <p
+              class="mb-2 ml-1 title"


I wonder whether we should continue to use Vuetify's styling classes especially when we want to move away from them (I see other places where its used as well). This is more of a thought than a comment and something to think about long term?

Yes, thank you. Since we decided not to use helper classes like these in our ecosystem (it wasn't discussed in the context of Vuetify ~ rather was a broader discussion) , I think it will make sense to cleanup whenever we can.

akolson · 2026-02-19T08:24:21Z

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue

+      },
+      onCardClick(channel) {
+        if (this.loggedIn) {
+          window.location.href = window.Urls.channel(channel.id);


https://github.com/learningequality/studio/pull/5696/changes#r2818781952 ?

akolson

I think code is clear and understandable. Thanks Misha for this refactor!

to prevent unnecessary memory usage and to improve architecture. Relatedly remove props for configuring footer in favor of the footer slot to make communication between the modals and footer buttons straightforward.

in channel token modal and remove unnecessary token tracking handlers from components (StudioCopyToken handles tracking)

MisRob · 2026-02-27T18:34:47Z

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/index.vue

+      appendToOverlay
+      data-testid="copy-modal"
+      :channel="tokenChannel"
+      @input="


TODO use method (same on other pages)

yeshwanth235 and others added 14 commits November 7, 2025 13:51

[Remove Vuetify from Studio] Cards in My Channels

0be0e93

[Remove Vuetify from Studio] Cards in Starred channels changes

ad0d85f

[Remove Vuetify from Studio] Cards in View-only channels changes

b7c3b45

Merge branch 'unstable' into channel-cards

2213979

Merge pull request learningequality#5657 from MisRob/channel-cards

d3f3a17

Unstable to channel cards branch

Merge branch 'unstable' into channel-cards-finalize

fbfe7c6

Use 16:9 ratio for thumbnails

07c0e13

Remove unnecessary style definition

04f1ab8

KDS has recently started providing visuallyhidden so is not needed.

Fix token reference

d69002a

Do not add KTooltip to DOM when not necessary

ec17f60

Abstract page layout into a component

32093d9

and related re-organization of files and tests. Also adds more tests to some components.

Move invitations box to StudioMyChannels

217c912

[Remove Vuetify from Studio] Cards in Content Library

6840bdd

Merge branch 'channel-cards-finalize' into channel-cards

c277e85

bjester self-requested a review February 10, 2026 16:43

rtibbles assigned marcellamaki Feb 10, 2026

rtibbles requested review from akolson and marcellamaki February 10, 2026 16:43

Remove handler call

eefe23f

MisRob force-pushed the channel-cards branch from fb06598 to bec64b0 Compare February 10, 2026 18:54

MisRob mentioned this pull request Feb 10, 2026

KCard and KImg updates in support of Studio's channel cards learningequality/kolibri-design-system#1203

Merged

MisRob force-pushed the channel-cards branch 7 times, most recently from e5ef964 to 6588fd0 Compare February 13, 2026 15:02

MisRob added 2 commits February 14, 2026 10:58

Configure skeleton loaders to reflect

5327a26

shape of loaded cards.

Add bottom padding

36f359e

Optimize card orientation in catalog

841257a

MisRob force-pushed the channel-cards branch 3 times, most recently from 4176428 to 3a07c26 Compare February 14, 2026 14:07

Optimize card loading

7ee25b9

MisRob force-pushed the channel-cards branch from 3a07c26 to 86d267e Compare February 14, 2026 17:47

MisRob added 3 commits February 15, 2026 18:39

Disable syncCardMetrics to prevent unnecessary

bc092cd

calculations. The feature is not needed in these use-cases.

Fix typo

aa8b0a9

Remove unused code

cc563d2

MisRob force-pushed the channel-cards branch 2 times, most recently from 3b2e264 to cc563d2 Compare February 15, 2026 17:45

MisRob added 3 commits February 15, 2026 18:50

Merge branch 'unstable' into channel-cards

b0479ef

Docstrings cleanup

a820fb4

[TODO REVERT] Temporarily install KDS fork

18f4f26

MisRob force-pushed the channel-cards branch from f4dae95 to 18f4f26 Compare February 16, 2026 06:17

MisRob marked this pull request as ready for review February 16, 2026 08:14

MisRob added the TODO: needs review label Feb 16, 2026

MisRob changed the title ~~[WIP] Channel cards to unstable~~ Channel cards to unstable Feb 16, 2026

Fix string

82f701b

MisRob force-pushed the channel-cards branch from 16ab7ae to 82f701b Compare February 16, 2026 08:33

bjester reviewed Feb 17, 2026

View reviewed changes

akolson reviewed Feb 19, 2026

View reviewed changes

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioChannelsPage/index.vue Show resolved Hide resolved

akolson reviewed Feb 19, 2026

View reviewed changes

MisRob added 3 commits February 27, 2026 19:07

Remove modals from card component

f8c7d53

to prevent unnecessary memory usage and to improve architecture. Relatedly remove props for configuring footer in favor of the footer slot to make communication between the modals and footer buttons straightforward.

Use StudioCopyToken instead of CopyToken

f780f83

in channel token modal and remove unnecessary token tracking handlers from components (StudioCopyToken handles tracking)

Fix invitation box width regression

52535eb

MisRob commented Feb 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Channel cards to unstable#5696

Channel cards to unstable#5696
MisRob wants to merge 36 commits intolearningequality:unstablefrom
MisRob:channel-cards

MisRob commented Feb 10, 2026 •

edited

Loading

Uh oh!

bjester left a comment

Uh oh!

bjester Feb 17, 2026

Uh oh!

Uh oh!

bjester Feb 17, 2026

Uh oh!

MisRob commented Feb 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

akolson Feb 19, 2026

Uh oh!

MisRob Feb 26, 2026

Uh oh!

akolson Feb 19, 2026

Uh oh!

akolson left a comment

Uh oh!

MisRob Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

MisRob commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Reviewer guidance

Notes

Uh oh!

bjester left a comment

Choose a reason for hiding this comment

Uh oh!

bjester Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bjester Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

akolson Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

akolson Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

akolson left a comment

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

MisRob commented Feb 10, 2026 •

edited

Loading

MisRob commented Feb 18, 2026 •

edited

Loading