Fix Telegram viewport and SVG avatars

lib/auth/telegram_session_stub.dart

@@ -10,6 +10,8 @@ void saveMapflowSessionToken(String token) {}
 
 void clearMapflowSession() {}
 
+void configureTelegramWebApp() {}
+
 void openExternalUrl(String url) {}
 
 void reloadApp() {}

lib/auth/telegram_session_web.dart

@@ -5,13 +5,28 @@ import 'package:web/web.dart' as web;
 const telegramLoginStorageKey = 'mapflow.telegramLoginData';
 const mapflowSessionStorageKey = 'mapflow.sessionToken';
 
-@JS('window.Telegram.WebApp.initData')
-external JSString? get _telegramInitData;
+@JS('Telegram')
+external _Telegram? get _telegram;
+
+extension type _Telegram(JSObject _) implements JSObject {
+  @JS('WebApp')
+  external _TelegramWebApp? get webApp;
+}
+
+extension type _TelegramWebApp(JSObject _) implements JSObject {
+  external JSString? get initData;
+  external void ready();
+  external void expand();
+  external bool isVersionAtLeast(String version);
+  external void disableVerticalSwipes();
+}
 
 @JS('JSON.stringify')
 external JSString _jsonStringify(JSAny? value);
 
-String telegramInitData() => _telegramInitData?.toDart ?? '';
+_TelegramWebApp? get _webApp => _telegram?.webApp;
+
+String telegramInitData() => _webApp?.initData?.toDart ?? '';
 
 String telegramLoginData() =>
     web.window.localStorage.getItem(telegramLoginStorageKey) ?? '';
@@ -38,6 +53,19 @@ void clearMapflowSession() {
   web.window.localStorage.removeItem(telegramLoginStorageKey);
 }
 
+void configureTelegramWebApp() {
+  final webApp = _webApp;
+  if (webApp == null) {
+    return;
+  }
+
+  webApp.ready();
+  webApp.expand();
+  if (webApp.isVersionAtLeast('7.7')) {
+    webApp.disableVerticalSwipes();
+  }
+}
+
 void openExternalUrl(String url) {
   web.window.location.assign(url);
 }

lib/main.dart

@@ -3,10 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
+import 'auth/telegram_session.dart' as telegram_session;
 import 'screens/mapflow_shell.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
+  telegram_session.configureTelegramWebApp();
   runApp(const ProviderScope(child: MapflowApp()));
 }
 

lib/screens/mapflow_shell.dart

@@ -4,6 +4,7 @@ import 'dart:math' as math;
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:latlong2/latlong.dart' hide Path;
 import 'package:waveform_flutter/waveform_flutter.dart' show Amplitude;
 import 'package:waveform_recorder/waveform_recorder.dart';
@@ -231,11 +232,7 @@ class _UserAvatar extends StatelessWidget {
             dimension: 44,
             child: imageUrl == null
                 ? _AvatarFallback(text: fallback)
-                : Image.network(
-                    imageUrl,
-                    fit: BoxFit.cover,
-                    errorBuilder: (_, _, _) => _AvatarFallback(text: fallback),
-                  ),
+                : _AvatarImage(url: imageUrl, fallback: fallback),
           ),
         ),
       ),
@@ -264,6 +261,31 @@ class _UserAvatar extends StatelessWidget {
 
 enum _AvatarAction { logout }
 
+class _AvatarImage extends StatelessWidget {
+  const _AvatarImage({required this.url, required this.fallback});
+
+  final String url;
+  final String fallback;
+
+  @override
+  Widget build(BuildContext context) {
+    if (url.endsWith('.svg') || url.contains('.svg?')) {
+      return SvgPicture.network(
+        url,
+        fit: BoxFit.cover,
+        placeholderBuilder: (_) => _AvatarFallback(text: fallback),
+        errorBuilder: (_, _, _) => _AvatarFallback(text: fallback),
+      );
+    }
+
+    return Image.network(
+      url,
+      fit: BoxFit.cover,
+      errorBuilder: (_, _, _) => _AvatarFallback(text: fallback),
+    );
+  }
+}
+
 class _AvatarFallback extends StatelessWidget {
   const _AvatarFallback({required this.text});
 
@@ -1004,12 +1026,6 @@ class _NearbyPlaceCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final primaryType = _formatType(place.googlePrimaryType);
-    final visibleTypes = place.googleTypes
-        .where((type) => type != place.googlePrimaryType)
-        .map(_formatType)
-        .nonNulls
-        .take(4)
-        .toList();
 
     return Material(
       color: const Color(0xFF15111D),
@@ -1041,17 +1057,12 @@ class _NearbyPlaceCard extends StatelessWidget {
                   ),
                 ],
               ),
-              if (primaryType != null || visibleTypes.isNotEmpty) ...[
+              if (primaryType != null) ...[
                 const SizedBox(height: 12),
                 Wrap(
                   spacing: 6,
                   runSpacing: 6,
-                  children: [
-                    if (primaryType != null)
-                      _PlaceTypeChip(label: primaryType, primary: true),
-                    for (final type in visibleTypes)
-                      _PlaceTypeChip(label: type, primary: false),
-                  ],
+                  children: [_PlaceTypeChip(label: primaryType, primary: true)],
                 ),
               ],
             ],