Prototyping User Table Design Updates #13808

nucleogenesis · 2025-10-03T17:45:36Z

Summary

Major Changes

New UI/UX layout & spacing applied across all NewUsers, UsersRoot and UsersTrash pages.
Consistency of search/filtering options across pages
Some changes have been made that impact other parts of the application (see the PaginationActions component & PaginatedListContainerWithBackend component updates and their related changes outside of Facility).

References

Touches #13782 , follows up from #13743

Reviewer guidance

QA

There are no specific Figma references for these updates to reference.

Users Root Table, New Users Table, Deleted Users Table

All of these pages have had similar changes performed on them and there is significant change for regression - so please check the following:

All bulk actions available and functioning on each of these pages
Do/undo behaviour
All filters/search combinations
Validate messaging for empty table states

Root Table Specific

Test across screen sizes with a focus on the table heading/actions being positioned correctly beneath the top "App bar"
When the screen shrinks, the "New user" button folds into the "Options" dropdown now - be sure all dropdown options work as expected
Also note that as you shrink the page, the AppBar's buttons might overflow to another row for about 40px at one point in a way that is different than the proper mobile view - be sure that at all screen widths, the heading is positioned correctly

Android & App mode

Test that all content and data is visible when in app mode (where there is a bottom actions bar).

My Downloads

Check this page for regressions, particularly around pagination.

Classes -> Class Details -> Enroll learners

This page also has had some updates to the pagination and should be tested for regressions with a focus on pagination

github-actions · 2025-10-03T18:22:03Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.19.0b0.dev0_git.94.g01f488eb.pex
Windows Installer (EXE)	kolibri-0.19.0b0.dev0+git.94.g01f488eb-windows-setup-unsigned.exe
Debian Package	kolibri_0.19.0b0.dev0+git.94.g01f488eb-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.19.0b0.dev0+git.94.g01f488eb.dmg
Android Package (APK)	kolibri-0.19.0b0.dev0+git.94.g01f488eb-0.1.6-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.19.0b0.dev0+git.94.g01f488eb.zip
TAR file	kolibri-0.19.0b0.dev0+git.94.g01f488eb.tar.gz
WHL file	kolibri-0.19.0b0.dev0+git.94.g01f488eb-py2.py3-none-any.whl

nucleogenesis · 2025-10-06T20:43:30Z

packages/kolibri-common/components/PaginatedListContainerWithBackend.vue

    </KGrid>

-    <div class="flex-column">
+    <div class="flex-column table-content">


This whole component may no longer be necessary as the business logic has been extracted to just be a kind of widget in PaginationActions.vue that can be slapped anywhere with the given props and will handle the pagination buttons/messaging w/out the opinionated layout enforced.

Seems like with the new changes this component is no longer necessary yes, or at least it should be renamed in the scope of this PR so we can avoid future confusions.

- Created useUsersTableSearch composable for search/query handling - Created usePagination composable for pagination state management - Refactored UsersTableToolbar to be a pure layout component - Updated UsersRootPage to use new composables - Integrated PaginationActions component for consistent pagination UI - Cleaned up UsersTable component to remove duplicated logic This refactoring improves maintainability by: - Encapsulating search and pagination logic in reusable composables - Following Vue 2 Composition API patterns used in the codebase - Creating clear separation of concerns between components - Providing flexible two-row layout structure for toolbar actions Initial Claude Prompt: 1) Get a sense of the files I've been working on based on my last git commit and current unstaged changes. 2) Review those changes to get a sense of how the code is structured. 3) The kolibri/plugins/facility/assets/src/views/users/common/UsersTableToolbar.vue and the packages/kolibri-common/components/PaginatedListContainer.vue components have some logic too tightly couple to their scope and aren't used in a way that makes it easy to, for example, know what page we're on. Also, the "query/search" handling in the overall changes I've made reflects to me something that would be easier to use if it were encapsulated somehow, such as into its own composable module. (NOTE: look at files use*.js in the codebase for an example of how we use the Composition API modules in Vue 2). In any case - the changes I'm working on are to rearrange some of the actions that we've put onto the screen. The #topRow and #bottomRow slots in packages/kolibri-common/components/PaginatedListContainerWithBackend.vue demonstrate at least the overall layout I want - basically I need two rows in a flex container (column dir) which each can then have their own flexbox divs w/ their own layout of actions within them and I need to be able to put the Options dropdown, New User button, FilterTextbox (and friends), the "7 users selected" message w/ appropriate count variable passed for the number, and the pagination buttons & messaging all in the same place. 4) Please proceed to make changes to the code base updating it per what I've said here. Ask any questions you have as you proceed. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

