@mseep/claudian 2.0.25

package/src/shared/components/ResumeSessionDropdown.ts

@@ -0,0 +1,185 @@
+/**
+ * Claudian - Resume session dropdown
+ *
+ * Dropup UI for selecting a previous conversation to resume.
+ * Shown when the /resume built-in command is executed.
+ */
+
+import { setIcon } from 'obsidian';
+
+import type { ConversationMeta } from '../../core/types';
+
+export interface ResumeSessionDropdownCallbacks {
+  onSelect: (conversationId: string) => void;
+  onDismiss: () => void;
+}
+
+export class ResumeSessionDropdown {
+  private containerEl: HTMLElement;
+  private inputEl: HTMLTextAreaElement;
+  private dropdownEl: HTMLElement;
+  private callbacks: ResumeSessionDropdownCallbacks;
+  private conversations: ConversationMeta[];
+  private currentConversationId: string | null;
+  private selectedIndex = 0;
+  private onInput: () => void;
+
+  constructor(
+    containerEl: HTMLElement,
+    inputEl: HTMLTextAreaElement,
+    conversations: ConversationMeta[],
+    currentConversationId: string | null,
+    callbacks: ResumeSessionDropdownCallbacks
+  ) {
+    this.containerEl = containerEl;
+    this.inputEl = inputEl;
+    this.conversations = this.sortConversations(conversations);
+    this.currentConversationId = currentConversationId;
+    this.callbacks = callbacks;
+
+    this.dropdownEl = this.containerEl.createDiv({ cls: 'claudian-resume-dropdown' });
+    this.render();
+    this.dropdownEl.addClass('visible');
+
+    // Auto-dismiss when user starts typing
+    this.onInput = () => this.dismiss();
+    this.inputEl.addEventListener('input', this.onInput);
+  }
+
+  handleKeydown(e: KeyboardEvent): boolean {
+    if (!this.isVisible()) return false;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this.navigate(1);
+        return true;
+      case 'ArrowUp':
+        e.preventDefault();
+        this.navigate(-1);
+        return true;
+      case 'Enter':
+      case 'Tab':
+        if (this.conversations.length > 0) {
+          e.preventDefault();
+          this.selectItem();
+          return true;
+        }
+        return false;
+      case 'Escape':
+        e.preventDefault();
+        this.dismiss();
+        return true;
+    }
+    return false;
+  }
+
+  isVisible(): boolean {
+    return this.dropdownEl?.hasClass('visible') ?? false;
+  }
+
+  destroy(): void {
+    this.inputEl.removeEventListener('input', this.onInput);
+    this.dropdownEl?.remove();
+  }
+
+  private dismiss(): void {
+    this.dropdownEl.removeClass('visible');
+    this.callbacks.onDismiss();
+  }
+
+  private selectItem(): void {
+    if (this.conversations.length === 0) return;
+    const selected = this.conversations[this.selectedIndex];
+    if (!selected) return;
+
+    // Dismiss without switching if selecting the current conversation
+    if (selected.id === this.currentConversationId) {
+      this.dismiss();
+      return;
+    }
+
+    this.callbacks.onSelect(selected.id);
+  }
+
+  private navigate(direction: number): void {
+    const maxIndex = this.conversations.length - 1;
+    this.selectedIndex = Math.max(0, Math.min(maxIndex, this.selectedIndex + direction));
+    this.updateSelection();
+  }
+
+  private updateSelection(): void {
+    const items = this.dropdownEl.querySelectorAll('.claudian-resume-item');
+    items?.forEach((item, index) => {
+      if (index === this.selectedIndex) {
+        item.addClass('selected');
+        (item as HTMLElement).scrollIntoView({ block: 'nearest' });
+      } else {
+        item.removeClass('selected');
+      }
+    });
+  }
+
+  private sortConversations(conversations: ConversationMeta[]): ConversationMeta[] {
+    return [...conversations].sort((a, b) => {
+      return (b.lastResponseAt ?? b.createdAt) - (a.lastResponseAt ?? a.createdAt);
+    });
+  }
+
+  private render(): void {
+    this.dropdownEl.empty();
+
+    const header = this.dropdownEl.createDiv({ cls: 'claudian-resume-header' });
+    header.createSpan({ text: 'Resume conversation' });
+
+    if (this.conversations.length === 0) {
+      this.dropdownEl.createDiv({ cls: 'claudian-resume-empty', text: 'No conversations' });
+      return;
+    }
+
+    const list = this.dropdownEl.createDiv({ cls: 'claudian-resume-list' });
+
+    for (let i = 0; i < this.conversations.length; i++) {
+      const conv = this.conversations[i];
+      const isCurrent = conv.id === this.currentConversationId;
+
+      const item = list.createDiv({ cls: 'claudian-resume-item' });
+      if (isCurrent) item.addClass('current');
+      if (i === this.selectedIndex) item.addClass('selected');
+
+      const iconEl = item.createDiv({ cls: 'claudian-resume-item-icon' });
+      setIcon(iconEl, isCurrent ? 'message-square-dot' : 'message-square');
+
+      const content = item.createDiv({ cls: 'claudian-resume-item-content' });
+      const titleEl = content.createDiv({ cls: 'claudian-resume-item-title', text: conv.title });
+      titleEl.setAttribute('title', conv.title);
+      content.createDiv({
+        cls: 'claudian-resume-item-date',
+        text: isCurrent ? 'Current session' : this.formatDate(conv.lastResponseAt ?? conv.createdAt),
+      });
+
+      item.addEventListener('click', () => {
+        if (isCurrent) {
+          this.dismiss();
+          return;
+        }
+        this.callbacks.onSelect(conv.id);
+      });
+
+      item.addEventListener('mouseenter', () => {
+        this.selectedIndex = i;
+        this.updateSelection();
+      });
+    }
+  }
+
+  private formatDate(timestamp: number): string {
+    const date = new Date(timestamp);
+    const now = new Date();
+
+    if (date.toDateString() === now.toDateString()) {
+      return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false });
+    }
+    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }
+}

