refactor: replace delete modal with confirm(), compact mobile layout
- Remove custom modal overlay, use native confirm() dialog - Use 🗑 icon instead of 'Delete' text to save space - Tighten mobile button padding (4px 8px) and gaps - Remove chatDeleteConfirm state and related props
This commit is contained in:
Clawdbot
parent
9798b6e8f2
commit
ee9c88e9ac
@ -1371,13 +1371,13 @@
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chat-compose__actions {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chat-compose__actions .btn {
|
||||
padding: 6px 10px;
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-compose__actions .btn-kbd {
|
||||
@ -1500,49 +1500,3 @@
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Delete session confirmation modal */
|
||||
.chat-delete-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.chat-delete-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
max-width: 360px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-delete-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chat-delete-sub {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 16px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chat-delete-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-delete-hint {
|
||||
margin-top: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@ -498,13 +498,10 @@ export function renderApp(state: AppViewState) {
|
||||
assistantName: state.assistantName,
|
||||
assistantAvatar: state.assistantAvatar,
|
||||
// Delete session (disabled for main session)
|
||||
showDeleteConfirm: state.chatDeleteConfirm,
|
||||
isMainSession:
|
||||
state.sessionKey === "main" ||
|
||||
parseAgentSessionKey(state.sessionKey)?.rest === "main",
|
||||
onDeleteClick: () => (state.chatDeleteConfirm = true),
|
||||
onDeleteConfirm: async () => {
|
||||
state.chatDeleteConfirm = false;
|
||||
onDelete: async () => {
|
||||
const { deleteSession } = await import("./controllers/sessions");
|
||||
await deleteSession(state as Parameters<typeof deleteSession>[0], state.sessionKey);
|
||||
// Switch to main session after deletion
|
||||
@ -517,7 +514,6 @@ export function renderApp(state: AppViewState) {
|
||||
});
|
||||
void loadChatHistory(state);
|
||||
},
|
||||
onDeleteCancel: () => (state.chatDeleteConfirm = false),
|
||||
})
|
||||
: nothing}
|
||||
|
||||
|
||||
@ -130,7 +130,6 @@ export class MoltbotApp extends LitElement {
|
||||
@state() chatThinkingLevel: string | null = null;
|
||||
@state() chatQueue: ChatQueueItem[] = [];
|
||||
@state() chatAttachments: ChatAttachment[] = [];
|
||||
@state() chatDeleteConfirm = false;
|
||||
// Sidebar state for tool output viewing
|
||||
@state() sidebarOpen = false;
|
||||
@state() sidebarContent: string | null = null;
|
||||
|
||||
@ -69,11 +69,8 @@ export type ChatProps = {
|
||||
onSplitRatioChange?: (ratio: number) => void;
|
||||
onChatScroll?: (event: Event) => void;
|
||||
// Delete session
|
||||
showDeleteConfirm?: boolean;
|
||||
isMainSession?: boolean;
|
||||
onDeleteClick?: () => void;
|
||||
onDeleteConfirm?: () => void;
|
||||
onDeleteCancel?: () => void;
|
||||
onDelete?: () => void;
|
||||
};
|
||||
|
||||
const COMPACTION_TOAST_DURATION_MS = 5000;
|
||||
@ -246,44 +243,7 @@ export function renderChat(props: ChatProps) {
|
||||
`;
|
||||
|
||||
return html`
|
||||
<section
|
||||
class="card chat"
|
||||
tabindex="-1"
|
||||
@keydown=${(e: KeyboardEvent) => {
|
||||
// Escape to cancel delete confirmation
|
||||
if (e.key === "Escape" && props.showDeleteConfirm && props.onDeleteCancel) {
|
||||
e.preventDefault();
|
||||
props.onDeleteCancel();
|
||||
}
|
||||
// Enter to confirm delete
|
||||
if (e.key === "Enter" && props.showDeleteConfirm && props.onDeleteConfirm) {
|
||||
e.preventDefault();
|
||||
props.onDeleteConfirm();
|
||||
}
|
||||
}}
|
||||
>
|
||||
${props.showDeleteConfirm
|
||||
? html`
|
||||
<div class="chat-delete-overlay" role="dialog" aria-modal="true">
|
||||
<div class="chat-delete-card">
|
||||
<div class="chat-delete-title">Delete this session?</div>
|
||||
<div class="chat-delete-sub">
|
||||
This will permanently delete the session "${props.sessionKey}".
|
||||
</div>
|
||||
<div class="chat-delete-actions">
|
||||
<button class="btn" @click=${props.onDeleteCancel} autofocus>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn danger" @click=${props.onDeleteConfirm}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<div class="chat-delete-hint">Press Enter to delete, Escape to cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
|
||||
<section class="card chat">
|
||||
${props.disabledReason
|
||||
? html`<div class="callout">${props.disabledReason}</div>`
|
||||
: nothing}
|
||||
@ -404,15 +364,19 @@ export function renderChat(props: ChatProps) {
|
||||
>
|
||||
${canAbort ? "Stop" : "New session"}
|
||||
</button>
|
||||
${props.onDeleteClick
|
||||
${props.onDelete
|
||||
? html`
|
||||
<button
|
||||
class="btn danger"
|
||||
?disabled=${!props.connected || isBusy || props.isMainSession}
|
||||
@click=${props.onDeleteClick}
|
||||
@click=${() => {
|
||||
if (confirm(`Delete session "${props.sessionKey}"?`)) {
|
||||
props.onDelete!();
|
||||
}
|
||||
}}
|
||||
title=${props.isMainSession ? "Cannot delete main session" : "Delete this session"}
|
||||
>
|
||||
Delete
|
||||
🗑
|
||||
</button>
|
||||
`
|
||||
: nothing}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user