@memberjunction/ng-conversations 5.40.2 → 5.42.0

package/dist/lib/components/conversation/conversation-list.component.js

@@ -1,332 +1,532 @@
 import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
-import { ConversationEngine } from '@memberjunction/core-entities';
+import { ConversationEngine, UserInfoEngine } from '@memberjunction/core-entities';
+import { ProjectFormModalComponent } from '../project/project-form-modal.component';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { UUIDsEqual } from '@memberjunction/global';
+import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/dialog.service";
 import * as i2 from "../../services/notification.service";
 import * as i3 from "../../services/active-tasks.service";
-import * as i4 from "@angular/forms";
-import * as i5 from "../notification/notification-badge.component";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/forms";
+import * as i7 from "../notification/notification-badge.component";
+const _c0 = a0 => ({ $implicit: a0 });
+const _c1 = (a0, a1) => ({ $implicit: a0, depth: a1 });
 const _forTrack0 = ($index, $item) => $item.ID;
-function ConversationListComponent_Conditional_4_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onUnpinSidebarClick($event)); });
-    i0.ɵɵelement(1, "i", 24);
+const _forTrack1 = ($index, $item) => $item.project.ID;
+function ConversationListComponent_Conditional_4_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onUnpinSidebarClick($event)); });
+    i0.ɵɵelement(1, "i", 22);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Hide Sidebar");
     i0.ɵɵelementEnd()();
 } }
 function ConversationListComponent_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "button", 19);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRefreshConversationsClick($event)); });
-    i0.ɵɵelement(2, "i", 20);
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "button", 16);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshConversationsClick($event)); });
+    i0.ɵɵelement(2, "i", 17);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 21);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSelectConversationsClick($event)); });
-    i0.ɵɵelement(6, "i", 22);
+    i0.ɵɵelementStart(5, "button", 18);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSelectConversationsClick($event)); });
+    i0.ɵɵelement(6, "i", 19);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Select Conversations");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, ConversationListComponent_Conditional_4_Conditional_3_Conditional_9_Template, 4, 0, "button", 23);
+    i0.ɵɵelementStart(9, "button", 18);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Conditional_3_Template_button_click_9_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onToggleGroupByClick($event)); });
+    i0.ɵɵelement(10, "i", 20);
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(13, ConversationListComponent_Conditional_4_Conditional_3_Conditional_13_Template, 4, 0, "button", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r1.isRefreshing);
+    i0.ɵɵproperty("disabled", ctx_r2.isRefreshing);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-spin", ctx_r1.isRefreshing);
+    i0.ɵɵclassProp("fa-spin", ctx_r2.isRefreshing);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.isRefreshing ? "Refreshing..." : "Refresh");
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(!ctx_r1.isMobileView ? 9 : -1);
+    i0.ɵɵtextInterpolate(ctx_r2.isRefreshing ? "Refreshing..." : "Refresh");
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("fa-folder-tree", ctx_r2.groupBy !== "project")("fa-list", ctx_r2.groupBy === "project");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.groupBy === "project" ? "Show as flat list" : "Group by folder");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.isMobileView ? 13 : -1);
 } }
 function ConversationListComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "button", 16);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderMenu($event)); });
-    i0.ɵɵelement(2, "i", 17);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "button", 13);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_4_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleHeaderMenu($event)); });
+    i0.ɵɵelement(2, "i", 14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, ConversationListComponent_Conditional_4_Conditional_3_Template, 10, 5, "div", 18);
+    i0.ɵɵconditionalCreate(3, ConversationListComponent_Conditional_4_Conditional_3_Template, 14, 10, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.isHeaderMenuOpen ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.isHeaderMenuOpen ? 3 : -1);
+} }
+function ConversationListComponent_Conditional_10_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 28);
+} if (rf & 2) {
+    const conversation_r7 = ctx.$implicit;
+    i0.ɵɵnextContext(2);
+    const conversationItem_r8 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", conversationItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, conversation_r7));
 } }
-function ConversationListComponent_Conditional_10_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "input", 37);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Conditional_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r8); const conversation_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleConversationSelection(conversation_r7.ID)); });
+function ConversationListComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 23);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.togglePinned()); });
+    i0.ɵɵelementStart(2, "div", 24);
+    i0.ɵɵelement(3, "i", 25)(4, "i", 26);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Pinned");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "div", 27);
+    i0.ɵɵrepeaterCreate(8, ConversationListComponent_Conditional_10_For_9_Template, 1, 4, "ng-container", 28, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const conversation_r7 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.selectedConversationIds.has(conversation_r7.ID));
+    i0.ɵɵclassProp("expanded", ctx_r2.pinnedExpanded);
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("expanded", ctx_r2.pinnedExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.pinnedConversations);
+} }
+function ConversationListComponent_Conditional_11_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 28);
+} if (rf & 2) {
+    const node_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵnextContext(2);
+    const folderNode_r11 = i0.ɵɵreference(15);
+    i0.ɵɵproperty("ngTemplateOutlet", folderNode_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r10));
+} }
+function ConversationListComponent_Conditional_11_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ConversationListComponent_Conditional_11_For_10_Conditional_0_Template, 1, 4, "ng-container", 28);
+} if (rf & 2) {
+    const node_r10 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!ctx_r2.isSearching || node_r10.hasContent ? 0 : -1);
 } }
-function ConversationListComponent_Conditional_10_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "i", 38);
+function ConversationListComponent_Conditional_11_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtext(1, "No folders yet \u2014 create one to organize conversations.");
     i0.ɵɵelementEnd();
 } }
-function ConversationListComponent_Conditional_10_For_9_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 34);
+function ConversationListComponent_Conditional_11_For_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 28);
 } if (rf & 2) {
-    const conversation_r7 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", ctx_r1.sharedWithMeTooltip(conversation_r7));
+    const conversation_r12 = ctx.$implicit;
+    i0.ɵɵnextContext(2);
+    const conversationItem_r8 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", conversationItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, conversation_r12));
 } }
-function ConversationListComponent_Conditional_10_For_9_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Conditional_12_Conditional_3_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 43);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Conditional_12_Conditional_3_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r10); const conversation_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.togglePin(conversation_r7, $event)); });
-    i0.ɵɵelement(2, "i", 44);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Unpin");
+function ConversationListComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleFolders()); })("dragover", function ConversationListComponent_Conditional_11_Template_div_dragover_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFoldersRootDragOver($event)); })("dragleave", function ConversationListComponent_Conditional_11_Template_div_dragleave_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragLeave("folders-root")); })("drop", function ConversationListComponent_Conditional_11_Template_div_drop_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFoldersRootDrop($event)); });
+    i0.ɵɵelementStart(2, "div", 24);
+    i0.ɵɵelement(3, "i", 25);
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5, "Folders");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 43);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Conditional_12_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const conversation_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.renameConversation(conversation_r7); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
-    i0.ɵɵelement(6, "i", 45);
-    i0.ɵɵelementStart(7, "span");
-    i0.ɵɵtext(8, "Rename");
+    i0.ɵɵelementStart(6, "button", 31);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_11_Template_button_click_6_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createFolder(null, $event)); });
+    i0.ɵɵelement(7, "i", 32);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 27);
+    i0.ɵɵrepeaterCreate(9, ConversationListComponent_Conditional_11_For_10_Template, 1, 1, null, null, _forTrack1);
+    i0.ɵɵconditionalCreate(11, ConversationListComponent_Conditional_11_Conditional_11_Template, 2, 0, "div", 33);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(9, "div", 46);
-    i0.ɵɵelementStart(10, "button", 47);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Conditional_12_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r10); const conversation_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.deleteConversation(conversation_r7); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
-    i0.ɵɵelement(11, "i", 48);
-    i0.ɵɵelementStart(12, "span");
-    i0.ɵɵtext(13, "Delete");
+    i0.ɵɵelementStart(12, "div", 34);
+    i0.ɵɵlistener("dragover", function ConversationListComponent_Conditional_11_Template_div_dragover_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUngroupedDragOver($event)); })("dragleave", function ConversationListComponent_Conditional_11_Template_div_dragleave_12_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragLeave("ungrouped")); })("drop", function ConversationListComponent_Conditional_11_Template_div_drop_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUngroupedDrop($event)); });
+    i0.ɵɵelementStart(13, "div", 23);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_11_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleUngrouped()); });
+    i0.ɵɵelementStart(14, "div", 24);
+    i0.ɵɵelement(15, "i", 25);
+    i0.ɵɵelementStart(16, "span");
+    i0.ɵɵtext(17);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(18, "div", 27);
+    i0.ɵɵrepeaterCreate(19, ConversationListComponent_Conditional_11_For_20_Template, 1, 4, "ng-container", 28, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r2.foldersExpanded)("drag-over", ctx_r2.dragOverTargetId === "folders-root");
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("expanded", ctx_r2.foldersExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.folderTree);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.folderTree.length === 0 ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("drag-over", ctx_r2.dragOverTargetId === "ungrouped");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r2.ungroupedExpanded);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.folderTree.length > 0 ? "Ungrouped" : "Messages");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r2.ungroupedExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.ungroupedConversations);
 } }
-function ConversationListComponent_Conditional_10_For_9_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "button", 39);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Conditional_12_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r9); const conversation_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleMenu(conversation_r7.ID, $event)); });
-    i0.ɵɵelement(2, "i", 40);
+function ConversationListComponent_Conditional_12_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 28);
+} if (rf & 2) {
+    const conversation_r14 = ctx.$implicit;
+    i0.ɵɵnextContext(2);
+    const conversationItem_r8 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", conversationItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, conversation_r14));
+} }
+function ConversationListComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 23);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_12_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleDirectMessages()); });
+    i0.ɵɵelementStart(2, "div", 24);
+    i0.ɵɵelement(3, "i", 25);
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5, "Messages");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(6, "div", 27);
+    i0.ɵɵrepeaterCreate(7, ConversationListComponent_Conditional_12_For_8_Template, 1, 4, "ng-container", 28, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r2.directMessagesExpanded);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("expanded", ctx_r2.directMessagesExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.unpinnedConversations);
+} }
+function ConversationListComponent_Conditional_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_13_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectAll()); });
+    i0.ɵɵtext(1, "Select All");
+    i0.ɵɵelementEnd();
+} }
+function ConversationListComponent_Conditional_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_13_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.deselectAll()); });
+    i0.ɵɵtext(1, "Deselect All");
+    i0.ɵɵelementEnd();
+} }
+function ConversationListComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 35)(2, "span", 36);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, ConversationListComponent_Conditional_10_For_9_Conditional_12_Conditional_3_Template, 14, 0, "div", 41);
+    i0.ɵɵconditionalCreate(4, ConversationListComponent_Conditional_13_Conditional_4_Template, 2, 0, "button", 37)(5, ConversationListComponent_Conditional_13_Conditional_5_Template, 2, 0, "button", 37);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 38)(7, "button", 39);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_13_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.bulkDeleteConversations()); });
+    i0.ɵɵelement(8, "i", 40);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 41);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_13_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSelectionMode()); });
+    i0.ɵɵtext(11, " Cancel ");
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const conversation_r7 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r2.selectedConversationIds.size, " selected");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.selectedConversationIds.size < ctx_r2.filteredConversations.length ? 4 : 5);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.IsMenuOpen(conversation_r7) ? 3 : -1);
+    i0.ɵɵproperty("disabled", ctx_r2.selectedConversationIds.size === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Delete (", ctx_r2.selectedConversationIds.size, ") ");
 } }
