nuxt-telegram-mini-app 0.0.1

package/app/app.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="min-h-screen tg-bg">
+    <NuxtRouteAnnouncer />
+    <ErrorBoundary
+      fallback-message="The main application encountered an error. This might be related to Telegram integration."
+      :show-details="isDev"
+    >
+      <NuxtPage />
+    </ErrorBoundary>
+
+    <TgNav :safe-area="true" :items="navItems" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TgNavItem } from '~/components/tg/Nav.vue'
+
+// Check if we're in development mode for showing error details
+const isDev = computed(() => {
+  return import.meta.dev || (typeof window !== 'undefined' && window.location.hostname === 'localhost')
+})
+
+// Navigation items for the bottom nav
+const navItems = computed<TgNavItem[]>(() => [
+  {
+    key: 'home',
+    label: 'Home',
+    icon: 'i-heroicons-home-20-solid',
+    to: '/'
+  },
+  {
+    key: 'functions',
+    label: 'Functions',
+    icon: 'i-heroicons-cog-6-tooth-20-solid',
+    to: '/functions'
+  },
+  {
+    key: 'components',
+    label: 'Components',
+    icon: 'i-heroicons-squares-2x2-20-solid',
+    to: '/components'
+  },
+  {
+    key: 'utilities',
+    label: 'Utilities',
+    icon: 'i-heroicons-wrench-screwdriver-20-solid',
+    to: '/utilities'
+  }
+])
+
+// Global error handler for unhandled promise rejections
+if (typeof window !== 'undefined') {
+  window.addEventListener('unhandledrejection', (event) => {
+    console.error('[Global] Unhandled promise rejection:', event.reason)
+    
+    // Check if it's a Telegram-related error
+    const reason = String(event.reason?.message || event.reason || '')
+    if (reason.includes('tgWebApp') || reason.includes('Telegram') || reason.includes('hash')) {
+      console.warn('[Global] Telegram-related error detected, attempting recovery')
+      
+      // Try to clear problematic hash and reload
+      try {
+        if (sessionStorage.getItem('__tg_hash_fixed')) {
+          sessionStorage.removeItem('__tg_hash_fixed')
+          setTimeout(() => {
+            window.location.reload()
+          }, 1000)
+        }
+      } catch (e) {
+        console.error('[Global] Recovery attempt failed:', e)
+      }
+    }
+  })
+
+  // Global error handler for JavaScript errors
+  window.addEventListener('error', (event) => {
+    console.error('[Global] JavaScript error:', event.error)
+    
+    // Check if it's a Telegram-related error
+    const message = String(event.error?.message || event.message || '')
+    if (message.includes('tgWebApp') || message.includes('Telegram') || message.includes('hash')) {
+      console.warn('[Global] Telegram-related JavaScript error detected')
+    }
+  })
+}
+</script>

package/app/assets/css/main.css

@@ -0,0 +1,53 @@
+:root {
+  --tg-color-scheme: dark;
+  --tg-theme-bg-color: #212121;
+  --tg-theme-button-color: #0F8AFF;
+  --tg-theme-button-text-color: #ffffff;
+  --tg-theme-hint-color: #5D5F62;
+  --tg-theme-link-color: #0F8AFF;
+  --tg-theme-secondary-bg-color: #181818;
+  --tg-theme-text-color: #ffffff;
+
+  --tg-theme-section-bg-color: var(--tg-theme-bg-color);
+  --tg-theme-section-separator-color: var(--tg-theme-secondary-bg-color);
+  --tg-theme-button-color-light: #4fb3ff;
+  --tg-theme-header-bg-color: #FFFFFF;
+  --tg-theme-accent-text-color: #536A89;
+  --tg-theme-section-header-text-color: var(--tg-theme-hint-color);
+  --tg-theme-subtitle-text-color: #999999;
+  --tg-theme-destructive-text-color: #D14E4E;
+  --tg-viewport-height: 100vh;
+  --tg-viewport-stable-height: 100vh;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  --safe-area-inset-bottom: calc(100vh - var(--tg-viewport-stable-height, 100vh));
+}
+
+body {
+  color: var(--tg-theme-text-color);
+  background-color: var(--tg-theme-secondary-bg-color);
+  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding-top: 1rem;
+}
+
+/* Reduce accidental zoom/pinch interactions on mobile */
+html, body {
+  touch-action: manipulation;
+  -ms-touch-action: manipulation;
+  overscroll-behavior: contain;
+}
+
+.tg-bg { background-color: var(--tg-theme-secondary-bg-color); }
+.tg-secondary-bg { background-color: var(--tg-theme-secondary-bg-color); }
+.tg-section-bg { background-color: var(--tg-theme-section-bg-color); }
+.tg-link, a { color: var(--tg-theme-link-color); }
+.tg-primary, .tg-button { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); }
+.tg-button-danger { background-color: var(--tg-theme-destructive-text-color); color: var(--tg-theme-button-text-color); }
+.tg-hint { color: var(--tg-theme-hint-color); }
+.tg-accent { color: var(--tg-theme-accent-text-color); }
+.tg-danger { color: var(--tg-theme-destructive-text-color); }
+.text-tg { color: var(--tg-theme-text-color); }
+.tg-button-text { color: var(--tg-theme-button-text-color); }

