feat: Add model logos to selector and enhance styling for improved UX

Author: Ashjha75

index.html

@@ -142,11 +142,15 @@ <h3>EXPLORER</h3>
                             </span>
                             <span class="separator">•</span>
                             <span class="info-item">
-                                <!-- <span class="material-symbols-outlined">smart_toy</span> -->
+                                <div class="model-logos" id="modelLogos" aria-hidden="true">
+                                    <img src="public/gemini.png" alt="Gemini" data-model="gemini" class="model-logo" />
+                                    <img src="public/gpt.png" alt="GPT" data-model="gpt" class="model-logo" />
+                                    <img src="public/claude.png" alt="Claude" data-model="claude" class="model-logo" />
+                                </div>
                                 <select id="modelSelector" title="Choose AI model format - optimizes output structure for each AI">
+                                    <option value="gemini" title="Hybrid format with metadata">Gemini (Hybrid)</option>
                                     <option value="gpt" title="Markdown format with clear code blocks">GPT-4 (Markdown)</option>
                                     <option value="claude" title="XML format with structured context">Claude (XML)</option>
-                                    <option value="gemini" title="Hybrid format with metadata">Gemini (Hybrid)</option>
                                 </select>
                             </span>
                         </div>

index.js

@@ -1494,7 +1494,7 @@ Your goal: deliver precise, production-grade patches with the smallest necessary
             const parts = [];
             // === AI Model Template Logic ===
             if (S.model === 'gpt') {
-                parts.push('# 🤖 PROJECT CONTEXT FOR GPT-4\n');
+                parts.push('# <span class="material-symbols-outlined">smart_toy</span> PROJECT CONTEXT FOR GPT-4\n');
                 parts.push('='.repeat(80) + '\n\n');
 
                 parts.push('## 📋 METADATA\n');
@@ -1683,7 +1683,7 @@ Your goal: deliver precise, production-grade patches with the smallest necessary
 
         // Add model-specific headers for download
         if (S.model === 'gpt') {
-            parts.push('# 🤖 PROJECT CONTEXT FOR GPT-4\n');
+            parts.push('# <span class="material-symbols-outlined">smart_toy</span> PROJECT CONTEXT FOR GPT-4\n');
             parts.push('='.repeat(80) + '\n\n');
 
             parts.push('## 📋 METADATA\n');
@@ -1976,14 +1976,40 @@ Your goal: deliver precise, production-grade patches with the smallest necessary
                 S.model = D.model.value;
                 const templates = {
                     gpt: '📝 GPT-4: Markdown format with clear code blocks and instructions',
-                    claude: '🤖 Claude: XML-structured context with semantic tags for better understanding',
+                    claude: 'Claude: XML-structured context with semantic tags for better understanding',
                     gemini: '✨ Gemini: Hybrid format with metadata and organized sections'
                 };
+                // highlight corresponding logo if present
+                try {
+                    const logos = document.querySelectorAll('.model-logo');
+                    logos.forEach(l => l.classList.toggle('selected', l.dataset.model === S.model));
+                } catch (e) { /* ignore */ }
                 console.log(`%c${templates[S.model]}`, 'color:#10b981;font-weight:bold');
                 toast(`Template: ${S.model.toUpperCase()}`, 'info');
             });
+
+            // helper exposed to window so inline markup can use it
+            window.selectModel = m => {
+                if (!D.model) return;
+                D.model.value = m;
+                D.model.dispatchEvent(new Event('change'));
+            };
         }
 
+        // wire model-logo clicks and initial highlight (if the inline images are present)
+        try {
+            const logos = document.querySelectorAll('.model-logo');
+            logos.forEach(img => {
+                img.addEventListener('click', () => {
+                    const m = img.dataset.model;
+                    if (m && window.selectModel) window.selectModel(m);
+                });
+            });
+            // initial highlight based on select value or state
+            const initial = D.model ? D.model.value : S.model;
+            logos.forEach(l => l.classList.toggle('selected', l.dataset.model === initial));
+        } catch (e) { /* ignore if DOM not ready */ }
+
         // Drag and Drop functionality on main content area
         const dragDropZone = $('dragDropZone');
         const dragDropOverlay = $('dragDropOverlay');

style.css

@@ -22,6 +22,33 @@
     border-color: #fbbf24;
     box-shadow: 0 0 0 3px rgba(251,187,36,0.08);
 }
+/* Model logo strip next to the selector */
+.model-logos {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-right: 8px;
+}
+.model-logo {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0.85;
+    transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
+    border: 1px solid transparent;
+    background: rgba(255,255,255,0.02);
+}
+.model-logo:hover {
+    transform: translateY(-2px) scale(1.02);
+    opacity: 1;
+}
+.model-logo.selected {
+    box-shadow: 0 0 0 3px rgba(16,185,129,0.08);
+    border-color: rgba(16,185,129,0.18);
+    opacity: 1;
+}
 /* Only sidebar main action icons (Select Directory, Create Context) black and small */
 .sidebar-btn-icon {
     width: 20px;