-function ConversationListComponent_Conditional_10_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_For_9_Template_div_click_0_listener() { const conversation_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleConversationClick(conversation_r7)); });
-    i0.ɵɵconditionalCreate(1, ConversationListComponent_Conditional_10_For_9_Conditional_1_Template, 2, 1, "div", 27);
-    i0.ɵɵelementStart(2, "div", 28);
-    i0.ɵɵconditionalCreate(3, ConversationListComponent_Conditional_10_For_9_Conditional_3_Template, 2, 0, "div", 29);
-    i0.ɵɵelementStart(4, "div", 30);
-    i0.ɵɵelement(5, "mj-notification-badge", 31);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 32)(7, "div", 33);
-    i0.ɵɵtext(8);
-    i0.ɵɵconditionalCreate(9, ConversationListComponent_Conditional_10_For_9_Conditional_9_Template, 1, 1, "i", 34);
+function ConversationListComponent_ng_template_14_Conditional_14_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 28);
+} if (rf & 2) {
+    const child_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵnextContext(3);
+    const folderNode_r11 = i0.ɵɵreference(15);
+    i0.ɵɵproperty("ngTemplateOutlet", folderNode_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, child_r20));
+} }
+function ConversationListComponent_ng_template_14_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ConversationListComponent_ng_template_14_Conditional_14_For_2_Conditional_0_Template, 1, 4, "ng-container", 28);
+} if (rf & 2) {
+    const child_r20 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(!ctx_r2.isSearching || child_r20.hasContent ? 0 : -1);
+} }
+function ConversationListComponent_ng_template_14_Conditional_14_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 28);
+} if (rf & 2) {
+    const conversation_r21 = ctx.$implicit;
+    const node_r19 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵnextContext();
+    const conversationItem_r8 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", conversationItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, conversation_r21, node_r19.depth + 1));
+} }
+function ConversationListComponent_ng_template_14_Conditional_14_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtext(1, "Empty \u2014 drop a conversation here");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 35);
-    i0.ɵɵtext(11);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, ConversationListComponent_Conditional_10_For_9_Conditional_12_Template, 4, 1, "div", 36);
+} if (rf & 2) {
+    const node_r19 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵstyleProp("padding-left", 26 + node_r19.depth * 14, "px");
+} }
+function ConversationListComponent_ng_template_14_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵrepeaterCreate(1, ConversationListComponent_ng_template_14_Conditional_14_For_2_Template, 1, 1, null, null, _forTrack1);
+    i0.ɵɵrepeaterCreate(3, ConversationListComponent_ng_template_14_Conditional_14_For_4_Template, 1, 5, "ng-container", 28, _forTrack0);
+    i0.ɵɵconditionalCreate(5, ConversationListComponent_ng_template_14_Conditional_14_Conditional_5_Template, 2, 2, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const conversation_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", ctx_r1.IsConversationActive(conversation_r7))("renamed", ctx_r1.IsConversationRenamed(conversation_r7));
+    const node_r19 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSelectionMode ? 1 : -1);
+    i0.ɵɵrepeater(node_r19.children);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasActiveTasks(conversation_r7.ID) ? 3 : -1);
+    i0.ɵɵrepeater(node_r19.conversations);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("conversationId", conversation_r7.ID);
+    i0.ɵɵconditional(node_r19.totalCount === 0 && !ctx_r2.isSearching ? 5 : -1);
+} }
+function ConversationListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵlistener("dragstart", function ConversationListComponent_ng_template_14_Template_div_dragstart_0_listener($event) { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFolderDragStart(node_r19, $event)); })("dragend", function ConversationListComponent_ng_template_14_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFolderDragEnd()); })("click", function ConversationListComponent_ng_template_14_Template_div_click_0_listener() { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleFolder(node_r19.project.ID)); })("dragover", function ConversationListComponent_ng_template_14_Template_div_dragover_0_listener($event) { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFolderDragOver(node_r19.project.ID, $event)); })("dragleave", function ConversationListComponent_ng_template_14_Template_div_dragleave_0_listener() { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragLeave(node_r19.project.ID)); })("drop", function ConversationListComponent_ng_template_14_Template_div_drop_0_listener($event) { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFolderDrop(node_r19.project, $event)); });
+    i0.ɵɵelement(1, "i", 44)(2, "i");
+    i0.ɵɵelementStart(3, "span", 45);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 46);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 47);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_14_Template_div_click_7_listener($event) { i0.ɵɵrestoreView(_r18); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(8, "button", 48);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_14_Template_button_click_8_listener($event) { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createFolder(node_r19.project.ID, $event)); });
+    i0.ɵɵelement(9, "i", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 49);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_14_Template_button_click_10_listener($event) { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editFolder(node_r19.project, $event)); });
+    i0.ɵɵelement(11, "i", 50);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 51);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_14_Template_button_click_12_listener($event) { const node_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteFolder(node_r19.project, $event)); });
+    i0.ɵɵelement(13, "i", 40);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(14, ConversationListComponent_ng_template_14_Conditional_14_Template, 6, 1, "div", 52);
+} if (rf & 2) {
+    const node_r19 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("padding-left", 12 + node_r19.depth * 14, "px");
+    i0.ɵɵclassProp("drag-over", ctx_r2.dragOverTargetId === node_r19.project.ID)("dragging", ctx_r2.draggedFolderId === node_r19.project.ID);
+    i0.ɵɵproperty("draggable", true)("title", node_r19.project.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", conversation_r7.Name + (conversation_r7.Description ? "\n" + conversation_r7.Description : ""));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", conversation_r7.Name, " ");
+    i0.ɵɵclassProp("expanded", ctx_r2.isFolderExpanded(node_r19.project.ID));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSharedWithMe(conversation_r7) ? 9 : -1);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fas ", node_r19.project.Icon || "fa-folder", " folder-icon"));
+    i0.ɵɵstyleProp("color", node_r19.project.Color || null);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(conversation_r7.Description);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.isSelectionMode ? 12 : -1);
+    i0.ɵɵtextInterpolate(node_r19.project.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(node_r19.totalCount);
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(ctx_r2.isFolderExpanded(node_r19.project.ID) ? 14 : -1);
 } }
-function ConversationListComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 10);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_10_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.togglePinned()); });
-    i0.ɵɵelementStart(2, "div", 11);
-    i0.ɵɵelement(3, "i", 12)(4, "i", 25);
-    i0.ɵɵelementStart(5, "span");
-    i0.ɵɵtext(6, "Pinned");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 13);
-    i0.ɵɵrepeaterCreate(8, ConversationListComponent_Conditional_10_For_9_Template, 13, 12, "div", 14, _forTrack0);
+function ConversationListComponent_ng_template_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "input", 65);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r24); const conversation_r23 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r2.toggleConversationSelection(conversation_r23.ID)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("expanded", ctx_r1.pinnedExpanded);
-    i0.ɵɵadvance(6);
-    i0.ɵɵclassProp("expanded", ctx_r1.pinnedExpanded);
+    const conversation_r23 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.pinnedConversations);
+    i0.ɵɵproperty("checked", ctx_r2.selectedConversationIds.has(conversation_r23.ID));
 } }
-function ConversationListComponent_For_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "input", 37);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Conditional_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r13); const conversation_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleConversationSelection(conversation_r12.ID)); });
+function ConversationListComponent_ng_template_16_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelementEnd();
+} }
+function ConversationListComponent_ng_template_16_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 62);
+} if (rf & 2) {
+    const conversation_r23 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r2.sharedWithMeTooltip(conversation_r23));
+} }
+function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 75);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_For_11_Template_button_click_0_listener() { const f_r29 = i0.ɵɵrestoreView(_r28).$implicit; const conversation_r23 = i0.ɵɵnextContext(4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectMoveTarget(conversation_r23, f_r29.project.ID)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const conversation_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
+    const f_r29 = ctx.$implicit;
+    const conversation_r23 = i0.ɵɵnextContext(4).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("padding-left", 14 + f_r29.depth * 12, "px");
+    i0.ɵɵclassProp("current", ctx_r2.IsInFolder(conversation_r23, f_r29.project.ID));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.selectedConversationIds.has(conversation_r12.ID));
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fas ", f_r29.project.Icon || "fa-folder"));
+    i0.ɵɵstyleProp("color", f_r29.project.Color || null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(f_r29.project.Name);
 } }
-function ConversationListComponent_For_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "i", 38);
+function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.closeMoveSubmenu($event)); });
+    i0.ɵɵelement(1, "i", 72);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Move to folder");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(4, "div", 73);
+    i0.ɵɵelementStart(5, "div", 74)(6, "button", 75);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r27); const conversation_r23 = i0.ɵɵnextContext(3).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectMoveTarget(conversation_r23, null)); });
+    i0.ɵɵelement(7, "i", 76);
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9, "No folder");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(10, ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_For_11_Template, 4, 10, "button", 77, _forTrack1);
     i0.ɵɵelementEnd();
-} }
-function ConversationListComponent_For_19_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 34);
+    i0.ɵɵelement(12, "div", 73);
+    i0.ɵɵelementStart(13, "button", 75);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_Template_button_click_13_listener($event) { i0.ɵɵrestoreView(_r27); const conversation_r23 = i0.ɵɵnextContext(3).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createFolderForConversation(conversation_r23, $event)); });
+    i0.ɵɵelement(14, "i", 32);
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16, "New folder\u2026");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const conversation_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", ctx_r1.sharedWithMeTooltip(conversation_r12));
+    const conversation_r23 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("current", !conversation_r23.ProjectID);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r2.flatFolders);
 } }
-function ConversationListComponent_For_19_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Conditional_12_Conditional_3_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 43);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Conditional_12_Conditional_3_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r15); const conversation_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.togglePin(conversation_r12, $event)); });
-    i0.ɵɵelement(2, "i", 44);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Pin");
+function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 75);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r30); const conversation_r23 = i0.ɵɵnextContext(3).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.togglePin(conversation_r23, $event)); });
+    i0.ɵɵelement(1, "i", 78);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 43);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Conditional_12_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r15); const conversation_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.renameConversation(conversation_r12); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
-    i0.ɵɵelement(6, "i", 45);
-    i0.ɵɵelementStart(7, "span");
-    i0.ɵɵtext(8, "Rename");
+    i0.ɵɵelementStart(4, "button", 75);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_2_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r30); const conversation_r23 = i0.ɵɵnextContext(3).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openMoveSubmenu(conversation_r23.ID, $event)); });
+    i0.ɵɵelement(5, "i", 79);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Move to folder");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(8, "i", 80);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 75);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_2_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r30); const conversation_r23 = i0.ɵɵnextContext(3).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.renameConversation(conversation_r23); return i0.ɵɵresetView(ctx_r2.closeMenu()); });
+    i0.ɵɵelement(10, "i", 81);
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12, "Rename");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(9, "div", 46);
-    i0.ɵɵelementStart(10, "button", 47);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Conditional_12_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r15); const conversation_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.deleteConversation(conversation_r12); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
-    i0.ɵɵelement(11, "i", 48);
-    i0.ɵɵelementStart(12, "span");
-    i0.ɵɵtext(13, "Delete");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(13, "div", 73);
+    i0.ɵɵelementStart(14, "button", 82);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r30); const conversation_r23 = i0.ɵɵnextContext(3).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.deleteConversation(conversation_r23); return i0.ɵɵresetView(ctx_r2.closeMenu()); });
+    i0.ɵɵelement(15, "i", 40);
+    i0.ɵɵelementStart(16, "span");
+    i0.ɵɵtext(17, "Delete");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const conversation_r23 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(conversation_r23.IsPinned ? "Unpin" : "Pin");
+} }
+function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵconditionalCreate(1, ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_1_Template, 17, 2)(2, ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Conditional_2_Template, 18, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const conversation_r23 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsMoveSubmenuOpen(conversation_r23) ? 1 : 2);
 } }
-function ConversationListComponent_For_19_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "button", 39);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Conditional_12_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r14); const conversation_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMenu(conversation_r12.ID, $event)); });
-    i0.ɵɵelement(2, "i", 40);
+function ConversationListComponent_ng_template_16_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 64)(1, "button", 67);
+    i0.ɵɵlistener("click", function ConversationListComponent_ng_template_16_Conditional_12_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const conversation_r23 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleMenu(conversation_r23.ID, $event)); });
+    i0.ɵɵelement(2, "i", 68);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, ConversationListComponent_For_19_Conditional_12_Conditional_3_Template, 14, 0, "div", 41);
+    i0.ɵɵconditionalCreate(3, ConversationListComponent_ng_template_16_Conditional_12_Conditional_3_Template, 3, 1, "div", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const conversation_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
+    const conversation_r23 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.IsMenuOpen(conversation_r12) ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.IsMenuOpen(conversation_r23) ? 3 : -1);
 } }
