Refine inline device alias editing

src/web/components/DevicesPanel.jsx

@@ -200,6 +200,8 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const previousScrollTop = useRef(0);
   const movementAnimations = useRef(new Map());
   const previousTraffic = useRef(new Map());
+  const aliasBaseline = useRef({ id: '', value: '' });
+  const aliasWidth = useRef('1px');
   const copyTimer = useRef(null);
   const trafficDeltaTimer = useRef(null);
   const trafficOrder = useRef({ direction: sortDirection, ids: [] });
@@ -346,10 +348,14 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     }
   }
 
-  async function saveAlias(event, device) {
-    event.preventDefault();
-    if (!await updateDevice(device, { alias })) return;
-    setEditingId('');
+  async function saveAlias(device) {
+    const nextAlias = alias.trim();
+    if (aliasBaseline.current.id === device.id && nextAlias === aliasBaseline.current.value.trim()) {
+      setEditingId((current) => current === device.id ? '' : current);
+      return;
+    }
+    if (!await updateDevice(device, { alias: nextAlias })) return;
+    setEditingId((current) => current === device.id ? '' : current);
   }
 
   async function updatePolicy(device, mode) {
@@ -395,9 +401,12 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     copyTimer.current = setTimeout(() => setCopyFeedback(null), COPY_FEEDBACK_MS);
   }
 
-  function startEditing(device) {
+  function startEditing(device, width = 1) {
+    const value = device.alias || device.hostname || '';
+    aliasBaseline.current = { id: device.id, value };
+    aliasWidth.current = `${width}px`;
     setEditingId(device.id);
-    setAlias(device.alias || device.hostname || '');
+    setAlias(value);
   }
 
   return (
@@ -560,56 +569,56 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
               </span>
 
               <div className="client-device-main">
-                {editing ? (
-                  <form className="client-device-alias" onSubmit={(event) => saveAlias(event, device)}>
+                <h3 className={`client-device-name-heading${hasName ? '' : ' is-address-only'}${editing ? ' is-editing' : ''}`}>
+                  {editing ? (
                     <input
+                      className="client-device-alias-input"
                       value={alias}
+                      style={{ '--alias-width': aliasWidth.current }}
                       maxLength="64"
                       autoFocus
                       aria-label="Название устройства"
+                      aria-busy={saving}
+                      disabled={saving}
                       onChange={(event) => setAlias(event.target.value)}
+                      onBlur={() => saveAlias(device)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') event.currentTarget.blur();
+                      }}
                     />
-                    <button type="submit" aria-label="Сохранить название" disabled={saving}>✓</button>
-                    <button type="button" aria-label="Отменить изменение" disabled={saving} onClick={() => setEditingId('')}>×</button>
-                  </form>
-                ) : (
-                  <>
-                    <h3 className={`client-device-name-heading${hasName ? '' : ' is-address-only'}`}>
-                      {hasName && <button
-                        className="client-device-alias-trigger"
-                        type="button"
-                        aria-label={`Изменить название ${title}`}
-                        onClick={() => startEditing(device)}
-                      >{title}</button>}
-                      {hasName && device.ip && <span className="client-device-name-separator" aria-hidden="true">·</span>}
-                      {device.ip ? <button
-                        className={`client-device-ip${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
-                        type="button"
-                        aria-label={`Скопировать IP ${device.ip} устройства ${title}`}
-                        onClick={() => copyDeviceIp(device)}
-                      >{device.ip}</button> : !hasName && <span>Неизвестное устройство</span>}
-                    </h3>
-                    {!hasName && <span className="client-device-edit-wrap client-tooltip-anchor">
-                      <button
-                        className={`client-device-edit${pencilAnimationId === device.id ? ' is-writing' : ''}`}
-                        type="button"
-                        aria-label={`Изменить название ${title}`}
-                        onPointerEnter={() => setPencilAnimationId(device.id)}
-                        onFocus={() => setPencilAnimationId(device.id)}
-                        onClick={() => startEditing(device)}
-                      >
-                        <svg
-                          viewBox="0 0 24 24"
-                          aria-hidden="true"
-                          onAnimationEnd={() => setPencilAnimationId((id) => id === device.id ? '' : id)}
-                        >
-                          <path d="m4 20 4.2-1 10.3-10.3a2 2 0 0 0-2.8-2.8L5.4 16.2 4 20ZM14.5 7.1l2.8 2.8" />
-                        </svg>
-                      </button>
-                      <Tooltip>Изменить название</Tooltip>
-                    </span>}
-                  </>
-                )}
+                  ) : hasName && <button
+                    className="client-device-alias-trigger"
+                    type="button"
+                    aria-label={`Изменить название ${title}`}
+                    onClick={(event) => startEditing(device, event.currentTarget.getBoundingClientRect().width)}
+                  >{title}</button>}
+                  {(hasName || (editing && Boolean(alias))) && device.ip && <span className="client-device-name-separator" aria-hidden="true">·</span>}
+                  {device.ip ? <button
+                    className={`client-device-ip${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
+                    type="button"
+                    aria-label={`Скопировать IP ${device.ip} устройства ${title}`}
+                    onClick={() => copyDeviceIp(device)}
+                  >{device.ip}</button> : !hasName && !editing && <span>Неизвестное устройство</span>}
+                </h3>
+                {!hasName && !editing && <span className="client-device-edit-wrap client-tooltip-anchor">
+                  <button
+                    className={`client-device-edit${pencilAnimationId === device.id ? ' is-writing' : ''}`}
+                    type="button"
+                    aria-label={`Изменить название ${title}`}
+                    onPointerEnter={() => setPencilAnimationId(device.id)}
+                    onFocus={() => setPencilAnimationId(device.id)}
+                    onClick={() => startEditing(device)}
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                      onAnimationEnd={() => setPencilAnimationId((id) => id === device.id ? '' : id)}
+                    >
+                      <path d="m4 20 4.2-1 10.3-10.3a2 2 0 0 0-2.8-2.8L5.4 16.2 4 20ZM14.5 7.1l2.8 2.8" />
+                    </svg>
+                  </button>
+                  <Tooltip>Изменить название</Tooltip>
+                </span>}
                 <span className={`client-device-last-seen${online ? ' is-online' : ''}`} tabIndex="0">
                   <time
                     dateTime={device.lastSeenAt}

src/web/styles.css

@@ -908,8 +908,7 @@ p {
 
 .client-devices-error button,
 .client-device-pin,
-.client-device-edit,
-.client-device-alias button {
+.client-device-edit {
   padding: 0;
   border: 0;
   background: transparent;
@@ -969,6 +968,7 @@ p {
 }
 
 .client-device-alias-trigger,
+.client-device-alias-input,
 .client-device-ip {
   min-width: 0;
   padding: 0;
@@ -989,6 +989,29 @@ p {
   cursor: text;
 }
 
+.client-device-alias-input {
+  width: var(--alias-width);
+  min-width: 1px;
+  max-width: 100%;
+  flex: 0 1 auto;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  caret-color: var(--client-accent);
+  font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  letter-spacing: -0.03em;
+  animation: client-device-alias-edit-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes client-device-alias-edit-in {
+  from {
+    color: var(--client-accent);
+    filter: blur(2px);
+    text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 48%, transparent);
+  }
+}
+
 .client-device-alias-trigger:hover,
 .client-device-alias-trigger:focus-visible {
   color: var(--client-accent);
@@ -1624,36 +1647,6 @@ p {
   transform: translate(0, 0);
 }
 
-.client-device-alias {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 32px 32px;
-  align-items: center;
-  gap: 3px;
-}
-
-.client-device-alias input {
-  min-width: 0;
-  padding: 5px 0;
-  border: 0;
-  border-bottom: 1px solid var(--client-border);
-  outline: 0;
-  background: transparent;
-  color: var(--client-text);
-  font-size: 14px;
-}
-
-.client-device-alias input:focus {
-  border-color: var(--client-accent);
-}
-
-.client-device-alias button {
-  width: 32px;
-  height: 32px;
-  font-size: 16px;
-}
-
 .client-devices-error button {
   justify-self: start;
   font-size: 10px;
@@ -4921,6 +4914,7 @@ p {
   .client-device-policy,
   .client-device-policy svg,
   .client-device-alias-trigger,
+  .client-device-alias-input,
   .client-device-ip,
   .client-device-traffic-value > span,
   .client-device-traffic-breakdown,