added better editing

.gitignore

@@ -1,3 +1,4 @@
 .venv
 instance
 sites
+__pycache__

app.py

@@ -7,6 +7,7 @@ from flask import (
     send_from_directory,
     flash,
     abort,
+    jsonify,
 )
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import (
@@ -50,6 +51,7 @@ class Site(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     user_id = db.Column(db.Integer)
     name = db.Column(db.String(100))
+    slug = db.Column(db.String(100), unique=True)
     last_accessed = db.Column(db.DateTime)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
 
@@ -143,8 +145,15 @@ def dashboard():
 @login_required
 def upload_site():
     site_name = request.form.get("name")
-	if not site_name:
-		flash("Site name is required", "error")
+    slug = request.form.get("slug").strip()
+
+    if not site_name or not slug:
+        flash("Site name and URL slug are required", "error")
+        return redirect(url_for("dashboard"))
+
+    # Check slug availability
+    if Site.query.filter_by(slug=slug).first():
+        flash("This URL is already taken", "error")
         return redirect(url_for("dashboard"))
 
     # Check if index.html is included
@@ -154,7 +163,7 @@ def upload_site():
         return redirect(url_for("dashboard"))
 
     # Create site directory
-	site = Site(user_id=current_user.id, name=site_name)
+    site = Site(user_id=current_user.id, name=site_name, slug=slug)
     db.session.add(site)
     db.session.commit()
 
@@ -194,7 +203,11 @@ def edit_site(site_id):
                 with open(filepath, "w") as f:
                     f.write(content)
 
-		return redirect(url_for("dashboard"))
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({"success": True, "message": "Site updated successfully!"})
+
+        flash("Site updated successfully!", "success")
+        return redirect(url_for("edit_site", site_id=site.id))
 
     files = {}
     for file in os.listdir(site_dir):
@@ -246,33 +259,19 @@ def delete_file(site_id, filename):
     return redirect(url_for("dashboard"))
 
 
-@app.route("/site/<int:user_id>/<int:site_id>")
-def redirect_to_slash(user_id, site_id):
-	"""Redirect URLs without trailing slash to the slash version"""
-	return redirect(
-		url_for(
-			"serve_site_content",
-			user_id=user_id,
-			site_id=site_id,
-			filename="index.html",
-		),
-		code=301,
-	)
-
-
-@app.route("/site/<int:user_id>/<int:site_id>/", defaults={"filename": "index.html"})
-@app.route("/site/<int:user_id>/<int:site_id>/<path:filename>")
-def serve_site_content(user_id, site_id, filename):
-	# Update last accessed time
-	site = Site.query.get_or_404(site_id)
+@app.route("/site/<slug>/", defaults={"filename": "index.html"})
+@app.route("/site/<slug>/<path:filename>")
+def serve_site_content(slug, filename):
+    site = Site.query.filter_by(slug=slug).first_or_404()
     site.last_accessed = datetime.utcnow()
     db.session.commit()
 
-	# Get site directory
-	site_dir = os.path.join(app.config["UPLOAD_FOLDER"], str(user_id), str(site_id))
+    site_dir = os.path.join(
+        app.config["UPLOAD_FOLDER"], str(site.user_id), str(site.id)
+    )
 
     # Security check
-	if '..' in filename or filename.startswith('/') or not os.path.exists(site_dir):
+    if ".." in filename or filename.startswith("/") or not os.path.exists(site_dir):
         abort(404)
 
     try:

static/editor.js

@@ -11,28 +11,7 @@ function formatOption(option) {
 }
 
 
-document.addEventListener("DOMContentLoaded", () => {
-	const storedTheme = localStorage.getItem('editortheme');
-
-	// for each textarea (one per file) replace with Ace Editor
-	const editors = Array.from(document.querySelectorAll('textarea')).map((textarea) => {
-		const language = textarea.dataset.language,
-			themeStyle = document.querySelector('#theme-style'),
-			isDark = themeStyle.href.includes('dark-styles.css'),
-			aceTheme = isDark ? "ace/theme/twilight" : "ace/theme/chrome",
-			editorContainer = document.createElement('div');
-
-		editorContainer.style.width = "100%";
-		editorContainer.style.height = "400px";
-
-		// insert the container after the textarea
-		textarea.parentNode.insertBefore(editorContainer, textarea.nextSibling);
-		// hide the original textarea
-		textarea.style.display = "none";
-
-		const editor = ace.edit(editorContainer);
-		editor.setTheme(storedTheme || aceTheme);
-
+function getAceMode(language) {
 	let aceMode = "ace/mode/html"; // default fallback
 	if (language === "css") {
 		aceMode = "ace/mode/css";
@@ -41,24 +20,65 @@ document.addEventListener("DOMContentLoaded", () => {
 	} else if (language === "htmlmixed") {
 		aceMode = "ace/mode/html";
 	}
-		editor.session.setMode(aceMode);
+	return aceMode;
+}
 
-		// set initial content from the textarea and add options
-		editor.session.setValue(textarea.value.trim());
-		editor.setOptions({
-			fontSize: "14px",
-			tabSize: 4,
-			useSoftTabs: true,
-			wrap: true,
-			showPrintMargin: false
+document.addEventListener("DOMContentLoaded", () => {
+	const storedTheme = localStorage.getItem('editortheme');
+
+	// Initialize Ace editor instance on the container
+	const editor = ace.edit("editor-container");
+	editor.setTheme("ace/theme/chrome");
+
+	// Default mode as html mixed. It will be updated based on file type.
+	editor.session.setMode("ace/mode/html");
+
+	// To track the current file (index)
+	var currentFileIndex = null;
+
+	// Returns Ace mode based on file extension
+	function getAceMode(filename) {
+		if (filename.endsWith('.css')) return "ace/mode/css";
+		if (filename.endsWith('.js')) return "ace/mode/javascript";
+		return "ace/mode/html";
+	}
+
+	// When a file card is clicked then load its content into the editor
+	document.querySelectorAll('#file-list .file-card').forEach((card) => {
+		card.addEventListener('click', () => {
+			// Save changes of currently open file
+			if (currentFileIndex !== null) document.getElementById(`textarea-${currentFileIndex}`).value = editor.getValue();
+			currentFileIndex = card.getAttribute("data-index");
+
+			// Get filename and load content from corresponding hidden textarea
+			const filename = card.getAttribute("data-file");
+			editor.setValue(document.getElementById(`textarea-${currentFileIndex}`).value);
+			editor.session.setMode(getAceMode(filename));
+
+			// Show the editor container
+			document.getElementById("editor-container").classList.add("visible");
+		});
 	});
 
-		// update the hidden textarea whenever the Ace content changes
-		editor.session.on('change', () => {
-			textarea.value = editor.getValue();
+	// Update the corresponding hidden textarea whenever the editor value changes
+	editor.session.on("change", function (e) {
+		if (currentFileIndex !== null) {
+			const ta = document.getElementById("textarea-" + currentFileIndex);
+			ta.value = editor.getValue();
+		}
 	});
 
-		return editor;
+	// Initialize Select2 for the theme selector
+	$(document).ready(function () {
+		$('#theme-selector').select2({
+			templateResult: formatOption,
+			placeholder: 'Select a theme',
+			allowClear: true
+		}).on('change', function () {
+			const selectedTheme = $('#theme-selector').val();
+			localStorage.setItem('editortheme', selectedTheme);
+			editor.setTheme(selectedTheme);
+		});
 	});
 
 	// Retrieve the list of available themes
@@ -66,7 +86,7 @@ document.addEventListener("DOMContentLoaded", () => {
 		themes = ThemeList.themes,
 		themeSelector = document.querySelector('#theme-selector');
 
-	themes.forEach(function (theme) {
+	themes.forEach((theme) => {
 		var option = document.createElement('option');
 		option.value = theme.theme;
 		option.textContent = theme.caption;
@@ -81,7 +101,55 @@ document.addEventListener("DOMContentLoaded", () => {
 		placeholder: 'Select a theme',
 		allowClear: true
 	}).on('change', function (_) {
-		localStorage.setItem('editortheme', themeSelector.value)
-		editors.forEach(editor => editor.setTheme(themeSelector.value));
+		const selectedTheme = $('#theme-selector').val();
+		localStorage.setItem('editortheme', selectedTheme);
+		editor.setTheme(selectedTheme);
+	});
+
+	// Add event listener for Ctrl+S to save the current file
+	//TODO: save this
+	const editEl = document.querySelector('#editor-container');
+
+	document.addEventListener('keydown', (e) => {
+		if (e.ctrlKey && e.key === 's') {
+			e.preventDefault();
+			if (currentFileIndex !== null) {
+				document.getElementById("textarea-" + currentFileIndex).value = editor.getValue();
+				document.querySelector("form").submit();
+			}
+		}
+		else if (editEl.contains(e.target)) {
+			document.getElementById("textarea-" + currentFileIndex).value = editor.getValue();
+		}
+	});
+
+	// form submit intercept
+	document.querySelector("form").addEventListener("submit", async (e) => {
+		e.preventDefault();
+
+		const formData = new FormData();
+		document.querySelectorAll("[id^='textarea-']").forEach((textarea) => {
+			if (textarea.dataset.edited === "true") {
+				formData.append(textarea.name, textarea.value);
+				delete textarea.dataset.edited;
+			}
+		});
+
+		await fetch(window.location.href, {
+			method: "POST",
+			headers: {
+				"X-Requested-With": "XMLHttpRequest"
+			},
+			body: formData
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				if (data.success) {
+					alert("Site updated successfully!"); // Or display a flash message
+				}
+			})
+			.catch((error) => {
+				console.error("Error:", error);
+			});
 	});
 });

static/styles.css

@@ -261,6 +261,29 @@ button:hover,
 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
 }
 
+.flash-messages {
+	margin: 10px 0;
+}
+
+.flash-message {
+	padding: 10px;
+	margin-bottom: 10px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+}
+
+.flash-success {
+	color: #3c763d;
+	background-color: #dff0d8;
+	border-color: #d6e9c6;
+}
+
+.flash-error {
+	color: #a94442;
+	background-color: #f2dede;
+	border-color: #ebccd1;
+}
+
 /* Theme Toggle */
 #theme-toggle {
 	background-color: var(--card-bg);
@@ -295,6 +318,23 @@ button:hover,
 	background-color: #0056b3;
 }
 
+#editor-container {
+    width: 100%;
+    height: 400px;
+    border: 1px solid #ddd;
+    margin-top: 20px;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    transform: translateY(-100%);
+    opacity: 0;
+    display: none; /* Initially hidden */
+}
+
+#editor-container.visible {
+    transform: translateY(0);
+    opacity: 1;
+    display: block; /* Display when visible */
+}
+
 @media (max-width: 768px) {
 	.file-grid {
 		grid-template-columns: repeat(2, 1fr);

templates/dashboard.html

@@ -12,10 +12,18 @@
 		<input type="text" name="name" required>
 	</div>
 
+	<!-- Add slug input -->
+	<div class="form-group">
+		<label>Custom URL Slug:</label>
+		<input type="text" name="slug" required pattern="[a-zA-Z0-9\-_]+"
+			title="Letters, numbers, hyphens, and underscores only">
+	</div>
+
 	<div class="form-group" onclick="document.querySelector('#file-input').click()">
 		<label class="upload-label">
 			Upload Files
-			<input type="file" name="files" style="display: none;" id="file-input" multiple accept=".html,.css,.js" required>
+			<input type="file" name="files" style="display: none;" id="file-input" multiple accept=".html,.css,.js"
+				required>
 		</label>
 	</div>
 
@@ -61,8 +69,7 @@
 		<!-- Site Actions -->
 		<div class="site-actions">
 			<a href="{{ url_for('edit_site', site_id=site.id) }}" class="btn">Edit</a>
-			<a href="{{ url_for('serve_site_content', user_id=current_user.id, site_id=site.id) }}" class="btn"
-				target="_blank">View Site</a>
+			<a href="{{ url_for('serve_site_content', slug=site.slug) }}" class="btn" target="_blank">View Site</a>
 			<form method="POST" action="{{ url_for('delete_site', site_id=site.id) }}" style="display: inline;">
 				<button type="submit" class="btn btn-danger">Delete Site</button>
 			</form>

templates/edit.html

@@ -4,8 +4,7 @@
 
 {% block content %}
 <h2>Edit {{ site.name }}</h2>
-<a href="{{ url_for('serve_site_content', user_id=current_user.id, site_id=site.id) }}" class="btn" target="_blank">View
-	Site</a>
+<a href="{{ url_for('serve_site_content', slug=site.slug) }}" class="btn" target="_blank">View Site</a>
 
 <div style="margin-bottom: 30px;"></div>
 
@@ -14,22 +13,33 @@
     <!-- Theme options will be populated here -->
 </select>
 
-
 <form method="POST">
     <div class="form-group">
         <label>Site Name:</label>
         <input type="text" name="name" value="{{ site.name }}">
     </div>
 
-	{% for filename, content in files.items() %}
 	<div class="form-group">
-		<label>{{ filename }}:</label>
-		<textarea name="{{ filename }}" rows="20"
-			data-language="{% if filename.endswith('.css') %}css{% elif filename.endswith('.js') %}javascript{% else %}htmlmixed{% endif %}">{{ content|trim }}</textarea>
+        <label>Files:</label>
+        <ul id="file-list" class="file-grid" style="padding-left: 0; list-style: none;">
+            {% for filename, content in files.items() %}
+            <li class="file-card" style="cursor: pointer;" data-index="{{ loop.index0 }}" data-file="{{ filename }}">
+                <div class="file-icon {% if filename.endswith('.html') %}html{% elif filename.endswith('.css') %}css{% elif filename.endswith('.js') %}js{% endif %}"></div>
+                <span class="file-name">{{ filename }}</span>
+            </li>
+            {% endfor %}
+        </ul>
     </div>
+
+    <!-- Hidden textareas to retain file content (one per file) -->
+    {% for filename, content in files.items() %}
+        <textarea hidden name="{{ filename }}" id="textarea-{{ loop.index0 }}" data-filename="{{ filename }}">{{ content|trim }}</textarea>
     {% endfor %}
 
-	<button type="submit">Save Changes</button>
+    <!-- Ace Editor Container -->
+    <div id="editor-container" style="width: 100%; height: 400px; border: 1px solid #ddd; margin-top: 20px;"></div>
+
+    <button type="submit" class="btn" style="margin-top:20px;">Save Changes</button>
 </form>
 
 <!-- Ace Editor -->
@@ -41,19 +51,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
 <script src="{{ url_for('static', filename='editor.js') }}"></script>
 
-
 <style>
     /* Style for the Select2 dropdown */
     .select2-container {
         margin-bottom: 10px;
     }
-
-	/* Ensure the editor has a defined height */
-	#editor {
-		width: 100%;
-		max-height: 500px;
-		border: 1px solid #ddd;
-	}
 </style>
 
 {% endblock %}