package/src/shared/components/SelectableDropdown.ts

@@ -0,0 +1,140 @@
+export interface SelectableDropdownOptions {
+  listClassName: string;
+  itemClassName: string;
+  emptyClassName: string;
+  fixed?: boolean;
+  fixedClassName?: string;
+}
+
+export interface SelectableDropdownRenderOptions<T> {
+  items: T[];
+  selectedIndex: number;
+  emptyText: string;
+  renderItem: (item: T, itemEl: HTMLElement) => void;
+  getItemClass?: (item: T) => string | string[] | undefined;
+  onItemClick?: (item: T, index: number, e: MouseEvent) => void;
+  onItemHover?: (item: T, index: number) => void;
+}
+
+export class SelectableDropdown<T> {
+  private containerEl: HTMLElement;
+  private dropdownEl: HTMLElement | null = null;
+  private options: SelectableDropdownOptions;
+  private items: T[] = [];
+  private itemEls: HTMLElement[] = [];
+  private selectedIndex = 0;
+
+  constructor(containerEl: HTMLElement, options: SelectableDropdownOptions) {
+    this.containerEl = containerEl;
+    this.options = options;
+  }
+
+  isVisible(): boolean {
+    return this.dropdownEl?.hasClass('visible') ?? false;
+  }
+
+  getElement(): HTMLElement | null {
+    return this.dropdownEl;
+  }
+
+  getSelectedIndex(): number {
+    return this.selectedIndex;
+  }
+
+  getSelectedItem(): T | null {
+    return this.items[this.selectedIndex] ?? null;
+  }
+
+  getItems(): T[] {
+    return this.items;
+  }
+
+  hide(): void {
+    if (this.dropdownEl) {
+      this.dropdownEl.removeClass('visible');
+    }
+  }
+
+  destroy(): void {
+    if (this.dropdownEl) {
+      this.dropdownEl.remove();
+      this.dropdownEl = null;
+    }
+  }
+
+  render(options: SelectableDropdownRenderOptions<T>): void {
+    this.items = options.items;
+    this.selectedIndex = options.selectedIndex;
+
+    if (!this.dropdownEl) {
+      this.dropdownEl = this.createDropdownElement();
+    }
+
+    this.dropdownEl.empty();
+    this.itemEls = [];
+
+    if (options.items.length === 0) {
+      const emptyEl = this.dropdownEl.createDiv({ cls: this.options.emptyClassName });
+      emptyEl.setText(options.emptyText);
+    } else {
+      for (let i = 0; i < options.items.length; i++) {
+        const item = options.items[i];
+        const itemEl = this.dropdownEl.createDiv({ cls: this.options.itemClassName });
+
+        const extraClass = options.getItemClass?.(item);
+        if (Array.isArray(extraClass)) {
+          extraClass.forEach(cls => itemEl.addClass(cls));
+        } else if (extraClass) {
+          itemEl.addClass(extraClass);
+        }
+
+        if (i === this.selectedIndex) {
+          itemEl.addClass('selected');
+        }
+
+        options.renderItem(item, itemEl);
+
+        itemEl.addEventListener('click', (e) => {
+          this.selectedIndex = i;
+          this.updateSelection();
+          options.onItemClick?.(item, i, e);
+        });
+
+        itemEl.addEventListener('mouseenter', () => {
+          this.selectedIndex = i;
+          this.updateSelection();
+          options.onItemHover?.(item, i);
+        });
+
+        this.itemEls.push(itemEl);
+      }
+    }
+
+    this.dropdownEl.addClass('visible');
+  }
+
+  updateSelection(): void {
+    this.itemEls.forEach((itemEl, index) => {
+      if (index === this.selectedIndex) {
+        itemEl.addClass('selected');
+        itemEl.scrollIntoView({ block: 'nearest' });
+      } else {
+        itemEl.removeClass('selected');
+      }
+    });
+  }
+
+  moveSelection(delta: number): void {
+    const maxIndex = this.items.length - 1;
+    this.selectedIndex = Math.max(0, Math.min(maxIndex, this.selectedIndex + delta));
+    this.updateSelection();
+  }
+
+  private createDropdownElement(): HTMLElement {
+    const className = this.options.fixed && this.options.fixedClassName
+      ? `${this.options.listClassName} ${this.options.fixedClassName}`
+      : this.options.listClassName;
+
+    return this.containerEl.createDiv({ cls: className });
+  }
+}

