fix(miniapp): tighten add and delete controls

This commit is contained in:
2026-03-12 11:40:11 +04:00
parent a50b826b40
commit bfe6ae65ae
2 changed files with 46 additions and 25 deletions

View File

@@ -716,10 +716,12 @@ export function HouseScreen(props: Props) {
</header>
<p>{props.copy.utilityBillsEditorBody ?? ''}</p>
<div class="panel-toolbar">
<Button variant="secondary" onClick={props.onOpenAddUtilityBill}>
<IconButton
label={props.copy.addUtilityBillAction ?? ''}
onClick={props.onOpenAddUtilityBill}
>
<PlusIcon />
{props.copy.addUtilityBillAction ?? ''}
</Button>
</IconButton>
</div>
<div class="ledger-list">
{props.cycleState?.utilityBills.length ? (
@@ -762,10 +764,12 @@ export function HouseScreen(props: Props) {
</header>
<p>{props.copy.utilityCategoriesBody ?? ''}</p>
<div class="panel-toolbar">
<Button variant="secondary" onClick={() => props.onOpenCategoryEditor('__new__')}>
<IconButton
label={props.copy.addCategoryAction ?? ''}
onClick={() => props.onOpenCategoryEditor('__new__')}
>
<PlusIcon />
{props.copy.addCategoryAction ?? ''}
</Button>
</IconButton>
</div>
<div class="ledger-list">
<For each={props.adminSettings?.categories ?? []}>
@@ -874,15 +878,18 @@ export function HouseScreen(props: Props) {
}
return (
<div class="modal-action-row">
<Button
variant="danger"
<IconButton
label={
props.deletingUtilityBillId === bill.id
? (props.copy.deletingUtilityBill ?? '')
: (props.copy.deleteUtilityBillAction ?? '')
}
class="ui-button--danger"
disabled={props.deletingUtilityBillId === bill.id}
onClick={() => void props.onDeleteUtilityBill(bill.id)}
>
<TrashIcon />
{props.deletingUtilityBillId === bill.id
? props.copy.deletingUtilityBill
: props.copy.deleteUtilityBillAction}
</Button>
</IconButton>
<div class="modal-action-row__primary">
<Button variant="ghost" onClick={props.onCloseUtilityBillEditor}>
{props.copy.closeEditorAction ?? ''}

View File

@@ -199,12 +199,18 @@ export function LedgerScreen(props: Props) {
return (
<div class="modal-action-row">
<Button variant="danger" onClick={() => void props.onDeletePurchase(entry.id)}>
<IconButton
label={
props.deletingPurchaseId === entry.id
? (props.copy.deletingPurchase ?? '')
: (props.copy.purchaseDeleteAction ?? '')
}
class="ui-button--danger"
disabled={props.deletingPurchaseId === entry.id}
onClick={() => void props.onDeletePurchase(entry.id)}
>
<TrashIcon />
{props.deletingPurchaseId === entry.id
? props.copy.deletingPurchase
: props.copy.purchaseDeleteAction}
</Button>
</IconButton>
<div class="modal-action-row__primary">
<Button variant="ghost" onClick={props.onClosePurchaseEditor}>
{props.copy.closeEditorAction ?? ''}
@@ -400,10 +406,12 @@ export function LedgerScreen(props: Props) {
<Show when={props.readyIsAdmin}>
<p>{props.copy.paymentsAdminBody ?? ''}</p>
<div class="panel-toolbar">
<Button variant="secondary" onClick={props.onOpenAddPayment}>
<IconButton
label={props.copy.paymentsAddAction ?? ''}
onClick={props.onOpenAddPayment}
>
<PlusIcon />
{props.copy.paymentsAddAction ?? ''}
</Button>
</IconButton>
</div>
</Show>
{props.paymentEntries.length === 0 ? (
@@ -529,12 +537,18 @@ export function LedgerScreen(props: Props) {
return (
<div class="modal-action-row">
<Button variant="danger" onClick={() => void props.onDeletePayment(entry.id)}>
<IconButton
label={
props.deletingPaymentId === entry.id
? (props.copy.deletingPayment ?? '')
: (props.copy.paymentDeleteAction ?? '')
}
class="ui-button--danger"
disabled={props.deletingPaymentId === entry.id}
onClick={() => void props.onDeletePayment(entry.id)}
>
<TrashIcon />
{props.deletingPaymentId === entry.id
? props.copy.deletingPayment
: props.copy.paymentDeleteAction}
</Button>
</IconButton>
<div class="modal-action-row__primary">
<Button variant="ghost" onClick={props.onClosePaymentEditor}>
{props.copy.closeEditorAction ?? ''}