✨ Adds an error state

Author: ahaywood

src/scripts/explain-code.ts

@@ -185,6 +185,42 @@ function createSheet(
 	return container;
 }
 
+function showError(container: HTMLElement, errorMessage: string) {
+	const content = container.querySelector(".sheet-content") as HTMLElement;
+	if (!content) return;
+
+	// Remove existing error if present
+	const existingError = content.querySelector(".error-state");
+	if (existingError) {
+		existingError.remove();
+	}
+
+	// Create error state element
+	const errorState = document.createElement("div");
+	errorState.className =
+		"error-state flex items-start gap-3 p-4 mt-4 rounded bg-[var(--sl-color-red-low)] border border-[var(--sl-color-red)] text-sm text-[var(--sl-color-text)]";
+	errorState.innerHTML = `
+		<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" style="color: var(--sl-color-red);">
+			<circle cx="12" cy="12" r="10"/>
+			<line x1="12" y1="8" x2="12" y2="12"/>
+			<line x1="12" y1="16" x2="12.01" y2="16"/>
+		</svg>
+		<div>
+			<p>${errorMessage}</p>
+		</div>
+	`;
+
+	// Insert error after the explanation text
+	const explanationText = content.querySelector(
+		".text-sm.text-\\[var\\(--sl-color-gray-2\\)\\].p-4",
+	);
+	if (explanationText && explanationText.nextSibling) {
+		content.insertBefore(errorState, explanationText.nextSibling);
+	} else {
+		content.appendChild(errorState);
+	}
+}
+
 function initSheet(container: HTMLElement) {
 	const content = container.querySelector(".sheet-content") as HTMLElement;
 	const closeButton = container.querySelector(".sheet-close");