+2 -2

lib/src/core/l10n/app_localizations.dart

reviewed

··· 667 667 /// Already have an account button text 668 668 /// 669 669 /// In en, this message translates to: 670 670 - /// **'I already have an account'** 670 670 + /// **'I have an Atmosphere Account'** 671 671 String get buttonHaveAccount; 672 672 673 673 /// Open button text ··· 997 997 /// Message to enter handle for OAuth 998 998 /// 999 999 /// In en, this message translates to: 1000 1000 - /// **'Enter your handle to continue with OAuth'** 1000 1000 + /// **'Enter your Atmosphere Account handle to sign in.'** 1001 1001 String get messageEnterHandle; 1002 1002 1003 1003 /// Title for auth recovery page when a saved session could not be verified

+3 -2

lib/src/core/l10n/app_localizations_en.dart

reviewed

··· 306 306 String get buttonGetStarted => 'Get Started'; 307 307 308 308 @override 309 309 - String get buttonHaveAccount => 'I already have an account'; 309 309 + String get buttonHaveAccount => 'I have an Atmosphere Account'; 310 310 311 311 @override 312 312 String get buttonOpen => 'Open'; ··· 485 485 String get pageTitleSignIn => 'Sign In'; 486 486 487 487 @override 488 488 - String get messageEnterHandle => 'Enter your handle to continue with OAuth'; 488 488 + String get messageEnterHandle => 489 489 + 'Enter your Atmosphere Account handle to sign in.'; 489 490 490 491 @override 491 492 String get pageTitleSignInAgain => 'Sign in again';

+2 -2

lib/src/core/l10n/intl_en.arb

reviewed

··· 497 497 "description": "Get started button text" 498 498 }, 499 499 500 500 - "buttonHaveAccount": "I already have an account", 500 500 + "buttonHaveAccount": "I have an Atmosphere Account", 501 501 "@buttonHaveAccount": { 502 502 "description": "Already have an account button text" 503 503 }, ··· 792 792 "description": "Sign in page title" 793 793 }, 794 794 795 795 - "messageEnterHandle": "Enter your handle to continue with OAuth", 795 795 + "messageEnterHandle": "Enter your Atmosphere Account handle to sign in.", 796 796 "@messageEnterHandle": { 797 797 "description": "Message to enter handle for OAuth" 798 798 },

+39 -3

lib/src/core/network/atproto/data/repositories/actor_repository_impl.dart

reviewed

··· 4 4 import 'package:bluesky/bluesky.dart' as bsky; 5 5 import 'package:get_it/get_it.dart'; 6 6 import 'package:http/http.dart' as http; 7 7 + import 'package:spark/src/core/config/app_config.dart'; 7 8 import 'package:spark/src/core/network/atproto/data/adapters/bsky/actor_adapter.dart'; 8 9 import 'package:spark/src/core/network/atproto/data/models/models.dart'; 9 10 import 'package:spark/src/core/network/atproto/data/repositories/actor_repository.dart'; ··· 121 122 }) async { 122 123 _logger.d('Searching actor typeahead with query: $query, limit: $limit'); 123 124 return _client.executeWithRetry(() async { 125 125 + final clampedLimit = limit.clamp(1, 100); 124 126 final atproto = _client.authRepository.atproto; 125 127 if (atproto == null) { 126 126 - _logger.e('AtProto not initialized'); 127 127 - throw Exception('AtProto not initialized'); 128 128 + return _searchActorsTypeaheadFromAppView(query, limit: clampedLimit); 128 129 } 129 130 130 130 - final clampedLimit = limit.clamp(1, 100); 131 131 final result = await atproto.get( 132 132 NSID.parse('so.sprk.actor.searchActorsTypeahead'), 133 133 parameters: {'q': query, 'limit': clampedLimit.toString()}, ··· 143 143 result.data as Map<String, dynamic>, 144 144 ); 145 145 }); 146 146 + } 147 147 + 148 148 + Future<SearchActorsTypeaheadResponse> _searchActorsTypeaheadFromAppView( 149 149 + String query, { 150 150 + required int limit, 151 151 + }) async { 152 152 + final uri = _appViewXrpcUri( 153 153 + 'so.sprk.actor.searchActorsTypeahead', 154 154 + queryParameters: {'q': query, 'limit': limit.toString()}, 155 155 + ); 156 156 + final response = await http.get(uri); 157 157 + 158 158 + if (response.statusCode != 200) { 159 159 + throw Exception( 160 160 + 'Actor typeahead failed with status ${response.statusCode}', 161 161 + ); 162 162 + } 163 163 + 164 164 + return SearchActorsTypeaheadResponse.fromJson( 165 165 + jsonDecode(response.body) as Map<String, dynamic>, 166 166 + ); 167 167 + } 168 168 + 169 169 + Uri _appViewXrpcUri( 170 170 + String nsid, { 171 171 + required Map<String, String> queryParameters, 172 172 + }) { 173 173 + final baseUri = Uri.parse(AppConfig.appViewUrl); 174 174 + final basePath = baseUri.path.endsWith('/') 175 175 + ? baseUri.path.substring(0, baseUri.path.length - 1) 176 176 + : baseUri.path; 177 177 + 178 178 + return baseUri.replace( 179 179 + path: '$basePath/xrpc/$nsid', 180 180 + queryParameters: queryParameters, 181 181 + ); 146 182 } 147 183 148 184 @override

