Commit box

backend/src/handlers_prelude/doc.rs

@@ -49,6 +49,7 @@ pub async fn get_doc_handler(
 pub struct PutDocRequestBody {
     contents: String,
     path: String,
+    commit_message: String,
 }
 
 #[debug_handler]
@@ -76,10 +77,15 @@ pub async fn put_doc_handler(
             ));
         }
     };
+
+    // Generate commit message combining author and default update message
+    let default_commit_message = format!("{} updated {}", author.username, body.path);
+    let final_commit_message = format!("{}\n\n{}", default_commit_message, body.commit_message);
+
     match state.git.put_doc(
         &body.path,
         &body.contents,
-        &format!("{} updated {}", author.username, body.path),
+        &final_commit_message,
         &gh_token,
     ) {
         Ok(_) => Ok(StatusCode::CREATED),

frontend/src/lib/components/Editor.svelte

@@ -1,10 +1,52 @@
 <script lang="ts">
+	import { tick, onDestroy } from 'svelte';
 	import { currentFile } from '$lib/main';
 	import { addToast, ToastType } from '$lib/toast';
 	import { get } from 'svelte/store';
 	import { cache } from '$lib/cache';
 
-	export let saveChangesHandler: () => Promise<void>;
+	export let editorText: string;
+	export let previewWindow: HTMLElement;
+
+	let showCommitModal = false;
+	let commitModal: HTMLElement;
+	let commitMessageInput: HTMLInputElement;
+	let charCount = 500;
+
+	let previousFile: string | null = null;
+
+	function updateCharCount() {
+		charCount = 500 - commitMessageInput.value.length;
+		const charCountElement = document.getElementById('charCount');
+		if (charCountElement) {
+			charCountElement.textContent = `${charCount} characters remaining`;
+		}
+	}
+
+	async function hasChanges(): Promise<boolean> {
+		const storedText = await cache.get(get(currentFile));
+		return editorText !== (storedText ?? '');
+	}
+
+	async function confirmCommitHandler() {
+		const commitMessage = commitMessageInput.value.trim();
+
+		if (!await hasChanges()) {
+			addToast({
+				message: `No changes detected to commit.`,
+				type: ToastType.Error,
+				timeout: 1000,
+				dismissible: true
+			});
+			return;
+		}
+
+		showCommitModal = false;
+		await saveChangesHandler(commitMessage);
+	};
+
+	export let saveChangesHandler: (commitMessage: string) => Promise<void>;
+
 	async function cancelChangesHandler() {
 		if (editorText !== get(currentFile)) {
 			editorText =
@@ -26,13 +68,26 @@
 			});
 		}
 	}
-	export let editorText: string;
+
 	currentFile.subscribe(async (v) => {
 		editorText = (await cache.get(v)) ?? '';
 	});
-	export let previewWindow: HTMLElement;
+
+	const unsubscribe = currentFile.subscribe(async (file) => {
+		if (file !== previousFile && showCommitModal) {
+			showCommitModal = false;
+		}
+		previousFile = file;
+		editorText = (await cache.get(file)) ?? '';
+	});
+
+	onDestroy(() => {
+		unsubscribe();
+	});
 </script>
 
+
+
 <div class="editor-controls">
 	<!-- Cancel -->
 	<button on:click={cancelChangesHandler} class="cancel" title="Cancel Changes">
@@ -45,7 +100,12 @@
 		</svg>
 	</button>
 	<!-- Save -->
-	<button on:click={saveChangesHandler} class="publish" title="Publish Changes">
+	<button 
+	on:click={async () => {
+		showCommitModal = true;
+		await tick();
+	}}
+	class="publish" title="Publish Changes">
 		<span>Publish Changes</span>
 		<svg
 			role="button"
@@ -65,6 +125,54 @@
 	<div bind:this={previewWindow} class="preview-pane"></div>
 </div>
 
