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.

Fix few regressions, refactor approach to configuration footer.

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?

bjester · 2026-02-17T19:45:54Z

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

+      <KModal
+        v-if="deleteDialog"
+        :title="$tr('deleteTitle')"
+        :submitText="$tr('deleteChannel')"
+        :cancelText="$tr('cancel')"
+        data-testid="delete-modal"
+        appendToOverlay
+        @submit="handleDelete"
+        @cancel="deleteDialog = false"
+      >
+        {{ $tr('deletePrompt') }}
+      </KModal>
+      <KModal
+        v-if="removeDialog"
+        :title="$tr('removeTitle')"
+        :submitText="$tr('removeBtn')"
+        :cancelText="$tr('cancel')"
+        data-testid="remove-modal"
+        appendToOverlay
+        @submit="handleRemove"
+        @cancel="removeDialog = false"
+      >
+        {{ $tr('removePrompt') }}
+      </KModal>


Including these modals within the card component is a bit of a monolithic approach. Even though they're conditional under v-if, a large list of cards will still incur more memory usage than if these were broken out separately and used at the list level. Additionally, since these modals are not always necessary (i.e. the view-only list), composing their use alongside the use of the cards does make more sense IMO.

This isn't a blocker but I think it's worthwhile for consideration.

Thanks @bjester, makes sense. I will address this now.

There was no particular intention in keeping them within the card component ~ I think I just didn't think about this place that much. Moving them out will be well aligned with the aim of this work. And since these are used on some of the most important pages, such as catalog that can be very long, then yes saving some memory will definitely be good too.

I thought about this and technically I think I'd like to:

Abstract modals to DeleteChannelModal.vue, RemoveChannelFromList.vue, ...

Remove footerButtons and dropdownOptions config props from StudioChannelCard and instead just provide a footer slot

Let the 4 pages utilizing StudioChannelCard provide

Template for the footer slot

A subset of page-level abstracted modals that are needed

I think this will mean a tiny bit more of duplicates in some areas, but I don't expect to be anything concerning. Alternatively, StudioChannelCard could also emit events when buttons or dropdown options clicked, but the resulting API and other implications feel rather convoluted to me.

Makes sense to you too @bjester? It's not complicated, but will be more changes, so if we could confirm the direction beforehand, I'd be grateful.

I think that sounds like a great plan! The reduction of the dropdownOptions in particular should make it pretty clean, and easily make up for any small duplication around the implementation of the cards.

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.

akolson · 2026-02-19T08:01:05Z

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

+        if (windowBreakpoint.value >= 5) return '50%';
+        if (windowBreakpoint.value === 4) return '66.66%';
+        if (windowBreakpoint.value === 3) return '83.33%';
+        return '100%';


Are the percentages arbitrary?

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?

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!

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

Open

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

MisRob added 3 commits February 14, 2026 10:58

Show view-only invitations

c837c95

Fix card click targets

512e2f1

Footer configuration

4d66ec2

Fix few regressions, refactor approach to configuration footer.

MisRob force-pushed the channel-cards branch from 6588fd0 to 5182209 Compare February 14, 2026 10:07

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

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 33 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!

bjester Feb 17, 2026

Uh oh!

MisRob Feb 17, 2026

Uh oh!

MisRob Feb 18, 2026 •

edited

Loading

Uh oh!

bjester Feb 18, 2026

Uh oh!

bjester Feb 17, 2026

Uh oh!

MisRob commented Feb 18, 2026

Uh oh!

akolson Feb 19, 2026

Uh oh!

akolson Feb 19, 2026

Uh oh!

akolson Feb 19, 2026

Uh oh!

akolson left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Comments

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MisRob commented Feb 18, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akolson left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Comments

MisRob commented Feb 10, 2026 •

edited

Loading

MisRob Feb 18, 2026 •

edited

Loading