See my code: Icons/badges for filetypes

[henkvantijen]

Hi, I just discovered CP today, like it very much. I am a visual guy, so I missed the color coded file icons.
I chatted with Claude, and she made a script for me

Save as cpp.conf file in your home directory:
#=======

[global]
html-head: <script>(function(){var E={jpg:'img',jpeg:'img',png:'img',gif:'img',webp:'img',svg:'img',bmp:'img',tif:'img',tiff:'img',ico:'img',heic:'img',heif:'img',avif:'img',raw:'img',cr2:'img',nef:'img',arw:'img',dng:'img',pdf:'pdf',doc:'doc',docx:'doc',odt:'doc',rtf:'doc',pages:'pag',xls:'xls',xlsx:'xls',ods:'xls',csv:'xls',tsv:'xls',numbers:'xls',ppt:'ppt',pptx:'ppt',odp:'ppt',key:'ppt',txt:'txt',md:'txt',markdown:'txt',rst:'txt',log:'txt',nfo:'txt',js:'code',ts:'code',jsx:'code',tsx:'code',mjs:'code',py:'code',rb:'code',php:'code',java:'code',kt:'code',html:'www',htm:'www',css:'code',scss:'code',json:'code',xml:'code',yaml:'code',yml:'code',toml:'code',ini:'code',cfg:'code',sh:'code',bat:'code',ps1:'code',c:'code',cpp:'code',h:'code',cs:'code',go:'code',rs:'code',swift:'code',lua:'code',pl:'code',sql:'code',zip:'zip',tar:'zip',gz:'zip',bz2:'zip','7z':'zip',rar:'zip',xz:'zip',zst:'zip',iso:'zip',cab:'zip',mp3:'audio',flac:'audio',ogg:'audio',wav:'audio',aac:'audio',m4a:'audio',opus:'audio',wma:'audio',aiff:'audio',ape:'audio',mpc:'audio',mp4:'video',m4v:'video',mkv:'video',webm:'video',avi:'video',mov:'video',wmv:'video',flv:'video',mpg:'video',mpeg:'video',m2ts:'video',ogv:'video',exe:'exe',msi:'exe',dmg:'exe',appimage:'exe',apk:'exe',ipa:'exe',ttf:'font',otf:'font',woff:'font',woff2:'font',obj:'3d',stl:'3d',step:'3d',fbx:'3d',blend:'3d',glb:'3d',db:'db',sqlite:'db',sqlite3:'db',epub:'ebook',mobi:'ebook',azw3:'ebook',cbz:'ebook',torrent:'torrent'};var S={folder:{bg:'#f0a800',fg:'#fff',lbl:'DIR'},img:{bg:'#43a047',fg:'#fff',lbl:'IMG'},pdf:{bg:'#e53935',fg:'#fff',lbl:'PDF'},doc:{bg:'#1565c0',fg:'#fff',lbl:'DOC'},xls:{bg:'#2e7d32',fg:'#fff',lbl:'XLS'},ppt:{bg:'#e64a19',fg:'#fff',lbl:'PPT'},pag:{bg:'#f57c00',fg:'#fff',lbl:'pag'},txt:{bg:'#757575',fg:'#fff',lbl:'TXT'},code:{bg:'#607d8b',fg:'#fff',lbl:'code'},www:{bg:'#0288d1',fg:'#fff',lbl:'www'},zip:{bg:'#5d4037',fg:'#fff',lbl:'ZIP'},audio:{bg:'#00695c',fg:'#fff',lbl:'\u266b'},video:{bg:'#0277bd',fg:'#fff',lbl:'\u25b6'},exe:{bg:'#e65100',fg:'#fff',lbl:'EXE'},font:{bg:'#4a148c',fg:'#fff',lbl:'FNT'},'3d':{bg:'#37474f',fg:'#fff',lbl:'3D'},db:{bg:'#1b5e20',fg:'#fff',lbl:'DB'},ebook:{bg:'#880e4f',fg:'#fff',lbl:'BOOK'},torrent:{bg:'#bf360c',fg:'#fff',lbl:'TOR'},file:{bg:'#9e9e9e',fg:'#fff',lbl:'FILE'}};function mk(t){var s=S[t]||S.file,l=s.lbl,f=l.length<=1?10:l.length<=2?8:l.length<=3?7:5.5,w=l.length<=1?18:l.length<=2?20:l.length<=3?24:28;return''+l+'';}var A='data-fti';function run(){var t=document.getElementById('files');if(!t)return;var h=t.querySelector('thead tr'),b=t.querySelector('tbody');if(!h||!b)return;var ths=h.querySelectorAll('th'),ti=-1,i;for(i=0;i<ths.length;i++){if(ths[i].textContent.trim().replace(/^-/,'').toUpperCase()==='T'){ti=i;break;}}if(ti<0)return;var rows=b.querySelectorAll('tr'),r,row,tds,cell,text,type,a,hr;for(r=0;r<rows.length;r++){row=rows[r];tds=row.querySelectorAll('td');if(tds.length<=ti)continue;cell=tds[ti];if(cell.getAttribute(A)==='1')continue;cell.setAttribute(A,'1');text=cell.textContent.trim().toLowerCase();if(text==='---'||text===''){a=row.querySelector('a[href]');hr=a?(a.getAttribute('href')||''):'';type=(hr.charAt(hr.length-1)==='/'||hr.indexOf('/?')>-1)?'folder':'file';}else{type=E[text]||'file';}cell.innerHTML=mk(type);}}var T=null;function sc(){if(T)clearTimeout(T);T=setTimeout(function(){T=null;run();},60);}function init(){run();new MutationObserver(sc).observe(document.body,{childList:true,subtree:true});setInterval(run,500);}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();}());</script>

[/]
/Users/<yourUserName>
accs:
rw: *

#==============

/Users/<yourUserName> : update to your home directory.

To start CopyParty with this addition, type in:

copyparty -c cpp.conf

First we tried to build a plugin that inserted an extra (6th) column, but after a few hours I had no more energy to debug the cause why it failed, had probably to do with javascript timing. So replacing the filetype labels in existing column T with a badge (simplified icon) , was the second best option.
I hope someone with better skills than I have will make a working plugin out of this.