feat(icons): migrate icon usage to the new dees-icon API and integrate collaboration sidebar into the editor

This commit is contained in:
2025-12-18 17:46:16 +00:00
parent 3d266c89b2
commit a9c2d2230c
17 changed files with 1090 additions and 149 deletions

View File

@@ -37,11 +37,11 @@ interface IAttachment {
// File type configuration
const FILE_TYPES = {
document: { icon: 'lucide:file-text', color: '#3b82f6', label: 'Document' },
image: { icon: 'lucide:image', color: '#10b981', label: 'Image' },
spreadsheet: { icon: 'lucide:sheet', color: '#22c55e', label: 'Spreadsheet' },
pdf: { icon: 'lucide:file-type', color: '#ef4444', label: 'PDF' },
other: { icon: 'lucide:file', color: '#6b7280', label: 'File' },
document: { icon: 'lucide:FileText', color: '#3b82f6', label: 'Document' },
image: { icon: 'lucide:Image', color: '#10b981', label: 'Image' },
spreadsheet: { icon: 'lucide:Sheet', color: '#22c55e', label: 'Spreadsheet' },
pdf: { icon: 'lucide:FileType', color: '#ef4444', label: 'PDF' },
other: { icon: 'lucide:File', color: '#6b7280', label: 'File' },
};
@customElement('sdig-contract-attachments')
@@ -631,7 +631,7 @@ export class SdigContractAttachments extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:paperclip'}></dees-icon>
<dees-icon .icon=${'lucide:Paperclip'}></dees-icon>
Attachments
</div>
<span class="section-count">${this.attachments.length} files</span>
@@ -662,7 +662,7 @@ export class SdigContractAttachments extends DeesElement {
@click=${this.handleFileSelect}
>
<div class="upload-zone-icon">
<dees-icon .iconFA=${'lucide:upload-cloud'}></dees-icon>
<dees-icon .icon=${'lucide:UploadCloud'}></dees-icon>
</div>
<div class="upload-zone-title">Drop files here or click to upload</div>
<div class="upload-zone-subtitle">Add supporting documents, images, or spreadsheets</div>
@@ -680,7 +680,7 @@ export class SdigContractAttachments extends DeesElement {
`
: html`
<div class="empty-state" style="margin-top: 20px;">
<dees-icon .iconFA=${'lucide:file-x'}></dees-icon>
<dees-icon .icon=${'lucide:FileX'}></dees-icon>
<h4>No Attachments</h4>
<p>Upload files to attach them to this contract</p>
</div>
@@ -692,13 +692,13 @@ export class SdigContractAttachments extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:files'}></dees-icon>
<dees-icon .icon=${'lucide:Files'}></dees-icon>
Prior Contracts
</div>
${!this.readonly
? html`
<button class="btn btn-secondary" @click=${this.handleAddPriorContract}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Link Contract
</button>
`
@@ -715,7 +715,7 @@ export class SdigContractAttachments extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:link'}></dees-icon>
<dees-icon .icon=${'lucide:Link'}></dees-icon>
<h4>No Prior Contracts</h4>
<p>Link related or predecessor contracts here</p>
</div>
@@ -732,7 +732,7 @@ export class SdigContractAttachments extends DeesElement {
return html`
<div class="attachment-item">
<div class="attachment-icon" style="background: ${typeConfig.color}20; color: ${typeConfig.color}">
<dees-icon .iconFA=${typeConfig.icon}></dees-icon>
<dees-icon .icon=${typeConfig.icon}></dees-icon>
</div>
<div class="attachment-info">
<div class="attachment-name">${attachment.name}</div>
@@ -742,21 +742,21 @@ export class SdigContractAttachments extends DeesElement {
${this.formatFileSize(attachment.size)}
</span>
<span class="attachment-meta-item">
<dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
<dees-icon .icon=${'lucide:Calendar'}></dees-icon>
${this.formatDate(attachment.uploadedAt)}
</span>
<span class="attachment-meta-item">
<dees-icon .iconFA=${'lucide:user'}></dees-icon>
<dees-icon .icon=${'lucide:User'}></dees-icon>
${this.getPartyName(attachment.uploadedBy)}
</span>
</div>
</div>
<div class="attachment-actions">
<button class="btn btn-ghost" title="Download">
<dees-icon .iconFA=${'lucide:download'}></dees-icon>
<dees-icon .icon=${'lucide:Download'}></dees-icon>
</button>
<button class="btn btn-ghost" title="Preview">
<dees-icon .iconFA=${'lucide:eye'}></dees-icon>
<dees-icon .icon=${'lucide:Eye'}></dees-icon>
</button>
${!this.readonly
? html`
@@ -765,7 +765,7 @@ export class SdigContractAttachments extends DeesElement {
title="Delete"
@click=${() => this.handleDeleteAttachment(attachment.id)}
>
<dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
<dees-icon .icon=${'lucide:Trash2'}></dees-icon>
</button>
`
: ''}
@@ -778,7 +778,7 @@ export class SdigContractAttachments extends DeesElement {
return html`
<div class="prior-contract-item">
<div class="prior-contract-icon">
<dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
<dees-icon .icon=${'lucide:FileText'}></dees-icon>
</div>
<div class="prior-contract-info">
<div class="prior-contract-title">${priorContract.title}</div>
@@ -786,7 +786,7 @@ export class SdigContractAttachments extends DeesElement {
</div>
<div class="prior-contract-actions">
<button class="btn btn-secondary btn-sm">
<dees-icon .iconFA=${'lucide:external-link'}></dees-icon>
<dees-icon .icon=${'lucide:ExternalLink'}></dees-icon>
View
</button>
${!this.readonly
@@ -795,7 +795,7 @@ export class SdigContractAttachments extends DeesElement {
class="btn btn-ghost btn-danger"
@click=${() => this.handleRemovePriorContract(index)}
>
<dees-icon .iconFA=${'lucide:unlink'}></dees-icon>
<dees-icon .icon=${'lucide:Unlink'}></dees-icon>
</button>
`
: ''}