/** * ───────────────────────────────────────────── * SPB Drive — Personal Cloud Drive * ───────────────────────────────────────────── * Author : Simon-Pierre Boucher * Contact : contact@spboucher.ai * File : src/web/assets/js/icons.js * Purpose : Crisp custom SVG icon set — file families + UI glyphs * License : MIT © Simon-Pierre Boucher * ───────────────────────────────────────────── */ const S = 'fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"'; const filePath = ''; /** File-family icons, color-coded per family. */ const FAMILY = { folder: { color: 'var(--folder-blue)', svg: `` }, image: { color: '#22d3aa', svg: `${filePath}` }, video: { color: '#b48cff', svg: `${filePath}` }, audio: { color: '#ff7ab8', svg: `${filePath}` }, pdf: { color: '#ff5d5d', svg: `${filePath}` }, doc: { color: '#4f8cff', svg: `${filePath}` }, sheet: { color: '#7bd88f', svg: `${filePath}` }, slides: { color: '#ff9f5a', svg: `${filePath}` }, code: { color: '#ffd166', svg: `${filePath}` }, text: { color: '#8b93a3', svg: `${filePath}` }, archive: { color: '#ffb454', svg: `${filePath}` }, font: { color: '#e6e9ef', svg: `${filePath}` }, mail: { color: '#4f8cff', svg: `${filePath}` }, book: { color: '#22d3aa', svg: `${filePath}` }, cube: { color: '#b48cff', svg: `${filePath}` }, file: { color: '#8b93a3', svg: filePath }, }; /** Render a file-family icon (class type-icon for sizing). */ export function fileIcon(family, cls = '') { const f = FAMILY[family] ?? FAMILY.file; return ``; } /** Folder icon honoring per-folder color + emoji override. */ export function folderIcon(node, cls = '') { if (node?.emoji) return ``; const color = node?.color ? `var(--folder-${node.color}, ${node.color})` : 'var(--folder-blue)'; return ``; } export function nodeIcon(node, cls = '') { return node.type === 'folder' ? folderIcon(node, cls) : fileIcon(node.icon, cls); } /** UI glyphs. */ export const UI = { chevron: ``, chevronL: ``, star: ``, starO: ``, download: ``, share: ``, trash: ``, restore: ``, rename: ``, copy: ``, move: ``, info: ``, close: ``, plus: ``, grid: ``, listv: ``, sun: ``, moon: ``, gear: ``, menu: ``, upload: ``, search: ``, clock: ``, tag: ``, activity: ``, link: ``, check: ``, dots: ``, duplicate: ``, qr: ``, eye: ``, zoomIn: ``, zoomOut: ``, rotate: ``, expand: ``, folderNew: ``, logout: ``, edit: ``, history: ``, inbox: ``, storage: ``, }; /** Empty-state illustrations (custom minimal SVG art). */ export const EMPTY_ART = { folder: ``, trash: ``, search: ``, };