Add ability to click tree lines to exlcude / include in pattern input

Author: DavidUlloa6310

src/templates/components/result.jinja

@@ -1,3 +1,33 @@
+<script>
+    function getFileName(line) {
+        // Skips "|", "└", "├" found in file tree
+        const index = line.search(/[a-zA-Z0-9]/); 
+        return line.substring(index).trim();
+    }
+
+    function toggleFile(element) {
+        const patternInput = document.getElementById("pattern");
+        const patternFiles = patternInput.value ? patternInput.value.split(",").map(item => item.trim()) : [];
+
+        if (element.textContent.includes("Directory structure:")) {
+            return;
+        }
+
+        element.classList.toggle('line-through');
+        element.classList.toggle('text-gray-500');
+        
+        const fileName = getFileName(element.textContent);
+        const fileIndex = patternFiles.indexOf(fileName);
+
+        if (fileIndex !== -1) {
+            patternFiles.splice(fileIndex, 1);
+        } else {
+            patternFiles.push(fileName);
+        }
+
+        patternInput.value = patternFiles.join(", ");
+    }
+</script>
 {% if result %}
     <div class="mt-10" data-results>
         <div class="relative">
@@ -61,8 +91,11 @@
                         </div>
                         <div class="relative">
                             <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
-                            <textarea class="directory-structure w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10 h-[215px]"
-                                      readonly>{{ tree }}</textarea>
+                            <div class="directory-structure w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10 h-[215px] overflow-scroll" readonly>
+                                {% for line in tree.splitlines()%}
+                                    <div name="tree-line" class="cursor-pointer hover:line-through hover:text-gray-500" onclick="toggleFile(this)">{{ line }}</div>
+                                {% endfor %}
+                            </div>
                         </div>
                     </div>
                 </div>