23 changed files with 447 additions and 79 deletions
@ -0,0 +1,194 @@
@@ -0,0 +1,194 @@
|
||||
<script lang="ts"> |
||||
interface Props { |
||||
open: boolean; |
||||
onClose: () => void; |
||||
} |
||||
|
||||
let { open, onClose }: Props = $props(); |
||||
|
||||
const shortcuts = [ |
||||
{ key: '/', description: 'Open search' }, |
||||
{ key: '?', description: 'Show keyboard shortcuts' }, |
||||
{ key: 'j', description: 'Next post/thread' }, |
||||
{ key: 'k', description: 'Previous post/thread' }, |
||||
{ key: 'r', description: 'Reply to selected post' }, |
||||
{ key: 'z', description: 'Zap selected post' }, |
||||
{ key: 'Esc', description: 'Close modal' } |
||||
]; |
||||
</script> |
||||
|
||||
{#if open} |
||||
<div |
||||
class="modal-overlay" |
||||
onclick={(e) => { |
||||
if (e.target === e.currentTarget) onClose(); |
||||
}} |
||||
onkeydown={(e) => { |
||||
if (e.key === 'Escape') { |
||||
e.preventDefault(); |
||||
onClose(); |
||||
} |
||||
}} |
||||
role="dialog" |
||||
aria-modal="true" |
||||
aria-labelledby="shortcuts-title" |
||||
tabindex="-1" |
||||
> |
||||
<div class="modal"> |
||||
<div class="modal-header"> |
||||
<h2 id="shortcuts-title" class="text-xl font-bold">Keyboard Shortcuts</h2> |
||||
<button |
||||
onclick={onClose} |
||||
class="close-button" |
||||
aria-label="Close" |
||||
> |
||||
× |
||||
</button> |
||||
</div> |
||||
|
||||
<div class="shortcuts-list"> |
||||
{#each shortcuts as shortcut} |
||||
<div class="shortcut-item"> |
||||
<kbd class="shortcut-key">{shortcut.key}</kbd> |
||||
<span class="shortcut-description">{shortcut.description}</span> |
||||
</div> |
||||
{/each} |
||||
</div> |
||||
|
||||
<div class="modal-footer"> |
||||
<button |
||||
onclick={onClose} |
||||
class="close-footer-button" |
||||
> |
||||
Close |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{/if} |
||||
|
||||
<style> |
||||
.modal-overlay { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: rgba(0, 0, 0, 0.5); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
z-index: 1000; |
||||
padding: 2rem; |
||||
} |
||||
|
||||
.modal { |
||||
background: var(--fog-post, #ffffff); |
||||
border-radius: 0.5rem; |
||||
padding: 1.5rem; |
||||
width: 100%; |
||||
max-width: 500px; |
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
:global(.dark) .modal { |
||||
background: var(--fog-dark-post, #1f2937); |
||||
} |
||||
|
||||
.modal-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
|
||||
.close-button { |
||||
background: none; |
||||
border: none; |
||||
font-size: 2rem; |
||||
line-height: 1; |
||||
cursor: pointer; |
||||
color: var(--fog-text, #1f2937); |
||||
padding: 0; |
||||
width: 2rem; |
||||
height: 2rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
:global(.dark) .close-button { |
||||
color: var(--fog-dark-text, #f9fafb); |
||||
} |
||||
|
||||
.close-button:hover { |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.shortcuts-list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 1rem; |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
|
||||
.shortcut-item { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 0.75rem; |
||||
border: 1px solid var(--fog-border, #e5e7eb); |
||||
border-radius: 0.25rem; |
||||
background: var(--fog-post, #ffffff); |
||||
} |
||||
|
||||
:global(.dark) .shortcut-item { |
||||
background: var(--fog-dark-post, #1f2937); |
||||
border-color: var(--fog-dark-border, #374151); |
||||
} |
||||
|
||||
.shortcut-key { |
||||
padding: 0.25rem 0.5rem; |
||||
background: var(--fog-highlight, #f3f4f6); |
||||
border: 1px solid var(--fog-border, #e5e7eb); |
||||
border-radius: 0.25rem; |
||||
font-family: monospace; |
||||
font-size: 0.875rem; |
||||
font-weight: 600; |
||||
color: var(--fog-text, #1f2937); |
||||
} |
||||
|
||||
:global(.dark) .shortcut-key { |
||||
background: var(--fog-dark-highlight, #374151); |
||||
border-color: var(--fog-dark-border, #374151); |
||||
color: var(--fog-dark-text, #f9fafb); |
||||
} |
||||
|
||||
.shortcut-description { |
||||
color: var(--fog-text, #1f2937); |
||||
font-size: 0.875rem; |
||||
} |
||||
|
||||
:global(.dark) .shortcut-description { |
||||
color: var(--fog-dark-text, #f9fafb); |
||||
} |
||||
|
||||
.modal-footer { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
.close-footer-button { |
||||
padding: 0.5rem 1rem; |
||||
background: var(--fog-accent, #64748b); |
||||
color: white; |
||||
border: none; |
||||
border-radius: 0.25rem; |
||||
cursor: pointer; |
||||
font-size: 0.875rem; |
||||
} |
||||
|
||||
.close-footer-button:hover { |
||||
opacity: 0.9; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue