Feat/saving code on language changes

[MahekVanjani611]

Type of Change

1. Feature

Description

1. Added a modern modal dialog for clearing code with improved CSS styling and a user warning.
2. Implemented logic to preserve and restore code for each language when switching in the editor.

Motivation & Context
This change improves user experience by preventing accidental code loss and making it easier to work with multiple languages in the editor.

Related Issues
Closes #175

How Has This Been Tested?
Manual testing
Tested by switching languages, clearing code, and verifying the dialog and code restoration work as expected.

Screenshots / Media

Implementation Details

1. Added a custom modal dialog with modern CSS for code clearing confirmation.
2. Saved and restored code per language using an internal mapping in the editor logic.

Checklist

• My code follows the project’s coding style and conventions
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• Reviewer(s) assigned

[greptile-apps]

Greptile Summary

This PR introduces two key user experience improvements to the CodeClip javascript executor:

1. Code preservation across language changes: The implementation adds a languageCodes object that automatically saves the current code when switching languages and restores either previously saved code or language-specific starter templates. This prevents users from losing their work when experimenting with different programming languages.

2. Modern confirmation dialog for code clearing: Replaces the simple confirm() dialog with a custom modal that features smooth CSS animations, better visual design, and clearer messaging about the destructive nature of clearing code.

The changes are contained entirely within javascript-executor.html and integrate well with the existing CodeMirror editor setup. The onLanguageChange() method handles the core logic for preserving and restoring code, while the enhanced clearEditor() method now shows the confirmation modal only when there's actual content to clear. The modal is implemented with modern CSS using flexbox, transitions, and a backdrop blur effect that matches contemporary web application patterns.

This enhancement addresses issue #175 and significantly improves the developer experience by making the editor behave more like professional online code editors that maintain state across language switches.

Confidence score: 3/5

• This PR has some potential issues that should be addressed before merging, particularly around CSS conflicts and code persistence.
• The score reflects concerns about CSS selector specificity conflicts between new modal button styles and existing button styles, plus the limitation that code is only stored in memory (lost on page refresh).
• The javascript-executor.html file needs careful review for the CSS button styling conflicts and consideration of whether the in-memory storage approach is sufficient for the use case.

_{1 file reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

logic: CSS selector conflicts: .btn-primary and .btn-secondary are redefined here but also exist at lines 192-211. The modal styles will override the existing button styles globally.

Suggested change

	.btn-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 1rem;
	box-shadow: 0 2px 8px rgba(102,126,234,0.12);
	transition: background 0.2s, box-shadow 0.2s;
	}
	.btn-primary:hover {
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
	box-shadow: 0 4px 16px rgba(102,126,234,0.18);
	}
	.btn-secondary {
	background: #f8f9fa;
	color: #764ba2;
	border: 2px solid #e9ecef;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 1rem;
	transition: background 0.2s, border-color 0.2s;
	}
	.btn-secondary:hover {
	background: #e9ecef;
	border-color: #764ba2;
	}
	.modal-actions .btn-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 1rem;
	box-shadow: 0 2px 8px rgba(102,126,234,0.12);
	transition: background 0.2s, box-shadow 0.2s;
	}
	.modal-actions .btn-primary:hover {
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
	box-shadow: 0 4px 16px rgba(102,126,234,0.18);
	}
	.modal-actions .btn-secondary {
	background: #f8f9fa;
	color: #764ba2;
	border: 2px solid #e9ecef;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 1rem;
	transition: background 0.2s, border-color 0.2s;
	}
	.modal-actions .btn-secondary:hover {
	background: #e9ecef;
	border-color: #764ba2;
	}

[MahekVanjani611]

@adityai0 kindly review this PR and let me know if any changes required