fix(Content drive): Table UX/UI tweaks (dotCMS#33027)

This PR fixes: dotCMS#33020

### Video


https://github.com/user-attachments/assets/27fe4da7-b64f-4f9e-98e3-2c4431e8716b

Author: rjvelazco

core-web/libs/dotcms-scss/angular/dotcms-theme/components/_datatable.scss

@@ -182,7 +182,9 @@
     box-shadow: inset 0 -2px 0 0 $color-palette-primary-100;
 }
 
-.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
+.p-datatable.p-datatable-hoverable-rows
+    .p-datatable-tbody
+    > tr:not(.p-highlight):not(.no-highlight):hover {
     background: $color-palette-primary-100;
     color: $text-color-hover;
     transition: background-color ease-in $basic-speed;

core-web/libs/dotcms-scss/angular/dotcms-theme/components/_table.scss

@@ -72,11 +72,11 @@ $dot-table-cell-height: 1.25rem;
             }
 
             &:first-child {
-                padding-left: $spacing-3;
+                padding-left: $spacing-4;
             }
 
             &:last-child {
-                padding-right: $spacing-3;
+                padding-right: $spacing-4;
             }
 
             .error-message {
@@ -174,11 +174,11 @@ $dot-table-cell-height: 1.25rem;
                 }
 
                 &:first-child {
-                    padding-left: $spacing-3;
+                    padding-left: $spacing-4;
                 }
 
                 &:last-child {
-                    padding-right: $spacing-3;
+                    padding-right: $spacing-4;
                 }
 
                 .container-thumbnail {

core-web/libs/dotcms-scss/shared/_colors.scss

@@ -80,6 +80,10 @@ $color-palette-gray-700: var(--gray-700);
 $color-palette-gray-800: var(--gray-800);
 $color-palette-gray-900: var(--gray-900);
 
+// Surface
+$color-palette-surface-500: var(--surface-500);
+$color-palette-surface-900: var(--surface-900);
+
 $color-palette-gray-shade: $color-palette-gray-300;
 $color-palette-gray: $color-palette-gray-500;
 $color-palette-gray-tint: rgba($color-palette-gray, 0.1);
@@ -463,4 +467,7 @@ $success: $color-accessible-text-green;
     --gray-700: #6c7389;
     --gray-800: #515667;
     --gray-900: #3d404d;
+
+    --surface-500: #9e9e9e;
+    --surface-900: #212121;
 }

core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.scss

@@ -31,7 +31,7 @@ dot-content-drive-toolbar {
 .tree-selector {
     background-color: lightblue;
     grid-area: tree;
-
+    overflow: hidden;
     border-right: 1px solid $color-palette-gray-400;
     width: 0;
 

core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.spec.ts

@@ -234,6 +234,15 @@ describe('DotContentDriveStore', () => {
                 store.setFilters({ contentType: 'Blog' });
                 expect(store.filters()).toEqual({ contentType: 'Blog' });
             });
+
+            it('should update filters and reset pagination offset', () => {
+                store.setPagination({ limit: 10, offset: 10 });
+                expect(store.pagination()).toEqual({ limit: 10, offset: 10 });
+
+                store.setFilters({ contentType: 'Blog' });
+                expect(store.pagination()).toEqual({ limit: 10, offset: 0 });
+                expect(store.filters()).toEqual({ contentType: 'Blog' });
+            });
         });
 
         describe('setPagination', () => {

core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.ts

@@ -119,7 +119,13 @@ export const DotContentDriveStore = signalStore(
                 patchState(store, { status });
             },
             setFilters(filters: Record<string, string>) {
-                patchState(store, { filters: { ...store.filters(), ...filters } });
+                patchState(store, {
+                    filters: { ...store.filters(), ...filters },
+                    pagination: {
+                        ...store.pagination(),
+                        offset: 0
+                    }
+                });
             },
             setPagination(pagination: DotContentDrivePagination) {
                 patchState(store, { pagination });

core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html

@@ -1,21 +1,23 @@
 <p-table
     [value]="$items()"
     [tableStyle]="{ width: '100%' }"
-    dataKey="identifier"
-    [paginator]="true"
-    [rows]="20"
-    [rowsPerPageOptions]="[20, 40, 60]"
+    [paginator]="$showPagination()"
+    [rows]="MIN_ROWS_PER_PAGE"
+    [rowsPerPageOptions]="rowsPerPageOptions"
     [totalRecords]="$totalItems()"
     [lazy]="true"
+    [scrollable]="true"
+    [styleClass]="$styleClass()"
+    [(selection)]="selectedItems"
+    (selectionChange)="onSelectionChange()"
     (onPage)="onPage($event)"
+    (onSort)="onSort($event)"
+    dataKey="identifier"
     sortMode="single"
-    [(selection)]="selectedItems"
     selectionMode="multiple"
-    (selectionChange)="onSelectionChange()"
-    styleClass="dotTable"
     sortField="modDate"
     data-testId="table"
-    (onSort)="onSort($event)">
+    scrollHeight="flex">
     <ng-template pTemplate="header">
         <tr data-testId="header-row">
             <th style="width: 2.5rem"><p-tableHeaderCheckbox data-testId="header-checkbox" /></th>
@@ -76,4 +78,23 @@
             </tr>
         }
     </ng-template>
+    <ng-template pTemplate="emptymessage">
+        <tr class="no-highlight">
+            <td colspan="7" class="empty-state">
+                <div class="empty-state-content">
+                    <div class="empty-state-icon">
+                        <i class="pi pi-folder-open"></i>
+                    </div>
+                    <div class="empty-state-message">
+                        <h3 class="empty-state-title">
+                            {{ 'content.drive.empty.state.title' | dm }}
+                        </h3>
+                        <p class="empty-state-description">
+                            {{ 'content.drive.empty.state.description' | dm }}
+                        </p>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    </ng-template>
 </p-table>

core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.scss

@@ -3,7 +3,7 @@
 :host {
     width: 100%;
     max-height: 100%;
-    overflow-y: auto;
+    min-height: 0;
 
     ::ng-deep {
         p-table {
@@ -14,6 +14,14 @@
                 }
             }
         }
+
+        p-table {
+            .p-datatable.empty-table {
+                table {
+                    height: 100%;
+                }
+            }
+        }
     }
 }
 
