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

@@ -24,12 +24,12 @@ declare global {
// Paragraph type configuration
const PARAGRAPH_TYPES = [
{ value: 'section', label: 'Section', icon: 'lucide:heading' },
{ value: 'clause', label: 'Clause', icon: 'lucide:file-text' },
{ value: 'definition', label: 'Definition', icon: 'lucide:book-open' },
{ value: 'obligation', label: 'Obligation', icon: 'lucide:check-square' },
{ value: 'condition', label: 'Condition', icon: 'lucide:git-branch' },
{ value: 'schedule', label: 'Schedule', icon: 'lucide:calendar' },
{ value: 'section', label: 'Section', icon: 'lucide:Heading' },
{ value: 'clause', label: 'Clause', icon: 'lucide:FileText' },
{ value: 'definition', label: 'Definition', icon: 'lucide:BookOpen' },
{ value: 'obligation', label: 'Obligation', icon: 'lucide:CheckSquare' },
{ value: 'condition', label: 'Condition', icon: 'lucide:GitBranch' },
{ value: 'schedule', label: 'Schedule', icon: 'lucide:Calendar' },
];
@customElement('sdig-contract-content')
@@ -718,7 +718,7 @@ export class SdigContractContent extends DeesElement {
<div class="content-toolbar">
<div class="toolbar-left">
<div class="search-box">
<dees-icon .iconFA=${'lucide:search'}></dees-icon>
<dees-icon .icon=${'lucide:Search'}></dees-icon>
<input
type="text"
placeholder="Search paragraphs..."
@@ -734,20 +734,20 @@ export class SdigContractContent extends DeesElement {
@click=${() => (this.viewMode = 'list')}
title="List view"
>
<dees-icon .iconFA=${'lucide:list'}></dees-icon>
<dees-icon .icon=${'lucide:List'}></dees-icon>
</button>
<button
class="view-toggle-btn ${this.viewMode === 'outline' ? 'active' : ''}"
@click=${() => (this.viewMode = 'outline')}
title="Outline view"
>
<dees-icon .iconFA=${'lucide:layout-list'}></dees-icon>
<dees-icon .icon=${'lucide:LayoutList'}></dees-icon>
</button>
</div>
${!this.readonly
? html`
<button class="btn btn-primary" @click=${() => this.handleAddParagraph()}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Paragraph
</button>
`
@@ -759,7 +759,7 @@ export class SdigContractContent extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
<dees-icon .icon=${'lucide:FileText'}></dees-icon>
Contract Content
</div>
<span class="paragraph-count">${this.contract.paragraphs.length} paragraphs</span>
@@ -777,7 +777,7 @@ export class SdigContractContent extends DeesElement {
? html`
<div class="add-paragraph-row">
<button class="add-paragraph-btn" @click=${() => this.handleAddParagraph()}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add paragraph
</button>
</div>
@@ -786,13 +786,13 @@ export class SdigContractContent extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:file-plus'}></dees-icon>
<dees-icon .icon=${'lucide:FilePlus'}></dees-icon>
<h4>No Paragraphs Yet</h4>
<p>Start building your contract by adding paragraphs. Each paragraph can contain clauses, definitions, or obligations.</p>
${!this.readonly
? html`
<button class="btn btn-primary" @click=${() => this.handleAddParagraph()}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add First Paragraph
</button>
`
@@ -819,7 +819,7 @@ export class SdigContractContent extends DeesElement {
${!this.readonly
? html`
<div class="paragraph-drag-handle">
<dees-icon .iconFA=${'lucide:grip-vertical'}></dees-icon>
<dees-icon .icon=${'lucide:GripVertical'}></dees-icon>
</div>
`
: ''}
@@ -880,28 +880,28 @@ export class SdigContractContent extends DeesElement {
@click=${(e: Event) => { e.stopPropagation(); this.handleEditParagraph(paragraph); }}
title="Edit"
>
<dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
<dees-icon .icon=${'lucide:Pencil'}></dees-icon>
</button>
<button
class="btn btn-ghost"
@click=${(e: Event) => { e.stopPropagation(); this.handleMoveParagraph(paragraph.uniqueId, 'up'); }}
title="Move up"
>
<dees-icon .iconFA=${'lucide:chevron-up'}></dees-icon>
<dees-icon .icon=${'lucide:ChevronUp'}></dees-icon>
</button>
<button
class="btn btn-ghost"
@click=${(e: Event) => { e.stopPropagation(); this.handleMoveParagraph(paragraph.uniqueId, 'down'); }}
title="Move down"
>
<dees-icon .iconFA=${'lucide:chevron-down'}></dees-icon>
<dees-icon .icon=${'lucide:ChevronDown'}></dees-icon>
</button>
<button
class="btn btn-ghost btn-danger"
@click=${(e: Event) => { e.stopPropagation(); this.handleDeleteParagraph(paragraph.uniqueId); }}
title="Delete"
>
<dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
<dees-icon .icon=${'lucide:Trash2'}></dees-icon>
</button>
</div>
`