feat: reveal available updates beside speed

Collapse the header update action completely when no update exists and animate the green action outward to the left of the fixed bandwidth widget only after a real update is detected.

renderer/styles.css

@@ -2109,6 +2109,29 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   border: 0;
 }
 
+.header-update-slot {
+  width: 0;
+  flex: 0 0 0;
+  height: 32px;
+  margin-right: -4px;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: width .28s cubic-bezier(.22, 1, .36, 1), flex-basis .28s cubic-bezier(.22, 1, .36, 1), margin-right .28s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, visibility 0s linear .28s;
+}
+
+.header-update-slot.is-visible {
+  width: 146px;
+  flex-basis: 146px;
+  margin-right: 0;
+  overflow: visible;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
 .header-update-button {
   position: relative;
   width: 146px;
@@ -2127,7 +2150,16 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   font: inherit;
   font-size: 12px;
   font-weight: 700;
-  transition: background-color .14s, transform .14s;
+  opacity: 0;
+  transform: translateX(14px);
+  pointer-events: none;
+  transition: background-color .14s, transform .28s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
+}
+
+.header-update-slot.is-visible .header-update-button {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
 }
 
 .header-update-button.update-available {
@@ -4040,6 +4072,11 @@ input[type="checkbox"] {
     padding: 0;
   }
 
+  .header-update-slot.is-visible {
+    width: 34px;
+    flex-basis: 34px;
+  }
+
   .header-update-label,
   .version-label {
     display: none;