help-content.html

<!-- Help content for the modal - extracted from help/index.html -->
<nav class="toc">
  <strong>Contents</strong>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#pan-zoom">Pan &amp; Zoom</a></li>
    <li><a href="#moving-tables">Moving Tables</a></li>
    <li><a href="#fields">Adding &amp; Editing Fields</a></li>
    <li><a href="#keys">Primary &amp; Unique Keys</a></li>
    <li><a href="#foreign-keys">Foreign Keys</a></li>
    <li><a href="#saving">Saving &amp; Loading</a></li>
    <li><a href="#shortcuts">Shortcuts</a></li>
    <li><a href="#faq">Troubleshooting / FAQ</a></li>
  </ul>
</nav>

<section id="overview">
  <h2>Overview</h2>
  <p>This page explains how to use the DB Schema Designer: create tables, add fields, set keys, connect tables, and save your work.</p>
  <!-- Example hero image: drop files into help/img/ and link relatively -->
  <!-- <img src="./img/overview.png" alt="Overview of the UI"> -->
</section>

<section id="pan-zoom">
  <h2>Pan &amp; Zoom</h2>
  <ul>
    <li>Use the mouse wheel to <em>zoom</em> in/out. The view zooms around your cursor.</li>
    <li><strong>Drag the empty background</strong> to pan the canvas.</li>
  </ul>
  <!-- <img src="./img/pan-zoom.gif" alt="Pan and zoom demonstration"> -->
</section>

<section id="moving-tables">
  <h2>Moving Tables</h2>
  <p>Grab the dotted handle in the table header to drag a table.</p>
  <!-- <img src="./img/drag-handle.png" alt="The drag handle on a table"> -->
</section>

<section id="fields">
  <h2>Adding &amp; Editing Fields</h2>
  <ol>
    <li>Select a table from the diagram.</li>
    <li>Use the <em>Add Field</em> form in the sidebar: name, type, nullable/default, primary/unique.</li>
    <li>Click a field in the diagram to edit it again.</li>
  </ol>
  <!-- <img src="./img/add-field.png" alt="Adding a field"> -->
</section>

<section id="keys">
  <h2>Primary &amp; Unique Keys</h2>
  <p>Mark a field as <strong>Primary key</strong> or <strong>Unique</strong> in the field form. Primary keys are shown with a key icon.</p>
</section>

<section id="foreign-keys">
  <h2>Foreign Keys</h2>
  <ol>
    <li>Choose the <em>From column</em>, <em>To table</em>, and <em>To column</em>.</li>
    <li>Pick an <em>On Delete</em> action (e.g., CASCADE).</li>
    <li>Click <em>Add FK</em>. Arrows will appear between related tables.</li>
  </ol>
  <p>To remove an FK for a field, select the field and use the <em>Remove</em> option (status text will confirm).</p>
  <!-- <img src="./img/add-fk.png" alt="Adding a foreign key"> -->
</section>

<section id="saving">
  <h2>Saving &amp; Loading</h2>
  <ul>
    <li><strong>Save solution</strong> – saves your schema to the server endpoint the app is configured with.</li>
    <li>Local autosave may also use <code>localStorage</code> when enabled.</li>
  </ul>
</section>

<section id="shortcuts">
  <h2>Shortcuts</h2>
  <ul>
    <li><strong>ESC</strong> - Close help modal</li>
    <li><strong>Mouse wheel</strong> - Zoom in/out</li>
    <li><strong>Drag background</strong> - Pan canvas</li>
    <li><strong>Click table</strong> - Select table</li>
    <li><strong>Click field</strong> - Edit field</li>
  </ul>
</section>

<section id="faq">
  <h2>Troubleshooting / FAQ</h2>
  <details>
    <summary>How do I delete a table?</summary>
    <p>Select the table and click the "Delete" button in the sidebar. This will also remove any foreign keys connected to the table.</p>
  </details>

  <details>
    <summary>Can I change the color of tables?</summary>
    <p>Yes! Select a table and use the "Table color" dropdown in the sidebar to choose from white, blue, green, or red.</p>
  </details>

  <details>
    <summary>How do I add images to the help?</summary>
    <p>Place image files in the <code>help/img/</code> directory and reference them with relative paths like <code>&lt;img src="./img/example.png" alt="Description"&gt;</code></p>
  </details>

  <details>
    <summary>Is my work automatically saved?</summary>
    <p>Yes, the app automatically saves your schema every second to both localStorage and the server. You'll see "Auto-saved" status messages.</p>
  </details>
</section>