Resolves #109, File Tree Lines can be Added to Exclude/Include Pattern Through Click

src/server/templates/components/git_form.jinja

@@ -1,3 +1,24 @@
+<script>
+    function changePattern(element) {
+        console.log("Pattern changed", element.value);
+        let patternType = element.value;
+        const files = document.getElementsByName("tree-line");
+
+        Array.from(files).forEach((element) => {
+            if (element.textContent.includes("Directory structure:")) {
+                return;
+            }
+
+            element.classList.toggle('line-through');
+            element.classList.toggle('text-gray-500');
+            element.classList.toggle('hover:text-inherit');
+            element.classList.toggle('hover:no-underline');
+            element.classList.toggle('hover:line-through');
+            element.classList.toggle('hover:text-gray-500'); 
+        });
+    }
+</script>
+
 <div class="relative">
     <div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
     <div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
@@ -34,6 +55,7 @@
                     <div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
                         <div class="relative flex items-center">
                             <select id="pattern_type"
+                                    onchange = "changePattern(this)"
                                     name="pattern_type"
                                     class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
                                 <option value="exclude"

src/server/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-auto" 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>