rework notifications list

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.98.0",
+	"version": "0.99.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/styles/pages-styles.scss

@@ -906,6 +906,10 @@
 					width: 40px;
 					height: 40px;
 					position: relative;
+					border-radius: 6px;
+					overflow: hidden;
+					background: #f5f5f5;
+					box-shadow: 1px 1px 2px #00000030;
 
 					img {
 						object-fit: contain;

src/app/ui/notifications/notifications-list.tsx

@@ -47,44 +47,62 @@ export function NotificationsList() {
 			header: ({ table }) => {
 				const currentPageRows = table.getCoreRowModel().rows;
 				const unreadRowsOnPage = currentPageRows.filter(row => row.original.status !== 'READIED');
-				const allUnreadSelectedOnPage = unreadRowsOnPage.every(row => rowSelection[row.original.id]);
+				const allNotificationSelectedOnPage = currentPageRows.every(row => rowSelection[row.original.id]);
+
+				const unreadIdsSet = new Set(unreadRowsOnPage.map(row => row.original.id));
+				const selectedUnreadIds = Object.keys(rowSelection)
+					.map(Number)
+					.filter(id => unreadIdsSet.has(id));
 
 				return (
 					<div className="select-all-header">
+						{selectedUnreadIds.length > 0 && (
+							<button
+								className="btn btn-primary"
+								onClick={() => {
+									const selectedIds = Object.keys(rowSelection).map(Number);
+									notificationActionHandler(selectedUnreadIds, 'mark-as-read');
+								}}
+							>
+								{t('mark-as-read')} ({selectedUnreadIds.length})
+							</button>
+						)}
+						{Object.keys(rowSelection).length > 0 && (
+							<>
+								<button
+									className="btn btn-primary"
+									onClick={() => {
+										const selectedIds = Object.keys(rowSelection).map(Number);
+										notificationActionHandler(selectedIds, 'remove');
+									}}
+								>
+									{t('remove')} ({Object.keys(rowSelection).length})
+								</button>
+							</>
+						)}
+
 						<button
 							className="btn btn-primary"
 							onClick={() => {
-								if (allUnreadSelectedOnPage) {
+								if (allNotificationSelectedOnPage) {
 
 									const newSelection = { ...rowSelection };
-									unreadRowsOnPage.forEach(row => {
+									currentPageRows.forEach(row => {
 										delete newSelection[row.original.id];
 									});
 									setRowSelection(newSelection);
 								} else {
 
 									const newSelection = { ...rowSelection };
-									unreadRowsOnPage.forEach(row => {
+									currentPageRows.forEach(row => {
 										newSelection[row.original.id] = true;
 									});
 									setRowSelection(newSelection);
 								}
 							}}
 						>
-							{allUnreadSelectedOnPage ? t('deselect') : t('select-all')}
+							{allNotificationSelectedOnPage ? t('deselect') : t('select-all')}
 						</button>
-
-						{Object.keys(rowSelection).length > 0 && (
-							<button
-								className="btn btn-primary"
-								onClick={() => {
-									const selectedIds = Object.keys(rowSelection).map(Number);
-									notificationActionHandler(selectedIds, 'mark-as-read');
-								}}
-							>
-								{t('mark-as-read')} ({Object.keys(rowSelection).length})
-							</button>
-						)}
 					</div>
 				);
 			},
@@ -94,20 +112,23 @@ export function NotificationsList() {
 
 				return (
 					<div className="notification-check">
-						{!isReadied ? (
+						<button
-							<button
+							onClick={() => {
-								onClick={() => {
+								setRowSelection((prev) => {
-									setRowSelection((prev) => ({
+									const newSelection = { ...prev };
-										...prev,
+
-										[row.original.id]: !prev[row.original.id],
+									if (newSelection[row.original.id]) {
-									}));
+										delete newSelection[row.original.id];
-								}}
+									} else {
-							>
+										newSelection[row.original.id] = true;
-								{isSelected && <IconCheck />}
+									}
-							</button>
+
-						) : (
+									return newSelection;
-							<div className="empty-block"></div>
+								});
-						)}
+							}}
+						>
+							{isSelected && <IconCheck />}
+						</button>
 					</div>
 				);
 			},
@@ -182,11 +203,9 @@ export function NotificationsList() {
 			}
 
 			if (response?.success) {
+				setRowSelection({});
 				await queryClient.invalidateQueries({ queryKey: ['activeNotifications'] });
 				await queryClient.invalidateQueries({ queryKey: ['allNotifications'] });
-
-				// Clear selection after successful action
-				setRowSelection({});
 			}
 		} catch (error) {
 			const errorMessage = action === 'mark-as-read' ? 'Failed to mark as read' : 'Failed to remove';
@@ -313,13 +332,19 @@ export function NotificationsList() {
 					<div className="pagination-controls">
 						<button
 							className="arrow"
-							onClick={() => table.firstPage()}
+							onClick={() => {
+								setRowSelection({});
+								table.firstPage();
+							}}
 							disabled={!table.getCanPreviousPage()}
 						>
 							<IconDoubleArrowLeft />
 						</button>
 						<button
-							onClick={() => table.previousPage()}
+							onClick={() => {
+								setRowSelection({});
+								table.previousPage()
+							}}
 							className="arrow"
 							disabled={!table.getCanPreviousPage()}
 						>
@@ -330,7 +355,10 @@ export function NotificationsList() {
 							{getPageNumbers().map((pageNum, index) => (
 								<button
 									key={index}
-									onClick={() => typeof pageNum === 'number' && table.setPageIndex(pageNum)}
+									onClick={() => {
+										setRowSelection({});
+										typeof pageNum === 'number' && table.setPageIndex(pageNum);
+									}}
 									className={pagination.pageIndex === pageNum ? 'current' : 'other'}
 									disabled={pageNum === '...'}
 								>
@@ -340,7 +368,10 @@ export function NotificationsList() {
 						</div>
 
 						<button
-							onClick={() => table.nextPage()}
+							onClick={() => {
+								setRowSelection({});
+								table.nextPage();
+							}}
 							className="arrow"
 							disabled={!table.getCanNextPage()}
 						>
@@ -348,7 +379,10 @@ export function NotificationsList() {
 						</button>
 						<button
 							className="arrow"
-							onClick={() => table.lastPage()}
+							onClick={() => {
+								setRowSelection({});
+								table.lastPage();
+							}}
 							disabled={!table.getCanNextPage()}
 						>
 							<IconDoubleArrowRight />