Simplify subscription profile management UI

src/shared/versions.ts

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.23.2',
-  gatewayClient: '0.24.2',
+  macClient: '0.23.3',
+  gatewayClient: '0.24.3',
   gatewayBackend: '0.24.0',
 });
 

src/web/App.tsx

@@ -248,13 +248,6 @@ export function App() {
               'subscription',
               label,
             )}
-            onRenameProfile={(profileId: string, label: string) => run(
-              'profileRename',
-              () => api.profiles.rename(profileId, label, revisionRef.current),
-              'subscription',
-              profileId,
-              profileId,
-            )}
             onSelectProfileServer={(profileId: string, serverId: string) => run(
               'profileSelect',
               () => api.profiles.selectServer(profileId, serverId, revisionRef.current),

src/web/components/ClientOverviewPage.tsx

@@ -8,6 +8,7 @@ import React, {
 import {
   copyText,
   localProxyUrls,
+  subscriptionDomain,
 } from '../utils/clientControls.js';
 import {
   operationBlocked,
@@ -103,7 +104,6 @@ interface ClientOverviewPageProps {
   operations?: OperationRegistrySnapshot;
   error: UiError | null;
   onAddProfile: (label: string, url: string) => Promise<unknown>;
-  onRenameProfile: (profileId: string, label: string) => Promise<unknown>;
   onSelectProfileServer: (profileId: string, serverId: string) => Promise<unknown>;
   onActivateProfile: (profileId: string) => Promise<unknown>;
   onRefreshProfile: (profileId: string) => Promise<unknown>;
@@ -410,7 +410,6 @@ export function ClientOverviewPage({
   operations = {},
   error,
   onAddProfile,
-  onRenameProfile,
   onSelectProfileServer,
   onActivateProfile,
   onRefreshProfile,
@@ -493,7 +492,6 @@ export function ClientOverviewPage({
     isGateway,
     gatewayDirect,
     onAdd: onAddProfile,
-    onRename: onRenameProfile,
     onRefresh: onRefreshProfile,
     onForget: onForgetProfile,
     onActivate: onActivateProfile,
@@ -608,15 +606,15 @@ export function ClientOverviewPage({
     ? 'Gateway · сервер не определён'
     : connected
       ? appliedProfile && appliedServer
-        ? `${appliedProfile.label} · ${appliedServer.label}`
+        ? `${subscriptionDomain(appliedProfile.subscription.host)} · ${appliedServer.label}`
         : 'VPN · сервер не определён'
     : desiredProfile && desiredServer
-      ? `Выбран: ${desiredProfile.label} · ${desiredServer.label}`
+      ? `Выбран: ${subscriptionDomain(desiredProfile.subscription.host)} · ${desiredServer.label}`
       : 'Сервер не выбран';
   const switchIdentity = gatewayDirect
     ? 'Данные применённого сервера Gateway недоступны'
     : switchingServer && operationProfile && operationServer
-      ? `Переключаем на ${operationProfile.label} · ${operationServer.label}`
+      ? `Переключаем на ${subscriptionDomain(operationProfile.subscription.host)} · ${operationServer.label}`
       : '';
 
   return (

src/web/features/servers/ServerPicker.tsx

@@ -93,7 +93,7 @@ function ServerCheckButton({
   onClick: () => void;
 }) {
   return <button
-    className={`client-server-check client-tooltip-anchor${checking ? ' is-checking' : ''}`}
+    className={`client-server-check${checking ? ' is-checking' : ''}`}
     type="button"
     aria-label={checking ? 'Проверяем пинг серверов' : 'Проверить пинг серверов'}
     disabled={checking || disabled}
@@ -102,7 +102,7 @@ function ServerCheckButton({
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
     </svg>
-    <span className="client-tooltip" role="tooltip">{checking ? 'Проверяем пинг…' : 'Проверить пинг'}</span>
+    <span className="client-server-check-label">{checking ? 'Проверяем пинг…' : 'Проверить пинг'}</span>
   </button>;
 }
 

src/web/features/subscription/SubscriptionFeature.tsx

@@ -40,15 +40,12 @@ interface SubscriptionFeatureOptions {
   operations: OperationRegistrySnapshot;
   error?: ProfileError | null;
   onAdd: (label: string, url: string) => Promise<unknown>;
-  onRename: (profileId: string, label: string) => Promise<unknown>;
   onRefresh: (profileId: string) => Promise<unknown>;
   onForget: (profileId: string, mode: 'delete' | 'stop-and-delete') => Promise<unknown>;
   onActivate: (profileId: string) => Promise<unknown>;
   onDismissError: () => void;
 }
 
-const foldLabel = (value: string) => value.trim().toLocaleLowerCase('ru-RU');
-
 function operationText(key: OperationKey) {
   return ({
     profileAdd: 'Добавляем подписку…',
@@ -74,7 +71,6 @@ export function useSubscriptionFeature({
   operations,
   error,
   onAdd,
-  onRename,
   onRefresh,
   onForget,
   onActivate,
@@ -84,11 +80,7 @@ export function useSubscriptionFeature({
   const [expanded, setExpanded] = useState<string[]>([]);
   const [visited, setVisited] = useState<string[]>([]);
   const [adding, setAdding] = useState(profiles.length === 0);
-  const [label, setLabel] = useState('');
   const [url, setUrl] = useState('');
-  const [renamingId, setRenamingId] = useState('');
-  const [renameLabel, setRenameLabel] = useState('');
-  const [menuId, setMenuId] = useState('');
   const [deleteId, setDeleteId] = useState('');
   const [refreshingIds, setRefreshingIds] = useState<string[]>([]);
   const [revealVersions, setRevealVersions] = useState<Record<string, number>>({});
@@ -101,17 +93,10 @@ export function useSubscriptionFeature({
   deleteIdRef.current = deleteId;
 
   const normalizedUrl = url.trim();
-  const normalizedLabel = label.trim();
-  const duplicateLabel = Boolean(normalizedLabel && profiles.some(
-    (profile) => foldLabel(profile.label) === foldLabel(normalizedLabel),
-  ));
   const addError = !error?.profileId && error?.context === 'subscription' ? error : null;
   const validationStatus = !normalizedUrl
     ? 'idle'
     : isSubscriptionUrlValid(normalizedUrl) ? 'valid' : 'invalid';
-  const renameDuplicate = Boolean(renameLabel.trim() && profiles.some((profile) => (
-    profile.id !== renamingId && foldLabel(profile.label) === foldLabel(renameLabel)
-  )));
   const deleteProfile = profiles.find((profile) => profile.id === deleteId) || null;
   const deleteStopsVpn = connected && selection.appliedProfileId === deleteId;
   const activeOperation = (Object.entries(operations) as Array<[
@@ -154,7 +139,6 @@ export function useSubscriptionFeature({
         panelRef.current?.contains(target) || toggleRef.current?.contains(target)
       )) return;
       setOpen(false);
-      setMenuId('');
     };
     document.addEventListener('pointerdown', closeDrawer);
     document.addEventListener('keydown', closeDrawer);
@@ -169,7 +153,6 @@ export function useSubscriptionFeature({
   }, [open]);
 
   function resetAdd() {
-    setLabel('');
     setUrl('');
     if (profiles.length) setAdding(false);
     if (profiles.length) requestAnimationFrame(() => (
@@ -178,31 +161,17 @@ export function useSubscriptionFeature({
   }
 
   async function addProfile() {
-    if (!normalizedLabel || duplicateLabel || validationStatus !== 'valid') return;
-    if (!await onAdd(normalizedLabel, normalizedUrl)) return;
+    if (validationStatus !== 'valid') return;
+    const host = new URL(normalizedUrl).hostname;
+    const usedLabels = new Set(profiles.map((profile) => profile.label.toLocaleLowerCase('ru-RU')));
+    let label = host;
+    for (let suffix = 2; usedLabels.has(label.toLocaleLowerCase('ru-RU')); suffix += 1) {
+      label = `${host} ${suffix}`;
+    }
+    if (!await onAdd(label, normalizedUrl)) return;
     resetAdd();
   }
 
-  function startRename(profile: ProfileSnapshot) {
-    setMenuId('');
-    setRenamingId(profile.id);
-    setRenameLabel(profile.label);
-    onDismissError();
-  }
-
-  function cancelRename() {
-    const profileId = renamingId;
-    setRenamingId('');
-    requestAnimationFrame(() => document.getElementById(`client-profile-menu-${profileId}`)?.focus());
-  }
-
-  async function saveRename() {
-    const next = renameLabel.trim();
-    if (!next || renameDuplicate) return;
-    if (!await onRename(renamingId, next)) return;
-    cancelRename();
-  }
-
   async function refresh(profileId: string) {
     const startedAt = performance.now();
     setRefreshingIds((current) => current.includes(profileId) ? current : [...current, profileId]);
@@ -225,7 +194,6 @@ export function useSubscriptionFeature({
     if (!deleteProfile) return;
     if (!await onForget(deleteProfile.id, deleteStopsVpn ? 'stop-and-delete' : 'delete')) return;
     setDeleteId('');
-    setMenuId('');
   }
 
   function toggleProfile(profileId: string) {
@@ -247,15 +215,9 @@ export function useSubscriptionFeature({
     expanded,
     visited,
     adding,
-    label,
     url,
     validationStatus,
-    duplicateLabel,
     addError,
-    renamingId,
-    renameLabel,
-    renameDuplicate,
-    menuId,
     deleteProfile,
     deleteStopsVpn,
     activeOperation,
@@ -266,30 +228,22 @@ export function useSubscriptionFeature({
     closeRef,
     labelRef,
     addBlocked: operationBlocked(operations, 'profileAdd'),
-    renameBlocked: operationBlocked(operations, 'profileRename'),
     refreshBlocked: operationBlocked(operations, 'profileRefresh'),
     deleteBlocked: operationBlocked(operations, 'profileDelete'),
     activateBlocked: operationBlocked(operations, 'profileActivate'),
     toggle: () => setOpen((current) => !current),
-    close: () => { setOpen(false); setMenuId(''); },
+    close: () => setOpen(false),
     showAdd: () => {
       setAdding(true);
-      setMenuId('');
       onDismissError();
     },
     cancelAdd: resetAdd,
-    setLabel: (value: string) => { setLabel(value); onDismissError(); },
     setUrl: (value: string) => {
       setUrl(value);
       onDismissError();
     },
     addProfile,
     toggleProfile,
-    startRename,
-    setRenameLabel,
-    cancelRename,
-    saveRename,
-    toggleMenu: (profileId: string) => setMenuId((current) => current === profileId ? '' : profileId),
     requestDelete: (profileId: string) => setDeleteId(profileId),
     cancelDelete: () => setDeleteId(''),
     confirmDelete,
@@ -324,10 +278,8 @@ export function SubscriptionToggle({
 }
 
 function AddProfileForm({ feature }: { feature: SubscriptionFeatureController }) {
-  const message = feature.duplicateLabel
-    ? 'Такое имя уже используется.'
-    : feature.validationStatus === 'invalid'
-      ? ERROR_DEFINITIONS.SUBSCRIPTION_INVALID.message
+  const message = feature.validationStatus === 'invalid'
+    ? ERROR_DEFINITIONS.SUBSCRIPTION_INVALID.message
     : feature.addError?.message || '';
   return <form
     className="client-profile-add"
@@ -337,20 +289,10 @@ function AddProfileForm({ feature }: { feature: SubscriptionFeatureController })
       feature.addProfile();
     }}
   >
-    <label>
-      <span>Название</span>
-      <input
-        ref={feature.labelRef}
-        value={feature.label}
-        maxLength={48}
-        placeholder="Например, Личный"
-        aria-invalid={feature.duplicateLabel}
-        onChange={(event) => feature.setLabel(event.target.value)}
-      />
-    </label>
     <label>
       <span>Ссылка подписки</span>
       <input
+        ref={feature.labelRef}
         type="url"
         inputMode="url"
         value={feature.url}
@@ -367,7 +309,7 @@ function AddProfileForm({ feature }: { feature: SubscriptionFeatureController })
       <button
         className="is-primary"
         type="submit"
-        disabled={feature.addBlocked || !feature.label.trim() || feature.duplicateLabel || feature.validationStatus !== 'valid'}
+        disabled={feature.addBlocked || feature.validationStatus !== 'valid'}
       >Добавить</button>
     </div>
   </form>;
@@ -420,6 +362,10 @@ function ProfileGroup({
       ? new Date(profile.subscription.fetchedAt).toLocaleString('ru-RU', { dateStyle: 'short', timeStyle: 'short' })
       : 'предыдущей загрузки'}.`
     : '');
+  const profileDomain = subscriptionDomain(profile.subscription.host);
+  const profileDetails = `Серверов: ${profile.servers.length}${profile.subscription.fetchedAt
+    ? ` · обновлено ${new Date(profile.subscription.fetchedAt).toLocaleDateString('ru-RU')}`
+    : ''}`;
   return <section className={`client-profile-group${expanded ? ' is-expanded' : ''}${applied ? ' is-active' : ''}`}>
     <div className="client-profile-header">
       <button
@@ -432,10 +378,10 @@ function ProfileGroup({
         <span className="client-profile-chevron" aria-hidden="true">›</span>
         <span className="client-profile-title">
           <span>
-            <strong>{profile.label}</strong>
+            <strong>{profileDomain}</strong>
             {(applied || desired) && <em>{applied ? 'АКТИВНА' : 'ВЫБРАНА'}</em>}
           </span>
-          <small>{subscriptionDomain(profile.subscription.host)}</small>
+          <small>{profileDetails}</small>
         </span>
       </button>
       {canActivate ? <button
@@ -447,48 +393,28 @@ function ProfileGroup({
       <button
         className={`client-profile-refresh${refreshing ? ' is-refreshing' : ''}`}
         type="button"
-        aria-label={`Обновить подписку ${profile.label}`}
+        aria-label={`Обновить подписку ${profileDomain}`}
         disabled={feature.refreshBlocked || refreshing}
         onClick={() => feature.refresh(profile.id)}
-      >↻</button>
-      <div className="client-profile-menu-wrap">
-        <button
-          id={`client-profile-menu-${profile.id}`}
-          className="client-profile-menu-toggle"
-          type="button"
-          aria-label={`Действия с подпиской ${profile.label}`}
-          aria-expanded={feature.menuId === profile.id}
-          onClick={() => feature.toggleMenu(profile.id)}
-        >⋮</button>
-        {feature.menuId === profile.id && <div className="client-profile-menu">
-          <button type="button" onClick={() => feature.startRename(profile)}>Переименовать</button>
-          <button type="button" className="is-danger" onClick={() => feature.requestDelete(profile.id)}>Удалить</button>
-        </div>}
-      </div>
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
+        </svg>
+      </button>
+      <button
+        className="client-profile-delete"
+        type="button"
+        aria-label={`Удалить подписку ${profileDomain}`}
+        disabled={feature.deleteBlocked}
+        onClick={() => feature.requestDelete(profile.id)}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path className="client-profile-delete-lid" d="M8 7V5h8v2m-11 0h14" />
+          <path d="M7 7l1 13h8l1-13M10 10v7m4-7v7" />
+        </svg>
+      </button>
     </div>
 
-    {feature.renamingId === profile.id && <form
-      className="client-profile-rename"
-      onSubmit={(event) => { event.preventDefault(); feature.saveRename(); }}
-    >
-      <input
-        autoFocus
-        value={feature.renameLabel}
-        maxLength={48}
-        aria-label="Новое название подписки"
-        aria-invalid={feature.renameDuplicate}
-        onChange={(event) => feature.setRenameLabel(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key !== 'Escape') return;
-          event.stopPropagation();
-          feature.cancelRename();
-        }}
-      />
-      <button type="submit" disabled={feature.renameBlocked || !feature.renameLabel.trim() || feature.renameDuplicate}>Сохранить</button>
-      <button type="button" onClick={feature.cancelRename}>Отмена</button>
-      <span role="status">{feature.renameDuplicate ? 'Такое имя уже используется.' : ''}</span>
-    </form>}
-
     {localStatus && <div className="client-profile-local-status" role="status">{localStatus}</div>}
 
     {!expanded && visibleServer && <button
@@ -586,7 +512,7 @@ export function SubscriptionDeleteDialog({ feature }: { feature: SubscriptionFea
     open={Boolean(feature.deleteProfile)}
     id="delete-subscription"
     kicker="Необратимое действие"
-    title={`Удалить «${feature.deleteProfile?.label || ''}»?`}
+    title={`Удалить «${subscriptionDomain(feature.deleteProfile?.subscription.host)}»?`}
     description={feature.deleteStopsVpn
       ? 'Эта подписка сейчас работает. Harbor остановит VPN и удалит её одной операцией.'
       : 'Подписка и её локальные настройки будут удалены. Работающий VPN другой подписки не изменится.'}

src/web/styles/features/servers.css

@@ -231,6 +231,10 @@
   transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.client-server-check-label {
+  display: none;
+}
+
 .client-server-check.is-checking {
   color: var(--client-accent);
   opacity: 1;
@@ -571,8 +575,7 @@
   order: 2;
   grid-template-columns: auto 1fr;
   grid-template-rows: 40px;
-  margin-top: 6px;
-  border-top: 1px solid var(--client-border);
+  margin-top: 0;
 }
 
 .client-profile-body .client-server-toolbar-title {
@@ -588,10 +591,11 @@
   padding: 0 8px;
 }
 
-.client-profile-body .client-server-check::after {
-  content: 'ПРОВЕРИТЬ ПИНГ';
+.client-profile-body .client-server-check-label {
+  display: inline;
   font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 .client-profile-body .client-server-mode-toggle {
@@ -619,8 +623,7 @@
 }
 
 .client-profile-body .client-server-row.is-selected {
-  background: color-mix(in oklch, var(--client-accent) 7%, transparent);
-  box-shadow: inset 2px 0 var(--client-accent);
+  background: color-mix(in oklch, var(--client-accent) 5%, transparent);
 }
 
 .client-profile-body .client-server-row .client-server {
@@ -654,6 +657,10 @@
   text-align: left;
 }
 
+.client-profile-body .client-server strong {
+  font-size: 10px;
+}
+
 .client-profile-body .client-server small {
   grid-column: 3;
   font-size: 8px;

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;