@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/message-composer/ds-mobile-message-composer.ts

@@ -1,1146 +0,0 @@
-import { Component, input, output, signal, computed, ViewChild, ElementRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Capacitor } from '@capacitor/core';
-import { Keyboard } from '@capacitor/keyboard';
-import { FilePicker } from '@capawesome/capacitor-file-picker';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsIconButtonComponent } from '@propbinder/design-system';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsMobileAttachmentPreviewComponent, type AttachmentData, type AttachmentFileType } from '../attachment-preview/ds-mobile-attachment-preview';
-import { DsMobileDropdownComponent, type DsMobileDropdownItem } from '../dropdown';
-
-/**
- * DsMobileMessageComposerComponent
- *
- * Reusable message composer component extracted from post-detail-modal.
- * Can be used for both comments and chat messages.
- *
- * Features:
- * - Text input with auto-resize
- * - Avatar display
- * - Send button (appears when text is entered)
- * - Optional mention menu support
- * - Optional edit/reply indicators
- * - Keyboard handling for mobile
- * - Safe area support
- *
- * @example
- * ```html
- * <ds-mobile-message-composer
- *   [avatarInitials]="'JD'"
- *   [placeholder]="'Write a message...'"
- *   (messageSent)="handleMessage($event)">
- * </ds-mobile-message-composer>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-message-composer',
-  standalone: true,
-  imports: [CommonModule, FormsModule, DsAvatarComponent, DsIconButtonComponent, DsIconComponent, DsMobileAttachmentPreviewComponent, DsMobileDropdownComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-
-      /* Composer Container */
-      .message-composer {
-        background: var(--color-background-neutral-primary, #ffffff);
-        border-top: 1px solid var(--border-color-default);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        padding: 12px 16px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      /* Edit indicator (optional) */
-      .edit-indicator {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 8px 12px;
-        background: var(--color-background-brand-subtle, #f0edfe);
-        border-radius: 8px;
-        animation: slideDown 0.2s ease-out;
-      }
-
-      .edit-indicator-content {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: var(--color-accent, #6b5ff5);
-        flex: 1;
-        min-width: 0;
-      }
-
-      .edit-text {
-        font-family: 'Brockmann', sans-serif;
-        font-size: var(--font-size-sm);
-        font-weight: 500;
-        line-height: 18px;
-        color: var(--color-accent, #6b5ff5);
-      }
-
-      .cancel-edit {
-        background: none;
-        border: none;
-        padding: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-accent, #6b5ff5);
-        border-radius: 4px;
-        transition: background 0.2s ease;
-        flex-shrink: 0;
-      }
-
-      .cancel-edit:active {
-        background: var(--color-brand-subtle, #e0dbfe);
-      }
-
-      /* Reply indicator (optional) */
-      .reply-indicator {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 8px 12px;
-        background: var(--color-background-neutral-secondary, #f5f5f5);
-        border-radius: 8px;
-        animation: slideDown 0.2s ease-out;
-      }
-
-      .reply-indicator-content {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        color: var(--color-text-secondary, #737373);
-        flex: 1;
-        min-width: 0;
-      }
-
-      .reply-to-text {
-        font-family: 'Brockmann', sans-serif;
-        font-size: var(--font-size-sm);
-        line-height: 18px;
-        color: var(--color-text-secondary, #737373);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .reply-author {
-        color: var(--color-accent, #6b5ff5);
-        font-weight: 600;
-      }
-
-      .cancel-reply {
-        background: none;
-        border: none;
-        padding: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-text-secondary, #737373);
-        border-radius: 4px;
-        transition: background 0.2s ease;
-        flex-shrink: 0;
-      }
-
-      .cancel-reply:active {
-        background: var(--color-background-neutral-secondary, #f5f5f5);
-      }
-
-      @keyframes slideDown {
-        from {
-          opacity: 0;
-          transform: translateY(-10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      /* Attachment previews section */
-      .attachment-previews-section {
-        padding: 0 0 8px 0;
-        animation: slideDown 0.2s ease-out;
-      }
-
-      .attachment-previews {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .composer-content {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        width: 100%;
-        position: relative;
-      }
-
-      /* Attachment button replacing avatar */
-      .composer-leading-button {
-        flex-shrink: 0;
-      }
-
-      .composer-leading-button::ng-deep button {
-        width: 40px !important;
-        height: 40px !important;
-        min-width: 40px !important;
-        min-height: 40px !important;
-        padding: 0 !important;
-        border-radius: 50% !important;
-        transition: transform 0.3s ease;
-      }
-
-      .composer-leading-button--open::ng-deep button {
-        transform: rotate(45deg);
-      }
-
-      .composer-input-wrapper {
-        flex: 1;
-        display: flex;
-        align-items: flex-start;
-        gap: 8px;
-        background: var(--color-background-neutral-secondary, #f5f5f5);
-        border-radius: 24px;
-        padding: 12px 16px;
-        padding-right: 16px; /* Remove extra padding - no buttons on right anymore */
-        min-height: 44px;
-        position: relative;
-      }
-
-      /* Mention menu custom styles */
-      .mention-user-info {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        flex: 1;
-        min-width: 0;
-      }
-
-      .mention-user-name {
-        font-family: 'Brockmann', sans-serif;
-        font-size: var(--font-size-base);
-        font-weight: 600;
-        line-height: 20px;
-        color: var(--color-text-primary, #1a1a1a);
-      }
-
-      .mention-user-role {
-        font-family: 'Brockmann', sans-serif;
-        font-size: var(--font-size-sm);
-        line-height: 18px;
-        color: var(--color-text-secondary, #737373);
-      }
-
-      .composer-input {
-        flex: 1;
-        border: none;
-        background: transparent;
-        font-family: 'Brockmann', sans-serif;
-        font-size: var(--font-size-sm);
-        line-height: 20px;
-        color: var(--color-text-primary, #1a1a1a);
-        outline: none;
-        resize: none;
-        min-height: 20px;
-        max-height: 120px;
-        overflow-y: auto;
-        padding: 0;
-        margin: 0;
-      }
-
-      .composer-input::placeholder {
-        color: var(--color-text-tertiary, #a0a0a0);
-        font-size: var(--font-size-sm);
-      }
-
-      /* Send button - positioned absolute in top right corner like comment composer */
-      .send-button-inline {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        z-index: 10;
-        flex-shrink: 0;
-        opacity: 0;
-        transform: translateX(20px) scale(0.8);
-        pointer-events: none;
-        transition:
-          opacity 0.15s ease-in,
-          transform 0.15s ease-in;
-      }
-
-      .send-button-inline.show {
-        opacity: 1;
-        transform: translateX(0) scale(1);
-        pointer-events: auto;
-        animation: slideInFromRight var(--spring-bouncy);
-      }
-
-      .send-button-inline::ng-deep button {
-        width: 32px !important;
-        height: 32px !important;
-        min-width: 32px !important;
-        min-height: 32px !important;
-        padding: 0 !important;
-        border-radius: 50% !important;
-      }
-
-      @keyframes slideInFromRight {
-        from {
-          opacity: 0;
-          transform: translateX(20px) scale(0.8);
-        }
-        to {
-          opacity: 1;
-          transform: translateX(0) scale(1);
-        }
-      }
-    `,
-  ],
-  template: `
-    <div class="message-composer">
-      <!-- Edit indicator (optional) -->
-      @if (editingMessage()) {
-        <div class="edit-indicator">
-          <div class="edit-indicator-content">
-            <ds-icon name="remixEditLine" size="16px" />
-            <span class="edit-text">{{ editIndicatorText() }}</span>
-          </div>
-          <button class="cancel-edit" (click)="cancelEdit()" type="button">
-            <ds-icon name="remixCloseLine" size="16px" />
-          </button>
-        </div>
-      }
-
-      <!-- Reply indicator (optional) -->
-      @if (replyingTo() && !editingMessage()) {
-        <div class="reply-indicator">
-          <div class="reply-indicator-content">
-            <ds-icon name="remixReplyLine" size="16px" />
-            <span class="reply-to-text">
-              {{ replyIndicatorText() }} <span class="reply-author">{{ replyingTo()!.authorName }}</span>
-            </span>
-          </div>
-          <button class="cancel-reply" (click)="cancelReply()" type="button">
-            <ds-icon name="remixCloseLine" size="16px" />
-          </button>
-        </div>
-      }
-
-      <!-- Attachment Previews (if any) -->
-      @if (attachments().length > 0) {
-        <div class="attachment-previews-section">
-          <div class="attachment-previews">
-            @for (attachment of attachments(); track attachment.id) {
-              <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
-            }
-          </div>
-        </div>
-      }
-
-      <div class="composer-content">
-        <!-- Attachment button replacing avatar (left side) -->
-        @if (showAttachmentButton()) {
-          <div class="composer-leading-button" [class.composer-leading-button--open]="isAttachmentMenuOpen()">
-            <!-- Main attachment button -->
-            <ds-icon-button
-              id="attachment-trigger"
-              icon="remixAddLine"
-              variant="secondary"
-              size="lg"
-              (clicked)="toggleAttachmentMenu($event)"
-              [attr.aria-label]="attachmentButtonLabel()"
-              [attr.aria-expanded]="isAttachmentMenuOpen()"
-            >
-            </ds-icon-button>
-
-            <!-- Attachment menu using dropdown -->
-            <ds-mobile-dropdown
-              [items]="attachmentMenuItems"
-              [isOpen]="isAttachmentMenuOpen()"
-              [trigger]="'attachment-trigger'"
-              [keepFocusOn]="messageInputRef"
-              position="above"
-              align="start"
-              (itemSelected)="handleAttachmentMenuSelect($event)"
-              (closed)="closeAttachmentMenu()"
-            >
-            </ds-mobile-dropdown>
-          </div>
-        } @else {
-          <!-- Avatar (only shown when attachment button is hidden) -->
-          <ds-avatar [initials]="avatarInitials()" [type]="avatarType()" [src]="avatarSrc()" size="lg" />
-        }
-
-        <div class="composer-input-wrapper">
-          <textarea
-            #messageInputEl
-            id="message-input-trigger"
-            class="composer-input"
-            [placeholder]="placeholder()"
-            [(ngModel)]="messageText"
-            (input)="handleInput($event)"
-            (keydown)="handleKeyDown($event)"
-            (focus)="showKeyboard()"
-            (click)="showKeyboard()"
-            rows="1"
-          >
-          </textarea>
-
-          <!-- Mention menu using dropdown (only render if mentions are enabled) -->
-          @if (enableMentions()) {
-            <ds-mobile-dropdown
-              [items]="mentionDropdownItems()"
-              [isOpen]="showMentionMenu() && !editingMessage() && mentionDropdownItems().length > 0"
-              [trigger]="'message-input-trigger'"
-              position="above"
-              align="start"
-              [maxHeight]="200"
-              (itemSelected)="handleMentionSelect($event)"
-              (closed)="closeMentionMenu()"
-            >
-              <ng-template #itemTemplate let-item>
-                <ds-avatar [initials]="item.data.initials" [type]="'initials'" size="sm" />
-                <div class="mention-user-info">
-                  <span class="mention-user-name">{{ item.data.name }}</span>
-                  <span class="mention-user-role">{{ item.data.role }}</span>
-                </div>
-              </ng-template>
-            </ds-mobile-dropdown>
-          }
-
-          <!-- Send button (absolute positioned in top right, always rendered) -->
-          <ds-icon-button
-            icon="remixCheckLine"
-            variant="primary"
-            size="sm"
-            (clicked)="sendMessage()"
-            [attr.aria-label]="sendButtonLabel()"
-            [class.send-button-inline]="true"
-            [class.show]="messageText().trim().length > 0 || attachments().length > 0"
-          >
-          </ds-icon-button>
-        </div>
-      </div>
-
-      <!-- Hidden file input -->
-      <input
-        #fileInput
-        type="file"
-        accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip,.rar"
-        multiple
-        aria-hidden="true"
-        style="display: none;"
-        (change)="handleFileSelect($event)"
-      />
-    </div>
-  `,
-})
-export class DsMobileMessageComposerComponent implements AfterViewInit, OnDestroy {
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  /**
-   * Avatar initials
-   */
-  avatarInitials = input<string>('');
-
-  /**
-   * Avatar type
-   */
-  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
-
-  /**
-   * Avatar photo source (for photo type)
-   */
-  avatarSrc = input<string>('');
-
-  /**
-   * Placeholder text for the input
-   */
-  placeholder = input<string>('Write a message...');
-
-  /**
-   * Send button aria label
-   */
-  sendButtonLabel = input<string>('Send message');
-
-  /**
-   * Attachment button aria label
-   */
-  attachmentButtonLabel = input<string>('Add attachment');
-
-  /**
-   * Whether to show the attachment button
-   */
-  showAttachmentButton = input<boolean>(false);
-
-  /**
-   * Edit indicator text (when editing)
-   */
-  editIndicatorText = input<string>('Editing message');
-
-  /**
-   * Reply indicator text prefix
-   */
-  replyIndicatorText = input<string>('Replying to');
-
-  /**
-   * Whether to enable mention support
-   */
-  enableMentions = input<boolean>(false);
-
-  /**
-   * Available users for mentions (if mentions enabled)
-   */
-  mentionUsers = input<Array<{ name: string; initials: string; role: string }>>([]);
-
-  /**
-   * Auto-focus input on mount
-   */
-  autoFocus = input<boolean>(false);
-
-  /**
-   * ViewChild for message input
-   */
-  @ViewChild('messageInputEl') messageInputRef?: ElementRef<HTMLTextAreaElement>;
-
-  /**
-   * ViewChild for file input
-   */
-  @ViewChild('fileInput') fileInput?: ElementRef<HTMLInputElement>;
-
-  /**
-   * Message text signal
-   */
-  messageText = signal('');
-
-  /**
-   * Attachments signal
-   */
-  attachments = signal<AttachmentData[]>([]);
-
-  /**
-   * Attachment menu open state
-   */
-  isAttachmentMenuOpen = signal(false);
-
-  /**
-   * Editing message state (optional)
-   */
-  editingMessage = signal<{ authorName: string; originalContent: string; timestamp: string } | null>(null);
-
-  /**
-   * Replying to state (optional)
-   */
-  replyingTo = signal<{ authorName: string; content: string } | null>(null);
-
-  /**
-   * Mention menu state
-   */
-  showMentionMenu = signal(false);
-
-  /**
-   * Mention query for filtering
-   */
-  mentionQuery = signal('');
-
-  /**
-   * Filtered users based on mention query
-   */
-  filteredUsers = computed(() => {
-    if (!this.enableMentions()) return [];
-
-    const query = this.mentionQuery().toLowerCase();
-    const users = this.mentionUsers();
-
-    if (!query) return users;
-    return users.filter((user) => user.name.toLowerCase().includes(query));
-  });
-
-  /**
-   * Convert filtered users to dropdown items
-   */
-  mentionDropdownItems = computed((): DsMobileDropdownItem[] => {
-    return this.filteredUsers().map((user) => ({
-      id: user.name,
-      label: user.name,
-      data: {
-        name: user.name,
-        initials: user.initials,
-        role: user.role,
-      },
-    }));
-  });
-
-  /**
-   * Attachment menu items
-   * Static list to prevent change detection loops
-   */
-  readonly attachmentMenuItems: DsMobileDropdownItem[] = [
-    {
-      id: 'photo',
-      leadingIcon: 'remixImageLine',
-      label: 'Photo',
-      action: () => this.handleAddPhoto(),
-    },
-    {
-      id: 'file',
-      leadingIcon: 'remixFile3Line',
-      label: 'File',
-      action: () => this.handleAddFile(),
-    },
-  ];
-
-  /**
-   * Emits when a message is sent
-   */
-  messageSent = output<{
-    content: string;
-    isReply?: boolean;
-    replyTo?: string;
-    isEdit?: boolean;
-    attachments?: AttachmentData[];
-  }>();
-
-  /**
-   * Emits when edit is cancelled
-   */
-  editCancelled = output<void>();
-
-  /**
-   * Emits when reply is cancelled
-   */
-  replyCancelled = output<void>();
-
-  /**
-   * Emits when mention is selected
-   */
-  mentionSelected = output<{ userName: string }>();
-
-  /**
-   * Emits when attachment button is clicked
-   */
-  attachmentClicked = output<void>();
-
-  /**
-   * Emits when attachments array changes (added or removed)
-   * Parent components (like chat modal) can use this to scroll to bottom
-   */
-  attachmentsChanged = output<void>();
-
-  ngAfterViewInit(): void {
-    // Auto-focus input if requested
-    if (this.autoFocus()) {
-      setTimeout(() => {
-        this.messageInputRef?.nativeElement.focus();
-        this.showKeyboard();
-      }, 300);
-    }
-
-    // Set up keyboard listeners
-    this.setupKeyboardListeners();
-
-    // Explicitly trigger change detection to avoid NG0100 with ViewChild bindings
-    this.cdr.detectChanges();
-  }
-
-  ngOnDestroy(): void {
-    // Clean up keyboard listeners
-    this.cleanupKeyboardListeners();
-  }
-
-  /**
-   * Set up keyboard event listeners
-   */
-  private setupKeyboardListeners(): void {
-    Keyboard.addListener('keyboardWillShow', (info) => {
-      document.documentElement.style.setProperty('--keyboard-height', `${info.keyboardHeight}px`);
-    }).catch(() => {});
-
-    Keyboard.addListener('keyboardWillHide', () => {
-      document.documentElement.style.setProperty('--keyboard-height', '0px');
-    }).catch(() => {});
-  }
-
-  /**
-   * Clean up keyboard event listeners
-   */
-  private cleanupKeyboardListeners(): void {
-    Keyboard.removeAllListeners().catch(() => {});
-  }
-
-  /**
-   * Show the keyboard when user interacts with input
-   */
-  showKeyboard(): void {
-    Keyboard.show().catch(() => {});
-  }
-
-  /**
-   * Handle keyboard shortcuts (Shift+Enter to send)
-   */
-  handleKeyDown(event: KeyboardEvent): void {
-    // Shift+Enter sends the message
-    if (event.key === 'Enter' && event.shiftKey) {
-      event.preventDefault();
-      const hasContent = this.messageText().trim().length > 0 || this.attachments().length > 0;
-      if (hasContent) {
-        this.sendMessage();
-      }
-    }
-    // Regular Enter just creates a new line (default behavior)
-  }
-
-  /**
-   * Handle input changes and detect @ mentions
-   */
-  handleInput(event: Event): void {
-    const textarea = event.target as HTMLTextAreaElement;
-    const text = textarea.value;
-    const cursorPosition = textarea.selectionStart || 0;
-
-    // Update signal
-    this.messageText.set(text);
-
-    // Auto-resize textarea
-    textarea.style.height = 'auto';
-    textarea.style.height = textarea.scrollHeight + 'px';
-
-    // Handle mentions if enabled
-    if (this.enableMentions()) {
-      // Find the last @ before cursor
-      const textBeforeCursor = text.substring(0, cursorPosition);
-      const lastAtIndex = textBeforeCursor.lastIndexOf('@');
-
-      if (lastAtIndex !== -1) {
-        // Check if there's a space after @
-        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
-        const hasSpace = textAfterAt.includes(' ');
-
-        if (!hasSpace) {
-          // Show mention menu
-          this.showMentionMenu.set(true);
-          this.mentionQuery.set(textAfterAt);
-        } else {
-          this.showMentionMenu.set(false);
-        }
-      } else {
-        this.showMentionMenu.set(false);
-      }
-    }
-  }
-
-  /**
-   * Handle mention selection from dropdown
-   */
-  handleMentionSelect(item: DsMobileDropdownItem): void {
-    this.selectMention(item.data.name);
-  }
-
-  /**
-   * Close mention menu
-   */
-  closeMentionMenu(): void {
-    this.showMentionMenu.set(false);
-  }
-
-  /**
-   * Handle attachment menu selection from dropdown
-   */
-  handleAttachmentMenuSelect(item: DsMobileDropdownItem): void {
-    // Action is already called by the dropdown, just close the menu
-    this.closeAttachmentMenu();
-  }
-
-  /**
-   * Select a user from mention menu
-   */
-  selectMention(userName: string): void {
-    // Set as reply (similar to clicking Reply)
-    this.replyingTo.set({ authorName: userName, content: '' });
-
-    // Clear the @ from the input
-    const currentText = this.messageText();
-    const textWithoutMention = currentText.substring(0, currentText.lastIndexOf('@'));
-    this.messageText.set(textWithoutMention);
-
-    // Hide mention menu
-    this.showMentionMenu.set(false);
-
-    // Emit mention selected event
-    this.mentionSelected.emit({ userName });
-
-    // Focus back on input
-    setTimeout(() => {
-      this.messageInputRef?.nativeElement.focus();
-    }, 0);
-  }
-
-  /**
-   * Cancel edit
-   */
-  cancelEdit(): void {
-    this.editingMessage.set(null);
-    this.messageText.set('');
-    this.editCancelled.emit();
-  }
-
-  /**
-   * Cancel reply
-   */
-  cancelReply(): void {
-    this.replyingTo.set(null);
-    this.replyCancelled.emit();
-  }
-
-  /**
-   * Set reply state (for external use)
-   */
-  setReply(authorName: string, content: string): void {
-    this.replyingTo.set({ authorName, content });
-    // Focus the input and show keyboard
-    setTimeout(() => {
-      this.messageInputRef?.nativeElement.focus();
-      this.showKeyboard();
-    }, 100);
-  }
-
-  /**
-   * Set edit state (for external use)
-   */
-  setEdit(authorName: string, originalContent: string, timestamp: string): void {
-    // Clear reply state if active
-    this.replyingTo.set(null);
-
-    // Remove @mention from the content if it exists
-    let contentToEdit = originalContent;
-    const mentionMatch = originalContent.match(/^@([A-Za-z]+(?:\s+[A-Za-z]+)?)\s+/);
-    if (mentionMatch) {
-      contentToEdit = originalContent.substring(mentionMatch[0].length);
-    }
-
-    // Set edit state
-    this.editingMessage.set({ authorName, originalContent, timestamp });
-
-    // Populate the input with existing content
-    this.messageText.set(contentToEdit);
-
-    // Focus the input, show keyboard, and auto-resize
-    setTimeout(() => {
-      if (this.messageInputRef?.nativeElement) {
-        const textarea = this.messageInputRef.nativeElement;
-        textarea.focus();
-
-        // Auto-resize textarea to fit content
-        textarea.style.height = 'auto';
-        textarea.style.height = textarea.scrollHeight + 'px';
-
-        this.showKeyboard();
-      }
-    }, 100);
-  }
-
-  /**
-   * Clear composer state
-   */
-  clear(): void {
-    this.messageText.set('');
-    this.editingMessage.set(null);
-    this.replyingTo.set(null);
-    this.showMentionMenu.set(false);
-    this.attachments.set([]);
-
-    // Reset textarea height
-    if (this.messageInputRef?.nativeElement) {
-      this.messageInputRef.nativeElement.style.height = 'auto';
-    }
-  }
-
-  /**
-   * Focus the input
-   */
-  focus(): void {
-    this.messageInputRef?.nativeElement.focus();
-    this.showKeyboard();
-  }
-
-  /**
-   * Toggle attachment menu open/closed
-   * Uses mousedown/touchstart to prevent focus loss from textarea
-   */
-  toggleAttachmentMenu(event?: MouseEvent | TouchEvent): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    this.isAttachmentMenuOpen.update((open) => !open);
-  }
-
-  /**
-   * Close attachment menu
-   */
-  closeAttachmentMenu(event?: MouseEvent): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    this.isAttachmentMenuOpen.set(false);
-  }
-
-  /**
-   * Handle add photo button click from menu
-   * Uses Capawesome File Picker API to open photo library directly
-   * Allows multiple photo selection
-   */
-  async handleAddPhoto(event?: MouseEvent): Promise<void> {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    if (this.attachments().length >= 6) {
-      return;
-    }
-
-    try {
-      //console.log('[MessageComposer] Opening photo library');
-
-      // Calculate remaining slots
-      const remainingSlots = 6 - this.attachments().length;
-
-      // Open photo library with multiple selection using pickImages
-      const result = await FilePicker.pickImages({
-        limit: remainingSlots, // Limit to remaining slots
-      });
-
-      if (result.files && result.files.length > 0) {
-        //console.log(`[MessageComposer] ${result.files.length} photo(s) selected`);
-
-        // Process each selected photo
-        for (const photo of result.files) {
-          const attachmentId = `photo-${Date.now()}-${Math.random()}`;
-
-          // Add attachment with loading state
-          const loadingAttachment: AttachmentData = {
-            id: attachmentId,
-            src: photo.path ? Capacitor.convertFileSrc(photo.path) : (photo.blob ? URL.createObjectURL(photo.blob) : ''),
-            type: 'image',
-            name: photo.name,
-            size: this.formatFileSize(photo.size ?? 0),
-            isLoading: true,
-          };
-
-          this.attachments.update((attachments) => [...attachments, loadingAttachment]);
-
-          // Simulate processing time (in real app, this would be actual image processing)
-          // TODO: Reduce to 300ms or remove in production
-          setTimeout(() => {
-            this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, isLoading: false } : a)));
-          }, 1500); // 1.5s for testing - shows loading overlay clearly
-        }
-
-        //console.log('[MessageComposer] All photos added successfully');
-
-        // Notify parent that attachments changed so it can scroll
-        this.attachmentsChanged.emit();
-
-        // ResizeObserver in MobileModalBase automatically handles layout adjustments
-      }
-    } catch (error: any) {
-      if (error.message && !error.message.includes('cancel')) {
-        //console.error('[MessageComposer] Error adding photo:', error);
-      }
-      // User cancelled - that's fine
-    }
-  }
-
-  /**
-   * Handle add file button click from menu
-   * Opens file picker
-   */
-  handleAddFile(event?: MouseEvent): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    if (this.attachments().length >= 6) {
-      return;
-    }
-
-    console.log('[MessageComposer] Opening file picker');
-
-    // Trigger the hidden file input
-    if (this.fileInput) {
-      this.fileInput.nativeElement.click();
-    }
-    this.attachmentClicked.emit();
-  }
-
-  /**
-   * Detect file type from file name or mime type
-   */
-  private detectFileType(file: File): AttachmentFileType {
-    const fileName = file.name.toLowerCase();
-    const mimeType = file.type.toLowerCase();
-
-    // Check if it's an image
-    if (mimeType.startsWith('image/')) {
-      return 'image';
-    }
-
-    // Check file extension
-    if (fileName.endsWith('.pdf')) {
-      return 'pdf';
-    } else if (fileName.endsWith('.doc')) {
-      return 'doc';
-    } else if (fileName.endsWith('.docx')) {
-      return 'docx';
-    } else if (fileName.endsWith('.xls')) {
-      return 'xls';
-    } else if (fileName.endsWith('.xlsx')) {
-      return 'xlsx';
-    }
-
-    return 'other';
-  }
-
-  /**
-   * Format file size for display
-   */
-  private formatFileSize(bytes: number): string {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-  }
-
-  /**
-   * Handle file selection from file input
-   */
-  handleFileSelect(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const files = input.files;
-
-    if (!files || files.length === 0) {
-      // User cancelled - blur handler will restore keyboard
-      return;
-    }
-
-    // Process each selected file (up to 6 total)
-    const remainingSlots = 6 - this.attachments().length;
-    const filesToProcess = Array.from(files).slice(0, remainingSlots);
-
-    filesToProcess.forEach((file) => {
-      const fileType = this.detectFileType(file);
-      const attachmentId = `file-${Date.now()}-${Math.random()}`;
-
-      // Add attachment with loading state immediately
-      const loadingAttachment: AttachmentData = {
-        id: attachmentId,
-        src: '', // Will be set after reading
-        type: fileType,
-        name: file.name,
-        size: this.formatFileSize(file.size),
-        isLoading: true,
-      };
-      this.attachments.update((attachments) => [...attachments, loadingAttachment]);
-
-      // Create a data URL for preview
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const result = e.target?.result as string;
-        if (result) {
-          // Add minimum loading time for better UX feedback
-          // TODO: Remove setTimeout in production (use actual FileReader timing)
-          setTimeout(() => {
-            // Update attachment with actual data and remove loading state
-            this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, src: result, isLoading: false } : a)));
-
-            // Notify parent that attachments changed so it can scroll
-            setTimeout(() => {
-              this.attachmentsChanged.emit();
-            }, 100);
-          }, 1000); // 1s minimum for testing - shows loading overlay clearly
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-
-    // Reset the input so the same file can be selected again
-    input.value = '';
-
-    // ResizeObserver in MobileModalBase automatically handles layout adjustments
-  }
-
-  /**
-   * Remove an attachment from the list
-   * Keeps keyboard open by maintaining focus
-   */
-  removeAttachment(attachmentId: string): void {
-    this.attachments.update((attachments) => attachments.filter((a) => a.id !== attachmentId));
-
-    // Immediately refocus input to prevent keyboard from closing
-    setTimeout(() => {
-      if (this.messageInputRef?.nativeElement) {
-        this.messageInputRef.nativeElement.focus();
-        Keyboard.show().catch((e) => console.log('Keyboard.show() not available:', e));
-      }
-    }, 0);
-
-    // Notify parent that attachments changed so it can scroll
-    this.attachmentsChanged.emit();
-
-    // ResizeObserver in MobileModalBase automatically handles layout adjustments
-  }
-
-  /**
-   * Send message
-   */
-  sendMessage(): void {
-    const text = this.messageText().trim();
-    const hasAttachments = this.attachments().length > 0;
-
-    // Must have either text or attachments
-    if (!text && !hasAttachments) return;
-
-    const isEdit = !!this.editingMessage();
-    const isReply = !!this.replyingTo();
-
-    // Emit message sent event
-    this.messageSent.emit({
-      content: isReply && this.replyingTo() ? `@${this.replyingTo()!.authorName} ${text}` : text,
-      isReply,
-      replyTo: this.replyingTo()?.authorName,
-      isEdit,
-      attachments: hasAttachments ? [...this.attachments()] : undefined,
-    });
-
-    // Keep keyboard open by explicitly showing it before clearing
-    // This prevents the keyboard from starting to close during the clear operation
-    Keyboard.show().catch(() => {
-      // Keyboard.show() not available on web, that's fine
-    });
-
-    // Clear the input and states
-    this.clear();
-
-    // Ensure input stays focused for quick follow-up messages
-    // The keyboard should remain open throughout this process
-    if (this.messageInputRef?.nativeElement) {
-      this.messageInputRef.nativeElement.focus();
-    }
-  }
-}