frontend: add "Load More" functionality to recording and room lists components

frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html

@@ -258,6 +258,16 @@
 			></tr>
 		</table>
 	</div>
+
+	<!-- Load More Section -->
+	@if (showLoadMore) {
+		<div class="load-more-container" id="load-more-container">
+			<button mat-button class="load-more-btn" (click)="loadMoreRecordings()" [disabled]="loading" id="load-more-btn">
+				<mat-icon>expand_more</mat-icon>
+				<span>Load More Recordings</span>
+			</button>
+		</div>
+	}
 } @else {
 	<!-- Empty State -->
 	<div class="no-recordings-state">

frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts

@@ -86,6 +86,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 	@Input() showFilters = false;
 	@Input() showSelection = true;
 	@Input() showRoomInfo = true;
+	@Input() showLoadMore = false;
 	@Input() loading = false;
 
 	// Host binding for styling when recordings are selected
@@ -97,6 +98,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 	// Output events
 	@Output() recordingAction = new EventEmitter<RecordingTableAction>();
 	@Output() filterChange = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
+	@Output() loadMore = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
 	@Output() refresh = new EventEmitter<void>();
 
 	// Filter controls
@@ -274,6 +276,12 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 		}
 	}
 
+	loadMoreRecordings() {
+		const nameFilter = this.nameFilterControl.value || '';
+		const statusFilter = this.statusFilterControl.value || '';
+		this.loadMore.emit({ nameFilter, statusFilter });
+	}
+
 	// ===== FILTER METHODS =====
 
 	hasActiveFilters(): boolean {

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html

@@ -317,6 +317,16 @@
 			></tr>
 		</table>
 	</div>
+
+	<!-- Load More Section -->
+	@if (showLoadMore) {
+		<div class="load-more-container" id="load-more-container">
+			<button mat-button class="load-more-btn" (click)="loadMore.emit()" [disabled]="loading" id="load-more-btn">
+				<mat-icon>expand_more</mat-icon>
+				<span>Load More Rooms</span>
+			</button>
+		</div>
+	}
 } @else {
 	<!-- Empty State -->
 	<div class="no-rooms-state">

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts

@@ -94,6 +94,7 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 	@Input() rooms: MeetRoom[] = [];
 	@Input() showFilters = false;
 	@Input() showSelection = true;
+	@Input() showLoadMore = false;
 	@Input() loading = false;
 
 	// Host binding for styling when rooms are selected
@@ -105,6 +106,7 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 	// Output events
 	@Output() roomAction = new EventEmitter<RoomTableAction>();
 	@Output() filterChange = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
+	@Output() loadMore = new EventEmitter<void>();
 	@Output() refresh = new EventEmitter<void>();
 
 	// Filter controls

frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.html

@@ -32,9 +32,10 @@
 				[recordings]="recordings()"
 				[canDeleteRecordings]="true"
 				[loading]="isLoading"
-				[showFilters]="true"
 				[showSelection]="true"
+				[showLoadMore]="hasMoreRecordings"
 				(recordingAction)="onRecordingAction($event)"
+				(loadMore)="loadMoreRecordings($event)"
 				(refresh)="refreshRecordings()"
 				(filterChange)="refreshRecordings($event)"
 			>

frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts

@@ -110,9 +110,9 @@ export class RecordingsComponent implements OnInit {
 		}
 	}
 
-	async loadMoreRecordings() {
+	async loadMoreRecordings(filters?: { nameFilter: string; statusFilter: string }) {
 		if (!this.hasMoreRecordings || this.isLoading) return;
-		await this.loadRecordings();
+		await this.loadRecordings(filters);
 	}
 
 	async refreshRecordings(filters?: { nameFilter: string; statusFilter: string }) {

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html

@@ -35,7 +35,9 @@
 				[rooms]="rooms()"
 				[loading]="isLoading"
 				[showSelection]="true"
+				[showLoadMore]="hasMoreRooms"
 				(roomAction)="onRoomAction($event)"
+				(loadMore)="loadMoreRooms()"
 				(refresh)="refreshRooms()"
 			></ov-rooms-lists>
 		</div>