fix(accounts): isolate action menu interactions

Stop double-click events on account action buttons before they reach editable table rows. Simplify the account menu heading to a single hoster and access-type label without empty identity separators, and cover both interaction and formatting paths.
This commit is contained in:
Sucukdeluxe
2026-08-15 04:55:23 +02:00
parent b6ce49e7ef
commit dd10083aec
4 changed files with 27 additions and 10 deletions
+2 -2
View File
@@ -114,6 +114,7 @@ import {
projectAccountRows,
resolveHistoryRetentionSelection,
sortAccountRows,
formatAccountContextHeading,
type AccountAddOption,
type AccountRowSource,
type SettingsFormViewModel,
@@ -5982,8 +5983,7 @@ export function App(): ReactElement {
y={accountContextMenu.y}
>
<div className="account-context-heading">
<strong>{activeAccountContextRow.hosterLabel}</strong>
<span>{activeAccountContextRow.modeLabel} · {activeAccountContextRow.username}</span>
<strong>{formatAccountContextHeading(activeAccountContextRow.hosterLabel, activeAccountContextRow.modeLabel)}</strong>
</div>
<div className="ctx-menu-sep" />
<button className="ctx-menu-item" onClick={() => { setAccountContextMenu(null); openEditAccountDialog(activeAccountContextRow); }}>
@@ -356,13 +356,14 @@ function AccountRow({
aria-label={`${row.hoster} Aktionen`}
className="settings-account-action-button"
disabled={busy}
onClick={(event) => {
event.stopPropagation();
const rect = event.currentTarget.getBoundingClientRect();
actions.onContextMenu(row.id, rect.right, rect.bottom);
}}
type="button"
></button>
onClick={(event) => {
event.stopPropagation();
const rect = event.currentTarget.getBoundingClientRect();
actions.onContextMenu(row.id, rect.right, rect.bottom);
}}
onDoubleClick={(event) => event.stopPropagation()}
type="button"
></button>
</span>
</div>
);
@@ -72,6 +72,10 @@ export function getAccountTableMinWidth(widths: AccountTableColumnWidths): numbe
return 42 + 64 + ACCOUNT_TABLE_COLUMN_IDS.reduce((sum, id) => sum + widths[id], 0);
}
export function formatAccountContextHeading(hoster: string, mode: string): string {
return `${hoster} | ${mode}`;
}
export function getSettingsSaveLabel(state: SettingsSaveState): string {
switch (state) {
case "dirty":