Feature: Unified Import/Export Dialog with JSON Editor and Smart Filename Generation

[rorar]

Overview

Currently, import and export are implemented as separate buttons with basic file handling. This feature consolidates the import/export workflow into a single, unified dialog with an integrated JSON editor, smart filename generation, and drag-and-drop support.

This improves the user experience significantly:

• Single UI entry point for all import/export operations
• JSON editing on the fly for fixing LLM-generated data or making adjustments before import
• Copy and pasting whole sections or items to different CVs
• Smart naming to avoid confusing file versioning (cv-data-en(1).json, cv-data-en(2).json)
• Validation support to work seamlessly with issue Feature Request: Create JSON Schema, Full Example and Instructions for LLM Integration #174 (JSON schema validation)
• Drag-and-drop for ease of use with multiple CV files

User Scenarios

Scenario 1: Export Current Dataset

1. User clicks unified "Import/Export" button
2. Dialog opens with JSON editor showing current CV data (read-only or editable view)
3. Filename is auto-generated using template: {date} {time} {cv-name} {cv-version} {cv-language} {cv-id}.json
4. User can customize filename by adding custom strings (e.g., {date} {time} - most interesting - {cv-name} {cv-version} {cv-language} {cv-id} - custom sections.json)
5. User clicks "Export" to download
6. User receives file `2026-07-07 143022 -Projectmanager V1 en abc123 - custom sections.json

Scenario 2: Import with LLM-Generated Data

1. User copies JSON output from LLM (ChatGPT, Gemini, etc.)
2. User opens Import/Export dialog and pastes or drag-and drop JSON file
3. JSON editor displays the data with syntax highlighting
4. Optional validation shows any schema errors (when schema is available from Feature Request: Create JSON Schema, Full Example and Instructions for LLM Integration #174)
5. User can edit directly in the editor to fix LLM mistakes
6. User reviews the diff (if implementing Option B - see below) and clicks "Import"

Scenario 3: Working with Multiple CV Versions

1. User has cv-data-en.json, cv-data-de.json, cv-data-fr.json
2. Instead of manual file management with numbered suffixes, the unified dialog tracks dataset metadata
3. Filename template automatically includes language and version info
4. User maintains a clear, organized history without filesystem clutter

Deliverables

1. Unified Dialog Component

• Single button "Import/Export" in toolbar (consolidates existing buttons)
• Modal dialog with tabs or sections:
  • JSON Editor section (code editor UI)
  • Export Options section (filename template, custom suffixes)
  • Action Buttons: "Upload File", "Import", "Export", "Cancel"

2. JSON Editor Implementation

Option A (YAGNI — Minimum Viable):**

• Simple code editor (textarea with monospace font, basic syntax highlighting via CSS classes)
• Display current CV data as JSON on export tab
• Allow paste/paste-upload of JSON on import tab
• Basic validation (try to parse JSON, show error if invalid)

Option B (Full-Featured and Recommended):**

• Side-by-side JSON editor with diff viewer
• Extends existing diff logic currently supported by section movement
• Highlights changes between original and edited/imported data
• Optional schema validation when schema from Feature Request: Create JSON Schema, Full Example and Instructions for LLM Integration #174 becomes available
• Copy individual sections from editor for LLM handoffs

3. Smart Filename Generation

Implement a filename template with auto-populated variables:

Format:
{date} {time} {cv-name} {cv-version} {cv-language} {cv-id}.json
or optionally with underscore character
{date}_{time}_{cv-name}_{cv-version}_{cv-language}_{cv-id}.json

Examples:

• 2026-07-07 143022 Projectmanager V1 en abc123.json
• 2026-07-07_143022_Software Engineer_v2_de_def456.json

User can extend custom strings:

• {date}_{time}_{cv-name}_{cv-version}_{cv-language}_{cv-id}_updated_section.json
• Result in: 2026-07-07_143022_Car-Mechanic_v3_en_abc123_updated_section.json

Template Variables:

• {date} → YYYY-MM-DD / Format based on user locale or user settings
• {time} → HHMMSS / Format vased on user locale or user settings
• {cv-name} → Current dataset name (from DB)
• {cv-version} → CV Version like V2, V3
• {cv-language} → CV language de, en, fr,...
• {cv-id} → Dataset ID from database as unique identifier
• Any custom string prepended/appended by user

4. Drag-and-Drop Support

• Users can drag JSON files directly onto the dialog
• File is automatically loaded into the JSON editor
• Filename is populated in the import metadata section

5. Integration with Issue #174

When JSON schema is delivered (issue #174), the editor should:

• Validate imported JSON against the schema
• Highlight validation errors
• Provide helpful error messages for fixing LLM-generated data

Technical Considerations

Backend Changes

• No new API endpoints needed (reuse existing export/import endpoints)
• Consider adding optional /api/export/filename-template endpoint (or similar) that returns pre-filled template values

Frontend Changes

• Refactor current exportData() and importData() functions into unified dialog
• Create ImportExportDialog component with sub-components:
  • JSONEditor (using Option A or B)
  • FilenameTemplate (template input with variable preview)
  • DragDropZone (drag-and-drop file upload)
  • ValidationPanel (errors/warnings when available)

CSS Updates

• Dialog styling matching existing modal design
• Editor syntax highlighting (monospace font, line numbers optional)
• Diff view styling for Option B

Browser Compatibility

• Modern FileReader API for drag-and-drop
• JSON.parse() and JSON.stringify() for validation

Benefits

✅ Single, intuitive entry point
✅ Reduced file confusion: Smart naming eliminates cv-data(1), cv-data(2) mess + increase searchability on local machine
✅ LLM-friendly workflow: Copy/paste from any LLM, fix in-editor, import cleanly
✅ Better error handling: Validation catches LLM mistakes before import
✅ Accessibility: Drag-and-drop for users who prefer it over file pickers ➡️ Easier to handle from browsers download dialog
✅ Data integrity: Optional diff viewer ensures users understand what's being imported and/or overwritten.

Related Issues

• Partly Feature Request: Create JSON Schema, Full Example and Instructions for LLM Integration #174: JSON Schema creation for LLM integration

Acceptance Criteria

• Unified "Import/Export" button replaces separate import/export buttons
• Dialog displays JSON editor with current data on export
• Filename template auto-populates with dataset metadata
• User can drag-and-drop JSON files into dialog
• JSON is validated on import (at minimum: valid JSON syntax)
• Export generates file with smart-formatted name
• Import merges or replaces data (clarify with user flow)
• Dialog integrates with existing i18n system
• Tests cover happy path and error cases