Simplify subscription profile management UI

src/web/styles/features/subscription.css

@@ -61,17 +61,12 @@
 }
 
 .client-profiles-operation {
-  min-height: 42px;
+  min-height: 22px;
   display: flex;
   align-items: center;
-  margin-top: 14px;
-  padding: 8px 12px;
-  border: 1px solid var(--client-border);
+  margin-top: 8px;
   color: var(--client-muted);
   font-size: 9px;
-}
-
-.client-profiles-operation {
   gap: 8px;
 }
 
@@ -84,7 +79,7 @@
 }
 
 .client-profile-list {
-  margin-top: 18px;
+  margin-top: 8px;
   border-top: 1px solid var(--client-border);
 }
 
@@ -95,8 +90,7 @@
 }
 
 .client-profile-group.is-active {
-  background: color-mix(in oklch, var(--client-accent) 5%, transparent);
-  box-shadow: inset 2px 0 var(--client-accent);
+  background: color-mix(in oklch, var(--client-accent) 3%, transparent);
 }
 
 .client-profile-group.is-active .client-profile-title strong,
@@ -198,75 +192,71 @@
 }
 
 .client-profile-refresh,
-.client-profile-menu-toggle {
+.client-profile-delete {
   width: 36px;
   height: 36px;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 400 18px/1 inherit;
   cursor: pointer;
 }
 
+.client-profile-refresh svg,
+.client-profile-delete svg {
+  width: 16px;
+  height: 16px;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.client-profile-refresh svg {
+  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-profile-delete-lid {
+  transform-origin: center 7px;
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 .client-profile-refresh:hover:not(:disabled),
 .client-profile-refresh:focus-visible,
-.client-profile-menu-toggle:hover,
-.client-profile-menu-toggle:focus-visible {
+.client-profile-delete:hover:not(:disabled),
+.client-profile-delete:focus-visible {
   color: var(--client-accent);
 }
 
+.client-profile-refresh:hover:not(:disabled) svg,
+.client-profile-refresh:focus-visible:not(.is-refreshing) svg {
+  transform: rotate(90deg);
+}
+
+.client-profile-delete:hover:not(:disabled) .client-profile-delete-lid,
+.client-profile-delete:focus-visible .client-profile-delete-lid {
+  transform: translateY(-2px) rotate(-8deg);
+}
+
 .client-profile-refresh.is-refreshing {
   color: var(--client-accent);
+}
+
+.client-profile-refresh.is-refreshing svg {
   animation: client-spin 900ms linear infinite;
 }
 
 .client-profile-refresh:disabled,
-.client-profile-menu-toggle:disabled {
+.client-profile-delete:disabled {
   opacity: 0.35;
   cursor: not-allowed;
 }
 
-.client-profile-menu-wrap {
-  position: relative;
-}
-
-.client-profile-menu {
-  position: absolute;
-  top: 34px;
-  right: 0;
-  z-index: 4;
-  width: 150px;
-  display: grid;
-  padding: 6px;
-  border: 1px solid var(--client-border);
-  background: var(--client-bg);
-  box-shadow: 0 16px 38px color-mix(in oklch, var(--client-bg) 80%, transparent);
-}
-
-.client-profile-menu button {
-  min-height: 34px;
-  padding: 0 8px;
-  border: 0;
-  background: transparent;
-  color: var(--client-text);
-  font: 500 9px/1.2 inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.client-profile-menu button:hover,
-.client-profile-menu button:focus-visible {
-  background: color-mix(in oklch, var(--client-accent) 7%, transparent);
-}
-
-.client-profile-menu button.is-danger {
-  color: oklch(0.68 0.15 28);
-}
-
 .client-profile-body {
   max-height: 3200px;
-  padding: 0 0 20px;
+  padding: 0 0 4px;
   overflow: hidden;
   opacity: 1;
   visibility: visible;
@@ -294,7 +284,7 @@
   grid-template-columns: 18px minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
-  padding: 0 10px 0 26px;
+  padding: 0 8px;
   border: 0;
   border-top: 1px solid var(--client-border);
   background: transparent;
@@ -395,8 +385,7 @@
   color: oklch(0.68 0.14 72);
 }
 
-.client-profile-add,
-.client-profile-rename {
+.client-profile-add {
   display: grid;
   gap: 10px;
   padding: 16px 0 20px;
@@ -413,8 +402,7 @@
   text-transform: uppercase;
 }
 
-.client-profile-add input,
-.client-profile-rename input {
+.client-profile-add input {
   min-width: 0;
   height: 40px;
   padding: 0 10px;
@@ -426,30 +414,21 @@
   font: 500 10px/1 inherit;
 }
 
-.client-profile-add input:focus,
-.client-profile-rename input:focus {
+.client-profile-add input:focus {
   border: 1px solid var(--client-accent);
 }
 
-.client-profile-add input[aria-invalid='true'],
-.client-profile-rename input[aria-invalid='true'] {
+.client-profile-add input[aria-invalid='true'] {
   border: 1px solid oklch(0.68 0.15 28);
 }
 
-.client-profile-form-actions,
-.client-profile-rename {
-  grid-template-columns: 1fr auto auto;
-  align-items: center;
-}
-
 .client-profile-form-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }
 
-.client-profile-form-actions button,
-.client-profile-rename button {
+.client-profile-form-actions button {
   min-height: 34px;
   padding: 0 10px;
   border: 0;
@@ -459,29 +438,15 @@
   cursor: pointer;
 }
 
-.client-profile-form-actions button.is-primary,
-.client-profile-rename button[type='submit'] {
+.client-profile-form-actions button.is-primary {
   color: var(--client-accent);
 }
 
-.client-profile-form-actions button:disabled,
-.client-profile-rename button:disabled {
+.client-profile-form-actions button:disabled {
   opacity: 0.35;
   cursor: not-allowed;
 }
 
-.client-profile-rename {
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  padding-left: 18px;
-}
-
-.client-profile-rename > span {
-  grid-column: 1 / -1;
-  min-height: 12px;
-  color: oklch(0.68 0.15 28);
-  font-size: 8px;
-}
-
 .client-subscription-first-run {
   gap: 18px;
 }
@@ -514,7 +479,7 @@
 
   .client-profile-disclosure,
   .client-profile-refresh,
-  .client-profile-menu-toggle,
+  .client-profile-delete,
   .client-profiles-header > button:not(.client-drawer-close) {
     min-height: 44px;
   }
@@ -524,6 +489,8 @@
   .client-profile-chevron,
   .client-profile-body,
   .client-profile-refresh,
+  .client-profile-refresh svg,
+  .client-profile-delete-lid,
   .client-profile-group,
   .client-subscription-sheet > .client-profile-add {
     transition: none;