Mark pinned shapes in statistics dialog

src/css/ingame_hud/statistics.scss

@@ -18,9 +18,19 @@
             @include S(min-width, 30px);
             color: #fff;
             opacity: 0.25;
-            @include S(margin-left, 1px);
             @include S(border-radius, $globalBorderRadius);
 
+            border-radius: 0;
+            &:first-child {
+                @include S(border-top-left-radius, $globalBorderRadius);
+                @include S(border-bottom-left-radius, $globalBorderRadius);
+            }
+
+            &:last-child {
+                @include S(border-top-right-radius, $globalBorderRadius);
+                @include S(border-bottom-right-radius, $globalBorderRadius);
+            }
+
             &.displayIcons,
             &.displayDetailed,
             &.displaySorted {
@@ -32,7 +42,7 @@
                 &.displaySorted {
                     background-image: uiResource("icons/display_sorted.png");
                     background-size: #{D(11.5px)};
-                    margin-right: 20px;
+                    margin-right: 4px;
                     @include S(padding, 1px, 0);
                 }
             }
@@ -89,16 +99,24 @@
             display: grid;
             @include S(border-radius, $globalBorderRadius);
 
-            @include DarkThemeOverride {
-                background: #222428;
-            }
-
             grid-template-columns: 1fr auto;
             @include S(padding, 5px);
             &:last-child {
                 margin-bottom: 0;
             }
 
+            &.pinned {
+                background: #e3e5e9;
+            }
+
+            @include DarkThemeOverride {
+                background: #222428;
+
+                &.pinned {
+                    background: darken(#222428, 10);
+                }
+            }
+
             canvas.icon {
                 grid-column: 1 / 2;
                 grid-row: 1 / 2;
@@ -108,7 +126,6 @@
 
             .counter {
                 @include SuperSmallText;
-
                 @include S(padding, 0, 3px);
             }
         }
@@ -141,7 +158,6 @@
                 .counter {
                     grid-column: 1 / 2;
                     grid-row: 2 / 3;
-                    background: rgba(0, 10, 20, 0.05);
                     justify-self: end;
                 }
             }

src/js/game/hud/parts/statistics.js

@@ -87,7 +87,7 @@ export class HUDStatistics extends BaseHUDPart {
      */
     setSorted(sorted) {
         this.sorted = sorted;
-        this.dialogInner.setAttribute("data-sorted", sorted);
+        this.dialogInner.setAttribute("data-sorted", String(sorted));
         if (this.visible) {
             this.rerenderFull();
         }
@@ -201,7 +201,16 @@ export class HUDStatistics extends BaseHUDPart {
             }
         }
 
+        const pinnedShapes = this.root.hud.parts.pinnedShapes;
+
         entries.sort((a, b) => {
+            const aPinned = pinnedShapes.isShapePinned(a[0]);
+            const bPinned = pinnedShapes.isShapePinned(b[0]);
+
+            if (aPinned !== bPinned) {
+                return aPinned ? -1 : 1;
+            }
+
             // Sort by shape key for some consistency
             if (!this.sorted || b[1] == a[1]) {
                 return b[0].localeCompare(a[0]);

src/js/game/hud/parts/statistics_handle.js

@@ -74,6 +74,11 @@ export class HUDShapeStatisticsHandle {
             return;
         }
 
+        this.element.classList.toggle(
+            "pinned",
+            this.root.hud.parts.pinnedShapes.isShapePinned(this.definition.getHash())
+        );
+
         switch (dataSource) {
             case enumAnalyticsDataSource.stored: {
                 this.counter.innerText = formatBigNumber(