@@ -24,3 +32,52 @@
     gap: $spacing-3;
     width: 100%;
 }
+
+.empty-state {
+    padding: $spacing-6 $spacing-4;
+    text-align: center;
+    border: none;
+
+    .empty-state-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $spacing-4;
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    .empty-state-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 5rem;
+        height: 5rem;
+        border-radius: 50%;
+
+        i {
+            color: $color-palette-surface-500;
+            font-size: 5.75rem;
+        }
+    }
+
+    .empty-state-message {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .empty-state-title {
+        margin: 0;
+        font-size: $font-size-lmd;
+        font-weight: $font-weight-medium-bold;
+        text-align: center;
+        color: $color-palette-gray-800;
+    }
+
+    .empty-state-description {
+        margin: 0;
+        color: $black;
+        font-size: $font-size-md;
+        line-height: 1.5;
+    }
+}

core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts

@@ -130,6 +130,25 @@ describe('DotFolderListViewComponent', () => {
         });
     });
 
+    describe('Styles and Pagination', () => {
+        it('should have empty-table class when items list is empty', () => {
+            spectator.setInput('items', []);
+            spectator.setInput('totalItems', 0);
+            spectator.detectChanges();
+
+            const tableDebugEl = spectator.debugElement.query(By.css('[data-testId="table"]'));
+            expect(tableDebugEl.attributes['ng-reflect-style-class']).toContain('empty-table');
+        });
+
+        it('should not show pagination when there are 20 or fewer total items', () => {
+            spectator.setInput('totalItems', 20);
+            spectator.detectChanges();
+
+            const tableDebugEl = spectator.debugElement.query(By.css('[data-testId="table"]'));
+            expect(tableDebugEl.attributes['ng-reflect-paginator']).toBe('false');
+        });
+    });
+
     describe('Loading', () => {
         it('should show the loading row', () => {
             spectator.setInput('items', mockItems);

core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts

@@ -1,6 +1,7 @@
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
     CUSTOM_ELEMENTS_SCHEMA,
     input,
     output
@@ -40,8 +41,16 @@ export class DotFolderListViewComponent {
     paginate = output<LazyLoadEvent>();
     sort = output<SortEvent>();
 
-    readonly HEADER_COLUMNS = HEADER_COLUMNS;
-    readonly SKELETON_SPAN = HEADER_COLUMNS.length + 1;
+    readonly MIN_ROWS_PER_PAGE = 20;
+    protected readonly rowsPerPageOptions = [this.MIN_ROWS_PER_PAGE, 40, 60];
+    protected readonly HEADER_COLUMNS = HEADER_COLUMNS;
+    protected readonly SKELETON_SPAN = HEADER_COLUMNS.length + 1;
+    protected readonly $showPagination = computed(
+        () => this.$totalItems() > this.MIN_ROWS_PER_PAGE
+    );
+    protected readonly $styleClass = computed(() =>
+        this.$items().length === 0 ? 'dotTable empty-table' : 'dotTable'
+    );
 
     // Model for the table selection
     selectedItems: DotContentDriveItem[] = [];