feat(sidepanel): implement multi-select and delete functionality for account records

- Added a new feature to allow users to select multiple account records and delete them.
- Introduced a filter system to categorize account records based on their status (success, failed, stopped, retry).
- Enhanced the UI with a toolbar for selection and deletion actions, including a confirmation modal for deletions.
- Updated the CSS for better styling of the new toolbar and selection states.
- Implemented backend support for deleting selected records and syncing the remaining records.
- Added unit tests to ensure the new functionality works as expected.

sidepanel/sidepanel.css

@@ -27,6 +27,8 @@
   --green-soft: rgba(22, 163, 74, 0.08);
   --orange: #ea580c;
   --orange-soft: rgba(234, 88, 12, 0.08);
+  --amber: #d97706;
+  --amber-soft: rgba(217, 119, 6, 0.08);
   --red: #dc2626;
   --red-soft: rgba(220, 38, 38, 0.08);
   --cyan: #0891b2;
@@ -62,6 +64,8 @@
   --green-soft: rgba(34, 197, 94, 0.12);
   --orange: #f97316;
   --orange-soft: rgba(249, 115, 22, 0.12);
+  --amber: #f59e0b;
+  --amber-soft: rgba(245, 158, 11, 0.12);
   --red: #ef4444;
   --red-soft: rgba(239, 68, 68, 0.12);
   --cyan: #06b6d4;
@@ -1788,24 +1792,55 @@ header {
   flex-shrink: 0;
 }
 
+.account-records-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
 .account-records-stats {
   display: flex;
   align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
+  gap: 4px;
+  flex-wrap: nowrap;
+  min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.account-records-toolbar-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.account-records-stats::-webkit-scrollbar {
+  display: none;
 }
 
 .account-records-stat {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 999px;
+  gap: 3px;
+  padding: 2px 7px;
   border: 1px solid var(--border-subtle);
+  border-radius: 999px;
   background: color-mix(in srgb, var(--bg-base) 86%, transparent);
+  color: var(--text-secondary);
+  font-family: inherit;
   font-size: 11px;
   font-weight: 700;
-  color: var(--text-secondary);
+  white-space: nowrap;
+  appearance: none;
+  cursor: pointer;
+  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
 }
 
 .account-records-stat strong {
@@ -1813,6 +1848,17 @@ header {
   font-size: 10px;
 }
 
+.account-records-stat:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--blue) 20%, var(--border));
+  color: var(--text-primary);
+}
+
+.account-records-stat.is-active {
+  border-color: color-mix(in srgb, var(--blue) 24%, var(--border));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent);
+}
+
 .account-records-stat.is-success {
   color: var(--green);
   background: var(--green-soft);
@@ -1837,6 +1883,16 @@ header {
   border-color: color-mix(in srgb, var(--amber) 16%, var(--border));
 }
 
+.account-records-toolbar-actions .btn.is-active {
+  background: var(--blue-soft);
+  border-color: color-mix(in srgb, var(--blue) 22%, var(--border));
+  color: var(--blue);
+}
+
+.account-records-toolbar-actions .btn {
+  flex-shrink: 0;
+}
+
 .account-records-list {
   display: flex;
   flex-direction: column;
@@ -1875,6 +1931,22 @@ header {
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--bg-base) 90%, transparent);
   box-shadow: var(--shadow-sm);
+  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
+}
+
+.account-record-item.is-selectable {
+  cursor: pointer;
+}
+
+.account-record-item.is-selectable:hover {
+  border-color: color-mix(in srgb, var(--blue) 18%, var(--border));
+  background: color-mix(in srgb, var(--bg-base) 82%, var(--blue-soft));
+}
+
+.account-record-item.is-selected {
+  border-color: color-mix(in srgb, var(--blue) 26%, var(--border));
+  background: color-mix(in srgb, var(--bg-base) 78%, var(--blue-soft));
+  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
 }
 
 .account-record-item-top,
@@ -1885,6 +1957,32 @@ header {
   gap: 10px;
 }
 
+.account-record-item-email-row {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.account-record-item-check {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.account-record-item-check input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--blue);
+  cursor: pointer;
+}
+
 .account-record-item-email {
   min-width: 0;
   flex: 1;
@@ -2055,7 +2153,7 @@ header {
 .modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1200;
+  z-index: 1400;
   display: flex;
   align-items: center;
   justify-content: center;