feat: enhance CSS and components for Telegram Mini App performance

- Updated CSS to utilize viewport variables for safe area insets and stable height, improving layout consistency across devices.
- Introduced haptic feedback triggers in various components to enhance user interaction, mimicking native Telegram behavior.
- Added functionality to detect Android performance class, minimizing animations on low-performance devices for better user experience.
- Refactored components to incorporate new CSS classes for content safety and improved responsiveness.

webapp-next/src/lib/telegram-android-perf.ts

@@ -0,0 +1,26 @@
+/**
+ * Detects Android Telegram Mini App performance class from User-Agent and sets
+ * data-perf on document.documentElement so CSS can reduce animations on low-end devices.
+ * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent
+ */
+
+import { retrieveAndroidDeviceData } from "@telegram-apps/sdk-react";
+
+const DATA_ATTR = "data-perf";
+
+/**
+ * Runs once: if running in Telegram on Android with LOW performance class,
+ * sets data-perf="low" on the document root for CSS to minimize animations.
+ */
+export function applyAndroidPerformanceClass(): void {
+  if (typeof document === "undefined") return;
+  try {
+    const data = retrieveAndroidDeviceData();
+    const perf = data?.performanceClass;
+    if (perf === "LOW") {
+      document.documentElement.setAttribute(DATA_ATTR, "low");
+    }
+  } catch {
+    // Not in Telegram or not Android; ignore.
+  }
+}

webapp-next/src/lib/telegram-haptic.ts

@@ -0,0 +1,19 @@
+/**
+ * Triggers Telegram Mini App haptic feedback when available.
+ * Use on primary actions and key interactions to mimic native Telegram behavior.
+ */
+
+import { hapticFeedbackImpactOccurred } from "@telegram-apps/sdk-react";
+
+/**
+ * Triggers light impact haptic feedback. No-op when not in Telegram or unsupported.
+ */
+export function triggerHapticLight(): void {
+  try {
+    if (hapticFeedbackImpactOccurred.isAvailable()) {
+      hapticFeedbackImpactOccurred("light");
+    }
+  } catch {
+    // SDK not available; ignore.
+  }
+}

webapp-next/src/lib/telegram-ready.ts

@@ -1,15 +1,17 @@
 /**
- * Single-call wrapper for Telegram Mini App ready().
+ * Single-call wrapper for Telegram Mini App ready() and expand().
  * Called once when the first visible screen has finished loading so Telegram
  * hides its native loading animation only after our content is ready.
+ * Also expands the Mini App to full height when supported.
  */
 
-import { miniAppReady } from "@telegram-apps/sdk-react";
+import { miniAppReady, expandViewport } from "@telegram-apps/sdk-react";
 
 let readyCalled = false;
 
 /**
- * Calls Telegram miniAppReady() at most once per session.
+ * Calls Telegram miniAppReady() at most once per session, then expandViewport()
+ * when available so the app opens to full height.
  * Safe when SDK is unavailable (e.g. non-Telegram environment).
  */
 export function callMiniAppReadyOnce(): void {
@@ -19,6 +21,9 @@ export function callMiniAppReadyOnce(): void {
       miniAppReady();
       readyCalled = true;
     }
+    if (expandViewport.isAvailable()) {
+      expandViewport();
+    }
   } catch {
     // SDK not available or not in Mini App context; no-op.
   }