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

ts_web/elements/sdig-contracteditor/sdig-contracteditor.ts

@@ -34,6 +34,7 @@ import '../sdig-contract-signatures/sdig-contract-signatures.js';
 import '../sdig-contract-attachments/sdig-contract-attachments.js';
 import '../sdig-contract-collaboration/sdig-contract-collaboration.js';
 import '../sdig-contract-audit/sdig-contract-audit.js';
+import '../sdig-collaboration-sidebar/sdig-collaboration-sidebar.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -338,6 +339,11 @@ export class SdigContracteditor extends DeesElement {
         color: ${cssManager.bdTheme('#111111', '#fafafa')};
       }
 
+      .btn-ghost.active {
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        color: ${cssManager.bdTheme('#111111', '#fafafa')};
+      }
+
       .btn:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -490,6 +496,40 @@ export class SdigContracteditor extends DeesElement {
     this.store?.redo();
   }
 
+  private handleCommentClick(e: CustomEvent) {
+    // Navigate to collaboration section and highlight comment
+    this.store?.setActiveSection('collaboration');
+    this.dispatchEvent(
+      new CustomEvent('comment-focus', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleSuggestionClick(e: CustomEvent) {
+    // Navigate to collaboration section and highlight suggestion
+    this.store?.setActiveSection('collaboration');
+    this.dispatchEvent(
+      new CustomEvent('suggestion-focus', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleSidebarAddComment(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('comment-added', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   // ============================================================================
   // PUBLIC API
   // ============================================================================
@@ -691,7 +731,7 @@ export class SdigContracteditor extends DeesElement {
   private renderPlaceholder(sectionConfig: typeof EDITOR_SECTIONS[0] | undefined, message: string): TemplateResult {
     return html`
       <div class="section-placeholder">
-        <dees-icon .iconFA=${sectionConfig?.icon || 'lucide:file'}></dees-icon>
+        <dees-icon .icon=${sectionConfig?.icon || 'lucide:File'}></dees-icon>
         <h3>${sectionConfig?.label || 'Section'}</h3>
         <p>${message}</p>
       </div>
@@ -757,10 +797,17 @@ export class SdigContracteditor extends DeesElement {
                 `
               : ''}
             <button class="btn btn-ghost" @click=${this.handleUndo} ?disabled=${!this.store?.canUndo()}>
-              <dees-icon .iconFA=${'lucide:undo-2'}></dees-icon>
+              <dees-icon .icon=${'lucide:Undo2'}></dees-icon>
             </button>
             <button class="btn btn-ghost" @click=${this.handleRedo} ?disabled=${!this.store?.canRedo()}>
-              <dees-icon .iconFA=${'lucide:redo-2'}></dees-icon>
+              <dees-icon .icon=${'lucide:Redo2'}></dees-icon>
+            </button>
+            <button
+              class="btn btn-ghost ${this.showSidebar ? 'active' : ''}"
+              @click=${() => (this.showSidebar = !this.showSidebar)}
+              title="${this.showSidebar ? 'Hide sidebar' : 'Show sidebar'}"
+            >
+              <dees-icon .icon=${'lucide:PanelRight'}></dees-icon>
             </button>
           </div>
         </div>
@@ -774,7 +821,7 @@ export class SdigContracteditor extends DeesElement {
                 @click=${() => this.handleSectionChange(section.id)}
                 ?disabled=${section.disabled}
               >
-                <dees-icon .iconFA=${section.icon}></dees-icon>
+                <dees-icon .icon=${section.icon}></dees-icon>
                 <span>${section.label}</span>
                 ${section.badge
                   ? html`<span class="nav-badge">${section.badge}</span>`
@@ -792,7 +839,12 @@ export class SdigContracteditor extends DeesElement {
           ${this.showSidebar
             ? html`
                 <aside class="editor-sidebar">
-                  <!-- Sidebar content - collaboration panel -->
+                  <sdig-collaboration-sidebar
+                    .contract=${contract}
+                    @comment-click=${this.handleCommentClick}
+                    @suggestion-click=${this.handleSuggestionClick}
+                    @add-comment=${this.handleSidebarAddComment}
+                  ></sdig-collaboration-sidebar>
                 </aside>
               `
             : ''}