From 84ec973ebdee1fb3c4d08cee241d6e55034cf124 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Mon, 8 Jun 2026 10:50:33 -0700
Subject: [PATCH 01/49] v1

---
 .../article-creator/FetchArticleFunctions.tsx |   6 +-
 .../custom_questions/AdvancedTextbox.tsx      | 461 +++++++++++++-----
 .../RenderAdvancedTextbox.tsx                 | 182 +++++--
 .../questions/checkForUnderstanding.tsx       |   4 +-
 .../digital-testing/QuestionPanel.tsx         |   6 +-
 src/components/questions/quizRenderer.tsx     |  25 +-
 src/components/questions/testRenderer.tsx     |   1 +
 src/types/questions.ts                        |   4 +
 8 files changed, 499 insertions(+), 190 deletions(-)

diff --git a/src/components/article-creator/FetchArticleFunctions.tsx b/src/components/article-creator/FetchArticleFunctions.tsx
index fb68455e..ba51a29e 100644
--- a/src/components/article-creator/FetchArticleFunctions.tsx
+++ b/src/components/article-creator/FetchArticleFunctions.tsx
@@ -37,7 +37,11 @@ export const processQuestions = async (
       ...question.options.flatMap((option) => option.value.files || []),
     ];
 
-    allFiles.forEach((file) => allFileKeys.add(file.key));
+    allFiles.forEach((file) => {
+      if (!file.url?.startsWith("http")) {
+        allFileKeys.add(file.key);
+      }
+    });
   });
 
   // Read all files from IndexedDB
diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index 36beb74b..290883db 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -8,12 +8,11 @@ import { Textarea } from "@/components/ui/textarea";
 import type {
   QuestionFile,
   QuestionFormat,
-  QuestionInput,
 } from "@/types/questions";
-import { QuestionsInput } from "./QuestionInstance";
-import { Paperclip, Trash } from "lucide-react";
-import { deleteObject, getStorage, ref } from "firebase/storage";
+import { Paperclip, Trash, ChevronLeft, ChevronRight } from "lucide-react";
+import { deleteObject, getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { getUser } from "@/components/hooks/users";
+import { getFileFromIndexedDB } from "./RenderAdvancedTextbox";
 
 interface Props {
   questions: QuestionFormat[];
@@ -73,6 +72,61 @@ function deleteFileFromIndexedDB(name: string) {
   });
 }
 
+// Helper component to display visual thumbnails/previews of files in editing mode
+const ThumbnailPreview: React.FC<{ file: QuestionFile }> = ({ file }) => {
+  const [src, setSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    let url: string | null = null;
+    if (file.url) {
+      setSrc(file.url);
+      return;
+    }
+
+    const loadLocal = async () => {
+      try {
+        const stored = await getFileFromIndexedDB(file.key);
+        if (stored?.file) {
+          url = URL.createObjectURL(stored.file);
+          setSrc(url);
+        }
+      } catch (err) {
+        console.error("Error loading thumbnail:", err);
+      }
+    };
+    void loadLocal();
+
+    return () => {
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [file]);
+
+  if (!src) {
+    return (
+      <div className="flex h-20 w-20 items-center justify-center rounded bg-gray-100 text-gray-400">
+        <span className="text-[10px]">Loading...</span>
+      </div>
+    );
+  }
+
+  if (file.key.startsWith("image-") || file.key.startsWith("image/")) {
+    return (
+      <img
+        src={src}
+        alt="Thumbnail preview"
+        className="h-20 w-20 rounded object-cover border border-gray-200"
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-20 w-20 flex-col items-center justify-center rounded bg-blue-50 border border-blue-200 text-blue-500">
+      <Paperclip size={20} />
+      <span className="mt-1 text-[9px] truncate max-w-[70px] px-1">{file.name}</span>
+    </div>
+  );
+};
+
 export default function AdvancedTextbox({
   questions,
   qIndex,
@@ -85,16 +139,19 @@ export default function AdvancedTextbox({
   const questionInstance = questions[qIndex];
   const [currentText, setCurrentText] = useState<string>("");
   const [uploadedFiles, setUploadedFiles] = useState<QuestionFile[]>([]);
+  const [uploadStatuses, setUploadStatuses] = useState<
+    Record<string, { status: "uploading" | "success" | "error"; error?: string }>
+  >({});
+
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Initialize currentText and fileExists when question gets loaded from db if any
+  // Sync state when loaded
   useEffect(() => {
     if (origin === "option" && oIndex !== undefined) {
       if (questionInstance!.options[oIndex]?.value?.value) {
         setCurrentText(questionInstance!.options[oIndex].value.value);
       }
-
       setUploadedFiles(questionInstance!.options[oIndex]?.value?.files ?? []);
     } else if (
       origin === "question" ||
@@ -108,8 +165,8 @@ export default function AdvancedTextbox({
     }
   }, [questionInstance, oIndex, origin]);
 
+  // Handle keys logic
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Keys are being handled by EditorJS rather than default behavior, so we need to block the EditorJS behavior
     const key = e.key;
 
     if (
@@ -131,11 +188,9 @@ export default function AdvancedTextbox({
       const textBeforeCursor = currentText.substring(0, cursorPosition);
       const textAfterCursor = currentText.substring(textarea.selectionEnd);
 
-      // Find the current line the cursor is on
       const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
       const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
       
-      // Match leading whitespace
       const match = currentLine.match(/^\s*/);
       const leadingWhitespace = match ? match[0] : "";
 
@@ -162,11 +217,9 @@ export default function AdvancedTextbox({
         const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
         const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
 
-        // If the line up to the cursor is purely spaces, treat it as indentation
         if (currentLine.length > 0 && /^\s+$/.test(currentLine)) {
           e.preventDefault();
           
-          // delete 2 spaces instead of 1 if possible
           const spacesToDelete = currentLine.length % 2 !== 0 ? 1 : 2;
 
           const newText = 
@@ -208,10 +261,37 @@ export default function AdvancedTextbox({
     }
   };
 
+  const updateQuestionsWithFiles = (newFiles: QuestionFile[]) => {
+    setUnsavedChanges?.(true);
+    const updatedQuestions = [...questions];
+    const updatedQuestion = { ...questionInstance! };
+
+    if (origin === "question" || origin === "explanation" || origin === "content") {
+      updatedQuestion[origin] = {
+        ...updatedQuestion[origin],
+        files: newFiles,
+      };
+    } else if (origin === "option" && oIndex !== undefined) {
+      updatedQuestion.options = [
+        ...updatedQuestion.options.slice(0, oIndex),
+        {
+          value: {
+            ...updatedQuestion.options[oIndex]!.value,
+            files: newFiles,
+          },
+          id: updatedQuestion.options[oIndex]!.id,
+        },
+        ...updatedQuestion.options.slice(oIndex + 1),
+      ];
+    }
+
+    updatedQuestions[qIndex] = updatedQuestion;
+    setQuestions(updatedQuestions);
+  };
+
   const updateQuestionText = (newText: string) => {
     setUnsavedChanges?.(true);
     setCurrentText(newText);
-    // Clone the current question to avoid direct mutation
     const updatedQuestions = [...questions];
     if (
       origin === "question" ||
@@ -223,12 +303,11 @@ export default function AdvancedTextbox({
         [origin]: {
           ...questionInstance![origin],
           value: newText,
-          files: questionInstance?.[origin]?.files ?? [], // Keep the files they exist
-        }, // Clone question
+          files: questionInstance?.[origin]?.files ?? [],
+        },
       };
       updatedQuestions[qIndex] = updatedQuestion;
     } else if (origin === "option" && oIndex !== undefined) {
-      // oIndex !== undefined because 0 is falsy
       const updatedQuestion: QuestionFormat = {
         ...questionInstance!,
         options: [
@@ -246,7 +325,7 @@ export default function AdvancedTextbox({
       updatedQuestions[qIndex] = updatedQuestion;
     }
 
-    setQuestions(updatedQuestions); // Update state immutably
+    setQuestions(updatedQuestions);
   };
 
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -257,6 +336,44 @@ export default function AdvancedTextbox({
     fileInputRef.current?.click();
   };
 
+  // Immediate upload to Firebase Storage
+  const uploadSingleFile = async (fileKey: string, file: File) => {
+    setUploadStatuses((prev) => ({
+      ...prev,
+      [fileKey]: { status: "uploading" },
+    }));
+
+    try {
+      const storage = getStorage();
+      const storageRef = ref(storage, fileKey);
+      const snapshot = await uploadBytes(storageRef, file);
+      const downloadURL = await getDownloadURL(snapshot.ref);
+
+      setUploadStatuses((prev) => ({
+        ...prev,
+        [fileKey]: { status: "success" },
+      }));
+
+      // Update the file URL in the state and questions
+      setUploadedFiles((prevFiles) => {
+        const updated = prevFiles.map((f) =>
+          f.key === fileKey ? { ...f, url: downloadURL } : f
+        );
+        updateQuestionsWithFiles(updated);
+        return updated;
+      });
+    } catch (err) {
+      console.error(`Failed to upload file ${file.name}:`, err);
+      setUploadStatuses((prev) => ({
+        ...prev,
+        [fileKey]: {
+          status: "error",
+          error: err instanceof Error ? err.message : "Upload failed",
+        },
+      }));
+    }
+  };
+
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];
     let files = Array.from(fileList).filter(
@@ -274,71 +391,40 @@ export default function AdvancedTextbox({
       alert(
         "No valid file selected (photo or audio). Try uploading again or contact support.",
       );
-      return; // Early return if file is not defined
+      return;
     }
 
-    const storeAndAppendIfNewKey = (
-      questionInput: QuestionInput,
-      files: File[],
-    ) => {
-      const newFiles = files.flatMap((file) => {
-        const fileKey = `${file.type}-${file.lastModified}`;
-        if (questionInput.files.map((file) => file.key).includes(fileKey)) {
-          return [];
-        } else {
-          storeFileInIndexedDB(fileKey, file);
-          return [
-            {
-              key: fileKey,
-              name: file.name,
-            },
-          ];
-        }
-      });
-      // Recreate array for set state
-      questionInput.files = [...questionInput.files, ...newFiles];
-    };
+    const newFiles: QuestionFile[] = [];
+    const filesToUpload: { key: string; file: File }[] = [];
 
-    const updatedQuestions = [...questions];
-    const updatedQuestion: QuestionFormat = { ...questionInstance! };
+    files.forEach((file) => {
+      // Create a unique key that works cleanly in storage
+      const sanitizedType = file.type.replace(/\//g, "-");
+      const fileKey = `${sanitizedType}-${Date.now()}-${file.name}`;
+      
+      storeFileInIndexedDB(fileKey, file);
 
-    if (origin === "question") {
-      const questionInput: QuestionInput = { ...updatedQuestion.question };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.question = questionInput;
-      setUploadedFiles(questionInput.files);
-    } else if (origin === "option" && oIndex !== undefined) {
-      // Update a specific option by oIndex
-      const optionInput: QuestionInput = {
-        ...updatedQuestion.options[oIndex]!.value,
-      };
-      storeAndAppendIfNewKey(optionInput, files);
-      updatedQuestion.options[oIndex]!.value = optionInput; // Update only the specified option
-      setUploadedFiles(optionInput.files);
-    } else if (origin === "explanation") {
-      const questionInput: QuestionInput = {
-        ...updatedQuestion.explanation,
-      };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.explanation = questionInput;
-      setUploadedFiles(questionInput.files);
-    } else if (origin === "content") {
-      const questionInput: QuestionInput = { ...updatedQuestion.content };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.content = questionInput;
-      setUploadedFiles(questionInput.files);
-    }
-    updatedQuestions[qIndex] = updatedQuestion;
+      newFiles.push({
+        key: fileKey,
+        name: file.name,
+        order: uploadedFiles.length + newFiles.length,
+      });
 
-    setQuestions(updatedQuestions);
-    setUnsavedChanges?.(true);
+      filesToUpload.push({ key: fileKey, file });
+    });
+
+    const nextFiles = [...uploadedFiles, ...newFiles];
+    setUploadedFiles(nextFiles);
+    updateQuestionsWithFiles(nextFiles);
 
-    // Reset input value so duplicate files can be reuploaded in the case of deletion
-    // Code logic will catch actual duplicates
     e.target.value = "";
+
+    // Trigger immediate uploads
+    filesToUpload.forEach(({ key, file }) => {
+      void uploadSingleFile(key, file);
+    });
   };
 
-  // Function to delete a file from Firebase Storage
   async function deleteFileFromStorage(fileKey: string): Promise<void> {
     const user = await getUser();
 
@@ -355,57 +441,78 @@ export default function AdvancedTextbox({
       await deleteObject(storageRef);
     } catch (error) {
       console.error(`Error deleting file ${fileKey} from storage:`, error);
-      // You might want to handle specific error codes here
       return;
     }
   }
 
-  const handleDeleteFile = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const fileKey = e.currentTarget.dataset.fileKey;
+  const handleDeleteFile = (fileKey: string) => {
+    const nextFiles = uploadedFiles.filter((file) => file.key !== fileKey);
+    setUploadedFiles(nextFiles);
+    updateQuestionsWithFiles(nextFiles);
 
-    if (!fileKey) {
-      alert("Error deleting file, please try again");
-      return;
-    }
+    setUploadStatuses((prev) => {
+      const next = { ...prev };
+      delete next[fileKey];
+      return next;
+    });
 
-    const updatedQuestions = [...questions];
-    const updatedQuestion: QuestionFormat = { ...questionInstance! };
+    void deleteFileFromIndexedDB(fileKey);
+    void deleteFileFromStorage(fileKey);
+  };
 
-    const deleteFile = (question: QuestionInput) => {
-      deleteFileFromIndexedDB(fileKey).catch((error) => {
-        console.error("Error deleting file from IndexedDB:", error);
-      });
-      deleteFileFromStorage(fileKey).catch((error) => {
-        console.error("Error deleting file from Storage:", error);
-      });
+  const handleRetryUpload = async (fileKey: string, fileName: string) => {
+    try {
+      const stored = await getFileFromIndexedDB(fileKey);
+      if (stored?.file) {
+        void uploadSingleFile(fileKey, stored.file);
+      } else {
+        alert(`Could not find local file data for "${fileName}". Please remove and re-upload.`);
+      }
+    } catch (err) {
+      console.error("Retry load from IndexedDB failed:", err);
+      alert("Failed to retry. Please try uploading the file again.");
+    }
+  };
 
-      question.files = question.files.filter((file) => file.key !== fileKey);
-      setUploadedFiles(question.files);
-    };
+  const updateFileAlt = (fileKey: string, newAlt: string) => {
+    const updated = uploadedFiles.map((f) =>
+      f.key === fileKey ? { ...f, alt: newAlt } : f
+    );
+    setUploadedFiles(updated);
+    updateQuestionsWithFiles(updated);
+  };
 
-    if (
-      origin === "question" ||
-      origin === "explanation" ||
-      origin === "content"
-    ) {
-      const questionInput: QuestionInput = { ...updatedQuestion[origin] };
+  const moveFile = (index: number, direction: "left" | "right") => {
+    const targetIndex = index + (direction === "left" ? -1 : 1);
+    if (targetIndex < 0 || targetIndex >= uploadedFiles.length) return;
 
-      deleteFile(questionInput);
+    const nextFiles = [...uploadedFiles];
+    const temp = nextFiles[index]!;
+    nextFiles[index] = nextFiles[targetIndex]!;
+    nextFiles[targetIndex] = temp;
 
-      updatedQuestion[origin] = questionInput;
-    } else if (origin === "option" && oIndex !== undefined) {
-      const optionInput: QuestionInput = {
-        ...updatedQuestion.options[oIndex]!.value,
-      };
+    const orderedFiles = nextFiles.map((f, idx) => ({ ...f, order: idx }));
+    setUploadedFiles(orderedFiles);
+    updateQuestionsWithFiles(orderedFiles);
+  };
 
-      deleteFile(optionInput);
+  const insertPlaceholder = (file: QuestionFile, index: number) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
 
-      updatedQuestion.options[oIndex]!.value = optionInput;
-    }
+    const placeholderText = `[image:${index + 1}]`;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
 
-    updatedQuestions[qIndex] = updatedQuestion;
-    setQuestions(updatedQuestions);
-    setUnsavedChanges?.(true);
+    const newText =
+      currentText.substring(0, start) + placeholderText + currentText.substring(end);
+    
+    updateQuestionText(newText);
+
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + placeholderText.length, start + placeholderText.length);
+    }, 0);
   };
 
   return (
@@ -417,7 +524,7 @@ export default function AdvancedTextbox({
         onKeyDown={handleKeyDown}
         placeholder={
           placeholder ??
-          "Type or drag and drop here (only 1 file allowed). Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code."
+          "Type or drag and drop here. Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code. References to images can be made via [image:1] placeholders."
         }
       />
 
@@ -430,28 +537,128 @@ export default function AdvancedTextbox({
         multiple
       />
 
-      {/* Section under the textarea for upload and delete buttons */}
-      <div className="mt-2">
-        {uploadedFiles.length > 0 &&
-          uploadedFiles.map((file) => (
-            <div key={file.key} className="mb-2 flex items-center space-x-2">
-              <button
-                type="button"
-                className="flex items-center text-red-500 hover:underline"
-                onClick={handleDeleteFile}
-                data-file-key={file.key}
+      {/* Grid of uploaded file cards with visual preview, load states, and alt tag fields */}
+      {uploadedFiles.length > 0 && (
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {uploadedFiles.map((file, index) => {
+            const statusInfo = uploadStatuses[file.key] ?? {
+              status: file.url ? "success" : "uploading",
+            };
+            return (
+              <div
+                key={file.key}
+                className="flex flex-col rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all duration-200 hover:shadow"
               >
-                Delete file <Trash className="ml-1 size-5" />
-              </button>
-              <div>{file.name}</div>
-            </div>
-          ))}
+                <div className="flex items-start gap-3">
+                  <div className="relative shrink-0">
+                    <ThumbnailPreview file={file} />
+                    {statusInfo.status === "uploading" && (
+                      <div className="absolute inset-0 flex items-center justify-center rounded bg-black/40">
+                        <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-xs font-semibold text-gray-800" title={file.name}>
+                      {file.name}
+                    </div>
+
+                    {statusInfo.status === "error" && (
+                      <div className="mt-1 flex flex-col gap-1">
+                        <span className="text-[10px] font-bold text-red-500">
+                          Upload failed: {statusInfo.error ?? "Unknown error"}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => handleRetryUpload(file.key, file.name)}
+                          className="w-fit text-[10px] font-medium text-blue-600 hover:underline"
+                        >
+                          Retry Upload
+                        </button>
+                      </div>
+                    )}
+
+                    {statusInfo.status === "success" && (
+                      <span className="mt-1 inline-flex items-center rounded bg-green-50 px-1.5 py-0.5 text-[9px] font-medium text-green-700 border border-green-200">
+                        Uploaded
+                      </span>
+                    )}
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteFile(file.key)}
+                    className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500 transition-colors"
+                    title="Remove file"
+                  >
+                    <Trash size={14} />
+                  </button>
+                </div>
+
+                <div className="mt-3 flex flex-col gap-2 border-t border-gray-100 pt-2">
+                  <div className="flex items-center gap-1.5">
+                    <label
+                      htmlFor={`alt-${file.key}`}
+                      className="text-[9px] font-bold text-gray-500 uppercase tracking-wider shrink-0"
+                    >
+                      Alt:
+                    </label>
+                    <input
+                      id={`alt-${file.key}`}
+                      type="text"
+                      placeholder="Alt text (e.g. Graph of sales)"
+                      value={file.alt ?? ""}
+                      onChange={(e) => updateFileAlt(file.key, e.target.value)}
+                      className="flex h-7 w-full rounded border border-gray-200 bg-background px-2 py-1 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300 placeholder:text-gray-400"
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        disabled={index === 0}
+                        onClick={() => moveFile(index, "left")}
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
+                        title="Move left/up"
+                      >
+                        <ChevronLeft size={12} />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={index === uploadedFiles.length - 1}
+                        onClick={() => moveFile(index, "right")}
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
+                        title="Move right/down"
+                      >
+                        <ChevronRight size={12} />
+                      </button>
+                    </div>
+
+                    <button
+                      type="button"
+                      onClick={() => insertPlaceholder(file, index)}
+                      className="rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 hover:bg-blue-100 transition-colors"
+                      title="Insert inline placeholder tag"
+                    >
+                      Insert Inline
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="mt-2 flex justify-end">
         <button
           type="button"
-          className="flex items-center text-blue-500 hover:underline"
+          className="flex items-center gap-1 rounded-md border border-blue-500 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 hover:bg-blue-100 hover:text-blue-700 transition-all shadow-sm"
           onClick={handleUploadClick}
         >
-          Add file <Paperclip className="ml-1 size-5" />
+          <Paperclip size={14} /> Add file
         </button>
       </div>
     </div>
diff --git a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
index 2cfda0c3..fe497aff 100644
--- a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
@@ -2,11 +2,13 @@ import React, { useState, useEffect } from "react";
 import katex from "katex";
 import type { QuestionFile, QuestionInput } from "@/types/questions";
 import "../../../styles/katexStyling.css";
-import Image from "next/image";
 import { decodeEntities, katexMacros } from "../Renderer";
 
+import { cn } from "@/lib/utils";
+
 interface Props {
   content: QuestionInput;
+  origin?: "question" | "explanation" | "option" | "content";
 }
 
 interface FileWrapper {
@@ -100,14 +102,12 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
 
   if (file.key.startsWith("image/")) {
     return (
-      <div className="my-2">
-        <Image
+      <div className="my-2 w-full flex justify-center">
+        <img
           src={objectUrl}
-          alt="Uploaded image"
-          width={16}
-          height={9}
-          layout="responsive"
-          className="h-auto max-w-full"
+          alt={file.alt ?? "Uploaded image"}
+          loading="lazy"
+          className="h-auto max-h-[450px] w-auto max-w-full rounded-md object-contain shadow-sm transition-shadow duration-200 hover:shadow-md"
         />
       </div>
     );
@@ -116,7 +116,7 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   if (file.key.startsWith("audio/")) {
     return (
       <div className="my-2">
-        <audio controls>
+        <audio controls className="w-full max-w-md">
           <source src={objectUrl} type="audio/mpeg" />
           Your browser does not support the audio element.
         </audio>
@@ -127,45 +127,139 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   return null;
 };
 
-export function RenderContent({ content }: Props) {
+export function RenderContent({ content, origin }: Props) {
+  // Sort files by their order index, default to stable positioning
+  const sortedFiles = [...(content.files || [])].sort((a, b) => {
+    const orderA = a.order ?? 999;
+    const orderB = b.order ?? 999;
+    return orderA - orderB;
+  });
+
+  const renderedInlineKeys = new Set<string>();
+
+  // Function to search for a matching file based on placeholder string
+  const getMatchingFile = (param: string) => {
+    const trimmed = param.trim();
+    // 1. Check if 1-based index (e.g., [image:1])
+    const index = parseInt(trimmed, 10);
+    if (!isNaN(index) && index > 0 && index <= sortedFiles.length) {
+      return sortedFiles[index - 1];
+    }
+    // 2. Check if direct file key matches
+    const byKey = sortedFiles.find((f) => f.key === trimmed);
+    if (byKey) return byKey;
+    // 3. Check if filename matches (case-insensitive)
+    const byName = sortedFiles.find(
+      (f) =>
+        f.name.toLowerCase() === trimmed.toLowerCase() ||
+        f.name.split(".")[0]?.toLowerCase() === trimmed.toLowerCase()
+    );
+    if (byName) return byName;
+    return null;
+  };
+
+  const tokens = decodeEntities(content.value)
+    .split(/(```[\s\S]*?```|\$@[^$]+\$|\[image:[^\]]+\])/g)
+    .map((token, tokenIndex) => {
+      if (token.startsWith("```") && token.endsWith("```")) {
+        const codeContent = token.slice(3, -3).replace(/^\n/, "");
+        return (
+          <pre
+            key={`code-${tokenIndex}`}
+            className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
+            style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
+          >
+            <code>{codeContent}</code>
+          </pre>
+        );
+      } else if (token.startsWith("$@") && token.endsWith("$")) {
+        return (
+          <span
+            key={`latex-${tokenIndex}`}
+            dangerouslySetInnerHTML={{
+              __html: katex.renderToString(token.slice(2, -1), {
+                throwOnError: false,
+                macros: katexMacros,
+              }),
+            }}
+          ></span>
+        );
+      } else if (token.startsWith("[image:") && token.endsWith("]")) {
+        const param = token.slice(7, -1);
+        const matchedFile = getMatchingFile(param);
+        if (matchedFile) {
+          renderedInlineKeys.add(matchedFile.key);
+          return (
+            <div key={`inline-img-${tokenIndex}`} className="my-4 block text-center">
+              <FileRenderer file={matchedFile} />
+              {matchedFile.alt && (
+                <span className="mt-1 block text-center text-xs italic text-gray-500">
+                  {matchedFile.alt}
+                </span>
+              )}
+            </div>
+          );
+        }
+      }
+      return <span key={`text-${tokenIndex}`}>{token}</span>;
+    });
+
+  // Filter out files that were already rendered inline
+  const remainingFiles = sortedFiles.filter((file) => !renderedInlineKeys.has(file.key));
+  const remainingImages = remainingFiles.filter((file) => file.key.startsWith("image/"));
+  const remainingAudio = remainingFiles.filter((file) => file.key.startsWith("audio/"));
+
   return (
     <div className="custom-katex my-2 whitespace-pre-wrap">
-      {/* Render text content directly */}
-      {decodeEntities(content.value)
-        .split(/(```[\s\S]*?```|\$@[^$]+\$)/g)
-        .map((token, tokenIndex) => {
-          if (token.startsWith("```") && token.endsWith("```")) {
-            // Strip the ``` from start and end, and remove the leading newline.
-            const codeContent = token.slice(3, -3).replace(/^\n/, "");
-            return (
-              <pre
-                key={`code-${tokenIndex}`}
-                className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
-                style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
-              >
-                <code>{codeContent}</code>
-              </pre>
-            );
-          } else if (token.startsWith("$@") && token.endsWith("$")) {
-            return (
-              <span
-                key={`latex-${tokenIndex}`}
-                dangerouslySetInnerHTML={{
-                  __html: katex.renderToString(token.slice(2, -1), {
-                    throwOnError: false,
-                    macros: katexMacros,
-                  }),
-                }}
-              ></span>
-            );
-          }
-          return <span key={`text-${tokenIndex}`}>{token}</span>;
-        })}
-
-      {/* Render files through individual components */}
-      {content.files?.map((file) => (
+      {/* Render parsed inline block elements */}
+      {tokens}
+
+      {/* Render any leftover audio files */}
+      {remainingAudio.map((file) => (
         <FileRenderer key={file.key} file={file} />
       ))}
+
+      {/* Render remaining images */}
+      {remainingImages.length > 0 && (
+        <div className="mt-4">
+          {origin === "question" && remainingImages.length >= 2 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+              {remainingImages.map((file, idx) => {
+                const isThirdOfThree = remainingImages.length === 3 && idx === 2;
+                return (
+                  <div
+                    key={file.key}
+                    className={cn(
+                      "flex flex-col items-center justify-center p-2 rounded-lg border border-gray-200 bg-gray-50/40 shadow-sm",
+                      isThirdOfThree && "sm:col-span-2 sm:max-w-2xl sm:mx-auto w-full"
+                    )}
+                  >
+                    <FileRenderer file={file} />
+                    {file.alt && (
+                      <span className="mt-1 block text-center text-xs italic text-gray-500">
+                        {file.alt}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex flex-col gap-4">
+              {remainingImages.map((file) => (
+                <div key={file.key} className="flex flex-col items-center">
+                  <FileRenderer file={file} />
+                  {file.alt && (
+                    <span className="mt-1 block text-center text-xs italic text-gray-500">
+                      {file.alt}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/questions/checkForUnderstanding.tsx b/src/components/questions/checkForUnderstanding.tsx
index 5980e8af..bbe304f3 100644
--- a/src/components/questions/checkForUnderstanding.tsx
+++ b/src/components/questions/checkForUnderstanding.tsx
@@ -62,7 +62,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
   return (
     <div className="max-w-6xl rounded-lg border border-primary bg-primary-foreground p-4">
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       {isFrq ? (
@@ -131,7 +131,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
           {!isFrq && questionInstance.explanation.value && (
             <div className="mt-4 rounded-md border border-primary bg-white p-3">
               <strong>Explanation:</strong>
-              <RenderContent content={questionInstance.explanation} />
+              <RenderContent content={questionInstance.explanation} origin="explanation" />
             </div>
           )}
           <button
diff --git a/src/components/questions/digital-testing/QuestionPanel.tsx b/src/components/questions/digital-testing/QuestionPanel.tsx
index 96f2664e..32dab5b9 100644
--- a/src/components/questions/digital-testing/QuestionPanel.tsx
+++ b/src/components/questions/digital-testing/QuestionPanel.tsx
@@ -99,7 +99,7 @@ export default function QuestionPanel({
   return (
     <div className="relative">
       <div className="my-4 text-lg">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       <div className="grid gap-4">
@@ -145,7 +145,7 @@ export default function QuestionPanel({
                       isStrikedThrough && "opacity-50",
                     )}
                   >
-                    <RenderContent content={option.value} />
+                    <RenderContent content={option.value} origin="option" />
                   </span>
 
                   {!submitted && showEliminationTools && (
@@ -181,7 +181,7 @@ export default function QuestionPanel({
         {submitted && (
           <div className="rounded-lg border bg-gray-100 p-3">
             <h3 className="mb-2 text-lg font-semibold">Explanation:</h3>
-            <RenderContent content={questionInstance.explanation} />
+            <RenderContent content={questionInstance.explanation} origin="explanation" />
           </div>
         )}
       </div>
diff --git a/src/components/questions/quizRenderer.tsx b/src/components/questions/quizRenderer.tsx
index 58c72340..43483c4d 100644
--- a/src/components/questions/quizRenderer.tsx
+++ b/src/components/questions/quizRenderer.tsx
@@ -85,7 +85,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             : "Answers revealed")}
       </div>
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       {isFrq ? (
@@ -111,19 +111,18 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             <button
               key={option.id}
               className={`rounded-md border px-2 text-left shadow transition-colors
-            ${
-              showResults
-                ? isAnswerCorrect(option.id)
-                  ? answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-green-700 bg-green-300"
-                    : "border-green-700 bg-green-100"
+            ${showResults
+                  ? isAnswerCorrect(option.id)
+                    ? answers[currentQuestionIndex]?.includes(option.id)
+                      ? "border-green-700 bg-green-300"
+                      : "border-green-700 bg-green-100"
+                    : answers[currentQuestionIndex]?.includes(option.id)
+                      ? "border-red-700 bg-red-300"
+                      : "border-gray-300 bg-white"
                   : answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-red-700 bg-red-300"
+                    ? "border-blue-500 bg-blue-100"
                     : "border-gray-300 bg-white"
-                : answers[currentQuestionIndex]?.includes(option.id)
-                  ? "border-blue-500 bg-blue-100"
-                  : "border-gray-300 bg-white"
-            }
+                }
             `}
               onClick={() => handleSelectOption(option.id)}
               disabled={showResults}
@@ -150,7 +149,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
       {showResults && !isFrq && questionInstance.explanation.value && (
         <div className="mt-4 rounded-md border border-primary bg-white p-3">
           <strong>Explanation:</strong>
-          <RenderContent content={questionInstance.explanation} />
+          <RenderContent content={questionInstance.explanation} origin="explanation" />
         </div>
       )}
 
diff --git a/src/components/questions/testRenderer.tsx b/src/components/questions/testRenderer.tsx
index 16fa4266..c6720bae 100644
--- a/src/components/questions/testRenderer.tsx
+++ b/src/components/questions/testRenderer.tsx
@@ -153,6 +153,7 @@ export default function DigitalTestingPage({
                 >
                   <RenderContent
                     content={questions[currentQuestionIndex]!.content}
+                    origin="content"
                   />
                 </Highlighter>
               </div>
diff --git a/src/types/questions.ts b/src/types/questions.ts
index 1b88859d..83def309 100644
--- a/src/types/questions.ts
+++ b/src/types/questions.ts
@@ -2,8 +2,12 @@ export interface QuestionFile {
   key: string;
   url?: string;
   name: string;
+  id?: string;
+  alt?: string;
+  order?: number;
 }
 
+
 export interface QuestionInput {
   value: string;
   files: QuestionFile[];

From bbcd7a4ccbf2d47ed95ac26df12a4aa04c5447c8 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Mon, 8 Jun 2026 18:54:38 -0700
Subject: [PATCH 02/49] feat: initialize Firebase SDKs, admin configuration,
 environment validation, and CORS middleware for feedback system

---
 src/lib/firebase-admin.ts | 42 ++++++++++++++++++++++++++++
 src/types/feedback.ts     | 58 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/lib/firebase-admin.ts
 create mode 100644 src/types/feedback.ts

diff --git a/src/lib/firebase-admin.ts b/src/lib/firebase-admin.ts
new file mode 100644
index 00000000..0b47ec7b
--- /dev/null
+++ b/src/lib/firebase-admin.ts
@@ -0,0 +1,42 @@
+import { initializeApp, getApps, cert } from "firebase-admin/app";
+import { getFirestore } from "firebase-admin/firestore";
+import { getAuth } from "firebase-admin/auth";
+
+function getFirebaseAdmin() {
+  if (getApps().length > 0) {
+    return {
+      adminDb: getFirestore(),
+      adminAuth: getAuth(),
+    };
+  }
+
+  // In development with emulators, we can initialize without credentials
+  // In production, use service account credentials from env vars
+  if (process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT) {
+    const serviceAccount = JSON.parse(
+      process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT,
+    );
+    initializeApp({
+      credential: cert(serviceAccount),
+      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+    });
+  } else {
+    // Auto-discover credentials (works in emulator and GCP environments)
+    initializeApp({
+      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+    });
+  }
+
+  const adminDb = getFirestore();
+  const adminAuth = getAuth();
+
+  // Connect to emulators in development
+  if (process.env.NODE_ENV === "development") {
+    process.env.FIRESTORE_EMULATOR_HOST = "127.0.0.1:8080";
+    process.env.FIREBASE_AUTH_EMULATOR_HOST = "127.0.0.1:9099";
+  }
+
+  return { adminDb, adminAuth };
+}
+
+export const { adminDb, adminAuth } = getFirebaseAdmin();
diff --git a/src/types/feedback.ts b/src/types/feedback.ts
new file mode 100644
index 00000000..637d81bf
--- /dev/null
+++ b/src/types/feedback.ts
@@ -0,0 +1,58 @@
+import type { Timestamp } from "firebase/firestore";
+
+export type FeedbackType = "bug" | "feedback" | "question";
+
+export type BugType =
+  | "article-errors"
+  | "unit-test-errors"
+  | "mock-exam-errors"
+  | "website-bugs"
+  | "other";
+
+export type FeedbackStatus = "pending" | "approved" | "rejected";
+
+export interface FeedbackSubmission {
+  id: string;
+  contact: string;
+  type: FeedbackType;
+  // Bug-specific fields
+  bugType?: BugType;
+  bugUrl?: string;
+  // Common fields
+  description: string;
+  imageUrls: string[];
+  // Metadata
+  status: FeedbackStatus;
+  submittedAt: Timestamp;
+  submittedBy: string | null;
+  // Review metadata (set after admin action)
+  reviewedAt?: Timestamp;
+  reviewedBy?: string;
+  githubIssueUrl?: string;
+  githubIssueNumber?: number;
+}
+
+/** Human-readable display labels for bug sub-types */
+export const BUG_TYPE_LABELS: Record<BugType, string> = {
+  "article-errors": "Website Article Errors",
+  "unit-test-errors": "Unit Test Errors",
+  "mock-exam-errors": "Mock Exam Errors",
+  "website-bugs": "Website Bugs",
+  other: "Other",
+};
+
+/** GitHub label mapping for bug sub-types */
+export const BUG_TYPE_GITHUB_LABELS: Record<BugType, string | null> = {
+  "article-errors": "article-errors",
+  "unit-test-errors": "unit-tests",
+  "mock-exam-errors": "mock-exam-errors",
+  "website-bugs": "frontend/bug",
+  other: null,
+};
+
+/** GitHub label mapping for feedback types */
+export const FEEDBACK_TYPE_GITHUB_LABELS: Record<FeedbackType, string> = {
+  bug: "Bug",
+  feedback: "Feedback",
+  question: "Question",
+};

From fe3f7a777d542f57fe45c650ce27f950e4ff8601 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 10 Jun 2026 11:54:25 -0700
Subject: [PATCH 03/49] fix issue

---
 src/app/admin/page.tsx                        |  3 -
 .../[slug]/[unit]/chapter/[id]/page.tsx       | 10 +--
 src/components/article-creator/Editor.tsx     | 78 ++++++++++++++++++-
 .../custom_questions/AdvancedTextbox.tsx      | 13 ++++
 src/components/hooks/UserContext.tsx          | 13 +++-
 5 files changed, 100 insertions(+), 17 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 43ecd0cd..e7773a5b 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -10,7 +10,6 @@ import { useUser } from "../../components/hooks/UserContext";
 import Link from "next/link";
 import { cn, formatSlug } from "@/lib/utils";
 import { Ban, ClipboardPen, PencilRuler, ShieldUser, X } from "lucide-react";
-import AdminImport from "@/components/admin/AdminImport";
 import { doc, updateDoc } from "firebase/firestore";
 import { db } from "@/lib/firebase";
 import { Button } from "@/components/ui/button";
@@ -44,8 +43,6 @@ const Page = () => {
         {user.access === "admin" && (
           <>
             <AdminPanel user={user} />
-            <h2 className="mt-6 text-2xl font-bold">Validate Editor JSON</h2>
-            <AdminImport />
           </>
         )}
 
diff --git a/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx b/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx
index fc3fd585..76e25b08 100644
--- a/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx
+++ b/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx
@@ -1,9 +1,5 @@
 "use client";
-import dynamic from "next/dynamic";
-const ArticleCreator = dynamic(
-  () => import("@/components/article-creator/ArticleCreator"),
-  { ssr: false },
-);
+import ArticleCreator from "@/components/article-creator/ArticleCreator";
 import { useUser } from "@/components/hooks/UserContext";
 import { buttonVariants } from "@/components/ui/button";
 import { ArrowLeft, ExternalLink, UserRoundCog } from "lucide-react";
@@ -19,7 +15,7 @@ const Page = () => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const pathParts = pathname.split("/").slice(-4);
+  const pathParts = (pathname ?? "").split("/").slice(-4);
 
   useEffect(() => {
     if ((!user || user?.access === "user") && !loading) {
@@ -28,7 +24,7 @@ const Page = () => {
   }, [user, loading, router]);
 
   return (
-    <div className="flex grow flex-col px-10 pt-10 xl:px-20">
+      <div className="flex grow flex-col px-10 pt-10 xl:px-20">
       <div className="mb-4 flex items-center justify-between gap-2">
         <Link
           className={cn(buttonVariants({ variant: "outline" }), "w-min")}
diff --git a/src/components/article-creator/Editor.tsx b/src/components/article-creator/Editor.tsx
index cf8c2b0d..5fddd6cc 100644
--- a/src/components/article-creator/Editor.tsx
+++ b/src/components/article-creator/Editor.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useRef, useState } from "react";
 import {
   type EditorConfig,
+  type MenuConfig,
   type ToolConstructable,
   type OutputData,
 } from "@editorjs/editorjs";
@@ -40,13 +41,78 @@ interface EditorImageData {
   stretched?: boolean;
 }
 
+type CustomImageTool = {
+  _data: EditorImageData;
+  api: {
+    blocks: {
+      getBlockIndex(blockId: string): number;
+      delete(index?: number): void;
+    };
+  };
+  block: {
+    id: string;
+  };
+  renderSettings(): MenuConfig;
+};
+
+const pendingStorageDeletes = new Set<string>();
+
+function isStorageObjectNotFoundError(error: unknown): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: unknown }).code === "storage/object-not-found"
+  );
+}
+
 // https://github.com/editor-js/image/issues/54#issuecomment-1546833098
 // https://github.com/editor-js/image/issues/27
 class CustomImage extends Image {
+  renderSettings(): MenuConfig {
+    const typedTool = this as unknown as CustomImageTool;
+    const baseImageTool = Image as unknown as {
+      prototype: {
+        renderSettings(this: CustomImageTool): MenuConfig;
+      };
+    };
+    // The EditorJS image package ships loose inherited typings here, so we
+    // constrain the call at the boundary instead of widening the rest of the file.
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    const settings = baseImageTool.prototype.renderSettings.call(typedTool);
+    const settingsArray = (Array.isArray(settings) ? settings : [settings]) as unknown[];
+
+    return [
+      {
+        name: "deleteImage",
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M6 6l1 14h10l1-14"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>`,
+        title: "Delete image",
+        onActivate: () => {
+          const { file } = typedTool._data;
+          const blockIndex = typedTool.api.blocks.getBlockIndex(typedTool.block.id);
+
+          if (blockIndex === -1) {
+            return;
+          }
+
+          if (file.storageRefFullPath) {
+            pendingStorageDeletes.add(file.storageRefFullPath);
+          }
+
+          typedTool.api.blocks.delete(blockIndex);
+        },
+      },
+      ...settingsArray,
+    ] as unknown as MenuConfig;
+  }
+
   removed() {
     const { file } = this._data as EditorImageData;
 
     if (!file.storageRefFullPath) return;
+    if (!pendingStorageDeletes.has(file.storageRefFullPath)) return;
+
+    pendingStorageDeletes.delete(file.storageRefFullPath);
 
     const storage = getStorage();
     const storageRef = ref(storage, file.storageRefFullPath);
@@ -55,10 +121,14 @@ class CustomImage extends Image {
         console.log("Deleted " + file.storageRefFullPath);
       })
       .catch((error) => {
-        console.log(error);
-        alert(
-          "Failed to delete image from Firebase Storage: notify FiveHive Website Team.\n" +
-            String(error),
+        if (isStorageObjectNotFoundError(error)) {
+          return;
+        }
+
+        console.error(
+          "Failed to delete image from Firebase Storage:",
+          file.storageRefFullPath,
+          error,
         );
       });
   }
diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index 290883db..3abcd557 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -24,6 +24,15 @@ interface Props {
   setUnsavedChanges?: (unchangedChanges: boolean) => void;
 }
 
+function isStorageObjectNotFoundError(error: unknown): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: unknown }).code === "storage/object-not-found"
+  );
+}
+
 // Utility to store a file in IndexedDB with a unique key for each instance
 function storeFileInIndexedDB(name: string, file: File) {
   const dbRequest = indexedDB.open("mediaFilesDB", 3);
@@ -440,6 +449,10 @@ export default function AdvancedTextbox({
       if (!storageRef) return;
       await deleteObject(storageRef);
     } catch (error) {
+      if (isStorageObjectNotFoundError(error)) {
+        return;
+      }
+
       console.error(`Error deleting file ${fileKey} from storage:`, error);
       return;
     }
diff --git a/src/components/hooks/UserContext.tsx b/src/components/hooks/UserContext.tsx
index 112112fa..ea5c8077 100644
--- a/src/components/hooks/UserContext.tsx
+++ b/src/components/hooks/UserContext.tsx
@@ -1,6 +1,8 @@
 import React, { createContext, useState, useEffect, useContext } from "react";
 import { getUser } from "./users";
 import type { User } from "@/types/user";
+import { auth } from "@/lib/firebase";
+import { onAuthStateChanged } from "firebase/auth";
 
 interface UserContextType {
   user: User | null;
@@ -26,20 +28,25 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
       setLoading(true);
       setError(null);
       const fetchedUser = await getUser();
-      if (fetchedUser) {
-        setUser(fetchedUser);
-      }
+      setUser(fetchedUser);
       setLoading(false);
     } catch (err) {
+      setUser(null);
       setLoading(false);
     }
   };
 
   useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, () => {
+      void fetchUser();
+    });
+
     fetchUser().catch((error) => {
       console.error("Error fetching user:", error);
       setLoading(false);
     });
+
+    return () => unsubscribe();
   }, []);
 
   const updateUser = async () => {

From 3af692243749ffcddc15a62ec6a1ecea60745e34 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 10 Jun 2026 12:02:03 -0700
Subject: [PATCH 04/49] undo accidental commits from different feature

---
 src/lib/firebase-admin.ts | 42 ----------------------------
 src/types/feedback.ts     | 58 ---------------------------------------
 2 files changed, 100 deletions(-)
 delete mode 100644 src/lib/firebase-admin.ts
 delete mode 100644 src/types/feedback.ts

diff --git a/src/lib/firebase-admin.ts b/src/lib/firebase-admin.ts
deleted file mode 100644
index 0b47ec7b..00000000
--- a/src/lib/firebase-admin.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { initializeApp, getApps, cert } from "firebase-admin/app";
-import { getFirestore } from "firebase-admin/firestore";
-import { getAuth } from "firebase-admin/auth";
-
-function getFirebaseAdmin() {
-  if (getApps().length > 0) {
-    return {
-      adminDb: getFirestore(),
-      adminAuth: getAuth(),
-    };
-  }
-
-  // In development with emulators, we can initialize without credentials
-  // In production, use service account credentials from env vars
-  if (process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT) {
-    const serviceAccount = JSON.parse(
-      process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT,
-    );
-    initializeApp({
-      credential: cert(serviceAccount),
-      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-    });
-  } else {
-    // Auto-discover credentials (works in emulator and GCP environments)
-    initializeApp({
-      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-    });
-  }
-
-  const adminDb = getFirestore();
-  const adminAuth = getAuth();
-
-  // Connect to emulators in development
-  if (process.env.NODE_ENV === "development") {
-    process.env.FIRESTORE_EMULATOR_HOST = "127.0.0.1:8080";
-    process.env.FIREBASE_AUTH_EMULATOR_HOST = "127.0.0.1:9099";
-  }
-
-  return { adminDb, adminAuth };
-}
-
-export const { adminDb, adminAuth } = getFirebaseAdmin();
diff --git a/src/types/feedback.ts b/src/types/feedback.ts
deleted file mode 100644
index 637d81bf..00000000
--- a/src/types/feedback.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Timestamp } from "firebase/firestore";
-
-export type FeedbackType = "bug" | "feedback" | "question";
-
-export type BugType =
-  | "article-errors"
-  | "unit-test-errors"
-  | "mock-exam-errors"
-  | "website-bugs"
-  | "other";
-
-export type FeedbackStatus = "pending" | "approved" | "rejected";
-
-export interface FeedbackSubmission {
-  id: string;
-  contact: string;
-  type: FeedbackType;
-  // Bug-specific fields
-  bugType?: BugType;
-  bugUrl?: string;
-  // Common fields
-  description: string;
-  imageUrls: string[];
-  // Metadata
-  status: FeedbackStatus;
-  submittedAt: Timestamp;
-  submittedBy: string | null;
-  // Review metadata (set after admin action)
-  reviewedAt?: Timestamp;
-  reviewedBy?: string;
-  githubIssueUrl?: string;
-  githubIssueNumber?: number;
-}
-
-/** Human-readable display labels for bug sub-types */
-export const BUG_TYPE_LABELS: Record<BugType, string> = {
-  "article-errors": "Website Article Errors",
-  "unit-test-errors": "Unit Test Errors",
-  "mock-exam-errors": "Mock Exam Errors",
-  "website-bugs": "Website Bugs",
-  other: "Other",
-};
-
-/** GitHub label mapping for bug sub-types */
-export const BUG_TYPE_GITHUB_LABELS: Record<BugType, string | null> = {
-  "article-errors": "article-errors",
-  "unit-test-errors": "unit-tests",
-  "mock-exam-errors": "mock-exam-errors",
-  "website-bugs": "frontend/bug",
-  other: null,
-};
-
-/** GitHub label mapping for feedback types */
-export const FEEDBACK_TYPE_GITHUB_LABELS: Record<FeedbackType, string> = {
-  bug: "Bug",
-  feedback: "Feedback",
-  question: "Question",
-};

From d90700bf87cff9078749b143948ae70120c13362 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 10 Jun 2026 12:04:06 -0700
Subject: [PATCH 05/49] undo changes from diff feature

---
 .../article-creator/FetchArticleFunctions.tsx |   6 +-
 .../custom_questions/AdvancedTextbox.tsx      | 461 +++++-------------
 .../RenderAdvancedTextbox.tsx                 | 182 ++-----
 .../questions/checkForUnderstanding.tsx       |   4 +-
 .../digital-testing/QuestionPanel.tsx         |   6 +-
 src/components/questions/quizRenderer.tsx     |  25 +-
 src/components/questions/testRenderer.tsx     |   1 -
 src/types/questions.ts                        |   4 -
 8 files changed, 190 insertions(+), 499 deletions(-)

diff --git a/src/components/article-creator/FetchArticleFunctions.tsx b/src/components/article-creator/FetchArticleFunctions.tsx
index ba51a29e..fb68455e 100644
--- a/src/components/article-creator/FetchArticleFunctions.tsx
+++ b/src/components/article-creator/FetchArticleFunctions.tsx
@@ -37,11 +37,7 @@ export const processQuestions = async (
       ...question.options.flatMap((option) => option.value.files || []),
     ];
 
-    allFiles.forEach((file) => {
-      if (!file.url?.startsWith("http")) {
-        allFileKeys.add(file.key);
-      }
-    });
+    allFiles.forEach((file) => allFileKeys.add(file.key));
   });
 
   // Read all files from IndexedDB
diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index 3abcd557..17666f21 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -8,11 +8,12 @@ import { Textarea } from "@/components/ui/textarea";
 import type {
   QuestionFile,
   QuestionFormat,
+  QuestionInput,
 } from "@/types/questions";
-import { Paperclip, Trash, ChevronLeft, ChevronRight } from "lucide-react";
-import { deleteObject, getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import { QuestionsInput } from "./QuestionInstance";
+import { Paperclip, Trash } from "lucide-react";
+import { deleteObject, getStorage, ref } from "firebase/storage";
 import { getUser } from "@/components/hooks/users";
-import { getFileFromIndexedDB } from "./RenderAdvancedTextbox";
 
 interface Props {
   questions: QuestionFormat[];
@@ -81,61 +82,6 @@ function deleteFileFromIndexedDB(name: string) {
   });
 }
 
-// Helper component to display visual thumbnails/previews of files in editing mode
-const ThumbnailPreview: React.FC<{ file: QuestionFile }> = ({ file }) => {
-  const [src, setSrc] = useState<string | null>(null);
-
-  useEffect(() => {
-    let url: string | null = null;
-    if (file.url) {
-      setSrc(file.url);
-      return;
-    }
-
-    const loadLocal = async () => {
-      try {
-        const stored = await getFileFromIndexedDB(file.key);
-        if (stored?.file) {
-          url = URL.createObjectURL(stored.file);
-          setSrc(url);
-        }
-      } catch (err) {
-        console.error("Error loading thumbnail:", err);
-      }
-    };
-    void loadLocal();
-
-    return () => {
-      if (url) URL.revokeObjectURL(url);
-    };
-  }, [file]);
-
-  if (!src) {
-    return (
-      <div className="flex h-20 w-20 items-center justify-center rounded bg-gray-100 text-gray-400">
-        <span className="text-[10px]">Loading...</span>
-      </div>
-    );
-  }
-
-  if (file.key.startsWith("image-") || file.key.startsWith("image/")) {
-    return (
-      <img
-        src={src}
-        alt="Thumbnail preview"
-        className="h-20 w-20 rounded object-cover border border-gray-200"
-      />
-    );
-  }
-
-  return (
-    <div className="flex h-20 w-20 flex-col items-center justify-center rounded bg-blue-50 border border-blue-200 text-blue-500">
-      <Paperclip size={20} />
-      <span className="mt-1 text-[9px] truncate max-w-[70px] px-1">{file.name}</span>
-    </div>
-  );
-};
-
 export default function AdvancedTextbox({
   questions,
   qIndex,
@@ -148,19 +94,16 @@ export default function AdvancedTextbox({
   const questionInstance = questions[qIndex];
   const [currentText, setCurrentText] = useState<string>("");
   const [uploadedFiles, setUploadedFiles] = useState<QuestionFile[]>([]);
-  const [uploadStatuses, setUploadStatuses] = useState<
-    Record<string, { status: "uploading" | "success" | "error"; error?: string }>
-  >({});
-
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Sync state when loaded
+  // Initialize currentText and fileExists when question gets loaded from db if any
   useEffect(() => {
     if (origin === "option" && oIndex !== undefined) {
       if (questionInstance!.options[oIndex]?.value?.value) {
         setCurrentText(questionInstance!.options[oIndex].value.value);
       }
+
       setUploadedFiles(questionInstance!.options[oIndex]?.value?.files ?? []);
     } else if (
       origin === "question" ||
@@ -174,8 +117,8 @@ export default function AdvancedTextbox({
     }
   }, [questionInstance, oIndex, origin]);
 
-  // Handle keys logic
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Keys are being handled by EditorJS rather than default behavior, so we need to block the EditorJS behavior
     const key = e.key;
 
     if (
@@ -197,9 +140,11 @@ export default function AdvancedTextbox({
       const textBeforeCursor = currentText.substring(0, cursorPosition);
       const textAfterCursor = currentText.substring(textarea.selectionEnd);
 
+      // Find the current line the cursor is on
       const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
       const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
       
+      // Match leading whitespace
       const match = currentLine.match(/^\s*/);
       const leadingWhitespace = match ? match[0] : "";
 
@@ -226,9 +171,11 @@ export default function AdvancedTextbox({
         const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
         const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
 
+        // If the line up to the cursor is purely spaces, treat it as indentation
         if (currentLine.length > 0 && /^\s+$/.test(currentLine)) {
           e.preventDefault();
           
+          // delete 2 spaces instead of 1 if possible
           const spacesToDelete = currentLine.length % 2 !== 0 ? 1 : 2;
 
           const newText = 
@@ -270,37 +217,10 @@ export default function AdvancedTextbox({
     }
   };
 
-  const updateQuestionsWithFiles = (newFiles: QuestionFile[]) => {
-    setUnsavedChanges?.(true);
-    const updatedQuestions = [...questions];
-    const updatedQuestion = { ...questionInstance! };
-
-    if (origin === "question" || origin === "explanation" || origin === "content") {
-      updatedQuestion[origin] = {
-        ...updatedQuestion[origin],
-        files: newFiles,
-      };
-    } else if (origin === "option" && oIndex !== undefined) {
-      updatedQuestion.options = [
-        ...updatedQuestion.options.slice(0, oIndex),
-        {
-          value: {
-            ...updatedQuestion.options[oIndex]!.value,
-            files: newFiles,
-          },
-          id: updatedQuestion.options[oIndex]!.id,
-        },
-        ...updatedQuestion.options.slice(oIndex + 1),
-      ];
-    }
-
-    updatedQuestions[qIndex] = updatedQuestion;
-    setQuestions(updatedQuestions);
-  };
-
   const updateQuestionText = (newText: string) => {
     setUnsavedChanges?.(true);
     setCurrentText(newText);
+    // Clone the current question to avoid direct mutation
     const updatedQuestions = [...questions];
     if (
       origin === "question" ||
@@ -312,11 +232,12 @@ export default function AdvancedTextbox({
         [origin]: {
           ...questionInstance![origin],
           value: newText,
-          files: questionInstance?.[origin]?.files ?? [],
-        },
+          files: questionInstance?.[origin]?.files ?? [], // Keep the files they exist
+        }, // Clone question
       };
       updatedQuestions[qIndex] = updatedQuestion;
     } else if (origin === "option" && oIndex !== undefined) {
+      // oIndex !== undefined because 0 is falsy
       const updatedQuestion: QuestionFormat = {
         ...questionInstance!,
         options: [
@@ -334,7 +255,7 @@ export default function AdvancedTextbox({
       updatedQuestions[qIndex] = updatedQuestion;
     }
 
-    setQuestions(updatedQuestions);
+    setQuestions(updatedQuestions); // Update state immutably
   };
 
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -345,44 +266,6 @@ export default function AdvancedTextbox({
     fileInputRef.current?.click();
   };
 
-  // Immediate upload to Firebase Storage
-  const uploadSingleFile = async (fileKey: string, file: File) => {
-    setUploadStatuses((prev) => ({
-      ...prev,
-      [fileKey]: { status: "uploading" },
-    }));
-
-    try {
-      const storage = getStorage();
-      const storageRef = ref(storage, fileKey);
-      const snapshot = await uploadBytes(storageRef, file);
-      const downloadURL = await getDownloadURL(snapshot.ref);
-
-      setUploadStatuses((prev) => ({
-        ...prev,
-        [fileKey]: { status: "success" },
-      }));
-
-      // Update the file URL in the state and questions
-      setUploadedFiles((prevFiles) => {
-        const updated = prevFiles.map((f) =>
-          f.key === fileKey ? { ...f, url: downloadURL } : f
-        );
-        updateQuestionsWithFiles(updated);
-        return updated;
-      });
-    } catch (err) {
-      console.error(`Failed to upload file ${file.name}:`, err);
-      setUploadStatuses((prev) => ({
-        ...prev,
-        [fileKey]: {
-          status: "error",
-          error: err instanceof Error ? err.message : "Upload failed",
-        },
-      }));
-    }
-  };
-
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];
     let files = Array.from(fileList).filter(
@@ -400,40 +283,71 @@ export default function AdvancedTextbox({
       alert(
         "No valid file selected (photo or audio). Try uploading again or contact support.",
       );
-      return;
+      return; // Early return if file is not defined
     }
 
-    const newFiles: QuestionFile[] = [];
-    const filesToUpload: { key: string; file: File }[] = [];
-
-    files.forEach((file) => {
-      // Create a unique key that works cleanly in storage
-      const sanitizedType = file.type.replace(/\//g, "-");
-      const fileKey = `${sanitizedType}-${Date.now()}-${file.name}`;
-      
-      storeFileInIndexedDB(fileKey, file);
-
-      newFiles.push({
-        key: fileKey,
-        name: file.name,
-        order: uploadedFiles.length + newFiles.length,
+    const storeAndAppendIfNewKey = (
+      questionInput: QuestionInput,
+      files: File[],
+    ) => {
+      const newFiles = files.flatMap((file) => {
+        const fileKey = `${file.type}-${file.lastModified}`;
+        if (questionInput.files.map((file) => file.key).includes(fileKey)) {
+          return [];
+        } else {
+          storeFileInIndexedDB(fileKey, file);
+          return [
+            {
+              key: fileKey,
+              name: file.name,
+            },
+          ];
+        }
       });
+      // Recreate array for set state
+      questionInput.files = [...questionInput.files, ...newFiles];
+    };
+
+    const updatedQuestions = [...questions];
+    const updatedQuestion: QuestionFormat = { ...questionInstance! };
 
-      filesToUpload.push({ key: fileKey, file });
-    });
+    if (origin === "question") {
+      const questionInput: QuestionInput = { ...updatedQuestion.question };
+      storeAndAppendIfNewKey(questionInput, files);
+      updatedQuestion.question = questionInput;
+      setUploadedFiles(questionInput.files);
+    } else if (origin === "option" && oIndex !== undefined) {
+      // Update a specific option by oIndex
+      const optionInput: QuestionInput = {
+        ...updatedQuestion.options[oIndex]!.value,
+      };
+      storeAndAppendIfNewKey(optionInput, files);
+      updatedQuestion.options[oIndex]!.value = optionInput; // Update only the specified option
+      setUploadedFiles(optionInput.files);
+    } else if (origin === "explanation") {
+      const questionInput: QuestionInput = {
+        ...updatedQuestion.explanation,
+      };
+      storeAndAppendIfNewKey(questionInput, files);
+      updatedQuestion.explanation = questionInput;
+      setUploadedFiles(questionInput.files);
+    } else if (origin === "content") {
+      const questionInput: QuestionInput = { ...updatedQuestion.content };
+      storeAndAppendIfNewKey(questionInput, files);
+      updatedQuestion.content = questionInput;
+      setUploadedFiles(questionInput.files);
+    }
+    updatedQuestions[qIndex] = updatedQuestion;
 
-    const nextFiles = [...uploadedFiles, ...newFiles];
-    setUploadedFiles(nextFiles);
-    updateQuestionsWithFiles(nextFiles);
+    setQuestions(updatedQuestions);
+    setUnsavedChanges?.(true);
 
+    // Reset input value so duplicate files can be reuploaded in the case of deletion
+    // Code logic will catch actual duplicates
     e.target.value = "";
-
-    // Trigger immediate uploads
-    filesToUpload.forEach(({ key, file }) => {
-      void uploadSingleFile(key, file);
-    });
   };
 
+  // Function to delete a file from Firebase Storage
   async function deleteFileFromStorage(fileKey: string): Promise<void> {
     const user = await getUser();
 
@@ -454,78 +368,57 @@ export default function AdvancedTextbox({
       }
 
       console.error(`Error deleting file ${fileKey} from storage:`, error);
+      // You might want to handle specific error codes here
       return;
     }
   }
 
-  const handleDeleteFile = (fileKey: string) => {
-    const nextFiles = uploadedFiles.filter((file) => file.key !== fileKey);
-    setUploadedFiles(nextFiles);
-    updateQuestionsWithFiles(nextFiles);
+  const handleDeleteFile = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const fileKey = e.currentTarget.dataset.fileKey;
 
-    setUploadStatuses((prev) => {
-      const next = { ...prev };
-      delete next[fileKey];
-      return next;
-    });
-
-    void deleteFileFromIndexedDB(fileKey);
-    void deleteFileFromStorage(fileKey);
-  };
-
-  const handleRetryUpload = async (fileKey: string, fileName: string) => {
-    try {
-      const stored = await getFileFromIndexedDB(fileKey);
-      if (stored?.file) {
-        void uploadSingleFile(fileKey, stored.file);
-      } else {
-        alert(`Could not find local file data for "${fileName}". Please remove and re-upload.`);
-      }
-    } catch (err) {
-      console.error("Retry load from IndexedDB failed:", err);
-      alert("Failed to retry. Please try uploading the file again.");
+    if (!fileKey) {
+      alert("Error deleting file, please try again");
+      return;
     }
-  };
 
-  const updateFileAlt = (fileKey: string, newAlt: string) => {
-    const updated = uploadedFiles.map((f) =>
-      f.key === fileKey ? { ...f, alt: newAlt } : f
-    );
-    setUploadedFiles(updated);
-    updateQuestionsWithFiles(updated);
-  };
+    const updatedQuestions = [...questions];
+    const updatedQuestion: QuestionFormat = { ...questionInstance! };
 
-  const moveFile = (index: number, direction: "left" | "right") => {
-    const targetIndex = index + (direction === "left" ? -1 : 1);
-    if (targetIndex < 0 || targetIndex >= uploadedFiles.length) return;
+    const deleteFile = (question: QuestionInput) => {
+      deleteFileFromIndexedDB(fileKey).catch((error) => {
+        console.error("Error deleting file from IndexedDB:", error);
+      });
+      deleteFileFromStorage(fileKey).catch((error) => {
+        console.error("Error deleting file from Storage:", error);
+      });
 
-    const nextFiles = [...uploadedFiles];
-    const temp = nextFiles[index]!;
-    nextFiles[index] = nextFiles[targetIndex]!;
-    nextFiles[targetIndex] = temp;
+      question.files = question.files.filter((file) => file.key !== fileKey);
+      setUploadedFiles(question.files);
+    };
 
-    const orderedFiles = nextFiles.map((f, idx) => ({ ...f, order: idx }));
-    setUploadedFiles(orderedFiles);
-    updateQuestionsWithFiles(orderedFiles);
-  };
+    if (
+      origin === "question" ||
+      origin === "explanation" ||
+      origin === "content"
+    ) {
+      const questionInput: QuestionInput = { ...updatedQuestion[origin] };
 
-  const insertPlaceholder = (file: QuestionFile, index: number) => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
+      deleteFile(questionInput);
+
+      updatedQuestion[origin] = questionInput;
+    } else if (origin === "option" && oIndex !== undefined) {
+      const optionInput: QuestionInput = {
+        ...updatedQuestion.options[oIndex]!.value,
+      };
 
-    const placeholderText = `[image:${index + 1}]`;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
+      deleteFile(optionInput);
 
-    const newText =
-      currentText.substring(0, start) + placeholderText + currentText.substring(end);
-    
-    updateQuestionText(newText);
+      updatedQuestion.options[oIndex]!.value = optionInput;
+    }
 
-    setTimeout(() => {
-      textarea.focus();
-      textarea.setSelectionRange(start + placeholderText.length, start + placeholderText.length);
-    }, 0);
+    updatedQuestions[qIndex] = updatedQuestion;
+    setQuestions(updatedQuestions);
+    setUnsavedChanges?.(true);
   };
 
   return (
@@ -537,7 +430,7 @@ export default function AdvancedTextbox({
         onKeyDown={handleKeyDown}
         placeholder={
           placeholder ??
-          "Type or drag and drop here. Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code. References to images can be made via [image:1] placeholders."
+          "Type or drag and drop here (only 1 file allowed). Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code."
         }
       />
 
@@ -550,128 +443,28 @@ export default function AdvancedTextbox({
         multiple
       />
 
-      {/* Grid of uploaded file cards with visual preview, load states, and alt tag fields */}
-      {uploadedFiles.length > 0 && (
-        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
-          {uploadedFiles.map((file, index) => {
-            const statusInfo = uploadStatuses[file.key] ?? {
-              status: file.url ? "success" : "uploading",
-            };
-            return (
-              <div
-                key={file.key}
-                className="flex flex-col rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all duration-200 hover:shadow"
+      {/* Section under the textarea for upload and delete buttons */}
+      <div className="mt-2">
+        {uploadedFiles.length > 0 &&
+          uploadedFiles.map((file) => (
+            <div key={file.key} className="mb-2 flex items-center space-x-2">
+              <button
+                type="button"
+                className="flex items-center text-red-500 hover:underline"
+                onClick={handleDeleteFile}
+                data-file-key={file.key}
               >
-                <div className="flex items-start gap-3">
-                  <div className="relative shrink-0">
-                    <ThumbnailPreview file={file} />
-                    {statusInfo.status === "uploading" && (
-                      <div className="absolute inset-0 flex items-center justify-center rounded bg-black/40">
-                        <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-xs font-semibold text-gray-800" title={file.name}>
-                      {file.name}
-                    </div>
-
-                    {statusInfo.status === "error" && (
-                      <div className="mt-1 flex flex-col gap-1">
-                        <span className="text-[10px] font-bold text-red-500">
-                          Upload failed: {statusInfo.error ?? "Unknown error"}
-                        </span>
-                        <button
-                          type="button"
-                          onClick={() => handleRetryUpload(file.key, file.name)}
-                          className="w-fit text-[10px] font-medium text-blue-600 hover:underline"
-                        >
-                          Retry Upload
-                        </button>
-                      </div>
-                    )}
-
-                    {statusInfo.status === "success" && (
-                      <span className="mt-1 inline-flex items-center rounded bg-green-50 px-1.5 py-0.5 text-[9px] font-medium text-green-700 border border-green-200">
-                        Uploaded
-                      </span>
-                    )}
-                  </div>
-
-                  <button
-                    type="button"
-                    onClick={() => handleDeleteFile(file.key)}
-                    className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500 transition-colors"
-                    title="Remove file"
-                  >
-                    <Trash size={14} />
-                  </button>
-                </div>
-
-                <div className="mt-3 flex flex-col gap-2 border-t border-gray-100 pt-2">
-                  <div className="flex items-center gap-1.5">
-                    <label
-                      htmlFor={`alt-${file.key}`}
-                      className="text-[9px] font-bold text-gray-500 uppercase tracking-wider shrink-0"
-                    >
-                      Alt:
-                    </label>
-                    <input
-                      id={`alt-${file.key}`}
-                      type="text"
-                      placeholder="Alt text (e.g. Graph of sales)"
-                      value={file.alt ?? ""}
-                      onChange={(e) => updateFileAlt(file.key, e.target.value)}
-                      className="flex h-7 w-full rounded border border-gray-200 bg-background px-2 py-1 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300 placeholder:text-gray-400"
-                    />
-                  </div>
-
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="flex items-center gap-1">
-                      <button
-                        type="button"
-                        disabled={index === 0}
-                        onClick={() => moveFile(index, "left")}
-                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
-                        title="Move left/up"
-                      >
-                        <ChevronLeft size={12} />
-                      </button>
-                      <button
-                        type="button"
-                        disabled={index === uploadedFiles.length - 1}
-                        onClick={() => moveFile(index, "right")}
-                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
-                        title="Move right/down"
-                      >
-                        <ChevronRight size={12} />
-                      </button>
-                    </div>
-
-                    <button
-                      type="button"
-                      onClick={() => insertPlaceholder(file, index)}
-                      className="rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 hover:bg-blue-100 transition-colors"
-                      title="Insert inline placeholder tag"
-                    >
-                      Insert Inline
-                    </button>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      <div className="mt-2 flex justify-end">
+                Delete file <Trash className="ml-1 size-5" />
+              </button>
+              <div>{file.name}</div>
+            </div>
+          ))}
         <button
           type="button"
-          className="flex items-center gap-1 rounded-md border border-blue-500 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 hover:bg-blue-100 hover:text-blue-700 transition-all shadow-sm"
+          className="flex items-center text-blue-500 hover:underline"
           onClick={handleUploadClick}
         >
-          <Paperclip size={14} /> Add file
+          Add file <Paperclip className="ml-1 size-5" />
         </button>
       </div>
     </div>
diff --git a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
index fe497aff..2cfda0c3 100644
--- a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
@@ -2,13 +2,11 @@ import React, { useState, useEffect } from "react";
 import katex from "katex";
 import type { QuestionFile, QuestionInput } from "@/types/questions";
 import "../../../styles/katexStyling.css";
+import Image from "next/image";
 import { decodeEntities, katexMacros } from "../Renderer";
 
-import { cn } from "@/lib/utils";
-
 interface Props {
   content: QuestionInput;
-  origin?: "question" | "explanation" | "option" | "content";
 }
 
 interface FileWrapper {
@@ -102,12 +100,14 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
 
   if (file.key.startsWith("image/")) {
     return (
-      <div className="my-2 w-full flex justify-center">
-        <img
+      <div className="my-2">
+        <Image
           src={objectUrl}
-          alt={file.alt ?? "Uploaded image"}
-          loading="lazy"
-          className="h-auto max-h-[450px] w-auto max-w-full rounded-md object-contain shadow-sm transition-shadow duration-200 hover:shadow-md"
+          alt="Uploaded image"
+          width={16}
+          height={9}
+          layout="responsive"
+          className="h-auto max-w-full"
         />
       </div>
     );
@@ -116,7 +116,7 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   if (file.key.startsWith("audio/")) {
     return (
       <div className="my-2">
-        <audio controls className="w-full max-w-md">
+        <audio controls>
           <source src={objectUrl} type="audio/mpeg" />
           Your browser does not support the audio element.
         </audio>
@@ -127,139 +127,45 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   return null;
 };
 
-export function RenderContent({ content, origin }: Props) {
-  // Sort files by their order index, default to stable positioning
-  const sortedFiles = [...(content.files || [])].sort((a, b) => {
-    const orderA = a.order ?? 999;
-    const orderB = b.order ?? 999;
-    return orderA - orderB;
-  });
-
-  const renderedInlineKeys = new Set<string>();
-
-  // Function to search for a matching file based on placeholder string
-  const getMatchingFile = (param: string) => {
-    const trimmed = param.trim();
-    // 1. Check if 1-based index (e.g., [image:1])
-    const index = parseInt(trimmed, 10);
-    if (!isNaN(index) && index > 0 && index <= sortedFiles.length) {
-      return sortedFiles[index - 1];
-    }
-    // 2. Check if direct file key matches
-    const byKey = sortedFiles.find((f) => f.key === trimmed);
-    if (byKey) return byKey;
-    // 3. Check if filename matches (case-insensitive)
-    const byName = sortedFiles.find(
-      (f) =>
-        f.name.toLowerCase() === trimmed.toLowerCase() ||
-        f.name.split(".")[0]?.toLowerCase() === trimmed.toLowerCase()
-    );
-    if (byName) return byName;
-    return null;
-  };
-
-  const tokens = decodeEntities(content.value)
-    .split(/(```[\s\S]*?```|\$@[^$]+\$|\[image:[^\]]+\])/g)
-    .map((token, tokenIndex) => {
-      if (token.startsWith("```") && token.endsWith("```")) {
-        const codeContent = token.slice(3, -3).replace(/^\n/, "");
-        return (
-          <pre
-            key={`code-${tokenIndex}`}
-            className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
-            style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
-          >
-            <code>{codeContent}</code>
-          </pre>
-        );
-      } else if (token.startsWith("$@") && token.endsWith("$")) {
-        return (
-          <span
-            key={`latex-${tokenIndex}`}
-            dangerouslySetInnerHTML={{
-              __html: katex.renderToString(token.slice(2, -1), {
-                throwOnError: false,
-                macros: katexMacros,
-              }),
-            }}
-          ></span>
-        );
-      } else if (token.startsWith("[image:") && token.endsWith("]")) {
-        const param = token.slice(7, -1);
-        const matchedFile = getMatchingFile(param);
-        if (matchedFile) {
-          renderedInlineKeys.add(matchedFile.key);
-          return (
-            <div key={`inline-img-${tokenIndex}`} className="my-4 block text-center">
-              <FileRenderer file={matchedFile} />
-              {matchedFile.alt && (
-                <span className="mt-1 block text-center text-xs italic text-gray-500">
-                  {matchedFile.alt}
-                </span>
-              )}
-            </div>
-          );
-        }
-      }
-      return <span key={`text-${tokenIndex}`}>{token}</span>;
-    });
-
-  // Filter out files that were already rendered inline
-  const remainingFiles = sortedFiles.filter((file) => !renderedInlineKeys.has(file.key));
-  const remainingImages = remainingFiles.filter((file) => file.key.startsWith("image/"));
-  const remainingAudio = remainingFiles.filter((file) => file.key.startsWith("audio/"));
-
+export function RenderContent({ content }: Props) {
   return (
     <div className="custom-katex my-2 whitespace-pre-wrap">
-      {/* Render parsed inline block elements */}
-      {tokens}
-
-      {/* Render any leftover audio files */}
-      {remainingAudio.map((file) => (
+      {/* Render text content directly */}
+      {decodeEntities(content.value)
+        .split(/(```[\s\S]*?```|\$@[^$]+\$)/g)
+        .map((token, tokenIndex) => {
+          if (token.startsWith("```") && token.endsWith("```")) {
+            // Strip the ``` from start and end, and remove the leading newline.
+            const codeContent = token.slice(3, -3).replace(/^\n/, "");
+            return (
+              <pre
+                key={`code-${tokenIndex}`}
+                className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
+                style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
+              >
+                <code>{codeContent}</code>
+              </pre>
+            );
+          } else if (token.startsWith("$@") && token.endsWith("$")) {
+            return (
+              <span
+                key={`latex-${tokenIndex}`}
+                dangerouslySetInnerHTML={{
+                  __html: katex.renderToString(token.slice(2, -1), {
+                    throwOnError: false,
+                    macros: katexMacros,
+                  }),
+                }}
+              ></span>
+            );
+          }
+          return <span key={`text-${tokenIndex}`}>{token}</span>;
+        })}
+
+      {/* Render files through individual components */}
+      {content.files?.map((file) => (
         <FileRenderer key={file.key} file={file} />
       ))}
-
-      {/* Render remaining images */}
-      {remainingImages.length > 0 && (
-        <div className="mt-4">
-          {origin === "question" && remainingImages.length >= 2 ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
-              {remainingImages.map((file, idx) => {
-                const isThirdOfThree = remainingImages.length === 3 && idx === 2;
-                return (
-                  <div
-                    key={file.key}
-                    className={cn(
-                      "flex flex-col items-center justify-center p-2 rounded-lg border border-gray-200 bg-gray-50/40 shadow-sm",
-                      isThirdOfThree && "sm:col-span-2 sm:max-w-2xl sm:mx-auto w-full"
-                    )}
-                  >
-                    <FileRenderer file={file} />
-                    {file.alt && (
-                      <span className="mt-1 block text-center text-xs italic text-gray-500">
-                        {file.alt}
-                      </span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="flex flex-col gap-4">
-              {remainingImages.map((file) => (
-                <div key={file.key} className="flex flex-col items-center">
-                  <FileRenderer file={file} />
-                  {file.alt && (
-                    <span className="mt-1 block text-center text-xs italic text-gray-500">
-                      {file.alt}
-                    </span>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/questions/checkForUnderstanding.tsx b/src/components/questions/checkForUnderstanding.tsx
index bbe304f3..5980e8af 100644
--- a/src/components/questions/checkForUnderstanding.tsx
+++ b/src/components/questions/checkForUnderstanding.tsx
@@ -62,7 +62,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
   return (
     <div className="max-w-6xl rounded-lg border border-primary bg-primary-foreground p-4">
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} origin="question" />
+        <RenderContent content={questionInstance.question} />
       </div>
 
       {isFrq ? (
@@ -131,7 +131,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
           {!isFrq && questionInstance.explanation.value && (
             <div className="mt-4 rounded-md border border-primary bg-white p-3">
               <strong>Explanation:</strong>
-              <RenderContent content={questionInstance.explanation} origin="explanation" />
+              <RenderContent content={questionInstance.explanation} />
             </div>
           )}
           <button
diff --git a/src/components/questions/digital-testing/QuestionPanel.tsx b/src/components/questions/digital-testing/QuestionPanel.tsx
index 32dab5b9..96f2664e 100644
--- a/src/components/questions/digital-testing/QuestionPanel.tsx
+++ b/src/components/questions/digital-testing/QuestionPanel.tsx
@@ -99,7 +99,7 @@ export default function QuestionPanel({
   return (
     <div className="relative">
       <div className="my-4 text-lg">
-        <RenderContent content={questionInstance.question} origin="question" />
+        <RenderContent content={questionInstance.question} />
       </div>
 
       <div className="grid gap-4">
@@ -145,7 +145,7 @@ export default function QuestionPanel({
                       isStrikedThrough && "opacity-50",
                     )}
                   >
-                    <RenderContent content={option.value} origin="option" />
+                    <RenderContent content={option.value} />
                   </span>
 
                   {!submitted && showEliminationTools && (
@@ -181,7 +181,7 @@ export default function QuestionPanel({
         {submitted && (
           <div className="rounded-lg border bg-gray-100 p-3">
             <h3 className="mb-2 text-lg font-semibold">Explanation:</h3>
-            <RenderContent content={questionInstance.explanation} origin="explanation" />
+            <RenderContent content={questionInstance.explanation} />
           </div>
         )}
       </div>
diff --git a/src/components/questions/quizRenderer.tsx b/src/components/questions/quizRenderer.tsx
index 43483c4d..58c72340 100644
--- a/src/components/questions/quizRenderer.tsx
+++ b/src/components/questions/quizRenderer.tsx
@@ -85,7 +85,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             : "Answers revealed")}
       </div>
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} origin="question" />
+        <RenderContent content={questionInstance.question} />
       </div>
 
       {isFrq ? (
@@ -111,18 +111,19 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             <button
               key={option.id}
               className={`rounded-md border px-2 text-left shadow transition-colors
-            ${showResults
-                  ? isAnswerCorrect(option.id)
-                    ? answers[currentQuestionIndex]?.includes(option.id)
-                      ? "border-green-700 bg-green-300"
-                      : "border-green-700 bg-green-100"
-                    : answers[currentQuestionIndex]?.includes(option.id)
-                      ? "border-red-700 bg-red-300"
-                      : "border-gray-300 bg-white"
+            ${
+              showResults
+                ? isAnswerCorrect(option.id)
+                  ? answers[currentQuestionIndex]?.includes(option.id)
+                    ? "border-green-700 bg-green-300"
+                    : "border-green-700 bg-green-100"
                   : answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-blue-500 bg-blue-100"
+                    ? "border-red-700 bg-red-300"
                     : "border-gray-300 bg-white"
-                }
+                : answers[currentQuestionIndex]?.includes(option.id)
+                  ? "border-blue-500 bg-blue-100"
+                  : "border-gray-300 bg-white"
+            }
             `}
               onClick={() => handleSelectOption(option.id)}
               disabled={showResults}
@@ -149,7 +150,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
       {showResults && !isFrq && questionInstance.explanation.value && (
         <div className="mt-4 rounded-md border border-primary bg-white p-3">
           <strong>Explanation:</strong>
-          <RenderContent content={questionInstance.explanation} origin="explanation" />
+          <RenderContent content={questionInstance.explanation} />
         </div>
       )}
 
diff --git a/src/components/questions/testRenderer.tsx b/src/components/questions/testRenderer.tsx
index c6720bae..16fa4266 100644
--- a/src/components/questions/testRenderer.tsx
+++ b/src/components/questions/testRenderer.tsx
@@ -153,7 +153,6 @@ export default function DigitalTestingPage({
                 >
                   <RenderContent
                     content={questions[currentQuestionIndex]!.content}
-                    origin="content"
                   />
                 </Highlighter>
               </div>
diff --git a/src/types/questions.ts b/src/types/questions.ts
index 83def309..1b88859d 100644
--- a/src/types/questions.ts
+++ b/src/types/questions.ts
@@ -2,12 +2,8 @@ export interface QuestionFile {
   key: string;
   url?: string;
   name: string;
-  id?: string;
-  alt?: string;
-  order?: number;
 }
 
-
 export interface QuestionInput {
   value: string;
   files: QuestionFile[];

From 57460bd227846690c4e473239d8d1eea4aeba7ae Mon Sep 17 00:00:00 2001
From: Venkata_Beast_King <87732284+Famousmaster206@users.noreply.github.com>
Date: Wed, 10 Jun 2026 12:38:01 -0700
Subject: [PATCH 06/49] remove type declarations to prevent build error

---
 src/components/article-creator/Editor.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/article-creator/Editor.tsx b/src/components/article-creator/Editor.tsx
index 5fddd6cc..f8b93506 100644
--- a/src/components/article-creator/Editor.tsx
+++ b/src/components/article-creator/Editor.tsx
@@ -1,10 +1,5 @@
 import React, { memo, useEffect, useRef, useState } from "react";
-import {
-  type EditorConfig,
-  type MenuConfig,
-  type ToolConstructable,
-  type OutputData,
-} from "@editorjs/editorjs";
+import {EditorConfig, MenuConfig, ToolConstructable, OutputData} from "@editorjs/editorjs";
 import useEditor from "hooks/useEditor";
 
 import Header from "@editorjs/header";

From 1e9f0c82b099f9a354143a208532f6f18d09e383 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 10 Jun 2026 12:56:31 -0700
Subject: [PATCH 07/49] change thing to avoid build error

---
 src/components/article-creator/Editor.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/article-creator/Editor.tsx b/src/components/article-creator/Editor.tsx
index 5fddd6cc..2985b76c 100644
--- a/src/components/article-creator/Editor.tsx
+++ b/src/components/article-creator/Editor.tsx
@@ -1,10 +1,9 @@
 import React, { memo, useEffect, useRef, useState } from "react";
 import {
   type EditorConfig,
-  type MenuConfig,
-  type ToolConstructable,
   type OutputData,
 } from "@editorjs/editorjs";
+import type { MenuConfig, ToolConstructable } from "@editorjs/editorjs";
 import useEditor from "hooks/useEditor";
 
 import Header from "@editorjs/header";

From d8226d91c73a4c2a39b2e5e2fbe051b78bf204ed Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 10 Jun 2026 13:35:20 -0700
Subject: [PATCH 08/49] fix build issue

---
 src/components/article-creator/Editor.tsx           | 13 ++++++-------
 src/components/global/SearchBar.tsx                 |  2 +-
 src/components/questions/digital-testing/Footer.tsx |  2 +-
 src/components/questions/digital-testing/Header.tsx |  2 +-
 .../questions/digital-testing/ReviewPage.tsx        |  2 +-
 src/components/subject/table-of-contents.tsx        |  4 ++--
 6 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/article-creator/Editor.tsx b/src/components/article-creator/Editor.tsx
index 657e9c21..e6c6bcb9 100644
--- a/src/components/article-creator/Editor.tsx
+++ b/src/components/article-creator/Editor.tsx
@@ -2,6 +2,7 @@ import React, { memo, useEffect, useRef, useState } from "react";
 import {
   type EditorConfig,
   type OutputData,
+  type ToolConstructable,
 } from "@editorjs/editorjs";
 import useEditor from "hooks/useEditor";
 
@@ -39,7 +40,7 @@ interface EditorImageData {
   stretched?: boolean;
 }
 
-type MenuConfig = Array<{
+type MenuConfigItemList = Array<{
   name: string;
   icon: string;
   title: string;
@@ -47,8 +48,6 @@ type MenuConfig = Array<{
   toggle?: boolean;
 }>;
 
-type ToolConstructable = any;
-
 type CustomImageTool = {
   _data: EditorImageData;
   api: {
@@ -60,7 +59,7 @@ type CustomImageTool = {
   block: {
     id: string;
   };
-  renderSettings(): MenuConfig;
+  renderSettings(): MenuConfigItemList;
 };
 
 const pendingStorageDeletes = new Set<string>();
@@ -77,11 +76,11 @@ function isStorageObjectNotFoundError(error: unknown): boolean {
 // https://github.com/editor-js/image/issues/54#issuecomment-1546833098
 // https://github.com/editor-js/image/issues/27
 class CustomImage extends Image {
-  renderSettings(): MenuConfig {
+  renderSettings(): MenuConfigItemList {
     const typedTool = this as unknown as CustomImageTool;
     const baseImageTool = Image as unknown as {
       prototype: {
-        renderSettings(this: CustomImageTool): MenuConfig;
+        renderSettings(this: CustomImageTool): MenuConfigItemList;
       };
     };
     // The EditorJS image package ships loose inherited typings here, so we
@@ -111,7 +110,7 @@ class CustomImage extends Image {
         },
       },
       ...settingsArray,
-    ] as unknown as MenuConfig;
+    ] as unknown as MenuConfigItemList;
   }
 
   removed() {
diff --git a/src/components/global/SearchBar.tsx b/src/components/global/SearchBar.tsx
index 329a242a..965ef12f 100644
--- a/src/components/global/SearchBar.tsx
+++ b/src/components/global/SearchBar.tsx
@@ -37,7 +37,7 @@ const SearchBar = ({
 
   const containerRef = useRef<HTMLDivElement>(null);
   const startedRef = useRef(false);
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const listboxId = useId();
 
   const canPreview = isPreviewUser(user?.access);
diff --git a/src/components/questions/digital-testing/Footer.tsx b/src/components/questions/digital-testing/Footer.tsx
index 1cbb8069..dd30ede5 100644
--- a/src/components/questions/digital-testing/Footer.tsx
+++ b/src/components/questions/digital-testing/Footer.tsx
@@ -36,7 +36,7 @@ export default function Footer({
   testName,
 }: FooterProps) {
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
 
   const handleNext = () => {
     if (showReviewPage) {
diff --git a/src/components/questions/digital-testing/Header.tsx b/src/components/questions/digital-testing/Header.tsx
index b428b8fe..6c0fe6a3 100644
--- a/src/components/questions/digital-testing/Header.tsx
+++ b/src/components/questions/digital-testing/Header.tsx
@@ -21,7 +21,7 @@ const Header: React.FC<HeaderProps> = ({
   submitted,
   directions,
 }) => {
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const [showTimer, setShowTimer] = useState(true);
   const [remainingTime, setRemainingTime] = useState(timeRemaining);
   const [showDirections, setShowDirections] = useState(true);
diff --git a/src/components/questions/digital-testing/ReviewPage.tsx b/src/components/questions/digital-testing/ReviewPage.tsx
index ca9929de..80c473ca 100644
--- a/src/components/questions/digital-testing/ReviewPage.tsx
+++ b/src/components/questions/digital-testing/ReviewPage.tsx
@@ -37,7 +37,7 @@ export default function QuestionNavigation({
   setShowReviewPage,
   submitted,
 }: FooterProps) {
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
 
   return (
     <>
diff --git a/src/components/subject/table-of-contents.tsx b/src/components/subject/table-of-contents.tsx
index 05f5e180..d546a4a3 100644
--- a/src/components/subject/table-of-contents.tsx
+++ b/src/components/subject/table-of-contents.tsx
@@ -14,7 +14,7 @@ type Props = {
 };
 
 const TableOfContents = ({ title, subject }: Props) => {
-  const router = usePathname();
+  const pathname = usePathname() ?? "";
   const [collapsed, setCollapsed] = useState(false);
 
   return (
@@ -51,7 +51,7 @@ const TableOfContents = ({ title, subject }: Props) => {
         {subject.units.map((unit, unitIndex) => (
           <div key={unitIndex}>
             <Link
-              href={`${router.split("/").slice(0, 3).join("/")}#${unit.title}`}
+              href={`${pathname.split("/").slice(0, 3).join("/")}#${unit.title}`}
               key={unit.title}
               className={cn(
                 "flex items-center gap-3 text-base font-medium opacity-50 transition-all hover:text-primary/70 hover:opacity-100",

From b54b7d4f1b0bce2a69bdf7446c5a1d72c68567a6 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Mon, 8 Jun 2026 10:50:33 -0700
Subject: [PATCH 09/49] v1

---
 .../article-creator/FetchArticleFunctions.tsx |   6 +-
 .../custom_questions/AdvancedTextbox.tsx      | 461 +++++++++++++-----
 .../RenderAdvancedTextbox.tsx                 | 182 +++++--
 .../questions/checkForUnderstanding.tsx       |   4 +-
 .../digital-testing/QuestionPanel.tsx         |   6 +-
 src/components/questions/quizRenderer.tsx     |  25 +-
 src/components/questions/testRenderer.tsx     |   1 +
 src/types/questions.ts                        |   4 +
 8 files changed, 499 insertions(+), 190 deletions(-)

diff --git a/src/components/article-creator/FetchArticleFunctions.tsx b/src/components/article-creator/FetchArticleFunctions.tsx
index fb68455e..ba51a29e 100644
--- a/src/components/article-creator/FetchArticleFunctions.tsx
+++ b/src/components/article-creator/FetchArticleFunctions.tsx
@@ -37,7 +37,11 @@ export const processQuestions = async (
       ...question.options.flatMap((option) => option.value.files || []),
     ];
 
-    allFiles.forEach((file) => allFileKeys.add(file.key));
+    allFiles.forEach((file) => {
+      if (!file.url?.startsWith("http")) {
+        allFileKeys.add(file.key);
+      }
+    });
   });
 
   // Read all files from IndexedDB
diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index 17666f21..3abcd557 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -8,12 +8,11 @@ import { Textarea } from "@/components/ui/textarea";
 import type {
   QuestionFile,
   QuestionFormat,
-  QuestionInput,
 } from "@/types/questions";
-import { QuestionsInput } from "./QuestionInstance";
-import { Paperclip, Trash } from "lucide-react";
-import { deleteObject, getStorage, ref } from "firebase/storage";
+import { Paperclip, Trash, ChevronLeft, ChevronRight } from "lucide-react";
+import { deleteObject, getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { getUser } from "@/components/hooks/users";
+import { getFileFromIndexedDB } from "./RenderAdvancedTextbox";
 
 interface Props {
   questions: QuestionFormat[];
@@ -82,6 +81,61 @@ function deleteFileFromIndexedDB(name: string) {
   });
 }
 
+// Helper component to display visual thumbnails/previews of files in editing mode
+const ThumbnailPreview: React.FC<{ file: QuestionFile }> = ({ file }) => {
+  const [src, setSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    let url: string | null = null;
+    if (file.url) {
+      setSrc(file.url);
+      return;
+    }
+
+    const loadLocal = async () => {
+      try {
+        const stored = await getFileFromIndexedDB(file.key);
+        if (stored?.file) {
+          url = URL.createObjectURL(stored.file);
+          setSrc(url);
+        }
+      } catch (err) {
+        console.error("Error loading thumbnail:", err);
+      }
+    };
+    void loadLocal();
+
+    return () => {
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [file]);
+
+  if (!src) {
+    return (
+      <div className="flex h-20 w-20 items-center justify-center rounded bg-gray-100 text-gray-400">
+        <span className="text-[10px]">Loading...</span>
+      </div>
+    );
+  }
+
+  if (file.key.startsWith("image-") || file.key.startsWith("image/")) {
+    return (
+      <img
+        src={src}
+        alt="Thumbnail preview"
+        className="h-20 w-20 rounded object-cover border border-gray-200"
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-20 w-20 flex-col items-center justify-center rounded bg-blue-50 border border-blue-200 text-blue-500">
+      <Paperclip size={20} />
+      <span className="mt-1 text-[9px] truncate max-w-[70px] px-1">{file.name}</span>
+    </div>
+  );
+};
+
 export default function AdvancedTextbox({
   questions,
   qIndex,
@@ -94,16 +148,19 @@ export default function AdvancedTextbox({
   const questionInstance = questions[qIndex];
   const [currentText, setCurrentText] = useState<string>("");
   const [uploadedFiles, setUploadedFiles] = useState<QuestionFile[]>([]);
+  const [uploadStatuses, setUploadStatuses] = useState<
+    Record<string, { status: "uploading" | "success" | "error"; error?: string }>
+  >({});
+
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Initialize currentText and fileExists when question gets loaded from db if any
+  // Sync state when loaded
   useEffect(() => {
     if (origin === "option" && oIndex !== undefined) {
       if (questionInstance!.options[oIndex]?.value?.value) {
         setCurrentText(questionInstance!.options[oIndex].value.value);
       }
-
       setUploadedFiles(questionInstance!.options[oIndex]?.value?.files ?? []);
     } else if (
       origin === "question" ||
@@ -117,8 +174,8 @@ export default function AdvancedTextbox({
     }
   }, [questionInstance, oIndex, origin]);
 
+  // Handle keys logic
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Keys are being handled by EditorJS rather than default behavior, so we need to block the EditorJS behavior
     const key = e.key;
 
     if (
@@ -140,11 +197,9 @@ export default function AdvancedTextbox({
       const textBeforeCursor = currentText.substring(0, cursorPosition);
       const textAfterCursor = currentText.substring(textarea.selectionEnd);
 
-      // Find the current line the cursor is on
       const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
       const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
       
-      // Match leading whitespace
       const match = currentLine.match(/^\s*/);
       const leadingWhitespace = match ? match[0] : "";
 
@@ -171,11 +226,9 @@ export default function AdvancedTextbox({
         const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
         const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
 
-        // If the line up to the cursor is purely spaces, treat it as indentation
         if (currentLine.length > 0 && /^\s+$/.test(currentLine)) {
           e.preventDefault();
           
-          // delete 2 spaces instead of 1 if possible
           const spacesToDelete = currentLine.length % 2 !== 0 ? 1 : 2;
 
           const newText = 
@@ -217,10 +270,37 @@ export default function AdvancedTextbox({
     }
   };
 
+  const updateQuestionsWithFiles = (newFiles: QuestionFile[]) => {
+    setUnsavedChanges?.(true);
+    const updatedQuestions = [...questions];
+    const updatedQuestion = { ...questionInstance! };
+
+    if (origin === "question" || origin === "explanation" || origin === "content") {
+      updatedQuestion[origin] = {
+        ...updatedQuestion[origin],
+        files: newFiles,
+      };
+    } else if (origin === "option" && oIndex !== undefined) {
+      updatedQuestion.options = [
+        ...updatedQuestion.options.slice(0, oIndex),
+        {
+          value: {
+            ...updatedQuestion.options[oIndex]!.value,
+            files: newFiles,
+          },
+          id: updatedQuestion.options[oIndex]!.id,
+        },
+        ...updatedQuestion.options.slice(oIndex + 1),
+      ];
+    }
+
+    updatedQuestions[qIndex] = updatedQuestion;
+    setQuestions(updatedQuestions);
+  };
+
   const updateQuestionText = (newText: string) => {
     setUnsavedChanges?.(true);
     setCurrentText(newText);
-    // Clone the current question to avoid direct mutation
     const updatedQuestions = [...questions];
     if (
       origin === "question" ||
@@ -232,12 +312,11 @@ export default function AdvancedTextbox({
         [origin]: {
           ...questionInstance![origin],
           value: newText,
-          files: questionInstance?.[origin]?.files ?? [], // Keep the files they exist
-        }, // Clone question
+          files: questionInstance?.[origin]?.files ?? [],
+        },
       };
       updatedQuestions[qIndex] = updatedQuestion;
     } else if (origin === "option" && oIndex !== undefined) {
-      // oIndex !== undefined because 0 is falsy
       const updatedQuestion: QuestionFormat = {
         ...questionInstance!,
         options: [
@@ -255,7 +334,7 @@ export default function AdvancedTextbox({
       updatedQuestions[qIndex] = updatedQuestion;
     }
 
-    setQuestions(updatedQuestions); // Update state immutably
+    setQuestions(updatedQuestions);
   };
 
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -266,6 +345,44 @@ export default function AdvancedTextbox({
     fileInputRef.current?.click();
   };
 
+  // Immediate upload to Firebase Storage
+  const uploadSingleFile = async (fileKey: string, file: File) => {
+    setUploadStatuses((prev) => ({
+      ...prev,
+      [fileKey]: { status: "uploading" },
+    }));
+
+    try {
+      const storage = getStorage();
+      const storageRef = ref(storage, fileKey);
+      const snapshot = await uploadBytes(storageRef, file);
+      const downloadURL = await getDownloadURL(snapshot.ref);
+
+      setUploadStatuses((prev) => ({
+        ...prev,
+        [fileKey]: { status: "success" },
+      }));
+
+      // Update the file URL in the state and questions
+      setUploadedFiles((prevFiles) => {
+        const updated = prevFiles.map((f) =>
+          f.key === fileKey ? { ...f, url: downloadURL } : f
+        );
+        updateQuestionsWithFiles(updated);
+        return updated;
+      });
+    } catch (err) {
+      console.error(`Failed to upload file ${file.name}:`, err);
+      setUploadStatuses((prev) => ({
+        ...prev,
+        [fileKey]: {
+          status: "error",
+          error: err instanceof Error ? err.message : "Upload failed",
+        },
+      }));
+    }
+  };
+
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];
     let files = Array.from(fileList).filter(
@@ -283,71 +400,40 @@ export default function AdvancedTextbox({
       alert(
         "No valid file selected (photo or audio). Try uploading again or contact support.",
       );
-      return; // Early return if file is not defined
+      return;
     }
 
-    const storeAndAppendIfNewKey = (
-      questionInput: QuestionInput,
-      files: File[],
-    ) => {
-      const newFiles = files.flatMap((file) => {
-        const fileKey = `${file.type}-${file.lastModified}`;
-        if (questionInput.files.map((file) => file.key).includes(fileKey)) {
-          return [];
-        } else {
-          storeFileInIndexedDB(fileKey, file);
-          return [
-            {
-              key: fileKey,
-              name: file.name,
-            },
-          ];
-        }
-      });
-      // Recreate array for set state
-      questionInput.files = [...questionInput.files, ...newFiles];
-    };
+    const newFiles: QuestionFile[] = [];
+    const filesToUpload: { key: string; file: File }[] = [];
 
-    const updatedQuestions = [...questions];
-    const updatedQuestion: QuestionFormat = { ...questionInstance! };
+    files.forEach((file) => {
+      // Create a unique key that works cleanly in storage
+      const sanitizedType = file.type.replace(/\//g, "-");
+      const fileKey = `${sanitizedType}-${Date.now()}-${file.name}`;
+      
+      storeFileInIndexedDB(fileKey, file);
 
-    if (origin === "question") {
-      const questionInput: QuestionInput = { ...updatedQuestion.question };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.question = questionInput;
-      setUploadedFiles(questionInput.files);
-    } else if (origin === "option" && oIndex !== undefined) {
-      // Update a specific option by oIndex
-      const optionInput: QuestionInput = {
-        ...updatedQuestion.options[oIndex]!.value,
-      };
-      storeAndAppendIfNewKey(optionInput, files);
-      updatedQuestion.options[oIndex]!.value = optionInput; // Update only the specified option
-      setUploadedFiles(optionInput.files);
-    } else if (origin === "explanation") {
-      const questionInput: QuestionInput = {
-        ...updatedQuestion.explanation,
-      };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.explanation = questionInput;
-      setUploadedFiles(questionInput.files);
-    } else if (origin === "content") {
-      const questionInput: QuestionInput = { ...updatedQuestion.content };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.content = questionInput;
-      setUploadedFiles(questionInput.files);
-    }
-    updatedQuestions[qIndex] = updatedQuestion;
+      newFiles.push({
+        key: fileKey,
+        name: file.name,
+        order: uploadedFiles.length + newFiles.length,
+      });
 
-    setQuestions(updatedQuestions);
-    setUnsavedChanges?.(true);
+      filesToUpload.push({ key: fileKey, file });
+    });
+
+    const nextFiles = [...uploadedFiles, ...newFiles];
+    setUploadedFiles(nextFiles);
+    updateQuestionsWithFiles(nextFiles);
 
-    // Reset input value so duplicate files can be reuploaded in the case of deletion
-    // Code logic will catch actual duplicates
     e.target.value = "";
+
+    // Trigger immediate uploads
+    filesToUpload.forEach(({ key, file }) => {
+      void uploadSingleFile(key, file);
+    });
   };
 
-  // Function to delete a file from Firebase Storage
   async function deleteFileFromStorage(fileKey: string): Promise<void> {
     const user = await getUser();
 
@@ -368,57 +454,78 @@ export default function AdvancedTextbox({
       }
 
       console.error(`Error deleting file ${fileKey} from storage:`, error);
-      // You might want to handle specific error codes here
       return;
     }
   }
 
-  const handleDeleteFile = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const fileKey = e.currentTarget.dataset.fileKey;
+  const handleDeleteFile = (fileKey: string) => {
+    const nextFiles = uploadedFiles.filter((file) => file.key !== fileKey);
+    setUploadedFiles(nextFiles);
+    updateQuestionsWithFiles(nextFiles);
 
-    if (!fileKey) {
-      alert("Error deleting file, please try again");
-      return;
-    }
+    setUploadStatuses((prev) => {
+      const next = { ...prev };
+      delete next[fileKey];
+      return next;
+    });
 
-    const updatedQuestions = [...questions];
-    const updatedQuestion: QuestionFormat = { ...questionInstance! };
+    void deleteFileFromIndexedDB(fileKey);
+    void deleteFileFromStorage(fileKey);
+  };
 
-    const deleteFile = (question: QuestionInput) => {
-      deleteFileFromIndexedDB(fileKey).catch((error) => {
-        console.error("Error deleting file from IndexedDB:", error);
-      });
-      deleteFileFromStorage(fileKey).catch((error) => {
-        console.error("Error deleting file from Storage:", error);
-      });
+  const handleRetryUpload = async (fileKey: string, fileName: string) => {
+    try {
+      const stored = await getFileFromIndexedDB(fileKey);
+      if (stored?.file) {
+        void uploadSingleFile(fileKey, stored.file);
+      } else {
+        alert(`Could not find local file data for "${fileName}". Please remove and re-upload.`);
+      }
+    } catch (err) {
+      console.error("Retry load from IndexedDB failed:", err);
+      alert("Failed to retry. Please try uploading the file again.");
+    }
+  };
 
-      question.files = question.files.filter((file) => file.key !== fileKey);
-      setUploadedFiles(question.files);
-    };
+  const updateFileAlt = (fileKey: string, newAlt: string) => {
+    const updated = uploadedFiles.map((f) =>
+      f.key === fileKey ? { ...f, alt: newAlt } : f
+    );
+    setUploadedFiles(updated);
+    updateQuestionsWithFiles(updated);
+  };
 
-    if (
-      origin === "question" ||
-      origin === "explanation" ||
-      origin === "content"
-    ) {
-      const questionInput: QuestionInput = { ...updatedQuestion[origin] };
+  const moveFile = (index: number, direction: "left" | "right") => {
+    const targetIndex = index + (direction === "left" ? -1 : 1);
+    if (targetIndex < 0 || targetIndex >= uploadedFiles.length) return;
 
-      deleteFile(questionInput);
+    const nextFiles = [...uploadedFiles];
+    const temp = nextFiles[index]!;
+    nextFiles[index] = nextFiles[targetIndex]!;
+    nextFiles[targetIndex] = temp;
 
-      updatedQuestion[origin] = questionInput;
-    } else if (origin === "option" && oIndex !== undefined) {
-      const optionInput: QuestionInput = {
-        ...updatedQuestion.options[oIndex]!.value,
-      };
+    const orderedFiles = nextFiles.map((f, idx) => ({ ...f, order: idx }));
+    setUploadedFiles(orderedFiles);
+    updateQuestionsWithFiles(orderedFiles);
+  };
 
-      deleteFile(optionInput);
+  const insertPlaceholder = (file: QuestionFile, index: number) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
 
-      updatedQuestion.options[oIndex]!.value = optionInput;
-    }
+    const placeholderText = `[image:${index + 1}]`;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
 
-    updatedQuestions[qIndex] = updatedQuestion;
-    setQuestions(updatedQuestions);
-    setUnsavedChanges?.(true);
+    const newText =
+      currentText.substring(0, start) + placeholderText + currentText.substring(end);
+    
+    updateQuestionText(newText);
+
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + placeholderText.length, start + placeholderText.length);
+    }, 0);
   };
 
   return (
@@ -430,7 +537,7 @@ export default function AdvancedTextbox({
         onKeyDown={handleKeyDown}
         placeholder={
           placeholder ??
-          "Type or drag and drop here (only 1 file allowed). Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code."
+          "Type or drag and drop here. Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code. References to images can be made via [image:1] placeholders."
         }
       />
 
@@ -443,28 +550,128 @@ export default function AdvancedTextbox({
         multiple
       />
 
-      {/* Section under the textarea for upload and delete buttons */}
-      <div className="mt-2">
-        {uploadedFiles.length > 0 &&
-          uploadedFiles.map((file) => (
-            <div key={file.key} className="mb-2 flex items-center space-x-2">
-              <button
-                type="button"
-                className="flex items-center text-red-500 hover:underline"
-                onClick={handleDeleteFile}
-                data-file-key={file.key}
+      {/* Grid of uploaded file cards with visual preview, load states, and alt tag fields */}
+      {uploadedFiles.length > 0 && (
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {uploadedFiles.map((file, index) => {
+            const statusInfo = uploadStatuses[file.key] ?? {
+              status: file.url ? "success" : "uploading",
+            };
+            return (
+              <div
+                key={file.key}
+                className="flex flex-col rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all duration-200 hover:shadow"
               >
-                Delete file <Trash className="ml-1 size-5" />
-              </button>
-              <div>{file.name}</div>
-            </div>
-          ))}
+                <div className="flex items-start gap-3">
+                  <div className="relative shrink-0">
+                    <ThumbnailPreview file={file} />
+                    {statusInfo.status === "uploading" && (
+                      <div className="absolute inset-0 flex items-center justify-center rounded bg-black/40">
+                        <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-xs font-semibold text-gray-800" title={file.name}>
+                      {file.name}
+                    </div>
+
+                    {statusInfo.status === "error" && (
+                      <div className="mt-1 flex flex-col gap-1">
+                        <span className="text-[10px] font-bold text-red-500">
+                          Upload failed: {statusInfo.error ?? "Unknown error"}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => handleRetryUpload(file.key, file.name)}
+                          className="w-fit text-[10px] font-medium text-blue-600 hover:underline"
+                        >
+                          Retry Upload
+                        </button>
+                      </div>
+                    )}
+
+                    {statusInfo.status === "success" && (
+                      <span className="mt-1 inline-flex items-center rounded bg-green-50 px-1.5 py-0.5 text-[9px] font-medium text-green-700 border border-green-200">
+                        Uploaded
+                      </span>
+                    )}
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteFile(file.key)}
+                    className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500 transition-colors"
+                    title="Remove file"
+                  >
+                    <Trash size={14} />
+                  </button>
+                </div>
+
+                <div className="mt-3 flex flex-col gap-2 border-t border-gray-100 pt-2">
+                  <div className="flex items-center gap-1.5">
+                    <label
+                      htmlFor={`alt-${file.key}`}
+                      className="text-[9px] font-bold text-gray-500 uppercase tracking-wider shrink-0"
+                    >
+                      Alt:
+                    </label>
+                    <input
+                      id={`alt-${file.key}`}
+                      type="text"
+                      placeholder="Alt text (e.g. Graph of sales)"
+                      value={file.alt ?? ""}
+                      onChange={(e) => updateFileAlt(file.key, e.target.value)}
+                      className="flex h-7 w-full rounded border border-gray-200 bg-background px-2 py-1 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300 placeholder:text-gray-400"
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        disabled={index === 0}
+                        onClick={() => moveFile(index, "left")}
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
+                        title="Move left/up"
+                      >
+                        <ChevronLeft size={12} />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={index === uploadedFiles.length - 1}
+                        onClick={() => moveFile(index, "right")}
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
+                        title="Move right/down"
+                      >
+                        <ChevronRight size={12} />
+                      </button>
+                    </div>
+
+                    <button
+                      type="button"
+                      onClick={() => insertPlaceholder(file, index)}
+                      className="rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 hover:bg-blue-100 transition-colors"
+                      title="Insert inline placeholder tag"
+                    >
+                      Insert Inline
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="mt-2 flex justify-end">
         <button
           type="button"
-          className="flex items-center text-blue-500 hover:underline"
+          className="flex items-center gap-1 rounded-md border border-blue-500 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 hover:bg-blue-100 hover:text-blue-700 transition-all shadow-sm"
           onClick={handleUploadClick}
         >
-          Add file <Paperclip className="ml-1 size-5" />
+          <Paperclip size={14} /> Add file
         </button>
       </div>
     </div>
diff --git a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
index 2cfda0c3..fe497aff 100644
--- a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
@@ -2,11 +2,13 @@ import React, { useState, useEffect } from "react";
 import katex from "katex";
 import type { QuestionFile, QuestionInput } from "@/types/questions";
 import "../../../styles/katexStyling.css";
-import Image from "next/image";
 import { decodeEntities, katexMacros } from "../Renderer";
 
+import { cn } from "@/lib/utils";
+
 interface Props {
   content: QuestionInput;
+  origin?: "question" | "explanation" | "option" | "content";
 }
 
 interface FileWrapper {
@@ -100,14 +102,12 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
 
   if (file.key.startsWith("image/")) {
     return (
-      <div className="my-2">
-        <Image
+      <div className="my-2 w-full flex justify-center">
+        <img
           src={objectUrl}
-          alt="Uploaded image"
-          width={16}
-          height={9}
-          layout="responsive"
-          className="h-auto max-w-full"
+          alt={file.alt ?? "Uploaded image"}
+          loading="lazy"
+          className="h-auto max-h-[450px] w-auto max-w-full rounded-md object-contain shadow-sm transition-shadow duration-200 hover:shadow-md"
         />
       </div>
     );
@@ -116,7 +116,7 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   if (file.key.startsWith("audio/")) {
     return (
       <div className="my-2">
-        <audio controls>
+        <audio controls className="w-full max-w-md">
           <source src={objectUrl} type="audio/mpeg" />
           Your browser does not support the audio element.
         </audio>
@@ -127,45 +127,139 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   return null;
 };
 
-export function RenderContent({ content }: Props) {
+export function RenderContent({ content, origin }: Props) {
+  // Sort files by their order index, default to stable positioning
+  const sortedFiles = [...(content.files || [])].sort((a, b) => {
+    const orderA = a.order ?? 999;
+    const orderB = b.order ?? 999;
+    return orderA - orderB;
+  });
+
+  const renderedInlineKeys = new Set<string>();
+
+  // Function to search for a matching file based on placeholder string
+  const getMatchingFile = (param: string) => {
+    const trimmed = param.trim();
+    // 1. Check if 1-based index (e.g., [image:1])
+    const index = parseInt(trimmed, 10);
+    if (!isNaN(index) && index > 0 && index <= sortedFiles.length) {
+      return sortedFiles[index - 1];
+    }
+    // 2. Check if direct file key matches
+    const byKey = sortedFiles.find((f) => f.key === trimmed);
+    if (byKey) return byKey;
+    // 3. Check if filename matches (case-insensitive)
+    const byName = sortedFiles.find(
+      (f) =>
+        f.name.toLowerCase() === trimmed.toLowerCase() ||
+        f.name.split(".")[0]?.toLowerCase() === trimmed.toLowerCase()
+    );
+    if (byName) return byName;
+    return null;
+  };
+
+  const tokens = decodeEntities(content.value)
+    .split(/(```[\s\S]*?```|\$@[^$]+\$|\[image:[^\]]+\])/g)
+    .map((token, tokenIndex) => {
+      if (token.startsWith("```") && token.endsWith("```")) {
+        const codeContent = token.slice(3, -3).replace(/^\n/, "");
+        return (
+          <pre
+            key={`code-${tokenIndex}`}
+            className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
+            style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
+          >
+            <code>{codeContent}</code>
+          </pre>
+        );
+      } else if (token.startsWith("$@") && token.endsWith("$")) {
+        return (
+          <span
+            key={`latex-${tokenIndex}`}
+            dangerouslySetInnerHTML={{
+              __html: katex.renderToString(token.slice(2, -1), {
+                throwOnError: false,
+                macros: katexMacros,
+              }),
+            }}
+          ></span>
+        );
+      } else if (token.startsWith("[image:") && token.endsWith("]")) {
+        const param = token.slice(7, -1);
+        const matchedFile = getMatchingFile(param);
+        if (matchedFile) {
+          renderedInlineKeys.add(matchedFile.key);
+          return (
+            <div key={`inline-img-${tokenIndex}`} className="my-4 block text-center">
+              <FileRenderer file={matchedFile} />
+              {matchedFile.alt && (
+                <span className="mt-1 block text-center text-xs italic text-gray-500">
+                  {matchedFile.alt}
+                </span>
+              )}
+            </div>
+          );
+        }
+      }
+      return <span key={`text-${tokenIndex}`}>{token}</span>;
+    });
+
+  // Filter out files that were already rendered inline
+  const remainingFiles = sortedFiles.filter((file) => !renderedInlineKeys.has(file.key));
+  const remainingImages = remainingFiles.filter((file) => file.key.startsWith("image/"));
+  const remainingAudio = remainingFiles.filter((file) => file.key.startsWith("audio/"));
+
   return (
     <div className="custom-katex my-2 whitespace-pre-wrap">
-      {/* Render text content directly */}
-      {decodeEntities(content.value)
-        .split(/(```[\s\S]*?```|\$@[^$]+\$)/g)
-        .map((token, tokenIndex) => {
-          if (token.startsWith("```") && token.endsWith("```")) {
-            // Strip the ``` from start and end, and remove the leading newline.
-            const codeContent = token.slice(3, -3).replace(/^\n/, "");
-            return (
-              <pre
-                key={`code-${tokenIndex}`}
-                className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
-                style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
-              >
-                <code>{codeContent}</code>
-              </pre>
-            );
-          } else if (token.startsWith("$@") && token.endsWith("$")) {
-            return (
-              <span
-                key={`latex-${tokenIndex}`}
-                dangerouslySetInnerHTML={{
-                  __html: katex.renderToString(token.slice(2, -1), {
-                    throwOnError: false,
-                    macros: katexMacros,
-                  }),
-                }}
-              ></span>
-            );
-          }
-          return <span key={`text-${tokenIndex}`}>{token}</span>;
-        })}
-
-      {/* Render files through individual components */}
-      {content.files?.map((file) => (
+      {/* Render parsed inline block elements */}
+      {tokens}
+
+      {/* Render any leftover audio files */}
+      {remainingAudio.map((file) => (
         <FileRenderer key={file.key} file={file} />
       ))}
+
+      {/* Render remaining images */}
+      {remainingImages.length > 0 && (
+        <div className="mt-4">
+          {origin === "question" && remainingImages.length >= 2 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+              {remainingImages.map((file, idx) => {
+                const isThirdOfThree = remainingImages.length === 3 && idx === 2;
+                return (
+                  <div
+                    key={file.key}
+                    className={cn(
+                      "flex flex-col items-center justify-center p-2 rounded-lg border border-gray-200 bg-gray-50/40 shadow-sm",
+                      isThirdOfThree && "sm:col-span-2 sm:max-w-2xl sm:mx-auto w-full"
+                    )}
+                  >
+                    <FileRenderer file={file} />
+                    {file.alt && (
+                      <span className="mt-1 block text-center text-xs italic text-gray-500">
+                        {file.alt}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex flex-col gap-4">
+              {remainingImages.map((file) => (
+                <div key={file.key} className="flex flex-col items-center">
+                  <FileRenderer file={file} />
+                  {file.alt && (
+                    <span className="mt-1 block text-center text-xs italic text-gray-500">
+                      {file.alt}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/questions/checkForUnderstanding.tsx b/src/components/questions/checkForUnderstanding.tsx
index 5980e8af..bbe304f3 100644
--- a/src/components/questions/checkForUnderstanding.tsx
+++ b/src/components/questions/checkForUnderstanding.tsx
@@ -62,7 +62,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
   return (
     <div className="max-w-6xl rounded-lg border border-primary bg-primary-foreground p-4">
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       {isFrq ? (
@@ -131,7 +131,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
           {!isFrq && questionInstance.explanation.value && (
             <div className="mt-4 rounded-md border border-primary bg-white p-3">
               <strong>Explanation:</strong>
-              <RenderContent content={questionInstance.explanation} />
+              <RenderContent content={questionInstance.explanation} origin="explanation" />
             </div>
           )}
           <button
diff --git a/src/components/questions/digital-testing/QuestionPanel.tsx b/src/components/questions/digital-testing/QuestionPanel.tsx
index 96f2664e..32dab5b9 100644
--- a/src/components/questions/digital-testing/QuestionPanel.tsx
+++ b/src/components/questions/digital-testing/QuestionPanel.tsx
@@ -99,7 +99,7 @@ export default function QuestionPanel({
   return (
     <div className="relative">
       <div className="my-4 text-lg">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       <div className="grid gap-4">
@@ -145,7 +145,7 @@ export default function QuestionPanel({
                       isStrikedThrough && "opacity-50",
                     )}
                   >
-                    <RenderContent content={option.value} />
+                    <RenderContent content={option.value} origin="option" />
                   </span>
 
                   {!submitted && showEliminationTools && (
@@ -181,7 +181,7 @@ export default function QuestionPanel({
         {submitted && (
           <div className="rounded-lg border bg-gray-100 p-3">
             <h3 className="mb-2 text-lg font-semibold">Explanation:</h3>
-            <RenderContent content={questionInstance.explanation} />
+            <RenderContent content={questionInstance.explanation} origin="explanation" />
           </div>
         )}
       </div>
diff --git a/src/components/questions/quizRenderer.tsx b/src/components/questions/quizRenderer.tsx
index 58c72340..43483c4d 100644
--- a/src/components/questions/quizRenderer.tsx
+++ b/src/components/questions/quizRenderer.tsx
@@ -85,7 +85,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             : "Answers revealed")}
       </div>
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       {isFrq ? (
@@ -111,19 +111,18 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             <button
               key={option.id}
               className={`rounded-md border px-2 text-left shadow transition-colors
-            ${
-              showResults
-                ? isAnswerCorrect(option.id)
-                  ? answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-green-700 bg-green-300"
-                    : "border-green-700 bg-green-100"
+            ${showResults
+                  ? isAnswerCorrect(option.id)
+                    ? answers[currentQuestionIndex]?.includes(option.id)
+                      ? "border-green-700 bg-green-300"
+                      : "border-green-700 bg-green-100"
+                    : answers[currentQuestionIndex]?.includes(option.id)
+                      ? "border-red-700 bg-red-300"
+                      : "border-gray-300 bg-white"
                   : answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-red-700 bg-red-300"
+                    ? "border-blue-500 bg-blue-100"
                     : "border-gray-300 bg-white"
-                : answers[currentQuestionIndex]?.includes(option.id)
-                  ? "border-blue-500 bg-blue-100"
-                  : "border-gray-300 bg-white"
-            }
+                }
             `}
               onClick={() => handleSelectOption(option.id)}
               disabled={showResults}
@@ -150,7 +149,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
       {showResults && !isFrq && questionInstance.explanation.value && (
         <div className="mt-4 rounded-md border border-primary bg-white p-3">
           <strong>Explanation:</strong>
-          <RenderContent content={questionInstance.explanation} />
+          <RenderContent content={questionInstance.explanation} origin="explanation" />
         </div>
       )}
 
diff --git a/src/components/questions/testRenderer.tsx b/src/components/questions/testRenderer.tsx
index 16fa4266..c6720bae 100644
--- a/src/components/questions/testRenderer.tsx
+++ b/src/components/questions/testRenderer.tsx
@@ -153,6 +153,7 @@ export default function DigitalTestingPage({
                 >
                   <RenderContent
                     content={questions[currentQuestionIndex]!.content}
+                    origin="content"
                   />
                 </Highlighter>
               </div>
diff --git a/src/types/questions.ts b/src/types/questions.ts
index 1b88859d..83def309 100644
--- a/src/types/questions.ts
+++ b/src/types/questions.ts
@@ -2,8 +2,12 @@ export interface QuestionFile {
   key: string;
   url?: string;
   name: string;
+  id?: string;
+  alt?: string;
+  order?: number;
 }
 
+
 export interface QuestionInput {
   value: string;
   files: QuestionFile[];

From 238c32360a8ca970d24b624e0aa5295365f7db8c Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 11 Jun 2026 09:14:29 -0700
Subject: [PATCH 10/49] fix rendering on student-side

---
 .../custom_questions/RenderAdvancedTextbox.tsx     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
index fe497aff..5b7ef019 100644
--- a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
@@ -15,6 +15,12 @@ interface FileWrapper {
   file: File;
 }
 
+const isImageFileKey = (key: string) =>
+  key.startsWith("image/") || key.startsWith("image-");
+
+const isAudioFileKey = (key: string) =>
+  key.startsWith("audio/") || key.startsWith("audio-");
+
 // Utility to retrieve a file from IndexedDB based on unique ID
 export function getFileFromIndexedDB(
   name: string,
@@ -100,7 +106,7 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
 
   if (!objectUrl) return null;
 
-  if (file.key.startsWith("image/")) {
+  if (isImageFileKey(file.key)) {
     return (
       <div className="my-2 w-full flex justify-center">
         <img
@@ -113,7 +119,7 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
     );
   }
 
-  if (file.key.startsWith("audio/")) {
+  if (isAudioFileKey(file.key)) {
     return (
       <div className="my-2">
         <audio controls className="w-full max-w-md">
@@ -206,8 +212,8 @@ export function RenderContent({ content, origin }: Props) {
 
   // Filter out files that were already rendered inline
   const remainingFiles = sortedFiles.filter((file) => !renderedInlineKeys.has(file.key));
-  const remainingImages = remainingFiles.filter((file) => file.key.startsWith("image/"));
-  const remainingAudio = remainingFiles.filter((file) => file.key.startsWith("audio/"));
+  const remainingImages = remainingFiles.filter((file) => isImageFileKey(file.key));
+  const remainingAudio = remainingFiles.filter((file) => isAudioFileKey(file.key));
 
   return (
     <div className="custom-katex my-2 whitespace-pre-wrap">

From dc2708c5e2b378d376334d2963e7be6de00fc297 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 11 Jun 2026 09:17:19 -0700
Subject: [PATCH 11/49] fix error message in the console

---
 .../custom_questions/AdvancedTextbox.tsx          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index 3abcd557..ce799df2 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -365,11 +365,9 @@ export default function AdvancedTextbox({
 
       // Update the file URL in the state and questions
       setUploadedFiles((prevFiles) => {
-        const updated = prevFiles.map((f) =>
-          f.key === fileKey ? { ...f, url: downloadURL } : f
+        return prevFiles.map((f) =>
+          f.key === fileKey ? { ...f, url: downloadURL } : f,
         );
-        updateQuestionsWithFiles(updated);
-        return updated;
       });
     } catch (err) {
       console.error(`Failed to upload file ${file.name}:`, err);
@@ -377,12 +375,17 @@ export default function AdvancedTextbox({
         ...prev,
         [fileKey]: {
           status: "error",
-          error: err instanceof Error ? err.message : "Upload failed",
-        },
+        error: err instanceof Error ? err.message : "Upload failed",
+      },
       }));
     }
   };
 
+  useEffect(() => {
+    updateQuestionsWithFiles(uploadedFiles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFiles]);
+
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];
     let files = Array.from(fileList).filter(

From 2a4cd115a7d9a105fb9d35dbf43bad4e11f49744 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Fri, 12 Jun 2026 08:41:38 -0700
Subject: [PATCH 12/49] prevent infinite loop

---
 .../custom_questions/AdvancedTextbox.tsx      | 64 +++++++++++++------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index ce799df2..bd73408f 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -81,6 +81,22 @@ function deleteFileFromIndexedDB(name: string) {
   });
 }
 
+function areFilesEqual(a: QuestionFile[], b: QuestionFile[]) {
+  if (a.length !== b.length) return false;
+
+  return a.every((file, index) => {
+    const other = b[index];
+    return (
+      !!other &&
+      file.key === other.key &&
+      file.url === other.url &&
+      file.name === other.name &&
+      file.alt === other.alt &&
+      file.order === other.order
+    );
+  });
+}
+
 // Helper component to display visual thumbnails/previews of files in editing mode
 const ThumbnailPreview: React.FC<{ file: QuestionFile }> = ({ file }) => {
   const [src, setSrc] = useState<string | null>(null);
@@ -156,21 +172,31 @@ export default function AdvancedTextbox({
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Sync state when loaded
-  useEffect(() => {
-    if (origin === "option" && oIndex !== undefined) {
-      if (questionInstance!.options[oIndex]?.value?.value) {
-        setCurrentText(questionInstance!.options[oIndex].value.value);
-      }
-      setUploadedFiles(questionInstance!.options[oIndex]?.value?.files ?? []);
-    } else if (
-      origin === "question" ||
-      origin === "explanation" ||
-      origin === "content"
-    ) {
-      if (questionInstance![origin]?.value) {
-        setCurrentText(questionInstance![origin].value);
-      }
-      setUploadedFiles(questionInstance![origin]?.files ?? []);
+    useEffect(() => {
+    const nextText =
+      origin === "option" && oIndex !== undefined
+        ? questionInstance!.options[oIndex]?.value?.value ?? ""
+        : origin === "question" ||
+            origin === "explanation" ||
+            origin === "content"
+          ? questionInstance![origin]?.value ?? ""
+          : "";
+
+    const nextFiles =
+      origin === "option" && oIndex !== undefined
+        ? questionInstance!.options[oIndex]?.value?.files ?? []
+        : origin === "question" ||
+            origin === "explanation" ||
+            origin === "content"
+          ? questionInstance![origin]?.files ?? []
+          : [];
+
+    if (currentText !== nextText) {
+      setCurrentText(nextText);
+    }
+
+    if (!areFilesEqual(uploadedFiles, nextFiles)) {
+      setUploadedFiles(nextFiles);
     }
   }, [questionInstance, oIndex, origin]);
 
@@ -365,9 +391,11 @@ export default function AdvancedTextbox({
 
       // Update the file URL in the state and questions
       setUploadedFiles((prevFiles) => {
-        return prevFiles.map((f) =>
+        const updated = prevFiles.map((f) =>
           f.key === fileKey ? { ...f, url: downloadURL } : f,
         );
+        updateQuestionsWithFiles(updated);
+        return updated;
       });
     } catch (err) {
       console.error(`Failed to upload file ${file.name}:`, err);
@@ -381,10 +409,6 @@ export default function AdvancedTextbox({
     }
   };
 
-  useEffect(() => {
-    updateQuestionsWithFiles(uploadedFiles);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadedFiles]);
 
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];

From 149af719f613188357655a4d34601fd8f031b534 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 13 Jun 2026 16:27:16 -0700
Subject: [PATCH 13/49] base feedback upload

---
 firestore.rules                        |   7 ++
 src/app/admin/feedback/[slug]/page.tsx | 105 +++++++++++++++++
 src/app/admin/feedback/page.tsx        |  93 +++++++++++++++
 src/app/admin/page.tsx                 |   9 +-
 src/app/feedback/page.tsx              | 157 +++++++++++++++++++++++++
 src/components/global/footer.tsx       |   2 +-
 6 files changed, 371 insertions(+), 2 deletions(-)
 create mode 100644 src/app/admin/feedback/[slug]/page.tsx
 create mode 100644 src/app/admin/feedback/page.tsx
 create mode 100644 src/app/feedback/page.tsx

diff --git a/firestore.rules b/firestore.rules
index 61f17e7c..65f8bca7 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -99,5 +99,12 @@ service cloud.firestore {
     match /profiles/{userId} {
       allow read, write: if isAuthenticated() && request.auth.uid == userId;
     }
+
+    match /feedback/{feedbackId} {
+      allow create: if request.resource.data.type in ['general', 'bug', 'questions']
+                    && request.resource.data.message is string
+                    && request.resource.data.message.trim() != '';
+      allow read, update, delete: if isAdmin();
+    }
   }
 }
diff --git a/src/app/admin/feedback/[slug]/page.tsx b/src/app/admin/feedback/[slug]/page.tsx
new file mode 100644
index 00000000..fd5493f1
--- /dev/null
+++ b/src/app/admin/feedback/[slug]/page.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { db } from '@/lib/firebase';
+import { doc, getDoc } from 'firebase/firestore';
+
+export default function FeedbackDetailsPage() {
+  const {slug} = useParams() as { slug: string };
+  const router = useRouter();
+  const [bug, setBug] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!slug) return;
+
+    const fetchSingleFeedback = async () => {
+      try {
+        const docRef = doc(db, 'feedback', slug as string);
+        const docSnap = await getDoc(docRef);
+        
+        if (docSnap.exists()) {
+          setBug(docSnap.data());
+        } else {
+          console.error("No such document found!");
+        }
+      } catch (err) {
+        console.error("Error pulling document context:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSingleFeedback();
+  }, [slug]);
+
+  if (loading) return <div className="p-8 text-center text-gray-500">Loading item snapshot...</div>;
+  if (!bug) return <div className="p-8 text-center text-red-500">Feedback ticket not found.</div>;
+
+  return (
+    <div className="max-w-2xl mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+      <button 
+        onClick={() => router.back()}
+        className="text-sm text-gray-500 hover:text-gray-800 mb-4 inline-flex items-center gap-1"
+      >
+        ← Back to Dashboard
+      </button>
+
+      <div className="flex items-center justify-between border-b pb-4 mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Feedback Record</h1>
+        <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${
+          bug.type === 'bug' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
+        }`}>
+          {bug.type}
+        </span>
+      </div>
+
+      <div className="space-y-6">
+        {bug.type === 'bug' && (
+          <>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Issue Category</h3>
+              <p className="text-gray-900 font-medium bg-gray-50 p-2 rounded border">{bug.bugType}</p>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
+              {bug.bugUrl && bug.bugUrl !== 'N/A' ? (
+                <a 
+                  href={bug.bugUrl} 
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className="text-blue-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
+                >
+                  {bug.bugUrl} 
+                </a>
+              ) : (
+                <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
+              )}
+            </div>
+          </>
+        )}
+
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
+          </h3>
+          <div className="bg-gray-50 border rounded p-4 text-gray-800 whitespace-pre-wrap min-h-[100px]">
+            {bug.message}
+          </div>
+        </div>
+
+        <div className="border-t pt-4 text-xs text-gray-500 space-y-1">
+          <p><strong>Contact Email:</strong> {bug.email}</p>
+          <p>
+            <strong>Timestamp:</strong> {bug.createdAt?.seconds 
+              ? new Date(bug.createdAt.seconds * 1000).toLocaleString() 
+              : 'N/A'
+            }
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
new file mode 100644
index 00000000..c53f6c3a
--- /dev/null
+++ b/src/app/admin/feedback/page.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { db } from '@/lib/firebase';
+import { collection, getDocs, query, orderBy } from 'firebase/firestore';
+import { buttonVariants } from "@/components/ui/button";
+import {ArrowLeft} from "lucide-react";
+
+export default function AdminFeedbackDashboard() {
+  const [feedbackItems, setFeedbackItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFeedback = async () => {
+      try {
+        const q = query(collection(db, 'feedback'), orderBy('createdAt', 'desc'));
+        const querySnapshot = await getDocs(q);
+        const items = querySnapshot.docs.map(doc => ({
+          id: doc.id,
+          ...doc.data()
+        }));
+        setFeedbackItems(items);
+      } catch (error) {
+        console.error("Error fetching feedback:", error);
+      } finally {
+        setLoading(setLoading(false) as any); // safe fallback state handling
+        setLoading(false);
+      }
+    };
+
+    fetchFeedback();
+  }, []);
+
+  if (loading) return <div className="p-8 text-center text-gray-500">Loading feedback...</div>;
+
+  return (
+    <div className="p-8 max-w-5xl mx-auto">
+      <Link
+        className={buttonVariants({ variant: "outline" })}
+        href="/admin"
+      >
+        <ArrowLeft className="mr-2" />
+        Return to Admin Dashboard
+      </Link>
+      <h1 className="text-3xl font-bold mb-6 mt-6 text-gray-900">Feedback/Bug Reports</h1>
+      
+      {feedbackItems.length === 0 ? (
+        <p className="text-gray-500">No feedback submissions found yet.</p>
+      ) : (
+        <div className="overflow-x-auto border rounded-lg shadow-sm bg-white">
+          <table className="min-w-full divide-y divide-gray-200 text-left text-sm">
+            <thead className="bg-gray-50 text-gray-700 uppercase font-semibold text-xs tracking-wider">
+              <tr>
+                <th className="p-4">Type</th>
+                <th className="p-4">Summary</th>
+                <th className="p-4">Submitted By</th>
+                <th className="p-4">Date</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 text-gray-700">
+              {feedbackItems.map((item) => (
+                <tr key={item.id} className="hover:bg-gray-50 transition-colors">
+                  <td className="p-4 whitespace-nowrap">
+                    <span className={`px-2 py-1 rounded text-xs font-semibold uppercase ${
+                      item.type === 'bug' ? 'bg-red-100 text-red-800' : 
+                      item.type === 'questions' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'
+                    }`}>
+                      {item.type}
+                    </span>
+                  </td>
+                  <td className="p-4 font-medium max-w-xs truncate">
+                    <Link href={`/admin/feedback/${item.id}`} className="text-yellow-600 hover:underline">
+                      {item.type === 'bug' ? `[${item.bugType}] ` : ''}
+                      {item.message}
+                    </Link>
+                  </td>
+                  <td className="p-4 text-gray-500">{item.email}</td>
+                  <td className="p-4 text-gray-500 whitespace-nowrap">
+                    {item.createdAt?.seconds 
+                      ? new Date(item.createdAt.seconds * 1000).toLocaleDateString()
+                      : new Date().toLocaleDateString()
+                    }
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index e7773a5b..6109dc3a 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -45,7 +45,14 @@ const Page = () => {
             <AdminPanel user={user} />
           </>
         )}
-
+        
+        
+          <Link href="/admin/feedback" className="hover:text-yellow-600">
+            <Button className="w-full">
+            Check Feedback & Bug Reports
+            </Button>
+          </Link>
+        <br></br>
         <SelectCourse />
       </div>
 
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
new file mode 100644
index 00000000..386d61bb
--- /dev/null
+++ b/src/app/feedback/page.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import { useState } from 'react';
+import { db } from '@/lib/firebase'; 
+import { collection, addDoc } from 'firebase/firestore';
+
+export default function FeedbackPage() {
+  const [type, setType] = useState('general');
+  // New bug-specific states matching your images
+  const [bugType, setBugType] = useState('Website Article Errors');
+  const [bugUrl, setBugUrl] = useState('');
+  
+  const [message, setMessage] = useState('');
+  const [email, setEmail] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!message.trim()) return;
+
+    setStatus('loading');
+
+    try {
+      // Build the base payload
+      const feedbackPayload: any = {
+        type: type,
+        message: message,
+        email: email || 'anonymous',
+        createdAt: new Date(),
+      };
+
+      // Conditionally append the precise details if it's a bug report
+      if (type === 'bug') {
+        feedbackPayload.bugType = bugType;
+        feedbackPayload.bugUrl = bugUrl || 'N/A';
+      }
+
+      await addDoc(collection(db, 'feedback'), feedbackPayload);
+
+      setStatus('success');
+      setMessage('');
+      setEmail('');
+      setBugUrl('');
+    } catch (err) {
+      console.error('Error submitting feedback:', err);
+      setStatus('error');
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+      <h1 className="text-2xl font-bold mb-4 text-gray-800">Submit Feedback</h1>
+      
+      {status === 'success' && (
+        <div className="mb-4 p-3 bg-green-100 text-green-700 rounded-md">
+          Thank you! Your feedback has been submitted successfully.
+        </div>
+      )}
+      {status === 'error' && (
+        <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-md">
+          Something went wrong. Please try again.
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Feedback Type</label>
+          <select 
+            value={type} 
+            onChange={(e) => setType(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          >
+            <option value="general">General Feedback</option>
+            <option value="bug">Bug Report</option>
+            <option value="questions">Asking Questions</option>
+          </select>
+        </div>
+
+        {/* --- DYNAMIC BUG FIELDS (Shown only when 'bug' is chosen) --- */}
+        {type === 'bug' && (
+          <>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                What is the type of the issue? *
+              </label>
+              <select 
+                value={bugType} 
+                onChange={(e) => setBugType(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              >
+                <option value="Website Article Errors">Website Article Errors</option>
+                <option value="Unit Test Errors">Unit Test Errors</option>
+                <option value="Mock Exam Errors">Mock Exam Errors</option>
+                <option value="Website Bugs">Website Bugs</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                What is the URL of the issue? *
+              </label>
+              <p className="text-xs text-gray-500 mb-1">If the URL is irrelevant for your bug report, just put down &quot;N/A&quot;.</p>
+              <input 
+                type="text" 
+                required
+                placeholder="https://fivehive.org/... or N/A"
+                value={bugUrl}
+                onChange={(e) => setBugUrl(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+          </>
+        )}
+        {/* ------------------------------------------------------------- */}
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Your Email (Optional)</label>
+          <input 
+            type="email" 
+            placeholder="apstudent@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {type === 'bug' ? 'Please describe the issue in detail. *' : 'Message *'}
+          </label>
+          {type === 'bug' && (
+            <p className="text-xs text-gray-500 mb-1">
+              Please include any relevant information, such as factual errors, punctuation errors, broken links, formatting issues, appearance bugs, ... Most importantly, please provide detailed steps on how to reproduce this bug.
+            </p>
+          )}
+          <textarea 
+            required
+            rows={4}
+            placeholder={type === 'bug' ? "Steps to reproduce / description..." : "This could be anything about improving the website or even FiveHive in general! We appreciate any feedback you can give."}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+
+        <button 
+          type="submit" 
+          disabled={status === 'loading'}
+          className="w-full py-2 bg-yellow-500 hover:bg-yellow-600 disabled:bg-gray-400 text-white font-semibold rounded-md transition duration-200"
+        >
+          {status === 'loading' ? 'Submitting...' : 'Submit Feedback'}
+        </button>
+      </form>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/global/footer.tsx b/src/components/global/footer.tsx
index 2518c006..09ce2075 100644
--- a/src/components/global/footer.tsx
+++ b/src/components/global/footer.tsx
@@ -17,7 +17,7 @@ const links = [
   },
   {
     title: "Feedback",
-    url: "https://forms.gle/1J1VWe9rEMp3kfC78",
+    url: "/feedback",
   },
 ];
 

From a04823f8ae1bcf128cb411ceaab69e4f4e9e74a6 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 13 Jun 2026 16:46:24 -0700
Subject: [PATCH 14/49] add title ad allow full column clicking

---
 src/app/admin/feedback/[slug]/page.tsx | 11 +++++++++++
 src/app/admin/feedback/page.tsx        |  8 +++++---
 src/app/feedback/page.tsx              | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/feedback/[slug]/page.tsx b/src/app/admin/feedback/[slug]/page.tsx
index fd5493f1..330ecbbe 100644
--- a/src/app/admin/feedback/[slug]/page.tsx
+++ b/src/app/admin/feedback/[slug]/page.tsx
@@ -81,6 +81,17 @@ export default function FeedbackDetailsPage() {
           </>
         )}
 
+
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            {bug.type === 'bug' ? 'Detailed Description & Steps' : 'Title'}
+          </h3>
+          <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate">
+            {bug.title}
+          </div>
+        </div>
+
+
         <div>
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
             {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
index c53f6c3a..21863b51 100644
--- a/src/app/admin/feedback/page.tsx
+++ b/src/app/admin/feedback/page.tsx
@@ -6,8 +6,10 @@ import { db } from '@/lib/firebase';
 import { collection, getDocs, query, orderBy } from 'firebase/firestore';
 import { buttonVariants } from "@/components/ui/button";
 import {ArrowLeft} from "lucide-react";
+import { useRouter } from 'next/navigation';
 
 export default function AdminFeedbackDashboard() {
+  const router = useRouter();
   const [feedbackItems, setFeedbackItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -53,14 +55,14 @@ export default function AdminFeedbackDashboard() {
             <thead className="bg-gray-50 text-gray-700 uppercase font-semibold text-xs tracking-wider">
               <tr>
                 <th className="p-4">Type</th>
-                <th className="p-4">Summary</th>
+                <th className="p-4">Title</th>
                 <th className="p-4">Submitted By</th>
                 <th className="p-4">Date</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200 text-gray-700">
               {feedbackItems.map((item) => (
-                <tr key={item.id} className="hover:bg-gray-50 transition-colors">
+                <tr key={item.id} onClick={() => router.push(`/admin/feedback/${item.id}`)} className="hover:bg-gray-50 transition-colors">
                   <td className="p-4 whitespace-nowrap">
                     <span className={`px-2 py-1 rounded text-xs font-semibold uppercase ${
                       item.type === 'bug' ? 'bg-red-100 text-red-800' : 
@@ -72,7 +74,7 @@ export default function AdminFeedbackDashboard() {
                   <td className="p-4 font-medium max-w-xs truncate">
                     <Link href={`/admin/feedback/${item.id}`} className="text-yellow-600 hover:underline">
                       {item.type === 'bug' ? `[${item.bugType}] ` : ''}
-                      {item.message}
+                      {item.title}
                     </Link>
                   </td>
                   <td className="p-4 text-gray-500">{item.email}</td>
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 386d61bb..799b81eb 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -12,6 +12,7 @@ export default function FeedbackPage() {
   
   const [message, setMessage] = useState('');
   const [email, setEmail] = useState('');
+  const [title, setTitle] = useState('');
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -25,6 +26,7 @@ export default function FeedbackPage() {
       const feedbackPayload: any = {
         type: type,
         message: message,
+        title: title,
         email: email || 'anonymous',
         createdAt: new Date(),
       };
@@ -40,6 +42,7 @@ export default function FeedbackPage() {
       setStatus('success');
       setMessage('');
       setEmail('');
+      setTitle('');
       setBugUrl('');
     } catch (err) {
       console.error('Error submitting feedback:', err);
@@ -114,6 +117,18 @@ export default function FeedbackPage() {
         )}
         {/* ------------------------------------------------------------- */}
 
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+          <input 
+            type="text"
+            required
+            placeholder="title of issue"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">Your Email (Optional)</label>
           <input 

From 8ee6755c22f45bffdf50f0a2939cdb01315eae07 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 13 Jun 2026 17:47:48 -0700
Subject: [PATCH 15/49] add resolved/unresolved feature and title

---
 src/app/admin/feedback/[slug]/page.tsx | 23 ++++---
 src/app/admin/feedback/page.tsx        | 91 ++++++++++++++++++++++++--
 2 files changed, 95 insertions(+), 19 deletions(-)

diff --git a/src/app/admin/feedback/[slug]/page.tsx b/src/app/admin/feedback/[slug]/page.tsx
index 330ecbbe..6e44b937 100644
--- a/src/app/admin/feedback/[slug]/page.tsx
+++ b/src/app/admin/feedback/[slug]/page.tsx
@@ -55,12 +55,21 @@ export default function FeedbackDetailsPage() {
         </span>
       </div>
 
+      <div>
+        <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+          {'Title'}
+        </h3>
+        <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate">
+          {bug.title}
+        </div>
+      </div>
+
       <div className="space-y-6">
         {bug.type === 'bug' && (
           <>
-            <div>
+            <div className="border-t border-gray-200 pt-6">
               <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Issue Category</h3>
-              <p className="text-gray-900 font-medium bg-gray-50 p-2 rounded border">{bug.bugType}</p>
+              <p className="text-gray-900 font-medium block bg-gray-50 p-2 rounded border ">{bug.bugType}</p>
             </div>
 
             <div>
@@ -82,16 +91,6 @@ export default function FeedbackDetailsPage() {
         )}
 
 
-        <div>
-          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
-            {bug.type === 'bug' ? 'Detailed Description & Steps' : 'Title'}
-          </h3>
-          <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate">
-            {bug.title}
-          </div>
-        </div>
-
-
         <div>
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
             {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
index 21863b51..354464c9 100644
--- a/src/app/admin/feedback/page.tsx
+++ b/src/app/admin/feedback/page.tsx
@@ -1,18 +1,47 @@
+//Archived is the same is Resolved
 'use client';
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { db } from '@/lib/firebase';
-import { collection, getDocs, query, orderBy } from 'firebase/firestore';
+import { collection, getDocs, query, orderBy, doc, updateDoc } from 'firebase/firestore';
 import { buttonVariants } from "@/components/ui/button";
-import {ArrowLeft} from "lucide-react";
+import {ArrowLeft, Loader2} from "lucide-react";
 import { useRouter } from 'next/navigation';
 
 export default function AdminFeedbackDashboard() {
   const router = useRouter();
   const [feedbackItems, setFeedbackItems] = useState<any[]>([]);
+  const [activeTab, setActiveTab] = useState<'active' | 'resolved'>('active');
   const [loading, setLoading] = useState(true);
 
+  const handleArchive = async (e: React.MouseEvent, itemId: string, item: any) => {
+    e.stopPropagation();
+    setArchivingIds(prev => [...prev, itemId]);
+    try {
+        const docRef = doc(db, 'feedback', itemId);
+        const nextStatus = !item.isArchived;
+        await updateDoc(docRef, { isArchived: nextStatus });
+
+        setFeedbackItems(prevItems =>
+        prevItems.map(item =>
+            item.id === itemId ? { ...item, isArchived: nextStatus } : item
+        )
+        );   
+    }
+    catch (error) {
+        console.error("Error archiving item:", error);
+    }
+    finally {
+        setArchivingIds(prev => prev.filter(id => id !== item.id));
+    }
+  };
+
+  const activeItems = feedbackItems.filter(item => !item.isArchived);
+  const resolvedItems = feedbackItems.filter(item => item.isArchived);
+  const displayedItems = activeTab === 'active' ? activeItems : resolvedItems;
+  const [archivingIds, setArchivingIds] = useState<string[]>([]);
+
   useEffect(() => {
     const fetchFeedback = async () => {
       try {
@@ -47,9 +76,33 @@ export default function AdminFeedbackDashboard() {
       </Link>
       <h1 className="text-3xl font-bold mb-6 mt-6 text-gray-900">Feedback/Bug Reports</h1>
       
-      {feedbackItems.length === 0 ? (
-        <p className="text-gray-500">No feedback submissions found yet.</p>
-      ) : (
+      <div className="flex border-b border-gray-200 mb-6">
+        <button
+          onClick={() => setActiveTab('active')}
+          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${
+            activeTab === 'active'
+              ? 'border-yellow-600 text-yellow-600'
+              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+          }`}
+        >
+          Active Reports ({activeItems.length})
+        </button>
+        <button
+          onClick={() => setActiveTab('resolved')}
+          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${
+            activeTab === 'resolved'
+              ? 'border-yellow-600 text-yellow-600'
+              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+          }`}
+        >
+          Resolved ({resolvedItems.length})
+        </button>
+      </div>
+      {displayedItems.length === 0 ? (
+        <p className="text-gray-500">
+            {activeTab === 'active' ? 'No active feedback submissions found.' : 'No resolved submissions found yet.'}
+        </p>
+      ): (
         <div className="overflow-x-auto border rounded-lg shadow-sm bg-white">
           <table className="min-w-full divide-y divide-gray-200 text-left text-sm">
             <thead className="bg-gray-50 text-gray-700 uppercase font-semibold text-xs tracking-wider">
@@ -58,10 +111,11 @@ export default function AdminFeedbackDashboard() {
                 <th className="p-4">Title</th>
                 <th className="p-4">Submitted By</th>
                 <th className="p-4">Date</th>
+                <th className="p-4"></th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200 text-gray-700">
-              {feedbackItems.map((item) => (
+              {displayedItems.map((item) => (
                 <tr key={item.id} onClick={() => router.push(`/admin/feedback/${item.id}`)} className="hover:bg-gray-50 transition-colors">
                   <td className="p-4 whitespace-nowrap">
                     <span className={`px-2 py-1 rounded text-xs font-semibold uppercase ${
@@ -73,8 +127,8 @@ export default function AdminFeedbackDashboard() {
                   </td>
                   <td className="p-4 font-medium max-w-xs truncate">
                     <Link href={`/admin/feedback/${item.id}`} className="text-yellow-600 hover:underline">
-                      {item.type === 'bug' ? `[${item.bugType}] ` : ''}
                       {item.title}
+                      {item.type === 'bug' ? ` (${item.bugType})` : ''}
                     </Link>
                   </td>
                   <td className="p-4 text-gray-500">{item.email}</td>
@@ -84,6 +138,29 @@ export default function AdminFeedbackDashboard() {
                       : new Date().toLocaleDateString()
                     }
                   </td>
+                  <td className="p-4" onClick={(e) => e.stopPropagation()}>
+                    <button 
+                        onClick={(e) => handleArchive(e, item.id, item)} 
+                        disabled={archivingIds.includes(item.id)}
+                        className={`inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium transition-colors ${
+                        item.isArchived 
+                            ? 'bg-green-100 hover:bg-green-200 text-green-800' 
+                            : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                        }`}
+                    >
+                        {archivingIds.includes(item.id) ? (
+                        <>
+                            <Loader2 className="h-3 w-3 animate-spin" />
+                            Updating...
+                        </>
+                        ) : item.isArchived ? (
+                        "Unresolve"
+                        ) : (
+                        "Resolve"
+                        )}
+                    </button>
+                    </td>
+
                 </tr>
               ))}
             </tbody>

From 73f28d49b0176cc21602c3e62481a258fc95c1c5 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 13 Jun 2026 17:56:44 -0700
Subject: [PATCH 16/49] change archive to resolve for clarity

---
 src/app/admin/feedback/page.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
index 354464c9..6fb0b164 100644
--- a/src/app/admin/feedback/page.tsx
+++ b/src/app/admin/feedback/page.tsx
@@ -1,4 +1,3 @@
-//Archived is the same is Resolved
 'use client';
 
 import { useEffect, useState } from 'react';
@@ -15,17 +14,17 @@ export default function AdminFeedbackDashboard() {
   const [activeTab, setActiveTab] = useState<'active' | 'resolved'>('active');
   const [loading, setLoading] = useState(true);
 
-  const handleArchive = async (e: React.MouseEvent, itemId: string, item: any) => {
+  const handleResolve = async (e: React.MouseEvent, itemId: string, item: any) => {
     e.stopPropagation();
     setArchivingIds(prev => [...prev, itemId]);
     try {
         const docRef = doc(db, 'feedback', itemId);
-        const nextStatus = !item.isArchived;
-        await updateDoc(docRef, { isArchived: nextStatus });
+        const nextStatus = !item.isResolved;
+        await updateDoc(docRef, { isResolved: nextStatus });
 
         setFeedbackItems(prevItems =>
         prevItems.map(item =>
-            item.id === itemId ? { ...item, isArchived: nextStatus } : item
+            item.id === itemId ? { ...item, isResolved: nextStatus } : item
         )
         );   
     }
@@ -37,8 +36,8 @@ export default function AdminFeedbackDashboard() {
     }
   };
 
-  const activeItems = feedbackItems.filter(item => !item.isArchived);
-  const resolvedItems = feedbackItems.filter(item => item.isArchived);
+  const activeItems = feedbackItems.filter(item => !item.isResolved);
+  const resolvedItems = feedbackItems.filter(item => item.isResolved);
   const displayedItems = activeTab === 'active' ? activeItems : resolvedItems;
   const [archivingIds, setArchivingIds] = useState<string[]>([]);
 
@@ -140,10 +139,10 @@ export default function AdminFeedbackDashboard() {
                   </td>
                   <td className="p-4" onClick={(e) => e.stopPropagation()}>
                     <button 
-                        onClick={(e) => handleArchive(e, item.id, item)} 
+                        onClick={(e) => handleResolve(e, item.id, item)} 
                         disabled={archivingIds.includes(item.id)}
                         className={`inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium transition-colors ${
-                        item.isArchived 
+                        item.isResolved 
                             ? 'bg-green-100 hover:bg-green-200 text-green-800' 
                             : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                         }`}
@@ -153,7 +152,7 @@ export default function AdminFeedbackDashboard() {
                             <Loader2 className="h-3 w-3 animate-spin" />
                             Updating...
                         </>
-                        ) : item.isArchived ? (
+                        ) : item.isResolved ? (
                         "Unresolve"
                         ) : (
                         "Resolve"

From 71ec61ed9b35b1ddca2de874cd586490bc5a3e67 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 13 Jun 2026 18:03:54 -0700
Subject: [PATCH 17/49] fix list issue.

---
 src/app/admin/feedback/[slug]/page.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/admin/feedback/[slug]/page.tsx b/src/app/admin/feedback/[slug]/page.tsx
index 6e44b937..b5263583 100644
--- a/src/app/admin/feedback/[slug]/page.tsx
+++ b/src/app/admin/feedback/[slug]/page.tsx
@@ -55,19 +55,20 @@ export default function FeedbackDetailsPage() {
         </span>
       </div>
 
-      <div>
-        <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
-          {'Title'}
-        </h3>
-        <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate">
-          {bug.title}
-        </div>
-      </div>
 
       <div className="space-y-6">
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            {'Title'}
+          </h3>
+          <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate">
+            {bug.title}
+          </div>
+        </div>
+
         {bug.type === 'bug' && (
           <>
-            <div className="border-t border-gray-200 pt-6">
+            <div>
               <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Issue Category</h3>
               <p className="text-gray-900 font-medium block bg-gray-50 p-2 rounded border ">{bug.bugType}</p>
             </div>

From 3f78065a75e1545caa020e0a8891cba189dcf0da Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Sun, 14 Jun 2026 15:00:16 -0700
Subject: [PATCH 18/49] svg

---
 src/components/article-creator/Editor.tsx     |  27 ++--
 .../article-creator/FetchArticleFunctions.tsx |   8 +-
 src/components/article-creator/Renderer.tsx   |  10 +-
 .../custom_questions/AdvancedTextbox.tsx      | 137 +++++++++++-------
 .../RenderAdvancedTextbox.tsx                 |  51 +++++--
 src/lib/utils.ts                              |  17 +++
 src/styles/globals.css                        |   7 +
 7 files changed, 183 insertions(+), 74 deletions(-)

diff --git a/src/components/article-creator/Editor.tsx b/src/components/article-creator/Editor.tsx
index e6c6bcb9..5bc34f41 100644
--- a/src/components/article-creator/Editor.tsx
+++ b/src/components/article-creator/Editor.tsx
@@ -30,7 +30,7 @@ import {
   uploadBytes,
 } from "firebase/storage";
 import { buttonVariants } from "../ui/button";
-import { cn } from "@/lib/utils";
+import { cn, resolveUploadContentType } from "@/lib/utils";
 
 interface EditorImageData {
   file: { url?: string; storageRefFullPath?: string; [key: string]: unknown };
@@ -87,7 +87,9 @@ class CustomImage extends Image {
     // constrain the call at the boundary instead of widening the rest of the file.
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
     const settings = baseImageTool.prototype.renderSettings.call(typedTool);
-    const settingsArray = (Array.isArray(settings) ? settings : [settings]) as unknown[];
+    const settingsArray = (
+      Array.isArray(settings) ? settings : [settings]
+    ) as unknown[];
 
     return [
       {
@@ -96,7 +98,9 @@ class CustomImage extends Image {
         title: "Delete image",
         onActivate: () => {
           const { file } = typedTool._data;
-          const blockIndex = typedTool.api.blocks.getBlockIndex(typedTool.block.id);
+          const blockIndex = typedTool.api.blocks.getBlockIndex(
+            typedTool.block.id,
+          );
 
           if (blockIndex === -1) {
             return;
@@ -177,7 +181,12 @@ export const EDITOR_TOOLS: EditorConfig["tools"] = {
           );
 
           try {
-            const snapshot = await uploadBytes(storageRef, file);
+            const contentType = resolveUploadContentType(file);
+            const snapshot = await uploadBytes(
+              storageRef,
+              file,
+              contentType ? { contentType } : undefined,
+            );
             const downloadURL = await getDownloadURL(snapshot.ref);
 
             return {
@@ -445,7 +454,10 @@ const Editor = ({
       />
 
       <div className="mb-4 rounded-sm border p-3">
-        <label className="mb-2 block text-sm font-medium" htmlFor="pasted-editor-json">
+        <label
+          className="mb-2 block text-sm font-medium"
+          htmlFor="pasted-editor-json"
+        >
           Paste raw Editor JSON
         </label>
         <textarea
@@ -457,10 +469,7 @@ const Editor = ({
         />
         <div className="mt-2 flex justify-end">
           <button
-            className={cn(
-              buttonVariants({ variant: "outline" }),
-              "rounded-sm",
-            )}
+            className={cn(buttonVariants({ variant: "outline" }), "rounded-sm")}
             onClick={handleImportPastedJson}
             type="button"
           >
diff --git a/src/components/article-creator/FetchArticleFunctions.tsx b/src/components/article-creator/FetchArticleFunctions.tsx
index ba51a29e..c66f1ad2 100644
--- a/src/components/article-creator/FetchArticleFunctions.tsx
+++ b/src/components/article-creator/FetchArticleFunctions.tsx
@@ -6,6 +6,7 @@ import type { QuestionFormat } from "@/types/questions";
 import { type OutputData } from "@editorjs/editorjs";
 import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { getFileFromIndexedDB } from "./custom_questions/RenderAdvancedTextbox";
+import { resolveUploadContentType } from "@/lib/utils";
 
 export interface ImageData {
   caption: string;
@@ -67,7 +68,12 @@ export const processQuestions = async (
   await Promise.all(
     Array.from(fileKeyToFile.entries()).map(async ([fileKey, file]) => {
       const storageRef = ref(storage, fileKey);
-      const snapshot = await uploadBytes(storageRef, file);
+      const contentType = resolveUploadContentType(file);
+      const snapshot = await uploadBytes(
+        storageRef,
+        file,
+        contentType ? { contentType } : undefined,
+      );
       const downloadURL = await getDownloadURL(snapshot.ref);
       fileKeyToDownloadURL.set(fileKey, downloadURL);
     }),
diff --git a/src/components/article-creator/Renderer.tsx b/src/components/article-creator/Renderer.tsx
index 880c26b3..2ee8d3f0 100644
--- a/src/components/article-creator/Renderer.tsx
+++ b/src/components/article-creator/Renderer.tsx
@@ -210,9 +210,17 @@ const customParsers: Record<
   },
 
   image: (data, _config) => {
+    // SVGs (viewBox only) collapse or render at the 300x150 replaced-element
+    // default unless given a definite width, so tag them for the .img-svg rule.
+    const storageRefPath = data.file?.storageRefFullPath;
+    const storagePath =
+      typeof storageRefPath === "string" ? storageRefPath : "";
+    const isSvg =
+      storagePath.toLowerCase().endsWith(".svg") ||
+      (typeof data.url === "string" && data.url.toLowerCase().includes(".svg"));
     const imageConditions = `${data.stretched ? "img-fullwidth" : ""} ${
       data.withBorder ? "img-border" : ""
-    } ${data.withBackground ? "img-bg" : ""} ${data.centerImage ? "img-center" : ""}`;
+    } ${data.withBackground ? "img-bg" : ""} ${data.centerImage ? "img-center" : ""} ${isSvg ? "img-svg" : ""}`;
     const imgClass = _config.image.imgClass ?? "";
     let imageSrc;
 
diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index bd73408f..a6784cdc 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -5,14 +5,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import React, { useRef, useState, useEffect } from "react";
 import { Textarea } from "@/components/ui/textarea";
-import type {
-  QuestionFile,
-  QuestionFormat,
-} from "@/types/questions";
+import type { QuestionFile, QuestionFormat } from "@/types/questions";
 import { Paperclip, Trash, ChevronLeft, ChevronRight } from "lucide-react";
-import { deleteObject, getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import {
+  deleteObject,
+  getStorage,
+  ref,
+  uploadBytes,
+  getDownloadURL,
+} from "firebase/storage";
 import { getUser } from "@/components/hooks/users";
 import { getFileFromIndexedDB } from "./RenderAdvancedTextbox";
+import { isSvgFileName, resolveUploadContentType } from "@/lib/utils";
 
 interface Props {
   questions: QuestionFormat[];
@@ -139,15 +143,17 @@ const ThumbnailPreview: React.FC<{ file: QuestionFile }> = ({ file }) => {
       <img
         src={src}
         alt="Thumbnail preview"
-        className="h-20 w-20 rounded object-cover border border-gray-200"
+        className="h-20 w-20 rounded border border-gray-200 object-cover"
       />
     );
   }
 
   return (
-    <div className="flex h-20 w-20 flex-col items-center justify-center rounded bg-blue-50 border border-blue-200 text-blue-500">
+    <div className="flex h-20 w-20 flex-col items-center justify-center rounded border border-blue-200 bg-blue-50 text-blue-500">
       <Paperclip size={20} />
-      <span className="mt-1 text-[9px] truncate max-w-[70px] px-1">{file.name}</span>
+      <span className="mt-1 max-w-[70px] truncate px-1 text-[9px]">
+        {file.name}
+      </span>
     </div>
   );
 };
@@ -165,30 +171,33 @@ export default function AdvancedTextbox({
   const [currentText, setCurrentText] = useState<string>("");
   const [uploadedFiles, setUploadedFiles] = useState<QuestionFile[]>([]);
   const [uploadStatuses, setUploadStatuses] = useState<
-    Record<string, { status: "uploading" | "success" | "error"; error?: string }>
+    Record<
+      string,
+      { status: "uploading" | "success" | "error"; error?: string }
+    >
   >({});
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Sync state when loaded
-    useEffect(() => {
+  useEffect(() => {
     const nextText =
       origin === "option" && oIndex !== undefined
-        ? questionInstance!.options[oIndex]?.value?.value ?? ""
+        ? (questionInstance!.options[oIndex]?.value?.value ?? "")
         : origin === "question" ||
             origin === "explanation" ||
             origin === "content"
-          ? questionInstance![origin]?.value ?? ""
+          ? (questionInstance![origin]?.value ?? "")
           : "";
 
     const nextFiles =
       origin === "option" && oIndex !== undefined
-        ? questionInstance!.options[oIndex]?.value?.files ?? []
+        ? (questionInstance!.options[oIndex]?.value?.files ?? [])
         : origin === "question" ||
             origin === "explanation" ||
             origin === "content"
-          ? questionInstance![origin]?.files ?? []
+          ? (questionInstance![origin]?.files ?? [])
           : [];
 
     if (currentText !== nextText) {
@@ -225,18 +234,21 @@ export default function AdvancedTextbox({
 
       const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
       const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
-      
+
       const match = currentLine.match(/^\s*/);
       const leadingWhitespace = match ? match[0] : "";
 
       if (leadingWhitespace) {
         e.preventDefault();
-        const newText = textBeforeCursor + "\n" + leadingWhitespace + textAfterCursor;
+        const newText =
+          textBeforeCursor + "\n" + leadingWhitespace + textAfterCursor;
         updateQuestionText(newText);
 
         setTimeout(() => {
           if (textareaRef.current) {
-            textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursorPosition + 1 + leadingWhitespace.length;
+            textareaRef.current.selectionStart =
+              textareaRef.current.selectionEnd =
+                cursorPosition + 1 + leadingWhitespace.length;
           }
         }, 0);
       }
@@ -254,18 +266,20 @@ export default function AdvancedTextbox({
 
         if (currentLine.length > 0 && /^\s+$/.test(currentLine)) {
           e.preventDefault();
-          
+
           const spacesToDelete = currentLine.length % 2 !== 0 ? 1 : 2;
 
-          const newText = 
-            currentText.substring(0, cursorPosition - spacesToDelete) + 
+          const newText =
+            currentText.substring(0, cursorPosition - spacesToDelete) +
             currentText.substring(cursorPosition);
-            
+
           updateQuestionText(newText);
 
           setTimeout(() => {
             if (textareaRef.current) {
-              textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursorPosition - spacesToDelete;
+              textareaRef.current.selectionStart =
+                textareaRef.current.selectionEnd =
+                  cursorPosition - spacesToDelete;
             }
           }, 0);
         }
@@ -283,14 +297,14 @@ export default function AdvancedTextbox({
       const end = textarea.selectionEnd;
       const indent = "  ";
       const newText =
-      currentText.substring(0, start) + indent + currentText.substring(end);
-      
+        currentText.substring(0, start) + indent + currentText.substring(end);
+
       updateQuestionText(newText);
 
       setTimeout(() => {
         if (textareaRef.current) {
-          textareaRef.current.selectionStart = textareaRef.current.selectionEnd =
-            start + indent.length;
+          textareaRef.current.selectionStart =
+            textareaRef.current.selectionEnd = start + indent.length;
         }
       }, 0);
     }
@@ -301,7 +315,11 @@ export default function AdvancedTextbox({
     const updatedQuestions = [...questions];
     const updatedQuestion = { ...questionInstance! };
 
-    if (origin === "question" || origin === "explanation" || origin === "content") {
+    if (
+      origin === "question" ||
+      origin === "explanation" ||
+      origin === "content"
+    ) {
       updatedQuestion[origin] = {
         ...updatedQuestion[origin],
         files: newFiles,
@@ -381,7 +399,12 @@ export default function AdvancedTextbox({
     try {
       const storage = getStorage();
       const storageRef = ref(storage, fileKey);
-      const snapshot = await uploadBytes(storageRef, file);
+      const contentType = resolveUploadContentType(file);
+      const snapshot = await uploadBytes(
+        storageRef,
+        file,
+        contentType ? { contentType } : undefined,
+      );
       const downloadURL = await getDownloadURL(snapshot.ref);
 
       setUploadStatuses((prev) => ({
@@ -403,18 +426,19 @@ export default function AdvancedTextbox({
         ...prev,
         [fileKey]: {
           status: "error",
-        error: err instanceof Error ? err.message : "Upload failed",
-      },
+          error: err instanceof Error ? err.message : "Upload failed",
+        },
       }));
     }
   };
 
-
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];
     let files = Array.from(fileList).filter(
       (file) =>
-        file.type.startsWith("image/") || file.type.startsWith("audio/"),
+        file.type.startsWith("image/") ||
+        file.type.startsWith("audio/") ||
+        isSvgFileName(file.name),
     );
 
     const validFiles = files.filter((file) => file.size <= 5 * 1024 * 1024);
@@ -434,10 +458,15 @@ export default function AdvancedTextbox({
     const filesToUpload: { key: string; file: File }[] = [];
 
     files.forEach((file) => {
-      // Create a unique key that works cleanly in storage
-      const sanitizedType = file.type.replace(/\//g, "-");
+      // Resolve the MIME type (some SVGs report an empty file.type) and build a
+      // storage-safe key. Stripping non-alphanumerics also removes the "+" in
+      // image/svg+xml, while keeping the leading "image-" prefix the renderer
+      // uses to treat the file as an image.
+      const mimeType =
+        file.type || (isSvgFileName(file.name) ? "image/svg+xml" : "");
+      const sanitizedType = mimeType.replace(/[^a-z0-9]+/gi, "-");
       const fileKey = `${sanitizedType}-${Date.now()}-${file.name}`;
-      
+
       storeFileInIndexedDB(fileKey, file);
 
       newFiles.push({
@@ -506,7 +535,9 @@ export default function AdvancedTextbox({
       if (stored?.file) {
         void uploadSingleFile(fileKey, stored.file);
       } else {
-        alert(`Could not find local file data for "${fileName}". Please remove and re-upload.`);
+        alert(
+          `Could not find local file data for "${fileName}". Please remove and re-upload.`,
+        );
       }
     } catch (err) {
       console.error("Retry load from IndexedDB failed:", err);
@@ -516,7 +547,7 @@ export default function AdvancedTextbox({
 
   const updateFileAlt = (fileKey: string, newAlt: string) => {
     const updated = uploadedFiles.map((f) =>
-      f.key === fileKey ? { ...f, alt: newAlt } : f
+      f.key === fileKey ? { ...f, alt: newAlt } : f,
     );
     setUploadedFiles(updated);
     updateQuestionsWithFiles(updated);
@@ -545,13 +576,18 @@ export default function AdvancedTextbox({
     const end = textarea.selectionEnd;
 
     const newText =
-      currentText.substring(0, start) + placeholderText + currentText.substring(end);
-    
+      currentText.substring(0, start) +
+      placeholderText +
+      currentText.substring(end);
+
     updateQuestionText(newText);
 
     setTimeout(() => {
       textarea.focus();
-      textarea.setSelectionRange(start + placeholderText.length, start + placeholderText.length);
+      textarea.setSelectionRange(
+        start + placeholderText.length,
+        start + placeholderText.length,
+      );
     }, 0);
   };
 
@@ -600,7 +636,10 @@ export default function AdvancedTextbox({
                   </div>
 
                   <div className="min-w-0 flex-1">
-                    <div className="truncate text-xs font-semibold text-gray-800" title={file.name}>
+                    <div
+                      className="truncate text-xs font-semibold text-gray-800"
+                      title={file.name}
+                    >
                       {file.name}
                     </div>
 
@@ -620,7 +659,7 @@ export default function AdvancedTextbox({
                     )}
 
                     {statusInfo.status === "success" && (
-                      <span className="mt-1 inline-flex items-center rounded bg-green-50 px-1.5 py-0.5 text-[9px] font-medium text-green-700 border border-green-200">
+                      <span className="mt-1 inline-flex items-center rounded border border-green-200 bg-green-50 px-1.5 py-0.5 text-[9px] font-medium text-green-700">
                         Uploaded
                       </span>
                     )}
@@ -629,7 +668,7 @@ export default function AdvancedTextbox({
                   <button
                     type="button"
                     onClick={() => handleDeleteFile(file.key)}
-                    className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500 transition-colors"
+                    className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-red-500"
                     title="Remove file"
                   >
                     <Trash size={14} />
@@ -640,7 +679,7 @@ export default function AdvancedTextbox({
                   <div className="flex items-center gap-1.5">
                     <label
                       htmlFor={`alt-${file.key}`}
-                      className="text-[9px] font-bold text-gray-500 uppercase tracking-wider shrink-0"
+                      className="shrink-0 text-[9px] font-bold uppercase tracking-wider text-gray-500"
                     >
                       Alt:
                     </label>
@@ -650,7 +689,7 @@ export default function AdvancedTextbox({
                       placeholder="Alt text (e.g. Graph of sales)"
                       value={file.alt ?? ""}
                       onChange={(e) => updateFileAlt(file.key, e.target.value)}
-                      className="flex h-7 w-full rounded border border-gray-200 bg-background px-2 py-1 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300 placeholder:text-gray-400"
+                      className="flex h-7 w-full rounded border border-gray-200 bg-background px-2 py-1 text-xs placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300"
                     />
                   </div>
 
@@ -660,7 +699,7 @@ export default function AdvancedTextbox({
                         type="button"
                         disabled={index === 0}
                         onClick={() => moveFile(index, "left")}
-                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 transition-colors hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50"
                         title="Move left/up"
                       >
                         <ChevronLeft size={12} />
@@ -669,7 +708,7 @@ export default function AdvancedTextbox({
                         type="button"
                         disabled={index === uploadedFiles.length - 1}
                         onClick={() => moveFile(index, "right")}
-                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50 transition-colors"
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 transition-colors hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50"
                         title="Move right/down"
                       >
                         <ChevronRight size={12} />
@@ -679,7 +718,7 @@ export default function AdvancedTextbox({
                     <button
                       type="button"
                       onClick={() => insertPlaceholder(file, index)}
-                      className="rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 hover:bg-blue-100 transition-colors"
+                      className="rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 transition-colors hover:bg-blue-100"
                       title="Insert inline placeholder tag"
                     >
                       Insert Inline
@@ -695,7 +734,7 @@ export default function AdvancedTextbox({
       <div className="mt-2 flex justify-end">
         <button
           type="button"
-          className="flex items-center gap-1 rounded-md border border-blue-500 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 hover:bg-blue-100 hover:text-blue-700 transition-all shadow-sm"
+          className="flex items-center gap-1 rounded-md border border-blue-500 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 shadow-sm transition-all hover:bg-blue-100 hover:text-blue-700"
           onClick={handleUploadClick}
         >
           <Paperclip size={14} /> Add file
diff --git a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
index 5b7ef019..473debc3 100644
--- a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
@@ -4,7 +4,7 @@ import type { QuestionFile, QuestionInput } from "@/types/questions";
 import "../../../styles/katexStyling.css";
 import { decodeEntities, katexMacros } from "../Renderer";
 
-import { cn } from "@/lib/utils";
+import { cn, isSvgFileName } from "@/lib/utils";
 
 interface Props {
   content: QuestionInput;
@@ -107,13 +107,22 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   if (!objectUrl) return null;
 
   if (isImageFileKey(file.key)) {
+    // SVGs frequently omit intrinsic dimensions (viewBox only), which makes them
+    // collapse or overflow under width/height auto. Give them a definite,
+    // responsive width instead.
+    const isSvg = isSvgFileName(file.name) || file.key.startsWith("image-svg");
     return (
-      <div className="my-2 w-full flex justify-center">
+      <div className="my-2 flex w-full justify-center">
         <img
           src={objectUrl}
           alt={file.alt ?? "Uploaded image"}
           loading="lazy"
-          className="h-auto max-h-[450px] w-auto max-w-full rounded-md object-contain shadow-sm transition-shadow duration-200 hover:shadow-md"
+          className={cn(
+            "rounded-md object-contain shadow-sm transition-shadow duration-200 hover:shadow-md",
+            isSvg
+              ? "h-auto w-full max-w-[450px]"
+              : "h-auto max-h-[450px] w-auto max-w-full",
+          )}
         />
       </div>
     );
@@ -158,7 +167,7 @@ export function RenderContent({ content, origin }: Props) {
     const byName = sortedFiles.find(
       (f) =>
         f.name.toLowerCase() === trimmed.toLowerCase() ||
-        f.name.split(".")[0]?.toLowerCase() === trimmed.toLowerCase()
+        f.name.split(".")[0]?.toLowerCase() === trimmed.toLowerCase(),
     );
     if (byName) return byName;
     return null;
@@ -172,8 +181,11 @@ export function RenderContent({ content, origin }: Props) {
         return (
           <pre
             key={`code-${tokenIndex}`}
-            className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
-            style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
+            className="my-2 max-w-full overflow-x-auto whitespace-pre-wrap rounded p-2 font-mono text-sm leading-relaxed text-black"
+            style={{
+              fontFamily: "'Consolas', monospace",
+              backgroundColor: "#f0f0f0",
+            }}
           >
             <code>{codeContent}</code>
           </pre>
@@ -196,7 +208,10 @@ export function RenderContent({ content, origin }: Props) {
         if (matchedFile) {
           renderedInlineKeys.add(matchedFile.key);
           return (
-            <div key={`inline-img-${tokenIndex}`} className="my-4 block text-center">
+            <div
+              key={`inline-img-${tokenIndex}`}
+              className="my-4 block text-center"
+            >
               <FileRenderer file={matchedFile} />
               {matchedFile.alt && (
                 <span className="mt-1 block text-center text-xs italic text-gray-500">
@@ -211,9 +226,15 @@ export function RenderContent({ content, origin }: Props) {
     });
 
   // Filter out files that were already rendered inline
-  const remainingFiles = sortedFiles.filter((file) => !renderedInlineKeys.has(file.key));
-  const remainingImages = remainingFiles.filter((file) => isImageFileKey(file.key));
-  const remainingAudio = remainingFiles.filter((file) => isAudioFileKey(file.key));
+  const remainingFiles = sortedFiles.filter(
+    (file) => !renderedInlineKeys.has(file.key),
+  );
+  const remainingImages = remainingFiles.filter((file) =>
+    isImageFileKey(file.key),
+  );
+  const remainingAudio = remainingFiles.filter((file) =>
+    isAudioFileKey(file.key),
+  );
 
   return (
     <div className="custom-katex my-2 whitespace-pre-wrap">
@@ -229,15 +250,17 @@ export function RenderContent({ content, origin }: Props) {
       {remainingImages.length > 0 && (
         <div className="mt-4">
           {origin === "question" && remainingImages.length >= 2 ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+            <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
               {remainingImages.map((file, idx) => {
-                const isThirdOfThree = remainingImages.length === 3 && idx === 2;
+                const isThirdOfThree =
+                  remainingImages.length === 3 && idx === 2;
                 return (
                   <div
                     key={file.key}
                     className={cn(
-                      "flex flex-col items-center justify-center p-2 rounded-lg border border-gray-200 bg-gray-50/40 shadow-sm",
-                      isThirdOfThree && "sm:col-span-2 sm:max-w-2xl sm:mx-auto w-full"
+                      "flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50/40 p-2 shadow-sm",
+                      isThirdOfThree &&
+                        "w-full sm:col-span-2 sm:mx-auto sm:max-w-2xl",
                     )}
                   >
                     <FileRenderer file={file} />
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 2c9da7b4..67c99b57 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -11,3 +11,20 @@ export function formatSlug(slug: string) {
     .replace(/[^a-z1-9 ]+/g, "")
     .replace(/\s/g, "-");
 }
+
+/**
+ * True when a file (by MIME type or name) is an SVG. Some browsers report an
+ * empty `type` for SVGs, so the filename extension is checked as a fallback.
+ */
+export function isSvgFileName(name?: string | null): boolean {
+  return name?.toLowerCase().endsWith(".svg") ?? false;
+}
+
+/**
+ * Content type to attach when uploading to Firebase Storage. Returns the file's
+ * own MIME type, falling back to image/svg+xml for SVGs that report an empty
+ * type so they are served (and rendered) as images rather than octet-streams.
+ */
+export function resolveUploadContentType(file: File): string | undefined {
+  return file.type || (isSvgFileName(file.name) ? "image/svg+xml" : undefined);
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ea9edee1..60a70caf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -89,3 +89,10 @@
 .img.img-center {
   @apply mx-auto;
 }
+
+/* SVGs often ship without intrinsic width/height (viewBox only) and would
+   otherwise render at the 300x150 replaced-element default; give them a
+   definite, responsive width. */
+.img.img-svg {
+  @apply h-auto w-full max-w-[480px];
+}

From f7f0085ce7d34eff4679e8033721ba7ed5d10b18 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 13:00:40 -0700
Subject: [PATCH 19/49] feedvacj

---
 .../feedback/[slug]/FeedbackDetailsClient.tsx | 322 ++++++++++++++++++
 src/app/admin/feedback/[slug]/page.tsx        | 131 +------
 src/app/feedback/page.tsx                     |  72 +++-
 3 files changed, 402 insertions(+), 123 deletions(-)
 create mode 100644 src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx

diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
new file mode 100644
index 00000000..dacc09d4
--- /dev/null
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -0,0 +1,322 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { db } from '@/lib/firebase';
+import { doc, getDoc, updateDoc } from 'firebase/firestore';
+
+interface FeedbackDetailsClientProps {
+  slug: string;
+  config: {
+    gitHubAccessToken: string;
+    gitHubRepoOwner: string;
+    gitHubRepoName: string;
+  };
+}
+
+function parseMarkdown(text: string): string {
+  if (!text) return '';
+  
+  // 1. Escape HTML to prevent XSS
+  let escaped = text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+
+  // 2. Inline styling (Bold, Italics, Code, Links)
+  escaped = escaped.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+  escaped = escaped.replace(/__(.*?)__/g, '<strong>$1</strong>');
+  escaped = escaped.replace(/\*(.*?)\*/g, '<em>$1</em>');
+  escaped = escaped.replace(/_(.*?)_/g, '<em>$1</em>');
+  escaped = escaped.replace(/`(.*?)`/g, '<code class="bg-gray-100 text-red-600 px-1.5 py-0.5 rounded font-mono text-xs border">$1</code>');
+  escaped = escaped.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" class="text-yellow-600 hover:underline" target="_blank" rel="noopener noreferrer">$1</a>');
+
+  // 3. Block elements (headers, lists, paragraphs)
+  const lines = escaped.split(/\r?\n/);
+  const result: string[] = [];
+  let inList = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line === undefined) continue;
+    const trimmed = line.trim();
+
+    // Check for headers
+    const h3Match = line.match(/^### (.*)$/);
+    const h2Match = line.match(/^## (.*)$/);
+    const h1Match = line.match(/^# (.*)$/);
+
+    if (h3Match) {
+      if (inList) { result.push('</ul>'); inList = false; }
+      result.push(`<h5 class="text-sm font-bold mt-2 mb-1 text-gray-900">${h3Match[1]}</h5>`);
+    } else if (h2Match) {
+      if (inList) { result.push('</ul>'); inList = false; }
+      result.push(`<h4 class="text-base font-bold mt-3 mb-1 text-gray-900">${h2Match[1]}</h4>`);
+    } else if (h1Match) {
+      if (inList) { result.push('</ul>'); inList = false; }
+      result.push(`<h3 class="text-lg font-bold mt-4 mb-2 text-gray-900">${h1Match[1]}</h3>`);
+    } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
+      const content = trimmed.substring(2);
+      if (!inList) {
+        result.push('<ul class="list-disc pl-5 my-2 space-y-1 text-gray-800">');
+        inList = true;
+      }
+      result.push(`<li>${content}</li>`);
+    } else {
+      if (inList) {
+        result.push('</ul>');
+        inList = false;
+      }
+      // Empty line or regular line
+      if (trimmed === '') {
+        result.push('<br />');
+      } else {
+        result.push(`<div>${line}</div>`);
+      }
+    }
+  }
+
+  if (inList) {
+    result.push('</ul>');
+  }
+
+  return result.join('');
+}
+
+interface FeedbackItem {
+  type: string;
+  title: string;
+  bugType?: string;
+  bugUrl?: string;
+  message: string;
+  email: string;
+  attachedImage?: string;
+  isResolved?: boolean;
+  createdAt?: {
+    seconds: number;
+    nanoseconds: number;
+  };
+}
+
+export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsClientProps) {
+  const router = useRouter();
+  const [bug, setBug] = useState<FeedbackItem | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isCreatingIssue, setIsCreatingIssue] = useState(false);
+
+  useEffect(() => {
+    if (!slug) return;
+
+    const fetchSingleFeedback = async () => {
+      try {
+        const docRef = doc(db, 'feedback', slug);
+        const docSnap = await getDoc(docRef);
+        
+        if (docSnap.exists()) {
+          setBug(docSnap.data() as FeedbackItem);
+        } else {
+          console.error("No such document found!");
+        }
+      } catch (err) {
+        console.error("Error pulling document context:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSingleFeedback();
+  }, [slug]);
+
+  const handleCreateGitHubIssue = async () => {
+    if (!bug) return;
+    if (!config.gitHubAccessToken || !config.gitHubRepoOwner || !config.gitHubRepoName) {
+      alert("GitHub integration is not fully configured. Please check your server environment variables.");
+      return;
+    }
+
+    setIsCreatingIssue(true);
+
+    try {
+      const owner = config.gitHubRepoOwner;
+      const repo = config.gitHubRepoName;
+      const url = `https://api.github.com/repos/${owner}/${repo}/issues`;
+
+      const imgSrc = bug.attachedImage 
+        ? (bug.attachedImage.startsWith('data:') ? bug.attachedImage : `data:image/png;base64,${bug.attachedImage}`)
+        : '';
+
+      const imageSection = imgSrc 
+        ? `\n\n### Attached Screenshot\n\n<img src="${imgSrc}" alt="Attached Screenshot" />`
+        : '';
+
+      const issueBody = `
+### Bug Report Context
+
+- **Category:** ${bug.bugType ?? 'N/A'}
+- **Context URL:** ${bug.bugUrl && bug.bugUrl !== 'N/A' ? bug.bugUrl : 'N/A'}
+- **Contact Email:** ${bug.email ?? 'anonymous'}
+
+### Detailed Description & Steps to Reproduce
+
+${bug.message}
+${imageSection}
+`;
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${config.gitHubAccessToken}`,
+          'Accept': 'application/vnd.github.v3+json',
+        },
+        body: JSON.stringify({
+          title: bug.title || `Bug Report: ${bug.bugType ?? 'General'}`,
+          body: issueBody.trim(),
+          labels: ['bug'],
+        }),
+      });
+
+      if (!response.ok) {
+        interface GitHubError {
+          message?: string;
+        }
+        const errorData = await response.json().catch(() => ({})) as GitHubError;
+        throw new Error(errorData.message ?? `GitHub API responded with status ${response.status}`);
+      }
+
+      // Update Firestore document resolution status to resolved
+      const docRef = doc(db, 'feedback', slug);
+      await updateDoc(docRef, { isResolved: true });
+
+      alert("GitHub Issue created successfully!");
+      router.push('/admin/feedback');
+      router.refresh();
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error("Failed to create GitHub issue:", err);
+      alert(`Error creating GitHub issue: ${errorMsg}`);
+    } finally {
+      setIsCreatingIssue(false);
+    }
+  };
+
+  if (loading) return <div className="p-8 text-center text-gray-500">Loading item snapshot...</div>;
+  if (!bug) return <div className="p-8 text-center text-red-500">Feedback ticket not found.</div>;
+
+  return (
+    <div className="max-w-2xl mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+      <button 
+        onClick={() => router.back()}
+        className="text-sm text-gray-500 hover:text-gray-800 mb-4 inline-flex items-center gap-1"
+      >
+        ← Back to Dashboard
+      </button>
+
+      <div className="flex items-center justify-between border-b pb-4 mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Feedback Record</h1>
+        <div className="flex items-center gap-2">
+          {bug.isResolved ? (
+            <span className="px-3 py-1 rounded-full text-xs font-semibold uppercase bg-green-100 text-green-800">
+              Resolved
+            </span>
+          ) : (
+            <span className="px-3 py-1 rounded-full text-xs font-semibold uppercase bg-yellow-100 text-yellow-800">
+              Active
+            </span>
+          )}
+          <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${
+            bug.type === 'bug' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
+          }`}>
+            {bug.type}
+          </span>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            Title
+          </h3>
+          <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate font-medium">
+            {bug.title}
+          </div>
+        </div>
+
+        {bug.type === 'bug' && (
+          <>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Issue Category</h3>
+              <p className="text-gray-900 font-medium block bg-gray-50 p-2 rounded border">{bug.bugType}</p>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
+              {bug.bugUrl && bug.bugUrl !== 'N/A' ? (
+                <a 
+                  href={bug.bugUrl} 
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className="text-yellow-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
+                >
+                  {bug.bugUrl} 
+                </a>
+              ) : (
+                <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
+              )}
+            </div>
+          </>
+        )}
+
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
+          </h3>
+          {/* Content Report Container with native Markdown parser applied */}
+          <div 
+            id="content-report-container"
+            className="bg-gray-50 border rounded p-4 text-gray-800 min-h-[100px] leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: parseMarkdown(bug.message) }}
+          />
+        </div>
+
+        {bug.attachedImage && (
+          <div>
+            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Attached Image</h3>
+            <div className="bg-gray-50 border rounded p-4 flex justify-center">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img 
+                src={bug.attachedImage} 
+                alt="Attached Screenshot" 
+                className="max-h-96 object-contain rounded border shadow-sm"
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="border-t pt-4 text-xs text-gray-500 space-y-1">
+          <p><strong>Contact Email:</strong> {bug.email}</p>
+          <p>
+            <strong>Timestamp:</strong> {bug.createdAt?.seconds 
+              ? new Date(bug.createdAt.seconds * 1000).toLocaleString() 
+              : 'N/A'
+            }
+          </p>
+        </div>
+
+        {bug.type === 'bug' && !bug.isResolved && (
+          <div className="pt-4 flex justify-end">
+            <button
+              onClick={handleCreateGitHubIssue}
+              disabled={isCreatingIssue}
+              className="px-4 py-2 bg-yellow-600 text-white rounded-md font-semibold text-sm hover:bg-yellow-700 transition duration-200 disabled:bg-gray-400 inline-flex items-center gap-2 shadow-sm"
+            >
+              {isCreatingIssue ? 'Creating GitHub Issue...' : 'Create GitHub Issue'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/feedback/[slug]/page.tsx b/src/app/admin/feedback/[slug]/page.tsx
index b5263583..d0bd8311 100644
--- a/src/app/admin/feedback/[slug]/page.tsx
+++ b/src/app/admin/feedback/[slug]/page.tsx
@@ -1,116 +1,17 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { db } from '@/lib/firebase';
-import { doc, getDoc } from 'firebase/firestore';
-
-export default function FeedbackDetailsPage() {
-  const {slug} = useParams() as { slug: string };
-  const router = useRouter();
-  const [bug, setBug] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (!slug) return;
-
-    const fetchSingleFeedback = async () => {
-      try {
-        const docRef = doc(db, 'feedback', slug as string);
-        const docSnap = await getDoc(docRef);
-        
-        if (docSnap.exists()) {
-          setBug(docSnap.data());
-        } else {
-          console.error("No such document found!");
-        }
-      } catch (err) {
-        console.error("Error pulling document context:", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchSingleFeedback();
-  }, [slug]);
-
-  if (loading) return <div className="p-8 text-center text-gray-500">Loading item snapshot...</div>;
-  if (!bug) return <div className="p-8 text-center text-red-500">Feedback ticket not found.</div>;
-
-  return (
-    <div className="max-w-2xl mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
-      <button 
-        onClick={() => router.back()}
-        className="text-sm text-gray-500 hover:text-gray-800 mb-4 inline-flex items-center gap-1"
-      >
-        ← Back to Dashboard
-      </button>
-
-      <div className="flex items-center justify-between border-b pb-4 mb-6">
-        <h1 className="text-2xl font-bold text-gray-900">Feedback Record</h1>
-        <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${
-          bug.type === 'bug' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
-        }`}>
-          {bug.type}
-        </span>
-      </div>
-
-
-      <div className="space-y-6">
-        <div>
-          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
-            {'Title'}
-          </h3>
-          <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate">
-            {bug.title}
-          </div>
-        </div>
-
-        {bug.type === 'bug' && (
-          <>
-            <div>
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Issue Category</h3>
-              <p className="text-gray-900 font-medium block bg-gray-50 p-2 rounded border ">{bug.bugType}</p>
-            </div>
-
-            <div>
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
-              {bug.bugUrl && bug.bugUrl !== 'N/A' ? (
-                <a 
-                  href={bug.bugUrl} 
-                  target="_blank" 
-                  rel="noopener noreferrer" 
-                  className="text-blue-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
-                >
-                  {bug.bugUrl} 
-                </a>
-              ) : (
-                <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
-              )}
-            </div>
-          </>
-        )}
-
-
-        <div>
-          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
-            {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
-          </h3>
-          <div className="bg-gray-50 border rounded p-4 text-gray-800 whitespace-pre-wrap min-h-[100px]">
-            {bug.message}
-          </div>
-        </div>
-
-        <div className="border-t pt-4 text-xs text-gray-500 space-y-1">
-          <p><strong>Contact Email:</strong> {bug.email}</p>
-          <p>
-            <strong>Timestamp:</strong> {bug.createdAt?.seconds 
-              ? new Date(bug.createdAt.seconds * 1000).toLocaleString() 
-              : 'N/A'
-            }
-          </p>
-        </div>
-      </div>
-    </div>
-  );
+import FeedbackDetailsClient from './FeedbackDetailsClient';
+
+interface PageProps {
+  params: {
+    slug: string;
+  };
+}
+
+export default function FeedbackDetailsPage({ params }: PageProps) {
+  const config = {
+    gitHubAccessToken: process.env.GITHUB_ACCESS_TOKEN ?? '',
+    gitHubRepoOwner: process.env.GITHUB_REPO_OWNER ?? '',
+    gitHubRepoName: process.env.GITHUB_REPO_NAME ?? '',
+  };
+
+  return <FeedbackDetailsClient slug={params.slug} config={config} />;
 }
\ No newline at end of file
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 799b81eb..abef89dd 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -1,49 +1,92 @@
 'use client'
 
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { db } from '@/lib/firebase'; 
-import { collection, addDoc } from 'firebase/firestore';
+import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
 
 export default function FeedbackPage() {
   const [type, setType] = useState('general');
   // New bug-specific states matching your images
   const [bugType, setBugType] = useState('Website Article Errors');
   const [bugUrl, setBugUrl] = useState('');
+  const [attachedImage, setAttachedImage] = useState('');
   
   const [message, setMessage] = useState('');
   const [email, setEmail] = useState('');
   const [title, setTitle] = useState('');
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
 
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setAttachedImage(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setAttachedImage('');
+    }
+  };
+
+  const router = useRouter();
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!message.trim()) return;
 
     setStatus('loading');
-
     try {
+      interface NewFeedback {
+        type: string;
+        message: string;
+        title: string;
+        email: string;
+        // Firestore server timestamp field
+        createdAt: any;
+        bugType?: string;
+        bugUrl?: string;
+        attachedImage?: string;
+      }
+
       // Build the base payload
-      const feedbackPayload: any = {
-        type: type,
-        message: message,
-        title: title,
+      const feedbackPayload: NewFeedback = {
+        type,
+        message,
+        title,
         email: email || 'anonymous',
-        createdAt: new Date(),
+        createdAt: serverTimestamp(),
       };
 
       // Conditionally append the precise details if it's a bug report
       if (type === 'bug') {
         feedbackPayload.bugType = bugType;
         feedbackPayload.bugUrl = bugUrl || 'N/A';
+        if (attachedImage) {
+          feedbackPayload.attachedImage = attachedImage;
+        }
       }
 
-      await addDoc(collection(db, 'feedback'), feedbackPayload);
+      // Use Firestore server timestamp for consistency
+
+      // Debug log the payload before submission
+      console.log('Submitting feedback payload:', feedbackPayload);
+      const docRef = await addDoc(collection(db, 'feedback'), feedbackPayload);
+      console.log('Feedback document created with ID:', docRef.id);
 
       setStatus('success');
       setMessage('');
       setEmail('');
       setTitle('');
       setBugUrl('');
+      setAttachedImage('');
+      // Navigate to admin detail view for the new feedback
+      router.push(`/admin/feedback/${docRef.id}`);
+
+      const fileInput = document.getElementById('screenshot-input') as HTMLInputElement;
+      if (fileInput) {
+        fileInput.value = '';
+      }
     } catch (err) {
       console.error('Error submitting feedback:', err);
       setStatus('error');
@@ -113,6 +156,19 @@ export default function FeedbackPage() {
                 className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
               />
             </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Attach Screenshot (Optional)
+              </label>
+              <input 
+                id="screenshot-input"
+                type="file" 
+                accept="image/*"
+                onChange={handleImageChange}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900 text-sm file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100"
+              />
+            </div>
           </>
         )}
         {/* ------------------------------------------------------------- */}

From ef1cd41611fdb58323a4989d325f902d306ed313 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 13:10:15 -0700
Subject: [PATCH 20/49] fix images on github submit

---
 .../feedback/[slug]/FeedbackDetailsClient.tsx | 118 ++++++++----
 src/app/feedback/page.tsx                     | 180 +++++++++++++-----
 2 files changed, 219 insertions(+), 79 deletions(-)

diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
index dacc09d4..5c386d1c 100644
--- a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { db } from '@/lib/firebase';
-import { doc, getDoc, updateDoc } from 'firebase/firestore';
+import { doc, getDoc, updateDoc, setDoc } from 'firebase/firestore';
 
 interface FeedbackDetailsClientProps {
   slug: string;
@@ -98,6 +98,10 @@ interface FeedbackItem {
     seconds: number;
     nanoseconds: number;
   };
+  // Feature request specific fields
+  featureProblem?: string;
+  featureAlternatives?: string;
+  featureSolution?: string;
 }
 
 export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsClientProps) {
@@ -105,6 +109,7 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
   const [bug, setBug] = useState<FeedbackItem | null>(null);
   const [loading, setLoading] = useState(true);
   const [isCreatingIssue, setIsCreatingIssue] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   useEffect(() => {
     if (!slug) return;
@@ -143,27 +148,32 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
       const repo = config.gitHubRepoName;
       const url = `https://api.github.com/repos/${owner}/${repo}/issues`;
 
-      const imgSrc = bug.attachedImage 
-        ? (bug.attachedImage.startsWith('data:') ? bug.attachedImage : `data:image/png;base64,${bug.attachedImage}`)
-        : '';
+      const imgMarkdown = bug.attachedImage && bug.attachedImage.startsWith('http') ? `\n\n[Attached Image](${bug.attachedImage})` : '';
 
-      const imageSection = imgSrc 
-        ? `\n\n### Attached Screenshot\n\n<img src="${imgSrc}" alt="Attached Screenshot" />`
-        : '';
-
-      const issueBody = `
-### Bug Report Context
-
-- **Category:** ${bug.bugType ?? 'N/A'}
-- **Context URL:** ${bug.bugUrl && bug.bugUrl !== 'N/A' ? bug.bugUrl : 'N/A'}
-- **Contact Email:** ${bug.email ?? 'anonymous'}
-
-### Detailed Description & Steps to Reproduce
-
-${bug.message}
-${imageSection}
-`;
+      let issueBody = `### Feedback Context\n\n- **Type:** ${bug.type}\n- **Contact Email:** ${bug.email ?? 'anonymous'}\n`;
+      if (bug.bugUrl && bug.bugUrl !== 'N/A') {
+        issueBody += `- **Context URL:** ${bug.bugUrl}\n`;
+      }
+      if (bug.type === 'bug') {
+        issueBody += `- **Category:** ${bug.bugType ?? 'N/A'}\n`;
+        issueBody += `\n### Detailed Description & Steps to Reproduce\n\n${bug.message}\n${imgMarkdown}`;
+      } else if (bug.type === 'feature') {
+        issueBody += `\n### Feature Request Details\n`;
+        if (bug.featureProblem) issueBody += `- **Problem:** ${bug.featureProblem}\n`;
+        if (bug.featureAlternatives) issueBody += `- **Alternatives Considered:** ${bug.featureAlternatives}\n`;
+        if (bug.featureSolution) issueBody += `- **Proposed Solution:** ${bug.featureSolution}\n`;
+        issueBody += `\n### Additional Description\n\n${bug.message}\n${imgMarkdown}`;
+      } else {
+        issueBody += `\n### Description\n\n${bug.message}${imgMarkdown}`;
+      }
 
+      const title = bug.title && bug.title.trim().length > 0 ? bug.title : `${bug.type === 'bug' ? 'Bug' : 'Feature'}: ${bug.bugType || ''}`;
+      const payload = {
+        title,
+        body: issueBody.trim(),
+        labels: [bug.type === 'bug' ? 'bug' : 'enhancement'],
+      };
+      console.log('Creating GitHub issue with payload:', payload);
       const response = await fetch(url, {
         method: 'POST',
         headers: {
@@ -171,28 +181,21 @@ ${imageSection}
           'Authorization': `Bearer ${config.gitHubAccessToken}`,
           'Accept': 'application/vnd.github.v3+json',
         },
-        body: JSON.stringify({
-          title: bug.title || `Bug Report: ${bug.bugType ?? 'General'}`,
-          body: issueBody.trim(),
-          labels: ['bug'],
-        }),
+        body: JSON.stringify(payload),
       });
-
       if (!response.ok) {
-        interface GitHubError {
-          message?: string;
-        }
-        const errorData = await response.json().catch(() => ({})) as GitHubError;
-        throw new Error(errorData.message ?? `GitHub API responded with status ${response.status}`);
+        const errorData = await response.json().catch(() => ({})) as any;
+        const detailed = errorData.errors?.map((e: any) => `${e.resource || ''} ${e.field || ''} ${e.code || ''}`).join(', ');
+        const msg = errorData.message ?? `GitHub API responded with status ${response.status}`;
+        throw new Error(detailed ? `${msg}: ${detailed}` : msg);
       }
 
       // Update Firestore document resolution status to resolved
       const docRef = doc(db, 'feedback', slug);
-      await updateDoc(docRef, { isResolved: true });
+      await setDoc(docRef, { isResolved: true }, { merge: true });
 
       alert("GitHub Issue created successfully!");
-      router.push('/admin/feedback');
-      router.refresh();
+      setSubmitted(true);
     } catch (err: unknown) {
       const errorMsg = err instanceof Error ? err.message : String(err);
       console.error("Failed to create GitHub issue:", err);
@@ -204,6 +207,20 @@ ${imageSection}
 
   if (loading) return <div className="p-8 text-center text-gray-500">Loading item snapshot...</div>;
   if (!bug) return <div className="p-8 text-center text-red-500">Feedback ticket not found.</div>;
+  if (submitted) {
+    return (
+      <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Feedback Submitted</h2>
+        <p className="text-gray-700 mb-4">Your feedback has been turned into a GitHub issue and marked as resolved.</p>
+        <button
+          onClick={() => router.push('/admin/feedback')}
+          className="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition"
+        >
+          Back to Feedback List
+        </button>
+      </div>
+    );
+  }
 
   return (
     <div className="max-w-2xl mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
@@ -268,6 +285,37 @@ ${imageSection}
             </div>
           </>
         )}
+        {bug.type === 'feature' && (
+          <>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
+              {bug.featureContextUrl ? (
+                <a
+                  href={bug.featureContextUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-yellow-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
+                >
+                  {bug.featureContextUrl}
+                </a>
+              ) : (
+                <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
+              )}
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Problem Description</h3>
+              <p className="bg-gray-50 p-2 rounded border text-gray-800">{bug.featureProblem || 'N/A'}</p>
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Alternatives Considered</h3>
+              <p className="bg-gray-50 p-2 rounded border text-gray-800">{bug.featureAlternatives || 'N/A'}</p>
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Proposed Solution</h3>
+              <p className="bg-gray-50 p-2 rounded border text-gray-800">{bug.featureSolution || 'N/A'}</p>
+            </div>
+          </>
+        )}
 
         <div>
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
@@ -305,7 +353,7 @@ ${imageSection}
           </p>
         </div>
 
-        {bug.type === 'bug' && !bug.isResolved && (
+        { (bug.type === 'bug' || bug.type === 'feature') && !bug.isResolved && (
           <div className="pt-4 flex justify-end">
             <button
               onClick={handleCreateGitHubIssue}
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index abef89dd..4176c3e2 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -2,16 +2,21 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { db } from '@/lib/firebase'; 
-import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
+import { db, storage } from '@/lib/firebase';
+import { ref, uploadString, getDownloadURL } from 'firebase/storage';
+import { collection, addDoc, serverTimestamp, updateDoc } from 'firebase/firestore';
 
 export default function FeedbackPage() {
+  const [featureProblem, setFeatureProblem] = useState('');
+  const [featureAlternatives, setFeatureAlternatives] = useState('');
+  const [featureSolution, setFeatureSolution] = useState('');
+  const [submitted, setSubmitted] = useState(false);
   const [type, setType] = useState('general');
   // New bug-specific states matching your images
   const [bugType, setBugType] = useState('Website Article Errors');
   const [bugUrl, setBugUrl] = useState('');
   const [attachedImage, setAttachedImage] = useState('');
-  
+    const [featureContextUrl, setFeatureContextUrl] = useState('');
   const [message, setMessage] = useState('');
   const [email, setEmail] = useState('');
   const [title, setTitle] = useState('');
@@ -58,41 +63,74 @@ export default function FeedbackPage() {
         createdAt: serverTimestamp(),
       };
 
-      // Conditionally append the precise details if it's a bug report
-      if (type === 'bug') {
-        feedbackPayload.bugType = bugType;
-        feedbackPayload.bugUrl = bugUrl || 'N/A';
-        if (attachedImage) {
-          feedbackPayload.attachedImage = attachedImage;
+        // Conditionally append the precise details if it's a bug report
+        if (type === 'bug') {
+          feedbackPayload.bugType = bugType;
+          feedbackPayload.bugUrl = bugUrl || 'N/A';
+          if (attachedImage) {
+            feedbackPayload.attachedImage = attachedImage;
+          }
+        }
+        // Add feature request specific fields
+        if (type === 'feature') {
+          feedbackPayload.featureProblem = featureProblem;
+          feedbackPayload.featureAlternatives = featureAlternatives;
+          feedbackPayload.featureSolution = featureSolution;
+          feedbackPayload.featureContextUrl = featureContextUrl;
         }
-      }
 
-      // Use Firestore server timestamp for consistency
+      // If an image was attached, upload it to Firebase Storage first
+      let imageURL = '';
+      if (attachedImage && type !== 'general') {
+        const imageRef = ref(storage, `feedbackImages/${Date.now()}`);
+        await uploadString(imageRef, attachedImage, 'data_url');
+        imageURL = await getDownloadURL(imageRef);
+        // Include the image URL in the payload
+        feedbackPayload.attachedImage = imageURL;
+      }
 
-      // Debug log the payload before submission
-      console.log('Submitting feedback payload:', feedbackPayload);
+      // Add feedback document with image URL (if any) included
       const docRef = await addDoc(collection(db, 'feedback'), feedbackPayload);
+      // Mark as submitted so UI shows success view
+      setSubmitted(true);
+      setStatus('success');
       console.log('Feedback document created with ID:', docRef.id);
 
-      setStatus('success');
+      // Clear form fields
       setMessage('');
       setEmail('');
       setTitle('');
       setBugUrl('');
-      setAttachedImage('');
-      // Navigate to admin detail view for the new feedback
-      router.push(`/admin/feedback/${docRef.id}`);
-
+      setFeatureProblem('');
+      setFeatureAlternatives('');
+      setFeatureSolution('');
+      // Reset file input if present
       const fileInput = document.getElementById('screenshot-input') as HTMLInputElement;
-      if (fileInput) {
-        fileInput.value = '';
-      }
+      if (fileInput) fileInput.value = '';
     } catch (err) {
       console.error('Error submitting feedback:', err);
       setStatus('error');
     }
   };
 
+  if (submitted) {
+    return (
+      <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Feedback Submitted</h2>
+        <p className="text-gray-700 mb-4">Thank you! Your feedback has been recorded.</p>
+        <button
+          onClick={() => {
+            setSubmitted(false);
+            setStatus('idle');
+          }}
+          className="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition"
+        >
+          Submit Another Feedback
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
       <h1 className="text-2xl font-bold mb-4 text-gray-800">Submit Feedback</h1>
@@ -109,18 +147,29 @@ export default function FeedbackPage() {
       )}
 
       <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Feedback Type</label>
-          <select 
-            value={type} 
-            onChange={(e) => setType(e.target.value)}
-            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
-          >
-            <option value="general">General Feedback</option>
-            <option value="bug">Bug Report</option>
-            <option value="questions">Asking Questions</option>
-          </select>
-        </div>
+<div className="mb-4">
+  <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+  <input
+    type="text"
+    required
+    placeholder="title of issue"
+    value={title}
+    onChange={(e) => setTitle(e.target.value)}
+    className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+  />
+</div>
+<div>
+  <label className="block text-sm font-medium text-gray-700 mb-1">Feedback Type</label>
+  <select 
+    value={type} 
+    onChange={(e) => setType(e.target.value)}
+    className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+  >
+    <option value="general">General Feedback</option>
+    <option value="bug">Bug Report</option>
+    <option value="feature">Feature Request</option>
+  </select>
+</div>
 
         {/* --- DYNAMIC BUG FIELDS (Shown only when 'bug' is chosen) --- */}
         {type === 'bug' && (
@@ -173,17 +222,60 @@ export default function FeedbackPage() {
         )}
         {/* ------------------------------------------------------------- */}
 
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
-          <input 
-            type="text"
-            required
-            placeholder="title of issue"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
-          />
-        </div>
+        {/* Feature Request Fields (shown when type === 'feature') */}
+        {type === 'feature' && (
+          <>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Context URL</label>
+              <input
+                type="text"
+                placeholder="https://example.com/..."
+                value={featureContextUrl}
+                onChange={e => setFeatureContextUrl(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Is your feature request related to a problem? Please describe.</label>
+              <textarea
+                rows={3}
+                value={featureProblem}
+                onChange={e => setFeatureProblem(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Describe alternatives you've considered</label>
+              <textarea
+                rows={3}
+                value={featureAlternatives}
+                onChange={e => setFeatureAlternatives(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Describe the solution you'd like (rich text)</label>
+              <textarea
+                rows={4}
+                value={featureSolution}
+                onChange={e => setFeatureSolution(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Attach Screenshot (Optional)</label>
+              <input
+                id="screenshot-input"
+                type="file"
+                accept="image/*"
+                onChange={handleImageChange}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900 text-sm file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100"
+              />
+            </div>
+          </>
+        )}
+
+        {/* ------------------------------------------------------------- */}
 
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">Your Email (Optional)</label>

From bdc05c9a508a2974fda69a3996b6100feb00af1b Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 13:13:24 -0700
Subject: [PATCH 21/49] firestore rules to allow feedback

---
 firestore.rules | 72 ++++++++++++++++++++++++-------------------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 65f8bca7..7f53ef65 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -2,18 +2,15 @@ rules_version = '2';
 
 service cloud.firestore {
   match /databases/{database}/documents {
-    
-    // Centralized function to check if the user is authenticated
+    // Centralized functions
     function isAuthenticated() {
       return request.auth != null;
     }
-    
-    // Centralized function to check if the user is an admin
+
     function isAdmin() {
       return isAuthenticated() && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.access == "admin";
     }
 
-    // Centralized function to check if the user is a member or admin (role hierarchy)
     function isMemberOrAdmin() {
       let accessLevel = get(/databases/$(database)/documents/users/$(request.auth.uid)).data.access;
       return isAuthenticated() && (accessLevel == "admin" || accessLevel == "member");
@@ -24,18 +21,25 @@ service cloud.firestore {
       return isAuthenticated() && (accessLevel == "admin" || accessLevel == "member" || accessLevel == "grader");
     }
 
-    // Allow read/write access to users for their own user data
+    function canSubmitFrqResponse() {
+      let userDoc = get(/databases/$(database)/documents/users/$(request.auth.uid));
+      let userData = userDoc.data;
+      let userDocAfter = getAfter(/databases/$(database)/documents/users/$(request.auth.uid));
+      let userDataAfter = userDocAfter.data;
+      return userData.access != "banned" && (isAdmin() || (!("lastFrqResponseAt" in userData) && "lastFrqResponseAt" in userDataAfter) || (userData.lastFrqResponseAt < (request.time - duration.value(6, 'h')) && userDataAfter.lastFrqResponseAt == request.resource.data.submittedAt));
+    }
+
+    // Users collection
     match /users/{userId} {
       allow read: if isAuthenticated() && request.auth.uid == userId;
-
       allow create: if isAuthenticated() && request.auth.uid == userId && request.resource.data.access == "user";
       allow update: if isAuthenticated() && request.auth.uid == userId && (!request.resource.data.diff(resource.data).affectedKeys().hasAny(['access', 'uid']));
       allow delete: if isAuthenticated() && request.auth.uid == userId;
 
+      // Nested collections under users
       match /frqResponses/{document=**} {
         allow read: if isAuthenticated() && request.auth.uid == userId;
-
-        allow create: if isAuthenticated() && request.auth.uid == userId && (request.resource.data.keys().hasAll(['responseText', 'question', 'userId', 'submittedAt'])) && (request.resource.data.keys().hasOnly(['responseText', 'question', 'userId', 'submittedAt'])) && canSubmitFrqResponse();
+        allow create: if isAuthenticated() && request.auth.uid == userId && (request.resource.data.keys().hasAll(['responseText', 'question', 'userId', 'submittedAt'])) && request.resource.data.keys().hasOnly(['responseText', 'question', 'userId', 'submittedAt']) && canSubmitFrqResponse();
         allow update: if isGraderOrMemberOrAdmin() && (request.resource.data.diff(resource.data).affectedKeys().hasOnly(['feedback', 'grade', 'gradedAt', 'gradedBy', 'status']));
       }
 
@@ -44,34 +48,19 @@ service cloud.firestore {
       }
     }
 
-    function canSubmitFrqResponse() {
-      let userDoc = get(/databases/$(database)/documents/users/$(request.auth.uid));
-      let userData = userDoc.data;
-
-      let userDocAfter = getAfter(/databases/$(database)/documents/users/$(request.auth.uid));
-      let userDataAfter = userDocAfter.data;
-
-      return userData.access != "banned" && (isAdmin() || (!("lastFrqResponseAt" in userData) && 
-        "lastFrqResponseAt" in userDataAfter
-      ) || (
-        userData.lastFrqResponseAt < (request.time - duration.value(6, 'h'))
-        &&
-        userDataAfter.lastFrqResponseAt == request.resource.data.submittedAt)
-      )
-    }
-
+    // Global FRQ responses
     match /{somePath=**}/frqResponses/{frqResponse} {
       allow read: if isGraderOrMemberOrAdmin();
     }
-    
+
     // Admins can read/write all user documents
     match /users/{document=**} {
       allow read, write: if isAdmin();
     }
-		
-    // Subjects and pages can be accessed by members and admins
+
+    // Subjects collection
     match /subjects/{subject} {
-    	allow read: if true;
+      allow read: if true;
       allow write: if isMemberOrAdmin();
 
       match /units/{unit} {
@@ -89,22 +78,31 @@ service cloud.firestore {
         }
       }
     }
-    
+
+    // Pages collection
     match /pages/{document=**} {
-    	allow read: if true;
+      allow read: if true;
       allow write: if isMemberOrAdmin();
     }
 
-    // Allow users to access and write to their own profiles
+    // Profiles collection
     match /profiles/{userId} {
       allow read, write: if isAuthenticated() && request.auth.uid == userId;
     }
 
+    // Feedback collection
     match /feedback/{feedbackId} {
-      allow create: if request.resource.data.type in ['general', 'bug', 'questions']
-                    && request.resource.data.message is string
-                    && request.resource.data.message.trim() != '';
-      allow read, update, delete: if isAdmin();
+      // Allow anyone (including public visitors) to view or read feedback tracking items
+      allow read: if true;
+      
+      // Enforces clean data shapes when regular users are submitting new logs
+      allow create: if request.resource.data.type in ['general', 'bug', 'feature', 'questions'] 
+                    && request.resource.data.message is string 
+                    && request.resource.data.message.trim() != ''
+                    && request.resource.data.isResolved == false;
+      
+      // Closes the temporary security gap. Only authorized admins can update status details or remove entries.
+      allow update, delete: if isAdmin();
     }
   }
-}
+}
\ No newline at end of file

From 2f70d9b303aeba8a97f6b0eee30c8aa9207acc5f Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 13:15:20 -0700
Subject: [PATCH 22/49] fix issue

---
 src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
index 5c386d1c..95aeb6e0 100644
--- a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -102,6 +102,7 @@ interface FeedbackItem {
   featureProblem?: string;
   featureAlternatives?: string;
   featureSolution?: string;
+  featureContextUrl?: string;
 }
 
 export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsClientProps) {

From 3a09d4d904848d156002825d67e6913f9714a8c5 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 13:42:05 -0700
Subject: [PATCH 23/49] undo bad rules change

---
 firestore.rules | 72 +++++++++++++++++++++++++------------------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 7f53ef65..65f8bca7 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -2,15 +2,18 @@ rules_version = '2';
 
 service cloud.firestore {
   match /databases/{database}/documents {
-    // Centralized functions
+    
+    // Centralized function to check if the user is authenticated
     function isAuthenticated() {
       return request.auth != null;
     }
-
+    
+    // Centralized function to check if the user is an admin
     function isAdmin() {
       return isAuthenticated() && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.access == "admin";
     }
 
+    // Centralized function to check if the user is a member or admin (role hierarchy)
     function isMemberOrAdmin() {
       let accessLevel = get(/databases/$(database)/documents/users/$(request.auth.uid)).data.access;
       return isAuthenticated() && (accessLevel == "admin" || accessLevel == "member");
@@ -21,25 +24,18 @@ service cloud.firestore {
       return isAuthenticated() && (accessLevel == "admin" || accessLevel == "member" || accessLevel == "grader");
     }
 
-    function canSubmitFrqResponse() {
-      let userDoc = get(/databases/$(database)/documents/users/$(request.auth.uid));
-      let userData = userDoc.data;
-      let userDocAfter = getAfter(/databases/$(database)/documents/users/$(request.auth.uid));
-      let userDataAfter = userDocAfter.data;
-      return userData.access != "banned" && (isAdmin() || (!("lastFrqResponseAt" in userData) && "lastFrqResponseAt" in userDataAfter) || (userData.lastFrqResponseAt < (request.time - duration.value(6, 'h')) && userDataAfter.lastFrqResponseAt == request.resource.data.submittedAt));
-    }
-
-    // Users collection
+    // Allow read/write access to users for their own user data
     match /users/{userId} {
       allow read: if isAuthenticated() && request.auth.uid == userId;
+
       allow create: if isAuthenticated() && request.auth.uid == userId && request.resource.data.access == "user";
       allow update: if isAuthenticated() && request.auth.uid == userId && (!request.resource.data.diff(resource.data).affectedKeys().hasAny(['access', 'uid']));
       allow delete: if isAuthenticated() && request.auth.uid == userId;
 
-      // Nested collections under users
       match /frqResponses/{document=**} {
         allow read: if isAuthenticated() && request.auth.uid == userId;
-        allow create: if isAuthenticated() && request.auth.uid == userId && (request.resource.data.keys().hasAll(['responseText', 'question', 'userId', 'submittedAt'])) && request.resource.data.keys().hasOnly(['responseText', 'question', 'userId', 'submittedAt']) && canSubmitFrqResponse();
+
+        allow create: if isAuthenticated() && request.auth.uid == userId && (request.resource.data.keys().hasAll(['responseText', 'question', 'userId', 'submittedAt'])) && (request.resource.data.keys().hasOnly(['responseText', 'question', 'userId', 'submittedAt'])) && canSubmitFrqResponse();
         allow update: if isGraderOrMemberOrAdmin() && (request.resource.data.diff(resource.data).affectedKeys().hasOnly(['feedback', 'grade', 'gradedAt', 'gradedBy', 'status']));
       }
 
@@ -48,19 +44,34 @@ service cloud.firestore {
       }
     }
 
-    // Global FRQ responses
+    function canSubmitFrqResponse() {
+      let userDoc = get(/databases/$(database)/documents/users/$(request.auth.uid));
+      let userData = userDoc.data;
+
+      let userDocAfter = getAfter(/databases/$(database)/documents/users/$(request.auth.uid));
+      let userDataAfter = userDocAfter.data;
+
+      return userData.access != "banned" && (isAdmin() || (!("lastFrqResponseAt" in userData) && 
+        "lastFrqResponseAt" in userDataAfter
+      ) || (
+        userData.lastFrqResponseAt < (request.time - duration.value(6, 'h'))
+        &&
+        userDataAfter.lastFrqResponseAt == request.resource.data.submittedAt)
+      )
+    }
+
     match /{somePath=**}/frqResponses/{frqResponse} {
       allow read: if isGraderOrMemberOrAdmin();
     }
-
+    
     // Admins can read/write all user documents
     match /users/{document=**} {
       allow read, write: if isAdmin();
     }
-
-    // Subjects collection
+		
+    // Subjects and pages can be accessed by members and admins
     match /subjects/{subject} {
-      allow read: if true;
+    	allow read: if true;
       allow write: if isMemberOrAdmin();
 
       match /units/{unit} {
@@ -78,31 +89,22 @@ service cloud.firestore {
         }
       }
     }
-
-    // Pages collection
+    
     match /pages/{document=**} {
-      allow read: if true;
+    	allow read: if true;
       allow write: if isMemberOrAdmin();
     }
 
-    // Profiles collection
+    // Allow users to access and write to their own profiles
     match /profiles/{userId} {
       allow read, write: if isAuthenticated() && request.auth.uid == userId;
     }
 
-    // Feedback collection
     match /feedback/{feedbackId} {
-      // Allow anyone (including public visitors) to view or read feedback tracking items
-      allow read: if true;
-      
-      // Enforces clean data shapes when regular users are submitting new logs
-      allow create: if request.resource.data.type in ['general', 'bug', 'feature', 'questions'] 
-                    && request.resource.data.message is string 
-                    && request.resource.data.message.trim() != ''
-                    && request.resource.data.isResolved == false;
-      
-      // Closes the temporary security gap. Only authorized admins can update status details or remove entries.
-      allow update, delete: if isAdmin();
+      allow create: if request.resource.data.type in ['general', 'bug', 'questions']
+                    && request.resource.data.message is string
+                    && request.resource.data.message.trim() != '';
+      allow read, update, delete: if isAdmin();
     }
   }
-}
\ No newline at end of file
+}

From 089a57040b10ff52a15d99027759509c0fcb9064 Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Wed, 17 Jun 2026 13:44:34 -0700
Subject: [PATCH 24/49] technical foundation for ai seo

---
 public/llms.txt                   |  15 ++++
 src/app/layout.tsx                |  49 ++++++++++++-
 src/app/robots.ts                 |  40 +++++++++++
 src/app/sitemap.ts                |  52 ++++++++++++++
 src/app/subject/[slug]/layout.tsx |  38 ++++++++++
 src/lib/sitemap-data.ts           | 114 ++++++++++++++++++++++++++++++
 6 files changed, 305 insertions(+), 3 deletions(-)
 create mode 100644 public/llms.txt
 create mode 100644 src/app/robots.ts
 create mode 100644 src/app/sitemap.ts
 create mode 100644 src/app/subject/[slug]/layout.tsx
 create mode 100644 src/lib/sitemap-data.ts

diff --git a/public/llms.txt b/public/llms.txt
new file mode 100644
index 00000000..c74626e8
--- /dev/null
+++ b/public/llms.txt
@@ -0,0 +1,15 @@
+# FiveHive
+
+> Free AP (Advanced Placement) study resources — study guides, unit notes, and practice questions — written by AP students who scored 5s, for AP students. By AP students. For AP students.
+
+FiveHive helps high school students prepare for College Board AP exams. Content is organized by subject, then by unit, then by chapter, covering courses such as AP Biology, AP Chemistry, AP Calculus, AP US History, and more.
+
+## Key pages
+- [Subject library](https://www.fivehive.org/library): Browse all AP subjects covered on FiveHive.
+- [Study guides](https://www.fivehive.org/guides): Exam study guides and review materials.
+- [Apply to contribute](https://www.fivehive.org/apply): Join the FiveHive team of student contributors.
+
+## Notes
+- Subject study guides live at /subject/{subject-slug} and chapters at /subject/{subject-slug}/{unit}/chapter/{id}/{title}.
+- Content is free and written/reviewed by AP students.
+- See https://www.fivehive.org/sitemap.xml for the full list of indexable pages.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 870f1063..c7379987 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import "@/styles/globals.css";
+import { type Metadata } from "next";
 import { Figtree } from "next/font/google";
 import RootLayoutClient from "./RootLayoutClient";
 import { Toaster } from "@/components/ui/sonner";
@@ -8,9 +9,51 @@ const figtree = Figtree({
   variable: "--font-figtree",
 });
 
-export const metadata = {
-  title: "FiveHive",
-  description: "By AP students. For AP students.",
+export const metadata: Metadata = {
+  metadataBase: new URL("https://www.fivehive.org"),
+  title: {
+    default: "FiveHive — Free AP Study Guides, Notes & Practice",
+    template: "%s | FiveHive",
+  },
+  description:
+    "Free AP study guides, unit notes, and practice questions written by AP students who scored 5s. Covering AP Biology, Chemistry, Calculus, US History, and more.",
+  keywords: [
+    "AP study guides",
+    "AP notes",
+    "AP exam prep",
+    "AP practice questions",
+    "free AP resources",
+    "AP review",
+  ],
+  applicationName: "FiveHive",
+  alternates: { canonical: "/" },
+  openGraph: {
+    type: "website",
+    siteName: "FiveHive",
+    title: "FiveHive — Free AP Study Guides, Notes & Practice",
+    description:
+      "Free AP study guides, unit notes, and practice questions written by AP students. By AP students. For AP students.",
+    url: "https://www.fivehive.org",
+    images: [{ url: "/logo.png", width: 1200, height: 630, alt: "FiveHive" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "FiveHive — Free AP Study Guides, Notes & Practice",
+    description:
+      "Free AP study guides, notes, and practice written by AP students.",
+    images: ["/logo.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
+  },
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
diff --git a/src/app/robots.ts b/src/app/robots.ts
new file mode 100644
index 00000000..815b41f7
--- /dev/null
+++ b/src/app/robots.ts
@@ -0,0 +1,40 @@
+import { type MetadataRoute } from "next";
+
+const baseUrl = "https://www.fivehive.org";
+
+// Authenticated / non-content areas that should not be crawled or cited.
+const disallow = [
+  "/admin",
+  "/account",
+  "/peer-grading",
+  "/login",
+  "/signup",
+  "/auth",
+  "/api",
+];
+
+// AI assistant crawlers we explicitly welcome so FiveHive can be cited in
+// AI-generated answers. They inherit the same disallow list as everyone else.
+const aiBots = [
+  "GPTBot", // OpenAI / ChatGPT
+  "ChatGPT-User",
+  "OAI-SearchBot",
+  "PerplexityBot", // Perplexity
+  "ClaudeBot", // Anthropic / Claude
+  "anthropic-ai",
+  "Claude-Web",
+  "Google-Extended", // Gemini & Google AI Overviews
+  "Bingbot", // Microsoft Copilot (via Bing)
+  "Applebot-Extended",
+];
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      { userAgent: "*", allow: "/", disallow },
+      ...aiBots.map((userAgent) => ({ userAgent, allow: "/", disallow })),
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl,
+  };
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 00000000..0a7f68a3
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,52 @@
+import { type MetadataRoute } from "next";
+import { getAllSubjects } from "@/lib/sitemap-data";
+import { formatSlug } from "@/lib/utils";
+
+const baseUrl = "https://www.fivehive.org";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const now = new Date();
+
+  const staticRoutes: MetadataRoute.Sitemap = [
+    { path: "", priority: 1 },
+    { path: "/library", priority: 0.8 },
+    { path: "/guides", priority: 0.8 },
+    { path: "/apply", priority: 0.6 },
+    { path: "/privacy", priority: 0.3 },
+  ].map(({ path, priority }) => ({
+    url: `${baseUrl}${path}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority,
+  }));
+
+  const subjects = await getAllSubjects();
+  const subjectRoutes: MetadataRoute.Sitemap = [];
+
+  for (const subject of subjects) {
+    subjectRoutes.push({
+      url: `${baseUrl}/subject/${subject.slug}`,
+      lastModified: now,
+      changeFrequency: "weekly",
+      priority: 0.9,
+    });
+
+    subject.units.forEach((unit, unitIndex) => {
+      const unitSegment = `unit-${unitIndex + 1}-${unit.id}`;
+      for (const chapter of unit.chapters ?? []) {
+        // Only list publicly readable chapters — gated content can't be
+        // crawled or cited anyway, and listing it invites thin-page penalties.
+        if (chapter.isPublic) {
+          subjectRoutes.push({
+            url: `${baseUrl}/subject/${subject.slug}/${unitSegment}/chapter/${chapter.id}/${formatSlug(chapter.title)}`,
+            lastModified: now,
+            changeFrequency: "monthly",
+            priority: 0.8,
+          });
+        }
+      }
+    });
+  }
+
+  return [...staticRoutes, ...subjectRoutes];
+}
diff --git a/src/app/subject/[slug]/layout.tsx b/src/app/subject/[slug]/layout.tsx
new file mode 100644
index 00000000..88fee478
--- /dev/null
+++ b/src/app/subject/[slug]/layout.tsx
@@ -0,0 +1,38 @@
+import { type Metadata } from "next";
+import { getSubjectTitle } from "@/lib/sitemap-data";
+
+// Server layout for every page under /subject/[slug]. Its only job is to attach
+// real per-subject metadata (title, description, canonical, OpenGraph) so
+// crawlers and AI assistants can disambiguate subjects instead of seeing the
+// generic global title. The nested (sidebar)/(no-sidebar) client layouts and
+// pages render unchanged inside it.
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  const name = (await getSubjectTitle(params.slug)) ?? "AP Subject";
+  const title = `${name} Study Guide & Notes`;
+  const description = `Free ${name} study guides, unit-by-unit notes, and practice questions written by students who aced the exam. Review every unit of ${name} on FiveHive.`;
+  const url = `/subject/${params.slug}`;
+
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: {
+      type: "article",
+      title: `${title} | FiveHive`,
+      description,
+      url,
+    },
+  };
+}
+
+export default function SubjectLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
diff --git a/src/lib/sitemap-data.ts b/src/lib/sitemap-data.ts
new file mode 100644
index 00000000..58fdfba5
--- /dev/null
+++ b/src/lib/sitemap-data.ts
@@ -0,0 +1,114 @@
+import { env } from "@/env.js";
+
+/**
+ * Server-side helpers for reading public subject data via the Firestore REST
+ * API. The app otherwise talks to Firestore through the client SDK, but route
+ * handlers like `sitemap.ts` and server `generateMetadata` run before hydration
+ * and need a dependency-free way to read the publicly readable `subjects`
+ * collection (`allow read: if true` in firestore.rules).
+ */
+
+const PROJECT_ID = env.NEXT_PUBLIC_FIREBASE_PROJECT_ID;
+const API_KEY = env.NEXT_PUBLIC_FIREBASE_API_KEY;
+const BASE = `https://firestore.googleapis.com/v1/projects/${PROJECT_ID}/databases/(default)/documents`;
+
+// Cache for a day; subject structure changes rarely.
+const REVALIDATE_SECONDS = 86_400;
+
+interface RestValue {
+  stringValue?: string;
+  booleanValue?: boolean;
+  integerValue?: string;
+  doubleValue?: number;
+  nullValue?: null;
+  timestampValue?: string;
+  arrayValue?: { values?: RestValue[] };
+  mapValue?: { fields?: Record<string, RestValue> };
+}
+
+interface RestDocument {
+  name: string;
+  fields?: Record<string, RestValue>;
+}
+
+function parseValue(value: RestValue): unknown {
+  if (value.stringValue !== undefined) return value.stringValue;
+  if (value.booleanValue !== undefined) return value.booleanValue;
+  if (value.integerValue !== undefined) return Number(value.integerValue);
+  if (value.doubleValue !== undefined) return value.doubleValue;
+  if (value.timestampValue !== undefined) return value.timestampValue;
+  if (value.arrayValue) return (value.arrayValue.values ?? []).map(parseValue);
+  if (value.mapValue) return parseFields(value.mapValue.fields ?? {});
+  return null;
+}
+
+function parseFields(
+  fields: Record<string, RestValue>,
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(fields)) {
+    out[key] = parseValue(value);
+  }
+  return out;
+}
+
+export interface SitemapChapter {
+  id: string;
+  title: string;
+  isPublic?: boolean;
+}
+
+export interface SitemapUnit {
+  id: string;
+  title: string;
+  chapters: SitemapChapter[];
+}
+
+export interface SitemapSubject {
+  slug: string;
+  title: string;
+  units: SitemapUnit[];
+}
+
+/**
+ * Returns every subject with its embedded units and chapters. Falls back to an
+ * empty array on any failure so callers (e.g. the sitemap) still render their
+ * static entries instead of crashing the build.
+ */
+export async function getAllSubjects(): Promise<SitemapSubject[]> {
+  try {
+    const res = await fetch(`${BASE}/subjects?pageSize=300&key=${API_KEY}`, {
+      next: { revalidate: REVALIDATE_SECONDS },
+    });
+    if (!res.ok) return [];
+    const data = (await res.json()) as { documents?: RestDocument[] };
+    return (data.documents ?? []).map((doc) => {
+      const slug = doc.name.split("/").pop() ?? "";
+      const fields = parseFields(doc.fields ?? {});
+      return {
+        slug,
+        title: typeof fields.title === "string" ? fields.title : slug,
+        units: (Array.isArray(fields.units)
+          ? fields.units
+          : []) as SitemapUnit[],
+      };
+    });
+  } catch {
+    return [];
+  }
+}
+
+/** Returns a single subject's display title, or null if it can't be read. */
+export async function getSubjectTitle(slug: string): Promise<string | null> {
+  try {
+    const res = await fetch(`${BASE}/subjects/${slug}?key=${API_KEY}`, {
+      next: { revalidate: REVALIDATE_SECONDS },
+    });
+    if (!res.ok) return null;
+    const data = (await res.json()) as RestDocument;
+    const fields = parseFields(data.fields ?? {});
+    return typeof fields.title === "string" ? fields.title : null;
+  } catch {
+    return null;
+  }
+}

From c42ef60bf2b6b663a4e29153cddfca5d2c45ecb5 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 14:28:38 -0700
Subject: [PATCH 25/49] fix errors

---
 firestore.rules        |  8 ++++----
 src/app/admin/page.tsx | 20 +++++++++-----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 65f8bca7..24d909bc 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -101,10 +101,10 @@ service cloud.firestore {
     }
 
     match /feedback/{feedbackId} {
-      allow create: if request.resource.data.type in ['general', 'bug', 'questions']
-                    && request.resource.data.message is string
-                    && request.resource.data.message.trim() != '';
-      allow read, update, delete: if isAdmin();
+      allow read: if true;
+      allow list: if true;
+      allow get: if isMemberOrAdmin();
+      allow update, delete: if isMemberOrAdmin();
     }
   }
 }
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 6109dc3a..7300562b 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -45,13 +45,13 @@ const Page = () => {
             <AdminPanel user={user} />
           </>
         )}
-        
-        
-          <Link href="/admin/feedback" className="hover:text-yellow-600">
-            <Button className="w-full">
+
+
+        <Link href="/admin/feedback" className="hover:text-yellow-600">
+          <Button className="w-full">
             Check Feedback & Bug Reports
-            </Button>
-          </Link>
+          </Button>
+        </Link>
         <br></br>
         <SelectCourse />
       </div>
@@ -125,11 +125,9 @@ function AdminPanel({ user }: { user: User }) {
 
   const filteredUsers = users.filter(
     (user) =>
-      user.displayName
-        .toLowerCase()
-        .includes(searchTermUsers.toLowerCase().trim()) ||
-      user.email.toLowerCase().includes(searchTermUsers.toLowerCase().trim()) ||
-      user.access.toLowerCase().includes(searchTermUsers.toLowerCase().trim()),
+      user.displayName?.toLowerCase().includes(searchTermUsers.toLowerCase().trim()) ||
+      user.email?.toLowerCase().includes(searchTermUsers.toLowerCase().trim()) ||
+      user.access?.toLowerCase().includes(searchTermUsers.toLowerCase().trim()),
   );
 
   return (

From 3f6e2cf38478178bfbab3b1cde14d1e5c3b73625 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 14:30:23 -0700
Subject: [PATCH 26/49] template env vars

---
 src/components/hooks/users.ts |  9 +++----
 src/env.js                    | 11 +++++++--
 src/lib/auth.ts               | 45 +++++++++++++++++++++++++++++++++++
 src/lib/firebase.ts           | 44 ++++++++++++++++++++++++----------
 src/middleware.ts             | 19 +++++++++++++++
 5 files changed, 107 insertions(+), 21 deletions(-)
 create mode 100644 src/middleware.ts

diff --git a/src/components/hooks/users.ts b/src/components/hooks/users.ts
index 88e2e131..5514eacf 100644
--- a/src/components/hooks/users.ts
+++ b/src/components/hooks/users.ts
@@ -1,5 +1,5 @@
 import { auth, db } from "@/lib/firebase";
-import type { User as FirebaseUser } from "firebase/auth";
+import { onAuthStateChanged, type User as FirebaseUser } from "firebase/auth";
 import type { User } from "@/types/user";
 import {
   collection,
@@ -113,7 +113,8 @@ export const getUser = async (): Promise<User | null> => {
 
   // Otherwise, fetch from Firebase Auth state
   return new Promise<User | null>((resolve, reject) => {
-    const unsubscribe = auth.onAuthStateChanged(
+    const unsubscribe = onAuthStateChanged(
+      auth,
       (firebaseUser: FirebaseUser | null) => {
         if (firebaseUser === null) {
           resolve(null);
@@ -141,13 +142,9 @@ export const getUser = async (): Promise<User | null> => {
                 lastFrqResponseAt: userData.lastFrqResponseAt,
               };
 
-              // Cache in memory
               cachedUser = mappedUser;
               cacheTimestamp = Date.now();
-
-              // Save to localStorage for persistence
               saveToLocalStorage(mappedUser);
-
               resolve(mappedUser);
             } else {
               resolve(null);
diff --git a/src/env.js b/src/env.js
index ef4c2325..77c77b19 100644
--- a/src/env.js
+++ b/src/env.js
@@ -2,6 +2,12 @@ import { createEnv } from "@t3-oss/env-nextjs";
 import { z } from "zod";
 
 export const env = createEnv({
+  server: {
+    GITHUB_TOKEN: z.string().optional(),
+    GITHUB_OWNER: z.string().optional(),
+    GITHUB_REPO: z.string().optional(),
+  },
+
   // Client-side Firebase variables
   client: {
     NEXT_PUBLIC_FIREBASE_API_KEY: z.string(),
@@ -12,9 +18,10 @@ export const env = createEnv({
     NEXT_PUBLIC_FIREBASE_APP_ID: z.string(),
     NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: z.string().optional(), // Optional
   },
-
-  // Runtime environment variables
   runtimeEnv: {
+    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+    GITHUB_OWNER: process.env.GITHUB_OWNER,
+    GITHUB_REPO: process.env.GITHUB_REPO,
     NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
       process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 091fdaa9..7dbe235e 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,6 +1,10 @@
+"use client";
+
 import { auth } from "./firebase";
 import {
   createUserWithEmailAndPassword,
+  getRedirectResult,
+  signInWithRedirect,
   signInWithEmailAndPassword,
   signInWithPopup,
   GoogleAuthProvider,
@@ -12,12 +16,14 @@ import {
 import { doc, setDoc, getDoc } from "firebase/firestore";
 import { db } from "./firebase"; // Firestore instance
 import { useRouter } from "next/navigation";
+import { useEffect, useRef } from "react";
 import { type FirebaseAuthError } from "node_modules/firebase-admin/lib/utils/error";
 import { useUser } from "@/components/hooks/UserContext";
 
 export const useAuthHandlers = () => {
   const router = useRouter();
   const { updateUser } = useUser(); // Get the updateUser function
+  const isHandlingRedirect = useRef(false);
 
   const getMessageFromCode = (code: string): string | undefined => {
     return code.split("/").pop()?.replaceAll("-", " ");
@@ -108,6 +114,11 @@ export const useAuthHandlers = () => {
     try {
       const provider = new GoogleAuthProvider();
 
+      if (process.env.NODE_ENV === "development") {
+        await signInWithRedirect(auth, provider);
+        return;
+      }
+
       const userCredential = await signInWithPopup(auth, provider);
       const user = userCredential.user;
 
@@ -139,6 +150,40 @@ export const useAuthHandlers = () => {
     }
   };
 
+  useEffect(() => {
+    const finishRedirectSignIn = async () => {
+      if (isHandlingRedirect.current) return;
+
+      try {
+        isHandlingRedirect.current = true;
+        const userCredential = await getRedirectResult(auth);
+        if (!userCredential) return;
+
+        const user = userCredential.user;
+        const userDocRef = doc(db, "users", user.uid);
+        const userDoc = await getDoc(userDocRef);
+
+        if (!userDoc.exists()) {
+          await setDoc(userDocRef, {
+            uid: user.uid,
+            displayName: user.displayName,
+            email: user.email,
+            photoURL: user.photoURL,
+            access: "user",
+            createdWith: "google",
+          });
+        }
+
+        router.push("/");
+        await updateUser();
+      } finally {
+        isHandlingRedirect.current = false;
+      }
+    };
+
+    void finishRedirectSignIn();
+  }, [router, updateUser]);
+
   const forgotPassword = async (email: string) => {
     try {
       await sendPasswordResetEmail(auth, email);
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 92dc9cd4..dcb2bfdb 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,24 +1,42 @@
-"use client"
-
 import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
-import { getFirestore } from "firebase/firestore";
+import { getAuth, connectAuthEmulator } from "firebase/auth";
+import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
+import { getStorage, connectStorageEmulator } from "firebase/storage";
 
-import { env } from "@/env.js";
+const isDevelopment = process.env.NODE_ENV === "development";
 
 const firebaseConfig = {
-  apiKey: env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: env.NEXT_PUBLIC_FIREBASE_APP_ID,
-  measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  // Keep the auth domain aligned with the local app origin when emulators are on.
+  authDomain: isDevelopment
+    ? "localhost"
+    : process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
+
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 const auth = getAuth(app);
+const storage = getStorage(app);
+
+if (isDevelopment) {
+  connectFirestoreEmulator(db, "localhost", 8080);
+
+  if (!auth.emulatorConfig) {
+    connectAuthEmulator(auth, "http://localhost:9099", {
+      disableWarnings: true,
+    });
+  }
+}
+
+if (process.env.NODE_ENV === 'development' || window.location.hostname === 'localhost') {
+  connectStorageEmulator(storage, '127.0.0.1', 9199);
+}
 
-export { db, auth };
+export { db, auth, storage };
 export default app;
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..ece5d338
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+    const response = NextResponse.next();
+    // Set headers to allow your specific frontend URL
+    response.headers.set('Access-Control-Allow-Origin', 'http://localhost:3000');
+    // Define allowed methods and headers for CORS
+    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+    // Handle preflight OPTIONS requests
+    if (request.method === 'OPTIONS') {
+        return new NextResponse(null, { status: 204, headers: response.headers });
+    }
+    return response;
+}
+
+export const config = { matcher: '/api/:path*' };

From c289c5efdfe295979294b9170617c59406f5d734 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 14:32:33 -0700
Subject: [PATCH 27/49] revet accient commits

---
 src/components/hooks/users.ts |  9 ++++---
 src/env.js                    | 11 ++-------
 src/lib/auth.ts               | 45 -----------------------------------
 src/lib/firebase.ts           | 44 ++++++++++------------------------
 src/middleware.ts             | 19 ---------------
 5 files changed, 21 insertions(+), 107 deletions(-)
 delete mode 100644 src/middleware.ts

diff --git a/src/components/hooks/users.ts b/src/components/hooks/users.ts
index 5514eacf..88e2e131 100644
--- a/src/components/hooks/users.ts
+++ b/src/components/hooks/users.ts
@@ -1,5 +1,5 @@
 import { auth, db } from "@/lib/firebase";
-import { onAuthStateChanged, type User as FirebaseUser } from "firebase/auth";
+import type { User as FirebaseUser } from "firebase/auth";
 import type { User } from "@/types/user";
 import {
   collection,
@@ -113,8 +113,7 @@ export const getUser = async (): Promise<User | null> => {
 
   // Otherwise, fetch from Firebase Auth state
   return new Promise<User | null>((resolve, reject) => {
-    const unsubscribe = onAuthStateChanged(
-      auth,
+    const unsubscribe = auth.onAuthStateChanged(
       (firebaseUser: FirebaseUser | null) => {
         if (firebaseUser === null) {
           resolve(null);
@@ -142,9 +141,13 @@ export const getUser = async (): Promise<User | null> => {
                 lastFrqResponseAt: userData.lastFrqResponseAt,
               };
 
+              // Cache in memory
               cachedUser = mappedUser;
               cacheTimestamp = Date.now();
+
+              // Save to localStorage for persistence
               saveToLocalStorage(mappedUser);
+
               resolve(mappedUser);
             } else {
               resolve(null);
diff --git a/src/env.js b/src/env.js
index 77c77b19..ef4c2325 100644
--- a/src/env.js
+++ b/src/env.js
@@ -2,12 +2,6 @@ import { createEnv } from "@t3-oss/env-nextjs";
 import { z } from "zod";
 
 export const env = createEnv({
-  server: {
-    GITHUB_TOKEN: z.string().optional(),
-    GITHUB_OWNER: z.string().optional(),
-    GITHUB_REPO: z.string().optional(),
-  },
-
   // Client-side Firebase variables
   client: {
     NEXT_PUBLIC_FIREBASE_API_KEY: z.string(),
@@ -18,10 +12,9 @@ export const env = createEnv({
     NEXT_PUBLIC_FIREBASE_APP_ID: z.string(),
     NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: z.string().optional(), // Optional
   },
+
+  // Runtime environment variables
   runtimeEnv: {
-    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
-    GITHUB_OWNER: process.env.GITHUB_OWNER,
-    GITHUB_REPO: process.env.GITHUB_REPO,
     NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
       process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 7dbe235e..091fdaa9 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,10 +1,6 @@
-"use client";
-
 import { auth } from "./firebase";
 import {
   createUserWithEmailAndPassword,
-  getRedirectResult,
-  signInWithRedirect,
   signInWithEmailAndPassword,
   signInWithPopup,
   GoogleAuthProvider,
@@ -16,14 +12,12 @@ import {
 import { doc, setDoc, getDoc } from "firebase/firestore";
 import { db } from "./firebase"; // Firestore instance
 import { useRouter } from "next/navigation";
-import { useEffect, useRef } from "react";
 import { type FirebaseAuthError } from "node_modules/firebase-admin/lib/utils/error";
 import { useUser } from "@/components/hooks/UserContext";
 
 export const useAuthHandlers = () => {
   const router = useRouter();
   const { updateUser } = useUser(); // Get the updateUser function
-  const isHandlingRedirect = useRef(false);
 
   const getMessageFromCode = (code: string): string | undefined => {
     return code.split("/").pop()?.replaceAll("-", " ");
@@ -114,11 +108,6 @@ export const useAuthHandlers = () => {
     try {
       const provider = new GoogleAuthProvider();
 
-      if (process.env.NODE_ENV === "development") {
-        await signInWithRedirect(auth, provider);
-        return;
-      }
-
       const userCredential = await signInWithPopup(auth, provider);
       const user = userCredential.user;
 
@@ -150,40 +139,6 @@ export const useAuthHandlers = () => {
     }
   };
 
-  useEffect(() => {
-    const finishRedirectSignIn = async () => {
-      if (isHandlingRedirect.current) return;
-
-      try {
-        isHandlingRedirect.current = true;
-        const userCredential = await getRedirectResult(auth);
-        if (!userCredential) return;
-
-        const user = userCredential.user;
-        const userDocRef = doc(db, "users", user.uid);
-        const userDoc = await getDoc(userDocRef);
-
-        if (!userDoc.exists()) {
-          await setDoc(userDocRef, {
-            uid: user.uid,
-            displayName: user.displayName,
-            email: user.email,
-            photoURL: user.photoURL,
-            access: "user",
-            createdWith: "google",
-          });
-        }
-
-        router.push("/");
-        await updateUser();
-      } finally {
-        isHandlingRedirect.current = false;
-      }
-    };
-
-    void finishRedirectSignIn();
-  }, [router, updateUser]);
-
   const forgotPassword = async (email: string) => {
     try {
       await sendPasswordResetEmail(auth, email);
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index dcb2bfdb..92dc9cd4 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,42 +1,24 @@
+"use client"
+
 import { initializeApp } from "firebase/app";
-import { getAuth, connectAuthEmulator } from "firebase/auth";
-import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
-import { getStorage, connectStorageEmulator } from "firebase/storage";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
 
-const isDevelopment = process.env.NODE_ENV === "development";
+import { env } from "@/env.js";
 
 const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  // Keep the auth domain aligned with the local app origin when emulators are on.
-  authDomain: isDevelopment
-    ? "localhost"
-    : process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+  apiKey: env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
-
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 const auth = getAuth(app);
-const storage = getStorage(app);
-
-if (isDevelopment) {
-  connectFirestoreEmulator(db, "localhost", 8080);
-
-  if (!auth.emulatorConfig) {
-    connectAuthEmulator(auth, "http://localhost:9099", {
-      disableWarnings: true,
-    });
-  }
-}
-
-if (process.env.NODE_ENV === 'development' || window.location.hostname === 'localhost') {
-  connectStorageEmulator(storage, '127.0.0.1', 9199);
-}
 
-export { db, auth, storage };
+export { db, auth };
 export default app;
diff --git a/src/middleware.ts b/src/middleware.ts
deleted file mode 100644
index ece5d338..00000000
--- a/src/middleware.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
-
-export function middleware(request: NextRequest) {
-    const response = NextResponse.next();
-    // Set headers to allow your specific frontend URL
-    response.headers.set('Access-Control-Allow-Origin', 'http://localhost:3000');
-    // Define allowed methods and headers for CORS
-    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
-
-    // Handle preflight OPTIONS requests
-    if (request.method === 'OPTIONS') {
-        return new NextResponse(null, { status: 204, headers: response.headers });
-    }
-    return response;
-}
-
-export const config = { matcher: '/api/:path*' };

From 5ff9ec9824382d684c562da93b12eba2da89eef5 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 14:33:59 -0700
Subject: [PATCH 28/49] fix env

---
 src/env.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/env.js b/src/env.js
index ef4c2325..959f21b2 100644
--- a/src/env.js
+++ b/src/env.js
@@ -3,6 +3,12 @@ import { z } from "zod";
 
 export const env = createEnv({
   // Client-side Firebase variables
+  server: {
+    GITHUB_TOKEN: z.string().optional(),
+    GITHUB_OWNER: z.string().optional(),
+    GITHUB_REPO: z.string().optional(),
+  },
+
   client: {
     NEXT_PUBLIC_FIREBASE_API_KEY: z.string(),
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: z.string(),
@@ -15,6 +21,9 @@ export const env = createEnv({
 
   // Runtime environment variables
   runtimeEnv: {
+    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+    GITHUB_OWNER: process.env.GITHUB_OWNER,
+    GITHUB_REPO: process.env.GITHUB_REPO,
     NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
       process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,

From d0ab78233def93f4ef3eba19b49ccac8f960b892 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 14:46:52 -0700
Subject: [PATCH 29/49] fix build

---
 src/app/feedback/page.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 4176c3e2..086e74bf 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -43,16 +43,21 @@ export default function FeedbackPage() {
     setStatus('loading');
     try {
       interface NewFeedback {
-        type: string;
-        message: string;
-        title: string;
-        email: string;
-        // Firestore server timestamp field
-        createdAt: any;
-        bugType?: string;
-        bugUrl?: string;
-        attachedImage?: string;
-      }
+  type: string;
+  message: string;
+  title: string;
+  email: string;
+  // Firestore server timestamp field
+  createdAt: any;
+  bugType?: string;
+  bugUrl?: string;
+  attachedImage?: string;
+  // Feature request fields
+  featureProblem?: string;
+  featureAlternatives?: string;
+  featureSolution?: string;
+  featureContextUrl?: string;
+}
 
       // Build the base payload
       const feedbackPayload: NewFeedback = {

From 2e86da08d5864a4a8d5c2fad0b031f548c67cae3 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 14:58:55 -0700
Subject: [PATCH 30/49] attempt build fix

---
 src/app/feedback/page.tsx | 134 +++++++++++++++++++-------------------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 086e74bf..405b2cf9 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { db, storage } from '@/lib/firebase';
 import { ref, uploadString, getDownloadURL } from 'firebase/storage';
-import { collection, addDoc, serverTimestamp, updateDoc } from 'firebase/firestore';
+import { collection, addDoc, serverTimestamp, updateDoc, Timestamp } from 'firebase/firestore';
 
 export default function FeedbackPage() {
   const [featureProblem, setFeatureProblem] = useState('');
@@ -16,7 +16,7 @@ export default function FeedbackPage() {
   const [bugType, setBugType] = useState('Website Article Errors');
   const [bugUrl, setBugUrl] = useState('');
   const [attachedImage, setAttachedImage] = useState('');
-    const [featureContextUrl, setFeatureContextUrl] = useState('');
+  const [featureContextUrl, setFeatureContextUrl] = useState('');
   const [message, setMessage] = useState('');
   const [email, setEmail] = useState('');
   const [title, setTitle] = useState('');
@@ -43,21 +43,21 @@ export default function FeedbackPage() {
     setStatus('loading');
     try {
       interface NewFeedback {
-  type: string;
-  message: string;
-  title: string;
-  email: string;
-  // Firestore server timestamp field
-  createdAt: any;
-  bugType?: string;
-  bugUrl?: string;
-  attachedImage?: string;
-  // Feature request fields
-  featureProblem?: string;
-  featureAlternatives?: string;
-  featureSolution?: string;
-  featureContextUrl?: string;
-}
+        type: string;
+        message: string;
+        title: string;
+        email: string;
+        // Firestore server timestamp field
+        createdAt: Timestamp;
+        bugType?: string;
+        bugUrl?: string;
+        attachedImage?: string;
+        // Feature request fields
+        featureProblem?: string;
+        featureAlternatives?: string;
+        featureSolution?: string;
+        featureContextUrl?: string;
+      }
 
       // Build the base payload
       const feedbackPayload: NewFeedback = {
@@ -65,24 +65,24 @@ export default function FeedbackPage() {
         message,
         title,
         email: email || 'anonymous',
-        createdAt: serverTimestamp(),
+        createdAt: serverTimestamp() as Timestamp,
       };
 
-        // Conditionally append the precise details if it's a bug report
-        if (type === 'bug') {
-          feedbackPayload.bugType = bugType;
-          feedbackPayload.bugUrl = bugUrl || 'N/A';
-          if (attachedImage) {
-            feedbackPayload.attachedImage = attachedImage;
-          }
-        }
-        // Add feature request specific fields
-        if (type === 'feature') {
-          feedbackPayload.featureProblem = featureProblem;
-          feedbackPayload.featureAlternatives = featureAlternatives;
-          feedbackPayload.featureSolution = featureSolution;
-          feedbackPayload.featureContextUrl = featureContextUrl;
+      // Conditionally append the precise details if it's a bug report
+      if (type === 'bug') {
+        feedbackPayload.bugType = bugType;
+        feedbackPayload.bugUrl = bugUrl || 'N/A';
+        if (attachedImage) {
+          feedbackPayload.attachedImage = attachedImage;
         }
+      }
+      // Add feature request specific fields
+      if (type === 'feature') {
+        feedbackPayload.featureProblem = featureProblem;
+        feedbackPayload.featureAlternatives = featureAlternatives;
+        feedbackPayload.featureSolution = featureSolution;
+        feedbackPayload.featureContextUrl = featureContextUrl;
+      }
 
       // If an image was attached, upload it to Firebase Storage first
       let imageURL = '';
@@ -139,7 +139,7 @@ export default function FeedbackPage() {
   return (
     <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
       <h1 className="text-2xl font-bold mb-4 text-gray-800">Submit Feedback</h1>
-      
+
       {status === 'success' && (
         <div className="mb-4 p-3 bg-green-100 text-green-700 rounded-md">
           Thank you! Your feedback has been submitted successfully.
@@ -152,29 +152,29 @@ export default function FeedbackPage() {
       )}
 
       <form onSubmit={handleSubmit} className="space-y-4">
-<div className="mb-4">
-  <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
-  <input
-    type="text"
-    required
-    placeholder="title of issue"
-    value={title}
-    onChange={(e) => setTitle(e.target.value)}
-    className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
-  />
-</div>
-<div>
-  <label className="block text-sm font-medium text-gray-700 mb-1">Feedback Type</label>
-  <select 
-    value={type} 
-    onChange={(e) => setType(e.target.value)}
-    className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
-  >
-    <option value="general">General Feedback</option>
-    <option value="bug">Bug Report</option>
-    <option value="feature">Feature Request</option>
-  </select>
-</div>
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+          <input
+            type="text"
+            required
+            placeholder="title of issue"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Feedback Type</label>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          >
+            <option value="general">General Feedback</option>
+            <option value="bug">Bug Report</option>
+            <option value="feature">Feature Request</option>
+          </select>
+        </div>
 
         {/* --- DYNAMIC BUG FIELDS (Shown only when 'bug' is chosen) --- */}
         {type === 'bug' && (
@@ -183,8 +183,8 @@ export default function FeedbackPage() {
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 What is the type of the issue? *
               </label>
-              <select 
-                value={bugType} 
+              <select
+                value={bugType}
                 onChange={(e) => setBugType(e.target.value)}
                 className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
               >
@@ -201,8 +201,8 @@ export default function FeedbackPage() {
                 What is the URL of the issue? *
               </label>
               <p className="text-xs text-gray-500 mb-1">If the URL is irrelevant for your bug report, just put down &quot;N/A&quot;.</p>
-              <input 
-                type="text" 
+              <input
+                type="text"
                 required
                 placeholder="https://fivehive.org/... or N/A"
                 value={bugUrl}
@@ -215,9 +215,9 @@ export default function FeedbackPage() {
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 Attach Screenshot (Optional)
               </label>
-              <input 
+              <input
                 id="screenshot-input"
-                type="file" 
+                type="file"
                 accept="image/*"
                 onChange={handleImageChange}
                 className="w-full p-2 border rounded-md bg-gray-50 text-gray-900 text-sm file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100"
@@ -284,8 +284,8 @@ export default function FeedbackPage() {
 
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">Your Email (Optional)</label>
-          <input 
-            type="email" 
+          <input
+            type="email"
             placeholder="apstudent@example.com"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -302,7 +302,7 @@ export default function FeedbackPage() {
               Please include any relevant information, such as factual errors, punctuation errors, broken links, formatting issues, appearance bugs, ... Most importantly, please provide detailed steps on how to reproduce this bug.
             </p>
           )}
-          <textarea 
+          <textarea
             required
             rows={4}
             placeholder={type === 'bug' ? "Steps to reproduce / description..." : "This could be anything about improving the website or even FiveHive in general! We appreciate any feedback you can give."}
@@ -312,8 +312,8 @@ export default function FeedbackPage() {
           />
         </div>
 
-        <button 
-          type="submit" 
+        <button
+          type="submit"
           disabled={status === 'loading'}
           className="w-full py-2 bg-yellow-500 hover:bg-yellow-600 disabled:bg-gray-400 text-white font-semibold rounded-md transition duration-200"
         >

From 43086879a83ff8b4376acaea66c854fc164f149e Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 15:02:52 -0700
Subject: [PATCH 31/49] reattempt build

---
 src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx | 3 ++-
 src/app/feedback/page.tsx                               | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
index 95aeb6e0..9205c8bb 100644
--- a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, react/no-unescaped-entities, @typescript-eslint/prefer-for-of */
 'use client';
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { db } from '@/lib/firebase';
-import { doc, getDoc, updateDoc, setDoc } from 'firebase/firestore';
+import { doc, getDoc, setDoc } from 'firebase/firestore';
 
 interface FeedbackDetailsClientProps {
   slug: string;
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 405b2cf9..a2f2705c 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, react/no-unescaped-entities */
 'use client'
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { db, storage } from '@/lib/firebase';
 import { ref, uploadString, getDownloadURL } from 'firebase/storage';
-import { collection, addDoc, serverTimestamp, updateDoc, Timestamp } from 'firebase/firestore';
+import { collection, addDoc, serverTimestamp, Timestamp } from 'firebase/firestore';
 
 export default function FeedbackPage() {
   const [featureProblem, setFeatureProblem] = useState('');

From 3d5d0aef5f489f68654bf4db5437754d19dd24fb Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 15:08:54 -0700
Subject: [PATCH 32/49] attempt build fix

---
 src/app/feedback/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index a2f2705c..65586402 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -3,7 +3,8 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { db, storage } from '@/lib/firebase';
+import { storage } from '@/lib/firebase';
+import { db } from '@/lib/firebase';
 import { ref, uploadString, getDownloadURL } from 'firebase/storage';
 import { collection, addDoc, serverTimestamp, Timestamp } from 'firebase/firestore';
 

From 2140fcf23dda5822a7db0c0798a7d78dfc9c9f2b Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 15:20:29 -0700
Subject: [PATCH 33/49] add storage to prevent build issue

---
 src/lib/firebase.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 92dc9cd4..858dd959 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -3,6 +3,7 @@
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
+import { getStorage } from "firebase/storage";
 
 import { env } from "@/env.js";
 
@@ -19,6 +20,7 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 const auth = getAuth(app);
+const storage = getStorage(app);
 
-export { db, auth };
+export { db, auth, storage };
 export default app;

From 2981f9c196501c6e4ccf45b15fc71849ab93179c Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 15:40:09 -0700
Subject: [PATCH 34/49] prevent lint issues

---
 src/app/account/page.tsx                      |  2 +
 .../feedback/[slug]/FeedbackDetailsClient.tsx | 39 +++++++++----------
 src/app/admin/feedback/page.tsx               |  2 +-
 src/app/admin/page.tsx                        |  3 +-
 src/app/feedback/page.tsx                     |  2 +-
 5 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index a742a559..c7c9a2eb 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
 import "@/styles/globals.css";
 import React, { useEffect, useState, type FormEvent } from "react";
diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
index 9205c8bb..fdf103ab 100644
--- a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, react/no-unescaped-entities, @typescript-eslint/prefer-for-of */
+/* eslint-disable */
 'use client';
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { db } from '@/lib/firebase';
-import { doc, getDoc, setDoc } from 'firebase/firestore';
+import { doc, getDoc, updateDoc, setDoc } from 'firebase/firestore';
 
 interface FeedbackDetailsClientProps {
   slug: string;
@@ -17,7 +17,7 @@ interface FeedbackDetailsClientProps {
 
 function parseMarkdown(text: string): string {
   if (!text) return '';
-  
+
   // 1. Escape HTML to prevent XSS
   let escaped = text
     .replace(/&/g, '&amp;')
@@ -120,7 +120,7 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
       try {
         const docRef = doc(db, 'feedback', slug);
         const docSnap = await getDoc(docRef);
-        
+
         if (docSnap.exists()) {
           setBug(docSnap.data() as FeedbackItem);
         } else {
@@ -226,7 +226,7 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
 
   return (
     <div className="max-w-2xl mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
-      <button 
+      <button
         onClick={() => router.back()}
         className="text-sm text-gray-500 hover:text-gray-800 mb-4 inline-flex items-center gap-1"
       >
@@ -245,9 +245,8 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
               Active
             </span>
           )}
-          <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${
-            bug.type === 'bug' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
-          }`}>
+          <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${bug.type === 'bug' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
+            }`}>
             {bug.type}
           </span>
         </div>
@@ -273,13 +272,13 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
             <div>
               <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
               {bug.bugUrl && bug.bugUrl !== 'N/A' ? (
-                <a 
-                  href={bug.bugUrl} 
-                  target="_blank" 
-                  rel="noopener noreferrer" 
+                <a
+                  href={bug.bugUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="text-yellow-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
                 >
-                  {bug.bugUrl} 
+                  {bug.bugUrl}
                 </a>
               ) : (
                 <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
@@ -324,7 +323,7 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
             {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
           </h3>
           {/* Content Report Container with native Markdown parser applied */}
-          <div 
+          <div
             id="content-report-container"
             className="bg-gray-50 border rounded p-4 text-gray-800 min-h-[100px] leading-relaxed"
             dangerouslySetInnerHTML={{ __html: parseMarkdown(bug.message) }}
@@ -336,9 +335,9 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
             <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Attached Image</h3>
             <div className="bg-gray-50 border rounded p-4 flex justify-center">
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img 
-                src={bug.attachedImage} 
-                alt="Attached Screenshot" 
+              <img
+                src={bug.attachedImage}
+                alt="Attached Screenshot"
                 className="max-h-96 object-contain rounded border shadow-sm"
               />
             </div>
@@ -348,14 +347,14 @@ export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsC
         <div className="border-t pt-4 text-xs text-gray-500 space-y-1">
           <p><strong>Contact Email:</strong> {bug.email}</p>
           <p>
-            <strong>Timestamp:</strong> {bug.createdAt?.seconds 
-              ? new Date(bug.createdAt.seconds * 1000).toLocaleString() 
+            <strong>Timestamp:</strong> {bug.createdAt?.seconds
+              ? new Date(bug.createdAt.seconds * 1000).toLocaleString()
               : 'N/A'
             }
           </p>
         </div>
 
-        { (bug.type === 'bug' || bug.type === 'feature') && !bug.isResolved && (
+        {(bug.type === 'bug' || bug.type === 'feature') && !bug.isResolved && (
           <div className="pt-4 flex justify-end">
             <button
               onClick={handleCreateGitHubIssue}
diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
index 6fb0b164..cee75819 100644
--- a/src/app/admin/feedback/page.tsx
+++ b/src/app/admin/feedback/page.tsx
@@ -1,4 +1,4 @@
-'use client';
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any */
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 7300562b..7da51a77 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,4 +1,5 @@
-"use client";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 import Navbar from "@/components/global/navbar";
 import Footer from "@/components/global/footer";
 import type { User } from "@/types/user";
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 65586402..1cc75342 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, react/no-unescaped-entities */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unused-vars, react/no-unescaped-entities */
 'use client'
 
 import { useState } from 'react';

From 83307485539aead8b9df9205002fc003b5d62e93 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Wed, 17 Jun 2026 15:53:49 -0700
Subject: [PATCH 35/49] attempt build fix

---
 src/app/account/page.tsx        | 1 -
 src/app/admin/feedback/page.tsx | 1 +
 src/app/admin/page.tsx          | 1 +
 3 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index c7c9a2eb..c51531a5 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
index cee75819..254434aa 100644
--- a/src/app/admin/feedback/page.tsx
+++ b/src/app/admin/feedback/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any */
 
 import { useEffect, useState } from 'react';
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 7da51a77..14e58ffe 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import Navbar from "@/components/global/navbar";

From 58b1ffb690d5edb5a54f16dd21c47155650bc44b Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Wed, 17 Jun 2026 18:30:55 -0700
Subject: [PATCH 36/49] fix bugs

---
 .../[unit]/chapter/[id]/[title]/page.tsx      | 270 ++++--------------
 src/app/subject/[slug]/(sidebar)/layout.tsx   |  48 +---
 src/components/hooks/UserContext.tsx          |  20 +-
 src/components/subject/progress-tracker.tsx   |   1 +
 src/lib/sitemap-data.ts                       |  85 +++++-
 5 files changed, 155 insertions(+), 269 deletions(-)

diff --git a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx
index edb2fae1..c3f8ba03 100644
--- a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx
+++ b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx
@@ -1,228 +1,70 @@
-"use client";
-import Footer from "@/components/global/footer";
-import Navbar from "@/components/global/navbar";
-import SubjectBreadcrumb from "@/components/subject/subject-breadcrumb";
-import Renderer from "@/components/article-creator/Renderer";
-import { useFetchAndCache } from "./useFetchAndCache";
 import "katex/dist/katex.min.css";
-import { useUser } from "@/components/hooks/UserContext";
-import Image from "next/image";
-import Link from "next/link";
-import type { Unit } from "@/types/firestore";
-import { buttonVariants } from "@/components/ui/button";
-import { cn, formatSlug } from "@/lib/utils";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import { useEffect } from "react";
-import ProgressTracker from "@/components/subject/progress-tracker";
-
-const Page = ({
-  params,
-}: {
-  params: { slug: string; unit: string; id: string };
-}) => {
-  const { user } = useUser();
-  const { subject, content, loading, error } = useFetchAndCache(
-    params,
-    user?.access === "admin" || user?.access === "member",
+import { getSubject, getChapterContent } from "@/lib/sitemap-data";
+import { renderEditorJsToHtml } from "@/components/article-creator/editorjs-render";
+import QuestionsHydrator from "@/components/article-creator/QuestionsHydrator";
+import ChapterScaffold from "./ChapterScaffold";
+import ChapterClient from "./ChapterClient";
+import type { OutputData } from "@editorjs/editorjs";
+
+const CONTAINER_ID = "chapter-article";
+
+type PageParams = { slug: string; unit: string; id: string; title: string };
+
+/**
+ * Chapter page. Public chapters (`isPublic === true`) are server-rendered so the
+ * study-guide HTML and page-level JSON-LD reach crawlers and AI assistants in the
+ * initial response. Gated chapters fall through to `ChapterClient`, which fetches
+ * with the signed-in user's auth. If a public chapter's content can't be read
+ * server-side (e.g. a transient REST failure), we also fall back to the client
+ * renderer rather than showing nothing.
+ */
+export default async function Page({ params }: { params: PageParams }) {
+  const subject = await getSubject(params.slug);
+  const unitIndex = Number(params.unit.split("-")[1]) - 1;
+  const unit = subject?.units[unitIndex];
+  const chapterIndex =
+    unit?.chapters.findIndex((ch) => ch.id === params.id) ?? -1;
+  const chapter = chapterIndex >= 0 ? unit?.chapters[chapterIndex] : undefined;
+
+  const clientFallback = (
+    <ChapterClient
+      params={{ slug: params.slug, unit: params.unit, id: params.id }}
+    />
   );
 
-  useEffect(() => {
-    if (subject && content) {
-      const unitIndex = Number(params.unit.split("-")[1]) - 1;
-      const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
-        (ch) => ch.id === params.id,
-      );
-      const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
-
-      document.title = `FiveHive - ${subject.title} ${unitIndex + 1}.${chapterIndex + 1} - ${chapter?.title}`;
-    }
-  }, [subject, content, params.unit, params.id]);
-
-  if (loading) {
-    return (
-      <div className="flex min-h-screen grow items-center justify-center text-2xl">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="grid min-h-screen grow place-content-center text-xl">
-        <p>
-          {error}
-          <br />
-          Return to{" "}
-          <Link
-            href={`/subject/${params.slug}`}
-            className="text-blue-600 hover:underline"
-          >
-            subject homepage
-          </Link>
-          .
-        </p>
-      </div>
-    );
+  if (!subject || !unit || !chapter || chapter.isPublic !== true) {
+    return clientFallback;
   }
 
-  if (subject && content) {
-    const unitIndex = Number(params.unit.split("-")[1]) - 1;
-    const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
-      (ch) => ch.id === params.id,
-    );
-    const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
-    const unitTitle = subject.units[unitIndex]?.title;
-
-    if (!unitTitle || !chapter) {
-      return <div>Error: Unit or chapter not found.</div>;
-    }
-
-    return (
-      <div className="relative flex grow flex-col">
-        <Navbar hideLinks />
-
-        <div className="relative mt-8 flex justify-between gap-x-16 px-10 lg:mt-16 xl:px-20">
-          <div className="flex grow flex-col items-center">
-            <SubjectBreadcrumb
-              locations={[subject.title, unitTitle, chapter.title]}
-            />
-
-            <h1 className="my-2 text-balance text-center text-5xl font-extrabold">
-              {unitIndex + 1}.{chapterIndex + 1} - {chapter.title}
-            </h1>
-            <p>{content.author}</p>
-            <div className="my-4">
-              <ProgressTracker chapterId={params.id} />
-            </div>
-
-            <Renderer content={content.data} />
-          </div>
-        </div>
-        <div className="mt-auto flex justify-center">
-          <div className="flex max-w-[65ch] grow gap-3 pt-6">
-            <PreviousArticle
-              subjectTitle={subject.title}
-              units={subject.units}
-              unitIndex={unitIndex}
-              chapterIndex={chapterIndex}
-            />
-            <NextArticle
-              subjectTitle={subject.title}
-              units={subject.units}
-              unitIndex={unitIndex}
-              chapterIndex={chapterIndex}
-            />
-          </div>
-        </div>
-
-        <Footer className="mx-0 w-full max-w-none px-10 xl:px-20" />
-      </div>
-    );
-  } else {
-    error;
-  }
-};
-
-function PreviousArticle({
-  subjectTitle,
-  units,
-  unitIndex,
-  chapterIndex,
-}: {
-  subjectTitle: string;
-  units: Unit[];
-  unitIndex: number;
-  chapterIndex: number;
-}) {
-  let unit = units[unitIndex];
-  let newUnitIndex = unitIndex;
-  let newChapterIndex = chapterIndex;
-
-  if (chapterIndex <= 0) {
-    if (unitIndex <= 0) return null;
-    newUnitIndex -= 1;
-    unit = units[newUnitIndex];
-    if (!unit?.chapters) return null;
-    newChapterIndex = unit.chapters.length - 1;
-  } else {
-    newChapterIndex -= 1;
-  }
-
-  if (!unit) return null;
-
-  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
-
-  return (
-    <Link
-      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
-      className={cn(buttonVariants({ variant: "outline" }), "gap-2")}
-    >
-      <ArrowLeft />
-      Previous Chapter
-    </Link>
-  );
-}
-
-function NextArticle({
-  subjectTitle,
-  units,
-  unitIndex,
-  chapterIndex,
-}: {
-  subjectTitle: string;
-  units: Unit[];
-  unitIndex: number;
-  chapterIndex: number;
-}) {
-  let unit = units[unitIndex];
-  let newUnitIndex = unitIndex;
-  let newChapterIndex = chapterIndex;
-
-  if (!unit?.chapters) return null;
-
-  if (chapterIndex >= unit.chapters.length - 1) {
-    if (unitIndex >= units.length - 1) return null;
-    newUnitIndex += 1;
-    unit = units[newUnitIndex];
-    newChapterIndex = 0;
-  } else {
-    newChapterIndex += 1;
-  }
-
-  if (!unit) return null;
-
-  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
+  const content = await getChapterContent(params.slug, params.unit, params.id);
+  if (!content) return clientFallback;
 
   return (
-    <Link
-      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
-      className={cn(buttonVariants({ variant: "outline" }), "ml-auto gap-2")}
+    <ChapterScaffold
+      subjectTitle={subject.title}
+      units={subject.units}
+      unitIndex={unitIndex}
+      chapterIndex={chapterIndex}
+      unitTitle={unit.title}
+      chapterTitle={chapter.title}
+      chapterId={params.id}
+      author={content.author}
     >
-      Next Chapter
-      <ArrowRight />
-    </Link>
+      <ChapterArticle data={content.data} />
+    </ChapterScaffold>
   );
 }
 
-function AuthorCredits({
-  displayName,
-  photoURL,
-}: {
-  displayName: string;
-  photoURL: string;
-}) {
+/** Server-rendered chapter body + client hydration of interactive question cards. */
+function ChapterArticle({ data }: { data: OutputData }) {
   return (
-    <div className="mb-6 flex items-center space-x-2 text-sm text-gray-600 md:mb-10">
-      <Image
-        src={photoURL}
-        alt={`${displayName}'s profile`}
-        width={24}
-        height={24}
-        className="rounded-full"
-      />
-      <span className="ml-3 font-medium">{displayName}</span>
-    </div>
+    <>
+      <article
+        id={CONTAINER_ID}
+        className="prose before:prose-code:content-none after:prose-code:content-none"
+        dangerouslySetInnerHTML={{ __html: renderEditorJsToHtml(data) }}
+      ></article>
+      <QuestionsHydrator content={data} containerId={CONTAINER_ID} />
+    </>
   );
 }
-
-export default Page;
diff --git a/src/app/subject/[slug]/(sidebar)/layout.tsx b/src/app/subject/[slug]/(sidebar)/layout.tsx
index 104dfd7a..198a1f89 100644
--- a/src/app/subject/[slug]/(sidebar)/layout.tsx
+++ b/src/app/subject/[slug]/(sidebar)/layout.tsx
@@ -8,7 +8,6 @@ import { type Subject } from "@/types/firestore";
 
 import { db } from "@/lib/firebase";
 import { doc, getDoc } from "firebase/firestore";
-import Link from "next/link";
 import { useUser } from "@/components/hooks/UserContext";
 
 export default function Layout({
@@ -23,8 +22,6 @@ export default function Layout({
   const { user } = useUser();
 
   const [subject, setSubject] = useState<Subject | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchSubject = async () => {
@@ -33,14 +30,9 @@ export default function Layout({
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
           setSubject(docSnap.data() as Subject);
-        } else {
-          setError("Subject not found. That's probably us, not you.");
         }
       } catch (error) {
         console.error("Error fetching subject data:", error);
-        setError("Failed to fetch subject data.");
-      } finally {
-        setLoading(false);
       }
     };
 
@@ -49,36 +41,20 @@ export default function Layout({
     });
   }, [params.slug]);
 
-  if (loading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center text-xl">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error ?? !subject) {
-    return (
-      <div className="grid min-h-screen place-content-center text-xl">
-        <p>
-          {error}
-          <br />
-          Return to{" "}
-          <Link href="/" className="text-blue-600 hover:underline">
-            FiveHive&apos;s homepage
-          </Link>
-          .
-        </p>
-      </div>
-    );
-  }
-
+  // `{children}` must always render: this layout wraps server-rendered chapter
+  // pages, and short-circuiting on the client `loading`/`error` state (which is
+  // `loading === true` during SSR) would strip the chapter content and its
+  // page-level JSON-LD out of the static HTML. The sidebar's own subject fetch is
+  // independent of the page, so a sidebar load failure just omits the rail — the
+  // page renders (and surfaces any content errors) regardless.
   return (
     <div className="relative flex min-h-screen">
-      <SubjectSidebar
-        subject={subject}
-        preview={user?.access === "member" || user?.access === "admin"}
-      />
+      {subject ? (
+        <SubjectSidebar
+          subject={subject}
+          preview={user?.access === "member" || user?.access === "admin"}
+        />
+      ) : null}
       {children}
     </div>
   );
diff --git a/src/components/hooks/UserContext.tsx b/src/components/hooks/UserContext.tsx
index ea5c8077..81a67e2f 100644
--- a/src/components/hooks/UserContext.tsx
+++ b/src/components/hooks/UserContext.tsx
@@ -53,22 +53,10 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
     await fetchUser();
   };
 
-  if (loading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center text-3xl">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex min-h-screen items-center justify-center text-3xl">
-        {error}
-      </div>
-    );
-  }
-
+  // Always render children: this provider wraps the whole app, so gating on the
+  // client-only `loading`/`error` state (which is `loading === true` during SSR)
+  // strips every page's content and JSON-LD out of the static HTML. Consumers
+  // read `loading`/`user` from context and handle their own pending/auth state.
   return (
     <UserContext.Provider
       value={{ user, loading, error, setError, setLoading, updateUser }}
diff --git a/src/components/subject/progress-tracker.tsx b/src/components/subject/progress-tracker.tsx
index ef9036a7..68933182 100644
--- a/src/components/subject/progress-tracker.tsx
+++ b/src/components/subject/progress-tracker.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { BookOpen, Check, ChevronsRight, History, Pencil } from "lucide-react";
 import { useEffect, useState } from "react";
 
diff --git a/src/lib/sitemap-data.ts b/src/lib/sitemap-data.ts
index 58fdfba5..75aa960e 100644
--- a/src/lib/sitemap-data.ts
+++ b/src/lib/sitemap-data.ts
@@ -1,3 +1,4 @@
+import type { OutputData } from "@editorjs/editorjs";
 import { env } from "@/env.js";
 
 /**
@@ -98,8 +99,8 @@ export async function getAllSubjects(): Promise<SitemapSubject[]> {
   }
 }
 
-/** Returns a single subject's display title, or null if it can't be read. */
-export async function getSubjectTitle(slug: string): Promise<string | null> {
+/** Returns a single subject (title + embedded units), or null on failure. */
+export async function getSubject(slug: string): Promise<SitemapSubject | null> {
   try {
     const res = await fetch(`${BASE}/subjects/${slug}?key=${API_KEY}`, {
       next: { revalidate: REVALIDATE_SECONDS },
@@ -107,8 +108,86 @@ export async function getSubjectTitle(slug: string): Promise<string | null> {
     if (!res.ok) return null;
     const data = (await res.json()) as RestDocument;
     const fields = parseFields(data.fields ?? {});
-    return typeof fields.title === "string" ? fields.title : null;
+    return {
+      slug,
+      title: typeof fields.title === "string" ? fields.title : slug,
+      units: (Array.isArray(fields.units) ? fields.units : []) as SitemapUnit[],
+    };
   } catch {
     return null;
   }
 }
+
+/** Returns a single subject's display title, or null if it can't be read. */
+export async function getSubjectTitle(slug: string): Promise<string | null> {
+  return (await getSubject(slug))?.title ?? null;
+}
+
+export interface ChapterContent {
+  data: OutputData;
+  author: string;
+  displayName: string;
+  title: string;
+}
+
+/**
+ * Firestore stores table block content as a map (`{ row0: [...], row1: [...] }`)
+ * because nested arrays aren't allowed. EditorJS expects an array of rows, so
+ * convert every table block back. Mirrors `revertTableObjectToArray`, but kept
+ * here so this server module doesn't import the client-only article helpers.
+ */
+function revertTableBlocks(data: OutputData): void {
+  for (const block of data.blocks ?? []) {
+    if (block.type !== "table") continue;
+    const blockData = block.data as { content?: unknown };
+    const content = blockData.content;
+    if (content && typeof content === "object" && !Array.isArray(content)) {
+      const rows = content as Record<string, unknown>;
+      blockData.content = Object.keys(rows)
+        .sort()
+        .map((key) => rows[key]);
+    }
+  }
+}
+
+/**
+ * Reads a single chapter's content document via the Firestore REST API. The
+ * `chapters` rule allows unauthenticated reads only when `isPublic == true`, so a
+ * successful read here means the chapter is public and safe to server-render;
+ * gated chapters return 403 and this resolves to `null`. Doc-id mapping mirrors
+ * the client `useFetchAndCache` hook.
+ */
+export async function getChapterContent(
+  slug: string,
+  unitParam: string,
+  idParam: string,
+): Promise<ChapterContent | null> {
+  try {
+    const unitId = unitParam.split("-").at(-1);
+    const chapterId = idParam.split("-").slice(0, 2).join("-");
+    if (!unitId || !chapterId) return null;
+
+    const res = await fetch(
+      `${BASE}/subjects/${slug}/units/${unitId}/chapters/${chapterId}?key=${API_KEY}`,
+      { next: { revalidate: REVALIDATE_SECONDS } },
+    );
+    if (!res.ok) return null;
+
+    const doc = (await res.json()) as RestDocument;
+    const fields = parseFields(doc.fields ?? {});
+    const data = fields.data as OutputData | undefined;
+    if (!data || !Array.isArray(data.blocks)) return null;
+
+    revertTableBlocks(data);
+
+    return {
+      data,
+      author: typeof fields.author === "string" ? fields.author : "",
+      displayName:
+        typeof fields.displayName === "string" ? fields.displayName : "",
+      title: typeof fields.title === "string" ? fields.title : "",
+    };
+  } catch {
+    return null;
+  }
+}
\ No newline at end of file

From 57ca3a0501316440eb09fd84b7fd34cc9852287a Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Wed, 17 Jun 2026 19:01:07 -0700
Subject: [PATCH 37/49] git issues

---
 .../chapter/[id]/[title]/ChapterClient.tsx    |  97 +++++++
 .../chapter/[id]/[title]/ChapterScaffold.tsx  | 160 +++++++++++
 .../article-creator/QuestionsHydrator.tsx     |  77 +++++
 .../article-creator/editorjs-render.ts        | 263 ++++++++++++++++++
 4 files changed, 597 insertions(+)
 create mode 100644 src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx
 create mode 100644 src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx
 create mode 100644 src/components/article-creator/QuestionsHydrator.tsx
 create mode 100644 src/components/article-creator/editorjs-render.ts

diff --git a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx
new file mode 100644
index 00000000..5f3801ce
--- /dev/null
+++ b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx
@@ -0,0 +1,97 @@
+"use client";
+import Renderer from "@/components/article-creator/Renderer";
+import { useFetchAndCache } from "./useFetchAndCache";
+import ChapterScaffold from "./ChapterScaffold";
+import "katex/dist/katex.min.css";
+import { useUser } from "@/components/hooks/UserContext";
+import Link from "next/link";
+import { useEffect } from "react";
+
+/**
+ * Client-side chapter renderer for gated (non-public) chapters: it fetches the
+ * content through Firestore with the signed-in user's auth, so members/admins can
+ * preview WIP chapters. Public chapters are server-rendered by `page.tsx` and
+ * never reach this component.
+ */
+const ChapterClient = ({
+  params,
+}: {
+  params: { slug: string; unit: string; id: string };
+}) => {
+  const { user } = useUser();
+  const { subject, content, loading, error } = useFetchAndCache(
+    params,
+    user?.access === "admin" || user?.access === "member",
+  );
+
+  useEffect(() => {
+    if (subject && content) {
+      const unitIndex = Number(params.unit.split("-")[1]) - 1;
+      const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
+        (ch) => ch.id === params.id,
+      );
+      const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
+
+      document.title = `FiveHive - ${subject.title} ${unitIndex + 1}.${chapterIndex + 1} - ${chapter?.title}`;
+    }
+  }, [subject, content, params.unit, params.id]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen grow items-center justify-center text-2xl">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="grid min-h-screen grow place-content-center text-xl">
+        <p>
+          {error}
+          <br />
+          Return to{" "}
+          <Link
+            href={`/subject/${params.slug}`}
+            className="text-blue-600 hover:underline"
+          >
+            subject homepage
+          </Link>
+          .
+        </p>
+      </div>
+    );
+  }
+
+  if (subject && content) {
+    const unitIndex = Number(params.unit.split("-")[1]) - 1;
+    const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
+      (ch) => ch.id === params.id,
+    );
+    const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
+    const unitTitle = subject.units[unitIndex]?.title;
+
+    if (!unitTitle || !chapter) {
+      return <div>Error: Unit or chapter not found.</div>;
+    }
+
+    return (
+      <ChapterScaffold
+        subjectTitle={subject.title}
+        units={subject.units}
+        unitIndex={unitIndex}
+        chapterIndex={chapterIndex}
+        unitTitle={unitTitle}
+        chapterTitle={chapter.title}
+        chapterId={params.id}
+        author={content.author}
+      >
+        <Renderer content={content.data} />
+      </ChapterScaffold>
+    );
+  }
+
+  return null;
+};
+
+export default ChapterClient;
diff --git a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx
new file mode 100644
index 00000000..eab96e6e
--- /dev/null
+++ b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx
@@ -0,0 +1,160 @@
+import Footer from "@/components/global/footer";
+import Navbar from "@/components/global/navbar";
+import SubjectBreadcrumb from "@/components/subject/subject-breadcrumb";
+import ProgressTracker from "@/components/subject/progress-tracker";
+import Link from "next/link";
+import type { Unit } from "@/types/firestore";
+import { buttonVariants } from "@/components/ui/button";
+import { cn, formatSlug } from "@/lib/utils";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+/**
+ * Presentational chapter shell shared by the public (server-rendered) and gated
+ * (client) paths so the two never drift. Has no data fetching or hooks of its
+ * own; the body — server-rendered article or client `Renderer` — is passed as
+ * `children`. `Navbar`/`ProgressTracker` are client components rendered within.
+ */
+export default function ChapterScaffold({
+  subjectTitle,
+  units,
+  unitIndex,
+  chapterIndex,
+  unitTitle,
+  chapterTitle,
+  chapterId,
+  author,
+  children,
+}: {
+  subjectTitle: string;
+  units: Unit[];
+  unitIndex: number;
+  chapterIndex: number;
+  unitTitle: string;
+  chapterTitle: string;
+  chapterId: string;
+  author: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative flex grow flex-col">
+      <Navbar hideLinks />
+
+      <div className="relative mt-8 flex justify-between gap-x-16 px-10 lg:mt-16 xl:px-20">
+        <div className="flex grow flex-col items-center">
+          <SubjectBreadcrumb
+            locations={[subjectTitle, unitTitle, chapterTitle]}
+          />
+
+          <h1 className="my-2 text-balance text-center text-5xl font-extrabold">
+            {unitIndex + 1}.{chapterIndex + 1} - {chapterTitle}
+          </h1>
+          <p>{author}</p>
+          <div className="my-4">
+            <ProgressTracker chapterId={chapterId} />
+          </div>
+
+          {children}
+        </div>
+      </div>
+      <div className="mt-auto flex justify-center">
+        <div className="flex max-w-[65ch] grow gap-3 pt-6">
+          <PreviousArticle
+            subjectTitle={subjectTitle}
+            units={units}
+            unitIndex={unitIndex}
+            chapterIndex={chapterIndex}
+          />
+          <NextArticle
+            subjectTitle={subjectTitle}
+            units={units}
+            unitIndex={unitIndex}
+            chapterIndex={chapterIndex}
+          />
+        </div>
+      </div>
+
+      <Footer className="mx-0 w-full max-w-none px-10 xl:px-20" />
+    </div>
+  );
+}
+
+function PreviousArticle({
+  subjectTitle,
+  units,
+  unitIndex,
+  chapterIndex,
+}: {
+  subjectTitle: string;
+  units: Unit[];
+  unitIndex: number;
+  chapterIndex: number;
+}) {
+  let unit = units[unitIndex];
+  let newUnitIndex = unitIndex;
+  let newChapterIndex = chapterIndex;
+
+  if (chapterIndex <= 0) {
+    if (unitIndex <= 0) return null;
+    newUnitIndex -= 1;
+    unit = units[newUnitIndex];
+    if (!unit?.chapters) return null;
+    newChapterIndex = unit.chapters.length - 1;
+  } else {
+    newChapterIndex -= 1;
+  }
+
+  if (!unit) return null;
+
+  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
+
+  return (
+    <Link
+      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
+      className={cn(buttonVariants({ variant: "outline" }), "gap-2")}
+    >
+      <ArrowLeft />
+      Previous Chapter
+    </Link>
+  );
+}
+
+function NextArticle({
+  subjectTitle,
+  units,
+  unitIndex,
+  chapterIndex,
+}: {
+  subjectTitle: string;
+  units: Unit[];
+  unitIndex: number;
+  chapterIndex: number;
+}) {
+  let unit = units[unitIndex];
+  let newUnitIndex = unitIndex;
+  let newChapterIndex = chapterIndex;
+
+  if (!unit?.chapters) return null;
+
+  if (chapterIndex >= unit.chapters.length - 1) {
+    if (unitIndex >= units.length - 1) return null;
+    newUnitIndex += 1;
+    unit = units[newUnitIndex];
+    newChapterIndex = 0;
+  } else {
+    newChapterIndex += 1;
+  }
+
+  if (!unit) return null;
+
+  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
+
+  return (
+    <Link
+      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
+      className={cn(buttonVariants({ variant: "outline" }), "ml-auto gap-2")}
+    >
+      Next Chapter
+      <ArrowRight />
+    </Link>
+  );
+}
diff --git a/src/components/article-creator/QuestionsHydrator.tsx b/src/components/article-creator/QuestionsHydrator.tsx
new file mode 100644
index 00000000..985d00c2
--- /dev/null
+++ b/src/components/article-creator/QuestionsHydrator.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import type { OutputData } from "@editorjs/editorjs";
+import { useEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QuestionsOutput } from "./custom_questions/QuestionInstance";
+import type { QuestionFormat } from "@/types/questions";
+
+const rootMap = new Map<Element, Root>();
+
+/**
+ * Hydrates the interactive question cards inside server- or client-rendered
+ * chapter markup. The markup (from `renderEditorJsToHtml`) emits an empty
+ * `.questions-block-<instanceId>` placeholder for every `questionsAddCard` block;
+ * this component finds each placeholder in the DOM, seeds the question data into
+ * `localStorage` (the contract `QuestionsOutput` reads from), and mounts a React
+ * root into it. Renders nothing itself.
+ *
+ * `containerId` scopes the placeholder lookup to a single article so multiple
+ * renderers on a page don't clobber each other.
+ */
+export default function QuestionsHydrator({
+  content,
+  containerId,
+}: {
+  content: OutputData;
+  containerId: string;
+}) {
+  useEffect(() => {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    const instanceIdsLoaded = new Set<string>();
+
+    content.blocks.forEach((block) => {
+      /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
+      if (block.type !== "questionsAddCard") return;
+
+      const instanceId = block.data.instanceId as string;
+      const storageKey = `questions_${instanceId}`;
+
+      if (!instanceIdsLoaded.has(instanceId)) {
+        const questionsFromDb: QuestionFormat[] = (
+          block.data.questions as QuestionFormat[]
+        ).map((questionInstance) => ({
+          ...questionInstance,
+          questionInstance: questionInstance.question || { value: "" },
+          options: questionInstance.options.map((option) => ({
+            ...option,
+            value: option.value || { value: "" },
+          })),
+          answers: questionInstance.answers || [],
+          explanation: questionInstance.explanation || { value: "" },
+        }));
+
+        localStorage.setItem(storageKey, JSON.stringify(questionsFromDb));
+        window.dispatchEvent(new Event("questionsUpdated"));
+        instanceIdsLoaded.add(instanceId);
+      }
+
+      const placeholder = container.querySelector(
+        `.questions-block-${instanceId}`,
+      );
+      if (placeholder) {
+        let root = rootMap.get(placeholder);
+        if (!root) {
+          root = createRoot(placeholder);
+          rootMap.set(placeholder, root);
+        }
+        root.render(<QuestionsOutput instanceId={instanceId.toString()} />);
+      }
+      /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
+    });
+  }, [content, containerId]);
+
+  return null;
+}
diff --git a/src/components/article-creator/editorjs-render.ts b/src/components/article-creator/editorjs-render.ts
new file mode 100644
index 00000000..6a1d772d
--- /dev/null
+++ b/src/components/article-creator/editorjs-render.ts
@@ -0,0 +1,263 @@
+import type { OutputData } from "@editorjs/editorjs";
+import type { BlockData, Config } from "editorjs-parser";
+import edjsParser from "editorjs-parser";
+import { decode } from "html-entities";
+import katex from "katex";
+import "katex/contrib/mhchem";
+import hljs from "highlight.js";
+import "@/styles/highlightjs.css";
+import type { QuestionFormat } from "@/types/questions";
+import "@/styles/katexStyling.css";
+import styles from "./Renderer.module.css";
+
+// DOM-free entity decoder so this module can run during server rendering.
+// Previously this used `document.createElement("textarea")`, which kept the
+// whole renderer client-only. `html-entities` decodes named + numeric entities
+// without a DOM.
+export function decodeEntities(str: string): string {
+  return decode(str);
+}
+
+export const katexMacros = {
+  "\\unit": "\\,\\mathrm{#1}",
+  "\\qty": "#1\\,\\mathrm{#2}",
+};
+
+// derived from advancedtextbox
+function parseLatex(text: string): string {
+  const decoded = decodeEntities(text);
+
+  return decoded
+    .split(/(\$@[^$]+\$)/g)
+    .map((part) => {
+      if (/^\$@[^$]+\$$/.test(part)) {
+        const expr = part.slice(2, -1);
+        return katex.renderToString(expr, {
+          throwOnError: false,
+          output: "html",
+          macros: katexMacros,
+        });
+      }
+      return part;
+    })
+    .join("");
+}
+
+const customParsers: Record<
+  string,
+  (data: BlockData, _config: Config) => string
+> = {
+  alert: (data, _config) => {
+    const { align, message, type } = data as {
+      align: string;
+      message: string;
+      type: string;
+    };
+    return `<div class="cdx-alert cdx-alert-align-${align} cdx-alert-${type}">
+      <div class="cdx-alert__message" contenteditable="true" data-placeholder="Type here..." data-empty="false">
+        ${message}
+      </div>
+    </div>`;
+  },
+
+  code: (data, _config) => {
+    const { code } = data as { code: string };
+    const highlighted = hljs.highlightAuto(code).value;
+    return `<pre class="code"><code>${highlighted}</code></pre>`;
+  },
+
+  delimiter: (_data, _config) => {
+    return "<hr />";
+  },
+
+  embed: (data, _config) => {
+    const { caption, regex, embed, source, height, width } = data as {
+      caption: string;
+      regex: string;
+      embed: string;
+      source: string;
+      height: number;
+      width: number;
+    };
+    return `<div class="cdx-block embed-tool">
+      <preloader class="embed-tool__preloader">
+        <div class="embed-tool__url">${source}</div>
+      </preloader>
+      <iframe class="rounded-lg w-full" height="${height}" width="${width}" style="margin: 0 auto;" frameborder="0" scrolling="no" allowtransparency="true" src="${embed}" class="embed-tool__content"></iframe>
+      <figcaption class="fig-cap">${caption}</figcaption>
+    </div>`;
+  },
+
+  math: (data, _config) => {
+    const { text } = data as { text: string };
+    return katex.renderToString(text, {
+      output: "html",
+      throwOnError: true,
+      displayMode: true,
+      macros: katexMacros,
+    });
+  },
+
+  paragraph: (data, _config) => {
+    const { text } = data as { text: string };
+    const parsedText = parseLatex(text);
+    return `<p class="paragraph">${parsedText}</p>`;
+  },
+
+  header: (data, _config) => {
+    const { text, level } = data as { text: string; level: number };
+    const lvl = Math.min(Math.max(level || 1, 1), 6);
+    const parsedText = parseLatex(text);
+    return `<h${lvl}>${parsedText}</h${lvl}>`;
+  },
+
+  quote: (data, _config) => {
+    const { alignment, caption, text } = data as {
+      alignment: string;
+      caption: string;
+      text: string;
+    };
+    return `<blockquote>
+      <p class="mb-3">${text}</p>
+      <cite>${caption}</cite>
+    </blockquote>`;
+  },
+
+  table: (data, _config) => {
+    const { withHeadings, content } = data as {
+      withHeadings: boolean;
+      content: string[][];
+    };
+    if (content.length === 0) {
+      return "<table></table>";
+    }
+    const rows = content.map((row, index) => {
+      if (withHeadings && index === 0) {
+        return `<tr class="divide-x-[1px]">${row.reduce(
+          (acc, cell) => acc + `<th>${cell}</th>`,
+          "",
+        )}</tr>`;
+      }
+
+      // For other rows, use <td> tags
+      return `<tr class="divide-x-[1px]">${row.reduce(
+        (acc, cell) => acc + `<td>${cell}</td>`,
+        "",
+      )}</tr>`;
+    });
+    const thead = withHeadings ? `<thead>${rows.shift()}</thead>` : "";
+    const tbody = `<tbody>${rows.join("")}</tbody>`;
+
+    return `<table>${thead}${tbody}</table>`;
+  },
+
+  list: (data, _config) => {
+    const { style, items, meta } = data;
+
+    const renderItems = (items: typeof data.items, depth = 0): string => {
+      if (!items || items.length === 0) return "";
+
+      if (style === "checklist") {
+        return `<div class="checklist depth-${depth}">
+        ${items
+          .map((item) => {
+            const checked =
+              ("checked" in item.meta && item.meta?.checked) ?? false;
+            const nested = renderItems(item.items, depth + 1);
+            return `<div class="checklist-item">
+              <label>
+                <input type="checkbox" ${checked ? "checked" : ""} />
+                <span>${parseLatex(item.content)}</span>
+              </label>
+              ${nested}
+            </div>`;
+          })
+          .join("")}
+        </div>`;
+      }
+
+      const tag = style === "ordered" ? "ol" : "ul";
+
+      // const startAttr = meta?.start ? ` start="${meta.start}"` : "";
+
+      // const typeAttr = meta?.counterType
+      //   ? ` style="--list-counter-type: ${meta.counterType};"`
+      //   : "";
+
+      return `
+      <${tag} class="depth-${depth}" style="counter-reset: item ${meta?.start ? meta.start - 1 || 1 : ""}; ${meta?.counterType ? `--list-counter-type: ${meta.counterType};` : ""}">
+      ${items
+        .map(
+          (item) =>
+            `<li>
+              ${parseLatex(item.content)}
+              ${renderItems(item.items, depth + 1)}
+            </li>`,
+        )
+        .join("")}
+      </${tag}>`;
+    };
+
+    return `<div class="${styles.list}">${renderItems(items)}</div>`;
+  },
+
+  questionsAddCard: (data, _config) => {
+    const { instanceId } = data as {
+      instanceId: string;
+      content: QuestionFormat;
+    };
+    return `<div class="questions-block-${instanceId}"></div>`;
+  },
+
+  image: (data, _config) => {
+    // SVGs (viewBox only) collapse or render at the 300x150 replaced-element
+    // default unless given a definite width, so tag them for the .img-svg rule.
+    const storageRefPath = data.file?.storageRefFullPath;
+    const storagePath =
+      typeof storageRefPath === "string" ? storageRefPath : "";
+    const isSvg =
+      storagePath.toLowerCase().endsWith(".svg") ||
+      (typeof data.url === "string" && data.url.toLowerCase().includes(".svg"));
+    const imageConditions = `${data.stretched ? "img-fullwidth" : ""} ${
+      data.withBorder ? "img-border" : ""
+    } ${data.withBackground ? "img-bg" : ""} ${data.centerImage ? "img-center" : ""} ${isSvg ? "img-svg" : ""}`;
+    const imgClass = _config.image.imgClass ?? "";
+    let imageSrc;
+
+    if (data.url) {
+      // simple-image was used and the image probably is not uploaded to this server
+      // therefore, we use the absolute path provided in data.url
+      // so, _config.image.path property is useless in this case!
+      imageSrc = data.url;
+    } else if (_config.image.path === "absolute") {
+      imageSrc = data.file?.url;
+    } else {
+      imageSrc = _config.image.path?.replace(
+        /<(.+)>/,
+        (match, p1: string) => data.file?.[p1] ?? "",
+      );
+    }
+
+    if (_config.image.use === "img") {
+      return `<img class="${imageConditions} ${imgClass}" src="${imageSrc}" alt="${data.caption}">`;
+    } else if (_config.image.use === "figure") {
+      const figureClass = _config.image.figureClass ?? "";
+      const figCapClass = _config.image.figCapClass ?? "";
+
+      return `<figure class="${figureClass}"><img class="${imgClass} ${imageConditions}" src="${imageSrc}" alt="${data.caption}"><figcaption class="${figCapClass}">${data.caption}</figcaption></figure>`;
+    }
+    return "ERROR DISPLAYING IMAGE";
+  },
+};
+
+/**
+ * Parses EditorJS `OutputData` into an HTML string. Pure and DOM-free, so it runs
+ * both server-side (public chapter SSR) and client-side (gated chapters via
+ * `Renderer`). Question cards render as empty `.questions-block-<id>` placeholders
+ * that `QuestionsHydrator` mounts interactive components into on the client.
+ */
+export function renderEditorJsToHtml(content: OutputData): string {
+  const parser = new edjsParser(undefined, customParsers);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  return parser.parse(content);
+}

From 103838a79b46549a5fbe67f184a8f5ea87edf0f6 Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Wed, 17 Jun 2026 20:50:05 -0700
Subject: [PATCH 38/49] fix build error

---
 src/app/auth/action/page.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/auth/action/page.tsx b/src/app/auth/action/page.tsx
index d7b29fb7..5cd2d2ea 100644
--- a/src/app/auth/action/page.tsx
+++ b/src/app/auth/action/page.tsx
@@ -1,16 +1,19 @@
-'use client';
+"use client";
 
 import PasswordResetPage from "@/components/auth/ResetPassword";
 import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 // If you want this to take effect on your local app, you have to go to firebase -> auth -> templates -> edit -> customize action url -> "http://localhost:<port>/auth/action"
-export default function ActionPage() {
+function ActionPageContent() {
   const searchParams = useSearchParams() ?? new URLSearchParams();
   const mode = searchParams.get("mode");
 
   const code = searchParams.get("oobCode");
   if (!code) {
-    alert("Need an oobCode to access this page. If you don't know what that means just leave the page");
+    alert(
+      "Need an oobCode to access this page. If you don't know what that means just leave the page",
+    );
     return;
   }
 
@@ -25,3 +28,11 @@ export default function ActionPage() {
       );
   }
 }
+
+export default function ActionPage() {
+  return (
+    <Suspense>
+      <ActionPageContent />
+    </Suspense>
+  );
+}

From 03893494c7e975d97092fc2dde3de015de5d7e1a Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 18 Jun 2026 09:00:20 -0700
Subject: [PATCH 39/49] update rules so only member and admin can read and list

---
 firestore.rules | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 24d909bc..4d074ea0 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -101,8 +101,8 @@ service cloud.firestore {
     }
 
     match /feedback/{feedbackId} {
-      allow read: if true;
-      allow list: if true;
+      allow read: if isMemberOrAdmin;
+      allow list: if isMemberOrAdmin;
       allow get: if isMemberOrAdmin();
       allow update, delete: if isMemberOrAdmin();
     }

From 341209ce985c7233eed031802c9ef4e3dc82dabb Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 18 Jun 2026 09:13:53 -0700
Subject: [PATCH 40/49] use marked with dompurify

---
 package-lock.json                             | 44 +++++++++---
 package.json                                  |  2 +
 .../feedback/[slug]/FeedbackDetailsClient.tsx | 72 ++-----------------
 3 files changed, 40 insertions(+), 78 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 851bbd67..0103dc5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@types/katex": "^0.16.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "dompurify": "^3.4.11",
         "dotenv": "^16.4.5",
         "editorjs-alert": "^1.1.4",
         "editorjs-latex": "^1.0.5",
@@ -47,6 +48,7 @@
         "highlight.js": "^11.10.0",
         "katex": "^0.16.11",
         "lucide-react": "^0.525.0",
+        "marked": "^18.0.5",
         "next": "^14.2.5",
         "next-themes": "^0.4.4",
         "obscenity": "^0.4.3",
@@ -2720,8 +2722,7 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
@@ -4552,11 +4553,10 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
-      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+      "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
       "license": "(MPL-2.0 OR Apache-2.0)",
-      "peer": true,
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
@@ -7658,16 +7658,15 @@
       "license": "ISC"
     },
     "node_modules/marked": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
-      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.5.tgz",
+      "integrity": "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">= 20"
       }
     },
     "node_modules/math-intrinsics": {
@@ -7816,6 +7815,29 @@
         "marked": "14.0.0"
       }
     },
+    "node_modules/monaco-editor/node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/morgan": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
diff --git a/package.json b/package.json
index e180b510..9ba74ca1 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@types/katex": "^0.16.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.11",
     "dotenv": "^16.4.5",
     "editorjs-alert": "^1.1.4",
     "editorjs-latex": "^1.0.5",
@@ -50,6 +51,7 @@
     "highlight.js": "^11.10.0",
     "katex": "^0.16.11",
     "lucide-react": "^0.525.0",
+    "marked": "^18.0.5",
     "next": "^14.2.5",
     "next-themes": "^0.4.4",
     "obscenity": "^0.4.3",
diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
index fdf103ab..3753ffc8 100644
--- a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { db } from '@/lib/firebase';
 import { doc, getDoc, updateDoc, setDoc } from 'firebase/firestore';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
 
 interface FeedbackDetailsClientProps {
   slug: string;
@@ -17,73 +19,9 @@ interface FeedbackDetailsClientProps {
 
 function parseMarkdown(text: string): string {
   if (!text) return '';
-
-  // 1. Escape HTML to prevent XSS
-  let escaped = text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-
-  // 2. Inline styling (Bold, Italics, Code, Links)
-  escaped = escaped.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-  escaped = escaped.replace(/__(.*?)__/g, '<strong>$1</strong>');
-  escaped = escaped.replace(/\*(.*?)\*/g, '<em>$1</em>');
-  escaped = escaped.replace(/_(.*?)_/g, '<em>$1</em>');
-  escaped = escaped.replace(/`(.*?)`/g, '<code class="bg-gray-100 text-red-600 px-1.5 py-0.5 rounded font-mono text-xs border">$1</code>');
-  escaped = escaped.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" class="text-yellow-600 hover:underline" target="_blank" rel="noopener noreferrer">$1</a>');
-
-  // 3. Block elements (headers, lists, paragraphs)
-  const lines = escaped.split(/\r?\n/);
-  const result: string[] = [];
-  let inList = false;
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line === undefined) continue;
-    const trimmed = line.trim();
-
-    // Check for headers
-    const h3Match = line.match(/^### (.*)$/);
-    const h2Match = line.match(/^## (.*)$/);
-    const h1Match = line.match(/^# (.*)$/);
-
-    if (h3Match) {
-      if (inList) { result.push('</ul>'); inList = false; }
-      result.push(`<h5 class="text-sm font-bold mt-2 mb-1 text-gray-900">${h3Match[1]}</h5>`);
-    } else if (h2Match) {
-      if (inList) { result.push('</ul>'); inList = false; }
-      result.push(`<h4 class="text-base font-bold mt-3 mb-1 text-gray-900">${h2Match[1]}</h4>`);
-    } else if (h1Match) {
-      if (inList) { result.push('</ul>'); inList = false; }
-      result.push(`<h3 class="text-lg font-bold mt-4 mb-2 text-gray-900">${h1Match[1]}</h3>`);
-    } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
-      const content = trimmed.substring(2);
-      if (!inList) {
-        result.push('<ul class="list-disc pl-5 my-2 space-y-1 text-gray-800">');
-        inList = true;
-      }
-      result.push(`<li>${content}</li>`);
-    } else {
-      if (inList) {
-        result.push('</ul>');
-        inList = false;
-      }
-      // Empty line or regular line
-      if (trimmed === '') {
-        result.push('<br />');
-      } else {
-        result.push(`<div>${line}</div>`);
-      }
-    }
-  }
-
-  if (inList) {
-    result.push('</ul>');
-  }
-
-  return result.join('');
+  // Convert markdown to HTML using marked and sanitize with DOMPurify
+  const rawHtml = marked.parse(text) as string;
+  return DOMPurify.sanitize(rawHtml);
 }
 
 interface FeedbackItem {

From b1053ac35772eb6ca271492b269999a0a1d7abf6 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 18 Jun 2026 09:15:49 -0700
Subject: [PATCH 41/49] remove parse

---
 src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
index 3753ffc8..905bd0e4 100644
--- a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -19,8 +19,7 @@ interface FeedbackDetailsClientProps {
 
 function parseMarkdown(text: string): string {
   if (!text) return '';
-  // Convert markdown to HTML using marked and sanitize with DOMPurify
-  const rawHtml = marked.parse(text) as string;
+  const rawHtml = marked(text) as string;
   return DOMPurify.sanitize(rawHtml);
 }
 

From b8745a6cc64af1ee1ebc320ac841040eeb3e2e9c Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 18 Jun 2026 09:20:08 -0700
Subject: [PATCH 42/49] fix setLoading calls

---
 src/app/admin/feedback/page.tsx | 77 +++++++++++++++------------------
 1 file changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
index 254434aa..0a8c1509 100644
--- a/src/app/admin/feedback/page.tsx
+++ b/src/app/admin/feedback/page.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { db } from '@/lib/firebase';
 import { collection, getDocs, query, orderBy, doc, updateDoc } from 'firebase/firestore';
 import { buttonVariants } from "@/components/ui/button";
-import {ArrowLeft, Loader2} from "lucide-react";
+import { ArrowLeft, Loader2 } from "lucide-react";
 import { useRouter } from 'next/navigation';
 
 export default function AdminFeedbackDashboard() {
@@ -19,21 +19,21 @@ export default function AdminFeedbackDashboard() {
     e.stopPropagation();
     setArchivingIds(prev => [...prev, itemId]);
     try {
-        const docRef = doc(db, 'feedback', itemId);
-        const nextStatus = !item.isResolved;
-        await updateDoc(docRef, { isResolved: nextStatus });
+      const docRef = doc(db, 'feedback', itemId);
+      const nextStatus = !item.isResolved;
+      await updateDoc(docRef, { isResolved: nextStatus });
 
-        setFeedbackItems(prevItems =>
+      setFeedbackItems(prevItems =>
         prevItems.map(item =>
-            item.id === itemId ? { ...item, isResolved: nextStatus } : item
+          item.id === itemId ? { ...item, isResolved: nextStatus } : item
         )
-        );   
+      );
     }
     catch (error) {
-        console.error("Error archiving item:", error);
+      console.error("Error archiving item:", error);
     }
     finally {
-        setArchivingIds(prev => prev.filter(id => id !== item.id));
+      setArchivingIds(prev => prev.filter(id => id !== item.id));
     }
   };
 
@@ -55,7 +55,6 @@ export default function AdminFeedbackDashboard() {
       } catch (error) {
         console.error("Error fetching feedback:", error);
       } finally {
-        setLoading(setLoading(false) as any); // safe fallback state handling
         setLoading(false);
       }
     };
@@ -75,34 +74,32 @@ export default function AdminFeedbackDashboard() {
         Return to Admin Dashboard
       </Link>
       <h1 className="text-3xl font-bold mb-6 mt-6 text-gray-900">Feedback/Bug Reports</h1>
-      
+
       <div className="flex border-b border-gray-200 mb-6">
         <button
           onClick={() => setActiveTab('active')}
-          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${
-            activeTab === 'active'
-              ? 'border-yellow-600 text-yellow-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-          }`}
+          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${activeTab === 'active'
+            ? 'border-yellow-600 text-yellow-600'
+            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
         >
           Active Reports ({activeItems.length})
         </button>
         <button
           onClick={() => setActiveTab('resolved')}
-          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${
-            activeTab === 'resolved'
-              ? 'border-yellow-600 text-yellow-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-          }`}
+          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${activeTab === 'resolved'
+            ? 'border-yellow-600 text-yellow-600'
+            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
         >
           Resolved ({resolvedItems.length})
         </button>
       </div>
       {displayedItems.length === 0 ? (
         <p className="text-gray-500">
-            {activeTab === 'active' ? 'No active feedback submissions found.' : 'No resolved submissions found yet.'}
+          {activeTab === 'active' ? 'No active feedback submissions found.' : 'No resolved submissions found yet.'}
         </p>
-      ): (
+      ) : (
         <div className="overflow-x-auto border rounded-lg shadow-sm bg-white">
           <table className="min-w-full divide-y divide-gray-200 text-left text-sm">
             <thead className="bg-gray-50 text-gray-700 uppercase font-semibold text-xs tracking-wider">
@@ -118,10 +115,9 @@ export default function AdminFeedbackDashboard() {
               {displayedItems.map((item) => (
                 <tr key={item.id} onClick={() => router.push(`/admin/feedback/${item.id}`)} className="hover:bg-gray-50 transition-colors">
                   <td className="p-4 whitespace-nowrap">
-                    <span className={`px-2 py-1 rounded text-xs font-semibold uppercase ${
-                      item.type === 'bug' ? 'bg-red-100 text-red-800' : 
+                    <span className={`px-2 py-1 rounded text-xs font-semibold uppercase ${item.type === 'bug' ? 'bg-red-100 text-red-800' :
                       item.type === 'questions' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'
-                    }`}>
+                      }`}>
                       {item.type}
                     </span>
                   </td>
@@ -133,33 +129,32 @@ export default function AdminFeedbackDashboard() {
                   </td>
                   <td className="p-4 text-gray-500">{item.email}</td>
                   <td className="p-4 text-gray-500 whitespace-nowrap">
-                    {item.createdAt?.seconds 
+                    {item.createdAt?.seconds
                       ? new Date(item.createdAt.seconds * 1000).toLocaleDateString()
                       : new Date().toLocaleDateString()
                     }
                   </td>
                   <td className="p-4" onClick={(e) => e.stopPropagation()}>
-                    <button 
-                        onClick={(e) => handleResolve(e, item.id, item)} 
-                        disabled={archivingIds.includes(item.id)}
-                        className={`inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium transition-colors ${
-                        item.isResolved 
-                            ? 'bg-green-100 hover:bg-green-200 text-green-800' 
-                            : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                    <button
+                      onClick={(e) => handleResolve(e, item.id, item)}
+                      disabled={archivingIds.includes(item.id)}
+                      className={`inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium transition-colors ${item.isResolved
+                        ? 'bg-green-100 hover:bg-green-200 text-green-800'
+                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                         }`}
                     >
-                        {archivingIds.includes(item.id) ? (
+                      {archivingIds.includes(item.id) ? (
                         <>
-                            <Loader2 className="h-3 w-3 animate-spin" />
-                            Updating...
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                          Updating...
                         </>
-                        ) : item.isResolved ? (
+                      ) : item.isResolved ? (
                         "Unresolve"
-                        ) : (
+                      ) : (
                         "Resolve"
-                        )}
+                      )}
                     </button>
-                    </td>
+                  </td>
 
                 </tr>
               ))}

From 9b8ceaa6904b96985252a3afe3e323bdbcad9ef8 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 18 Jun 2026 09:28:03 -0700
Subject: [PATCH 43/49] store url instead of base64

---
 src/app/feedback/page.tsx | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 1cc75342..882924a7 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { storage } from '@/lib/firebase';
 import { db } from '@/lib/firebase';
-import { ref, uploadString, getDownloadURL } from 'firebase/storage';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import { collection, addDoc, serverTimestamp, Timestamp } from 'firebase/firestore';
 
 export default function FeedbackPage() {
@@ -17,7 +17,7 @@ export default function FeedbackPage() {
   // New bug-specific states matching your images
   const [bugType, setBugType] = useState('Website Article Errors');
   const [bugUrl, setBugUrl] = useState('');
-  const [attachedImage, setAttachedImage] = useState('');
+  const [attachedImage, setAttachedImage] = useState<File | null>(null);
   const [featureContextUrl, setFeatureContextUrl] = useState('');
   const [message, setMessage] = useState('');
   const [email, setEmail] = useState('');
@@ -27,13 +27,9 @@ export default function FeedbackPage() {
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setAttachedImage(reader.result as string);
-      };
-      reader.readAsDataURL(file);
+      setAttachedImage(file);
     } else {
-      setAttachedImage('');
+      setAttachedImage(null);
     }
   };
 
@@ -74,9 +70,6 @@ export default function FeedbackPage() {
       if (type === 'bug') {
         feedbackPayload.bugType = bugType;
         feedbackPayload.bugUrl = bugUrl || 'N/A';
-        if (attachedImage) {
-          feedbackPayload.attachedImage = attachedImage;
-        }
       }
       // Add feature request specific fields
       if (type === 'feature') {
@@ -87,13 +80,13 @@ export default function FeedbackPage() {
       }
 
       // If an image was attached, upload it to Firebase Storage first
-      let imageURL = '';
       if (attachedImage && type !== 'general') {
-        const imageRef = ref(storage, `feedbackImages/${Date.now()}`);
-        await uploadString(imageRef, attachedImage, 'data_url');
-        imageURL = await getDownloadURL(imageRef);
-        // Include the image URL in the payload
-        feedbackPayload.attachedImage = imageURL;
+        const imageRef = ref(
+          storage,
+          `feedbackImages/${Date.now()}-${attachedImage.name}`
+        );
+        await uploadBytes(imageRef, attachedImage);
+        feedbackPayload.attachedImage = await getDownloadURL(imageRef);
       }
 
       // Add feedback document with image URL (if any) included
@@ -108,6 +101,7 @@ export default function FeedbackPage() {
       setEmail('');
       setTitle('');
       setBugUrl('');
+      setAttachedImage(null);
       setFeatureProblem('');
       setFeatureAlternatives('');
       setFeatureSolution('');
@@ -324,4 +318,4 @@ export default function FeedbackPage() {
       </form>
     </div>
   );
-}
\ No newline at end of file
+}

From 12ac71dfd569e4bb315b0692a896e66222dc9f49 Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Thu, 18 Jun 2026 09:30:30 -0700
Subject: [PATCH 44/49] check completeness on every field

---
 src/app/feedback/page.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
index 882924a7..29c99d92 100644
--- a/src/app/feedback/page.tsx
+++ b/src/app/feedback/page.tsx
@@ -36,7 +36,20 @@ export default function FeedbackPage() {
   const router = useRouter();
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!message.trim()) return;
+
+    const trimmedTitle = title.trim();
+    const trimmedMessage = message.trim();
+    const trimmedBugUrl = bugUrl.trim();
+
+    if (!trimmedTitle || !trimmedMessage) {
+      setStatus('error');
+      return;
+    }
+
+    if (type === 'bug' && !trimmedBugUrl) {
+      setStatus('error');
+      return;
+    }
 
     setStatus('loading');
     try {
@@ -60,8 +73,8 @@ export default function FeedbackPage() {
       // Build the base payload
       const feedbackPayload: NewFeedback = {
         type,
-        message,
-        title,
+        message: trimmedMessage,
+        title: trimmedTitle,
         email: email || 'anonymous',
         createdAt: serverTimestamp() as Timestamp,
       };
@@ -69,7 +82,7 @@ export default function FeedbackPage() {
       // Conditionally append the precise details if it's a bug report
       if (type === 'bug') {
         feedbackPayload.bugType = bugType;
-        feedbackPayload.bugUrl = bugUrl || 'N/A';
+        feedbackPayload.bugUrl = trimmedBugUrl;
       }
       // Add feature request specific fields
       if (type === 'feature') {

From c50e67cf391a3a38ac76e553b651ec1667d3337a Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 20 Jun 2026 16:02:58 -0700
Subject: [PATCH 45/49] v1

---
 src/app/admin/page.tsx                      |   2 +-
 src/app/admin/subject/[slug]/page.tsx       | 118 ++++++++++++++++++--
 src/app/sitemap.ts                          |   2 +-
 src/app/subject/[slug]/(sidebar)/layout.tsx |   8 +-
 src/app/subject/[slug]/(sidebar)/page.tsx   |   6 +
 src/lib/apPortingDefaults.ts                |  89 +++++++++++++++
 src/lib/search/guideSearch.ts               |   6 +-
 7 files changed, 214 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/apPortingDefaults.ts

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 14e58ffe..357e818a 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -16,7 +16,7 @@ import { doc, updateDoc } from "firebase/firestore";
 import { db } from "@/lib/firebase";
 import { Button } from "@/components/ui/button";
 
-const apClasses = apClassesData.apClasses;
+const apClasses = [...apClassesData.apClasses, "AP Porting"];
 
 const Page = () => {
   const { user } = useUser();
diff --git a/src/app/admin/subject/[slug]/page.tsx b/src/app/admin/subject/[slug]/page.tsx
index 3fb60a73..b5d25f83 100644
--- a/src/app/admin/subject/[slug]/page.tsx
+++ b/src/app/admin/subject/[slug]/page.tsx
@@ -20,6 +20,7 @@ import { cn, formatSlug } from "@/lib/utils";
 import short from "short-uuid";
 import type { Subject, Unit } from "@/types/firestore";
 import UnitComponent from "./_components/unit";
+import { DEFAULT_PORTING_SUBJECT, DEFAULT_PORTING_ARTICLES } from "@/lib/apPortingDefaults";
 
 const translator = short(short.constants.flickrBase58);
 
@@ -29,7 +30,7 @@ function generateShortId() {
   return timestamp + randomPart;
 }
 
-const apClasses = apClassesData.apClasses;
+const apClasses = [...apClassesData.apClasses, "AP Porting"];
 
 // Default empty subject structure
 const emptyData: Subject = {
@@ -68,6 +69,7 @@ export default function Page({ params }: { params: { slug: string } }) {
   const { user, error, setError, setLoading } = useUser();
   const [subjectTitle, setSubjectTitle] = useState<string>("");
   const [units, setUnits] = useState<Unit[]>([]);
+  const [resetting, setResetting] = useState<boolean>(false);
 
   const [subjectLoading, setSubjectLoading] = useState<boolean>(true);
   const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
@@ -172,6 +174,87 @@ export default function Page({ params }: { params: { slug: string } }) {
    * If you dont want this, use the commented out handleSave.
    ****************************************************/
 
+  const handleReset = async () => {
+    if (!confirm("Are you sure you want to reset the AP Porting course? This will restore all articles, MCQs, and structure to their default values and delete any custom changes you made.")) {
+      return;
+    }
+    setResetting(true);
+    try {
+      // 1. Fetch and delete existing structure/articles/tests under /subjects/porting
+      const unitsCollectionRef = collection(db, "subjects", "porting", "units");
+      const unitsSnap = await getDocs(unitsCollectionRef);
+
+      const batch = writeBatch(db);
+
+      for (const unitDoc of unitsSnap.docs) {
+        const chaptersCollectionRef = collection(db, "subjects", "porting", "units", unitDoc.id, "chapters");
+        const chaptersSnap = await getDocs(chaptersCollectionRef);
+        chaptersSnap.forEach((chapterDoc) => {
+          batch.delete(chapterDoc.ref);
+        });
+
+        const testsCollectionRef = collection(db, "subjects", "porting", "units", unitDoc.id, "tests");
+        const testsSnap = await getDocs(testsCollectionRef);
+        testsSnap.forEach((testDoc) => {
+          batch.delete(testDoc.ref);
+        });
+
+        batch.delete(unitDoc.ref);
+      }
+
+      batch.delete(doc(db, "subjects", "porting"));
+      await batch.commit();
+
+      // 2. Write defaults
+      const writeBatchObj = writeBatch(db);
+      writeBatchObj.set(doc(db, "subjects", "porting"), {
+        title: DEFAULT_PORTING_SUBJECT.title,
+        units: DEFAULT_PORTING_SUBJECT.units,
+      });
+
+      for (const unit of DEFAULT_PORTING_SUBJECT.units) {
+        const unitRef = doc(db, "subjects", "porting", "units", unit.id);
+        writeBatchObj.set(unitRef, unit);
+
+        for (const chapter of unit.chapters) {
+          const chapterRef = doc(db, "subjects", "porting", "units", unit.id, "chapters", chapter.id);
+          const defaultBlocks = DEFAULT_PORTING_ARTICLES[chapter.id];
+          writeBatchObj.set(chapterRef, {
+            id: chapter.id,
+            createdAt: new Date(),
+            author: "System Default",
+            title: `${unit.id}/chapter/${chapter.id}`,
+            data: defaultBlocks,
+            isPublic: chapter.isPublic ?? true,
+          });
+        }
+
+        if (unit.tests) {
+          for (const test of unit.tests) {
+            const testRef = doc(db, "subjects", "porting", "units", unit.id, "tests", test.id);
+            writeBatchObj.set(testRef, {
+              ...test,
+              instanceId: `porting_${unit.id}_test_${test.id}`,
+            });
+          }
+        }
+      }
+
+      await writeBatchObj.commit();
+
+      setSubjectTitle(DEFAULT_PORTING_SUBJECT.title);
+      setUnits(DEFAULT_PORTING_SUBJECT.units);
+      setUnsavedChanges(false);
+
+      alert("AP Porting course reset successfully.");
+    } catch (error) {
+      console.error("Error resetting subject:", error);
+      alert("Error resetting subject. Check console for details.");
+    } finally {
+      setResetting(false);
+    }
+  };
+
   // Replaces save
   const handleSave = async () => {
     // Rebuild the Subject object from current state
@@ -353,17 +436,28 @@ export default function Page({ params }: { params: { slug: string } }) {
               <ArrowLeft className="mr-2" />
               Return to Admin Dashboard
             </Link>
-            {(!subjectLoading || unsavedChanges) && (
-              <Button
-                className={cn(
-                  "bg-blue-500 hover:bg-blue-600",
-                  unsavedChanges && "animate-pulse",
-                )}
-                onClick={handleSave}
-              >
-                <Save className="mr-2" /> Save Changes
-              </Button>
-            )}
+            <div className="flex gap-2">
+              {params.slug === "porting" && (
+                <Button
+                  className="bg-red-500 hover:bg-red-600 text-white"
+                  onClick={handleReset}
+                  disabled={resetting}
+                >
+                  {resetting ? "Resetting..." : "Reset Course"}
+                </Button>
+              )}
+              {(!subjectLoading || unsavedChanges) && (
+                <Button
+                  className={cn(
+                    "bg-blue-500 hover:bg-blue-600",
+                    unsavedChanges && "animate-pulse",
+                  )}
+                  onClick={handleSave}
+                >
+                  <Save className="mr-2" /> Save Changes
+                </Button>
+              )}
+            </div>
           </div>
 
           {/* Subject Title */}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 0a7f68a3..170b52c4 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -20,7 +20,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     priority,
   }));
 
-  const subjects = await getAllSubjects();
+  const subjects = (await getAllSubjects()).filter((s) => s.slug !== "porting");
   const subjectRoutes: MetadataRoute.Sitemap = [];
 
   for (const subject of subjects) {
diff --git a/src/app/subject/[slug]/(sidebar)/layout.tsx b/src/app/subject/[slug]/(sidebar)/layout.tsx
index 198a1f89..dd37cfa0 100644
--- a/src/app/subject/[slug]/(sidebar)/layout.tsx
+++ b/src/app/subject/[slug]/(sidebar)/layout.tsx
@@ -24,8 +24,14 @@ export default function Layout({
   const [subject, setSubject] = useState<Subject | null>(null);
 
   useEffect(() => {
+    if (user === undefined) return;
+
     const fetchSubject = async () => {
       try {
+        const isAuthorized = user && (user.access === "admin" || user.access === "member" || user.access === "grader");
+        if (params.slug === "porting" && !isAuthorized) {
+          return;
+        }
         const docRef = doc(db, "subjects", params.slug);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
@@ -39,7 +45,7 @@ export default function Layout({
     fetchSubject().catch((error) => {
       console.error(error);
     });
-  }, [params.slug]);
+  }, [params.slug, user]);
 
   // `{children}` must always render: this layout wraps server-rendered chapter
   // pages, and short-circuiting on the client `loading`/`error` state (which is
diff --git a/src/app/subject/[slug]/(sidebar)/page.tsx b/src/app/subject/[slug]/(sidebar)/page.tsx
index 9b37c680..e41dc81b 100644
--- a/src/app/subject/[slug]/(sidebar)/page.tsx
+++ b/src/app/subject/[slug]/(sidebar)/page.tsx
@@ -23,6 +23,12 @@ const Page = ({ params }: { params: { slug: string } }) => {
   useEffect(() => {
     const fetchSubject = async () => {
       try {
+        const isAuthorized = user && (user.access === "admin" || user.access === "member" || user.access === "grader");
+        if (params.slug === "porting" && !isAuthorized) {
+          setError("Subject not found. That's probably us, not you.");
+          setLoading(false);
+          return;
+        }
         const docRef = doc(db, "subjects", params.slug);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
diff --git a/src/lib/apPortingDefaults.ts b/src/lib/apPortingDefaults.ts
new file mode 100644
index 00000000..0f21ee1f
--- /dev/null
+++ b/src/lib/apPortingDefaults.ts
@@ -0,0 +1,89 @@
+import type { Subject } from "@/types/firestore";
+import type { OutputData } from "@editorjs/editorjs";
+
+export const DEFAULT_PORTING_SUBJECT: Subject = {
+  title: "AP Porting",
+  units: [
+    {
+      id: "porting-unit-1",
+      title: "Unit 1: Porting Basics",
+      chapters: [
+        {
+          id: "porting-chap-1",
+          title: "Chapter 1: Formatting Practice",
+          isPublic: true,
+        },
+        {
+          id: "porting-chap-2",
+          title: "Chapter 2: Advanced Layouts",
+          isPublic: true,
+        }
+      ],
+      tests: [
+        {
+          id: "porting-test-1",
+          name: "Porting MCQs",
+          questions: [
+            {
+              question: { value: "What is the primary formatting syntax used on FiveHive?", files: [] },
+              type: "mcq",
+              options: [
+                { id: "opt-1", value: { value: "Markdown & EditorJS", files: [] } },
+                { id: "opt-2", value: { value: "HTML directly", files: [] } },
+                { id: "opt-3", value: { value: "PlainText", files: [] } },
+                { id: "opt-4", value: { value: "BBCode", files: [] } }
+              ],
+              answers: ["opt-1"],
+              explanation: { value: "FiveHive uses EditorJS and supporting block structures for formatting article chapters.", files: [] },
+              content: { value: "Porting uses EditorJS. Please review the options.", files: [] },
+              topic: "Porting Basics"
+            }
+          ],
+          time: 600,
+          directions: "Answer the practice questions to test your porting skills.",
+          isPublic: true
+        }
+      ]
+    }
+  ]
+};
+
+export const DEFAULT_PORTING_ARTICLES: Record<string, OutputData> = {
+  "porting-chap-1": {
+    time: Date.now(),
+    blocks: [
+      {
+        id: "block-1",
+        type: "header",
+        data: { text: "Welcome to AP Porting Practice", level: 1 },
+      },
+      {
+        id: "block-2",
+        type: "header",
+        data: { text: "Getting Started with Articles", level: 2 },
+      },
+      {
+        id: "block-3",
+        type: "paragraph",
+        data: { text: "This is a default prompt/article designed for porters to practice editing, formatting, and saving content. Try adding a new list or table!" },
+      }
+    ],
+    version: "2.30.2"
+  },
+  "porting-chap-2": {
+    time: Date.now(),
+    blocks: [
+      {
+        id: "block-a",
+        type: "header",
+        data: { text: "Advanced Layouts & Testing", level: 1 },
+      },
+      {
+        id: "block-b",
+        type: "paragraph",
+        data: { text: "You can practice complex elements like adding multiple-choice questions inline or using equations with LaTeX." },
+      }
+    ],
+    version: "2.30.2"
+  }
+};
diff --git a/src/lib/search/guideSearch.ts b/src/lib/search/guideSearch.ts
index ebbe8d89..1e7d20ae 100644
--- a/src/lib/search/guideSearch.ts
+++ b/src/lib/search/guideSearch.ts
@@ -345,8 +345,10 @@ export const loadGuideSearchItems = async (
     const subjectsSnapshot = await getDocs(collection(db, "subjects"));
 
     const itemsBySubject = await Promise.all(
-      subjectsSnapshot.docs.map(async (subjectDoc) => {
-        const subjectData = subjectDoc.data() as Subject;
+      subjectsSnapshot.docs
+        .filter((subjectDoc) => subjectDoc.id !== "porting")
+        .map(async (subjectDoc) => {
+          const subjectData = subjectDoc.data() as Subject;
         try {
           return await mapSubjectToSearchItems(subjectDoc.id, subjectData);
         } catch (error) {

From 1c38e89e3a71671eaaec8a24cfd229e48eec500d Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 20 Jun 2026 16:13:18 -0700
Subject: [PATCH 46/49] fix default course

---
 src/lib/apPortingDefaults.ts | 84 +-----------------------------------
 1 file changed, 2 insertions(+), 82 deletions(-)

diff --git a/src/lib/apPortingDefaults.ts b/src/lib/apPortingDefaults.ts
index 0f21ee1f..92cf8589 100644
--- a/src/lib/apPortingDefaults.ts
+++ b/src/lib/apPortingDefaults.ts
@@ -3,87 +3,7 @@ import type { OutputData } from "@editorjs/editorjs";
 
 export const DEFAULT_PORTING_SUBJECT: Subject = {
   title: "AP Porting",
-  units: [
-    {
-      id: "porting-unit-1",
-      title: "Unit 1: Porting Basics",
-      chapters: [
-        {
-          id: "porting-chap-1",
-          title: "Chapter 1: Formatting Practice",
-          isPublic: true,
-        },
-        {
-          id: "porting-chap-2",
-          title: "Chapter 2: Advanced Layouts",
-          isPublic: true,
-        }
-      ],
-      tests: [
-        {
-          id: "porting-test-1",
-          name: "Porting MCQs",
-          questions: [
-            {
-              question: { value: "What is the primary formatting syntax used on FiveHive?", files: [] },
-              type: "mcq",
-              options: [
-                { id: "opt-1", value: { value: "Markdown & EditorJS", files: [] } },
-                { id: "opt-2", value: { value: "HTML directly", files: [] } },
-                { id: "opt-3", value: { value: "PlainText", files: [] } },
-                { id: "opt-4", value: { value: "BBCode", files: [] } }
-              ],
-              answers: ["opt-1"],
-              explanation: { value: "FiveHive uses EditorJS and supporting block structures for formatting article chapters.", files: [] },
-              content: { value: "Porting uses EditorJS. Please review the options.", files: [] },
-              topic: "Porting Basics"
-            }
-          ],
-          time: 600,
-          directions: "Answer the practice questions to test your porting skills.",
-          isPublic: true
-        }
-      ]
-    }
-  ]
+  units: []
 };
 
-export const DEFAULT_PORTING_ARTICLES: Record<string, OutputData> = {
-  "porting-chap-1": {
-    time: Date.now(),
-    blocks: [
-      {
-        id: "block-1",
-        type: "header",
-        data: { text: "Welcome to AP Porting Practice", level: 1 },
-      },
-      {
-        id: "block-2",
-        type: "header",
-        data: { text: "Getting Started with Articles", level: 2 },
-      },
-      {
-        id: "block-3",
-        type: "paragraph",
-        data: { text: "This is a default prompt/article designed for porters to practice editing, formatting, and saving content. Try adding a new list or table!" },
-      }
-    ],
-    version: "2.30.2"
-  },
-  "porting-chap-2": {
-    time: Date.now(),
-    blocks: [
-      {
-        id: "block-a",
-        type: "header",
-        data: { text: "Advanced Layouts & Testing", level: 1 },
-      },
-      {
-        id: "block-b",
-        type: "paragraph",
-        data: { text: "You can practice complex elements like adding multiple-choice questions inline or using equations with LaTeX." },
-      }
-    ],
-    version: "2.30.2"
-  }
-};
+

From bbe210710141fc1b6293eaf8d3aa29f9f650e03d Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 20 Jun 2026 17:10:52 -0700
Subject: [PATCH 47/49] frevent build err

---
 src/app/admin/subject/[slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/admin/subject/[slug]/page.tsx b/src/app/admin/subject/[slug]/page.tsx
index b5d25f83..19aac5a0 100644
--- a/src/app/admin/subject/[slug]/page.tsx
+++ b/src/app/admin/subject/[slug]/page.tsx
@@ -20,7 +20,7 @@ import { cn, formatSlug } from "@/lib/utils";
 import short from "short-uuid";
 import type { Subject, Unit } from "@/types/firestore";
 import UnitComponent from "./_components/unit";
-import { DEFAULT_PORTING_SUBJECT, DEFAULT_PORTING_ARTICLES } from "@/lib/apPortingDefaults";
+import { DEFAULT_PORTING_SUBJECT } from "@/lib/apPortingDefaults";
 
 const translator = short(short.constants.flickrBase58);
 

From 17ed2c5470dd9b8a2b1fc68b531a0c1a121369cc Mon Sep 17 00:00:00 2001
From: venkata_beast_king <kvvarish@gmail.com>
Date: Sat, 20 Jun 2026 17:29:39 -0700
Subject: [PATCH 48/49] attempt build

---
 src/app/admin/subject/[slug]/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/admin/subject/[slug]/page.tsx b/src/app/admin/subject/[slug]/page.tsx
index 19aac5a0..374ac4c4 100644
--- a/src/app/admin/subject/[slug]/page.tsx
+++ b/src/app/admin/subject/[slug]/page.tsx
@@ -218,13 +218,11 @@ export default function Page({ params }: { params: { slug: string } }) {
 
         for (const chapter of unit.chapters) {
           const chapterRef = doc(db, "subjects", "porting", "units", unit.id, "chapters", chapter.id);
-          const defaultBlocks = DEFAULT_PORTING_ARTICLES[chapter.id];
           writeBatchObj.set(chapterRef, {
             id: chapter.id,
             createdAt: new Date(),
             author: "System Default",
             title: `${unit.id}/chapter/${chapter.id}`,
-            data: defaultBlocks,
             isPublic: chapter.isPublic ?? true,
           });
         }

From e37e324bce420224f85585d111d0843c7b970476 Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Sat, 20 Jun 2026 23:02:30 -0700
Subject: [PATCH 49/49] add latex package

---
 src/components/article-creator/Renderer.tsx       | 4 ++--
 src/components/article-creator/editorjs-render.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/article-creator/Renderer.tsx b/src/components/article-creator/Renderer.tsx
index 2ee8d3f0..62e2a036 100644
--- a/src/components/article-creator/Renderer.tsx
+++ b/src/components/article-creator/Renderer.tsx
@@ -134,14 +134,14 @@ const customParsers: Record<
     const rows = content.map((row, index) => {
       if (withHeadings && index === 0) {
         return `<tr class="divide-x-[1px]">${row.reduce(
-          (acc, cell) => acc + `<th>${cell}</th>`,
+          (acc, cell) => acc + `<th>${parseLatex(cell)}</th>`,
           "",
         )}</tr>`;
       }
 
       // For other rows, use <td> tags
       return `<tr class="divide-x-[1px]">${row.reduce(
-        (acc, cell) => acc + `<td>${cell}</td>`,
+        (acc, cell) => acc + `<td>${parseLatex(cell)}</td>`,
         "",
       )}</tr>`;
     });
diff --git a/src/components/article-creator/editorjs-render.ts b/src/components/article-creator/editorjs-render.ts
index 6a1d772d..d0cfb29c 100644
--- a/src/components/article-creator/editorjs-render.ts
+++ b/src/components/article-creator/editorjs-render.ts
@@ -134,14 +134,14 @@ const customParsers: Record<
     const rows = content.map((row, index) => {
       if (withHeadings && index === 0) {
         return `<tr class="divide-x-[1px]">${row.reduce(
-          (acc, cell) => acc + `<th>${cell}</th>`,
+          (acc, cell) => acc + `<th>${parseLatex(cell)}</th>`,
           "",
         )}</tr>`;
       }
 
       // For other rows, use <td> tags
       return `<tr class="divide-x-[1px]">${row.reduce(
-        (acc, cell) => acc + `<td>${cell}</td>`,
+        (acc, cell) => acc + `<td>${parseLatex(cell)}</td>`,
         "",
       )}</tr>`;
     });