-function ConversationListComponent_For_19_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_19_Template_div_click_0_listener() { const conversation_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleConversationClick(conversation_r12)); });
-    i0.ɵɵconditionalCreate(1, ConversationListComponent_For_19_Conditional_1_Template, 2, 1, "div", 27);
-    i0.ɵɵelementStart(2, "div", 28);
-    i0.ɵɵconditionalCreate(3, ConversationListComponent_For_19_Conditional_3_Template, 2, 0, "div", 29);
-    i0.ɵɵelementStart(4, "div", 30);
-    i0.ɵɵelement(5, "mj-notification-badge", 31);
+function ConversationListComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵlistener("dragstart", function ConversationListComponent_ng_template_16_Template_div_dragstart_0_listener($event) { const conversation_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConversationDragStart(conversation_r23, $event)); })("dragend", function ConversationListComponent_ng_template_16_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConversationDragEnd()); })("click", function ConversationListComponent_ng_template_16_Template_div_click_0_listener() { const conversation_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleConversationClick(conversation_r23)); });
+    i0.ɵɵconditionalCreate(1, ConversationListComponent_ng_template_16_Conditional_1_Template, 2, 1, "div", 55);
+    i0.ɵɵelementStart(2, "div", 56);
+    i0.ɵɵconditionalCreate(3, ConversationListComponent_ng_template_16_Conditional_3_Template, 2, 0, "div", 57);
+    i0.ɵɵelementStart(4, "div", 58);
+    i0.ɵɵelement(5, "mj-notification-badge", 59);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 32)(7, "div", 33);
+    i0.ɵɵelementStart(6, "div", 60)(7, "div", 61);
     i0.ɵɵtext(8);
