Improve device tag editing and version clients

src/web/styles/features/devices.css

@@ -33,9 +33,7 @@
   text-transform: var(--type-label-transform);
 }
 
-.client-devices-search input,
-.client-devices-tag-create input,
-.client-devices-tag-manager-row input {
+.client-devices-search input {
   min-width: 0;
   height: 32px;
   box-sizing: border-box;
@@ -50,12 +48,36 @@
   text-transform: var(--type-control-transform);
 }
 
-.client-devices-search input:focus,
-.client-devices-tag-create input:focus,
-.client-devices-tag-manager-row input:focus {
+.client-devices-search input:focus {
   border: 1px solid var(--client-accent);
 }
 
+.client-devices-tag-create input,
+.client-devices-tag-manager-row input {
+  min-width: 0;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--client-border);
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  caret-color: var(--client-accent);
+  color: var(--client-text);
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
+  transition: color 180ms ease, border-bottom-color 180ms ease, box-shadow 220ms ease, text-shadow 220ms ease;
+}
+
+.client-devices-tag-create input:focus-visible,
+.client-devices-tag-manager-row input:focus-visible {
+  border-bottom-color: var(--client-accent);
+  box-shadow: 0 1px 0 color-mix(in oklch, var(--client-accent) 58%, transparent);
+  text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 32%, transparent);
+}
+
 .client-devices-filter-group,
 .client-devices-tag-filters {
   display: grid;
@@ -125,7 +147,8 @@
 .client-devices-manage-tags,
 .client-devices-manager-back,
 .client-devices-tag-create button,
-.client-devices-tag-manager-row button,
+.client-devices-tag-manager-row form button,
+.client-devices-tag-edit,
 .client-device-tag-popover button,
 .client-devices-filter-summary button,
 .client-devices-filter-empty button {
@@ -152,7 +175,8 @@
 
 .client-devices-tag-create {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
   gap: 6px;
 }
 
@@ -184,6 +208,9 @@
   height: 26px;
   display: grid;
   place-items: center;
+}
+
+.client-devices-tag-manager-row > button:not(.client-row-delete) {
   color: var(--client-muted);
 }
 
@@ -197,6 +224,15 @@
   stroke-linejoin: round;
 }
 
+.client-devices-tag-edit:hover:not(:disabled),
+.client-devices-tag-edit:focus-visible {
+  color: var(--client-accent);
+}
+
+.client-devices-tag-edit.is-writing svg {
+  animation: client-device-pencil-write 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
 .client-devices-tag-manager-row form {
   grid-column: 1 / -1;
   display: grid;
@@ -1703,14 +1739,7 @@
   to { opacity: 0; transform: translateY(-6px); }
 }
 
-.client-device-tag-popover h3 {
-  margin: 0;
-  font: var(--type-section-title);
-  letter-spacing: var(--type-section-title-tracking);
-  text-transform: var(--type-section-title-transform);
-}
-
-.client-device-tag-popover > p {
+.client-device-tag-popover > p:not(.client-devices-tag-error) {
   margin: 0;
   color: var(--client-muted);
   font: var(--type-control);
@@ -1719,30 +1748,42 @@
 }
 
 .client-device-tag-popover-options {
-  display: grid;
-  gap: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
-.client-device-tag-popover-options label {
-  min-height: 30px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--tag-tone, var(--client-text));
+.client-device-tag-popover-options button {
+  min-height: 28px;
+  padding: 4px 7px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--client-muted);
   font: var(--type-control);
   letter-spacing: var(--type-control-tracking);
   text-transform: var(--type-control-transform);
   cursor: pointer;
+  transition: color 180ms ease, background 180ms ease, filter 260ms ease, opacity 180ms ease;
 }
 
-.client-device-tag-popover-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
+.client-device-tag-popover-options button:hover:not(:disabled),
+.client-device-tag-popover-options button:focus-visible,
+.client-device-tag-popover-options button[aria-pressed="true"] {
+  background: color-mix(in oklch, var(--tag-tone) 10%, transparent);
+  color: var(--tag-tone);
+  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--tag-tone) 32%, transparent));
 }
 
-.client-device-tag-popover-actions button:last-child {
-  color: var(--client-text);
+.client-device-tag-popover-options button:disabled,
+.client-device-tag-popover-options button[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.38;
+}
+
+.client-device-tag-popover-options button[aria-pressed="true"]:disabled,
+.client-device-tag-popover-options button[aria-pressed="true"][aria-disabled="true"] {
+  opacity: 0.78;
 }
 
 @media (max-width: 640px) {