From e06e0e7e616bac3df9b8916551bbd975970cff3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= <fatihkadirakin@gmail.com>
Date: Tue, 17 Jun 2025 20:32:06 +0300
Subject: [PATCH] update

---
 _layouts/embed-preview.html    | 10 ++---
 _layouts/embed.html            |  3 +-
 _site/embed-preview-script.js  | 71 +++++++++++++++++++++++-----------
 _site/embed-preview-style.css  |  1 -
 _site/embed-preview/index.html | 10 ++---
 _site/embed-script.js          |  2 +-
 _site/embed/index.html         |  3 +-
 embed-preview-script.js        | 69 +++++++++++++++++++++++----------
 embed-preview-style.css        |  1 -
 embed-script.js                |  2 +-
 10 files changed, 113 insertions(+), 59 deletions(-)

diff --git a/_layouts/embed-preview.html b/_layouts/embed-preview.html
index 08a57c2..e17633c 100644
--- a/_layouts/embed-preview.html
+++ b/_layouts/embed-preview.html
@@ -31,11 +31,11 @@
     <!-- Viewer Mode -->
     <div id="viewer-mode" class="viewer-mode h-screen flex">
         <!-- Sidebar - File Tree -->
-        <div id="file-sidebar" class="hidden w-48 sm:w-56 border-r border-dynamic-border bg-dynamic-muted/30 flex-shrink-0 overflow-y-auto custom-scrollbar">
-            <div class="p-3 border-b border-dynamic-border">
-                <h3 class="text-xs font-semibold text-dynamic-muted-foreground uppercase tracking-wider">Files</h3>
+        <div id="file-sidebar" class="hidden w-40 sm:w-44 border-r border-dynamic-border bg-dynamic-muted/30 flex-shrink-0 overflow-y-auto custom-scrollbar">
+            <div class="p-2 border-b border-dynamic-border">
+                <h3 class="text-[10px] font-semibold text-dynamic-muted-foreground uppercase tracking-wider">Files</h3>
             </div>
-            <div id="file-tree" class="p-2"></div>
+            <div id="file-tree" class="p-1"></div>
         </div>
         
         <!-- Main Content -->
@@ -56,7 +56,7 @@
             
             <!-- Main Prompt Interface - Full Height -->
             <div class="flex-1 flex flex-col">
-                <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 sm:p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
+                <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
                     <div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar text-sm sm:text-base"></div>
                     <div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-3 sm:top-6 left-3 sm:left-6 pointer-events-none text-sm sm:text-base">← Enter your prompt on designer...</div>
                 </div>
diff --git a/_layouts/embed.html b/_layouts/embed.html
index dcabf04..2a25a83 100644
--- a/_layouts/embed.html
+++ b/_layouts/embed.html
@@ -235,7 +235,8 @@
                                  rows="6"
                                  placeholder="Enter files (one per line):&#10;index.html&#10;styles/main.css&#10;scripts/app.js&#10;components/header.vue"></textarea>
                         <p class="text-xs text-dynamic-muted-foreground">
-                            Enter filenames one per line. Use forward slashes for folders (e.g., folder/file.js)
+                            Enter filenames one per line. Use forward slashes for folders (e.g., folder/file.js).
+                            Add * at the end of a filename to highlight it (e.g., main.js*)
                         </p>
                     </div>
                 </div>
