Files
zapstore/lib/screens/app_detail_screen.dart
T
2026-03-31 15:19:23 -03:00

819 lines
26 KiB
Dart

import 'dart:convert';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:models/models.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:share_plus/share_plus.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:zapstore/services/bookmarks_service.dart';
import 'package:zapstore/services/notification_service.dart';
import 'package:zapstore/utils/debug_utils.dart';
import 'package:zapstore/utils/extensions.dart';
import 'package:zapstore/services/package_manager/package_manager.dart';
import 'package:zapstore/widgets/app_detail_widgets.dart';
import 'package:zapstore/widgets/app_header.dart';
import 'package:zapstore/widgets/app_info_table.dart';
import 'package:zapstore/widgets/author_container.dart';
import 'package:zapstore/widgets/comments_section.dart';
import 'package:zapstore/widgets/download_text_container.dart';
import 'package:zapstore/widgets/expandable_markdown.dart';
import 'package:zapstore/widgets/install_button.dart';
import 'package:zapstore/widgets/screenshots_gallery.dart';
class AppDetailScreen extends HookConsumerWidget {
const AppDetailScreen({super.key, required this.appId, this.authorPubkey});
final String appId;
final String? authorPubkey;
@override
Widget build(BuildContext context, WidgetRef ref) {
final platform = ref.read(packageManagerProvider.notifier).platform;
// Query app with relationships including author profile
final appState = ref.watch(
query<App>(
authors: authorPubkey != null ? {authorPubkey!} : null,
tags: {
'#d': {appId},
'#f': {platform},
},
limit: 1,
and: (a) => {
a.latestRelease.query(
and: (release) => {
release.latestMetadata.query(),
release.latestAsset.query(),
},
),
},
source: const LocalAndRemoteSource(relays: 'AppCatalog', stream: false),
subscriptionPrefix: 'app-detail-$appId',
),
);
// Listen for query completion with no results - app removed from relay
ref.listen(
query<App>(
authors: authorPubkey != null ? {authorPubkey!} : null,
tags: {
'#d': {appId},
'#f': {platform},
},
limit: 1,
and: (a) => {
a.latestRelease.query(
and: (release) => {
release.latestMetadata.query(),
release.latestAsset.query(),
},
),
},
source: const LocalAndRemoteSource(relays: 'AppCatalog', stream: false),
subscriptionPrefix: 'app-detail-$appId',
),
(previous, next) async {
// When query completes with no models (app not found on relay)
if (next is StorageData<App> && next.models.isEmpty) {
// Remove stale local data for this app
await ref.storage.clear(
RequestFilter<App>(
tags: {
'#d': {appId},
},
).toRequest(),
);
// Navigate back
if (context.mounted) {
context.pop();
}
}
},
);
// Handle loading/error states when app not yet available
final isLoading = appState is StorageLoading;
final app = appState.models.firstOrNull;
if (appState case StorageError(:final exception)) {
return _ErrorScaffold(message: exception.toString());
}
// Show skeleton only if loading with no models yet
if (isLoading && app == null) {
return const Scaffold(
body: SafeArea(
child: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: AppDetailSkeleton(),
),
),
);
}
return _AppDetailContent(
app: app,
appState: appState,
isLoading: isLoading,
);
}
}
class _ErrorScaffold extends StatelessWidget {
final String message;
const _ErrorScaffold({required this.message});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Open App')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.error_outline, size: 64),
const SizedBox(height: 12),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text(message, textAlign: TextAlign.center),
),
],
),
),
);
}
}
/// Internal widget that displays app details
class _AppDetailContent extends HookConsumerWidget {
final App? app;
final StorageState<App> appState;
final bool isLoading;
const _AppDetailContent({
required this.app,
required this.appState,
required this.isLoading,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final app = this.app;
if (app == null) {
return const _ErrorScaffold(message: 'App not found');
}
final signedInPubkey = ref.watch(Signer.activePubkeyProvider);
final isSignedIn = signedInPubkey != null;
final showDebugSections = isDebugMode(signedInPubkey);
// Query author profile from social relays
final authorState = ref.watch(
query<Profile>(
authors: {app.pubkey},
source: const LocalAndRemoteSource(
relays: {'social', 'vertex'},
cachedFor: Duration(hours: 2),
),
subscriptionPrefix: 'app-detail-profile',
),
);
final author = switch (authorState) {
StorageData(:final models) => models.firstOrNull,
_ => null,
};
final latestRelease = app.latestRelease.value;
final latestMetadata = app.installable;
// Check if app is installed for menu options
final installedPackage = ref.watch(
installedPackageProvider(app.identifier),
);
final isInstalled = installedPackage != null;
// Show skeleton while relationships are loading
// Always show loading indicator here - relationships are still pending
if (latestRelease == null || latestMetadata == null) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
const SingleChildScrollView(
padding: EdgeInsets.only(top: 16, bottom: 80),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: AppDetailSkeleton(),
),
),
InstallButton(app: app, release: latestRelease),
_buildFloatingMenu(context, ref, app, isInstalled, isSignedIn),
_buildLoadingIndicator(context),
],
),
),
);
}
return Scaffold(
body: SafeArea(
child: Stack(
children: [
SingleChildScrollView(
padding: const EdgeInsets.only(top: 16, bottom: 80),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// App header
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: AppHeader(app: app),
),
// Published by / Released at section
if (app.isRelaySigned)
Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
bottom: 8,
),
child: DownloadTextContainer(
url: latestMetadata.urls.first,
size: 14,
onTap: app.repository != null
? () => launchUrl(Uri.parse(app.repository!))
: null,
),
)
else
Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
bottom: 8,
),
child: author != null
? AuthorContainer(
profile: author,
beforeText: 'Published by',
oneLine: true,
size: 14,
app: app,
onTap: () {
final segments = GoRouterState.of(
context,
).uri.pathSegments;
final first = segments.isNotEmpty
? segments.first
: 'search';
context.push('/$first/user/${author.pubkey}');
},
)
: const AuthorSkeleton(),
),
// Screenshots gallery
if (app.images.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: ScreenshotsGallery(app: app),
),
// App description
if (app.description.isNotEmpty)
Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
top: 8,
),
child: ExpandableMarkdown(
data: app.description,
styleSheet:
MarkdownStyleSheet.fromTheme(
Theme.of(context),
).copyWith(
p: context.textTheme.bodyLarge?.copyWith(
height: 1.6,
),
blockquoteDecoration: BoxDecoration(
color: const Color(0xFF1E3A5F), // Dark blue
borderRadius: BorderRadius.circular(8),
),
),
),
),
// Social action buttons
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 16),
SocialActionsRow(app: app, author: author),
const SizedBox(height: 16),
],
),
),
// Latest release section
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: Container(
height: 1,
color: Theme.of(
context,
).colorScheme.onSurface.withValues(alpha: 0.2),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
child: Text(
'LATEST RELEASE',
style: context.textTheme.labelLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurface
.withValues(alpha: 0.85),
letterSpacing: 1.5,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
child: Container(
height: 1,
color: Theme.of(
context,
).colorScheme.onSurface.withValues(alpha: 0.2),
),
),
],
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
decoration: BoxDecoration(
color: Theme.of(
context,
).colorScheme.onSurface.withValues(alpha: 0.05),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Version:',
style: context.textTheme.bodyMedium,
),
Gap(4),
Text(
latestMetadata.version,
style: context.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
Gap(4),
Text(
'(${formatDate(latestRelease.createdAt)})',
style: context.textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurface
.withValues(alpha: 0.6),
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: ReleaseNotes(release: latestRelease),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: AppInfoTable(app: app, fileMetadata: latestMetadata),
),
CommentsSection(app: app, fileMetadata: latestMetadata),
// Debug section
if (showDebugSections)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: DebugVersionsSection(app: app),
),
const SizedBox(height: 100),
],
),
),
// Sticky install button
InstallButton(app: app, release: latestRelease),
// Floating three-dot menu
_buildFloatingMenu(context, ref, app, isInstalled, isSignedIn),
// Loading indicator while fetching more data
if (isLoading) _buildLoadingIndicator(context),
],
),
),
);
}
Widget _buildLoadingIndicator(BuildContext context) {
return Positioned(
top: 8,
left: 0,
right: 0,
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0.95),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 14,
height: 14,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Theme.of(context).colorScheme.primary,
),
),
const SizedBox(width: 8),
Text(
'Refreshing...',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(
context,
).colorScheme.onSurface.withValues(alpha: 0.7),
),
),
],
),
),
),
);
}
Widget _buildFloatingMenu(
BuildContext context,
WidgetRef ref,
App app,
bool isInstalled,
bool isSignedIn,
) {
return Positioned(
top: 8,
right: 8,
child: _buildOverflowMenu(context, ref, app, isInstalled, isSignedIn),
);
}
Widget _buildOverflowMenu(
BuildContext context,
WidgetRef ref,
App app,
bool isInstalled,
bool isSignedIn,
) {
// Watch saved apps to check if app is saved
final savedAppsAsync = ref.watch(bookmarksProvider);
final savedAppIds = savedAppsAsync.when(
data: (ids) => ids,
loading: () => <String>{},
error: (_, __) => <String>{},
);
final appAddressableId =
'${app.event.kind}:${app.pubkey}:${app.identifier}';
final isSaved = savedAppIds.contains(appAddressableId);
return Material(
color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.9),
shape: const CircleBorder(),
elevation: 2,
child: PopupMenuButton<String>(
icon: const Icon(Icons.more_vert),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
onSelected: (value) {
switch (value) {
case 'share':
_shareApp(context, app);
break;
case 'copy_link':
_copyLink(context, app);
break;
case 'save_app':
_toggleSaveApp(context, ref, app, isSaved);
break;
case 'view_publisher':
_viewPublisher(context, app);
break;
case 'open_browser':
_openInBrowser(context, app);
break;
case 'open':
_openApp(context, ref, app);
break;
case 'delete':
_uninstallApp(context, ref, app);
break;
}
},
itemBuilder: (context) => [
const PopupMenuItem<String>(
value: 'share',
child: Row(
children: [Icon(Icons.share), SizedBox(width: 12), Text('Share')],
),
),
const PopupMenuItem<String>(
value: 'copy_link',
child: Row(
children: [
Icon(Icons.link),
SizedBox(width: 12),
Text('Copy link'),
],
),
),
if (isSignedIn)
PopupMenuItem<String>(
value: 'save_app',
child: Row(
children: [
Icon(isSaved ? Icons.bookmark : Icons.bookmark_border),
const SizedBox(width: 12),
Text(isSaved ? 'Remove from saved' : 'Save app'),
],
),
),
const PopupMenuItem<String>(
value: 'view_publisher',
child: Row(
children: [
Icon(Icons.person),
SizedBox(width: 12),
Text('View publisher'),
],
),
),
const PopupMenuItem<String>(
value: 'open_browser',
child: Row(
children: [
Icon(Icons.open_in_browser),
SizedBox(width: 12),
Text('Open in browser'),
],
),
),
if (isInstalled) ...[
const PopupMenuItem<String>(
value: 'open',
child: Row(
children: [
Icon(Icons.open_in_new),
SizedBox(width: 12),
Text('Open'),
],
),
),
const PopupMenuItem<String>(
value: 'delete',
child: Row(
children: [
Icon(Icons.delete_outline),
SizedBox(width: 12),
Text('Delete'),
],
),
),
],
],
),
);
}
String _getAppUrl(App app) {
final naddr = Utils.encodeShareableIdentifier(
AddressInput(
identifier: app.identifier,
author: app.pubkey,
kind: app.event.kind,
relays: const [kDefaultRelay],
),
);
return 'https://zapstore.dev/apps/$naddr';
}
void _shareApp(BuildContext context, App app) {
try {
final shareUrl = _getAppUrl(app);
SharePlus.instance.share(ShareParams(text: shareUrl));
} catch (e) {
if (context.mounted) {
context.showError('Failed to share app', technicalDetails: '$e');
}
}
}
void _copyLink(BuildContext context, App app) {
try {
final shareUrl = _getAppUrl(app);
Clipboard.setData(ClipboardData(text: shareUrl));
} catch (e) {
if (context.mounted) {
context.showError('Failed to copy link', technicalDetails: '$e');
}
}
}
Future<void> _toggleSaveApp(
BuildContext context,
WidgetRef ref,
App app,
bool isCurrentlySaved,
) async {
try {
final signer = ref.read(Signer.activeSignerProvider);
final signedInPubkey = ref.read(Signer.activePubkeyProvider);
if (signer == null || signedInPubkey == null) {
if (context.mounted) {
context.showError(
'Sign in required',
description: 'You need to sign in to save apps.',
);
}
return;
}
// Query for existing stack
final existingStackState = await ref.storage.query(
RequestFilter<AppStack>(
authors: {signedInPubkey},
tags: {
'#d': {kAppBookmarksIdentifier},
},
).toRequest(),
source: const LocalSource(),
);
final existingStack = existingStackState.firstOrNull;
// Get existing app IDs by decrypting if stack exists
List<String> existingAppIds = [];
if (existingStack != null) {
try {
final decryptedContent = await signer.nip44Decrypt(
existingStack.content,
signedInPubkey,
);
existingAppIds = (jsonDecode(decryptedContent) as List)
.cast<String>();
} catch (e) {
if (context.mounted) {
context.showError(
'Could not read existing saved apps',
description:
'Your previous saved apps could not be decrypted. Starting fresh.',
technicalDetails: '$e',
);
}
}
}
// Modify the list
final appAddressableId =
'${app.event.kind}:${app.pubkey}:${app.identifier}';
if (isCurrentlySaved) {
existingAppIds.remove(appAddressableId);
} else {
if (!existingAppIds.contains(appAddressableId)) {
existingAppIds.add(appAddressableId);
}
}
// Create new partial stack with updated list
final platform = ref.read(packageManagerProvider.notifier).platform;
final partialStack = PartialAppStack.withEncryptedApps(
name: 'Saved Apps',
identifier: kAppBookmarksIdentifier,
apps: existingAppIds,
platform: platform,
);
// Sign (encrypts the content)
final signedStack = await partialStack.signWith(signer);
// Save to local storage and publish to relays
await ref.storage.save({signedStack});
ref.storage.publish({
signedStack,
}, source: RemoteSource(relays: 'social'));
if (context.mounted) {
context.showInfo(
isCurrentlySaved ? 'App removed from saved' : 'App saved',
);
}
} catch (e) {
if (context.mounted) {
context.showError('Failed to update bookmark', technicalDetails: '$e');
}
}
}
void _viewPublisher(BuildContext context, App app) {
final segments = GoRouterState.of(context).uri.pathSegments;
final first = segments.isNotEmpty ? segments.first : 'search';
context.push('/$first/user/${app.pubkey}');
}
Future<void> _openInBrowser(BuildContext context, App app) async {
try {
final url = _getAppUrl(app);
final uri = Uri.parse(url);
if (await canLaunchUrl(uri)) {
await launchUrl(uri, mode: LaunchMode.externalApplication);
} else {
if (context.mounted) {
context.showError('Could not open browser');
}
}
} catch (e) {
if (context.mounted) {
context.showError('Failed to open browser', technicalDetails: '$e');
}
}
}
Future<void> _openApp(BuildContext context, WidgetRef ref, App app) async {
try {
final packageManager = ref.read(packageManagerProvider.notifier);
await packageManager.launchApp(app.identifier);
} catch (e) {
if (!context.mounted) return;
context.showError(
'Failed to launch ${app.name ?? app.identifier}',
description:
'The app may have been uninstalled or moved. Try reinstalling.',
technicalDetails: '$e',
);
}
}
Future<void> _uninstallApp(
BuildContext context,
WidgetRef ref,
App app,
) async {
try {
final packageManager = ref.read(packageManagerProvider.notifier);
await packageManager.uninstall(app.identifier);
} catch (e) {
if (context.mounted) {
// Don't show error for user cancellation
final message = e.toString();
if (!message.contains('cancelled')) {
context.showError('Uninstall failed', technicalDetails: '$e');
}
}
}
}
}