@imsovikde/source-grab 1.0.1

package/sidepanel/components/file-list-item.js

@@ -0,0 +1,58 @@
+import { formatFileSize } from '../utils/format.js';
+
+export function createFileListItem(entry, isChecked, onCheckChange) {
+  const el = document.createElement('div');
+  el.className = `file-item ${entry.isNew ? 'is-new' : ''}`;
+  el.dataset.url = entry.url;
+
+  // Category badge color
+  const catVar = entry.category;
+  const bgColor = `var(--cat-${catVar})`;
+  const textColor = `var(--cat-${catVar}-text)`;
+
+  // Extract URL path for display
+  let urlPath = entry.url;
+  try {
+    const parsed = new URL(entry.url);
+    urlPath = parsed.hostname + parsed.pathname;
+    if (urlPath.length > 60) urlPath = urlPath.substring(0, 57) + '...';
+  } catch(e) {}
+
+  // Category label mapping
+  const categoryLabels = {
+    images: 'IMG', svg: 'SVG', pdf: 'PDF', scripts: 'JS',
+    stylesheets: 'CSS', fonts: 'FONT', media: 'MEDIA',
+    documents: 'DOC', other: 'FILE'
+  };
+  const label = categoryLabels[entry.category] || 'FILE';
+
+  el.innerHTML = `
+    <input type="checkbox" class="file-item-checkbox" ${isChecked ? 'checked' : ''}>
+    <div class="file-item-icon" style="color: ${bgColor}">
+      <svg width="22" height="22"><use href="icons/file-type-icons.svg#icon-${entry.category}"></use></svg>
+    </div>
+    <div class="file-item-info">
+      <div class="file-item-name" title="${entry.filename || 'unknown'}">${entry.filename || 'unknown'}</div>
+      <div class="file-item-url" title="${entry.url}">${urlPath}</div>
+    </div>
+    <div class="file-item-badge" style="background-color: ${bgColor}; color: ${textColor}">
+      ${label}
+    </div>
+    <div class="file-item-size">${formatFileSize(entry.size)}</div>
+  `;
+
+  const checkbox = el.querySelector('.file-item-checkbox');
+  checkbox.addEventListener('change', (e) => {
+    e.stopPropagation();
+    onCheckChange(entry.url, e.target.checked);
+  });
+
+  el.addEventListener('click', (e) => {
+    if (e.target !== checkbox && e.target.type !== 'checkbox') {
+      checkbox.checked = !checkbox.checked;
+      onCheckChange(entry.url, checkbox.checked);
+    }
+  });
+
+  return el;
+}

package/sidepanel/components/file-list.js