diff --git a/_site/embed-preview-script.js b/_site/embed-preview-script.js
index d5675b2..65ef243 100644
--- a/_site/embed-preview-script.js
+++ b/_site/embed-preview-script.js
@@ -343,7 +343,7 @@ class EmbedPreview {
     }
     
     highlightMentions(text) {
-        return text.replace(/@(\w+)/g, '<span class="mention">@$1</span>');
+        return text.replace(/@([\w\.\/\:\-\&\=\?]+)/g, '<span class="mention">@$1</span>');
     }
     
     capitalizeFirst(str) {
@@ -420,7 +420,12 @@ class EmbedPreview {
         const tree = {};
         
         paths.forEach(path => {
-            const parts = path.split('/');
+            // Check if the path ends with an asterisk
+            const isHighlighted = path.endsWith('*');
+            // Remove asterisk if present
+            const cleanPath = isHighlighted ? path.slice(0, -1) : path;
+            
+            const parts = cleanPath.split('/');
             let current = tree;
             
             parts.forEach((part, index) => {
@@ -428,6 +433,7 @@ class EmbedPreview {
                     current[part] = {
                         name: part,
                         isFile: index === parts.length - 1,
+                        isHighlighted: index === parts.length - 1 && isHighlighted,
                         children: {}
                     };
                 }
@@ -475,8 +481,15 @@ class EmbedPreview {
         sortedKeys.forEach(key => {
             const item = node[key];
             const itemElement = document.createElement('div');
-            itemElement.className = 'flex items-center gap-1.5 py-1 px-2 hover:bg-dynamic-primary/10 rounded cursor-pointer text-sm text-dynamic-foreground/80 hover:text-dynamic-foreground transition-colors';
-            itemElement.style.paddingLeft = `${level * 16 + 8}px`;
+            
+            // Add highlighting class if the file is marked
+            if (item.isHighlighted) {
+                itemElement.className = 'flex items-center gap-1 py-0.5 px-1.5 bg-dynamic-primary/20 rounded cursor-pointer text-xs text-dynamic-foreground font-medium transition-all hover:bg-dynamic-primary/30';
+            } else {
+                itemElement.className = 'flex items-center gap-1 py-0.5 px-1.5 hover:bg-dynamic-primary/10 rounded cursor-pointer text-xs text-dynamic-foreground/80 hover:text-dynamic-foreground transition-colors';
+            }
+            
+            itemElement.style.paddingLeft = `${level * 12 + 6}px`;
             
             // Add icon
             const icon = document.createElement('span');
@@ -487,36 +500,50 @@ class EmbedPreview {
                 const ext = key.split('.').pop().toLowerCase();
                 let iconColor = 'text-dynamic-muted-foreground';
                 
-                // Color code common file types
-                if (['js', 'jsx', 'ts', 'tsx'].includes(ext)) {
-                    iconColor = 'text-yellow-500';
-                } else if (['css', 'scss', 'sass', 'less'].includes(ext)) {
-                    iconColor = 'text-blue-500';
-                } else if (['html', 'htm'].includes(ext)) {
-                    iconColor = 'text-orange-500';
-                } else if (['vue', 'svelte'].includes(ext)) {
-                    iconColor = 'text-green-500';
-                } else if (['json', 'xml', 'yaml', 'yml'].includes(ext)) {
-                    iconColor = 'text-purple-500';
-                } else if (['md', 'mdx'].includes(ext)) {
-                    iconColor = 'text-gray-500';
-                } else if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext)) {
-                    iconColor = 'text-pink-500';
+                // If highlighted, use primary color for icon
+                if (item.isHighlighted) {
+                    iconColor = 'text-dynamic-primary';
+                } else {
+                    // Color code common file types
+                    if (['js', 'jsx', 'ts', 'tsx'].includes(ext)) {
+                        iconColor = 'text-yellow-500';
+                    } else if (['css', 'scss', 'sass', 'less'].includes(ext)) {
+                        iconColor = 'text-blue-500';
+                    } else if (['html', 'htm'].includes(ext)) {
+                        iconColor = 'text-orange-500';
+                    } else if (['vue', 'svelte'].includes(ext)) {
+                        iconColor = 'text-green-500';
+                    } else if (['json', 'xml', 'yaml', 'yml'].includes(ext)) {
+                        iconColor = 'text-purple-500';
+                    } else if (['md', 'mdx'].includes(ext)) {
+                        iconColor = 'text-gray-500';
+                    } else if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext)) {
+                        iconColor = 'text-pink-500';
+                    }
                 }
                 
-                icon.innerHTML = `<svg class="w-4 h-4 ${iconColor}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>`;
+                icon.innerHTML = `<svg class="w-3 h-3 ${iconColor}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>`;
             } else {
                 // Folder icon
-                icon.innerHTML = '<svg class="w-4 h-4 text-dynamic-primary" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>';
+                icon.innerHTML = '<svg class="w-3 h-3 text-dynamic-primary" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>';
             }
             
             // Add name
             const nameSpan = document.createElement('span');
-            nameSpan.className = 'truncate';
+            nameSpan.className = 'truncate flex-1';
             nameSpan.textContent = item.name;
             
             itemElement.appendChild(icon);
             itemElement.appendChild(nameSpan);
+            
+            // Add a star indicator for highlighted files
+            if (item.isHighlighted) {
+                const starIcon = document.createElement('span');
+                starIcon.className = 'ml-auto text-dynamic-primary';
+                starIcon.innerHTML = '<svg class="w-2.5 h-2.5" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>';
+                itemElement.appendChild(starIcon);
+            }
+            
             container.appendChild(itemElement);
             
             // Recursively render children
diff --git a/_site/embed-preview-style.css b/_site/embed-preview-style.css
index 7e0f4fe..ca6f3ed 100644
--- a/_site/embed-preview-style.css
+++ b/_site/embed-preview-style.css
@@ -119,7 +119,6 @@
     height: 100%;
     overflow-y: auto !important;
     flex: 1;
-    white-space: wrap;
 }
 
 /* Responsive improvements */
diff --git a/_site/embed-preview/index.html b/_site/embed-preview/index.html
index 83d3188..083c2a0 100644
--- a/_site/embed-preview/index.html
+++ b/_site/embed-preview/index.html
@@ -31,11 +31,11 @@
     <!-- Viewer Mode -->
     <div id="viewer-mode" class="viewer-mode h-screen flex">
         <!-- Sidebar - File Tree -->
-        <div id="file-sidebar" class="hidden w-48 sm:w-56 border-r border-dynamic-border bg-dynamic-muted/30 flex-shrink-0 overflow-y-auto custom-scrollbar">
-            <div class="p-3 border-b border-dynamic-border">
-                <h3 class="text-xs font-semibold text-dynamic-muted-foreground uppercase tracking-wider">Files</h3>
+        <div id="file-sidebar" class="hidden w-40 sm:w-44 border-r border-dynamic-border bg-dynamic-muted/30 flex-shrink-0 overflow-y-auto custom-scrollbar">
+            <div class="p-2 border-b border-dynamic-border">
+                <h3 class="text-[10px] font-semibold text-dynamic-muted-foreground uppercase tracking-wider">Files</h3>
             </div>
-            <div id="file-tree" class="p-2"></div>
+            <div id="file-tree" class="p-1"></div>
         </div>
         
         <!-- Main Content -->
@@ -56,7 +56,7 @@
             
             <!-- Main Prompt Interface - Full Height -->
             <div class="flex-1 flex flex-col">
-                <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 sm:p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
+                <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
                     <div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar text-sm sm:text-base"></div>
                     <div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-3 sm:top-6 left-3 sm:left-6 pointer-events-none text-sm sm:text-base">← Enter your prompt on designer...</div>
                 </div>
diff --git a/_site/embed-script.js b/_site/embed-script.js
index 48e38a2..7f2a8b9 100644
--- a/_site/embed-script.js
+++ b/_site/embed-script.js
@@ -553,7 +553,7 @@ The component should fetch data from a REST API and display products with images
         
         document.getElementById('designer-context').value = '@codebase, ProductList.jsx';
         document.getElementById('designer-filetree').value = 
-`src/components/ProductList.jsx
+`src/components/ProductList.jsx*
 src/components/ProductCard.jsx
 src/components/Filters.jsx
 src/hooks/useProducts.js
diff --git a/_site/embed/index.html b/_site/embed/index.html
index 1dba688..b222afe 100644
--- a/_site/embed/index.html
+++ b/_site/embed/index.html
@@ -235,7 +235,8 @@
                                  rows="6"
                                  placeholder="Enter files (one per line):&#10;index.html&#10;styles/main.css&#10;scripts/app.js&#10;components/header.vue"></textarea>
                         <p class="text-xs text-dynamic-muted-foreground">
-                            Enter filenames one per line. Use forward slashes for folders (e.g., folder/file.js)
+                            Enter filenames one per line. Use forward slashes for folders (e.g., folder/file.js).
+                            Add * at the end of a filename to highlight it (e.g., main.js*)
                         </p>
                     </div>
                 </div>
diff --git a/embed-preview-script.js b/embed-preview-script.js
index d5675b2..b33be8c 100644
--- a/embed-preview-script.js
+++ b/embed-preview-script.js
@@ -420,7 +420,12 @@ class EmbedPreview {
         const tree = {};
         
         paths.forEach(path => {
-            const parts = path.split('/');
+            // Check if the path ends with an asterisk
+            const isHighlighted = path.endsWith('*');
+            // Remove asterisk if present
+            const cleanPath = isHighlighted ? path.slice(0, -1) : path;
+            
+            const parts = cleanPath.split('/');
             let current = tree;
             
             parts.forEach((part, index) => {
@@ -428,6 +433,7 @@ class EmbedPreview {
                     current[part] = {
                         name: part,
                         isFile: index === parts.length - 1,
+                        isHighlighted: index === parts.length - 1 && isHighlighted,
                         children: {}
                     };
                 }
@@ -475,8 +481,15 @@ class EmbedPreview {
         sortedKeys.forEach(key => {
             const item = node[key];
             const itemElement = document.createElement('div');
-            itemElement.className = 'flex items-center gap-1.5 py-1 px-2 hover:bg-dynamic-primary/10 rounded cursor-pointer text-sm text-dynamic-foreground/80 hover:text-dynamic-foreground transition-colors';
-            itemElement.style.paddingLeft = `${level * 16 + 8}px`;
+            
+            // Add highlighting class if the file is marked
+            if (item.isHighlighted) {
+                itemElement.className = 'flex items-center gap-1 py-0.5 px-1.5 bg-dynamic-primary/20 rounded cursor-pointer text-xs text-dynamic-foreground font-medium transition-all hover:bg-dynamic-primary/30';
+            } else {
+                itemElement.className = 'flex items-center gap-1 py-0.5 px-1.5 hover:bg-dynamic-primary/10 rounded cursor-pointer text-xs text-dynamic-foreground/80 hover:text-dynamic-foreground transition-colors';
+            }
+            
+            itemElement.style.paddingLeft = `${level * 12 + 6}px`;
             
             // Add icon
             const icon = document.createElement('span');
@@ -487,36 +500,50 @@ class EmbedPreview {
                 const ext = key.split('.').pop().toLowerCase();
                 let iconColor = 'text-dynamic-muted-foreground';
                 
-                // Color code common file types
-                if (['js', 'jsx', 'ts', 'tsx'].includes(ext)) {
-                    iconColor = 'text-yellow-500';
-                } else if (['css', 'scss', 'sass', 'less'].includes(ext)) {
-                    iconColor = 'text-blue-500';
-                } else if (['html', 'htm'].includes(ext)) {
-                    iconColor = 'text-orange-500';
-                } else if (['vue', 'svelte'].includes(ext)) {
-                    iconColor = 'text-green-500';
-                } else if (['json', 'xml', 'yaml', 'yml'].includes(ext)) {
-                    iconColor = 'text-purple-500';
-                } else if (['md', 'mdx'].includes(ext)) {
-                    iconColor = 'text-gray-500';
-                } else if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext)) {
-                    iconColor = 'text-pink-500';
+                // If highlighted, use primary color for icon
+                if (item.isHighlighted) {
+                    iconColor = 'text-dynamic-primary';
+                } else {
+                    // Color code common file types
+                    if (['js', 'jsx', 'ts', 'tsx'].includes(ext)) {
+                        iconColor = 'text-yellow-500';
+                    } else if (['css', 'scss', 'sass', 'less'].includes(ext)) {
+                        iconColor = 'text-blue-500';
+                    } else if (['html', 'htm'].includes(ext)) {
+                        iconColor = 'text-orange-500';
+                    } else if (['vue', 'svelte'].includes(ext)) {
+                        iconColor = 'text-green-500';
+                    } else if (['json', 'xml', 'yaml', 'yml'].includes(ext)) {
+                        iconColor = 'text-purple-500';
+                    } else if (['md', 'mdx'].includes(ext)) {
+                        iconColor = 'text-gray-500';
+                    } else if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext)) {
+                        iconColor = 'text-pink-500';
+                    }
                 }
                 
-                icon.innerHTML = `<svg class="w-4 h-4 ${iconColor}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>`;
+                icon.innerHTML = `<svg class="w-3 h-3 ${iconColor}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>`;
             } else {
                 // Folder icon
-                icon.innerHTML = '<svg class="w-4 h-4 text-dynamic-primary" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>';
+                icon.innerHTML = '<svg class="w-3 h-3 text-dynamic-primary" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>';
             }
             
             // Add name
             const nameSpan = document.createElement('span');
-            nameSpan.className = 'truncate';
+            nameSpan.className = 'truncate flex-1';
             nameSpan.textContent = item.name;
             
             itemElement.appendChild(icon);
             itemElement.appendChild(nameSpan);
+            
+            // Add a star indicator for highlighted files
+            if (item.isHighlighted) {
+                const starIcon = document.createElement('span');
+                starIcon.className = 'ml-auto text-dynamic-primary';
+                starIcon.innerHTML = '<svg class="w-2.5 h-2.5" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>';
+                itemElement.appendChild(starIcon);
+            }
+            
             container.appendChild(itemElement);
             
             // Recursively render children
diff --git a/embed-preview-style.css b/embed-preview-style.css
index 7e0f4fe..ca6f3ed 100644
--- a/embed-preview-style.css
+++ b/embed-preview-style.css
@@ -119,7 +119,6 @@
     height: 100%;
     overflow-y: auto !important;
     flex: 1;
-    white-space: wrap;
 }
 
 /* Responsive improvements */
diff --git a/embed-script.js b/embed-script.js
index 48e38a2..7f2a8b9 100644
--- a/embed-script.js
+++ b/embed-script.js
@@ -553,7 +553,7 @@ The component should fetch data from a REST API and display products with images
         
         document.getElementById('designer-context').value = '@codebase, ProductList.jsx';
         document.getElementById('designer-filetree').value = 
-`src/components/ProductList.jsx
+`src/components/ProductList.jsx*
 src/components/ProductCard.jsx
 src/components/Filters.jsx
 src/hooks/useProducts.js