package/app/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/app/components/ErrorBoundary.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="hasError" class="error-boundary p-4 bg-red-50 border border-red-200 rounded-lg">
+    <div class="flex items-start space-x-3">
+      <div class="flex-shrink-0">
+        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+        </svg>
+      </div>
+      <div class="flex-1">
+        <h3 class="text-sm font-medium text-red-800">
+          Component Error
+        </h3>
+        <div class="mt-2 text-sm text-red-700">
+          <p>{{ fallbackMessage || 'Something went wrong with this component.' }}</p>
+        </div>
+        <div class="mt-3">
+          <button
+            @click="retry"
+            class="bg-red-100 hover:bg-red-200 text-red-800 px-3 py-1 rounded text-sm font-medium transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+        <details v-if="showDetails" class="mt-3">
+          <summary class="cursor-pointer text-sm text-red-600 hover:text-red-800">
+            Technical Details
+          </summary>
+          <pre class="mt-2 text-xs bg-red-100 p-2 rounded overflow-auto">{{ errorDetails }}</pre>
+        </details>
+      </div>
+    </div>
+  </div>
+  <slot v-else />
+</template>
+
+<script setup lang="ts">
+import { ref, onErrorCaptured, nextTick } from 'vue'
+
+interface Props {
+  fallbackMessage?: string
+  showDetails?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fallbackMessage: '',
+  showDetails: false
+})
+
+const hasError = ref(false)
+const errorDetails = ref('')
+const retryKey = ref(0)
+
+onErrorCaptured((error, instance, info) => {
+  console.error('[ErrorBoundary] Caught error:', error)
+  console.error('[ErrorBoundary] Component info:', info)
+  
+  hasError.value = true
+  errorDetails.value = `Error: ${error.message}\nInfo: ${info}\nStack: ${error.stack}`
+  
+  // Prevent the error from propagating further
+  return false
+})
+
+const retry = async () => {
+  hasError.value = false
+  errorDetails.value = ''
+  retryKey.value++
+  
+  // Wait for next tick to ensure component re-renders
+  await nextTick()
+}
+
+// Provide retry key to force re-render of child components
+provide('errorBoundaryRetryKey', retryKey)
+</script>
+
+<style scoped>
+.error-boundary {
+  margin: 1rem 0;
+}
+</style>

package/app/components/Hero.vue

