2c9a1a9d8c4e

fix: pairing method selection — drop redundant body copy, replace twin orange buttons with warm icon cards (audio-wave + monitor), description per option (v4.0.4)

time
2026-06-18 16:15 UTC · 4 months ago
machine
koh2
agent
claude-opus-4-8
session
sync hub pairing ux redesign
parent
27a185c00aef
2 files src/popup/styles/popup.css+24 −5src/popup/views/ChirpSync.tsx+24 −9
src/popup/styles/popup.css+24 −5
@@ -1048,14 +1048,33 @@10481048   display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 8px;10491049 }10501050 .peach-pair-method {1051-  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;1052-  width: 100%; text-align: left;1051+  display: flex; align-items: center; gap: 12px;1052+  width: 100%; text-align: left; cursor: pointer;1053+  padding: 12px; border-radius: 10px;1054+  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1055+  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);1056+  color: var(--peach-text);1057+  font-family: inherit;1058+  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;10531059 }1060+.peach-pair-method:hover {1061+  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);1062+  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 80%, var(--peach-accent) 20%);1063+}1064+.peach-pair-method:active { transform: translateY(1px); }1065+.peach-pair-method-icon {1066+  flex-shrink: 0;1067+  width: 32px; height: 32px;1068+  display: flex; align-items: center; justify-content: center;1069+  border-radius: 8px;1070+  color: var(--peach-text);1071+  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1072+}1073+.peach-pair-method-text {1074+  display: flex; flex-direction: column; gap: 2px; min-width: 0;1075+}10541076 .peach-pair-method-title { font-size: 0.875rem; font-weight: 600; }10551077 .peach-pair-method-sub { font-size: 0.6875rem; color: var(--peach-t2); }1056-.peach-chirp-pair-start--desktop {1057-  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1058-}10591078 10601079 /* Breach badge */10611080 .peach-breach-badge {

view file

src/popup/views/ChirpSync.tsx+24 −9
@@ -618,19 +618,34 @@618618       <div class="peach-chirp-copy-host">619619         <div class="peach-chirp-copy">620620           <div class="peach-chirp-headline">How do you want to pair?</div>621-          <div class="peach-chirp-sub">622-            In the same room? Use a chirp. Pairing with the Peach desktop helper? Enter its code.623-          </div>624621         </div>625622       </div>626623       <div class="peach-pair-method-list">627-        <button class="peach-pair-method peach-chirp-pair-start" onClick={() => startChirpFlow()}>628-          <span class="peach-pair-method-title">Same room</span>629-          <span class="peach-pair-method-sub">Chirp — audio</span>624+        <button class="peach-pair-method" onClick={() => startChirpFlow()}>625+          <span class="peach-pair-method-icon" aria-hidden="true">626+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">627+              <path d="M3 8 L6 8 L10.5 4 L10.5 16 L6 12 L3 12 Z" />628+              <path d="M14 7.5 Q15.6 10 14 12.5" />629+              <path d="M16.4 5.5 Q19 10 16.4 14.5" opacity="0.5" />630+            </svg>631+          </span>632+          <span class="peach-pair-method-text">633+            <span class="peach-pair-method-title">Same room</span>634+            <span class="peach-pair-method-sub">Chirp — plays an inaudible sound</span>635+          </span>630636         </button>631-        <button class="peach-pair-method peach-chirp-pair-start peach-chirp-pair-start--desktop" onClick={() => startDesktopFlow()}>632-          <span class="peach-pair-method-title">Desktop helper</span>633-          <span class="peach-pair-method-sub">enter code</span>637+        <button class="peach-pair-method" onClick={() => startDesktopFlow()}>638+          <span class="peach-pair-method-icon" aria-hidden="true">639+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">640+              <rect x="2" y="4" width="16" height="10" rx="1.4" />641+              <path d="M7 17 L13 17" />642+              <path d="M9 14 L9 17 M11 14 L11 17" />643+            </svg>644+          </span>645+          <span class="peach-pair-method-text">646+            <span class="peach-pair-method-title">Desktop helper</span>647+            <span class="peach-pair-method-sub">Enter the code shown by peach-sync</span>648+          </span>634649         </button>635650       </div>636651       <div class="peach-chirp-action">

view file