…tContainerWithbackend

AlexVelezLl · 2025-10-07T14:16:34Z

kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue

+    <PaginationActions
      v-model="currentPage"
+      class="top-pagination-actions"
      :itemsPerPage="itemsPerPage"
      :totalPageNumber="totalPageNumber"
      :numFilteredItems="downloadItemListLength"
-    >
+    />


Are we sure we want to change the pagination layout for all pages? 👀 (Seems like a non-trivial design change so just flagging it for all relevant people to aggree/be informed)

(For me, it feels a little bit weird to have them both on the top and the botton of the table)

Having it top & bottom made more sense when I had a full page of downloads and had to scroll 30 of them to the bottom but when it's empty like that it looks goofy 😅 - I've reverted it to the original.

AlexVelezLl

Thanks @nucleogenesis! Just a few comments I noticed in a first read through

AlexVelezLl · 2025-10-07T14:24:52Z

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue


      const getEmptyMessageForItems = items => {
+        const search = route.query.search || '';
+        const roleType = route.query.user_type;


Just noting that the user_type query does not exists, it is called user_types and is a list: https://github.com/nucleogenesis/kolibri/blob/5c5cc1e962c53b701c5c6eea68cc188de034a0f5/kolibri/plugins/facility/assets/src/composables/useUsersFilters.js#L146

AlexVelezLl · 2025-10-07T14:31:17Z

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

  }