package/src/shared/components/SelectionHighlight.ts

@@ -0,0 +1,77 @@
+/**
+ * SelectionHighlight - Shared CM6 selection highlight for chat and inline edit
+ *
+ * Provides a reusable mechanism to highlight selected text in the editor
+ * when focus moves elsewhere (e.g., to an input field).
+ */
+
+import { RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import type { DecorationSet } from '@codemirror/view';
+import { Decoration, EditorView } from '@codemirror/view';
+
+export interface SelectionHighlighter {
+  show: (editorView: EditorView, from: number, to: number) => void;
+  hide: (editorView: EditorView) => void;
+}
+
+function createSelectionHighlighter(): SelectionHighlighter {
+  const showHighlight = StateEffect.define<{ from: number; to: number }>();
+  const hideHighlight = StateEffect.define<null>();
+
+  const selectionHighlightField = StateField.define<DecorationSet>({
+    create: () => Decoration.none,
+    update: (deco, tr) => {
+      for (const e of tr.effects) {
+        if (e.is(showHighlight)) {
+          const builder = new RangeSetBuilder<Decoration>();
+          builder.add(e.value.from, e.value.to, Decoration.mark({
+            class: 'claudian-selection-highlight',
+          }));
+          return builder.finish();
+        } else if (e.is(hideHighlight)) {
+          return Decoration.none;
+        }
+      }
+      return deco.map(tr.changes);
+    },
+    provide: (f) => EditorView.decorations.from(f),
+  });
+
+  const installedEditors = new WeakSet<EditorView>();
+
+  function ensureHighlightField(editorView: EditorView): void {
+    if (!installedEditors.has(editorView)) {
+      editorView.dispatch({
+        effects: StateEffect.appendConfig.of(selectionHighlightField),
+      });
+      installedEditors.add(editorView);
+    }
+  }
+
+  function show(editorView: EditorView, from: number, to: number): void {
+    ensureHighlightField(editorView);
+    editorView.dispatch({
+      effects: showHighlight.of({ from, to }),
+    });
+  }
+
+  function hide(editorView: EditorView): void {
+    if (installedEditors.has(editorView)) {
+      editorView.dispatch({
+        effects: hideHighlight.of(null),
+      });
+    }
+  }
+
+  return { show, hide };
+}
+
+const defaultHighlighter = createSelectionHighlighter();
+
+export function showSelectionHighlight(editorView: EditorView, from: number, to: number): void {
+  defaultHighlighter.show(editorView, from, to);
+}
+
+export function hideSelectionHighlight(editorView: EditorView): void {
+  defaultHighlighter.hide(editorView);
+}