Skip to content

Commit 9f43d0d

Browse files
Ashjha75Ashjha75
committed
feat: Replace material icons with SVGs for context button and enhance styling for better visual consistency
1 parent cf04fdb commit 9f43d0d

File tree

3 files changed

+73
-218
lines changed

3 files changed

+73
-218
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h3>EXPLORER</h3>
8888

8989
<div class="sidebar-select">
9090
<button class="btn-generate" id="generateContextBtn">
91-
<span class="material-symbols-outlined">integration_instructions</span>
91+
<img src="public/contexticon.svg" alt="Context" class="context-btn-icon" />
9292
Create Context
9393
</button>
9494
</div>

‎index.js‎

Lines changed: 17 additions & 217 deletions
Original file line numberDiff line numberDiff line change
@@ -537,229 +537,28 @@
537537
// Get icon for file or folder
538538
const ico = (name, isFolder) => {
539539
if (isFolder) {
540-
// Check for special folder names
541-
const folderName = name.toLowerCase();
542-
const folderIcon = FOLDER_ICONS[folderName] || FOLDER_ICONS['default'];
543540
return {
544541
type: 'svg',
545-
url: ICON_BASE_URL + folderIcon.icon,
546-
color: folderIcon.color,
542+
url: 'public/contexticon.svg',
543+
color: '',
547544
cls: 'folder-icon'
548545
};
549546
}
550-
// File icon
551-
const fileName = name.toLowerCase();
552-
// ========================================
553-
// SPRING BOOT / JAVA SPECIAL FILES
554-
// ========================================
555-
if (fileName === 'pom.xml') {
556-
return {
557-
type: 'svg',
558-
url: ICON_BASE_URL + 'maven.svg',
559-
color: '#c71a36',
560-
cls: ''
561-
};
562-
}
563-
if (fileName === 'build.gradle' || fileName === 'build.gradle.kts' || fileName === 'settings.gradle' || fileName === 'settings.gradle.kts') {
564-
return {
565-
type: 'svg',
566-
url: ICON_BASE_URL + 'gradle.svg',
567-
color: '#02303a',
568-
cls: ''
569-
};
570-
}
571-
if (fileName === 'application.properties' || fileName === 'application.yml' || fileName === 'application.yaml') {
572-
return {
573-
type: 'svg',
574-
url: ICON_BASE_URL + 'spring.svg',
575-
color: '#6db33f',
576-
cls: ''
577-
};
578-
}
579-
if (fileName.startsWith('application-') && (fileName.endsWith('.properties') || fileName.endsWith('.yml') || fileName.endsWith('.yaml'))) {
580-
return {
581-
type: 'svg',
582-
url: ICON_BASE_URL + 'spring.svg',
583-
color: '#6db33f',
584-
cls: ''
585-
};
586-
}
587-
// ========================================
588-
// PYTHON SPECIAL FILES
589-
// ========================================
590-
if (fileName === 'requirements.txt' || fileName === 'requirements-dev.txt') {
591-
return {
592-
type: 'svg',
593-
url: ICON_BASE_URL + 'python.svg',
594-
color: '#3776ab',
595-
cls: ''
596-
};
597-
}
598-
if (fileName === 'setup.py' || fileName === 'setup.cfg') {
599-
return {
600-
type: 'svg',
601-
url: ICON_BASE_URL + 'python.svg',
602-
color: '#3776ab',
603-
cls: ''
604-
};
605-
}
606-
if (fileName === 'pipfile' || fileName === 'pipfile.lock') {
607-
return {
608-
type: 'svg',
609-
url: ICON_BASE_URL + 'python.svg',
610-
color: '#3776ab',
611-
cls: ''
612-
};
613-
}
614-
if (fileName === 'pyproject.toml') {
615-
return {
616-
type: 'svg',
617-
url: ICON_BASE_URL + 'python.svg',
618-
color: '#3776ab',
619-
cls: ''
620-
};
621-
}
622-
if (fileName === 'manage.py') { // Django
623-
return {
624-
type: 'svg',
625-
url: ICON_BASE_URL + 'django.svg',
626-
color: '#092e20',
627-
cls: ''
628-
};
629-
}
630-
// ========================================
631-
// JAVASCRIPT/NODE SPECIAL FILES
632-
// ========================================
633-
if (fileName === 'package.json') {
634-
return {
635-
type: 'svg',
636-
url: ICON_BASE_URL + 'nodejs.svg',
637-
color: '#8cc84b',
638-
cls: ''
639-
};
640-
}
641-
if (fileName === 'package-lock.json') {
642-
return {
643-
type: 'svg',
644-
url: ICON_BASE_URL + 'npm.svg',
645-
color: '#cb3837',
646-
cls: ''
647-
};
648-
}
649-
if (fileName === 'yarn.lock') {
650-
return {
651-
type: 'svg',
652-
url: ICON_BASE_URL + 'yarn.svg',
653-
color: '#2c8ebb',
654-
cls: ''
655-
};
656-
}
657-
if (fileName === 'tsconfig.json') {
658-
return {
659-
type: 'svg',
660-
url: ICON_BASE_URL + 'typescript-def.svg',
661-
color: '#3178c6',
662-
cls: ''
663-
};
664-
}
665-
if (fileName === 'webpack.config.js' || fileName === 'webpack.config.ts') {
666-
return {
667-
type: 'svg',
668-
url: ICON_BASE_URL + 'webpack.svg',
669-
color: '#8dd6f9',
670-
cls: ''
671-
};
672-
}
673-
if (fileName === 'vite.config.js' || fileName === 'vite.config.ts') {
674-
return {
675-
type: 'svg',
676-
url: ICON_BASE_URL + 'vite.svg',
677-
color: '#646cff',
678-
cls: ''
679-
};
680-
}
681-
if (fileName === 'next.config.js' || fileName === 'next.config.ts') {
682-
return {
683-
type: 'svg',
684-
url: ICON_BASE_URL + 'next.svg',
685-
color: '#000000',
686-
cls: ''
687-
};
688-
}
689-
// ========================================
690-
// GIT FILES
691-
// ========================================
692-
if (fileName === '.gitignore' || fileName === '.gitattributes' || fileName === '.gitmodules') {
693-
return {
694-
type: 'svg',
695-
url: ICON_BASE_URL + 'git.svg',
696-
color: '#f34f29',
697-
cls: ''
698-
};
699-
}
700-
// ========================================
701-
// DOCKER FILES
702-
// ========================================
703-
if (fileName === 'dockerfile' || fileName.startsWith('dockerfile.')) {
704-
return {
705-
type: 'svg',
706-
url: ICON_BASE_URL + 'docker.svg',
707-
color: '#0db7ed',
708-
cls: ''
709-
};
710-
}
711-
if (fileName === 'docker-compose.yml' || fileName === 'docker-compose.yaml') {
712-
return {
713-
type: 'svg',
714-
url: ICON_BASE_URL + 'docker.svg',
715-
color: '#0db7ed',
716-
cls: ''
717-
};
718-
}
719-
// ========================================
720-
// ENV FILES
721-
// ========================================
722-
if (fileName.startsWith('.env')) {
723-
return {
724-
type: 'svg',
725-
url: ICON_BASE_URL + 'tune.svg',
726-
color: '#e7c547',
727-
cls: ''
728-
};
729-
}
730-
// ========================================
731-
// README FILES
732-
// ========================================
733-
if (fileName === 'readme.md' || fileName === 'readme' || fileName === 'readme.txt') {
734-
return {
735-
type: 'svg',
736-
url: ICON_BASE_URL + 'readme.svg',
737-
color: '#4caf50',
738-
cls: ''
739-
};
740-
}
741-
// ========================================
742-
// LICENSE FILES
743-
// ========================================
744-
if (fileName === 'license' || fileName === 'license.md' || fileName === 'license.txt') {
745-
return {
746-
type: 'svg',
747-
url: ICON_BASE_URL + 'license.svg',
748-
color: '#cbcb41',
749-
cls: ''
750-
};
751-
}
752-
// ========================================
753-
// GET BY EXTENSION (DEFAULT)
754-
// ========================================
547+
// File icon by extension
755548
const ext = name.split('.').pop().toLowerCase();
756-
const iconData = ICONS[ext] || ICONS['default'];
757-
549+
let url = '';
550+
if (ext === 'js') url = 'public/contexticon.svg';
551+
else if (ext === 'html') url = 'public/contexticon.svg';
552+
else if (ext === 'css') url = 'public/contexticon.svg';
553+
else if (ext === 'py') url = 'public/contexticon.svg';
554+
else if (ext === 'md') url = 'public/contexticon.svg';
555+
else url = 'public/contexticon.svg';
556+
// You can add more mappings for other extensions if you add more icons
758557
return {
759558
type: 'svg',
760-
url: ICON_BASE_URL + iconData.icon,
761-
color: iconData.color,
762-
cls: '' // No custom classes needed - icons are already colored
559+
url,
560+
color: '',
561+
cls: ''
763562
};
764563
};
765564
const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');
@@ -892,10 +691,11 @@
892691
const has = nd.t === 'd' && nd.kids.size > 0;
893692
const sz = nd.f ? bytes(nd.f.size) : '';
894693
acc.push({
895-
html: `<div class="tree-item ${nd.ig ? 'ignored' : ''}" data-path="${nd.full}">
694+
html: `<div class="tree-item${nd.ig ? ' ignored' : ''}${has ? ' has-children' : ''}" data-path="${nd.full}">
896695
<div class="tree-item-content" data-level="${lv}">
696+
<span class="tree-lines">${Array(lv).fill('<span class=\'tree-vline\'></span>').join('')}</span>
897697
<button class="expand-btn" style="visibility:${has ? 'visible' : 'hidden'}">
898-
<span class="material-symbols-outlined">chevron_right</span>
698+
<img src="public/arrowRight.svg" class="tree-arrow" alt=">" />
899699
</button>
900700
<div class="file-icon ${ic.cls}">
901701
<img src="${ic.url}" alt="${nd.n}" class="vscode-icon" onerror="this.style.display='none'" />

‎style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,58 @@
1+
/* Context button icon */
2+
.context-btn-icon {
3+
width: 22px;
4+
height: 22px;
5+
vertical-align: middle;
6+
margin-right: 8px;
7+
margin-bottom: 2px;
8+
}
9+
/* Tree lines and arrows */
10+
.tree-lines {
11+
display: inline-block;
12+
min-width: 0.7em;
13+
vertical-align: middle;
14+
}
15+
.tree-vline {
16+
display: inline-block;
17+
width: 1.5px;
18+
height: 22px;
19+
background: #444;
20+
margin-right: 2px;
21+
margin-left: 0;
22+
border-radius: 1px;
23+
position: relative;
24+
top: 2px;
25+
}
26+
.tree-arrow {
27+
width: 14px;
28+
height: 14px;
29+
vertical-align: middle;
30+
margin-right: 2px;
31+
transition: transform 0.15s;
32+
}
33+
.tree-item.open > .tree-item-content > .expand-btn .tree-arrow {
34+
transform: rotate(90deg);
35+
}
36+
/* Tree lines and arrows */
37+
.tree-lines {
38+
display: inline-block;
39+
color: #555;
40+
font-size: 1em;
41+
min-width: 0.7em;
42+
letter-spacing: -0.1em;
43+
user-select: none;
44+
vertical-align: middle;
45+
}
46+
.tree-arrow {
47+
width: 14px;
48+
height: 14px;
49+
vertical-align: middle;
50+
margin-right: 2px;
51+
transition: transform 0.15s;
52+
}
53+
.tree-item.open > .tree-item-content > .expand-btn .tree-arrow {
54+
transform: rotate(90deg);
55+
}
156
/* ============================================================================
257
CODEVAULT - OPTIMIZED VS CODE STYLE
358
Performance Optimized + Material Icons

0 commit comments

Comments
 (0)