shortcuts: board arrow-nav, enter→preview→edit, help screen polish, n/a/f/j hotkeys
Board arrow-key card navigation (public/js/app.js):
* ↑/↓/←/→ on the board (body focus, no overlay) move a single-card
focus cursor (.card-focused, accent2 outline) through the visible
card grid. Column count is computed live from the first row's
offsetTop so it tracks the CSS grid columns at any viewport width.
* First arrow press focuses the first card; subsequent presses move
in the grid. Focused card scrolls into view (smooth, nearest).
* Enter on a focused card → openDetail (preview). Focus cleared.
* Enter in detail view → closeDetail + openModal (editor). Card ref
is captured before closeDetail nulls state.viewingCard.
* Click anywhere → focus cleared. Re-renders restore focus via
window._restoreCardFocus() called from board.js renderBoard().
CSS (public/css/style.css):
* .card-focused: accent2 outline + glow, visually distinct from
.card-selected (accent, multi-select) and .preview-active.
* .shortcut-table kbd keycaps: JetBrains Mono font (not pixel),
10px, 3D raised look with gradient + bottom border + inner
highlight + shadow.
* Responsive shortcut grid: 3 cols > 900px, 2 cols > 640px, 1 col.
New bare-key shortcuts (public/js/app.js):
* n → openModal(null) (new card, same as the + button)
* a → activateBucket('all')
* f → activateBucket('favorites')
* j → open today's journal card (find by YYYY-MM-DD prefix in
state.cards), or create a new one (switch to journal view, open
empty editor which auto-fills the date title)
Ctrl+N quick capture (public/js/app.js):
* Now sends bucket_id: state.activeBucket on the POST (unless the
active view is a virtual filter like all/current/etc., in which
case bucket_id stays null). Cards captured while viewing a user
bucket land directly in that bucket.
Shortcuts help screen (public/index.php):
* max-w-4xl, 3-column grid layout.
* Complete shortcut inventory across all modules:
- Navigation: a/f/j/n/t/c/m, 1-9, Tab/Shift+Tab, /
- Global: Ctrl+K/N/Z, Esc, F1, ?, Del
- Editor: Ctrl+S, Ctrl+Shift+S, Ctrl+Enter, Tab, Alt+↑↓,
Shift+Alt+↑↓, Enter (list continue), [[ (link ac), # (tag ac),
?snippet
- Search: ↑↓ navigate, Enter open, Esc close
- Board+Detail: arrows focus, Enter→preview, Enter→editor,
←→ group nav, click/dbl/right/ctrl+click, drag edge/center
- Canvas: b/e/l/r/o/f/t tool shortcuts, ⌫ delete
- Mail: ⌫ delete selected, Shift+⌫ skip confirm
* kbd elements use normal font (JetBrains Mono) instead of pixel.
* Help overlay's old shortcuts section replaced with a one-liner
pointing to ? for the full reference.
* #shortcuts added to runner.js closeAll() list.
chore: bump version to 0.9.12
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.6 committed
1 parent
c8835825e7
commit
7c113fd5ab
6 files changed
+322
-10
No files matched your search
+111
-7
@@ -1322,10 +1322,120 @@ if (str_starts_with($route, '/api/')) {
|
||||
</div>
|
||||
<div id="footer-count" class="font-pixel text-[10px] text-t-dim whitespace-nowrap absolute left-1/2 -translate-x-1/2"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="shortcuts-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-keyboard text-sm"></i><span class="font-pixel text-[10px]">Keys</span></button>
|
||||
<button id="help-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-question text-sm"></i><span class="font-pixel text-[10px]">Help</span></button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Shortcuts (?) -->
|
||||
<div class="overlay fixed inset-0 z-[95] flex justify-center items-start pt-12 pb-12 px-8" style="background:var(--t-overlay)" id="shortcuts">
|
||||
<div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-4xl max-h-full overflow-y-auto">
|
||||
<div class="flex items-center gap-3 px-6 py-4 border-b border-t-border sticky top-0 bg-t-surface z-[1]">
|
||||
<i class="ph ph-keyboard text-t-accent text-base"></i>
|
||||
<h2 class="font-pixel text-sm text-t-accent">keyboard shortcuts</h2>
|
||||
<div class="flex-1"></div>
|
||||
<button id="shortcuts-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Close</span></button>
|
||||
</div>
|
||||
<div class="p-6 text-sm text-t-text" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;">
|
||||
<!-- Column 1 -->
|
||||
<div class="space-y-5">
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">navigation</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>A</kbd></td><td>all cards</td></tr>
|
||||
<tr><td><kbd>F</kbd></td><td>favorites</td></tr>
|
||||
<tr><td><kbd>J</kbd></td><td>today's journal</td></tr>
|
||||
<tr><td><kbd>N</kbd></td><td>new card</td></tr>
|
||||
<tr><td><kbd>T</kbd></td><td>tag quick-pick</td></tr>
|
||||
<tr><td><kbd>C</kbd></td><td>calendar</td></tr>
|
||||
<tr><td><kbd>M</kbd></td><td>mail</td></tr>
|
||||
<tr><td><kbd>1</kbd> – <kbd>9</kbd></td><td>Nth user bucket</td></tr>
|
||||
<tr><td><kbd>⇥</kbd></td><td>next bucket</td></tr>
|
||||
<tr><td><kbd>⇧</kbd> <kbd>⇥</kbd></td><td>prev bucket</td></tr>
|
||||
<tr><td><kbd>/</kbd></td><td>search</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">global</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>⌃</kbd> <kbd>K</kbd></td><td>search</td></tr>
|
||||
<tr><td><kbd>⌃</kbd> <kbd>N</kbd></td><td>quick capture (in bucket)</td></tr>
|
||||
<tr><td><kbd>⌃</kbd> <kbd>Z</kbd></td><td>undo</td></tr>
|
||||
<tr><td><kbd>Esc</kbd></td><td>close overlay</td></tr>
|
||||
<tr><td><kbd>F1</kbd></td><td>help</td></tr>
|
||||
<tr><td><kbd>?</kbd></td><td>this screen</td></tr>
|
||||
<tr><td><kbd>Del</kbd></td><td>delete selected</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Column 2 -->
|
||||
<div class="space-y-5">
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">editor</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>⌃</kbd> <kbd>S</kbd></td><td>save</td></tr>
|
||||
<tr><td><kbd>⌃</kbd> <kbd>⇧</kbd> <kbd>S</kbd></td><td>save + close</td></tr>
|
||||
<tr><td><kbd>⌃</kbd> <kbd>↵</kbd></td><td>save + close</td></tr>
|
||||
<tr><td><kbd>⇥</kbd></td><td>indent / title→body</td></tr>
|
||||
<tr><td><kbd>Alt</kbd> <kbd>↑</kbd> <kbd>↓</kbd></td><td>move line</td></tr>
|
||||
<tr><td><kbd>⇧</kbd> <kbd>Alt</kbd> <kbd>↑</kbd> <kbd>↓</kbd></td><td>duplicate line</td></tr>
|
||||
<tr><td><kbd>↵</kbd></td><td>auto-continue list</td></tr>
|
||||
<tr><td><kbd>[</kbd><kbd>[</kbd></td><td>link autocomplete</td></tr>
|
||||
<tr><td><kbd>#</kbd></td><td>tag autocomplete</td></tr>
|
||||
<tr><td><kbd>?</kbd><em>snippet</em></td><td>snippet expand</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">search</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>↑</kbd> <kbd>↓</kbd></td><td>navigate results</td></tr>
|
||||
<tr><td><kbd>↵</kbd></td><td>open selected result</td></tr>
|
||||
<tr><td><kbd>Esc</kbd></td><td>close search</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Column 3 -->
|
||||
<div class="space-y-5">
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">board + detail</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd></td><td>focus card</td></tr>
|
||||
<tr><td><kbd>↵</kbd></td><td>focused → preview</td></tr>
|
||||
<tr><td><kbd>↵</kbd> <span class="mouse">in preview</span></td><td>→ editor</td></tr>
|
||||
<tr><td><kbd>←</kbd> <kbd>→</kbd> <span class="mouse">in preview</span></td><td>group prev / next</td></tr>
|
||||
<tr><td><span class="mouse">click</span></td><td>preview / split</td></tr>
|
||||
<tr><td><span class="mouse">dbl-click</span></td><td>editor</td></tr>
|
||||
<tr><td><span class="mouse">right-click</span></td><td>context menu</td></tr>
|
||||
<tr><td><kbd>⌃</kbd> <span class="mouse">click</span></td><td>multi-select</td></tr>
|
||||
<tr><td><span class="mouse">drag → edge</span></td><td>reorder</td></tr>
|
||||
<tr><td><span class="mouse">drag → center</span></td><td>group</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">canvas (ascii editor)</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>B</kbd></td><td>brush</td></tr>
|
||||
<tr><td><kbd>E</kbd></td><td>eraser</td></tr>
|
||||
<tr><td><kbd>L</kbd></td><td>line</td></tr>
|
||||
<tr><td><kbd>R</kbd></td><td>rectangle</td></tr>
|
||||
<tr><td><kbd>O</kbd></td><td>circle</td></tr>
|
||||
<tr><td><kbd>F</kbd></td><td>fill</td></tr>
|
||||
<tr><td><kbd>T</kbd></td><td>text cursor</td></tr>
|
||||
<tr><td><kbd>⌫</kbd></td><td>delete char</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="font-pixel text-[10px] text-t-accent mb-2 uppercase tracking-wider">mail</h3>
|
||||
<table class="shortcut-table"><tbody>
|
||||
<tr><td><kbd>⌫</kbd></td><td>delete selected mails</td></tr>
|
||||
<tr><td><kbd>⇧</kbd> <kbd>⌫</kbd></td><td>delete (skip confirm)</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="overlay fixed inset-0 z-[95] flex justify-center items-start pt-12 pb-12 px-8" style="background:var(--t-overlay)" id="help">
|
||||
<div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-3xl max-h-full overflow-y-auto">
|
||||
@@ -1351,13 +1461,7 @@ if (str_starts_with($route, '/api/')) {
|
||||
|
||||
<section>
|
||||
<h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-keyboard text-sm"></i>shortcuts</h3>
|
||||
<table class="w-full text-xs">
|
||||
<tr><td class="py-1 text-t-dim w-40 font-pixel">Ctrl+K</td><td><i class="ph ph-magnifying-glass text-xs"></i> open / close search</td></tr>
|
||||
<tr><td class="py-1 text-t-dim font-pixel">Ctrl+N</td><td><i class="ph ph-lightning text-xs"></i> quick capture — type title, Enter to save</td></tr>
|
||||
<tr><td class="py-1 text-t-dim font-pixel">Ctrl+Z</td><td><i class="ph ph-arrow-counter-clockwise text-xs"></i> undo last action</td></tr>
|
||||
<tr><td class="py-1 text-t-dim font-pixel">F1</td><td><i class="ph ph-question text-xs"></i> open / close help</td></tr>
|
||||
<tr><td class="py-1 text-t-dim font-pixel">Escape</td><td><i class="ph ph-x text-xs"></i> close any overlay</td></tr>
|
||||
</table>
|
||||
<p class="text-xs text-t-muted mb-2">Press <kbd class="px-1 py-0.5 border border-t-border rounded text-[9px] font-pixel">?</kbd> for the full keyboard reference.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
Reference in new issue
Block a user