-    i0.ɵɵconditionalCreate(9, ConversationListComponent_For_19_Conditional_9_Template, 1, 1, "i", 34);
+    i0.ɵɵconditionalCreate(9, ConversationListComponent_ng_template_16_Conditional_9_Template, 1, 1, "i", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 35);
+    i0.ɵɵelementStart(10, "div", 63);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, ConversationListComponent_For_19_Conditional_12_Template, 4, 1, "div", 36);
+    i0.ɵɵconditionalCreate(12, ConversationListComponent_ng_template_16_Conditional_12_Template, 4, 1, "div", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const conversation_r12 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("active", ctx_r1.IsConversationActive(conversation_r12))("renamed", ctx_r1.IsConversationRenamed(conversation_r12));
+    const conversation_r23 = ctx.$implicit;
+    const depth_r31 = ctx.depth;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("padding-left", depth_r31 ? 16 + depth_r31 * 14 : 16, "px");
+    i0.ɵɵclassProp("active", ctx_r2.IsConversationActive(conversation_r23))("renamed", ctx_r2.IsConversationRenamed(conversation_r23))("dragging", ctx_r2.IsConversationDragging(conversation_r23));
+    i0.ɵɵproperty("draggable", !ctx_r2.isSelectionMode);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSelectionMode ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.isSelectionMode ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasActiveTasks(conversation_r12.ID) ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.hasActiveTasks(conversation_r23.ID) ? 3 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("conversationId", conversation_r12.ID);
+    i0.ɵɵproperty("conversationId", conversation_r23.ID);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", conversation_r12.Name + (conversation_r12.Description ? "\n" + conversation_r12.Description : ""));
+    i0.ɵɵproperty("title", conversation_r23.Name + (conversation_r23.Description ? "\n" + conversation_r23.Description : ""));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", conversation_r12.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", conversation_r23.Name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSharedWithMe(conversation_r12) ? 9 : -1);
+    i0.ɵɵconditional(ctx_r2.isSharedWithMe(conversation_r23) ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(conversation_r12.Description);
+    i0.ɵɵtextInterpolate(conversation_r23.Description);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.isSelectionMode ? 12 : -1);
-} }
-function ConversationListComponent_Conditional_20_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_20_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectAll()); });
-    i0.ɵɵtext(1, "Select All");
-    i0.ɵɵelementEnd();
-} }
-function ConversationListComponent_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_20_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.deselectAll()); });
-    i0.ɵɵtext(1, "Deselect All");
-    i0.ɵɵelementEnd();
-} }
-function ConversationListComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 49)(2, "span", 50);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ConversationListComponent_Conditional_20_Conditional_4_Template, 2, 0, "button", 51)(5, ConversationListComponent_Conditional_20_Conditional_5_Template, 2, 0, "button", 51);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 52)(7, "button", 53);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_20_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.bulkDeleteConversations()); });
-    i0.ɵɵelement(8, "i", 48);
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 54);
-    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_20_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSelectionMode()); });
-    i0.ɵɵtext(11, " Cancel ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.selectedConversationIds.size, " selected");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedConversationIds.size < ctx_r1.filteredConversations.length ? 4 : 5);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedConversationIds.size === 0);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Delete (", ctx_r1.selectedConversationIds.size, ") ");
+    i0.ɵɵconditional(!ctx_r2.isSelectionMode ? 12 : -1);
 } }
 export class ConversationListComponent {
     dialogService;
     notificationService;
     activeTasksService;
+    mjDialogService;
     cdr;
     environmentId;
     currentUser;
@@ -342,45 +542,81 @@ export class ConversationListComponent {
     refreshRequested = new EventEmitter(); // Emitted after list refresh so chat area can also reload
     directMessagesExpanded = true;
     pinnedExpanded = true;
+    foldersExpanded = true;
+    ungroupedExpanded = true;
     openMenuConversationId = null;
     conversationIdsWithTasks = new Set();
     isSelectionMode = false;
     selectedConversationIds = new Set();
-    searchQuery = '';
     isHeaderMenuOpen = false;
     isRefreshing = false;
+    /** UserInfoEngine key for persisting folder collapse state + group-by mode. */
+    static FolderPrefsKey = 'mj.conversations.folderPrefs.v1';
+    /** How the conversation list is grouped. 'project' = folders, 'none' = flat list. */
+    groupBy = 'project';
+    /** Precomputed groupings, rebuilt whenever conversations/projects/search change. */
+    pinnedConversations = [];
+    unpinnedConversations = [];
+    ungroupedConversations = [];
+    folderTree = [];
+    /** Flattened folder list (depth-ordered) for the "Move to folder" menu. */
+    flatFolders = [];
+    /** Folder IDs (normalized) whose children are collapsed. Absent = expanded. */
+    collapsedFolderIds = new Set();
+    /** Drag-and-drop state. */
+    draggedConversationId = null;
+    draggedFolderId = null;
+    dragOverTargetId = null;
+    /** When set, the open conversation menu is showing its "Move to folder" picker. */
+    moveSubmenuConversationId = null;
+    _searchQuery = '';
     destroy$ = new Subject();
     engine = ConversationEngine.Instance;
     // Local UI state for loading/refreshing
     IsLoading = false;
-    constructor(dialogService, notificationService, activeTasksService, cdr) {
+    constructor(dialogService, notificationService, activeTasksService, mjDialogService, cdr) {
         this.dialogService = dialogService;
         this.notificationService = notificationService;
         this.activeTasksService = activeTasksService;
+        this.mjDialogService = mjDialogService;
         this.cdr = cdr;
     }
+    get searchQuery() {
+        return this._searchQuery;
+    }
+    set searchQuery(value) {
+        this._searchQuery = value ?? '';
+        this.rebuildGroups();
+    }
+    /** True when a search filter is active. */
+    get isSearching() {
+        return this._searchQuery.trim().length > 0;
+    }
+    /** Conversations matching the current search (used by selection-mode helpers). */
     get filteredConversations() {
-        if (!this.searchQuery || this.searchQuery.trim() === '') {
-            return this.engine.Conversations;
+        return this.filterConversations(this.engine.Conversations);
+    }
+    filterConversations(conversations) {
+        if (!this.isSearching) {
+            return conversations;
         }
-        const lowerQuery = this.searchQuery.toLowerCase();
-        return this.engine.Conversations.filter(c => (c.Name?.toLowerCase().includes(lowerQuery)) ||
+        const lowerQuery = this._searchQuery.toLowerCase();
+        return conversations.filter(c => (c.Name?.toLowerCase().includes(lowerQuery)) ||
             (c.Description?.toLowerCase().includes(lowerQuery)));
     }
-    get pinnedConversations() {
-        return this.filteredConversations.filter(c => c.IsPinned);
-    }
-    get unpinnedConversations() {
-        return this.filteredConversations.filter(c => !c.IsPinned);
-    }
     ngOnInit() {
-        // Load conversations on init
+        // Restore persisted folder collapse state + group-by preference
+        this.loadFolderPrefs();
+        // Load conversations (and folders) on init
         this.engine.LoadConversations(this.environmentId, this.currentUser, false);
-        // Re-run change detection whenever the conversations list changes (pin, archive, rename, etc.).
-        // filteredConversations/pinnedConversations/unpinnedConversations are pure getters that read
-        // engine.Conversations directly, so Angular doesn't know to re-evaluate them unless
-        // we explicitly trigger a check here.
+        // Rebuild the precomputed groupings whenever conversations OR projects change
+        // (pin, archive, rename, move-to-folder, folder create/rename/delete, etc.).
         this.engine.Conversations$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.rebuildGroups();
+            this.cdr.detectChanges();
+        });
+        this.engine.Projects$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.rebuildGroups();
             this.cdr.detectChanges();
         });
         // Subscribe to conversation IDs with active tasks (hot set)
@@ -414,6 +650,11 @@ export class ConversationListComponent {
         this.toggleSelectionMode();
         this.closeHeaderMenu();
     }
+    onToggleGroupByClick(event) {
+        event.stopPropagation();
+        this.toggleGroupBy();
+        this.closeHeaderMenu();
+    }
     async onRefreshConversationsClick(event) {
         event.stopPropagation();
         if (this.isRefreshing)
@@ -450,6 +691,382 @@ export class ConversationListComponent {
     togglePinned() {
         this.pinnedExpanded = !this.pinnedExpanded;
     }
+    toggleFolders() {
+        this.foldersExpanded = !this.foldersExpanded;
+    }
+    toggleUngrouped() {
+        this.ungroupedExpanded = !this.ungroupedExpanded;
+    }
+    // ========================================================================
+    // FOLDER GROUPING
+    // ========================================================================
+    /**
+     * Recomputes pinned/unpinned/ungrouped lists and the folder tree from the
+     * engine's conversation + project caches and the current search filter.
+     */
+    rebuildGroups() {
+        const matching = this.filterConversations(this.engine.Conversations);
+        this.pinnedConversations = matching.filter(c => c.IsPinned);
+        this.unpinnedConversations = matching.filter(c => !c.IsPinned);
+        const projects = this.engine.Projects;
+        const projectIds = new Set(projects.map(p => NormalizeUUID(p.ID)));
+        // Bucket unpinned conversations by their folder (pinned ones live in the
+        // Pinned section). Conversations with no/unknown folder are "ungrouped".
+        const conversationsByProject = new Map();
+        const ungrouped = [];
+        for (const c of this.unpinnedConversations) {
+            const pid = c.ProjectID ? NormalizeUUID(c.ProjectID) : null;
+            if (pid && projectIds.has(pid)) {
+                const arr = conversationsByProject.get(pid) ?? [];
+                arr.push(c);
+                conversationsByProject.set(pid, arr);
+            }
+            else {
+                ungrouped.push(c);
+            }
+        }
+        this.ungroupedConversations = ungrouped;
+        // Index projects by parent. A project whose parent isn't loaded is treated
+        // as a root so it never disappears from the tree.
+        const childrenByParent = new Map();
+        for (const p of projects) {
+            const parentId = p.ParentID ? NormalizeUUID(p.ParentID) : null;
+            const key = parentId && projectIds.has(parentId) ? parentId : null;
+            const arr = childrenByParent.get(key) ?? [];
+            arr.push(p);
+            childrenByParent.set(key, arr);
+        }
+        const build = (parentKey, depth) => {
+            const projectsAtLevel = childrenByParent.get(parentKey) ?? [];
+            return projectsAtLevel.map(p => {
+                const children = build(NormalizeUUID(p.ID), depth + 1);
+                const conversations = conversationsByProject.get(NormalizeUUID(p.ID)) ?? [];
+                const totalCount = conversations.length + children.reduce((sum, ch) => sum + ch.totalCount, 0);
+                const hasContent = conversations.length > 0 || children.some(ch => ch.hasContent);
+                return { project: p, depth, conversations, children, totalCount, hasContent };
+            });
+        };
+        this.folderTree = build(null, 0);
+        this.flatFolders = this.flattenFolders(this.folderTree);
+    }
+    flattenFolders(nodes) {
+        const out = [];
+        for (const node of nodes) {
+            out.push(node);
+            out.push(...this.flattenFolders(node.children));
+        }
+        return out;
+    }
+    findFolderNode(nodes, projectId) {
+        for (const node of nodes) {
+            if (UUIDsEqual(node.project.ID, projectId))
+                return node;
+            const found = this.findFolderNode(node.children, projectId);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    isFolderExpanded(projectId) {
+        return !this.collapsedFolderIds.has(NormalizeUUID(projectId));
+    }
+    toggleFolder(projectId) {
+        const key = NormalizeUUID(projectId);
+        if (this.collapsedFolderIds.has(key)) {
+            this.collapsedFolderIds.delete(key);
+        }
+        else {
+            this.collapsedFolderIds.add(key);
+        }
+        this.saveFolderPrefs();
+    }
+    toggleGroupBy() {
+        this.groupBy = this.groupBy === 'project' ? 'none' : 'project';
+        this.saveFolderPrefs();
+        this.rebuildGroups();
+    }
+    loadFolderPrefs() {
+        try {
+            const raw = UserInfoEngine.Instance.GetSetting(ConversationListComponent.FolderPrefsKey);
+            if (!raw)
+                return;
+            const parsed = JSON.parse(raw);
+            this.collapsedFolderIds = new Set((parsed.collapsed ?? []).map(id => NormalizeUUID(id)));
+            if (parsed.groupBy === 'none' || parsed.groupBy === 'project') {
+                this.groupBy = parsed.groupBy;
+            }
+        }
+        catch {
+            // Corrupt/legacy value — ignore and use defaults
+        }
+    }
+    saveFolderPrefs() {
+        const payload = JSON.stringify({
+            collapsed: Array.from(this.collapsedFolderIds),
+            groupBy: this.groupBy
+        });
+        UserInfoEngine.Instance.SetSettingDebounced(ConversationListComponent.FolderPrefsKey, payload);
+    }
+    // ========================================================================
+    // DRAG & DROP (move conversation into/out of a folder)
+    // ========================================================================
+    onConversationDragStart(conversation, event) {
+        if (this.isSelectionMode)
+            return;
+        this.draggedFolderId = null;
+        this.draggedConversationId = conversation.ID;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', conversation.ID);
+        }
+    }
+    onConversationDragEnd() {
+        this.draggedConversationId = null;
+        this.dragOverTargetId = null;
+    }
+    onFolderDragStart(node, event) {
+        event.stopPropagation();
+        this.draggedConversationId = null;
+        this.draggedFolderId = node.project.ID;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', node.project.ID);
+        }
+    }
+    onFolderDragEnd() {
+        this.draggedFolderId = null;
+        this.dragOverTargetId = null;
+    }
+    onFolderDragOver(projectId, event) {
+        // A conversation can drop onto any folder; a folder can drop onto any folder
+        // that isn't itself or one of its own descendants (which would create a cycle).
+        const accepts = this.draggedConversationId
+            ? true
+            : this.draggedFolderId
+                ? this.isValidFolderDropTarget(projectId)
+                : false;
+        if (!accepts)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        this.dragOverTargetId = projectId;
+    }
+    onUngroupedDragOver(event) {
+        if (!this.draggedConversationId)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        this.dragOverTargetId = 'ungrouped';
+    }
+    /** The Folders section header accepts a dragged folder to move it back to the top level. */
+    onFoldersRootDragOver(event) {
+        if (!this.draggedFolderId)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        this.dragOverTargetId = 'folders-root';
+    }
+    onDragLeave(targetId) {
+        if (this.dragOverTargetId === targetId) {
+            this.dragOverTargetId = null;
+        }
+    }
+    onFolderDrop(project, event) {
+        event.preventDefault();
+        const conversationId = this.draggedConversationId;
+        const folderId = this.draggedFolderId;
+        this.dragOverTargetId = null;
+        this.draggedConversationId = null;
+        this.draggedFolderId = null;
+        if (conversationId) {
+            this.moveConversation(conversationId, project.ID);
+        }
+        else if (folderId && this.isValidFolderDropTarget(project.ID, folderId)) {
+            this.moveFolder(folderId, project.ID);
+        }
+    }
+    onUngroupedDrop(event) {
+        event.preventDefault();
+        const conversationId = this.draggedConversationId;
+        this.dragOverTargetId = null;
+        this.draggedConversationId = null;
+        if (conversationId) {
+            this.moveConversation(conversationId, null);
+        }
+    }
+    onFoldersRootDrop(event) {
+        event.preventDefault();
+        const folderId = this.draggedFolderId;
+        this.dragOverTargetId = null;
+        this.draggedFolderId = null;
+        if (folderId) {
+            this.moveFolder(folderId, null);
+        }
+    }
+    /**
+     * A folder can be dropped onto a target folder only if the target isn't the dragged
+     * folder itself and isn't one of its descendants (otherwise we'd create a cycle).
+     */
+    isValidFolderDropTarget(targetId, draggedId = this.draggedFolderId) {
+        if (!draggedId)
+            return false;
+        if (UUIDsEqual(targetId, draggedId))
+            return false;
+        return !this.isDescendantOf(targetId, draggedId);
+    }
+    /** True when `nodeId` is a descendant of `ancestorId` in the folder tree. */
+    isDescendantOf(nodeId, ancestorId) {
+        const byId = new Map(this.engine.Projects.map(p => [NormalizeUUID(p.ID), p]));
+        const visited = new Set();
+        let current = byId.get(NormalizeUUID(nodeId));
+        while (current?.ParentID) {
+            const parentKey = NormalizeUUID(current.ParentID);
+            if (visited.has(parentKey))
+                break; // guard against malformed cycles
+            visited.add(parentKey);
+            if (UUIDsEqual(parentKey, ancestorId))
+                return true;
+            current = byId.get(parentKey);
+        }
+        return false;
+    }
+    /** Assigns a conversation to a folder (or null to ungroup) and refreshes the view. */
+    async moveConversation(conversationId, projectId) {
+        try {
+            await this.engine.MoveConversationToProject(conversationId, projectId, this.currentUser);
+            // Reveal the destination folder so the user sees where it landed
+            if (projectId) {
+                this.collapsedFolderIds.delete(NormalizeUUID(projectId));
+            }
+            this.rebuildGroups();
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('Error moving conversation:', error);
+            await this.dialogService.alert('Error', 'Failed to move conversation. Please try again.');
+        }
+    }
+    /** Reparents a folder under another folder (or to the top level when projectId is null). */
+    async moveFolder(folderId, parentId) {
+        // No-op if it's already under that parent
+        const folder = this.engine.Projects.find(p => UUIDsEqual(p.ID, folderId));
+        const currentParent = folder?.ParentID ?? null;
+        const sameParent = (currentParent === null && parentId === null) ||
+            (!!currentParent && !!parentId && UUIDsEqual(currentParent, parentId));
+        if (sameParent)
+            return;
+        try {
+            await this.engine.MoveProjectToParent(folderId, parentId, this.currentUser);
+            // Reveal the new parent so the moved folder is visible
+            if (parentId) {
+                this.collapsedFolderIds.delete(NormalizeUUID(parentId));
+            }
+            this.rebuildGroups();
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('Error moving folder:', error);
+            await this.dialogService.alert('Error', 'Failed to move folder. Please try again.');
+        }
+    }
+    // ========================================================================
+    // MOVE-TO-FOLDER MENU
+    // ========================================================================
+    openMoveSubmenu(conversationId, event) {
+        event.stopPropagation();
+        this.moveSubmenuConversationId = conversationId;
+    }
+    closeMoveSubmenu(event) {
+        event.stopPropagation();
+        this.moveSubmenuConversationId = null;
+    }
+    IsInFolder(conversation, projectId) {
+        return !!conversation.ProjectID && UUIDsEqual(conversation.ProjectID, projectId);
+    }
+    selectMoveTarget(conversation, projectId) {
+        this.moveConversation(conversation.ID, projectId);
+        this.closeMenu();
+    }
+    // ========================================================================
+    // FOLDER CRUD (reuses the existing project form modal)
+    // ========================================================================
+    createFolder(parentId, event) {
+        if (event)
+            event.stopPropagation();
+        this.openFolderModal(null, parentId);
+    }
+    editFolder(project, event) {
+        if (event)
+            event.stopPropagation();
+        this.openFolderModal(project, null);
+    }
+    createFolderForConversation(conversation, event) {
+        event.stopPropagation();
+        const conversationId = conversation.ID;
+        this.closeMenu();
+        this.openFolderModal(null, null, (created) => this.moveConversation(conversationId, created.ID));
+    }
+    openFolderModal(project, parentId, onCreated) {
+        const dialogRef = this.mjDialogService.open({
+            content: ProjectFormModalComponent,
+            width: 600,
+            minWidth: 400
+        });
+        const instance = dialogRef.Content.instance;
+        instance.dialogRef = dialogRef;
+        instance.environmentId = this.environmentId;
+        instance.currentUser = this.currentUser;
+        if (project)
+            instance.project = project;
+        if (parentId)
+            instance.parentId = parentId;
+        instance.projectSaved.subscribe((saved) => {
+            // The engine's entity-event handler keeps the projects cache in sync; we
+            // just reveal the parent and refresh, then run any post-create action.
+            if (parentId) {
+                this.collapsedFolderIds.delete(NormalizeUUID(parentId));
+            }
+            this.rebuildGroups();
+            this.cdr.detectChanges();
+            if (onCreated)
+                onCreated(saved);
+        });
+    }
+    async deleteFolder(project, event) {
+        if (event)
+            event.stopPropagation();
+        const node = this.findFolderNode(this.folderTree, project.ID);
+        const total = node?.totalCount ?? 0;
+        const childCount = node?.children.length ?? 0;
+        let message = `Are you sure you want to delete the folder "${project.Name}"?`;
+        if (total > 0 || childCount > 0) {
+            message += `\n\nConversations inside will be moved out of the folder`;
+            message += childCount > 0 ? ` and subfolders will move up one level.` : `.`;
+            message += ` Nothing is deleted.`;
+        }
+        const confirmed = await this.dialogService.confirm({
+            title: 'Delete Folder',
+            message,
+            okText: 'Delete',
+            cancelText: 'Cancel',
+            dangerous: true
+        });
+        if (!confirmed)
+            return;
+        try {
+            await this.engine.DeleteProject(project.ID, this.currentUser);
+            this.collapsedFolderIds.delete(NormalizeUUID(project.ID));
+            this.rebuildGroups();
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('Error deleting folder:', error);
+            await this.dialogService.alert('Error', error instanceof Error ? error.message : 'Failed to delete folder. Please try again.');
+        }
+    }
     IsConversationActive(conversation) {
         return UUIDsEqual(conversation.ID, this.selectedConversationId);
     }
@@ -459,6 +1076,12 @@ export class ConversationListComponent {
     IsMenuOpen(conversation) {
         return UUIDsEqual(this.openMenuConversationId, conversation.ID);
     }
+    IsConversationDragging(conversation) {
+        return UUIDsEqual(this.draggedConversationId, conversation.ID);
+    }
+    IsMoveSubmenuOpen(conversation) {
+        return UUIDsEqual(this.moveSubmenuConversationId, conversation.ID);
+    }
     selectConversation(conversation) {
         this.conversationSelected.emit(conversation.ID);
         // Clear unread notifications when conversation is opened
@@ -524,6 +1147,7 @@ export class ConversationListComponent {
     }
     closeMenu() {
         this.openMenuConversationId = null;
+        this.moveSubmenuConversationId = null;
     }
     async togglePin(conversation, event) {
         if (event)
@@ -621,35 +1245,29 @@ export class ConversationListComponent {
             this.selectConversation(conversation);
         }
     }
-    static ɵfac = function ConversationListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConversationListComponent)(i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i2.NotificationService), i0.ɵɵdirectiveInject(i3.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function ConversationListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConversationListComponent)(i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i2.NotificationService), i0.ɵɵdirectiveInject(i3.ActiveTasksService), i0.ɵɵdirectiveInject(i4.MJDialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationListComponent, selectors: [["mj-conversation-list"]], hostBindings: function ConversationListComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function ConversationListComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", selectedConversationId: "selectedConversationId", renamedConversationId: "renamedConversationId", isSidebarPinned: "isSidebarPinned", isMobileView: "isMobileView" }, outputs: { conversationSelected: "conversationSelected", conversationDeleted: "conversationDeleted", newConversationRequested: "newConversationRequested", pinSidebarRequested: "pinSidebarRequested", unpinSidebarRequested: "unpinSidebarRequested", refreshRequested: "refreshRequested" }, standalone: false, decls: 21, vars: 8, consts: [[1, "conversation-list"], [1, "list-header"], [1, "header-top"], ["type", "text", "placeholder", "Search conversations...", 1, "search-input", 3, "ngModelChange", "ngModel"], [1, "header-menu-container"], ["title", "New Conversation", 1, "btn-new-conversation", 3, "click"], [1, "fas", "fa-plus"], [1, "list-content"], [1, "sidebar-section", "pinned-section"], [1, "sidebar-section"], [1, "section-header", 3, "click"], [1, "section-title"], [1, "fas", "fa-chevron-right"], [1, "chat-list"], [1, "conversation-item", 3, "active", "renamed"], [1, "selection-action-bar"], ["title", "Options", 1, "btn-menu", 3, "click"], [1, "fas", "fa-ellipsis-v"], [1, "header-dropdown-menu"], [1, "dropdown-item", 3, "click", "disabled"], [1, "fas", "fa-sync-alt"], [1, "dropdown-item", 3, "click"], [1, "fas", "fa-check-square"], [1, "dropdown-item"], [1, "fas", "fa-table-columns"], [1, "fas", "fa-thumbtack", "section-icon"], [1, "conversation-item", 3, "click"], [1, "conversation-checkbox"], [1, "conversation-icon-wrapper"], [1, "conversation-icon", "has-tasks"], [1, "badge-overlay"], [3, "conversationId"], [1, "conversation-info", 3, "title"], [1, "conversation-name"], [1, "fas", "fa-share-nodes", "shared-indicator", 3, "title"], [1, "conversation-preview"], [1, "conversation-actions"], ["type", "checkbox", 3, "click", "checked"], [1, "fas", "fa-spinner", "fa-pulse"], ["title", "More options", 1, "menu-btn", 3, "click"], [1, "fas", "fa-ellipsis"], [1, "context-menu"], [1, "context-menu", 3, "click"], [1, "menu-item", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "fas", "fa-edit"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fas", "fa-trash"], [1, "selection-info"], [1, "selection-count"], [1, "link-btn"], [1, "selection-actions"], [1, "btn-delete-bulk", 3, "click", "disabled"], [1, "btn-cancel", 3, "click"], [1, "link-btn", 3, "click"]], template: function ConversationListComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "input", 3);
-            i0.ɵɵtwoWayListener("ngModelChange", function ConversationListComponent_Template_input_ngModelChange_3_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.searchQuery, $event) || (ctx.searchQuery = $event); return $event; });
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", selectedConversationId: "selectedConversationId", renamedConversationId: "renamedConversationId", isSidebarPinned: "isSidebarPinned", isMobileView: "isMobileView" }, outputs: { conversationSelected: "conversationSelected", conversationDeleted: "conversationDeleted", newConversationRequested: "newConversationRequested", pinSidebarRequested: "pinSidebarRequested", unpinSidebarRequested: "unpinSidebarRequested", refreshRequested: "refreshRequested" }, standalone: false, decls: 18, vars: 5, consts: [["folderNode", ""], ["conversationItem", ""], [1, "conversation-list"], [1, "list-header"], [1, "header-top"], ["type", "text", "placeholder", "Search conversations...", 1, "search-input", 3, "ngModelChange", "ngModel"], [1, "header-menu-container"], ["title", "New Conversation", 1, "btn-new-conversation", 3, "click"], [1, "fas", "fa-plus"], [1, "list-content"], [1, "sidebar-section", "pinned-section"], [1, "sidebar-section"], [1, "selection-action-bar"], ["title", "Options", 1, "btn-menu", 3, "click"], [1, "fas", "fa-ellipsis-v"], [1, "header-dropdown-menu"], [1, "dropdown-item", 3, "click", "disabled"], [1, "fas", "fa-sync-alt"], [1, "dropdown-item", 3, "click"], [1, "fas", "fa-check-square"], [1, "fas"], [1, "dropdown-item"], [1, "fas", "fa-table-columns"], [1, "section-header", 3, "click"], [1, "section-title"], [1, "fas", "fa-chevron-right"], [1, "fas", "fa-thumbtack", "section-icon"], [1, "chat-list"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "sidebar-section", "folders-section"], [1, "section-header", 3, "click", "dragover", "dragleave", "drop"], ["title", "New Folder", 1, "section-action-btn", 3, "click"], [1, "fas", "fa-folder-plus"], [1, "folder-empty-hint"], [1, "sidebar-section", "ungrouped-section", 3, "dragover", "dragleave", "drop"], [1, "selection-info"], [1, "selection-count"], [1, "link-btn"], [1, "selection-actions"], [1, "btn-delete-bulk", 3, "click", "disabled"], [1, "fas", "fa-trash"], [1, "btn-cancel", 3, "click"], [1, "link-btn", 3, "click"], [1, "folder-row", 3, "dragstart", "dragend", "click", "dragover", "dragleave", "drop", "draggable", "title"], [1, "fas", "fa-chevron-right", "folder-chevron"], [1, "folder-name"], [1, "folder-count"], [1, "folder-actions", 3, "click"], ["title", "New Subfolder", 1, "folder-action-btn", 3, "click"], ["title", "Edit Folder", 1, "folder-action-btn", 3, "click"], [1, "fas", "fa-pen"], ["title", "Delete Folder", 1, "folder-action-btn", "danger", 3, "click"], [1, "folder-children"], [1, "folder-empty-hint", 3, "paddingLeft"], [1, "conversation-item", 3, "dragstart", "dragend", "click", "draggable"], [1, "conversation-checkbox"], [1, "conversation-icon-wrapper"], [1, "conversation-icon", "has-tasks"], [1, "badge-overlay"], [3, "conversationId"], [1, "conversation-info", 3, "title"], [1, "conversation-name"], [1, "fas", "fa-share-nodes", "shared-indicator", 3, "title"], [1, "conversation-preview"], [1, "conversation-actions"], ["type", "checkbox", 3, "click", "checked"], [1, "fas", "fa-spinner", "fa-pulse"], ["title", "More options", 1, "menu-btn", 3, "click"], [1, "fas", "fa-ellipsis"], [1, "context-menu"], [1, "context-menu", 3, "click"], [1, "menu-item", "back", 3, "click"], [1, "fas", "fa-chevron-left"], [1, "menu-divider"], [1, "move-folder-list"], [1, "menu-item", 3, "click"], [1, "fas", "fa-inbox"], [1, "menu-item", 3, "current", "paddingLeft"], [1, "fas", "fa-thumbtack"], [1, "fas", "fa-folder-tree"], [1, "fas", "fa-chevron-right", "submenu-arrow"], [1, "fas", "fa-edit"], [1, "menu-item", "danger", 3, "click"]], template: function ConversationListComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "input", 5);
+            i0.ɵɵtwoWayListener("ngModelChange", function ConversationListComponent_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchQuery, $event) || (ctx.searchQuery = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, ConversationListComponent_Conditional_4_Template, 4, 1, "div", 4);
+            i0.ɵɵconditionalCreate(4, ConversationListComponent_Conditional_4_Template, 4, 1, "div", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(5, "button", 5);
-            i0.ɵɵlistener("click", function ConversationListComponent_Template_button_click_5_listener() { return ctx.createNewConversation(); });
-            i0.ɵɵelement(6, "i", 6);
+            i0.ɵɵelementStart(5, "button", 7);
+            i0.ɵɵlistener("click", function ConversationListComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createNewConversation()); });
+            i0.ɵɵelement(6, "i", 8);
             i0.ɵɵelementStart(7, "span");
             i0.ɵɵtext(8, "New Conversation");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 7);