@@ -0,0 +1,134 @@
+import { VirtualScroll } from '../utils/virtual-scroll.js';
+import { createFileListItem } from './file-list-item.js';
+
+export class FileList {
+  constructor() {
+    this.container = null;
+    this.virtualScroll = null;
+    this.allResources = [];
+    this.filteredResources = [];
+    this.selectedUrls = new Set();
+    this.currentFilter = null;
+    this.selectionCallback = null;
+  }
+
+  init(container) {
+    this.container = container;
+    this.virtualScroll = new VirtualScroll(this.container, {
+      itemHeight: 56,
+      bufferRows: 10,
+      renderItem: (entry, index) => {
+        return createFileListItem(entry, this.selectedUrls.has(entry.url), (url, checked) => {
+          if (checked) {
+            this.selectedUrls.add(url);
+          } else {
+            this.selectedUrls.delete(url);
+          }
+          this.notifySelectionChange();
+        });
+      }
+    });
+  }
+
+  setResources(resources, currentFilter) {
+    this.allResources = resources;
+    this.currentFilter = currentFilter;
+    this.applyFilters();
+  }
+  
+  applyFilters() {
+    if (!this.currentFilter) {
+      this.filteredResources = [...this.allResources];
+    } else {
+      const { category, searchText, sizeRange, newOnly, sortBy } = this.currentFilter;
+      
+      this.filteredResources = this.allResources.filter(entry => {
+        if (category !== '*' && entry.category !== category) return false;
+        if (newOnly && !entry.isNew) return false;
+        if (searchText) {
+          const matchName = entry.filename && entry.filename.toLowerCase().includes(searchText);
+          const matchUrl = entry.url && entry.url.toLowerCase().includes(searchText);
+          if (!matchName && !matchUrl) return false;
+        }
+        if (sizeRange !== 'any') {
+          if (entry.size === null || entry.size === undefined) return false;
+          const kb = entry.size / 1024;
+          if (sizeRange === '<10KB' && kb >= 10) return false;
+          if (sizeRange === '10-100KB' && (kb < 10 || kb > 100)) return false;
+          if (sizeRange === '100KB-1MB' && (kb < 100 || kb > 1024)) return false;
+          if (sizeRange === '1-10MB' && (kb < 1024 || kb > 10240)) return false;
+          if (sizeRange === '>10MB' && kb <= 10240) return false;
+        }
+        return true;
+      });
+      
+      this.filteredResources.sort((a, b) => {
+        if (sortBy === 'loadOrder') return a.index - b.index;
+        if (sortBy === 'fileSize') {
+          if (a.size === null) return 1;
+          if (b.size === null) return -1;
+          return b.size - a.size;
+        }
+        if (sortBy === 'fileType') {
+          if (a.category !== b.category) return a.category.localeCompare(b.category);
+          return (a.filename || '').localeCompare(b.filename || '');
+        }
+        if (sortBy === 'alphabetical') {
+          return (a.filename || '').localeCompare(b.filename || '');
+        }
+        if (sortBy === 'newest') {
+          return (b.timestamp || 0) - (a.timestamp || 0);
+        }
+        return 0;
+      });
+    }
+    
+    this.virtualScroll.setItems(this.filteredResources);
+    this.notifySelectionChange();
+  }
+
+  getSelectedUrls() {
+    return Array.from(this.selectedUrls);
+  }
+
+  getFilteredResources() {
+    return this.filteredResources;
+  }
+
+  selectAll() {
+    this.filteredResources.forEach(r => this.selectedUrls.add(r.url));
+    this.virtualScroll.forceRender();
+    this.notifySelectionChange();
+  }
+
+  selectNone() {
+    this.selectedUrls.clear();
+    this.virtualScroll.forceRender();
+    this.notifySelectionChange();
+  }
+
+  invertSelection() {
+    this.filteredResources.forEach(r => {
+      if (this.selectedUrls.has(r.url)) {
+        this.selectedUrls.delete(r.url);
+      } else {
+        this.selectedUrls.add(r.url);
+      }
+    });
+    this.virtualScroll.forceRender();
+    this.notifySelectionChange();
+  }
+
+  onSelectionChange(callback) {
+    this.selectionCallback = callback;
+  }
+
+  notifySelectionChange() {
+    if (this.selectionCallback) {
+      this.selectionCallback({
+        selectedCount: this.selectedUrls.size,
+        totalFiltered: this.filteredResources.length
+      });
+    }
+  }
+}

package/sidepanel/components/filter-bar.js

