makethisbetter 1.0.0

package/src/popup/comment.ts

@@ -0,0 +1,177 @@
+import type { ShadowContainer } from '../widget/shadow'
+import type { I18nMessages } from '../i18n'
+
+interface PopupOptions {
+  targetName: string
+  x: number
+  y: number
+  onSubmit: (description: string) => void
+  onClose: () => void
+  messages: I18nMessages
+}
+
+export class CommentPopup {
+  private el: HTMLDivElement
+  private textarea!: HTMLTextAreaElement
+  private submitBtn!: HTMLButtonElement
+  private errorEl!: HTMLDivElement
+  private onSubmit: (description: string) => void
+  private onClose: () => void
+  private submitLabel: string
+  private loading = false
+
+  constructor(shadow: ShadowContainer, opts: PopupOptions) {
+    this.onSubmit = opts.onSubmit
+    this.onClose = opts.onClose
+    this.submitLabel = opts.messages.popup.submit
+
+    this.el = shadow.el<HTMLDivElement>('div', 'mtb-popup')
+    this.el.innerHTML = this.buildHTML(opts)
+    shadow.append(this.el)
+
+    this.textarea = this.el.querySelector('.mtb-textarea')!
+    this.submitBtn = this.el.querySelector('.mtb-submit-btn')!
+
+    this.positionPopup(opts.x, opts.y)
+    this.bindEvents(opts.messages)
+    this.textarea.focus()
+  }
+
+  private buildHTML(opts: PopupOptions): string {
+    const m = opts.messages
+    const quickOpts = m.popup.quickOptions
+      .map(
+        o => `
+        <button class="mtb-quick-option" data-quick="${escapeHtml(o.label)}">
+          <span class="mtb-quick-option-emoji">${o.emoji}</span>
+          <span>${escapeHtml(o.label)}</span>
+        </button>`,
+      )
+      .join('')
+
+    return `
+      <div class="mtb-popup-header">
+        <div class="mtb-popup-icon">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+          </svg>
+        </div>
+        <span class="mtb-popup-title">${m.popup.about} "${escapeHtml(opts.targetName)}"</span>
+        <button class="mtb-popup-close" aria-label="Close">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      <div class="mtb-popup-body">
+        <div class="mtb-quick-options">
+          ${quickOpts}
+        </div>
+        <div class="mtb-textarea-wrap">
+          <textarea class="mtb-textarea" placeholder="${escapeHtml(m.popup.placeholder)}"></textarea>
+        </div>
+        <div class="mtb-popup-error" role="alert"></div>
+        <div class="mtb-popup-actions">
+          <button class="mtb-cancel-btn" type="button">${escapeHtml(m.popup.cancel)}</button>
+          <button class="mtb-submit-btn" type="button" disabled>${escapeHtml(m.popup.submit)}</button>
+        </div>
+      </div>
+    `
+  }
+
+  private positionPopup(x: number, y: number): void {
+    const popupW = 320
+    const popupH = 260
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    const margin = 12
+
+    let left = x + 12
+    let top = y + 12
+
+    if (left + popupW > vw - margin) {
+      left = x - popupW - 12
+    }
+    if (left < margin) left = margin
+
+    if (top + popupH > vh - margin) {
+      top = vh - popupH - margin
+    }
+    if (top < margin) top = margin
+
+    this.el.style.left = `${left}px`
+    this.el.style.top = `${top}px`
+  }
+
+  private bindEvents(messages: I18nMessages): void {
+    this.el.querySelector('.mtb-popup-close')!.addEventListener('click', () => this.onClose())
+    this.el.querySelector('.mtb-cancel-btn')!.addEventListener('click', () => this.onClose())
+    this.errorEl = this.el.querySelector('.mtb-popup-error')!
+
+    this.el.querySelectorAll('.mtb-quick-option').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const label = (btn as HTMLElement).dataset['quick'] ?? ''
+        this.textarea.value = label
+        this.updateSubmitState()
+        this.textarea.focus()
+      })
+    })
+
+    this.textarea.addEventListener('input', () => this.updateSubmitState())
+
+    this.textarea.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        this.submit()
+      }
+    })
+
+    this.submitBtn.addEventListener('click', () => this.submit())
+  }
+
+  private updateSubmitState(): void {
+    const hasText = this.textarea.value.trim().length > 0
+    this.submitBtn.classList.toggle('ready', hasText && !this.loading)
+    this.submitBtn.disabled = !hasText || this.loading
+    this.errorEl.hidden = true
+    this.errorEl.textContent = ''
+  }
+
+  private submit(): void {
+    const text = this.textarea.value.trim()
+    if (!text || this.loading) return
+    this.onSubmit(text)
+  }
+
+  setLoading(loading: boolean): void {
+    this.loading = loading
+    if (loading) {
+      this.submitBtn.classList.add('loading')
+      this.submitBtn.innerHTML = `<span class="mtb-dot"></span><span class="mtb-dot"></span><span class="mtb-dot"></span>`
+      this.textarea.disabled = true
+    } else {
+      this.submitBtn.classList.remove('loading')
+      this.submitBtn.textContent = this.submitLabel
+      this.textarea.disabled = false
+    }
+    this.updateSubmitState()
+  }
+
+  setError(message: string): void {
+    this.errorEl.textContent = message
+    this.errorEl.hidden = false
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}

