Add deprioritized device group

src/web/styles/features/devices.css

@@ -191,6 +191,7 @@
 
 .client-devices-error button,
 .client-device-pin,
+.client-device-deprioritize,
 .client-device-edit {
   padding: 0;
   border: 0;
@@ -213,12 +214,42 @@
   row-gap: 6px;
   padding: 10px 8px;
   border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
+  position: relative;
+}
+
+.client-device.is-group-start {
+  margin-top: 22px;
+}
+
+.client-device-group-heading {
+  position: absolute;
+  top: -17px;
+  left: 8px;
+  color: var(--client-muted);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.client-device:not(.is-group-start) > .client-device-group-heading {
+  display: none;
 }
 
 .client-device.is-pinned {
   --client-device-chart-height: 72px;
 }
 
+.client-device.is-deprioritized {
+  grid-template-rows: 34px;
+  row-gap: 0;
+  padding-block: 6px;
+}
+
+.client-device.is-deprioritized .client-device-main {
+  grid-column: 1 / 4;
+}
+
 .client-device-main {
   grid-column: 2;
   grid-row: 1;
@@ -231,7 +262,7 @@
   padding: 11px 0 0;
 }
 
-.client-device-main > h3 {
+.client-device-main > h4 {
   height: 23px;
   flex: 1 1 auto;
   min-width: 0;
@@ -246,7 +277,7 @@
   white-space: nowrap;
 }
 
-.client-device-main > h3.is-address-only {
+.client-device-main > h4.is-address-only {
   flex: 0 1 auto;
 }
 
@@ -370,7 +401,8 @@
 }
 
 .client-device-edit,
-.client-device-pin {
+.client-device-pin,
+.client-device-deprioritize {
   width: 32px;
   height: 32px;
   display: grid;
@@ -384,7 +416,8 @@
 }
 
 .client-device-edit svg,
-.client-device-pin svg {
+.client-device-pin svg,
+.client-device-deprioritize svg {
   width: 17px;
   height: 17px;
   fill: none;
@@ -398,7 +431,9 @@
 .client-device-edit:hover,
 .client-device-edit:focus-visible,
 .client-device-pin:hover,
-.client-device-pin:focus-visible {
+.client-device-pin:focus-visible,
+.client-device-deprioritize:hover,
+.client-device-deprioritize:focus-visible {
   color: var(--client-accent);
 }
 
@@ -988,7 +1023,8 @@
   cursor: wait;
 }
 
-.client-device-policy-wrap.client-tooltip-anchor > .client-tooltip {
+.client-device-policy-wrap.client-tooltip-anchor > .client-tooltip,
+.client-device-deprioritize-wrap.client-tooltip-anchor > .client-tooltip {
   right: 0;
   left: auto;
   text-transform: none;
@@ -996,10 +1032,41 @@
 }
 
 .client-device-policy-wrap.client-tooltip-anchor:hover > .client-tooltip,
-.client-device-policy-wrap.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip {
+.client-device-policy-wrap.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip,
+.client-device-deprioritize-wrap.client-tooltip-anchor:hover > .client-tooltip,
+.client-device-deprioritize-wrap.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip {
   transform: translate(0, 0);
 }
 
+.client-device-deprioritize-wrap {
+  grid-column: 4;
+  grid-row: 2;
+  width: 34px;
+  height: 34px;
+  position: relative;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+}
+
+.client-device.is-deprioritized .client-device-deprioritize-wrap {
+  grid-row: 1;
+}
+
+.client-device-deprioritize[aria-pressed="true"] {
+  color: var(--client-accent);
+}
+
+.client-device-deprioritize:hover:not(:disabled) svg,
+.client-device-deprioritize:focus-visible svg {
+  transform: translateY(2px);
+}
+
+.client-device-deprioritize[aria-pressed="true"]:hover:not(:disabled) svg,
+.client-device-deprioritize[aria-pressed="true"]:focus-visible svg {
+  transform: translateY(-2px);
+}
+
 .client-devices-error button {
   justify-self: start;
   font-size: 10px;