@@ -0,0 +1,61 @@
+<template>
+  <section class="w-full">
+    <div :class="containerClass">
+      <div v-if="hasImage" class="flex justify-center">
+        <img
+          :src="imageSrc!"
+          :alt="altText"
+          class="h-28 w-28 rounded-full object-cover ring-1 ring-sectionSeparator"
+          decoding="async"
+          :loading="loadingAttr"
+        />
+      </div>
+
+      <div :class="textWrapClass">
+        <h1 class="text-2xl font-semibold text-text">{{ title }}</h1>
+        <p v-if="subtitle" class="text-sm text-hint">{{ subtitle }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+type Align = 'left' | 'center' | 'right'
+
+const props = withDefaults(defineProps<{
+  title: string
+  subtitle?: string
+  imageSrc?: string
+  alt?: string
+  alignment?: Align // only used when image is hidden
+  eagerImage?: boolean
+}>(), {
+  alignment: 'center',
+  eagerImage: false,
+})
+
+const hasImage = computed(() => !!props.imageSrc)
+const altText = computed(() => props.alt ?? props.title)
+const loadingAttr = computed(() => (props.eagerImage ? 'eager' : 'lazy'))
+
+const containerClass = computed(() => {
+  if (hasImage.value) return 'flex flex-col items-center text-center gap-3 pt-6 pb-2'
+  return 'flex flex-col gap-1 pt-2 pb-2'
+})
+
+const textWrapClass = computed(() => {
+  if (hasImage.value) return 'text-center space-y-1'
+  switch (props.alignment) {
+    case 'left':
+      return 'text-left'
+    case 'right':
+      return 'text-right'
+    default:
+      return 'text-center'
+  }
+})
+</script>
+
+<style scoped>
+</style>

package/app/components/tg/Button.vue

@@ -0,0 +1,128 @@
+<template>
+  <component :is="tag" v-bind="bind" :class="classes" :disabled="disabled || loading" @click="onClick">
+    <Icon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="h-5 w-5 animate-spin" />
+    <Icon v-if="icon && iconPosition === 'left' && !loading" :name="icon" class="h-5 w-5" />
+    <span>{{ title }}</span>
+    <Icon v-if="icon && iconPosition === 'right' && !loading" :name="icon" class="h-5 w-5" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { shareURL } from '~/composables/telegram'
+import { useHapticFeedback } from '~/composables/telegram'
+
+const props = withDefaults(defineProps<{
+  title: string
+  /**
+   * Visual style of the button
+   * - 'primary' (default)
+   * - 'secondary' (subtle background)
+   * - 'outline' (bordered)
+   * - 'danger' | 'destructive' (red)
+   */
+  status?: 'primary' | 'secondary' | 'outline' | 'danger' | 'destructive'
+  icon?: string
+  /** Where to render the icon */
+  iconPosition?: 'left' | 'right'
+  to?: string
+  href?: string
+  /** When set, clicking triggers share; falls back to link if provided. */
+  shareUrl?: string
+  /** Full-width button */
+  block?: boolean
+  /** Deprecated in favor of `size`, kept for back-compat */
+  small?: boolean
+  /** Control size */
+  size?: 'sm' | 'md' | 'lg'
+  /** Loading state disables interactions */
+  loading?: boolean
+  /** Elevation shadow */
+  elevated?: boolean
+  /** Uppercase label */
+  uppercase?: boolean
+  disabled?: boolean
+  class?: string
+  /**
+   * Optional haptic feedback on click.
+   * - 'selection' (default when true)
+   * - 'impact-light' | 'impact-medium' | 'impact-heavy'
+   * - 'notification-success' | 'notification-warning' | 'notification-error'
+   */
+  haptic?: boolean | 'selection' | 'impact-light' | 'impact-medium' | 'impact-heavy' | 'notification-success' | 'notification-warning' | 'notification-error'
+}>(), {
+  status: 'primary',
+  iconPosition: 'left',
+  block: true,
+  small: false,
+  size: undefined,
+  loading: false,
+  elevated: false,
+  uppercase: false,
+  disabled: false,
+  class: '',
+  haptic: false,
+})
+
+const tag = computed(() => props.to ? 'NuxtLink' : (props.href ? 'a' : 'button'))
+const bind = computed(() => ({ to: props.to, href: props.href, type: 'button' }))
+
+const sizeClass = computed(() => {
+  const size = props.size || (props.small ? 'sm' : 'md')
+  if (size === 'sm') return 'text-sm h-9 px-3'
+  if (size === 'lg') return 'h-12 px-5 text-base'
+  return 'h-11 px-4'
+})
+
+const variantClass = computed(() => {
+  const v = props.status
+  if (v === 'outline') return 'border border-sectionSeparator text-text bg-secondaryBg'
+  if (v === 'secondary') return 'bg-secondaryBg text-text'
+  if (v === 'danger' || v === 'destructive') return 'bg-[var(--tg-theme-destructive-text-color)] text-primaryFg'
+  return 'bg-primary text-primaryFg'
+})
+
+const classes = computed(() => [
+  'inline-flex items-center justify-center gap-2 font-medium rounded-md',
+  sizeClass.value,
+  props.block ? 'w-full' : 'w-auto',
+  variantClass.value,
+  (props.disabled || props.loading) ? 'opacity-50 pointer-events-none' : 'hover:opacity-90',
+  props.elevated ? 'shadow-sm' : '',
+  props.uppercase ? 'uppercase' : '',
+  // visual feedback
+  'transition-transform transition-opacity duration-150 active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
+  props.class,
+].filter(Boolean).join(' '))
+
+const haptic = useHapticFeedback()
+
+function triggerHaptic() {
+  if (!props.haptic) return
+  const kind = props.haptic === true ? 'selection' : props.haptic
+  try {
+    if (kind === 'selection') haptic.selectionChanged()
+    else if (kind.startsWith('impact-')) {
+      const style = kind.split('-')[1] as 'light' | 'medium' | 'heavy'
+      haptic.impactOccurred(style)
+    }
+    else if (kind.startsWith('notification-')) {
+      const n = kind.split('-')[1] as 'success' | 'warning' | 'error'
+      haptic.notificationOccurred(n)
+    }
+  } catch {}
+}
+
+function onClick(e: Event) {
+  if (props.disabled || props.loading) return
+  // Haptic first for immediate feedback
+  triggerHaptic()
+  if (props.shareUrl) {
+    e.preventDefault()
+    shareURL(props.shareUrl)
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/app/components/tg/Cell.vue

@@ -0,0 +1,91 @@
+<template>
+  <component :is="wrapperTag" v-bind="wrapperBind" :class="rootClass">
+    <div v-if="icon" class="shrink-0 h-6 w-6 flex items-center justify-center">
+      <Icon :name="icon" class="h-5 w-5" :style="iconStyle" />
+    </div>
+    <div class="min-w-0 min-h-6 flex-1">
+      <div class="text-sm font-medium" :style="titleStyle">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div v-if="subtitle || $slots.subtitle" class="text-xs text-hint">
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </div>
+      <div v-if="description || $slots.description" class="text-xs text-hint" :style="descStyle">
+        <slot name="description">{{ description }}</slot>
+      </div>
+    </div>
+    <Icon v-if="showChevron" name="i-heroicons-chevron-right-20-solid" class="h-5 w-5 text-hint" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  description?: string
+  subtitle?: string
+  icon?: string
+  /** E.g. '#3ea6ff' or 'var(--tg-theme-link-color)' */
+  color?: string
+  iconColor?: string
+  /** Line clamp for description/title (0 = none) */
+  lineClamp?: number
+  /** Show divider under the cell */
+  border?: boolean
+  /** Route location; renders a NuxtLink when set */
+  to?: string
+  /** External link; renders an anchor when set */
+  href?: string
+  /** Background tone */
+  tone?: 'default' | 'secondary'
+  /** Force interactive hover state even without link */
+  clickable?: boolean
+  /** Show chevron; defaults to auto when link */
+  chevron?: boolean
+  class?: string
+}>(), {
+  title: '',
+  description: undefined,
+  subtitle: undefined,
+  icon: undefined,
+  color: undefined,
+  iconColor: undefined,
+  lineClamp: 0,
+  border: true,
+  to: undefined,
+  href: undefined,
+  tone: 'default',
+  clickable: false,
+  chevron: undefined,
+  class: '',
+})
+
+const isLink = computed(() => !!(props.to || props.href))
+
+const wrapperTag = computed(() => props.to ? 'NuxtLink' : (props.href ? 'a' : 'div'))
+const wrapperBind = computed(() => ({ to: props.to, href: props.href }))
+
+const clampStyle = computed(() => props.lineClamp > 0
+  ? { display: '-webkit-box', WebkitLineClamp: String(props.lineClamp), WebkitBoxOrient: 'vertical', overflow: 'hidden' }
+  : {})
+
+const titleStyle = computed(() => ({ ...(props.color ? { color: props.color } : {}), ...clampStyle.value }))
+const descStyle = computed(() => clampStyle.value)
+const iconStyle = computed(() => props.iconColor ? { color: props.iconColor } : {})
+
+const bgClass = computed(() => props.tone === 'secondary' ? 'bg-secondaryBg' : 'bg-bg')
+
+const showChevron = computed(() => props.chevron ?? isLink.value)
+
+const rootClass = computed(() => [
+  'w-full flex items-center gap-3 px-4 py-3',
+  bgClass.value,
+  props.border ? 'border-b border-sectionSeparator last:border-b-0' : '',
+  (isLink.value || props.clickable) ? 'hover:bg-secondaryBg transition-colors' : '',
+  props.class,
+].filter(Boolean).join(' '))
+</script>
+
+<style scoped>
+</style>

package/app/components/tg/Content.vue

@@ -0,0 +1,42 @@
+<template>
+  <component :is="asTag" :class="rootClasses">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+
+const props = withDefaults(defineProps<{
+  as?: string
+  /** Tailwind max-width class, e.g. 'max-w-2xl' (optional override) */
+  maxWidthClass?: string
+  /** Extra classes to merge */
+  class?: string
+}>(), {
+  as: 'main',
+  maxWidthClass: undefined,
+  class: '',
+})
+
+const asTag = computed(() => props.as)
+
+const maxWidthClass = computed(() => props.maxWidthClass || 'max-w-2xl')
+
+const hasNav = ref(false)
+onMounted(() => {
+  try {
+    hasNav.value = !!document.querySelector('[data-tg-nav]')
+  } catch {}
+})
+
+const rootClasses = computed(() => [
+  'mx-auto text-text space-y-6',
+  maxWidthClass.value,
+  hasNav.value ? 'pb-[calc(56px+var(--safe-area-inset-bottom))]' : '',
+  props.class,
+].filter(Boolean).join(' '))
+</script>
+
+<style scoped>
+</style>

package/app/components/tg/Nav.vue

@@ -0,0 +1,107 @@
+<template>
+  <nav
+    class="fixed bottom-0 inset-x-0"
+    data-tg-nav
+    :class="[rootClass]"
+    role="tablist"
+  >
+    <ul class="mx-auto p-2 grid max-w-2xl" :style="gridStyle">
+      <li v-for="item in items" :key="item.key">
+        <NuxtLink
+          v-if="item.to"
+          :to="item.to"
+          :class="[itemClass, { 'text-text': currentActiveKey === item.key }]"
+          :aria-current="currentActiveKey === item.key ? 'page' : undefined"
+        >
+          <Icon v-if="item.icon" :name="item.icon" class="h-5 w-5" :class="currentActiveKey === item.key ? 'text-text' : ''" />
+          <span :class="currentActiveKey === item.key ? 'text-text' : ''">{{ item.label }}</span>
+        </NuxtLink>
+        <button
+          v-else
+          type="button"
+          :class="[itemClass, { 'text-text': currentActiveKey === item.key }]"
+          :aria-current="currentActiveKey === item.key ? 'page' : undefined"
+          @click="onSelect(item)"
+        >
+          <Icon v-if="item.icon" :name="item.icon" class="h-5 w-5" :class="currentActiveKey === item.key ? 'text-text' : ''" />
+          <span :class="currentActiveKey === item.key ? 'text-text' : ''">{{ item.label }}</span>
+        </button>
+      </li>
+    </ul>
+    <div v-if="safeArea" class="pb-[var(--safe-area-inset-bottom)]" />
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export interface TgNavItem {
+  key: string
+  label: string
+  icon?: string
+  to?: string
+}
+
+const props = withDefaults(defineProps<{
+  items: TgNavItem[]
+  modelValue?: string
+  /** Optional class for the root nav element */
+  rootClass?: string
+  /** Background tone */
+  tone?: 'default' | 'secondary'
+  /** Show top border */
+  border?: boolean
+  /** Height of each item */
+  height?: '12' | '14'
+  /** Respect bottom safe area */
+  safeArea?: boolean
+}>(), {
+  items: () => [],
+  modelValue: undefined,
+  rootClass: '',
+  tone: 'default',
+  border: true,
+  height: '14',
+  safeArea: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'select', item: TgNavItem): void
+}>()
+
+const route = useRoute()
+
+// Determine active key based on current route
+const currentActiveKey = computed(() => {
+  // First try to match by route path
+  const matchedItem = props.items.find(item => item.to === route.path)
+  if (matchedItem) {
+    return matchedItem.key
+  }
+  
+  // Fallback to modelValue prop
+  return props.modelValue || ''
+})
+
+const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${Math.min(props.items.length || 1, 4)}, minmax(0, 1fr))` }))
+
+const itemClass = computed(() => [
+  `h-${props.height} w-full flex flex-col items-center justify-center gap-1 text-xs text-hint hover:text-text transition-colors`
+].join(' '))
+
+const rootClass = computed(() => [
+  props.border ? 'border-t border-sectionSeparator' : '',
+  props.tone === 'secondary' ? 'bg-secondaryBg' : 'bg-bg',
+  'backdrop-blur supports-[backdrop-filter]:bg-bg50',
+].filter(Boolean).join(' '))
+
+function onSelect(item: TgNavItem) {
+  emit('update:modelValue', item.key)
+  emit('select', item)
+}
+</script>
+
+<style scoped>
+</style>