From 5766368239dbba3452cbecf11b88e5745e9c6827 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Mon, 30 Mar 2026 16:57:04 +0200
Subject: [PATCH 1/2] feat: Migrate deleted items views to
 @conduction/nextcloud-vue components

Refactors the deleted items management interface to use the standardized CnIndexPage and CnStatsPanel components. This update replaces manual table and statistics implementations with a schema-driven approach, including support for bulk restoration and purging of soft-deleted items.

Fixes REGISTERS-487
---
 src/sidebars/deleted/DeletedSideBar.vue | 198 +++-----
 src/views/deleted/DeletedIndex.vue      | 586 ++++++------------------
 2 files changed, 204 insertions(+), 580 deletions(-)

diff --git a/src/sidebars/deleted/DeletedSideBar.vue b/src/sidebars/deleted/DeletedSideBar.vue
index c82a270a9..6950cdec7 100644
--- a/src/sidebars/deleted/DeletedSideBar.vue
+++ b/src/sidebars/deleted/DeletedSideBar.vue
@@ -83,76 +83,13 @@ import { deletedStore, navigationStore, registerStore, schemaStore } from '../..
 				<ChartLine :size="20" />
 			</template>
 
-			<!-- Statistics Section -->
-			<div class="statsSection">
-				<h3>{{ t('openregister', 'Deletion Statistics') }}</h3>
-
-				<div v-if="deletedStore.statisticsLoading" class="loading-stats">
-					<NcLoadingIcon :size="32" />
-					<p>{{ t('openregister', 'Loading statistics...') }}</p>
-				</div>
-
-				<div v-else>
-					<div class="statCard">
-						<div class="statNumber">
-							{{ deletedStore.statistics.totalDeleted }}
-						</div>
-						<div class="statLabel">
-							{{ t('openregister', 'Total Deleted Items') }}
-						</div>
-					</div>
-					<div class="statCard">
-						<div class="statNumber">
-							{{ deletedStore.statistics.deletedToday }}
-						</div>
-						<div class="statLabel">
-							{{ t('openregister', 'Deleted Today') }}
-						</div>
-					</div>
-					<div class="statCard">
-						<div class="statNumber">
-							{{ deletedStore.statistics.deletedThisWeek }}
-						</div>
-						<div class="statLabel">
-							{{ t('openregister', 'Deleted This Week') }}
-						</div>
-					</div>
-					<div class="statCard">
-						<div class="statNumber">
-							{{ deletedStore.statistics.oldestDays }}
-						</div>
-						<div class="statLabel">
-							{{ t('openregister', 'Oldest Item (days)') }}
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Top Deleters -->
-			<div class="topDeleters">
-				<h4>{{ t('openregister', 'Top Deleters') }}</h4>
-
-				<div v-if="deletedStore.topDeletersLoading" class="loading-stats">
-					<NcLoadingIcon :size="24" />
-				</div>
-
-				<div v-else-if="deletedStore.topDeleters.length === 0" class="no-data">
-					<p>{{ t('openregister', 'No deletion data available') }}</p>
-				</div>
-
-				<NcListItem v-for="(deleter, index) in deletedStore.topDeleters"
-					v-else
-					:key="index"
-					:name="deleter.user"
-					:bold="false">
-					<template #icon>
-						<AccountCircle :size="32" />
-					</template>
-					<template #subname>
-						{{ t('openregister', '{count} deletions', { count: deleter.count }) }}
-					</template>
-				</NcListItem>
-			</div>
+			<CnStatsPanel
+				:sections="deletionStatsSections"
+				:loading="deletedStore.statisticsLoading">
+				<template #item-icon-topDeleters="{ item }">
+					<AccountCircle :size="32" />
+				</template>
+			</CnStatsPanel>
 		</NcAppSidebarTab>
 	</NcAppSidebar>
 </template>
@@ -163,13 +100,16 @@ import {
 	NcAppSidebarTab,
 	NcSelect,
 	NcNoteCard,
-	NcListItem,
 	NcDateTimePickerNative,
-	NcLoadingIcon,
 } from '@nextcloud/vue'
+import { CnStatsPanel } from '@conduction/nextcloud-vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import ChartLine from 'vue-material-design-icons/ChartLine.vue'
 import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
