<script lang="ts">
import { ui } from "../../stores/ui.svelte.js";
import { sync } from "../../stores/sync.svelte.js";
import { listedShortcuts } from "../../utils/keyboard.js";
const isMac = navigator.platform.toUpperCase().includes("MAC");
const mod = isMac ? "Cmd" : "Ctrl";
const baseShortcuts = listedShortcuts(mod);
const zoomShortcuts = [
{ key: `${mod}++`, action: "Zoom in" },
{ key: `${mod}+-`, action: "Zoom out" },
{ key: `${mod}+0`, action: "Reset zoom" },
];
const shortcuts = sync.isDesktop
? [...baseShortcuts, ...zoomShortcuts]
: baseShortcuts;
function handleOverlayClick(e: MouseEvent) {
if (
(e.target as HTMLElement).classList.contains(
"shortcuts-overlay",
)
) {
ui.activeModal = null;
}
}
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="shortcuts-overlay"
onclick={handleOverlayClick}
onkeydown={(e) => {
if (e.key === "Escape") ui.activeModal = null;
}}
>
<div class="shortcuts-modal">
<div class="shortcuts-header">
<h3 class="shortcuts-title">Keyboard Shortcuts</h3>
<button
class="close-btn"
onclick={() => ui.activeModal = null}
>
×
</button>
</div>
<div class="shortcuts-list">
{#each shortcuts as shortcut}
<div class="shortcut-row">
<kbd class="shortcut-key">{shortcut.key}</kbd>
<span class="shortcut-action">{shortcut.action}</span>
</div>
{/each}
</div>
</div>
</div>
<style>
.shortcuts-overlay {
position: fixed;
inset: 0;
background: var(--vscode-widget-shadow);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.shortcuts-modal {
width: 360px;
background: var(--vscode-sideBar-background);
border: 1px solid var(--vscode-panel-border);
border-radius: var(--wsb-radius-lg);
box-shadow: var(--wb-shadow-md);
overflow: hidden;
}
.shortcuts-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--wb-spacing-12) var(--wb-spacing-16);
border-bottom: 1px solid var(--vscode-panel-border);
}
.shortcuts-title {
font-size: var(--wb-font-size-13);
font-weight: 600;
color: var(--vscode-editor-foreground);
}
.close-btn {
width: var(--wb-control-size-24);
height: var(--wb-control-size-24);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--wb-font-size-16);
color: var(--vscode-disabledForeground);
border-radius: var(--wsb-radius-sm);
}
.close-btn:hover {
background: var(--vscode-list-hoverBackground);
color: var(--vscode-editor-foreground);
}
.shortcuts-list {
padding: var(--wb-spacing-8) 0;
}
.shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--wb-spacing-5) var(--wb-spacing-16);
}
.shortcut-key {
font-family: var(--wsb-font-mono);
font-size: var(--wb-font-size-11);
padding: var(--wb-spacing-1) var(--wb-spacing-6);
border: 1px solid var(--vscode-panel-border);
border-radius: var(--wsb-radius-sm);
background: var(--vscode-input-background);
color: var(--vscode-foreground);
min-width: var(--wb-control-size-60);
text-align: center;
}
.shortcut-action {
font-size: var(--wb-font-size-12);
color: var(--vscode-foreground);
}
</style>