app/src/file-icons.mjs

const types = {
  default: '#b0b0bd', markdown: '#519aba', csv: '#8dc149', json: '#cbcb41',
  javascript: '#cbcb41', typescript: '#519aba', react: '#519aba', html: '#e37933',
  css: '#519aba', python: '#519aba', shell: '#8dc149', config: '#b0b0bd',
  image: '#a074c4', svg: '#a074c4', git: '#e37933', pdf: '#cc3e44', zip: '#b0b0bd', db: '#cbcb41',
};
const extensions = {
  md: 'markdown', markdown: 'markdown', mdx: 'markdown', csv: 'csv', tsv: 'csv',
  json: 'json', jsonc: 'json', jsonl: 'json', js: 'javascript', mjs: 'javascript', cjs: 'javascript',
  ts: 'typescript', mts: 'typescript', cts: 'typescript', jsx: 'react', tsx: 'react',
  html: 'html', htm: 'html', xml: 'html', css: 'css', scss: 'css', sass: 'css', less: 'css',
  py: 'python', pyi: 'python', sh: 'shell', bash: 'shell', zsh: 'shell', fish: 'shell',
  yaml: 'config', yml: 'config', toml: 'config', ini: 'config', conf: 'config', env: 'config',
  png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', webp: 'image', avif: 'image', ico: 'image', svg: 'svg',
  pdf: 'pdf', zip: 'zip', gz: 'zip', tar: 'zip', sql: 'db', sqlite: 'db', db: 'db',
};
export function fileIconType(path) {
  const name = path.split('/').at(-1).toLowerCase();
  if (['.gitignore', '.gitattributes', '.gitmodules'].includes(name)) return 'git';
  if (name === '.env' || name.startsWith('.env.') || name === '.editorconfig') return 'config';
  return extensions[name.split('.').at(-1)] ?? 'default';
}
export function createFileIcon(path) {
  const kind = fileIconType(path), icon = document.createElement('span');
  icon.className = 'file-icon'; icon.dataset.kind = kind; icon.setAttribute('aria-hidden', 'true');
  icon.style.setProperty('--file-color', types[kind]);
  icon.style.setProperty('--file-icon', `url("${new URL(`file-icons/${kind}.svg`, document.baseURI).href}")`);
  return icon;
}