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

* Add ability to click tree lines to exlcude / include in pattern input
* Support visual change for swapping between include and exclude pattern

Co-authored-by: Romain Courtois <romain@coderamp.io>

Author: DavidUlloa6310

src/server/templates/components/git_form.jinja

@@ -1,3 +1,23 @@
+<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 +54,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,16 @@
                         </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"
+                                 id="directory-structure-container"
+                                 readonly>
+                                <input type="hidden" id="directory-structure-content" value="{{ tree }}" />
+                                {% 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>

src/static/js/utils.js

@@ -1,11 +1,24 @@
 // Copy functionality
 function copyText(className) {
-    const textarea = document.querySelector('.' + className);
+    let textToCopy;
+
+    if (className === 'directory-structure') {
+        // For directory structure, get the hidden input value
+        const hiddenInput = document.getElementById('directory-structure-content');
+        if (!hiddenInput) return;
+        textToCopy = hiddenInput.value;
+    } else {
+        // For other elements, get the textarea value
+        const textarea = document.querySelector('.' + className);
+        if (!textarea) return;
+        textToCopy = textarea.value;
+    }
+
     const button = document.querySelector(`button[onclick="copyText('${className}')"]`);
-    if (!textarea || !button) return;
+    if (!button) return;
 
     // Copy text
-    navigator.clipboard.writeText(textarea.value)
+    navigator.clipboard.writeText(textToCopy)
         .then(() => {
             // Store original content
             const originalContent = button.innerHTML;
@@ -110,7 +123,7 @@ function handleSubmit(event, showLoading = false) {
 }
 
 function copyFullDigest() {
-    const directoryStructure = document.querySelector('.directory-structure').value;
+    const directoryStructure = document.getElementById('directory-structure-content').value;
     const filesContent = document.querySelector('.result-text').value;
     const fullDigest = `${directoryStructure}\n\nFiles Content:\n\n${filesContent}`;
     const button = document.querySelector('[onclick="copyFullDigest()"]');