-            i0.ɵɵconditionalCreate(10, ConversationListComponent_Conditional_10_Template, 10, 4, "div", 8);
-            i0.ɵɵelementStart(11, "div", 9)(12, "div", 10);
-            i0.ɵɵlistener("click", function ConversationListComponent_Template_div_click_12_listener() { return ctx.toggleDirectMessages(); });
-            i0.ɵɵelementStart(13, "div", 11);
-            i0.ɵɵelement(14, "i", 12);
-            i0.ɵɵelementStart(15, "span");
-            i0.ɵɵtext(16, "Messages");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(17, "div", 13);
-            i0.ɵɵrepeaterCreate(18, ConversationListComponent_For_19_Template, 13, 12, "div", 14, _forTrack0);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(20, ConversationListComponent_Conditional_20_Template, 12, 4, "div", 15);
+            i0.ɵɵelementStart(9, "div", 9);
+            i0.ɵɵconditionalCreate(10, ConversationListComponent_Conditional_10_Template, 10, 4, "div", 10);
+            i0.ɵɵconditionalCreate(11, ConversationListComponent_Conditional_11_Template, 21, 14)(12, ConversationListComponent_Conditional_12_Template, 9, 4, "div", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(13, ConversationListComponent_Conditional_13_Template, 12, 4, "div", 12);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(14, ConversationListComponent_ng_template_14_Template, 15, 18, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(16, ConversationListComponent_ng_template_16_Template, 13, 17, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵtwoWayProperty("ngModel", ctx.searchQuery);
@@ -657,15 +1275,11 @@ export class ConversationListComponent {
             i0.ɵɵconditional(!ctx.isSelectionMode ? 4 : -1);
             i0.ɵɵadvance(6);
             i0.ɵɵconditional(ctx.pinnedConversations.length > 0 ? 10 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("expanded", ctx.directMessagesExpanded);
-            i0.ɵɵadvance(5);
-            i0.ɵɵclassProp("expanded", ctx.directMessagesExpanded);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.unpinnedConversations);
+            i0.ɵɵconditional(ctx.groupBy === "project" ? 11 : 12);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isSelectionMode ? 20 : -1);
-        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.NotificationBadgeComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n    .conversation-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: var(--mj-brand-secondary); }\n    .list-header[_ngcontent-%COMP%] { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent); }\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 12px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input[_ngcontent-%COMP%]::placeholder { color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); }\n    .search-input[_ngcontent-%COMP%]:focus { outline: none; background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent); border-color: var(--mj-brand-primary); }\n    .btn-new-conversation[_ngcontent-%COMP%] {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary-hover); }\n    .btn-new-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n    .list-content[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }\n\n    \n\n    .sidebar-section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .pinned-section[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   .section-icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header[_ngcontent-%COMP%] {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      font-weight: 500;\n      transition: background 0.2s;\n      user-select: none;\n    }\n    .section-header[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); }\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:not(.section-icon) {\n      transition: transform 0.2s;\n    }\n    .section-header.expanded[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:not(.section-icon) { transform: rotate(90deg); }\n    .chat-list[_ngcontent-%COMP%] {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded[_ngcontent-%COMP%] { display: block; }\n\n    .conversation-item[_ngcontent-%COMP%] {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); color: var(--mj-brand-on-secondary); }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item.active[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-brand-on-secondary); }\n    .conversation-icon-wrapper[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; }\n    .conversation-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n    .badge-overlay[_ngcontent-%COMP%] { position: absolute; top: -4px; right: -4px; }\n    .conversation-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .conversation-name[_ngcontent-%COMP%] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }\n    .shared-indicator[_ngcontent-%COMP%] { font-size: 10px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 55%, transparent); flex-shrink: 0; }\n    .conversation-item.active[_ngcontent-%COMP%]   .shared-indicator[_ngcontent-%COMP%] { color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent); }\n    .conversation-preview[_ngcontent-%COMP%] { font-size: 12px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-preview[_ngcontent-%COMP%] { color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent); }\n    .conversation-meta[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    \n\n    .project-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .project-badge[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .project-badge[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .conversation-actions[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { pointer-events: auto; }\n    .pinned-icon[_ngcontent-%COMP%] { color: var(--mj-brand-accent); font-size: 12px; }\n\n    \n\n    .task-indicator[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: _ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes _ngcontent-%COMP%_pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px var(--mj-status-warning));\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px var(--mj-status-warning));\n      }\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .task-indicator[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n    }\n\n    .menu-btn[_ngcontent-%COMP%] {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      background: var(--mj-brand-secondary) !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .menu-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary-hover) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .menu-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      margin: 4px 0;\n    }\n\n    \n\n    .conversation-item.renamed[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    \n\n    .header-top[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    \n\n    .header-menu-container[_ngcontent-%COMP%] {\n      position: relative;\n      flex-shrink: 0;\n    }\n\n    .btn-menu[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-menu[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 4px);\n      right: 0;\n      min-width: 200px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      padding: 4px 0;\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 13px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   .shortcut[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-size: 11px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 40%, transparent);\n      font-family: system-ui, -apple-system, sans-serif;\n    }\n\n    .btn-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .selection-action-bar[_ngcontent-%COMP%] {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: var(--mj-brand-secondary);\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 90%, transparent);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count[_ngcontent-%COMP%] {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .link-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-brand-accent);\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .selection-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-status-error) 80%, black);\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }"] });
+            i0.ɵɵconditional(ctx.isSelectionMode ? 13 : -1);
+        } }, dependencies: [i5.NgTemplateOutlet, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.NotificationBadgeComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n    .conversation-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: var(--mj-brand-secondary); }\n    .list-header[_ngcontent-%COMP%] { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent); }\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 12px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input[_ngcontent-%COMP%]::placeholder { color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); }\n    .search-input[_ngcontent-%COMP%]:focus { outline: none; background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent); border-color: var(--mj-brand-primary); }\n    .btn-new-conversation[_ngcontent-%COMP%] {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary-hover); }\n    .btn-new-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n    .list-content[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }\n\n    \n\n    .sidebar-section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .pinned-section[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   .section-icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header[_ngcontent-%COMP%] {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      font-weight: 500;\n      transition: background 0.2s;\n      user-select: none;\n    }\n    .section-header[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); }\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:not(.section-icon) {\n      transition: transform 0.2s;\n    }\n    .section-header.expanded[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:not(.section-icon) { transform: rotate(90deg); }\n    .chat-list[_ngcontent-%COMP%] {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded[_ngcontent-%COMP%] { display: block; }\n\n    .conversation-item[_ngcontent-%COMP%] {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); color: var(--mj-brand-on-secondary); }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item.active[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-brand-on-secondary); }\n    .conversation-icon-wrapper[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; }\n    .conversation-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n    .badge-overlay[_ngcontent-%COMP%] { position: absolute; top: -4px; right: -4px; }\n    .conversation-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .conversation-name[_ngcontent-%COMP%] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }\n    .shared-indicator[_ngcontent-%COMP%] { font-size: 10px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 55%, transparent); flex-shrink: 0; }\n    .conversation-item.active[_ngcontent-%COMP%]   .shared-indicator[_ngcontent-%COMP%] { color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent); }\n    .conversation-preview[_ngcontent-%COMP%] { font-size: 12px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-preview[_ngcontent-%COMP%] { color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent); }\n    .conversation-meta[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    \n\n    .project-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .project-badge[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .project-badge[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .conversation-actions[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { pointer-events: auto; }\n    .pinned-icon[_ngcontent-%COMP%] { color: var(--mj-brand-accent); font-size: 12px; }\n\n    \n\n    .task-indicator[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: _ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes _ngcontent-%COMP%_pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px var(--mj-status-warning));\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px var(--mj-status-warning));\n      }\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .task-indicator[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n    }\n\n    .menu-btn[_ngcontent-%COMP%] {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      background: var(--mj-brand-secondary) !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .menu-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary-hover) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .menu-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      margin: 4px 0;\n    }\n\n    \n\n    .conversation-item.renamed[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    \n\n    .header-top[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    \n\n    .header-menu-container[_ngcontent-%COMP%] {\n      position: relative;\n      flex-shrink: 0;\n    }\n\n    .btn-menu[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-menu[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 4px);\n      right: 0;\n      min-width: 200px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      padding: 4px 0;\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 13px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   .shortcut[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-size: 11px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 40%, transparent);\n      font-family: system-ui, -apple-system, sans-serif;\n    }\n\n    .btn-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .selection-action-bar[_ngcontent-%COMP%] {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: var(--mj-brand-secondary);\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 90%, transparent);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count[_ngcontent-%COMP%] {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .link-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-brand-accent);\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .selection-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-status-error) 80%, black);\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    \n\n    .section-action-btn[_ngcontent-%COMP%] {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .section-action-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n    .section-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; }\n\n    .folder-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 8px 5px 12px;\n      cursor: pointer;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent);\n      font-size: 13px;\n      transition: background 0.15s;\n      user-select: none;\n      position: relative;\n    }\n    .folder-row[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); }\n    .folder-row.drag-over[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n      box-shadow: inset 0 0 0 1px var(--mj-brand-primary);\n    }\n    .folder-row.dragging[_ngcontent-%COMP%] { opacity: 0.4; }\n    .section-header.drag-over[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      box-shadow: inset 0 0 0 1px var(--mj-brand-primary);\n      border-radius: 6px;\n    }\n    .folder-chevron[_ngcontent-%COMP%] {\n      font-size: 9px;\n      width: 10px;\n      flex-shrink: 0;\n      transition: transform 0.2s;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 55%, transparent);\n    }\n    .folder-chevron.expanded[_ngcontent-%COMP%] { transform: rotate(90deg); }\n    .folder-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }\n    .folder-name[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-weight: 600;\n    }\n    .folder-count[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent);\n      flex-shrink: 0;\n      margin-left: auto;\n      padding-left: 6px;\n      text-align: right;\n    }\n    .folder-actions[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 6px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      gap: 2px;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 5;\n    }\n    .folder-row[_ngcontent-%COMP%]:hover   .folder-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .folder-row[_ngcontent-%COMP%]:hover   .folder-count[_ngcontent-%COMP%] { opacity: 0; }\n    .folder-action-btn[_ngcontent-%COMP%] {\n      width: 22px;\n      height: 22px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n    .folder-action-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 18%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n    .folder-action-btn.danger[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 18%, transparent);\n      color: var(--mj-status-error);\n    }\n    .folder-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; }\n    .folder-children[_ngcontent-%COMP%] { display: block; }\n    .folder-empty-hint[_ngcontent-%COMP%] {\n      padding: 6px 16px;\n      font-size: 11px;\n      font-style: italic;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 45%, transparent);\n    }\n    .ungrouped-section.drag-over[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n      box-shadow: inset 0 0 0 1px var(--mj-brand-primary);\n      border-radius: 6px;\n    }\n\n    \n\n    .conversation-item[_ngcontent-%COMP%] { user-select: none; }\n    .conversation-item.dragging[_ngcontent-%COMP%] { opacity: 0.4; }\n\n    \n\n    .menu-item.back[_ngcontent-%COMP%] { font-weight: 600; }\n    .menu-item[_ngcontent-%COMP%]   .submenu-arrow[_ngcontent-%COMP%] { margin-left: auto; font-size: 10px; }\n    .menu-item.current[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n    .move-folder-list[_ngcontent-%COMP%] { max-height: 240px; overflow-y: auto; }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationListComponent, [{
         type: Component,
@@ -693,6 +1307,10 @@ export class ConversationListComponent {
                     <i class="fas fa-check-square"></i>
                     <span>Select Conversations</span>
                   </button>
+                  <button class="dropdown-item" (click)="onToggleGroupByClick($event)">
+                    <i class="fas" [class.fa-folder-tree]="groupBy !== 'project'" [class.fa-list]="groupBy === 'project'"></i>
+                    <span>{{ groupBy === 'project' ? 'Show as flat list' : 'Group by folder' }}</span>
+                  </button>
                   @if (!isMobileView) {
                     <button class="dropdown-item" (click)="onUnpinSidebarClick($event)">
                       <i class="fas fa-table-columns"></i>
@@ -722,136 +1340,75 @@ export class ConversationListComponent {
             </div>
             <div class="chat-list" [class.expanded]="pinnedExpanded">
               @for (conversation of pinnedConversations; track conversation.ID) {
-                <div class="conversation-item"
-                     [class.active]="IsConversationActive(conversation)"
-                     [class.renamed]="IsConversationRenamed(conversation)"
-                     (click)="handleConversationClick(conversation)">
-                  @if (isSelectionMode) {
-                    <div class="conversation-checkbox">
-                      <input type="checkbox"
-                             [checked]="selectedConversationIds.has(conversation.ID)"
-                             (click)="$event.stopPropagation(); toggleConversationSelection(conversation.ID)">
-                    </div>
-                  }
-                  <div class="conversation-icon-wrapper">
-                    @if (hasActiveTasks(conversation.ID)) {
-                      <div class="conversation-icon has-tasks">
-                        <i class="fas fa-spinner fa-pulse"></i>
-                      </div>
-                    }
-                    <div class="badge-overlay">
-                      <mj-notification-badge [conversationId]="conversation.ID"></mj-notification-badge>
-                    </div>
-                  </div>
-                  <div class="conversation-info" [title]="conversation.Name + (conversation.Description ? '\n' + conversation.Description : '')">
-                    <div class="conversation-name">
-                      {{ conversation.Name }}
-                      @if (isSharedWithMe(conversation)) {
-                        <i class="fas fa-share-nodes shared-indicator"
-                           [title]="sharedWithMeTooltip(conversation)"></i>
-                      }
-                    </div>
-                    <div class="conversation-preview">{{ conversation.Description }}</div>
-                  </div>
-                  @if (!isSelectionMode) {
-                    <div class="conversation-actions">
-                      <button class="menu-btn" (click)="toggleMenu(conversation.ID, $event)" title="More options">
-                        <i class="fas fa-ellipsis"></i>
-                      </button>
-                      @if (IsMenuOpen(conversation)) {
-                        <div class="context-menu" (click)="$event.stopPropagation()">
-                          <button class="menu-item" (click)="togglePin(conversation, $event)">
-                            <i class="fas fa-thumbtack"></i>
-                            <span>Unpin</span>
-                          </button>
-                          <button class="menu-item" (click)="renameConversation(conversation); closeMenu()">
-                            <i class="fas fa-edit"></i>
-                            <span>Rename</span>
-                          </button>
-                          <div class="menu-divider"></div>
-                          <button class="menu-item danger" (click)="deleteConversation(conversation); closeMenu()">
-                            <i class="fas fa-trash"></i>
-                            <span>Delete</span>
-                          </button>
-                        </div>
-                      }
-                    </div>
-                  }
-                </div>
+                <ng-container [ngTemplateOutlet]="conversationItem" [ngTemplateOutletContext]="{ $implicit: conversation }"></ng-container>
               }
             </div>
           </div>
         }
 
-        <!-- Messages Section -->
-        <div class="sidebar-section">
-          <div class="section-header" [class.expanded]="directMessagesExpanded" (click)="toggleDirectMessages()">
-            <div class="section-title">
-              <i class="fas fa-chevron-right"></i>
-              <span>Messages</span>
+        @if (groupBy === 'project') {
+          <!-- Folders Section -->
+          <div class="sidebar-section folders-section">
+            <div class="section-header" [class.expanded]="foldersExpanded"
+                 [class.drag-over]="dragOverTargetId === 'folders-root'"
+                 (click)="toggleFolders()"
+                 (dragover)="onFoldersRootDragOver($event)"
+                 (dragleave)="onDragLeave('folders-root')"
+                 (drop)="onFoldersRootDrop($event)">
+              <div class="section-title">
+                <i class="fas fa-chevron-right"></i>
+                <span>Folders</span>
+              </div>
+              <button class="section-action-btn" (click)="createFolder(null, $event)" title="New Folder">
+                <i class="fas fa-folder-plus"></i>
+              </button>
             </div>
-          </div>
-          <div class="chat-list" [class.expanded]="directMessagesExpanded">
-            @for (conversation of unpinnedConversations; track conversation.ID) {
-              <div class="conversation-item"
-                   [class.active]="IsConversationActive(conversation)"
-                   [class.renamed]="IsConversationRenamed(conversation)"
-                   (click)="handleConversationClick(conversation)">
-                @if (isSelectionMode) {
-                  <div class="conversation-checkbox">
-                    <input type="checkbox"
-                           [checked]="selectedConversationIds.has(conversation.ID)"
-                           (click)="$event.stopPropagation(); toggleConversationSelection(conversation.ID)">
-                  </div>
-                }
-                <div class="conversation-icon-wrapper">
-                  @if (hasActiveTasks(conversation.ID)) {
-                    <div class="conversation-icon has-tasks">
-                      <i class="fas fa-spinner fa-pulse"></i>
-                    </div>
-                  }
-                  <div class="badge-overlay">
-                    <mj-notification-badge [conversationId]="conversation.ID"></mj-notification-badge>
-                  </div>
-                </div>
-                <div class="conversation-info" [title]="conversation.Name + (conversation.Description ? '\n' + conversation.Description : '')">
-                  <div class="conversation-name">
-                    {{ conversation.Name }}
-                    @if (isSharedWithMe(conversation)) {
-                      <i class="fas fa-share-nodes shared-indicator"
-                         [title]="sharedWithMeTooltip(conversation)"></i>
-                    }
-                  </div>
-                  <div class="conversation-preview">{{ conversation.Description }}</div>
-                </div>
-                @if (!isSelectionMode) {
-                  <div class="conversation-actions">
-                    <button class="menu-btn" (click)="toggleMenu(conversation.ID, $event)" title="More options">
-                      <i class="fas fa-ellipsis"></i>
-                    </button>
-                    @if (IsMenuOpen(conversation)) {
-                      <div class="context-menu" (click)="$event.stopPropagation()">
-                        <button class="menu-item" (click)="togglePin(conversation, $event)">
-                          <i class="fas fa-thumbtack"></i>
-                          <span>Pin</span>
-                        </button>
-                        <button class="menu-item" (click)="renameConversation(conversation); closeMenu()">
-                          <i class="fas fa-edit"></i>
-                          <span>Rename</span>
-                        </button>
-                        <div class="menu-divider"></div>
-                        <button class="menu-item danger" (click)="deleteConversation(conversation); closeMenu()">
-                          <i class="fas fa-trash"></i>
-                          <span>Delete</span>
-                        </button>
-                      </div>
-                    }
-                  </div>
+            <div class="chat-list" [class.expanded]="foldersExpanded">
+              @for (node of folderTree; track node.project.ID) {
+                @if (!isSearching || node.hasContent) {
+                  <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
                 }
+              }
+              @if (folderTree.length === 0) {
+                <div class="folder-empty-hint">No folders yet — create one to organize conversations.</div>
+              }
+            </div>
+          </div>
+
+          <!-- Ungrouped Section (drop target to remove from folder) -->
+          <div class="sidebar-section ungrouped-section"
+               [class.drag-over]="dragOverTargetId === 'ungrouped'"
+               (dragover)="onUngroupedDragOver($event)"
+               (dragleave)="onDragLeave('ungrouped')"
+               (drop)="onUngroupedDrop($event)">
+            <div class="section-header" [class.expanded]="ungroupedExpanded" (click)="toggleUngrouped()">
+              <div class="section-title">
+                <i class="fas fa-chevron-right"></i>
+                <span>{{ folderTree.length > 0 ? 'Ungrouped' : 'Messages' }}</span>
               </div>
-            }
+            </div>
+            <div class="chat-list" [class.expanded]="ungroupedExpanded">
+              @for (conversation of ungroupedConversations; track conversation.ID) {
+                <ng-container [ngTemplateOutlet]="conversationItem" [ngTemplateOutletContext]="{ $implicit: conversation }"></ng-container>
+              }
+            </div>
           </div>
-        </div>
+        } @else {
+          <!-- Flat Messages Section -->
+          <div class="sidebar-section">
+            <div class="section-header" [class.expanded]="directMessagesExpanded" (click)="toggleDirectMessages()">
+              <div class="section-title">
+                <i class="fas fa-chevron-right"></i>
+                <span>Messages</span>
+              </div>
+            </div>
+            <div class="chat-list" [class.expanded]="directMessagesExpanded">
+              @for (conversation of unpinnedConversations; track conversation.ID) {
+                <ng-container [ngTemplateOutlet]="conversationItem" [ngTemplateOutletContext]="{ $implicit: conversation }"></ng-container>
+              }
+            </div>
+          </div>
+        }
       </div>
 
       <!-- Selection Action Bar -->
@@ -879,8 +1436,152 @@ export class ConversationListComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    :host { display: block; height: 100%; }\n    .conversation-list { display: flex; flex-direction: column; height: 100%; background: var(--mj-brand-secondary); }\n    .list-header { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent); }\n    .search-input {\n      width: 100%;\n      padding: 8px 12px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input::placeholder { color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); }\n    .search-input:focus { outline: none; background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent); border-color: var(--mj-brand-primary); }\n    .btn-new-conversation {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation:hover { background: var(--mj-brand-primary-hover); }\n    .btn-new-conversation i { font-size: 14px; }\n    .list-content { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }\n\n    /* Collapsible Sections */\n    .sidebar-section { margin-bottom: 20px; }\n    .pinned-section .section-title .section-icon {\n      color: var(--mj-status-warning);\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      font-weight: 500;\n      transition: background 0.2s;\n      user-select: none;\n    }\n    .section-header:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); }\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title i {\n      font-size: 10px;\n    }\n    .section-title i:not(.section-icon) {\n      transition: transform 0.2s;\n    }\n    .section-header.expanded .section-title i:not(.section-icon) { transform: rotate(90deg); }\n    .chat-list {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded { display: block; }\n\n    .conversation-item {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); color: var(--mj-brand-on-secondary); }\n    .conversation-item:hover .conversation-actions { opacity: 1; }\n    .conversation-item.active { background: var(--mj-brand-primary); color: var(--mj-brand-on-secondary); }\n    .conversation-icon-wrapper { position: relative; flex-shrink: 0; }\n    .conversation-icon { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks { color: var(--mj-status-warning); }\n    .badge-overlay { position: absolute; top: -4px; right: -4px; }\n    .conversation-info { flex: 1; min-width: 0; }\n    .conversation-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }\n    .shared-indicator { font-size: 10px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 55%, transparent); flex-shrink: 0; }\n    .conversation-item.active .shared-indicator { color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent); }\n    .conversation-preview { font-size: 12px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active .conversation-preview { color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent); }\n    .conversation-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    /* Project Badge */\n    .project-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item:hover .project-badge {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent);\n    }\n    .conversation-item.active .project-badge {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .conversation-actions {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item:hover .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-item.active .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-actions > * { pointer-events: auto; }\n    .pinned-icon { color: var(--mj-brand-accent); font-size: 12px; }\n\n    /* Task Indicator */\n    .task-indicator {\n      color: var(--mj-status-warning);\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px var(--mj-status-warning));\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px var(--mj-status-warning));\n      }\n    }\n    .conversation-item.active .task-indicator {\n      color: var(--mj-status-warning);\n    }\n\n    .menu-btn {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      background: var(--mj-brand-secondary) !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .conversation-item.active .menu-btn {\n      background: var(--mj-brand-primary-hover) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .menu-btn i { font-size: 14px; }\n\n    .context-menu {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item i {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .menu-item:hover i {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item.danger {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger i {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger:hover i {\n      color: var(--mj-status-error);\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      margin: 4px 0;\n    }\n\n    /* Rename Animation */\n    .conversation-item.renamed {\n      animation: renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    /* Selection Mode Styles */\n    .header-top {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    /* Header menu button and dropdown */\n    .header-menu-container {\n      position: relative;\n      flex-shrink: 0;\n    }\n\n    .btn-menu {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-menu:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .header-dropdown-menu {\n      position: absolute;\n      top: calc(100% + 4px);\n      right: 0;\n      min-width: 200px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      padding: 4px 0;\n    }\n\n    .header-dropdown-menu .dropdown-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 13px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .header-dropdown-menu .dropdown-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu .dropdown-item i {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .header-dropdown-menu .dropdown-item:hover i {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu .dropdown-item .shortcut {\n      margin-left: auto;\n      font-size: 11px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 40%, transparent);\n      font-family: system-ui, -apple-system, sans-serif;\n    }\n\n    .btn-select {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .conversation-checkbox {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .selection-action-bar {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: var(--mj-brand-secondary);\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 90%, transparent);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .link-btn {\n      background: none;\n      border: none;\n      color: var(--mj-brand-accent);\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn:hover {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .selection-actions {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .btn-delete-bulk {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-status-error) 80%, black);\n    }\n\n    .btn-delete-bulk:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk i {\n      font-size: 12px;\n    }\n  "] }]
-    }], () => [{ type: i1.DialogService }, { type: i2.NotificationService }, { type: i3.ActiveTasksService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
+
+    <!-- Recursive folder node: header + nested children + direct conversations -->
+    <ng-template #folderNode let-node>
+      <div class="folder-row"
+           [class.drag-over]="dragOverTargetId === node.project.ID"
+           [class.dragging]="draggedFolderId === node.project.ID"
+           [style.paddingLeft.px]="12 + node.depth * 14"
+           [draggable]="true"
+           (dragstart)="onFolderDragStart(node, $event)"
+           (dragend)="onFolderDragEnd()"
+           (click)="toggleFolder(node.project.ID)"
+           (dragover)="onFolderDragOver(node.project.ID, $event)"
+           (dragleave)="onDragLeave(node.project.ID)"
+           (drop)="onFolderDrop(node.project, $event)"
+           [title]="node.project.Name">
+        <i class="fas fa-chevron-right folder-chevron" [class.expanded]="isFolderExpanded(node.project.ID)"></i>
+        <i class="fas {{ node.project.Icon || 'fa-folder' }} folder-icon" [style.color]="node.project.Color || null"></i>
+        <span class="folder-name">{{ node.project.Name }}</span>
+        <span class="folder-count">{{ node.totalCount }}</span>
+        <div class="folder-actions" (click)="$event.stopPropagation()">
+          <button class="folder-action-btn" (click)="createFolder(node.project.ID, $event)" title="New Subfolder">
+            <i class="fas fa-folder-plus"></i>
+          </button>
+          <button class="folder-action-btn" (click)="editFolder(node.project, $event)" title="Edit Folder">
+            <i class="fas fa-pen"></i>
+          </button>
+          <button class="folder-action-btn danger" (click)="deleteFolder(node.project, $event)" title="Delete Folder">
+            <i class="fas fa-trash"></i>
+          </button>
+        </div>
+      </div>
+      @if (isFolderExpanded(node.project.ID)) {
+        <div class="folder-children">
+          @for (child of node.children; track child.project.ID) {
+            @if (!isSearching || child.hasContent) {
+              <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{ $implicit: child }"></ng-container>
+            }
+          }
+          @for (conversation of node.conversations; track conversation.ID) {
+            <ng-container [ngTemplateOutlet]="conversationItem" [ngTemplateOutletContext]="{ $implicit: conversation, depth: node.depth + 1 }"></ng-container>
+          }
+          @if (node.totalCount === 0 && !isSearching) {
+            <div class="folder-empty-hint" [style.paddingLeft.px]="26 + node.depth * 14">Empty — drop a conversation here</div>
+          }
+        </div>
+      }
+    </ng-template>
+
+    <!-- Shared conversation row used by Pinned, folders, and Ungrouped/Messages -->
+    <ng-template #conversationItem let-conversation let-depth="depth">
+      <div class="conversation-item"
+           [class.active]="IsConversationActive(conversation)"
+           [class.renamed]="IsConversationRenamed(conversation)"
+           [class.dragging]="IsConversationDragging(conversation)"
+           [style.paddingLeft.px]="depth ? 16 + depth * 14 : 16"
+           [draggable]="!isSelectionMode"
+           (dragstart)="onConversationDragStart(conversation, $event)"
+           (dragend)="onConversationDragEnd()"
+           (click)="handleConversationClick(conversation)">
+        @if (isSelectionMode) {
+          <div class="conversation-checkbox">
+            <input type="checkbox"
+                   [checked]="selectedConversationIds.has(conversation.ID)"
+                   (click)="$event.stopPropagation(); toggleConversationSelection(conversation.ID)">
+          </div>
+        }
+        <div class="conversation-icon-wrapper">
+          @if (hasActiveTasks(conversation.ID)) {
+            <div class="conversation-icon has-tasks">
+              <i class="fas fa-spinner fa-pulse"></i>
+            </div>
+          }
+          <div class="badge-overlay">
+            <mj-notification-badge [conversationId]="conversation.ID"></mj-notification-badge>
+          </div>
+        </div>
+        <div class="conversation-info" [title]="conversation.Name + (conversation.Description ? '\n' + conversation.Description : '')">
+          <div class="conversation-name">
+            {{ conversation.Name }}
+            @if (isSharedWithMe(conversation)) {
+              <i class="fas fa-share-nodes shared-indicator"
+                 [title]="sharedWithMeTooltip(conversation)"></i>
+            }
+          </div>
+          <div class="conversation-preview">{{ conversation.Description }}</div>
+        </div>
+        @if (!isSelectionMode) {
+          <div class="conversation-actions">
+            <button class="menu-btn" (click)="toggleMenu(conversation.ID, $event)" title="More options">
+              <i class="fas fa-ellipsis"></i>
+            </button>
+            @if (IsMenuOpen(conversation)) {
+              <div class="context-menu" (click)="$event.stopPropagation()">
+                @if (IsMoveSubmenuOpen(conversation)) {
+                  <button class="menu-item back" (click)="closeMoveSubmenu($event)">
+                    <i class="fas fa-chevron-left"></i>
+                    <span>Move to folder</span>
+                  </button>
+                  <div class="menu-divider"></div>
+                  <div class="move-folder-list">
+                    <button class="menu-item" [class.current]="!conversation.ProjectID" (click)="selectMoveTarget(conversation, null)">
+                      <i class="fas fa-inbox"></i>
+                      <span>No folder</span>
+                    </button>
+                    @for (f of flatFolders; track f.project.ID) {
+                      <button class="menu-item" [class.current]="IsInFolder(conversation, f.project.ID)"
+                              [style.paddingLeft.px]="14 + f.depth * 12"
+                              (click)="selectMoveTarget(conversation, f.project.ID)">
+                        <i class="fas {{ f.project.Icon || 'fa-folder' }}" [style.color]="f.project.Color || null"></i>
+                        <span>{{ f.project.Name }}</span>
+                      </button>
+                    }
+                  </div>
+                  <div class="menu-divider"></div>
+                  <button class="menu-item" (click)="createFolderForConversation(conversation, $event)">
+                    <i class="fas fa-folder-plus"></i>
+                    <span>New folder…</span>
+                  </button>
+                } @else {
+                  <button class="menu-item" (click)="togglePin(conversation, $event)">
+                    <i class="fas fa-thumbtack"></i>
+                    <span>{{ conversation.IsPinned ? 'Unpin' : 'Pin' }}</span>
+                  </button>
+                  <button class="menu-item" (click)="openMoveSubmenu(conversation.ID, $event)">
+                    <i class="fas fa-folder-tree"></i>
+                    <span>Move to folder</span>
+                    <i class="fas fa-chevron-right submenu-arrow"></i>
+                  </button>
+                  <button class="menu-item" (click)="renameConversation(conversation); closeMenu()">
+                    <i class="fas fa-edit"></i>
+                    <span>Rename</span>
+                  </button>
+                  <div class="menu-divider"></div>
+                  <button class="menu-item danger" (click)="deleteConversation(conversation); closeMenu()">
+                    <i class="fas fa-trash"></i>
+                    <span>Delete</span>
+                  </button>
+                }
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, styles: ["\n    :host { display: block; height: 100%; }\n    .conversation-list { display: flex; flex-direction: column; height: 100%; background: var(--mj-brand-secondary); }\n    .list-header { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent); }\n    .search-input {\n      width: 100%;\n      padding: 8px 12px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input::placeholder { color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); }\n    .search-input:focus { outline: none; background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent); border-color: var(--mj-brand-primary); }\n    .btn-new-conversation {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation:hover { background: var(--mj-brand-primary-hover); }\n    .btn-new-conversation i { font-size: 14px; }\n    .list-content { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }\n\n    /* Collapsible Sections */\n    .sidebar-section { margin-bottom: 20px; }\n    .pinned-section .section-title .section-icon {\n      color: var(--mj-status-warning);\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: var(--mj-brand-on-secondary);\n      font-size: 13px;\n      font-weight: 500;\n      transition: background 0.2s;\n      user-select: none;\n    }\n    .section-header:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); }\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title i {\n      font-size: 10px;\n    }\n    .section-title i:not(.section-icon) {\n      transition: transform 0.2s;\n    }\n    .section-header.expanded .section-title i:not(.section-icon) { transform: rotate(90deg); }\n    .chat-list {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded { display: block; }\n\n    .conversation-item {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); color: var(--mj-brand-on-secondary); }\n    .conversation-item:hover .conversation-actions { opacity: 1; }\n    .conversation-item.active { background: var(--mj-brand-primary); color: var(--mj-brand-on-secondary); }\n    .conversation-icon-wrapper { position: relative; flex-shrink: 0; }\n    .conversation-icon { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks { color: var(--mj-status-warning); }\n    .badge-overlay { position: absolute; top: -4px; right: -4px; }\n    .conversation-info { flex: 1; min-width: 0; }\n    .conversation-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }\n    .shared-indicator { font-size: 10px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 55%, transparent); flex-shrink: 0; }\n    .conversation-item.active .shared-indicator { color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent); }\n    .conversation-preview { font-size: 12px; color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active .conversation-preview { color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent); }\n    .conversation-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    /* Project Badge */\n    .project-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item:hover .project-badge {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent);\n    }\n    .conversation-item.active .project-badge {\n      background-color: color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .conversation-actions {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item:hover .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-item.active .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-actions > * { pointer-events: auto; }\n    .pinned-icon { color: var(--mj-brand-accent); font-size: 12px; }\n\n    /* Task Indicator */\n    .task-indicator {\n      color: var(--mj-status-warning);\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px var(--mj-status-warning));\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px var(--mj-status-warning));\n      }\n    }\n    .conversation-item.active .task-indicator {\n      color: var(--mj-status-warning);\n    }\n\n    .menu-btn {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      background: var(--mj-brand-secondary) !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .conversation-item.active .menu-btn {\n      background: var(--mj-brand-primary-hover) !important;\n      color: var(--mj-brand-on-secondary);\n    }\n    .menu-btn i { font-size: 14px; }\n\n    .context-menu {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item i {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .menu-item:hover i {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .menu-item.danger {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger i {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger:hover i {\n      color: var(--mj-status-error);\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      margin: 4px 0;\n    }\n\n    /* Rename Animation */\n    .conversation-item.renamed {\n      animation: renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    /* Selection Mode Styles */\n    .header-top {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    /* Header menu button and dropdown */\n    .header-menu-container {\n      position: relative;\n      flex-shrink: 0;\n    }\n\n    .btn-menu {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-menu:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .header-dropdown-menu {\n      position: absolute;\n      top: calc(100% + 4px);\n      right: 0;\n      min-width: 200px;\n      background: var(--mj-brand-secondary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1001;\n      overflow: hidden;\n      padding: 4px 0;\n    }\n\n    .header-dropdown-menu .dropdown-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 85%, transparent);\n      font-size: 13px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .header-dropdown-menu .dropdown-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu .dropdown-item i {\n      width: 16px;\n      font-size: 13px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n    }\n\n    .header-dropdown-menu .dropdown-item:hover i {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .header-dropdown-menu .dropdown-item .shortcut {\n      margin-left: auto;\n      font-size: 11px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 40%, transparent);\n      font-family: system-ui, -apple-system, sans-serif;\n    }\n\n    .btn-select {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n      border-color: color-mix(in srgb, var(--mj-brand-on-secondary) 30%, transparent);\n    }\n\n    .conversation-checkbox {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .selection-action-bar {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: var(--mj-brand-secondary);\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 90%, transparent);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .link-btn {\n      background: none;\n      border: none;\n      color: var(--mj-brand-accent);\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn:hover {\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .selection-actions {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-on-secondary) 20%, transparent);\n      border-radius: 6px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 70%, transparent);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 10%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n\n    .btn-delete-bulk {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-brand-on-secondary);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-status-error) 80%, black);\n    }\n\n    .btn-delete-bulk:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk i {\n      font-size: 12px;\n    }\n\n    /* Folders */\n    .section-action-btn {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .section-action-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 15%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n    .section-action-btn i { font-size: 12px; }\n\n    .folder-row {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 8px 5px 12px;\n      cursor: pointer;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 80%, transparent);\n      font-size: 13px;\n      transition: background 0.15s;\n      user-select: none;\n      position: relative;\n    }\n    .folder-row:hover { background: color-mix(in srgb, var(--mj-brand-on-secondary) 8%, transparent); }\n    .folder-row.drag-over {\n      background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n      box-shadow: inset 0 0 0 1px var(--mj-brand-primary);\n    }\n    .folder-row.dragging { opacity: 0.4; }\n    .section-header.drag-over {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      box-shadow: inset 0 0 0 1px var(--mj-brand-primary);\n      border-radius: 6px;\n    }\n    .folder-chevron {\n      font-size: 9px;\n      width: 10px;\n      flex-shrink: 0;\n      transition: transform 0.2s;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 55%, transparent);\n    }\n    .folder-chevron.expanded { transform: rotate(90deg); }\n    .folder-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }\n    .folder-name {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-weight: 600;\n    }\n    .folder-count {\n      font-size: 11px;\n      font-weight: 600;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 50%, transparent);\n      flex-shrink: 0;\n      margin-left: auto;\n      padding-left: 6px;\n      text-align: right;\n    }\n    .folder-actions {\n      position: absolute;\n      right: 6px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      gap: 2px;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 5;\n    }\n    .folder-row:hover .folder-actions { opacity: 1; pointer-events: auto; }\n    .folder-row:hover .folder-count { opacity: 0; }\n    .folder-action-btn {\n      width: 22px;\n      height: 22px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 60%, transparent);\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n    .folder-action-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-on-secondary) 18%, transparent);\n      color: var(--mj-brand-on-secondary);\n    }\n    .folder-action-btn.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 18%, transparent);\n      color: var(--mj-status-error);\n    }\n    .folder-action-btn i { font-size: 11px; }\n    .folder-children { display: block; }\n    .folder-empty-hint {\n      padding: 6px 16px;\n      font-size: 11px;\n      font-style: italic;\n      color: color-mix(in srgb, var(--mj-brand-on-secondary) 45%, transparent);\n    }\n    .ungrouped-section.drag-over {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n      box-shadow: inset 0 0 0 1px var(--mj-brand-primary);\n      border-radius: 6px;\n    }\n\n    /* Dragging state */\n    .conversation-item { user-select: none; }\n    .conversation-item.dragging { opacity: 0.4; }\n\n    /* Move-to-folder submenu */\n    .menu-item.back { font-weight: 600; }\n    .menu-item .submenu-arrow { margin-left: auto; font-size: 10px; }\n    .menu-item.current { background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n    .move-folder-list { max-height: 240px; overflow-y: auto; }\n  "] }]
+    }], () => [{ type: i1.DialogService }, { type: i2.NotificationService }, { type: i3.ActiveTasksService }, { type: i4.MJDialogService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
             type: Input
         }], currentUser: [{
             type: Input
@@ -908,5 +1609,5 @@ export class ConversationListComponent {
             type: HostListener,
             args: ['document:click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationListComponent, { className: "ConversationListComponent", filePath: "src/lib/components/conversation/conversation-list.component.ts", lineNumber: 731 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationListComponent, { className: "ConversationListComponent", filePath: "src/lib/components/conversation/conversation-list.component.ts", lineNumber: 964 }); })();
 //# sourceMappingURL=conversation-list.component.js.map