@design.estate/dees-catalog 3.100.0 → 3.102.0

package/ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.ts

@@ -10,7 +10,13 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessSessionMeta } from '../interfaces.js';
+import type {
+  IHarnessGroupContextDetail,
+  IHarnessSessionContextDetail,
+  IHarnessSessionGroup,
+  IHarnessSessionMeta,
+  IHarnessSessionMoveDetail,
+} from '../interfaces.js';
 import { harnessFormatRelativeTime } from '../harness.helpers.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -20,10 +26,24 @@ declare global {
   }
 }
 
+interface IDropSlot {
+  groupId: string | null;
+  index: number;
+}
+
 /**
  * Searchable conversation list, embeddable in a sidebar or a DeesModal.
- * Emits `harness-session-select` on click and `harness-session-open` on
- * double-click or Enter.
+ * Emits `harness-session-select` on click, `harness-session-open` on
+ * double-click or Enter, and `harness-session-context` with viewport
+ * pointer coordinates on right-click (the browser menu is suppressed).
+ *
+ * With `enableGrouping`, sessions render under user-defined `groups` and can
+ * be dragged between groups and reordered. The component never mutates its
+ * inputs: drops emit `harness-session-move`, the "new group" button emits
+ * `harness-group-create-request`, and right-clicking a group header emits
+ * `harness-group-context` — the host persists changes and passes fresh
+ * `groups` back in. Sessions in no group render in the trailing ungrouped
+ * section, recency-sorted. While a search query is active the list is flat.
  */
 @customElement('dees-harness-session-list')
 export class DeesHarnessSessionList extends DeesElement {
@@ -42,9 +62,24 @@ export class DeesHarnessSessionList extends DeesElement {
   @property()
   accessor emptyText: string = 'No conversations yet.';
 
+  @property({ attribute: false })
+  accessor groups: IHarnessSessionGroup[] = [];
+
+  @property({ type: Boolean })
+  accessor enableGrouping: boolean = false;
+
   @state()
   accessor search: string = '';
 
+  @state()
+  accessor draggingSessionId: string = '';
+
+  @state()
+  accessor dropSlot: IDropSlot | undefined = undefined;
+
+  @state()
+  accessor collapsedGroupIds: ReadonlySet<string> = new Set<string>();
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -117,6 +152,10 @@ export class DeesHarnessSessionList extends DeesElement {
         box-shadow: inset 2px 0 0 var(--dees-color-accent-primary);
       }
 
+      .item.dragging {
+        opacity: 0.4;
+      }
+
       .itemTitle {
         display: flex;
         align-items: baseline;
@@ -154,9 +193,109 @@ export class DeesHarnessSessionList extends DeesElement {
         font-size: var(--dees-font-control-size-sm, 12px);
         text-align: center;
       }
+
+      .groupHeader {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        margin-top: var(--dees-spacing-xs);
+        padding: 2px var(--dees-spacing-sm);
+        border: 0;
+        border-radius: var(--dees-radius-md);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 650;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        text-align: left;
+      }
+
+      .groupHeader:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .groupHeader .chevron {
+        transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .groupHeader.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      .groupHeader .groupCount {
+        margin-left: auto;
+        font-weight: 500;
+        text-transform: none;
+        letter-spacing: normal;
+        color: var(--dees-color-text-muted);
+      }
+
+      .groupHeader.dropTarget {
+        outline: 1px dashed var(--dees-color-accent-primary);
+        outline-offset: -1px;
+      }
+
+      .dropLine {
+        height: 2px;
+        margin: 0 var(--dees-spacing-sm);
+        border-radius: 1px;
+        background: var(--dees-color-accent-primary);
+      }
+
+      .newGroupRow {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm) var(--dees-spacing-sm);
+      }
+
+      .newGroupButton {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border: 1px dashed var(--dees-color-border-default);
+        border-radius: var(--dees-radius-md);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .newGroupButton:hover {
+        border-color: var(--dees-color-accent-primary);
+        color: var(--dees-color-text-primary);
+      }
     `,
   ];
 
+  private get sessionsById(): Map<string, IHarnessSessionMeta> {
+    return new Map(this.sessions.map((session) => [session.id, session]));
+  }
+
+  private get groupedSessionIds(): Set<string> {
+    const ids = new Set<string>();
+    for (const group of this.groups) {
+      for (const id of group.sessionIds) ids.add(id);
+    }
+    return ids;
+  }
+
+  /** Ungrouped sessions, most recent first. */
+  private get ungroupedSessions(): IHarnessSessionMeta[] {
+    const grouped = this.groupedSessionIds;
+    return [...this.sessions]
+      .filter((session) => !grouped.has(session.id))
+      .sort(
+        (left, right) =>
+          (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0),
+      );
+  }
+
   private get filteredSessions(): IHarnessSessionMeta[] {
     const query = this.search.trim().toLowerCase();
     const sorted = [...this.sessions].sort(
@@ -173,7 +312,7 @@ export class DeesHarnessSessionList extends DeesElement {
   }
 
   public render(): TemplateResult {
-    const sessions = this.filteredSessions;
+    const groupingActive = this.enableGrouping && !this.search.trim();
     return html`
       <div class="searchRow">
         <input
@@ -187,23 +326,178 @@ export class DeesHarnessSessionList extends DeesElement {
       <div class="list">
         ${this.loading
           ? html`<div class="emptyNote">Loading conversations…</div>`
-          : sessions.length
-            ? sessions.map((session) => this.renderItem(session))
-            : html`<div class="emptyNote">${this.sessions.length ? 'No conversations match this search.' : this.emptyText}</div>`}
+          : groupingActive
+            ? this.renderGroupedList()
+            : this.renderFlatList()}
       </div>
+      ${groupingActive
+        ? html`
+            <div class="newGroupRow">
+              <button
+                class="newGroupButton"
+                type="button"
+                @click=${() => {
+                  this.dispatchEvent(
+                    new CustomEvent('harness-group-create-request', {
+                      bubbles: true,
+                      composed: true,
+                    }),
+                  );
+                }}
+              >
+                <dees-icon icon="lucide:FolderPlus" iconSize="13"></dees-icon>
+                New group
+              </button>
+            </div>
+          `
+        : ''}
+    `;
+  }
+
+  private renderFlatList(): TemplateResult {
+    const sessions = this.filteredSessions;
+    if (!sessions.length) {
+      return html`<div class="emptyNote">
+        ${this.sessions.length ? 'No conversations match this search.' : this.emptyText}
+      </div>`;
+    }
+    return html`${sessions.map((session) => this.renderItem(session, null, -1))}`;
+  }
+
+  private renderGroupedList(): TemplateResult {
+    const byId = this.sessionsById;
+    const ungrouped = this.ungroupedSessions;
+    if (!this.sessions.length && !this.groups.length) {
+      return html`<div class="emptyNote">${this.emptyText}</div>`;
+    }
+    return html`
+      ${this.groups.map((group) => {
+        const members = group.sessionIds
+          .map((id) => byId.get(id))
+          .filter((session): session is IHarnessSessionMeta => session !== undefined);
+        const collapsed = this.collapsedGroupIds.has(group.id);
+        const isHeaderDrop =
+          this.dropSlot?.groupId === group.id && this.dropSlot.index === members.length && collapsed;
+        return html`
+          <button
+            class="groupHeader ${collapsed ? 'collapsed' : ''} ${isHeaderDrop ? 'dropTarget' : ''}"
+            type="button"
+            @click=${() => this.toggleGroupCollapsed(group.id)}
+            @contextmenu=${(event: MouseEvent) => {
+              event.preventDefault();
+              const detail: IHarnessGroupContextDetail = {
+                group,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                originalEvent: event,
+              };
+              this.dispatchEvent(
+                new CustomEvent('harness-group-context', { detail, bubbles: true, composed: true }),
+              );
+            }}
+            @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, group.id, members.length)}
+            @drop=${(event: DragEvent) => this.handleDrop(event, group.id, members.length)}
+          >
+            <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
+            <span>${group.name}</span>
+            <span class="groupCount">${members.length}</span>
+          </button>
+          ${collapsed
+            ? ''
+            : this.renderSection(members, group.id)}
+        `;
+      })}
+      ${this.groups.length && ungrouped.length
+        ? html`
+            <button
+              class="groupHeader"
+              type="button"
+              tabindex="-1"
+              @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, null, 0)}
+              @drop=${(event: DragEvent) => this.handleDrop(event, null, 0)}
+            >
+              <span>Ungrouped</span>
+              <span class="groupCount">${ungrouped.length}</span>
+            </button>
+          `
+        : ''}
+      ${this.renderSection(ungrouped, null)}
+    `;
+  }
+
+  private renderSection(
+    sessions: IHarnessSessionMeta[],
+    groupId: string | null,
+  ): TemplateResult {
+    const slot = this.dropSlot;
+    return html`
+      ${sessions.map(
+        (session, index) => html`
+          ${slot && slot.groupId === groupId && slot.index === index
+            ? html`<div class="dropLine"></div>`
+            : ''}
+          ${this.renderItem(session, groupId, index)}
+        `,
+      )}
+      ${slot && slot.groupId === groupId && slot.index === sessions.length
+        ? html`<div class="dropLine"></div>`
+        : ''}
     `;
   }
 
-  private renderItem(session: IHarnessSessionMeta): TemplateResult {
+  private renderItem(
+    session: IHarnessSessionMeta,
+    groupId: string | null,
+    index: number,
+  ): TemplateResult {
+    const draggable = this.enableGrouping && index >= 0;
     return html`
       <button
-        class="item ${session.id === this.selectedSessionId ? 'selected' : ''}"
+        class="item ${session.id === this.selectedSessionId ? 'selected' : ''} ${
+          this.draggingSessionId === session.id ? 'dragging' : ''
+        }"
         type="button"
+        draggable=${draggable ? 'true' : 'false'}
         @click=${() => this.emit('harness-session-select', session)}
         @dblclick=${() => this.emit('harness-session-open', session)}
         @keydown=${(event: KeyboardEvent) => {
           if (event.key === 'Enter') this.emit('harness-session-open', session);
         }}
+        @contextmenu=${(event: MouseEvent) => {
+          event.preventDefault();
+          const detail: IHarnessSessionContextDetail = {
+            session,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            originalEvent: event,
+          };
+          this.dispatchEvent(
+            new CustomEvent('harness-session-context', { detail, bubbles: true, composed: true }),
+          );
+        }}
+        @dragstart=${(event: DragEvent) => {
+          if (!draggable) return;
+          this.draggingSessionId = session.id;
+          event.dataTransfer?.setData('text/plain', session.id);
+          if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+        }}
+        @dragend=${() => {
+          this.draggingSessionId = '';
+          this.dropSlot = undefined;
+        }}
+        @dragover=${(event: DragEvent) => {
+          if (!this.draggingSessionId || index < 0) return;
+          event.preventDefault();
+          const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+          const before = event.clientY < rect.top + rect.height / 2;
+          this.setDropSlot(groupId, before ? index : index + 1);
+        }}
+        @drop=${(event: DragEvent) => {
+          if (index < 0) return;
+          const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+          const before = event.clientY < rect.top + rect.height / 2;
+          this.handleDrop(event, groupId, before ? index : index + 1);
+        }}
       >
         <span class="itemTitle">
           <span class="titleText">${session.title || session.id}</span>
@@ -216,6 +510,45 @@ export class DeesHarnessSessionList extends DeesElement {
     `;
   }
 
+  private toggleGroupCollapsed(groupIdArg: string): void {
+    const next = new Set(this.collapsedGroupIds);
+    if (next.has(groupIdArg)) {
+      next.delete(groupIdArg);
+    } else {
+      next.add(groupIdArg);
+    }
+    this.collapsedGroupIds = next;
+  }
+
+  private setDropSlot(groupIdArg: string | null, indexArg: number): void {
+    const current = this.dropSlot;
+    if (current && current.groupId === groupIdArg && current.index === indexArg) return;
+    this.dropSlot = { groupId: groupIdArg, index: indexArg };
+  }
+
+  private handleDragOverSlot(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
+    if (!this.draggingSessionId) return;
+    event.preventDefault();
+    this.setDropSlot(groupIdArg, indexArg);
+  }
+
+  private handleDrop(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
+    event.preventDefault();
+    event.stopPropagation();
+    const sessionId = this.draggingSessionId || event.dataTransfer?.getData('text/plain') || '';
+    this.draggingSessionId = '';
+    this.dropSlot = undefined;
+    if (!sessionId) return;
+    const detail: IHarnessSessionMoveDetail = {
+      sessionId,
+      groupId: groupIdArg,
+      index: Math.max(0, indexArg),
+    };
+    this.dispatchEvent(
+      new CustomEvent('harness-session-move', { detail, bubbles: true, composed: true }),
+    );
+  }
+
   private emit(name: string, session: IHarnessSessionMeta): void {
     this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
   }

package/ts_web/elements/00group-harness/interfaces.ts

@@ -200,6 +200,40 @@ export interface IHarnessSessionMeta {
   preview?: string;
 }
 
+/** Detail of `harness-session-context`, fired on right-click of a session item. */
+export interface IHarnessSessionContextDetail {
+  session: IHarnessSessionMeta;
+  /** Viewport coordinates of the pointer, for positioning a context menu. */
+  clientX: number;
+  clientY: number;
+  /** The suppressed contextmenu event, e.g. for DeesContextmenu.openContextMenuWithOptions. */
+  originalEvent: MouseEvent;
+}
+
+/** A user-defined session group; ordering of `sessionIds` is the display order. */
+export interface IHarnessSessionGroup {
+  id: string;
+  name: string;
+  sessionIds: string[];
+}
+
+/** Detail of `harness-session-move`: a session was dropped into a group slot. */
+export interface IHarnessSessionMoveDetail {
+  sessionId: string;
+  /** Target group, or null for the ungrouped section. */
+  groupId: string | null;
+  /** Insertion index within the target section's current display order. */
+  index: number;
+}
+
+/** Detail of `harness-group-context`, fired on right-click of a group header. */
+export interface IHarnessGroupContextDetail {
+  group: IHarnessSessionGroup;
+  clientX: number;
+  clientY: number;
+  originalEvent: MouseEvent;
+}
+
 export type THarnessTodoStatus = 'pending' | 'in_progress' | 'completed';
 
 export interface IHarnessTodoItem {