package/src/popup/success.test.ts

@@ -0,0 +1,75 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SuccessCard } from './success'
+import { ShadowContainer } from '../widget/shadow'
+import { getMessages } from '../i18n'
+
+function setupCard() {
+  const shadow = new ShadowContainer()
+  const onClose = vi.fn()
+  const messages = getMessages('en')
+  const card = new SuccessCard(shadow, messages, onClose)
+
+  return { shadow, card, onClose, messages }
+}
+
+describe('SuccessCard', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('renders title, message, and close button', () => {
+    const { shadow, card, messages } = setupCard()
+
+    expect(shadow.root.querySelector('.mtb-success-title')?.textContent).toBe(messages.success.title)
+    expect(shadow.root.querySelector('.mtb-success-msg')?.textContent).toBe(messages.success.message)
+    expect(shadow.root.querySelector('.mtb-close-link')?.textContent).toBe(messages.success.close)
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('renders checkmark icon', () => {
+    const { shadow, card } = setupCard()
+
+    const icon = shadow.root.querySelector('.mtb-success-icon svg')
+    expect(icon).toBeTruthy()
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('calls onClose when close button is clicked', () => {
+    const { shadow, card, onClose } = setupCard()
+
+    shadow.root.querySelector<HTMLButtonElement>('.mtb-close-link')!.click()
+    expect(onClose).toHaveBeenCalledOnce()
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('auto-closes after 5 seconds', () => {
+    const { shadow, card, onClose } = setupCard()
+
+    expect(onClose).not.toHaveBeenCalled()
+    vi.advanceTimersByTime(5000)
+    expect(onClose).toHaveBeenCalled()
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('destroy removes element from shadow root', () => {
+    const { shadow, card } = setupCard()
+
+    expect(shadow.root.querySelector('.mtb-success')).toBeTruthy()
+    card.destroy()
+    expect(shadow.root.querySelector('.mtb-success')).toBeNull()
+
+    shadow.destroy()
+  })
+})

package/src/popup/success.ts

@@ -0,0 +1,33 @@
+import type { ShadowContainer } from '../widget/shadow'
+import type { I18nMessages } from '../i18n'
+import { BRAND_COLOR } from '../styles'
+
+const SUCCESS_AUTO_CLOSE_MS = 5000
+
+export class SuccessCard {
+  private el: HTMLDivElement
+
+  constructor(shadow: ShadowContainer, messages: I18nMessages, onClose: () => void) {
+    this.el = shadow.el<HTMLDivElement>('div', 'mtb-success')
+    this.el.style.right = '20px'
+    this.el.style.bottom = '20px'
+    this.el.innerHTML = `
+      <div class="mtb-success-icon">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="${BRAND_COLOR}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+      </div>
+      <div class="mtb-success-title">${messages.success.title}</div>
+      <div class="mtb-success-msg">${messages.success.message}</div>
+      <button class="mtb-close-link">${messages.success.close}</button>
+    `
+    shadow.append(this.el)
+    this.el.querySelector('.mtb-close-link')!.addEventListener('click', onClose)
+
+    setTimeout(() => onClose(), SUCCESS_AUTO_CLOSE_MS)
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}

package/src/record/control-bar.test.ts

@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { RecordControlBar } from './control-bar'
+import type { ShadowContainer } from '../widget/shadow'
+import type { I18nMessages } from '../i18n'
+
+function createMockShadow(): ShadowContainer & { appended: Node[] } {
+  const appended: Node[] = []
+  return {
+    appended,
+    el: <T extends HTMLElement>(tag: string, className?: string): T => {
+      const el = document.createElement(tag) as T
+      if (className) el.className = className
+      return el
+    },
+    append: (...nodes: Node[]) => {
+      nodes.forEach((n) => {
+        appended.push(n)
+        document.body.appendChild(n)
+      })
+    },
+    remove: vi.fn(),
+    root: document.createElement('div') as unknown as ShadowRoot,
+    destroy: vi.fn(),
+  } as unknown as ShadowContainer & { appended: Node[] }
+}
+
+function createMessages(): I18nMessages {
+  return {
+    record: {
+      stop: 'Stop',
+      timer_label: 'Recording',
+      max_reached: 'Maximum recording time reached',
+    },
+  } as unknown as I18nMessages
+}
+
+describe('RecordControlBar', () => {
+  let shadow: ReturnType<typeof createMockShadow>
+  let bar: RecordControlBar
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    shadow = createMockShadow()
+  })
+
+  afterEach(() => {
+    bar?.destroy()
+    document.body.innerHTML = ''
+    vi.useRealTimers()
+  })
+
+  it('constructor creates DOM with timer and stop button', () => {
+    bar = new RecordControlBar(shadow, createMessages(), () => 0, () => {})
+
+    expect(shadow.appended).toHaveLength(1)
+    const container = shadow.appended[0] as HTMLElement
+
+    expect(container.querySelector('.mtb-record-dot')).toBeTruthy()
+    expect(container.querySelector('.mtb-record-timer')).toBeTruthy()
+    expect(container.querySelector('.mtb-record-stop')).toBeTruthy()
+    expect(container.querySelector('.mtb-record-stop')!.textContent).toBe('Stop')
+  })
+
+  it('stop button fires the onStop callback', () => {
+    const onStop = vi.fn()
+    bar = new RecordControlBar(shadow, createMessages(), () => 0, onStop)
+
+    const stopBtn = (shadow.appended[0] as HTMLElement).querySelector('.mtb-record-stop')!
+    stopBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(onStop).toHaveBeenCalledOnce()
+  })
+
+  it('timer updates display every second', () => {
+    let seconds = 0
+    bar = new RecordControlBar(shadow, createMessages(), () => seconds, () => {})
+
+    const timerEl = (shadow.appended[0] as HTMLElement).querySelector('.mtb-record-timer')!
+    expect(timerEl.textContent).toBe('00:00')
+
+    seconds = 5
+    vi.advanceTimersByTime(1000)
+    expect(timerEl.textContent).toBe('00:05')
+
+    seconds = 65
+    vi.advanceTimersByTime(1000)
+    expect(timerEl.textContent).toBe('01:05')
+  })
+
+  it('destroy removes DOM element and stops interval', () => {
+    let seconds = 0
+    bar = new RecordControlBar(shadow, createMessages(), () => seconds, () => {})
+
+    const container = shadow.appended[0] as HTMLElement
+    expect(document.body.contains(container)).toBe(true)
+
+    bar.destroy()
+    expect(document.body.contains(container)).toBe(false)
+
+    seconds = 99
+    vi.advanceTimersByTime(5000)
+  })
+
+  it('initial timer text is 00:00', () => {
+    bar = new RecordControlBar(shadow, createMessages(), () => 0, () => {})
+
+    const timerEl = (shadow.appended[0] as HTMLElement).querySelector('.mtb-record-timer')!
+    expect(timerEl.textContent).toBe('00:00')
+  })
+})

package/src/record/control-bar.ts

@@ -0,0 +1,46 @@
+import type { ShadowContainer } from '../widget/shadow'
+import type { I18nMessages } from '../i18n'
+
+export class RecordControlBar {
+  private el: HTMLDivElement
+  private timerEl!: HTMLSpanElement
+  private intervalId: ReturnType<typeof setInterval> | null = null
+  private getDuration: () => number
+
+  constructor(
+    shadow: ShadowContainer,
+    messages: I18nMessages,
+    getDuration: () => number,
+    onStop: () => void,
+  ) {
+    this.getDuration = getDuration
+
+    this.el = shadow.el<HTMLDivElement>('div', 'mtb-record-bar')
+    this.el.innerHTML = `
+      <span class="mtb-record-dot"></span>
+      <span class="mtb-record-timer">00:00</span>
+      <button class="mtb-record-stop" type="button">${messages.record.stop}</button>
+    `
+    shadow.append(this.el)
+
+    this.timerEl = this.el.querySelector('.mtb-record-timer')!
+    this.el.querySelector('.mtb-record-stop')!.addEventListener('click', onStop)
+
+    this.intervalId = setInterval(() => this.updateTimer(), 1000)
+  }
+
+  private updateTimer(): void {
+    const secs = this.getDuration()
+    const mm = String(Math.floor(secs / 60)).padStart(2, '0')
+    const ss = String(secs % 60).padStart(2, '0')
+    this.timerEl.textContent = `${mm}:${ss}`
+  }
+
+  destroy(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId)
+      this.intervalId = null
+    }
+    this.el.remove()
+  }
+}

package/src/record/session.test.ts

@@ -0,0 +1,153 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { RecordSession, type RecordingResult } from './session'
+import type { ShadowContainer } from '../widget/shadow'
+
+const mockStopFn = vi.fn()
+const mockAddCustomEvent = vi.fn()
+const mockRecord = Object.assign(
+  vi.fn(({ emit }: { emit: (event: Record<string, unknown>) => void }) => {
+    emit({ type: 2, data: 'snapshot' })
+    return mockStopFn
+  }),
+  { addCustomEvent: mockAddCustomEvent },
+)
+
+vi.mock('rrweb', () => ({ record: mockRecord }))
+
+function createMockShadow(): ShadowContainer {
+  const elements: HTMLElement[] = []
+  return {
+    el: <T extends HTMLElement>(tag: string, className?: string): T => {
+      const el = document.createElement(tag) as T
+      if (className) el.className = className
+      return el
+    },
+    append: (...nodes: Node[]) => {
+      nodes.forEach((n) => elements.push(n as HTMLElement))
+    },
+    remove: vi.fn(),
+    root: document.createElement('div') as unknown as ShadowRoot,
+    destroy: vi.fn(),
+  } as unknown as ShadowContainer
+}
+
+describe('RecordSession', () => {
+  let session: RecordSession
+  let shadow: ShadowContainer
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.clearAllMocks()
+    shadow = createMockShadow()
+  })
+
+  afterEach(() => {
+    session?.destroy()
+    vi.useRealTimers()
+  })
+
+  it('start() initializes recording via rrweb', async () => {
+    session = new RecordSession(shadow)
+    await session.start()
+
+    expect(mockRecord).toHaveBeenCalledOnce()
+    expect(mockRecord).toHaveBeenCalledWith(
+      expect.objectContaining({ emit: expect.any(Function) }),
+    )
+  })
+
+  it('stop() returns captured events and duration', async () => {
+    session = new RecordSession(shadow)
+    await session.start()
+
+    vi.advanceTimersByTime(5000)
+
+    const result: RecordingResult = session.stop()
+
+    expect(result.events).toHaveLength(1)
+    expect(result.events[0]).toEqual({ type: 2, data: 'snapshot' })
+    expect(result.duration).toBe(5)
+    expect(mockStopFn).toHaveBeenCalledOnce()
+  })
+
+  it('getDuration() returns elapsed time in seconds', async () => {
+    session = new RecordSession(shadow)
+    await session.start()
+
+    expect(session.getDuration()).toBe(0)
+
+    vi.advanceTimersByTime(3000)
+    expect(session.getDuration()).toBe(3)
+
+    vi.advanceTimersByTime(7000)
+    expect(session.getDuration()).toBe(10)
+  })
+
+  it('getDuration() returns 0 before start', () => {
+    session = new RecordSession(shadow)
+    expect(session.getDuration()).toBe(0)
+  })
+
+  it('auto-fires onMaxReached at MAX_DURATION (60s)', async () => {
+    const onMaxReached = vi.fn()
+    session = new RecordSession(shadow, onMaxReached)
+    await session.start()
+
+    vi.advanceTimersByTime(59_999)
+    expect(onMaxReached).not.toHaveBeenCalled()
+
+    vi.advanceTimersByTime(1)
+    expect(onMaxReached).toHaveBeenCalledOnce()
+  })
+
+  it('stop() clears the max-duration timer', async () => {
+    const onMaxReached = vi.fn()
+    session = new RecordSession(shadow, onMaxReached)
+    await session.start()
+
+    session.stop()
+    vi.advanceTimersByTime(120_000)
+
+    expect(onMaxReached).not.toHaveBeenCalled()
+  })
+
+  it('click events create ripple elements and add custom rrweb events', async () => {
+    session = new RecordSession(shadow)
+    await session.start()
+
+    const clickEvent = new MouseEvent('click', {
+      clientX: 100,
+      clientY: 200,
+      bubbles: true,
+    })
+    document.dispatchEvent(clickEvent)
+
+    expect(mockAddCustomEvent).toHaveBeenCalledWith('mtb-click', {
+      x: 100,
+      y: 200,
+      target: expect.any(String),
+    })
+  })
+
+  it('stop() removes click handler', async () => {
+    session = new RecordSession(shadow)
+    await session.start()
+
+    session.stop()
+    vi.clearAllMocks()
+
+    document.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(mockAddCustomEvent).not.toHaveBeenCalled()
+  })
+
+  it('destroy() clears all state', async () => {
+    session = new RecordSession(shadow)
+    await session.start()
+
+    session.destroy()
+
+    expect(mockStopFn).toHaveBeenCalled()
+    expect(session.getDuration()).toBe(0)
+  })
+})