куча правок

src/webparts/requestPortal/features/myRequests/MyRequestsPanel.module.scss

@@ -14,16 +14,68 @@
 }
 
 .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $sp-2;
   padding: $sp-4 $sp-5;
   border-bottom: 1px solid $gray-200;
 }
 
+.collapseToggle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid $gray-300;
+  border-radius: $r-sm;
+  background: $white;
+  color: $navy-700;
+  cursor: pointer;
+  transition: .16s;
+
+  &:hover {
+    border-color: $gold-400;
+    color: $gold-600;
+  }
+}
+
+.panelCollapsed {
+  align-items: center;
+  padding: $sp-3 0;
+}
+
 .title {
   font-family: $font-serif;
   font-size: 18px;
   color: $navy-900;
 }
 
+.searchWrap {
+  padding: $sp-3 $sp-5 0;
+}
+
+.search {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid $gray-300;
+  border-radius: $r-sm;
+  background: $white;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  color: $gray-900;
+  transition: .18s;
+
+  @include input-focus-gold;
+
+  &::placeholder {
+    color: $gray-400;
+  }
+}
+
 .body {
   flex: 1;
   overflow-y: auto;
@@ -56,16 +108,53 @@
   margin-bottom: $sp-4;
 }
 
-.group + .group {
-  margin-top: $sp-5;
+.pager {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: $sp-3;
+  flex-wrap: wrap;
 }
 
-.groupTitle {
-  font-family: $font-serif;
-  font-size: $fs-label;
-  font-weight: 600;
-  color: $navy-800;
-  margin-bottom: $sp-2;
+.pagerBtn {
+  min-width: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border: 1px solid $gray-200;
+  border-radius: $r-sm;
+  background: $white;
+  color: $gray-700;
+  font-family: $font-sans;
+  font-size: $fs-caption;
+  cursor: pointer;
+  transition: .16s;
+
+  &:hover:not(:disabled) {
+    border-color: $gold-400;
+    color: $gold-600;
+  }
+
+  &:disabled {
+    opacity: .4;
+    cursor: default;
+  }
+}
+
+.pagerBtnActive {
+  background: $navy-800;
+  border-color: $navy-800;
+  color: $white;
+
+  &:hover {
+    border-color: $navy-800 !important;
+    color: $white !important;
+  }
+}
+
+.pagerEllipsis {
+  color: $gray-400;
+  font-size: $fs-caption;
+  padding: 0 2px;
 }
 
 .list {
@@ -103,6 +192,14 @@
   overflow: hidden;
 }
 
+.itemType {
+  color: $gold-600;
+  font-size: $fs-caption;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .03em;
+}
+
 .itemTitle {
   color: $gray-900;
   font-size: $fs-sm;