+{#if showCommitModal}
+	<div
+		on:click={() => {
+			showCommitModal = false;
+		}}
+		on:keydown={(e) => {
+			if (e.key === 'Escape') {
+				showCommitModal = false;
+			}
+		}}
+		role="button"
+		tabindex="0"
+		class="commit-modal-backdrop"
+	></div>
+	<div id="commitModal" class="commit-modal" bind:this={commitModal}>
+		<div class="commit-modal-content">
+			<svg
+				on:click={() => {
+					showCommitModal = false;
+				}}
+				on:keypress={() => {
+					showCommitModal = false;
+				}}
+				class="commit-modal-close"
+				role="button"
+				tabindex="0"
+				xmlns="http://www.w3.org/2000/svg"
+				height="24px"
+				viewBox="0 -960 960 960"
+				width="24px"
+				fill="#e8eaed"
+			>
+				<path
+					d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
+				/>
+			</svg>
+			<h2>Confirm changes before committing:</h2>
+			<h5>Enter a commit message (optional)</h5>
+			<input type="text" id="commitMessage" placeholder="Enter your commit message here" bind:this={commitMessageInput} maxlength="500" on:input={updateCharCount}>
+			<div id="charCount">500 characters remaining</div>
+			<div class="commit-modal-buttons">
+				<button id="cancelBtn" on:click={() => showCommitModal = false}>Deny</button>
+				<button id="confirmBtn" on:click={confirmCommitHandler}>Confirm</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
 	.editor-controls {
 		padding-right: 0.5rem;
@@ -161,4 +269,94 @@
 	.preview-pane :global(img) {
 		width: 90%;
 	}
+
+	.commit-modal-backdrop {
+		position: absolute;
+		top: 0;
+		left: 0;
+		background-color: var(--background-0);
+		opacity: 0.9;
+	}
+
+	.commit-modal {
+		position: fixed;
+		top: 0;
+		display: flex;
+		align-self: center;
+		justify-content: center;
+		z-index: 1;
+		margin-top: 6rem;
+		width: 50%;
+		height: 12rem;
+	}
+
+	.commit-modal-content {
+		margin: auto;
+		padding: 1rem;
+		width: 90%;
+		flex-shrink: 0;
+
+		/* Appearance */
+		border: 1px solid var(--background-2);
+		border-radius: 5px;
+		background-color: var(--background-1);
+		color: var(--foreground-0);
+		font-family: var(--font-family);
+	}
+
+	.commit-modal-content h2 {
+		margin: 0;
+		margin-bottom: 0.5rem;
+	}
+
+	.commit-modal-content input {
+		margin-bottom: 0.5rem;
+		padding-left: 0.5rem;
+		width: 98%;
+		height: 4rem;
+
+		background-color: transparent;
+		color: var(--foreground-0);
+		border-radius: 4px;
+		border: 1px solid;
+		border-color: var(--foreground-1);
+		font-family: var(--font-family);
+	}
+
+	.commit-modal-close {
+		position: sticky;
+		cursor: pointer;
+		margin-top: 0.2rem;
+		margin-right: 0.2rem;
+		float: right;
+	}
+
+	.commit-modal-buttons {
+		display: flex;
+		justify-content: flex-end;
+		align-items: flex-end;
+		gap: 0.2rem;
+	}
+
+	.commit-modal-buttons button {
+		display: flex;
+		justify-content: flex-end;
+		align-items: flex-end;
+		gap: 0.2rem;
+
+		cursor: pointer;
+		height: 2rem;
+
+		background-color: transparent;
+		font-family: var(--font-family);
+		font-size: medium;
+		padding: 0.3rem;
+		margin: 0.1rem;
+		color: var(--foreground-2);
+		border-radius: 4px;
+		border: 1px solid;
+		border-color: var(--foreground-1);
+		font-family: var(--font-family);
+	}
+
 </style>

frontend/src/routes/+page.svelte

@@ -78,7 +78,7 @@
 		}
 	}
 
-	let saveChangesHandler = async (): Promise<void> => {
+	let saveChangesHandler = async (commitMessage: string): Promise<void> => {
 		showLoadingIcon = true;
 		let response = await fetch(`${apiAddress}/api/doc`, {
 			method: 'PUT',
@@ -88,7 +88,8 @@
 			},
 			body: JSON.stringify({
 				contents: editorText,
-				path: get(currentFile)
+				path: get(currentFile),
+				commit_message: commitMessage
 			})
 		});
 		showLoadingIcon = false;