+647 -117

lib/src/features/auth/ui/pages/login_page.dart

reviewed

··· 1 1 + import 'dart:async'; 2 2 + 1 3 import 'package:auto_route/auto_route.dart'; 2 4 import 'package:fluentui_system_icons/fluentui_system_icons.dart'; 3 5 import 'package:flutter/material.dart'; ··· 8 10 import 'package:spark/src/core/design_system/components/atoms/buttons/long_button.dart'; 9 11 import 'package:spark/src/core/design_system/tokens/typography.dart'; 10 12 import 'package:spark/src/core/l10n/app_localizations.dart'; 13 13 + import 'package:spark/src/core/network/atproto/data/models/actor_models.dart'; 11 14 import 'package:spark/src/core/routing/app_router.dart'; 12 15 import 'package:spark/src/features/auth/providers/auth_providers.dart'; 13 16 import 'package:spark/src/features/auth/providers/onboarding_providers.dart'; 17 17 + import 'package:spark/src/features/search/providers/actor_typeahead_provider.dart'; 18 18 + import 'package:spark/src/features/search/providers/actor_typeahead_state.dart'; 14 19 import 'package:spark/src/features/settings/providers/settings_provider.dart'; 15 20 16 21 @RoutePage() ··· 25 30 final _handleController = TextEditingController(); 26 31 final _formKey = GlobalKey<FormState>(); 27 32 final _handleFocusNode = FocusNode(); 33 33 + final _handleFieldKey = GlobalKey(); 34 34 + final _handleSuggestionsLayerLink = LayerLink(); 35 35 + late final ActorTypeahead _actorTypeaheadNotifier; 28 36 bool _hasReceivedCallback = false; 29 37 bool _isCompletingOAuth = false; 38 38 + bool _showHandleSuggestions = false; 30 39 31 40 @override 32 41 void initState() { 33 42 super.initState(); 43 43 + _actorTypeaheadNotifier = ref.read(actorTypeaheadProvider.notifier); 44 44 + _handleController.addListener(_onHandleChanged); 45 45 + _handleFocusNode.addListener(_onHandleFocusChanged); 34 46 WidgetsBinding.instance.addPostFrameCallback((_) { 35 47 TextInput.ensureInitialized(); 36 48 }); ··· 38 50 39 51 @override 40 52 void dispose() { 53 53 + _actorTypeaheadNotifier.clear(); 54 54 + _handleController.removeListener(_onHandleChanged); 55 55 + _handleFocusNode.removeListener(_onHandleFocusChanged); 41 56 _handleController.dispose(); 42 57 _handleFocusNode.dispose(); 43 58 super.dispose(); 44 59 } 45 60 61 61 + void _onHandleChanged() { 62 62 + if (!_handleFocusNode.hasFocus || _hasReceivedCallback) { 63 63 + return; 64 64 + } 65 65 + 66 66 + final isLoading = ref.read(authProvider.select((state) => state.isLoading)); 67 67 + if (isLoading || _isCompletingOAuth) { 68 68 + _hideHandleSuggestions(clearTypeahead: true); 69 69 + return; 70 70 + } 71 71 + 72 72 + final query = _handleController.text.trim(); 73 73 + if (query.isEmpty) { 74 74 + _hideHandleSuggestions(clearTypeahead: true); 75 75 + return; 76 76 + } 77 77 + 78 78 + _actorTypeaheadNotifier.updateQuery(query); 79 79 + if (!_showHandleSuggestions) { 80 80 + setState(() { 81 81 + _showHandleSuggestions = true; 82 82 + }); 83 83 + } 84 84 + } 85 85 + 86 86 + void _onHandleFocusChanged() { 87 87 + if (!_handleFocusNode.hasFocus) { 88 88 + _hideHandleSuggestions(clearTypeahead: true); 89 89 + return; 90 90 + } 91 91 + 92 92 + _onHandleChanged(); 93 93 + } 94 94 + 95 95 + void _hideHandleSuggestions({required bool clearTypeahead}) { 96 96 + if (clearTypeahead) { 97 97 + _actorTypeaheadNotifier.clear(); 98 98 + } 99 99 + 100 100 + if (!_showHandleSuggestions) { 101 101 + return; 102 102 + } 103 103 + 104 104 + setState(() { 105 105 + _showHandleSuggestions = false; 106 106 + }); 107 107 + } 108 108 + 109 109 + Future<void> _onHandleSuggestionSelected(ProfileViewBasic actor) async { 110 110 + _handleController.text = actor.handle; 111 111 + _handleController.selection = TextSelection.collapsed( 112 112 + offset: actor.handle.length, 113 113 + ); 114 114 + _hideHandleSuggestions(clearTypeahead: true); 115 115 + _handleFocusNode.unfocus(); 116 116 + await _initiateOAuth(); 117 117 + } 118 118 + 46 119 Future<void> _initiateOAuth() async { 47 120 if (_formKey.currentState?.validate() ?? false) { 48 121 final authNotifier = ref.read(authProvider.notifier); 49 122 final handle = _handleController.text.trim(); 50 123 51 124 try { 125 125 + _hideHandleSuggestions(clearTypeahead: true); 126 126 + _handleFocusNode.unfocus(); 127 127 + 52 128 // Initiate OAuth flow - this returns the authorization URL 53 129 final authUrl = await authNotifier.initiateOAuth(handle); 54 130 ··· 138 214 authProvider.select((state) => state.isLoading), 139 215 ); 140 216 final error = ref.watch(authProvider.select((state) => state.error)); 217 217 + final typeaheadState = ref.watch(actorTypeaheadProvider); 141 218 final theme = Theme.of(context); 142 219 final colorScheme = theme.colorScheme; 220 220 + final showHandleSuggestions = 221 221 + !isLoading && 222 222 + !_hasReceivedCallback && 223 223 + !_isCompletingOAuth && 224 224 + _showHandleSuggestions && 225 225 + typeaheadState.results.isNotEmpty; 226 226 + final reduceMotion = MediaQuery.of(context).disableAnimations; 227 227 + final handleFieldWidth = MediaQuery.sizeOf(context).width - 48; 143 228 144 229 return Scaffold( 145 230 backgroundColor: colorScheme.surface, 146 231 body: Stack( 147 232 children: [ 148 233 SafeArea( 149 149 - child: Center( 150 150 - child: SingleChildScrollView( 151 151 - padding: const EdgeInsets.all(24), 152 152 - child: Form( 153 153 - key: _formKey, 154 154 - child: Column( 155 155 - mainAxisAlignment: MainAxisAlignment.center, 156 156 - crossAxisAlignment: CrossAxisAlignment.stretch, 157 157 - children: [ 158 158 - if (!_hasReceivedCallback) ...[ 159 159 - Text( 160 160 - l10n.pageTitleSignIn, 161 161 - style: AppTypography.displaySmallBold.copyWith( 162 162 - color: colorScheme.onSurface, 163 163 - ), 164 164 - textAlign: TextAlign.center, 165 165 - ), 166 166 - const SizedBox(height: 8), 167 167 - Text( 168 168 - l10n.messageEnterHandle, 169 169 - style: AppTypography.textMediumMedium.copyWith( 170 170 - color: colorScheme.onSurfaceVariant, 171 171 - ), 172 172 - textAlign: TextAlign.center, 173 173 - ), 174 174 - const SizedBox(height: 32), 175 175 - ], 176 176 - 177 177 - if (!_hasReceivedCallback) ...[ 178 178 - TextFormField( 179 179 - controller: _handleController, 180 180 - focusNode: _handleFocusNode, 181 181 - enabled: !isLoading, 182 182 - decoration: InputDecoration( 183 183 - hintText: 'jerry.sprk.so', 184 184 - prefixIcon: Icon( 185 185 - FluentIcons.person_24_regular, 186 186 - color: colorScheme.primary, 187 187 - ), 188 188 - filled: true, 189 189 - fillColor: colorScheme.surface, 190 190 - contentPadding: const EdgeInsets.symmetric( 191 191 - horizontal: 16, 192 192 - vertical: 12, 193 193 - ), 194 194 - enabledBorder: OutlineInputBorder( 195 195 - borderRadius: BorderRadius.circular(8), 196 196 - borderSide: BorderSide( 197 197 - color: colorScheme.outline, 234 234 + child: Column( 235 235 + children: [ 236 236 + Expanded( 237 237 + child: Center( 238 238 + child: SingleChildScrollView( 239 239 + padding: const EdgeInsets.fromLTRB(24, 24, 24, 16), 240 240 + child: Form( 241 241 + key: _formKey, 242 242 + child: Column( 243 243 + mainAxisAlignment: MainAxisAlignment.center, 244 244 + crossAxisAlignment: CrossAxisAlignment.stretch, 245 245 + children: [ 246 246 + if (!_hasReceivedCallback) ...[ 247 247 + Text( 248 248 + l10n.pageTitleSignIn, 249 249 + style: AppTypography.displaySmallBold.copyWith( 250 250 + color: colorScheme.onSurface, 251 251 + ), 252 252 + textAlign: TextAlign.center, 198 253 ), 199 199 - ), 200 200 - focusedBorder: OutlineInputBorder( 201 201 - borderRadius: BorderRadius.circular(8), 202 202 - borderSide: BorderSide( 203 203 - color: colorScheme.primary, 254 254 + const SizedBox(height: 8), 255 255 + Text( 256 256 + l10n.messageEnterHandle, 257 257 + style: AppTypography.textMediumMedium.copyWith( 258 258 + color: colorScheme.onSurfaceVariant, 259 259 + ), 260 260 + textAlign: TextAlign.center, 204 261 ), 205 205 - ), 206 206 - errorBorder: OutlineInputBorder( 207 207 - borderRadius: BorderRadius.circular(8), 208 208 - borderSide: BorderSide(color: colorScheme.error), 209 209 - ), 210 210 - focusedErrorBorder: OutlineInputBorder( 211 211 - borderRadius: BorderRadius.circular(8), 212 212 - borderSide: BorderSide(color: colorScheme.error), 213 213 - ), 214 214 - ), 215 215 - style: AppTypography.textMediumMedium.copyWith( 216 216 - color: colorScheme.onSurface, 217 217 - ), 218 218 - textInputAction: TextInputAction.done, 219 219 - keyboardType: TextInputType.emailAddress, 220 220 - autofillHints: const [ 221 221 - AutofillHints.username, 222 222 - AutofillHints.email, 223 223 - ], 224 224 - onEditingComplete: _initiateOAuth, 225 225 - ), 226 226 - const SizedBox(height: 24), 227 227 - ], 262 262 + const SizedBox(height: 32), 263 263 + ], 228 264 229 229 - if (error != null) 230 230 - Padding( 231 231 - padding: const EdgeInsets.only(bottom: 16), 232 232 - child: Text( 233 233 - switch (error) { 234 234 - final String e 235 235 - when e.contains('must be a valid handle') => 236 236 - l10n.errorInvalidHandle, 237 237 - final String e 238 238 - when e.contains('Failed to resolve') => 239 239 - l10n.errorHandleNotFound, 240 240 - _ => error, 241 241 - }, 242 242 - style: AppTypography.textSmallMedium.copyWith( 243 243 - color: colorScheme.error, 244 244 - ), 245 245 - textAlign: TextAlign.center, 246 246 - ), 247 247 - ), 265 265 + if (!_hasReceivedCallback) ...[ 266 266 + CompositedTransformTarget( 267 267 + link: _handleSuggestionsLayerLink, 268 268 + child: TextFormField( 269 269 + key: _handleFieldKey, 270 270 + controller: _handleController, 271 271 + focusNode: _handleFocusNode, 272 272 + enabled: !isLoading, 273 273 + decoration: InputDecoration( 274 274 + hintText: 'jerry.sprk.so', 275 275 + prefixIcon: Icon( 276 276 + FluentIcons.person_24_regular, 277 277 + color: colorScheme.primary, 278 278 + ), 279 279 + filled: true, 280 280 + fillColor: colorScheme.surface, 281 281 + contentPadding: const EdgeInsets.symmetric( 282 282 + horizontal: 16, 283 283 + vertical: 12, 284 284 + ), 285 285 + enabledBorder: OutlineInputBorder( 286 286 + borderRadius: BorderRadius.circular(8), 287 287 + borderSide: BorderSide( 288 288 + color: colorScheme.outline, 289 289 + ), 290 290 + ), 291 291 + focusedBorder: OutlineInputBorder( 292 292 + borderRadius: BorderRadius.circular(8), 293 293 + borderSide: BorderSide( 294 294 + color: colorScheme.primary, 295 295 + ), 296 296 + ), 297 297 + errorBorder: OutlineInputBorder( 298 298 + borderRadius: BorderRadius.circular(8), 299 299 + borderSide: BorderSide( 300 300 + color: colorScheme.error, 301 301 + ), 302 302 + ), 303 303 + focusedErrorBorder: OutlineInputBorder( 304 304 + borderRadius: BorderRadius.circular(8), 305 305 + borderSide: BorderSide( 306 306 + color: colorScheme.error, 307 307 + ), 308 308 + ), 309 309 + ), 310 310 + style: AppTypography.textMediumMedium 311 311 + .copyWith(color: colorScheme.onSurface), 312 312 + textInputAction: TextInputAction.done, 313 313 + keyboardType: TextInputType.emailAddress, 314 314 + autofillHints: const [ 315 315 + AutofillHints.username, 316 316 + AutofillHints.email, 317 317 + ], 318 318 + onEditingComplete: _initiateOAuth, 319 319 + ), 320 320 + ), 321 321 + ], 322 322 + 323 323 + if (error != null) 324 324 + Padding( 325 325 + padding: const EdgeInsets.only(top: 16), 326 326 + child: Text( 327 327 + switch (error) { 328 328 + final String e 329 329 + when e.contains( 330 330 + 'must be a valid handle', 331 331 + ) => 332 332 + l10n.errorInvalidHandle, 333 333 + final String e 334 334 + when e.contains('Failed to resolve') => 335 335 + l10n.errorHandleNotFound, 336 336 + _ => error, 337 337 + }, 338 338 + style: AppTypography.textSmallMedium.copyWith( 339 339 + color: colorScheme.error, 340 340 + ), 341 341 + textAlign: TextAlign.center, 342 342 + ), 343 343 + ), 248 344 249 249 - if (_isCompletingOAuth) 250 250 - Column( 251 251 - children: [ 252 252 - const CircularProgressIndicator(), 253 253 - const SizedBox(height: 16), 254 254 - Text( 255 255 - l10n.errorCompletingSignIn, 256 256 - style: AppTypography.textMediumMedium.copyWith( 257 257 - color: colorScheme.onSurfaceVariant, 345 345 + if (_isCompletingOAuth) 346 346 + Padding( 347 347 + padding: const EdgeInsets.only(top: 24), 348 348 + child: Column( 349 349 + children: [ 350 350 + const CircularProgressIndicator(), 351 351 + const SizedBox(height: 16), 352 352 + Text( 353 353 + l10n.errorCompletingSignIn, 354 354 + style: AppTypography.textMediumMedium 355 355 + .copyWith( 356 356 + color: colorScheme.onSurfaceVariant, 357 357 + ), 358 358 + textAlign: TextAlign.center, 359 359 + ), 360 360 + ], 361 361 + ), 258 362 ), 259 259 - textAlign: TextAlign.center, 260 260 - ), 261 363 ], 262 262 - ) 263 263 - else if (!_hasReceivedCallback) 264 264 - Opacity( 265 265 - opacity: isLoading ? 0.5 : 1.0, 266 266 - child: LongButton( 267 267 - label: l10n.buttonContinue, 268 268 - onPressed: isLoading ? null : _initiateOAuth, 269 269 - ), 270 364 ), 271 271 - ], 365 365 + ), 366 366 + ), 272 367 ), 273 368 ), 274 274 - ), 369 369 + if (!_hasReceivedCallback && !_isCompletingOAuth) 370 370 + Padding( 371 371 + padding: const EdgeInsets.fromLTRB(24, 12, 24, 24), 372 372 + child: AnimatedOpacity( 373 373 + duration: reduceMotion 374 374 + ? Duration.zero 375 375 + : const Duration(milliseconds: 140), 376 376 + opacity: isLoading ? 0.5 : 1.0, 377 377 + child: LongButton( 378 378 + label: l10n.buttonContinue, 379 379 + onPressed: isLoading ? null : _initiateOAuth, 380 380 + ), 381 381 + ), 382 382 + ), 383 383 + ], 275 384 ), 276 385 ), 277 386 // Back button in top-left corner ··· 280 389 left: 0, 281 390 child: AppOverlayBackButton(color: colorScheme.onSurface), 282 391 ), 392 392 + if (showHandleSuggestions) 393 393 + Positioned.fill( 394 394 + child: CompositedTransformFollower( 395 395 + link: _handleSuggestionsLayerLink, 396 396 + showWhenUnlinked: false, 397 397 + targetAnchor: Alignment.bottomLeft, 398 398 + followerAnchor: Alignment.topLeft, 399 399 + offset: const Offset(0, 10), 400 400 + child: Align( 401 401 + alignment: Alignment.topLeft, 402 402 + child: SizedBox( 403 403 + width: handleFieldWidth, 404 404 + child: _LoginHandleSuggestions( 405 405 + state: typeaheadState, 406 406 + reduceMotion: reduceMotion, 407 407 + onSuggestionSelected: _onHandleSuggestionSelected, 408 408 + ), 409 409 + ), 410 410 + ), 411 411 + ), 412 412 + ), 283 413 ], 284 414 ), 285 415 ); 286 416 } 287 417 } 418 418 + 419 419 + class _LoginHandleSuggestions extends StatefulWidget { 420 420 + const _LoginHandleSuggestions({ 421 421 + required this.state, 422 422 + required this.reduceMotion, 423 423 + required this.onSuggestionSelected, 424 424 + }); 425 425 + 426 426 + final ActorTypeaheadState state; 427 427 + final bool reduceMotion; 428 428 + final ValueChanged<ProfileViewBasic> onSuggestionSelected; 429 429 + 430 430 + @override 431 431 + State<_LoginHandleSuggestions> createState() => 432 432 + _LoginHandleSuggestionsState(); 433 433 + } 434 434 + 435 435 + class _LoginHandleSuggestionsState extends State<_LoginHandleSuggestions> { 436 436 + static const _rowMorphDuration = Duration(milliseconds: 180); 437 437 + 438 438 + int _nextSlotId = 0; 439 439 + late List<_SuggestionSlot> _slots = _createSlots(widget.state.results); 440 440 + Timer? _enteringTimer; 441 441 + 442 442 + @override 443 443 + void initState() { 444 444 + super.initState(); 445 445 + _clearEnteringSoon(); 446 446 + } 447 447 + 448 448 + @override 449 449 + void didUpdateWidget(covariant _LoginHandleSuggestions oldWidget) { 450 450 + super.didUpdateWidget(oldWidget); 451 451 + 452 452 + final nextActors = widget.state.results; 453 453 + if (_sameActors(_slots.map((slot) => slot.actor).toList(), nextActors)) { 454 454 + return; 455 455 + } 456 456 + 457 457 + setState(() { 458 458 + for (var index = 0; index < nextActors.length; index++) { 459 459 + if (index < _slots.length) { 460 460 + _slots[index] = _slots[index].copyWith( 461 461 + actor: nextActors[index], 462 462 + isEntering: false, 463 463 + isRemoving: false, 464 464 + ); 465 465 + continue; 466 466 + } 467 467 + 468 468 + _slots.add( 469 469 + _SuggestionSlot( 470 470 + id: _nextSlotId++, 471 471 + actor: nextActors[index], 472 472 + isEntering: true, 473 473 + ), 474 474 + ); 475 475 + } 476 476 + 477 477 + for (var index = nextActors.length; index < _slots.length; index++) { 478 478 + _slots[index] = _slots[index].copyWith( 479 479 + isEntering: false, 480 480 + isRemoving: true, 481 481 + ); 482 482 + } 483 483 + }); 484 484 + 485 485 + if (widget.reduceMotion) { 486 486 + _pruneRemovedSlots(); 487 487 + return; 488 488 + } 489 489 + 490 490 + _clearEnteringSoon(); 491 491 + } 492 492 + 493 493 + @override 494 494 + void dispose() { 495 495 + _enteringTimer?.cancel(); 496 496 + super.dispose(); 497 497 + } 498 498 + 499 499 + List<_SuggestionSlot> _createSlots(List<ProfileViewBasic> actors) { 500 500 + return actors 501 501 + .map( 502 502 + (actor) => _SuggestionSlot( 503 503 + id: _nextSlotId++, 504 504 + actor: actor, 505 505 + isEntering: true, 506 506 + ), 507 507 + ) 508 508 + .toList(); 509 509 + } 510 510 + 511 511 + bool _sameActors( 512 512 + List<ProfileViewBasic> previous, 513 513 + List<ProfileViewBasic> next, 514 514 + ) { 515 515 + if (previous.length != next.length) { 516 516 + return false; 517 517 + } 518 518 + 519 519 + for (var index = 0; index < previous.length; index++) { 520 520 + if (previous[index].did != next[index].did) { 521 521 + return false; 522 522 + } 523 523 + } 524 524 + 525 525 + return true; 526 526 + } 527 527 + 528 528 + void _clearEnteringSoon() { 529 529 + _enteringTimer?.cancel(); 530 530 + if (widget.reduceMotion) { 531 531 + return; 532 532 + } 533 533 + 534 534 + _enteringTimer = Timer(const Duration(milliseconds: 260), () { 535 535 + if (!mounted) { 536 536 + return; 537 537 + } 538 538 + 539 539 + setState(() { 540 540 + _slots = [ 541 541 + for (final slot in _slots) 542 542 + if (!slot.isRemoving) slot.copyWith(isEntering: false), 543 543 + ]; 544 544 + }); 545 545 + }); 546 546 + } 547 547 + 548 548 + void _pruneRemovedSlots() { 549 549 + if (!mounted || !_slots.any((slot) => slot.isRemoving)) { 550 550 + return; 551 551 + } 552 552 + 553 553 + setState(() { 554 554 + _slots = [ 555 555 + for (final slot in _slots) 556 556 + if (!slot.isRemoving) slot, 557 557 + ]; 558 558 + }); 559 559 + } 560 560 + 561 561 + @override 562 562 + Widget build(BuildContext context) { 563 563 + final theme = Theme.of(context); 564 564 + final colorScheme = theme.colorScheme; 565 565 + 566 566 + if (widget.state.query.isEmpty) { 567 567 + return const SizedBox.shrink(); 568 568 + } 569 569 + 570 570 + if (_slots.isEmpty) { 571 571 + return const SizedBox.shrink(); 572 572 + } 573 573 + 574 574 + final panel = AnimatedSize( 575 575 + duration: widget.reduceMotion 576 576 + ? Duration.zero 577 577 + : const Duration(milliseconds: 190), 578 578 + curve: Curves.easeOutCubic, 579 579 + alignment: Alignment.topCenter, 580 580 + child: Container( 581 581 + constraints: const BoxConstraints(maxHeight: 252), 582 582 + clipBehavior: Clip.antiAlias, 583 583 + decoration: BoxDecoration( 584 584 + color: colorScheme.surface, 585 585 + borderRadius: BorderRadius.circular(12), 586 586 + border: Border.all(color: colorScheme.outline.withAlpha(96)), 587 587 + boxShadow: [ 588 588 + BoxShadow( 589 589 + color: colorScheme.shadow.withAlpha(18), 590 590 + blurRadius: 18, 591 591 + offset: const Offset(0, 8), 592 592 + ), 593 593 + ], 594 594 + ), 595 595 + child: ListView.separated( 596 596 + shrinkWrap: true, 597 597 + padding: const EdgeInsets.symmetric(vertical: 6), 598 598 + itemCount: _slots.length, 599 599 + separatorBuilder: (context, index) => 600 600 + Divider(height: 1, color: colorScheme.outline.withAlpha(48)), 601 601 + itemBuilder: (context, index) { 602 602 + final slot = _slots[index]; 603 603 + return _AnimatedSuggestionSlot( 604 604 + key: ValueKey(slot.id), 605 605 + actor: slot.actor, 606 606 + isEntering: slot.isEntering, 607 607 + isRemoving: slot.isRemoving, 608 608 + reduceMotion: widget.reduceMotion, 609 609 + onRemoved: _pruneRemovedSlots, 610 610 + onTap: () => widget.onSuggestionSelected(slot.actor), 611 611 + ); 612 612 + }, 613 613 + ), 614 614 + ), 615 615 + ); 616 616 + 617 617 + if (widget.reduceMotion) { 618 618 + return panel; 619 619 + } 620 620 + 621 621 + return TweenAnimationBuilder<double>( 622 622 + duration: const Duration(milliseconds: 180), 623 623 + curve: Curves.easeOutCubic, 624 624 + tween: Tween<double>(begin: 0, end: 1), 625 625 + builder: (context, value, child) { 626 626 + return Opacity( 627 627 + opacity: value, 628 628 + child: Transform.scale( 629 629 + alignment: Alignment.topCenter, 630 630 + scaleY: 0.96 + (0.04 * value), 631 631 + child: Transform.translate( 632 632 + offset: Offset(0, (value - 1) * 4), 633 633 + child: child, 634 634 + ), 635 635 + ), 636 636 + ); 637 637 + }, 638 638 + child: panel, 639 639 + ); 640 640 + } 641 641 + } 642 642 + 643 643 + class _SuggestionSlot { 644 644 + const _SuggestionSlot({ 645 645 + required this.id, 646 646 + required this.actor, 647 647 + this.isEntering = false, 648 648 + this.isRemoving = false, 649 649 + }); 650 650 + 651 651 + final int id; 652 652 + final ProfileViewBasic actor; 653 653 + final bool isEntering; 654 654 + final bool isRemoving; 655 655 + 656 656 + _SuggestionSlot copyWith({ 657 657 + ProfileViewBasic? actor, 658 658 + bool? isEntering, 659 659 + bool? isRemoving, 660 660 + }) { 661 661 + return _SuggestionSlot( 662 662 + id: id, 663 663 + actor: actor ?? this.actor, 664 664 + isEntering: isEntering ?? this.isEntering, 665 665 + isRemoving: isRemoving ?? this.isRemoving, 666 666 + ); 667 667 + } 668 668 + } 669 669 + 670 670 + class _AnimatedSuggestionSlot extends StatelessWidget { 671 671 + const _AnimatedSuggestionSlot({ 672 672 + required this.actor, 673 673 + required this.isEntering, 674 674 + required this.isRemoving, 675 675 + required this.reduceMotion, 676 676 + required this.onRemoved, 677 677 + required this.onTap, 678 678 + super.key, 679 679 + }); 680 680 + 681 681 + final ProfileViewBasic actor; 682 682 + final bool isEntering; 683 683 + final bool isRemoving; 684 684 + final bool reduceMotion; 685 685 + final VoidCallback onRemoved; 686 686 + final VoidCallback onTap; 687 687 + 688 688 + @override 689 689 + Widget build(BuildContext context) { 690 690 + final tile = AnimatedSwitcher( 691 691 + duration: reduceMotion 692 692 + ? Duration.zero 693 693 + : _LoginHandleSuggestionsState._rowMorphDuration, 694 694 + switchInCurve: Curves.easeOutCubic, 695 695 + switchOutCurve: Curves.easeOutCubic, 696 696 + layoutBuilder: (currentChild, previousChildren) { 697 697 + return Stack( 698 698 + alignment: Alignment.centerLeft, 699 699 + children: [...previousChildren, ?currentChild], 700 700 + ); 701 701 + }, 702 702 + transitionBuilder: (child, animation) { 703 703 + return FadeTransition(opacity: animation, child: child); 704 704 + }, 705 705 + child: _LoginHandleSuggestionTile( 706 706 + key: ValueKey(actor.did), 707 707 + actor: actor, 708 708 + onTap: onTap, 709 709 + ), 710 710 + ); 711 711 + 712 712 + if (reduceMotion) { 713 713 + return isRemoving ? const SizedBox.shrink() : tile; 714 714 + } 715 715 + 716 716 + return TweenAnimationBuilder<double>( 717 717 + duration: _LoginHandleSuggestionsState._rowMorphDuration, 718 718 + curve: Curves.easeOutCubic, 719 719 + tween: Tween<double>(begin: 0, end: isRemoving ? 0 : 1), 720 720 + onEnd: isRemoving ? onRemoved : null, 721 721 + builder: (context, value, child) { 722 722 + final enteringOffset = isEntering ? (value - 1) * 8 : 0.0; 723 723 + final removingOffset = isRemoving ? (1 - value) * -8 : 0.0; 724 724 + 725 725 + return ClipRect( 726 726 + child: Align( 727 727 + alignment: Alignment.topCenter, 728 728 + heightFactor: value.clamp(0.0, 1.0), 729 729 + child: Opacity( 730 730 + opacity: value, 731 731 + child: Transform.translate( 732 732 + offset: Offset(0, enteringOffset + removingOffset), 733 733 + child: child, 734 734 + ), 735 735 + ), 736 736 + ), 737 737 + ); 738 738 + }, 739 739 + child: tile, 740 740 + ); 741 741 + } 742 742 + } 743 743 + 744 744 + class _LoginHandleSuggestionTile extends StatelessWidget { 745 745 + const _LoginHandleSuggestionTile({ 746 746 + required this.actor, 747 747 + required this.onTap, 748 748 + super.key, 749 749 + }); 750 750 + 751 751 + final ProfileViewBasic actor; 752 752 + final VoidCallback onTap; 753 753 + 754 754 + @override 755 755 + Widget build(BuildContext context) { 756 756 + final colorScheme = Theme.of(context).colorScheme; 757 757 + 758 758 + return Material( 759 759 + color: Colors.transparent, 760 760 + child: InkWell( 761 761 + onTap: onTap, 762 762 + child: Padding( 763 763 + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), 764 764 + child: Row( 765 765 + children: [ 766 766 + CircleAvatar( 767 767 + radius: 18, 768 768 + backgroundColor: colorScheme.surfaceContainerHighest, 769 769 + backgroundImage: actor.avatar != null 770 770 + ? NetworkImage(actor.avatar.toString()) 771 771 + : null, 772 772 + child: actor.avatar == null 773 773 + ? Icon( 774 774 + FluentIcons.person_24_regular, 775 775 + size: 18, 776 776 + color: colorScheme.onSurfaceVariant, 777 777 + ) 778 778 + : null, 779 779 + ), 780 780 + const SizedBox(width: 12), 781 781 + Expanded( 782 782 + child: Column( 783 783 + crossAxisAlignment: CrossAxisAlignment.start, 784 784 + mainAxisSize: MainAxisSize.min, 785 785 + children: [ 786 786 + Text( 787 787 + actor.displayName ?? actor.handle, 788 788 + maxLines: 1, 789 789 + overflow: TextOverflow.ellipsis, 790 790 + style: AppTypography.textMediumMedium.copyWith( 791 791 + color: colorScheme.onSurface, 792 792 + ), 793 793 + ), 794 794 + const SizedBox(height: 2), 795 795 + Text( 796 796 + '@${actor.handle}', 797 797 + maxLines: 1, 798 798 + overflow: TextOverflow.ellipsis, 799 799 + style: AppTypography.textSmallMedium.copyWith( 800 800 + color: colorScheme.onSurfaceVariant, 801 801 + ), 802 802 + ), 803 803 + ], 804 804 + ), 805 805 + ), 806 806 + Icon( 807 807 + FluentIcons.arrow_enter_20_regular, 808 808 + size: 18, 809 809 + color: colorScheme.onSurfaceVariant.withAlpha(180), 810 810 + ), 811 811 + ], 812 812 + ), 813 813 + ), 814 814 + ), 815 815 + ); 816 816 + } 817 817 + }