webui/components/chat/message-queue/message-queue.html

<html>
<head>
  <script type="module">
    import { store } from "/components/chat/message-queue/message-queue-store.js";
  </script>
</head>
<body>
  <div x-data>
    <template x-if="$store.messageQueue?.hasQueue">
      <div class="queue-preview">
        <div class="queue-header">
          <span class="queue-title">
            Queued Messages (<span x-text="$store.messageQueue.count"></span>)
          </span>
          <div class="queue-header-actions">
            <button class="queue-header-btn" @click="$store.messageQueue.sendAll()" title="Send all">
              <x-icon name="keyboard_double_arrow_right"></x-icon>
            </button>
            <button class="queue-header-btn delete" @click="$store.messageQueue.clearQueue()" title="Clear all">
              <x-icon name="delete_sweep"></x-icon>
            </button>
          </div>
        </div>
        <div class="queue-items no-scrollbar">
          <template x-for="(item, index) in $store.messageQueue.allItems" :key="item.id">
            <div class="queue-item" :class="{ 'queue-item-pending': item.pending }">
              <div class="queue-item-content">
                <template x-if="item.pending">
                  <span class="queue-item-pending-icon"></span>
                </template>
                <template x-if="!item.pending">
                  <span class="queue-item-seq" x-text="index + 1"></span>
                </template>
                <span class="queue-item-text" x-text="item.text || '(attachment only)'"></span>
                <template x-if="item.attachments?.length > 0">
                  <div class="queue-attachments">
                    <template x-for="att in item.attachments" :key="att">
                      <img 
                        :src="$store.messageQueue.getAttachmentUrl(att)" 
                        :alt="att"
                        class="queue-attachment-thumb"
                        :title="att"
                      />
                    </template>
                  </div>
                </template>
              </div>
              <div class="queue-item-actions">
                <button class="queue-action-btn send" @click="$store.messageQueue.sendItem(item.id)" title="Send now">
                  <x-icon name="send"></x-icon>
                </button>
                <button class="queue-action-btn delete" @click="$store.messageQueue.removeItem(item.id)" title="Remove">
                  <x-icon name="close"></x-icon>
                </button>
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>

  <style>
    .queue-preview {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: var(--spacing-sm);
      margin-bottom: var(--spacing-xs);
    }

    .queue-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-xs);
    }

    .queue-title {
      font-size: var(--font-size-xs);
      color: var(--color-text-secondary);
    }

    .queue-header-actions {
      display: flex;
      gap: 2px;
    }

    .queue-header-btn {
      background: transparent;
      border: none;
      color: var(--color-text-secondary);
      cursor: pointer;
      padding: 2px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      opacity: 0.6;
      transition: opacity 0.1s ease-in-out, color 0.1s ease-in-out,
        box-shadow 0.1s ease-in-out;
    }

    .queue-header-btn:hover {
      opacity: 1;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
    }

    .queue-header-btn:active {
      opacity: 0.5;
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06);
    }

    .queue-header-btn .material-symbols-outlined {
      font-size: var(--font-size-large);
    }

    .queue-items {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-height: 120px;
      overflow-y: auto;
    }

    .queue-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-sm);
      padding: 6px 8px;
      border-radius: 4px;
      cursor: default;
    }

    .queue-item:hover {
      background-color: var(--color-background-hover);
    }

    .queue-item-content {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      flex: 1;
      min-width: 0;
    }

    .queue-item-seq {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      font-size: 0.5rem;
      color: var(--color-text-secondary);
      background: var(--color-background);
      border-radius: 50%;
    }

    .queue-item-text {
      font-size: var(--font-size-small);
      color: var(--color-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .queue-attachments {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .queue-attachment-thumb {
      width: 20px;
      height: 20px;
      object-fit: contain;
      border-radius: 3px;
      border: 1px solid var(--color-border);
    }

    .queue-item-actions {
      display: flex;
      gap: 2px;
      flex-shrink: 0;
    }

    .device-pointer .queue-item-actions {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.15s;
    }

    .device-pointer .queue-item:hover .queue-item-actions {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .device-touch .queue-item-actions {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .queue-action-btn {
      background: transparent;
      border: none;
      color: var(--color-primary);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      display: flex;
      align-items: center;
    }

    .queue-action-btn .material-symbols-outlined {
      font-size: var(--font-size-smaller);
    }

    .queue-item-pending {
      opacity: 0.6;
    }

    .queue-item-pending .queue-action-btn.send {
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .queue-item-pending-icon {
      width: 1rem;
      height: 1rem;
      border: 2px solid var(--color-border);
      border-top-color: var(--color-primary);
      border-radius: 50%;
      animation: pending-spin 0.8s linear infinite;
    }

    @keyframes pending-spin {
      to { transform: rotate(360deg); }
    }
  </style>
</body>
</html>