Add row insertion modal to table view

[Copilot]

Implements row insertion functionality using a modal dialog pattern similar to the existing edit flow.

Changes

New Component: AddRowModal.js

• Modal form for inserting database rows
• Auto-hides INTEGER PRIMARY KEY fields (SQLite auto-increment)
• Displays required field indicators (*) and default value placeholders
• Green color scheme distinguishes "Add" from "Edit" (blue) and "Delete" (red)

Updated: TableViewer.js

• Added "Add Row" button with PlusIcon in table header
• Integrated modal with addingRow state and handleAddRow handler
• Refreshes table data and row count on successful insertion

Implementation

// Intelligent field filtering
const shouldShowField = (columnSchema) => {
  if (columnSchema.pk === 1 && 
      columnSchema.type.toLowerCase().includes('integer')) {
    return false; // Hide auto-increment fields
  }
  return true;
};

// Insert handler
const handleAddRow = async (data) => {
  await window.electronAPI.insertRow(directory, tableName, data);
  setAddingRow(false);
  await loadTableData();
  await loadRowCount();
};

Uses existing insert-row IPC handler with parameterized queries. Empty field values are filtered to allow database defaults.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Table view UI updates</issue_title>
<issue_description>Using a similar modal as the Edit form, make it possible to add a record to the table.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Table view UI updates #18

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.