---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import Giscus from '../../components/Giscus.astro';

const lang = 'en' as const;

type Row = [string, string, string];
const file: Row[] = [
  ['New Markdown file', 'Ctrl + N', '⌘ N'],
  ['New plain text file', 'Ctrl + Alt + N', '⌘ ⌥ N'],
  ['Open file', 'Ctrl + O', '⌘ O'],
  ['Save', 'Ctrl + S', '⌘ S'],
  ['Save As…', 'Ctrl + Shift + S', '⌘ ⇧ S'],
  ['Print', 'Ctrl + P', '⌘ P'],
  ['Close tab', 'Ctrl + W', '⌘ W'],
  ['New window', 'Ctrl + Shift + N', '⌘ ⇧ N'],
];
const view: Row[] = [
  ['Toggle file tree', 'Ctrl + B', '⌘ B'],
  ['Toggle outline', 'Ctrl + Shift + O', '⌘ ⇧ O'],
  ['Cycle view mode (edit / split / preview)', 'Ctrl + Shift + P', '⌘ ⇧ P'],
  ['Split pane', 'Ctrl + \\', '⌘ \\'],
  ['Command palette', 'Ctrl + Shift + K', '⌘ ⇧ K'],
  ['Search in folder', 'Ctrl + Shift + F', '⌘ ⇧ F'],
  ['Settings', 'Ctrl + ,', '⌘ ,'],
  ['Markdown cheatsheet', 'F1', 'F1 or ⌘ /'],
];
const editing: Row[] = [
  ['Undo / Redo', 'Ctrl + Z / Ctrl + Y', '⌘ Z / ⌘ ⇧ Z'],
  ['Copy as rich HTML', 'Ctrl + Shift + C', '⌘ ⇧ C'],
  ['Find in file', 'Ctrl + F', '⌘ F'],
  ['Find & Replace', 'Ctrl + H', '⌘ ⌥ F'],
  ['Toggle word wrap (settings)', '—', '—'],
];
---

<Layout
  title="SoloMD Keyboard Shortcuts — Complete Reference"
  description="All keyboard shortcuts for SoloMD on Mac, Windows, and Linux. File, view, editing, and navigation commands."
  lang={lang}
>
  <Header lang={lang} />
  <main>
    <article class="container docs-article">
      <nav class="breadcrumbs">
        <a href="/">Home</a> / <a href="/docs/">Docs</a> / <span>Keyboard Shortcuts</span>
      </nav>

      <h1>Keyboard Shortcuts</h1>
      <p class="lead">Every SoloMD shortcut, grouped by category. Windows / Linux on the left,
        macOS on the right.</p>

      <h2>File operations</h2>
      <table class="kb-table">
        <thead><tr><th>Action</th><th>Windows / Linux</th><th>macOS</th></tr></thead>
        <tbody>{file.map((r) => <tr><th>{r[0]}</th><td><code>{r[1]}</code></td><td><code>{r[2]}</code></td></tr>)}</tbody>
      </table>

      <h2>View & navigation</h2>
      <table class="kb-table">
        <thead><tr><th>Action</th><th>Windows / Linux</th><th>macOS</th></tr></thead>
        <tbody>{view.map((r) => <tr><th>{r[0]}</th><td><code>{r[1]}</code></td><td><code>{r[2]}</code></td></tr>)}</tbody>
      </table>

      <h2>Editing</h2>
      <table class="kb-table">
        <thead><tr><th>Action</th><th>Windows / Linux</th><th>macOS</th></tr></thead>
        <tbody>{editing.map((r) => <tr><th>{r[0]}</th><td><code>{r[1]}</code></td><td><code>{r[2]}</code></td></tr>)}</tbody>
      </table>

      <h2>Vim mode</h2>
      <p>
        Enable in Settings → Vim mode. Once on, standard Vim modes (normal / insert /
        visual), motions (<code>h j k l w b e</code>), and operators (<code>d y c</code>)
        are available. Leader key is <code>\</code>.
      </p>

      <h2>Command palette</h2>
      <p>
        Hit <code>Ctrl + Shift + K</code> (⌘⇧K on Mac) to open the command palette —
        fuzzy search any action. Handy for shortcuts you forgot.
      </p>
    </article>
    <Giscus lang={lang} />
  </main>
  <Footer lang={lang} />
</Layout>

<style>
  .docs-article { max-width: 820px; padding: 40px 20px 80px; }
  .breadcrumbs { font-size: 13px; color: var(--text-muted, #8a8a8a); margin-bottom: 16px; }
  .breadcrumbs a { color: inherit; }
  .docs-article h1 { font-size: 2rem; margin: 10px 0 16px; }
  .docs-article h2 { font-size: 1.4rem; margin: 32px 0 12px; }
  .docs-article .lead { color: var(--text-muted, #555); margin-bottom: 24px; line-height: 1.6; }
  .kb-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14px; }
  .kb-table th, .kb-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eee; }
  .kb-table thead th { background: #fafafa; font-weight: 600; }
  .kb-table tbody th { font-weight: 500; width: 44%; }
  .docs-article code { background: #f5f5f0; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
  .docs-article p { line-height: 1.7; margin: 12px 0; }
</style>
