generated from nhcarrigan/template
naomi
947e56ef41
- feat: add slash commands - feat: toggle window always on top - fix: save settings button closes settings panel - feat: input history (both text and commands) - feat: add keyboard shortcuts - feat: add confirmation modal when closing connected tabs - fix: better text colours in light mode - fix: handle multiple tabs requesting permission Closes #6 Closes #13 Closes #21 Closes #28 Reviewed-on: #53 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
108 lines
3.1 KiB
Svelte
108 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
isOpen: boolean;
|
|
tabName: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const { isOpen, tabName, onConfirm, onCancel }: Props = $props();
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (!isOpen) return;
|
|
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
onConfirm();
|
|
} else if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
onCancel();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleKeydown} />
|
|
|
|
{#if isOpen}
|
|
<div
|
|
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
|
onclick={onCancel}
|
|
role="button"
|
|
tabindex="0"
|
|
onkeydown={(e) => e.key === " " && onCancel()}
|
|
>
|
|
<div
|
|
class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-md w-full"
|
|
onclick={(e) => e.stopPropagation()}
|
|
onkeydown={(e) => e.stopPropagation()}
|
|
role="dialog"
|
|
aria-labelledby="confirm-title"
|
|
aria-describedby="confirm-message"
|
|
tabindex="-1"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<svg
|
|
class="w-6 h-6 text-yellow-500"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 id="confirm-title" class="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
|
Close Connected Tab?
|
|
</h3>
|
|
<p id="confirm-message" class="text-sm text-[var(--text-secondary)]">
|
|
The tab "{tabName}" is currently connected to Claude. Are you sure you want to close
|
|
it? This will disconnect the session.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-6 justify-end">
|
|
<button
|
|
onclick={onCancel}
|
|
class="px-4 py-2 text-sm font-medium text-gray-300 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onclick={onConfirm}
|
|
class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
|
|
>
|
|
Close Tab
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
[role="dialog"] {
|
|
animation: slideIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
</style>
|