Implement save settings functionality to persist a user preference for repo structure

Author: febinbellamy

css/welcome.css

@@ -337,7 +337,7 @@ footer {
   text-align: right;
 }
 
-.save-btn {
+#save-settings-btn {
   background-color: rgb(76, 190, 228);
   color: white;
   border: none;
@@ -349,7 +349,7 @@ footer {
   font-weight: bold;
 }
 
-.save-btn:hover {
+#save-settings-btn:hover {
   background-color: rgb(56, 170, 208);
   transform: scale(1.05);
 }

scripts/welcome.js

@@ -10,8 +10,21 @@ const aTagforUnlinkRepo = document.querySelector("#unlink-repo");
 const starCodeHubButton = document.querySelector("#star-repo-button");
 const settingsIcon = document.querySelector("#settings-icon");
 const settingsModal = document.querySelector("#settings-modal");
+const saveSettingsBtn = document.querySelector("#save-settings-btn");
 const closeModal = document.querySelector(".close");
 
+document.addEventListener("DOMContentLoaded", () => {
+  chrome.storage.local.get("folderStructure", (result) => {
+    const saved = result.folderStructure || "level-problem-language";
+    const radio = document.querySelector(
+      `input[name="folder-structure"][value="${saved}"]`
+    );
+    if (radio) {
+      radio.checked = true;
+    }
+  });
+});
+
 authButton.addEventListener("click", () => {
   chrome.runtime.sendMessage({ action: "authenticateUser" });
 });
@@ -28,6 +41,16 @@ settingsIcon.addEventListener("click", () => {
   settingsModal.style.display = "block";
 });
 
+saveSettingsBtn.addEventListener("click", () => {
+  console.log("save settings btn clicked!!!");
+  const selected = document.querySelector(
+    'input[name="folder-structure"]:checked'
+  ).value;
+  chrome.storage.local.set({ folderStructure: selected }, () => {
+    settingsModal.style.display = "none";
+  });
+});
+
 closeModal.addEventListener("click", () => {
   settingsModal.style.display = "none";
 });

welcome.html

@@ -140,7 +140,6 @@ <h3>Folder Structure Organization</h3>
             Choose how you want CodeHub to organize your solutions in your
             GitHub repository:
           </p>
-
           <div class="folder-option">
             <input
               type="radio"
@@ -170,7 +169,6 @@ <h3>Folder Structure Organization</h3>
               </div>
             </label>
           </div>
-
           <div class="folder-option">
             <input
               type="radio"
@@ -187,7 +185,7 @@ <h3>Folder Structure Organization</h3>
           </div>
         </div>
         <div class="modal-footer">
-          <button id="save-settings" class="save-btn">Save Settings</button>
+          <button id="save-settings-btn">Save Settings</button>
         </div>
       </div>
     </div>