+  /deep/ .pagination-nav {
+    /deep/ .pagination-nav {


Are these styles being applied somewhere? Im not finding annidated pagination-nav classes.

Nope - removed.

AlexVelezLl · 2025-10-07T14:32:48Z

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

+  /deep/ .k-table-wrapper {
+    // Applying the padding here avoids the scrollbar having padding
+    // between itself and the window's edge and floating. This way
+    // it looks like a root-level scrollbar (even though there isn't one)
+    padding: 0 1em;
+  }


Does this still applies? I see the k-table-wrapper node is the root node of KTable so any overrides to it we can just pass them as style prop.

I updated this a bit - give it a look. I think we may need a follow-up issue for reviewing how/where we're putting the scrollbar because that's the main cause for the styles put here. I did it /deep/ instead of inline for the room for comments to explain why it's like this.

AlexVelezLl · 2025-10-07T14:35:16Z

kolibri/plugins/facility/assets/src/views/users/common/UsersTableToolbar.vue

+  .top-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .bottom-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    align-items: center;
+    justify-content: space-between;


Seems like both of them have the same styles. We can probably do something like .top-row, .bottom-row { ...

AlexVelezLl · 2025-10-07T14:43:27Z

kolibri/plugins/facility/assets/src/views/users/UsersRootPage/index.vue

-      margin: '0 auto',
-      padding: '2em',
+      width: '100%',
+      height: '100vh',


Just noting that vh is not a reliable metric for mobile devices https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

Thank you! Using % works just as well here - I just like the mental idea of vh more than thinking about what the % is possibly relative to 😅

AlexVelezLl · 2025-10-07T15:00:48Z

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

Just noting that somehow the table padding is affecting just to the last column, and all overflown columns below are visible on the background (see the "id" of identifier at the right of the header cell)

Fixed, thanks!

AlexVelezLl · 2025-10-07T15:06:27Z

kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue


+  .top-pagination-actions {
+    margin-top: 1em;
+    margin-bottom: -2em;


It is usually a code smell to set a negative margin, just flagging it in case there is other way to achieve the behaviour we want to achieve with this negative marging?

I almost left a comment admitting this was smelly above the line 😆

Basically the issue is that there is more space in the headings of the table than I'd like so rather than going through the trouble of tweaking the table itself I used the neg margin.

I'll came back w/ a comment added here explaining why it's like this.

AlexVelezLl · 2025-10-07T16:42:31Z

packages/kolibri-common/components/PaginatedListContainerWithBackend.vue

    </KGrid>

-    <div class="flex-column">
+    <div class="flex-column table-content">


Seems like with the new changes this component is no longer necessary yes, or at least it should be renamed in the scope of this PR so we can avoid future confusions.

AlexVelezLl · 2025-10-07T16:43:26Z

packages/kolibri-common/components/PaginationActions.vue

+    methods: {
+      changePage(change) {
+        // Clamp the newPage number between the bounds if browser doesn't correctly
+        // disable buttons (see #6454 issue with old versions of MS Edge)
+        this.$emit('input', clamp(this.value + change, 1, this.totalPageNumber));
+      },
+    },
+    methods: {
+      changePage(change) {
+        // Clamp the newPage number between the bounds if browser doesn't correctly
+        // disable buttons (see #6454 issue with old versions of MS Edge)
+        this.$emit('input', clamp(this.value + change, 1, this.totalPageNumber));
+      },
+    },


There is a duplicated methods object here.

AlexVelezLl · 2025-10-07T16:45:07Z

packages/kolibri-common/components/PaginationActions.vue

+    computed: {
+      startRange() {
+        return (this.value - 1) * this.itemsPerPage;
+      },
+      visibleStartRange() {
+        return Math.min(this.startRange + 1, this.numFilteredItems);
+      },
+      endRange() {
+        return this.value * this.itemsPerPage;
+      },
+      visibleEndRange() {
+        return Math.min(this.endRange, this.numFilteredItems);
+      },
+      previousButtonDisabled() {
+        return this.value === 1 || this.numFilteredItems === 0;
+      },
+      nextButtonDisabled() {
+        return (
+          this.totalPageNumber === 1 ||
+          this.value === this.totalPageNumber ||
+          this.numFilteredItems === 0
+        );
+      },
+    },
+    methods: {
+      changePage(change) {
+        // Clamp the newPage number between the bounds if browser doesn't correctly
+        // disable buttons (see #6454 issue with old versions of MS Edge)
+        this.$emit('input', clamp(this.value + change, 1, this.totalPageNumber));
+      },
+    },
+    methods: {
+      changePage(change) {
+        // Clamp the newPage number between the bounds if browser doesn't correctly
+        // disable buttons (see #6454 issue with old versions of MS Edge)
+        this.$emit('input', clamp(this.value + change, 1, this.totalPageNumber));
+      },
+    },


Seems like all of these properties/methods are duplicated from the new usePagination is this intentional?

Thanks for catching this <3

Ah - it's that the usePagination is in the scope of Facility and I didn't feel confident yet putting it into the kolibri-common package yet. The usePagination module's return values are then passed into PaginationActions

Maybe we should make an issue re: following-up on possibly generalizing the usePagination.js though

Sounds good! 😃

NOTE: This will likely all be overwritten in a future issue once the text is discussed in more detail

llm disclosure: portions of these changes made w/ help of Claude code

disclosure: this commit was made with assistance from Claude code

…n padding calculations; also set max-height for table to pageContentHeight to accommodate appContext

pcenov · 2025-10-09T15:51:22Z

Hi @nucleogenesis as always here is a list with testing notes and observations for the issues I was able to identify today, and the testing will continue tomorrow as well:

When I open the Users page for the first time on my big screen I can see that now everything is stretched completely to both ends of the screen:

Shrinking the page to less than 600 pixels results in the removal of the "New user" button and its addition in the "Options" dropdown. I would recommend keeping the the "New user" button visible all the time if possible. Also shrinking the page to less than 400 pixels results in showing the "Options" button, the action icons and the pager all to the left of the screen which doesn't look great:

small.screens.mp4

Seeing the search bar, filter, icons and pager at the "Removed users" page when there's are no removed users at all. In that case previously we were showing just the label of the page and the explanatory text:

Also for the 'Removed users" page, when I start shrinking the page then the label of the page, the text "Records will show the days remaining before permanent deletion.", the search field and "Filter" link remain on the same line:

removed.users.resp.design.mp4

Scrolling up results in overlapping of the page components over the main navigation. Valid for all pages:

overlap.mp4

The horizontal scrollbar is only visible once I scroll all the way down to the bottom so I have to constantly do that on my laptop:

horizontal.scroll.mp4

The following critical issue is still valid in the Android app: Facility > Users - The buttons are not visible in the Android app when performing bulk actions at the Users page #13784

nucleogenesis · 2025-10-10T06:32:10Z

@pcenov I've updated the PR to address the following:

Android bottom bar bug
Things scrolling up and over the appbar (sorry about this - I broke this in my last commit before requesting review and didn't catch it)
Horizontal scrollbar always visible
Better deleted user message view on smaller screens
Hide filters & search when no users to filter or search
Ultrawide screens look right :)

The following we'll address separately:

The "New User" button going into "Options" - this is something I'm discussing w/ Tomiwa
Overall weird top section when small - we'll follow-up on this.

pcenov · 2025-10-10T13:41:13Z

Hi @nucleogenesis,

Testing notes on the fixed items:

Android bottom bar bug - NOT FIXED - this one is still extant in the Android app in the latest build
Things scrolling up and over the appbar - FIXED
Horizontal scrollbar always visible - FIXED
Better deleted user message view on smaller screens - it's better now :)
Hide filters & search when no users to filter or search - PARTIALLY FIXED - the filter and search are hidden now, but the icons and pager remain visible?
Ultra-wide screens look right - FIXED

New issues:

All tables - the tooltips are displayed under the table's header:

tooltips.mp4

All tables - the search field disappears completely when there are no matching results:

search.field.disappears.mp4

Search field's width - Shrinking the page results in a very small search field for some resolutions. At the same time it has become too wide at the users and new users tables. It's best to have the same min and max width of the field for all tables, allowing for the entered text to be visible:

search.field.size.mp4

The page numbers are lower than the arrows, should be centered:

Small devices and the Android app

At Classes page the "New class" button is too close to the table in portrait mode. Also the "Class name" column is too wide so it's almost impossible to view the other columns
There's no visible scrollbars in the Android app so the user has to guess that it's possible to scroll and see other columns and rows
In landscape mode the tables are not useful at all

small.devices.mp4

nucleogenesis added this to the Kolibri 0.19: Bulk User Management milestone Oct 3, 2025

github-actions bot added APP: Facility Re: Facility App (user/class management, facility settings, csv import/export, etc.) DEV: frontend SIZE: large labels Oct 3, 2025

nucleogenesis force-pushed the fullscreen-users-table branch from 3b76d19 to df13990 Compare October 6, 2025 20:02

github-actions bot added the SIZE: very large label Oct 6, 2025

WIP big changes

f08d96a

nucleogenesis force-pushed the fullscreen-users-table branch from 67a40dc to 35548a5 Compare October 6, 2025 20:40

nucleogenesis commented Oct 6, 2025

View reviewed changes

nucleogenesis force-pushed the fullscreen-users-table branch 2 times, most recently from bb6e723 to 082c044 Compare October 6, 2025 22:39

github-actions bot added the APP: Learn Re: Learn App (content, quizzes, lessons, etc.) label Oct 6, 2025

AlexVelezLl and others added 5 commits October 6, 2025 15:42

Add flex for users layout

669b812

updating styles/layout userstable & toolbar, refactoring PaginatedLis…

c3965c3

…tContainerWithbackend

use PaginationActions in DownloadsList

22dd44c

ClassEnrollForm uses pagination actions now; top and bottom

4503c23

nucleogenesis force-pushed the fullscreen-users-table branch from 082c044 to 4503c23 Compare October 6, 2025 22:42

AlexVelezLl reviewed Oct 7, 2025

View reviewed changes

AlexVelezLl mentioned this pull request Oct 7, 2025

[Fix]: KTable & Scroll Bars on Small Landscape Screens #13687

Open

rtibbles assigned AlexVelezLl Oct 7, 2025

AlexVelezLl reviewed Oct 7, 2025

View reviewed changes

nucleogenesis added 7 commits October 8, 2025 21:10

remove dupe method; dupe actions in DownloadsList

fc60c1b

bottom margin fixed in MyDownloads

ef610b9

convert roleType to roleType/user_types query param in UsersTable

227ff59

NOTE: This will likely all be overwritten in a future issue once the text is discussed in more detail

fix missing clear button when users selected

be7d103

refactor empty message handling in UsersTable

8beb52a

user table background opacity fix, better css for paddings

6fbe85d

update NewUsersPage to utilize updated layout/styles from UsersRootPage

6767f8e

llm disclosure: portions of these changes made w/ help of Claude code

nucleogenesis force-pushed the fullscreen-users-table branch from 5c5cc1e to 6767f8e Compare October 9, 2025 06:08

nucleogenesis added 4 commits October 8, 2025 23:09

dedupe css

c557796

lint

3cfe9d4

usersrootpage cleanup style & busted code

d7ec47c

refactor UsersTrashPage to use same styles/ux as UsersRootPage

7c4a3fa

disclosure: this commit was made with assistance from Claude code

nucleogenesis force-pushed the fullscreen-users-table branch from 81606c6 to 7c4a3fa Compare October 9, 2025 06:24

nucleogenesis added 2 commits October 8, 2025 23:45

clean up dead styles; use appBarHeight for calculating heights

a1e31e0

pass appbarheight through appbar to facilityappbar so we can use it i…

e4d1441

…n padding calculations; also set max-height for table to pageContentHeight to accommodate appContext

nucleogenesis marked this pull request as ready for review October 9, 2025 07:17

nucleogenesis added 5 commits October 9, 2025 21:20

$themeTokens.surface > "white"

66018bb

fix android height issue w/ proper maxHeight

ef96beb

improved padding on left/right table actions

93d77bc

fix height, use kpagecontainer in userrootpage

c613052

rekpagecontainerization

329f4d9

Prototyping User Table Design Updates #13808

Are you sure you want to change the base?

Prototyping User Table Design Updates #13808

Uh oh!

Conversation

nucleogenesis commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Major Changes

References

Reviewer guidance

QA

Users Root Table, New Users Table, Deleted Users Table

Android & App mode

My Downloads

Classes -> Class Details -> Enroll learners

Uh oh!

github-actions bot commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

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!

nucleogenesis Oct 9, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

nucleogenesis Oct 7, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nucleogenesis Oct 7, 2025 • 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!

pcenov commented Oct 9, 2025

Uh oh!

nucleogenesis commented Oct 10, 2025

nucleogenesis commented Oct 3, 2025 •

edited

Loading

github-actions bot commented Oct 3, 2025 •

edited

Loading

nucleogenesis Oct 9, 2025 •

edited

Loading

nucleogenesis Oct 7, 2025 •

edited

Loading

nucleogenesis Oct 7, 2025 •

edited

Loading