@@ -0,0 +1,261 @@
+// sidepanel/components/filter-bar.js
+// v1.1 — Custom dropdown menus replacing native <select>
+
+export class FilterBar {
+  constructor() {
+    this.container = null;
+    this.callback = null;
+    this.state = {
+      category: '*',
+      searchText: '',
+      sizeRange: 'any',
+      newOnly: false,
+      sortBy: 'loadOrder'
+    };
+    this.searchTimeout = null;
+    this.openDropdown = null; // Track which dropdown is open
+    this.categories = [
+      { id: '*', label: 'All' },
+      { id: 'images', label: 'Images' },
+      { id: 'svg', label: 'SVG' },
+      { id: 'pdf', label: 'PDF' },
+      { id: 'scripts', label: 'Scripts' },
+      { id: 'stylesheets', label: 'Styles' },
+      { id: 'fonts', label: 'Fonts' },
+      { id: 'media', label: 'Media' },
+      { id: 'documents', label: 'Docs' },
+      { id: 'other', label: 'Other' }
+    ];
+    this.sortOptions = [
+      { value: 'loadOrder', label: 'Load Order' },
+      { value: 'fileSize', label: 'File Size' },
+      { value: 'fileType', label: 'File Type' },
+      { value: 'alphabetical', label: 'Alphabetical' },
+      { value: 'newest', label: 'Newest' }
+    ];
+    this.sizeOptions = [
+      { value: 'any', label: 'Any Size' },
+      { value: '<10KB', label: '< 10KB' },
+      { value: '10-100KB', label: '10 – 100KB' },
+      { value: '100KB-1MB', label: '100KB – 1MB' },
+      { value: '1-10MB', label: '1 – 10MB' },
+      { value: '>10MB', label: '> 10MB' }
+    ];
+
+    // Close dropdowns when clicking outside
+    this._documentClickHandler = (e) => {
+      if (!e.target.closest('.custom-dropdown')) {
+        this.closeAllDropdowns();
+      }
+    };
+  }
+
+  init(container) {
+    this.container = container;
+    this.render();
+    this.attachEvents();
+    document.addEventListener('click', this._documentClickHandler);
+  }
+
+  onFilterChange(callback) {
+    this.callback = callback;
+  }
+
+  getCurrentFilter() {
+    return { ...this.state };
+  }
+
+  updateCounts(counts) {
+    this.categories.forEach(cat => {
+      const el = this.container.querySelector(`.filter-chip[data-cat="${cat.id}"] .chip-count`);
+      if (el) {
+        const count = cat.id === '*' ? (counts['*'] || 0) : (counts[cat.id] || 0);
+        el.textContent = count;
+      }
+    });
+  }
+
+  buildDropdownHtml(id, options, currentValue) {
+    const current = options.find(o => o.value === currentValue);
+    return `
+      <div class="custom-dropdown" data-dropdown="${id}">
+        <button class="dropdown-trigger" type="button">
+          <span class="dropdown-label">${current?.label || 'Select'}</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+
+  render() {
+    const chipsHtml = this.categories.map(cat => {
+      const isActive = this.state.category === cat.id;
+      const catColor = cat.id === '*' ? 'var(--text-primary)' : `var(--cat-${cat.id})`;
+      const catTextColor = cat.id === '*' ? 'var(--text-secondary)' : `var(--cat-${cat.id}-text)`;
+      return `
+        <button class="filter-chip ${isActive ? 'active' : ''}"
+                data-cat="${cat.id}"
+                style="${isActive
+                  ? `background-color: ${cat.id === '*' ? 'var(--text-primary)' : catColor}; color: white; border-color: ${cat.id === '*' ? 'var(--text-primary)' : catColor};`
+                  : `border-color: ${cat.id === '*' ? 'var(--text-tertiary)' : catColor}; color: ${cat.id === '*' ? 'var(--text-secondary)' : catTextColor};`
+                }">
+          <span class="chip-text">${cat.label}</span>
+          <span class="chip-count" style="opacity:0.7;">0</span>
+        </button>
+      `;
+    }).join('');
+
+    this.container.innerHTML = `
+      <div class="filter-bar-container">
+        <div class="search-input-wrapper">
+          <svg width="16" height="16"><use href="icons/ui-icons.svg#icon-search"></use></svg>
+          <input type="text" class="search-input" id="search-input"
+                 placeholder="Search by name or URL..."
+                 value="${this.state.searchText}">
+        </div>
+
+        <div class="chip-row" id="category-chips">
+          ${chipsHtml}
+        </div>
+
+        <div style="display:flex; gap:8px; margin-top:4px; align-items:center; flex-wrap:wrap;">
+          ${this.buildDropdownHtml('sort', this.sortOptions, this.state.sortBy)}
+
+          <button id="new-only-toggle" class="filter-toggle ${this.state.newOnly ? 'active' : ''}">
+            New Only
+          </button>
+
+          ${this.buildDropdownHtml('size', this.sizeOptions, this.state.sizeRange)}
+        </div>
+      </div>
+    `;
+  }
+
+  attachEvents() {
+    // Category chip clicks
+    this.container.addEventListener('click', (e) => {
+      const chip = e.target.closest('.filter-chip');
+      if (chip) {
+        const catId = chip.getAttribute('data-cat');
+        this.state.category = catId;
+
+        // Re-render chips to update active styles
+        const chips = this.container.querySelectorAll('.filter-chip');
+        chips.forEach(c => {
+          const cId = c.getAttribute('data-cat');
+          const isNowActive = cId === catId;
+          c.classList.toggle('active', isNowActive);
+          const catColor = cId === '*' ? 'var(--text-primary)' : `var(--cat-${cId})`;
+          const catTextColor = cId === '*' ? 'var(--text-secondary)' : `var(--cat-${cId}-text)`;
+          if (isNowActive) {
+            c.style.backgroundColor = cId === '*' ? 'var(--text-primary)' : catColor;
+            c.style.color = 'white';
+            c.style.borderColor = cId === '*' ? 'var(--text-primary)' : catColor;
+          } else {
+            c.style.backgroundColor = 'transparent';
+            c.style.color = cId === '*' ? 'var(--text-secondary)' : catTextColor;
+            c.style.borderColor = cId === '*' ? 'var(--text-tertiary)' : catColor;
+          }
+        });
+
+        this.notifyChange();
+        return;
+      }
+
+      const newOnlyToggle = e.target.closest('#new-only-toggle');
+      if (newOnlyToggle) {
+        this.state.newOnly = !this.state.newOnly;
+        newOnlyToggle.classList.toggle('active', this.state.newOnly);
+        this.notifyChange();
+        return;
+      }
+
+      // Custom dropdown trigger click
+      const trigger = e.target.closest('.dropdown-trigger');
+      if (trigger) {
+        e.stopPropagation();
+        const dropdown = trigger.closest('.custom-dropdown');
+        const dropdownId = dropdown.getAttribute('data-dropdown');
+
+        if (this.openDropdown === dropdownId) {
+          this.closeAllDropdowns();
+        } else {
+          this.closeAllDropdowns();
+          this.openDropdownMenu(dropdown, dropdownId);
+        }
+        return;
+      }
+
+      // Dropdown option click
+      const option = e.target.closest('.dropdown-option');
+      if (option) {
+        const dropdown = option.closest('.custom-dropdown');
+        const dropdownId = dropdown.getAttribute('data-dropdown');
+        const value = option.getAttribute('data-value');
+
+        if (dropdownId === 'sort') {
+          this.state.sortBy = value;
+        } else if (dropdownId === 'size') {
+          this.state.sizeRange = value;
+        }
+
+        // Update trigger label
+        const trigger = dropdown.querySelector('.dropdown-trigger .dropdown-label');
+        if (trigger) trigger.textContent = option.textContent;
+
+        this.closeAllDropdowns();
+        this.notifyChange();
+        return;
+      }
+    });
+
+    // Search input
+    const searchInput = this.container.querySelector('#search-input');
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        clearTimeout(this.searchTimeout);
+        this.searchTimeout = setTimeout(() => {
+          this.state.searchText = e.target.value.toLowerCase().trim();
+          this.notifyChange();
+        }, 150);
+      });
+    }
+  }
+
+  openDropdownMenu(dropdownEl, dropdownId) {
+    const trigger = dropdownEl.querySelector('.dropdown-trigger');
+    trigger.classList.add('open');
+
+    const options = dropdownId === 'sort' ? this.sortOptions : this.sizeOptions;
+    const currentValue = dropdownId === 'sort' ? this.state.sortBy : this.state.sizeRange;
+
+    const menuHtml = options.map(opt =>
+      `<button class="dropdown-option ${opt.value === currentValue ? 'active' : ''}" data-value="${opt.value}">${opt.label}</button>`
+    ).join('');
+
+    const menu = document.createElement('div');
+    menu.className = 'dropdown-menu';
+    menu.innerHTML = menuHtml;
+    dropdownEl.appendChild(menu);
+    this.openDropdown = dropdownId;
+  }
+
+  closeAllDropdowns() {
+    const menus = this.container.querySelectorAll('.dropdown-menu');
+    menus.forEach(menu => {
+      menu.classList.add('closing');
+      setTimeout(() => menu.remove(), 150);
+    });
+    const triggers = this.container.querySelectorAll('.dropdown-trigger.open');
+    triggers.forEach(t => t.classList.remove('open'));
+    this.openDropdown = null;
+  }
+
+  notifyChange() {
+    if (this.callback) {
+      this.callback({ ...this.state });
+    }
+  }
+}

package/sidepanel/components/progress-overlay.js

@@ -0,0 +1,79 @@
+export class ProgressOverlay {
+  constructor() {
+    this.container = null;
+    this.retryCallback = null;
+    this.cancelCallback = null;
+  }
+
+  init(container) {
+    this.container = container;
+  }
+
+  show(progress) {
+    if (!progress) return;
+    const { total, completed, failed, items } = progress;
+    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+    const itemsHtml = (items || []).map(item => {
+      let icon = '⏳';
+      let statusText = 'Queued';
+      let statusClass = 'status-queued';
+      if (item.status === 'completed') { icon = '✅'; statusText = 'Complete'; statusClass = 'status-complete'; }
+      else if (item.status === 'downloading') { icon = '⬇️'; statusText = 'Downloading...'; statusClass = 'status-downloading'; }
+      else if (item.status === 'failed') { icon = '❌'; statusText = item.error || 'Failed'; statusClass = 'status-failed'; }
+
+      return `
+        <div class="progress-item ${statusClass}">
+          <span class="progress-item-icon">${icon}</span>
+          <span class="progress-item-name">${item.filename || 'unknown'}</span>
+          <span class="progress-item-status">${statusText}</span>
+          ${item.status === 'failed' ? `<button class="progress-retry-btn" data-url="${item.url}">Retry</button>` : ''}
+        </div>
+      `;
+    }).join('');
+
+    this.container.innerHTML = `
+      <div class="progress-card">
+        <h3 class="progress-title">Downloading Files</h3>
+        <div class="progress-bar-container">
+          <div class="progress-bar-fill" style="width: ${percent}%"></div>
+        </div>
+        <p class="progress-counter">${completed} of ${total} completed${failed > 0 ? ` · ${failed} failed` : ''}</p>
+        <div class="progress-items-list">
+          ${itemsHtml}
+        </div>
+        <button class="progress-cancel-btn" id="progress-cancel">
+          ${completed >= total ? 'Close' : 'Cancel'}
+        </button>
+      </div>
+    `;
+
+    this.container.classList.add('active');
+
+    // Attach events
+    this.container.querySelector('#progress-cancel')?.addEventListener('click', () => {
+      this.hide();
+      if (this.cancelCallback) this.cancelCallback();
+    });
+
+    this.container.querySelectorAll('.progress-retry-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const url = btn.getAttribute('data-url');
+        if (this.retryCallback && url) this.retryCallback(url);
+      });
+    });
+  }
+
+  hide() {
+    this.container.classList.remove('active');
+    this.container.innerHTML = '';
+  }
+
+  onRetry(callback) {
+    this.retryCallback = callback;
+  }
+
+  onCancel(callback) {
+    this.cancelCallback = callback;
+  }
+}

package/sidepanel/components/recording-indicator.js

@@ -0,0 +1,32 @@
+// sidepanel/components/recording-indicator.js
+// v1.2 — No blinking: only updates if state actually changes
+
+export class RecordingIndicator {
+  constructor() {
+    this.container = null;
+    this._lastActive = null;
+    this._lastDeepScan = null;
+  }
+
+  init(container) {
+    this.container = container;
+    this.update({ active: false, deepScan: false });
+  }
+
+  update(state) {
+    const { active, deepScan } = state;
+
+    // Prevent unnecessary re-renders that cause blinking
+    if (active === this._lastActive && deepScan === this._lastDeepScan) return;
+    this._lastActive = active;
+    this._lastDeepScan = deepScan;
+
+    this.container.innerHTML = `
+      <div class="recording-indicator">
+        <span class="recording-dot ${active ? 'active' : ''}"></span>
+        <span>${active ? 'Capturing' : 'Ready'}</span>
+        ${active && deepScan ? '<span class="deep-scan-badge">Deep Scan</span>' : ''}
+      </div>
+    `;
+  }
+}

package/sidepanel/components/stats-header.js

@@ -0,0 +1,37 @@
+// sidepanel/components/stats-header.js
+// v1.2 — No blinking: only updates if stats actually change
+
+export class StatsHeader {
+  constructor() {
+    this.container = null;
+    this._lastKey = '';
+  }
+
+  init(container) {
+    this.container = container;
+    this.update({ total: 0, newSinceLastBatch: 0, tabUrl: '' });
+  }
+
+  update(stats) {
+    const { total, newSinceLastBatch, tabUrl } = stats;
+
+    // Prevent unnecessary re-renders that cause blinking
+    const key = `${total}_${newSinceLastBatch}_${tabUrl}`;
+    if (key === this._lastKey) return;
+    this._lastKey = key;
+
+    let domain = '';
+    try {
+      domain = new URL(tabUrl).hostname;
+    } catch(e) {}
+
+    this.container.innerHTML = `
+      <div class="stats-header-container">
+        <span class="stats-count">${total}</span>
+        <span>files detected</span>
+        ${newSinceLastBatch > 0 ? `<span>· <strong>${newSinceLastBatch}</strong> new</span>` : ''}
+        ${domain ? `<span class="stats-domain" title="${domain}">${domain}</span>` : ''}
+      </div>
+    `;
+  }
+}

package/sidepanel/icons/file-type-icons.svg

@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="icon-images" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 18L10 11L14 15L20 8" />
+    <circle cx="16" cy="6" r="2" />
+    <rect x="2" y="3" width="20" height="18" rx="2" />
+  </symbol>
+
+  <symbol id="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 20C4 20 8 4 12 4C16 4 20 20 20 20" />
+    <circle cx="4" cy="20" r="1.5" />
+    <circle cx="12" cy="4" r="1.5" />
+    <circle cx="20" cy="20" r="1.5" />
+  </symbol>
+
+  <symbol id="icon-pdf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <path d="M8 13h2a2 2 0 1 0 0-4H8v8" />
+    <path d="M14 17h-2v-8h2a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2z" />
+  </symbol>
+
+  <symbol id="icon-scripts" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="8 6 2 12 8 18" />
+    <polyline points="16 6 22 12 16 18" />
+    <line x1="14" y1="4" x2="10" y2="20" />
+  </symbol>
+
+  <symbol id="icon-stylesheets" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.53-.21-1.04-.59-1.41-.36-.36-.59-.86-.59-1.41 0-1.1.9-2 2-2h1.17C19.5 14.67 22 12.17 22 9c0-3.87-4.48-7-10-7zm-4 9c-.83 0-1.5-.67-1.5-1.5S7.17 8 8 8s1.5.67 1.5 1.5S8.83 11 8 11zm4-3c-.83 0-1.5-.67-1.5-1.5S11.17 5 12 5s1.5.67 1.5 1.5S12.83 8 12 8zm4 3c-.83 0-1.5-.67-1.5-1.5S15.17 8 16 8s1.5.67 1.5 1.5S16.83 11 16 11z" />
+  </symbol>
+
+  <symbol id="icon-fonts" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 20L9 5h6l5 15" />
+    <path d="M6 14h12" />
+  </symbol>
+
+  <symbol id="icon-media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10" />
+    <polygon points="10 8 16 12 10 16 10 8" />
+  </symbol>
+
+  <symbol id="icon-documents" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="8" y1="13" x2="16" y2="13" />
+    <line x1="8" y1="17" x2="16" y2="17" />
+  </symbol>
+
+  <symbol id="icon-other" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <path d="M12 12a1.5 1.5 0 0 1 1.5 1.5c0 .7-.5 1-1 1.5s-1 .8-1 1.5v.5" />
+    <circle cx="12" cy="19" r=".5" />
+  </symbol>
+</svg>