+import DeleteEmpty from 'vue-material-design-icons/DeleteEmpty.vue'
+import CalendarToday from 'vue-material-design-icons/CalendarToday.vue'
+import CalendarWeek from 'vue-material-design-icons/CalendarWeek.vue'
+import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 
 export default {
 	name: 'DeletedSideBar',
@@ -178,9 +118,8 @@ export default {
 		NcAppSidebarTab,
 		NcSelect,
 		NcNoteCard,
-		NcListItem,
 		NcDateTimePickerNative,
-		NcLoadingIcon,
+		CnStatsPanel,
 		FilterOutline,
 		ChartLine,
 		AccountCircle,
@@ -249,6 +188,57 @@ export default {
 				schema,
 			}
 		},
+		deletionStatsSections() {
+			return [
+				{
+					type: 'stats',
+					id: 'overview',
+					title: t('openregister', 'Deletion Statistics'),
+					layout: 'grid',
+					columns: 2,
+					items: [
+						{
+							title: t('openregister', 'Total Deleted Items'),
+							count: deletedStore.statistics.totalDeleted,
+							countLabel: t('openregister', 'items'),
+							variant: 'primary',
+							icon: DeleteEmpty,
+						},
+						{
+							title: t('openregister', 'Deleted Today'),
+							count: deletedStore.statistics.deletedToday,
+							countLabel: t('openregister', 'items'),
+							variant: 'warning',
+							icon: CalendarToday,
+						},
+						{
+							title: t('openregister', 'Deleted This Week'),
+							count: deletedStore.statistics.deletedThisWeek,
+							countLabel: t('openregister', 'items'),
+							icon: CalendarWeek,
+						},
+						{
+							title: t('openregister', 'Oldest Item'),
+							count: deletedStore.statistics.oldestDays,
+							countLabel: t('openregister', 'days'),
+							icon: ClockOutline,
+						},
+					],
+				},
+				{
+					type: 'list',
+					id: 'topDeleters',
+					title: t('openregister', 'Top Deleters'),
+					loading: deletedStore.topDeletersLoading,
+					emptyLabel: t('openregister', 'No deletion data available'),
+					items: deletedStore.topDeleters.map((deleter, index) => ({
+						key: deleter.user || String(index),
+						name: deleter.user,
+						subname: t('openregister', '{count} deletions', { count: deleter.count }),
+					})),
+				},
+			]
+		},
 		userOptions() {
 			// Get unique users from deleted items or provide default options
 			const users = new Set()
@@ -482,19 +472,16 @@ export default {
 </script>
 
 <style scoped>
-.filterSection,
-.statsSection {
+.filterSection {
 	padding: 12px 0;
 	border-bottom: 1px solid var(--color-border);
 }
 
-.filterSection:last-child,
-.statsSection:last-child {
+.filterSection:last-child {
 	border-bottom: none;
 }
 
-.filterSection h3,
-.statsSection h3 {
+.filterSection h3 {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: bold;
@@ -519,57 +506,6 @@ export default {
 	margin: 8px 16px;
 }
 
-.statsSection {
-	padding: 16px;
-}
-
-.loading-stats {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 8px;
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9rem;
-}
-
-.statCard {
-	background: var(--color-background-hover);
-	border-radius: var(--border-radius);
-	padding: 16px;
-	margin-bottom: 12px;
-	text-align: center;
-}
-
-.statNumber {
-	font-size: 2rem;
-	font-weight: bold;
-	color: var(--color-primary);
-	margin-bottom: 4px;
-}
-
-.statLabel {
-	font-size: 0.9rem;
-	color: var(--color-text-maxcontrast);
-}
-
-.topDeleters {
-	margin-top: 20px;
-}
-
-.topDeleters h4 {
-	margin: 0 0 12px 0;
-	font-size: 1rem;
-	font-weight: 500;
-	color: var(--color-main-text);
-}
-
-.no-data {
-	text-align: center;
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9rem;
-	padding: 20px;
-}
-
 /* Add some spacing between select inputs */
 :deep(.v-select) {
 	margin-bottom: 8px;
diff --git a/src/views/deleted/DeletedIndex.vue b/src/views/deleted/DeletedIndex.vue
index 739b79c4e..f1cc83a25 100644
--- a/src/views/deleted/DeletedIndex.vue
+++ b/src/views/deleted/DeletedIndex.vue
@@ -1,276 +1,175 @@
 <script setup>
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { deletedStore, registerStore, schemaStore, navigationStore } from '../../store/store.js'
-import formatBytes from '../../services/formatBytes.js'
 </script>
 
 <template>
 	<NcAppContent>
-		<div class="viewContainer">
-			<!-- Header -->
-			<div class="viewHeader">
-				<h1 class="viewHeaderTitleIndented">
-					{{ t('openregister', 'Soft Deleted Items') }}
-				</h1>
-				<p>{{ t('openregister', 'Manage and restore soft deleted items from your registers') }}</p>
-			</div>
-
-			<!-- Actions Bar -->
-			<div class="viewActionsBar">
-				<div class="viewInfo">
-					<span class="viewTotalCount">
-						{{ t('openregister', 'Showing {showing} of {total} deleted items', { showing: paginatedItems.length, total: deletedStore.deletedPagination.total }) }}
-					</span>
-					<span v-if="selectedItems.length > 0" class="viewIndicator">
-						({{ t('openregister', '{count} selected', { count: selectedItems.length }) }})
-					</span>
-				</div>
-				<div class="viewActions">
-					<!-- Mass Actions Dropdown -->
-					<NcActions
-						:force-name="true"
-						:disabled="selectedItems.length === 0"
-						:title="selectedItems.length === 0 ? 'Select one or more objects to use mass actions' : `Mass actions (${selectedItems.length} selected)`"
-						:menu-name="`Mass Actions (${selectedItems.length})`">
-						<template #icon>
-							<FormatListChecks :size="20" />
-						</template>
-						<NcActionButton
-							:disabled="selectedItems.length === 0"
-							close-after-click
-							@click="bulkRestore">
-							<template #icon>
-								<Restore :size="20" />
-							</template>
-							Restore
-						</NcActionButton>
-						<NcActionButton
-							:disabled="selectedItems.length === 0"
-							close-after-click
-							@click="bulkDelete">
-							<template #icon>
-								<Delete :size="20" />
-							</template>
-							Purge
-						</NcActionButton>
-					</NcActions>
-
-					<!-- Regular Actions -->
-					<NcActions
-						:force-name="true"
-						:inline="1"
-						menu-name="Actions">
-						<NcActionButton
-							close-after-click
-							@click="refreshItems">
-							<template #icon>
-								<Refresh :size="20" />
-							</template>
-							{{ t('openregister', 'Refresh') }}
-						</NcActionButton>
-					</NcActions>
+		<CnIndexPage
+			ref="indexPage"
+			:title="t('openregister', 'Soft Deleted Items')"
+			:description="t('openregister', 'Manage and restore soft deleted items from your registers')"
+			:show-title="true"
+			:show-add="false"
+			:show-view-toggle="false"
+			:show-form-dialog="false"
+			:show-edit-action="false"
+			:show-copy-action="false"
+			:show-delete-action="false"
+			:show-mass-import="false"
+			:show-mass-export="false"
+			:show-mass-copy="false"
+			:show-mass-delete="false"
+			view-mode="table"
+			:objects="deletedStore.deletedList"
+			:columns="tableColumns"
+			:pagination="paginationData"
+			:selectable="true"
+			:selected-ids="selectedItems"
+			:actions="customActions"
+			:refreshing="isRefreshing"
+			:loading="deletedStore.deletedLoading"
+			row-key="id"
+			:empty-text="t('openregister', 'No deleted items found')"
+			:name-formatter="formatDeletedItemName"
+			@refresh="handleRefresh"
+			@page-changed="onPageChanged"
+			@page-size-changed="onPageSizeChanged"
+			@select="selectedItems = $event">
+			<!-- Custom mass actions -->
+			<template #mass-actions="{ count }">
+				<NcActionButton
+					:disabled="count === 0"
+					close-after-click
+					@click="bulkRestore">
+					<template #icon>
+						<Restore :size="20" />
+					</template>
+					{{ t('openregister', 'Restore selected') }}
+				</NcActionButton>
+				<NcActionButton
+					:disabled="count === 0"
+					close-after-click
+					@click="bulkDelete">
+					<template #icon>
+						<Delete :size="20" />
+					</template>
+					{{ t('openregister', 'Purge selected') }}
+				</NcActionButton>
+			</template>
+
+			<!-- Title column -->
+			<template #column-title="{ row }">
+				<div class="titleContent">
+					<strong>{{ getItemTitle(row) }}</strong>
+					<span v-if="getItemDescription(row)" class="textDescription textEllipsis">{{ getItemDescription(row) }}</span>
 				</div>
-			</div>
-
-			<!-- Items Table -->
-			<NcEmptyContent v-if="deletedStore.deletedLoading || !filteredItems.length"
-				:name="emptyContentName"
-				:description="emptyContentDescription">
-				<template #icon>
-					<NcLoadingIcon v-if="deletedStore.deletedLoading" />
-					<DeleteEmpty v-else />
-				</template>
-			</NcEmptyContent>
-
-			<div v-else class="viewTableContainer">
-				<table class="viewTable itemsTable">
-					<thead>
-						<tr>
-							<th class="tableColumnCheckbox">
-								<NcCheckboxRadioSwitch
-									:checked="allSelected"
-									:indeterminate="someSelected"
-									@update:checked="toggleSelectAll" />
-							</th>
-							<th>{{ t('openregister', 'Title') }}</th>
-							<th class="tableColumnConstrained">
-								{{ t('openregister', 'Register') }}
-							</th>
-							<th class="tableColumnConstrained">
-								{{ t('openregister', 'Schema') }}
-							</th>
-							<th>{{ t('openregister', 'Deleted Date') }}</th>
-							<th>{{ t('openregister', 'Deleted By') }}</th>
-							<th>{{ t('openregister', 'Purge Date') }}</th>
-							<th class="tableColumnActions">
-								{{ t('openregister', 'Actions') }}
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="item in paginatedItems"
-							:key="item.id"
-							class="viewTableRow itemRow table-row-selectable"
-							:class="{ 'viewTableRowSelected table-row-selected': selectedItems.includes(item.id) }"
-							@click="handleRowClick(item.id, $event)">
-							<td class="tableColumnCheckbox">
-								<NcCheckboxRadioSwitch
-									:checked="selectedItems.includes(item.id)"
-									@update:checked="(checked) => toggleItemSelection(item.id, checked)" />
-							</td>
-							<td class="tableColumnTitle">
-								<div class="titleContent">
-									<strong>{{ getItemTitle(item) }}</strong>
-									<span v-if="getItemDescription(item)" class="textDescription textEllipsis">{{ getItemDescription(item) }}</span>
-								</div>
-							</td>
-							<td class="tableColumnConstrained">
-								{{ getRegisterName(item['@self']?.register) }}
-							</td>
-							<td class="tableColumnConstrained">
-								{{ getSchemaName(item['@self']?.schema) }}
-							</td>
-							<td>
-								<span v-if="item['@self']?.deleted?.deleted">{{ formatPurgeDate(item['@self'].deleted.deleted) }}</span>
-								<span v-else>{{ t('openregister', 'Unknown') }}</span>
-							</td>
-							<td>{{ item['@self']?.deleted?.deletedBy || t('openregister', 'Unknown') }}</td>
-							<td>
-								<span v-if="item['@self']?.deleted?.purgeDate">{{ formatPurgeDate(item['@self'].deleted.purgeDate) }}</span>
-								<span v-else>{{ t('openregister', 'No purge date set') }}</span>
-							</td>
-							<td class="tableColumnActions">
-								<NcActions>
-									<NcActionButton close-after-click @click="restoreItem(item)">
-										<template #icon>
-											<Restore :size="20" />
-										</template>
-										{{ t('openregister', 'Restore') }}
-									</NcActionButton>
-									<NcActionButton close-after-click @click="permanentlyDelete(item)">
-										<template #icon>
-											<Delete :size="20" />
-										</template>
-										{{ t('openregister', 'Permanently Delete') }}
-									</NcActionButton>
-								</NcActions>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-
-			<!-- Pagination -->
-			<PaginationComponent
-				:current-page="currentPage"
-				:total-pages="totalPages"
-				:total-items="deletedStore.deletedPagination.total"
-				:current-page-size="deletedStore.deletedPagination.limit || 20"
-				:min-items-to-show="10"
-				@page-changed="onPageChanged"
-				@page-size-changed="onPageSizeChanged" />
-		</div>
+			</template>
+
+			<!-- Register column -->
+			<template #column-register="{ row }">
+				{{ getRegisterName(row['@self']?.register) }}
+			</template>
+
+			<!-- Schema column -->
+			<template #column-schema="{ row }">
+				{{ getSchemaName(row['@self']?.schema) }}
+			</template>
+
+			<!-- Deleted Date column -->
+			<template #column-deletedDate="{ row }">
+				<span v-if="row['@self']?.deleted?.deleted">{{ formatPurgeDate(row['@self'].deleted.deleted) }}</span>
+				<span v-else>{{ t('openregister', 'Unknown') }}</span>
+			</template>
+
+			<!-- Deleted By column -->
+			<template #column-deletedBy="{ row }">
+				{{ row['@self']?.deleted?.deletedBy || t('openregister', 'Unknown') }}
+			</template>
+
+			<!-- Purge Date column -->
+			<template #column-purgeDate="{ row }">
+				<span v-if="row['@self']?.deleted?.purgeDate">{{ formatPurgeDate(row['@self'].deleted.purgeDate) }}</span>
+				<span v-else>{{ t('openregister', 'No purge date set') }}</span>
+			</template>
+		</CnIndexPage>
 	</NcAppContent>
 </template>
 
 <script>
-import {
-	NcAppContent,
-	NcEmptyContent,
-	NcLoadingIcon,
-	NcCheckboxRadioSwitch,
-	NcActions,
-	NcActionButton,
-} from '@nextcloud/vue'
-import DeleteEmpty from 'vue-material-design-icons/DeleteEmpty.vue'
+import { NcAppContent, NcActionButton } from '@nextcloud/vue'
+import { CnIndexPage } from '@conduction/nextcloud-vue'
+
 import Restore from 'vue-material-design-icons/Restore.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
-import Refresh from 'vue-material-design-icons/Refresh.vue'
-import FormatListChecks from 'vue-material-design-icons/FormatListChecks.vue'
-
-import PaginationComponent from '../../components/PaginationComponent.vue'
 
 export default {
 	name: 'DeletedIndex',
 	components: {
 		NcAppContent,
-		NcEmptyContent,
-		NcLoadingIcon,
-		NcCheckboxRadioSwitch,
-		NcActions,
 		NcActionButton,
-		DeleteEmpty,
+		CnIndexPage,
 		Restore,
 		Delete,
-		Refresh,
-		FormatListChecks,
-		PaginationComponent,
 	},
 	data() {
 		return {
 			selectedItems: [],
+			isRefreshing: false,
 		}
 	},
 	computed: {
-		filteredItems() {
-			// Items are already filtered by the store based on sidebar filters
-			return deletedStore.deletedList || []
-		},
-		paginatedItems() {
-			// Items are already paginated by the store
-			return this.filteredItems
-		},
-		totalPages() {
-			return deletedStore.deletedPagination.pages || 1
-		},
-		currentPage() {
-			return deletedStore.deletedPagination.page || 1
-		},
-		allSelected() {
-			return this.paginatedItems.length > 0 && this.paginatedItems.every(item => this.selectedItems.includes(item.id))
-		},
-		someSelected() {
-			return this.selectedItems.length > 0 && !this.allSelected
-		},
-		emptyContentName() {
-			if (deletedStore.deletedLoading) {
-				return t('openregister', 'Loading deleted items...')
-			} else if (!this.filteredItems.length) {
-				return t('openregister', 'No deleted items found')
+		tableColumns() {
+			return [
+				{ key: 'title', label: t('openregister', 'Title') },
+				{ key: 'register', label: t('openregister', 'Register') },
+				{ key: 'schema', label: t('openregister', 'Schema') },
+				{ key: 'deletedDate', label: t('openregister', 'Deleted Date') },
+				{ key: 'deletedBy', label: t('openregister', 'Deleted By') },
+				{ key: 'purgeDate', label: t('openregister', 'Purge Date') },
+			]
+		},
+		paginationData() {
+			const p = deletedStore.deletedPagination
+			return {
+				page: p.page || 1,
+				pages: p.pages || 1,
+				total: p.total || 0,
+				limit: p.limit || 20,
 			}
-			return ''
 		},
-		emptyContentDescription() {
-			if (deletedStore.deletedLoading) {
-				return t('openregister', 'Please wait while we fetch your deleted items.')
-			} else if (!this.filteredItems.length) {
-				return t('openregister', 'There are no deleted items matching your current filters.')
-			}
-			return ''
+		customActions() {
+			return [
+				{
+					label: t('openregister', 'Restore'),
+					icon: Restore,
+					handler: (row) => this.restoreItem(row),
+				},
+				{
+					label: t('openregister', 'Permanently Delete'),
+					icon: Delete,
+					handler: (row) => this.permanentlyDelete(row),
+				},
+			]
 		},
 	},
 	watch: {
 		selectedItems() {
 			this.updateCounts()
 		},
-		filteredItems() {
+		'deletedStore.deletedList'() {
 			this.updateCounts()
 		},
 	},
 	async mounted() {
-		// Load initial data
 		await this.loadItems()
-
-		// Update counts
 		this.updateCounts()
 
-		// Listen for filter changes from sidebar
 		this.$root.$on('deleted-filters-changed', this.handleFiltersChanged)
 		this.$root.$on('deleted-bulk-restore', this.bulkRestore)
 		this.$root.$on('deleted-bulk-delete', this.bulkDelete)
 		this.$root.$on('deleted-export-filtered', this.exportFiltered)
 
-		// Listen for deletion events from modals
 		this.$root.$on('deleted-objects-permanently-deleted', this.handleObjectsDeleted)
 		this.$root.$on('deleted-objects-restored', this.handleObjectsRestored)
 	},
@@ -283,15 +182,13 @@ export default {
 		this.$root.$off('deleted-objects-restored')
 	},
 	methods: {
-		/**
-		 * Load deleted items from store
-		 * @return {Promise<void>}
-		 */
+		formatDeletedItemName(item) {
+			return this.getItemTitle(item)
+		},
 		async loadItems() {
 			try {
 				await deletedStore.fetchDeleted()
 
-				// Load register and schema data if not already loaded
 				if (!registerStore.registerList.length) {
 					await registerStore.refreshRegisterList()
 				}
@@ -302,35 +199,22 @@ export default {
 				console.error('Error loading deleted items:', error)
 			}
 		},
-		/**
-		 * Handle filter changes from sidebar
-		 * @param {object} filters - Filter object from sidebar
-		 * @return {void}
-		 */
 		async handleFiltersChanged(filters) {
-			// Convert sidebar filters to API filters using @self.deleted notation
 			const apiFilters = this.convertFiltersToApiFormat(filters)
 
 			deletedStore.setDeletedFilters(apiFilters)
 
-			// Reset pagination and fetch new data
 			try {
 				await deletedStore.fetchDeleted({
 					page: 1,
 					filters: apiFilters,
 				})
 
-				// Clear selection when filters change
 				this.selectedItems = []
 			} catch (error) {
 				console.error('Error applying filters:', error)
 			}
 		},
-		/**
-		 * Convert sidebar filters to API format using @self.deleted notation
-		 * @param {object} filters - Sidebar filters
-		 * @return {object} API filters
-		 */
 		convertFiltersToApiFormat(filters) {
 			const apiFilters = {}
 
@@ -356,140 +240,49 @@ export default {
 
 			return apiFilters
 		},
-		/**
-		 * Get item title from object data
-		 * @param {object} item - The deleted item
-		 * @return {string} The item title
-		 */
 		getItemTitle(item) {
-			// Try various title fields, fallback to ID without "Object" prefix
 			return item.title || item.fileName || item.name || item.object?.title || item.object?.name || item.id
 		},
-		/**
-		 * Get item description from object data
-		 * @param {object} item - The deleted item
-		 * @return {string} The item description
-		 */
 		getItemDescription(item) {
 			return item.description || item.object?.description || item.object?.summary || null
 		},
-		/**
-		 * Get register name by ID
-		 * @param {string|number} registerId - The register ID
-		 * @return {string} The register name
-		 */
 		getRegisterName(registerId) {
 			if (!registerId) return t('openregister', 'Unknown Register')
 
 			const register = registerStore.registerList.find(r => r.id === parseInt(registerId))
 			return register?.title || `Register ${registerId}`
 		},
-		/**
-		 * Get schema name by ID
-		 * @param {string|number} schemaId - The schema ID
-		 * @return {string} The schema name
-		 */
 		getSchemaName(schemaId) {
 			if (!schemaId) return t('openregister', 'Unknown Schema')
 
 			const schema = schemaStore.schemaList.find(s => s.id === parseInt(schemaId))
 			return schema?.title || `Schema ${schemaId}`
 		},
-		/**
-		 * Toggle selection for all items on current page
-		 * @param {boolean} checked - Whether to select or deselect all
-		 * @return {void}
-		 */
-		toggleSelectAll(checked) {
-			if (checked) {
-				this.paginatedItems.forEach(item => {
-					if (!this.selectedItems.includes(item.id)) {
-						this.selectedItems.push(item.id)
-					}
-				})
-			} else {
-				this.paginatedItems.forEach(item => {
-					const index = this.selectedItems.indexOf(item.id)
-					if (index > -1) {
-						this.selectedItems.splice(index, 1)
-					}
-				})
-			}
-		},
-		/**
-		 * Toggle selection for individual item
-		 * @param {string} itemId - ID of the item to toggle
-		 * @param {boolean} checked - Whether to select or deselect
-		 * @return {void}
-		 */
-		toggleItemSelection(itemId, checked) {
-			if (checked) {
-				if (!this.selectedItems.includes(itemId)) {
-					this.selectedItems.push(itemId)
-				}
-			} else {
-				const index = this.selectedItems.indexOf(itemId)
-				if (index > -1) {
-					this.selectedItems.splice(index, 1)
-				}
-			}
-		},
-		/**
-		 * Restore selected items using dialog
-		 * @return {void}
-		 */
 		bulkRestore() {
 			if (this.selectedItems.length === 0) return
 
-			// Get selected objects data
-			const selectedObjects = this.paginatedItems.filter(item => this.selectedItems.includes(item.id))
+			const selectedObjects = deletedStore.deletedList.filter(item => this.selectedItems.includes(item.id))
 
-			// Set data in deletedStore and open dialog
 			deletedStore.setSelectedForBulkAction(selectedObjects)
 			navigationStore.setDialog('restoreMultiple')
 		},
-		/**
-		 * Permanently delete selected items using dialog
-		 * @return {void}
-		 */
 		bulkDelete() {
 			if (this.selectedItems.length === 0) return
 
-			// Get selected objects data
-			const selectedObjects = this.paginatedItems.filter(item => this.selectedItems.includes(item.id))
+			const selectedObjects = deletedStore.deletedList.filter(item => this.selectedItems.includes(item.id))
 
-			// Set data in deletedStore and open dialog
 			deletedStore.setSelectedForBulkAction(selectedObjects)
 			navigationStore.setDialog('permanentlyDeleteMultiple')
 		},
-		/**
-		 * Restore individual item using dialog
-		 * @param {object} item - Item to restore
-		 * @return {void}
-		 */
 		restoreItem(item) {
-			// Set transfer data as array with single item and open dialog
 			deletedStore.setSelectedForBulkAction([item])
 			navigationStore.setDialog('restoreMultiple')
 		},
-		/**
-		 * Permanently delete individual item using dialog
-		 * @param {object} item - Item to delete
-		 * @return {void}
-		 */
 		permanentlyDelete(item) {
-			// Set transfer data as array with single item and open dialog
 			deletedStore.setSelectedForBulkAction([item])
 			navigationStore.setDialog('permanentlyDeleteMultiple')
 		},
-
-		/**
-		 * Handle multiple objects deletion event
-		 * @param {Array<string>} objectIds - IDs of deleted objects
-		 * @return {Promise<void>}
-		 */
 		async handleObjectsDeleted(objectIds) {
-			// Remove from selection if they were selected
 			objectIds.forEach(id => {
 				const index = this.selectedItems.indexOf(id)
 				if (index > -1) {
@@ -497,16 +290,9 @@ export default {
 				}
 			})
 
-			// Refresh the list
 			await this.loadItems()
 		},
-		/**
-		 * Handle multiple objects restoration event
-		 * @param {Array<string>} objectIds - IDs of restored objects
-		 * @return {Promise<void>}
-		 */
 		async handleObjectsRestored(objectIds) {
-			// Remove from selection if they were selected
 			objectIds.forEach(id => {
 				const index = this.selectedItems.indexOf(id)
 				if (index > -1) {
@@ -514,102 +300,43 @@ export default {
 				}
 			})
 
-			// Refresh the list
 			await this.loadItems()
 		},
-		/**
-		 * Export filtered items with specified options
-		 * @param {object} options - Export options
-		 * @param _options
-		 * @return {void}
-		 */
-		exportFilteredItems(_options) {
-			// TODO: Implement export functionality for deleted items
+		async handleRefresh() {
+			this.isRefreshing = true
+			try {
+				await this.loadItems()
+				this.selectedItems = []
+			} finally {
+				this.isRefreshing = false
+			}
 		},
-		/**
-		 * Handle page change from pagination component
-		 * @param {number} page - The page number to change to
-		 * @return {Promise<void>}
-		 */
 		async onPageChanged(page) {
 			try {
 				await deletedStore.fetchDeleted({
 					page,
 					limit: deletedStore.deletedPagination.limit,
 				})
-				// Clear selection when page changes
 				this.selectedItems = []
 			} catch (error) {
 				// Handle error silently
 			}
 		},
-		/**
-		 * Handle page size change from pagination component
-		 * @param {number} pageSize - The new page size
-		 * @return {Promise<void>}
-		 */
 		async onPageSizeChanged(pageSize) {
 			try {
 				await deletedStore.fetchDeleted({
 					page: 1,
 					limit: pageSize,
 				})
-				// Clear selection when page size changes
 				this.selectedItems = []
 			} catch (error) {
 				console.error('Error changing page size:', error)
 			}
 		},
-		/**
-		 * Refresh items list
-		 * @return {Promise<void>}
-		 */
-		async refreshItems() {
-			await this.loadItems()
-			this.selectedItems = []
-		},
-		/**
-		 * Update counts for sidebar
-		 * @return {void}
-		 */
 		updateCounts() {
 			this.$root.$emit('deleted-selection-count', this.selectedItems.length)
-			this.$root.$emit('deleted-filtered-count', this.filteredItems.length)
+			this.$root.$emit('deleted-filtered-count', deletedStore.deletedList.length)
 		},
-		/**
-		 * Handle row click for selection
-		 * @param {string} id - Item ID
-		 * @param {Event} event - Click event
-		 * @return {void}
-		 */
-		handleRowClick(id, event) {
-			// Don't select if clicking on the checkbox, actions button, or inside actions menu
-			if (event.target.closest('.tableColumnCheckbox')
-				|| event.target.closest('.tableColumnActions')
-				|| event.target.closest('.actionsButton')) {
-				return
-			}
-
-			// Toggle selection on row click
-			this.handleSelectItem(id)
-		},
-		/**
-		 * Handle item selection toggle
-		 * @param {string} id - Item ID
-		 * @return {void}
-		 */
-		handleSelectItem(id) {
-			if (this.selectedItems.includes(id)) {
-				this.selectedItems = this.selectedItems.filter(item => item !== id)
-			} else {
-				this.selectedItems.push(id)
-			}
-		},
-		/**
-		 * Format purge date in ISO format yyyy:mm:dd hh:mm
-		 * @param {string} timestamp - The purge date timestamp
-		 * @return {string} Formatted purge date
-		 */
 		formatPurgeDate(timestamp) {
 			const date = new Date(timestamp)
 			const year = date.getFullYear()
@@ -620,45 +347,6 @@ export default {
 
 			return `${year}:${month}:${day} ${hours}:${minutes}`
 		},
-		formatBytes,
 	},
 }
 </script>
-
-<style scoped>
-/* Fix checkbox layout in table */
-.tableColumnCheckbox {
-	padding: 8px !important;
-}
-
-.tableColumnCheckbox :deep(.checkbox-radio-switch) {
-	margin: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.tableColumnCheckbox :deep(.checkbox-radio-switch__content) {
-	margin: 0;
-}
-
-/* Row selection styling */
-.table-row-selectable {
-	cursor: pointer;
-}
-
-.table-row-selectable:hover {
-	background-color: var(--color-background-hover);
-}
-
-.table-row-selected {
-	background-color: var(--color-primary-light) !important;
-}
-
-/* Actions button styling */
-.actionsButton > div > button {
-	margin-top: 0px !important;
-	margin-right: 0px !important;
-	padding-right: 0px !important;
-}
-</style>

From 71d36679d1dcdabe88e696897b00bdb8cc8218d6 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Mon, 30 Mar 2026 17:00:18 +0200
Subject: [PATCH 2/2] fixed lint issue

---
 src/sidebars/deleted/DeletedSideBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sidebars/deleted/DeletedSideBar.vue b/src/sidebars/deleted/DeletedSideBar.vue
index 6950cdec7..d913b779a 100644
--- a/src/sidebars/deleted/DeletedSideBar.vue
+++ b/src/sidebars/deleted/DeletedSideBar.vue
@@ -86,7 +86,7 @@ import { deletedStore, navigationStore, registerStore, schemaStore } from '../..
 			<CnStatsPanel
 				:sections="deletionStatsSections"
 				:loading="deletedStore.statisticsLoading">
-				<template #item-icon-topDeleters="{ item }">
+				<template #item-icon-topDeleters>
 					<AccountCircle :size="32" />
 				</template>
 			</CnStatsPanel>