refactor(webui): use central status and action components

webui/src/styles/notifications.css

@@ -65,40 +65,9 @@
   font-weight: 800;
 }
 
-.notifications-icon-button.btn {
-  width: 34px;
-  min-width: 34px;
-  height: 34px;
-  justify-content: center;
-  padding: 0;
-}
-
-.notifications-filter-row {
-  display: flex;
-  gap: 5px;
-  padding: 8px;
-  border-bottom: var(--border-line);
-  overflow-x: auto;
-}
-
-.notifications-filter-row button {
-  min-height: 28px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 0 8px;
-  text-transform: capitalize;
-}
-
-.notifications-filter-row button:hover,
-.notifications-filter-row button.is-active {
-  background: var(--sidebar-hover-bg);
-  color: var(--text-strong);
+.notifications-status-filter {
+  width: calc(100% - 16px);
+  margin: 8px;
 }
 
 .notifications-list {
@@ -230,29 +199,6 @@
   font-weight: 700;
 }
 
-.notifications-status {
-  border-radius: 999px;
-  background: var(--panel-soft);
-  color: var(--text);
-  padding: 3px 8px;
-}
-
-.notifications-status.status-failed {
-  background: var(--danger-soft);
-  color: var(--danger-text);
-}
-
-.notifications-status.status-sent {
-  background: var(--success-soft);
-  color: var(--green);
-}
-
-.notifications-status.status-queued,
-.notifications-status.status-pending {
-  background: var(--warning-bg);
-  color: var(--warning-text);
-}
-
 .notifications-action-link {
   width: max-content;
   max-width: 100%;