hermes-kanban-miniapp/frontend/src/telegram.ts

// Telegram WebApp integration
// Uses window.Telegram.WebApp directly for maximum compatibility
// @telegram-apps/sdk-react provides typed wrappers but we keep a thin layer here

export function initTelegram(): void {
  const tg = window.Telegram?.WebApp
  if (tg) {
    tg.ready()
    tg.expand()
  }
}

export function getInitData(): string {
  return window.Telegram?.WebApp?.initData || ''
}

export function getColorScheme(): 'light' | 'dark' {
  return window.Telegram?.WebApp?.colorScheme || 'dark'
}

export function getThemeParams(): Record<string, string> {
  return window.Telegram?.WebApp?.themeParams || {}
}

export function hapticFeedback(type: 'light' | 'medium' | 'heavy' = 'medium'): void {
  window.Telegram?.WebApp?.HapticFeedback?.impactOccurred(type)
}

export function showMainButton(text: string, onClick: () => void): void {
  const btn = window.Telegram?.WebApp?.MainButton
  if (btn) {
    btn.setText(text)
    btn.show()
    btn.onClick(onClick)
  }
}

export function hideMainButton(): void {
  window.Telegram?.WebApp?.MainButton?.hide()
}

export function showBackButton(onClick: () => void): void {
  const btn = window.Telegram?.WebApp?.BackButton
  if (btn) {
    btn.show()
    btn.onClick(onClick)
  }
}

export function hideBackButton(): void {
  window.Telegram?.WebApp?.BackButton?.hide()
}

export function closeMiniApp(): void {
  window.Telegram?.WebApp?.close()
}

// Apply Telegram theme CSS variables
export function applyTheme(): void {
  const params = getThemeParams()
  const root = document.documentElement
  Object.entries(params).forEach(([key, value]) => {
    if (typeof value === 'string') {
      root.style.setProperty(`--tg-${key.replaceAll('_', '-')}`, value)
    }
  })
  const scheme = getColorScheme()
  root.dataset.theme = scheme
}

// Augment Window for TypeScript
declare global {
  interface Window {
    Telegram?: {
      WebApp?: {
        ready: () => void
        expand: () => void
        close: () => void
        initData: string
        colorScheme: 'light' | 'dark'
        themeParams: Record<string, string>
        HapticFeedback?: {
          impactOccurred: (type: 'light' | 'medium' | 'heavy') => void
          notificationOccurred: (type: 'error' | 'success' | 'warning') => void
          selectionChanged: () => void
        }
        MainButton?: {
          setText: (text: string) => void
          show: () => void
          hide: () => void
          onClick: (cb: () => void) => void
          offClick: (cb: () => void) => void
        }
        BackButton?: {
          show: () => void
          hide: () => void
          onClick: (cb: () => void) => void
          offClick: (cb: () => void) => void
        }
      }
    }
  }
}