feat: Improve container opening animation, improve scrolling on details page

lib/core/widgets/material/chips_input.dart

@@ -0,0 +1,291 @@
+// MIT License
+//
+// Copyright (c) 2019 Simon Lightfoot
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+//
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+typedef ChipsInputSuggestions<T> = Future<List<T>> Function(String query);
+typedef ChipSelected<T> = void Function(T data, bool selected);
+typedef ChipsBuilder<T> = Widget Function(
+    BuildContext context, ChipsInputState<T> state, T data);
+
+class ChipsInput<T> extends StatefulWidget {
+  const ChipsInput({
+    super.key,
+    this.decoration = const InputDecoration(),
+    required this.chipBuilder,
+    required this.suggestionBuilder,
+    required this.findSuggestions,
+    required this.onChanged,
+    this.onChipTapped,
+  });
+
+  final InputDecoration decoration;
+  final ChipsInputSuggestions<T> findSuggestions;
+  final ValueChanged<List<T>> onChanged;
+  final ValueChanged<T>? onChipTapped;
+  final ChipsBuilder<T> chipBuilder;
+  final ChipsBuilder<T> suggestionBuilder;
+
+  @override
+  ChipsInputState<T> createState() => ChipsInputState<T>();
+}
+
+class ChipsInputState<T> extends State<ChipsInput<T>> {
+  static const kObjectReplacementChar = 0xFFFC;
+
+  Set<T> _chips = {};
+  List<T> _suggestions = [];
+  int _searchId = 0;
+
+  FocusNode _focusNode = FocusNode();
+  TextEditingValue _value = const TextEditingValue();
+  TextInputConnection? _connection;
+
+  String get text {
+    return String.fromCharCodes(
+      _value.text.codeUnits.where((ch) => ch != kObjectReplacementChar),
+    );
+  }
+
+  TextEditingValue get currentTextEditingValue => _value;
+
+  bool get _hasInputConnection =>
+      _connection != null && (_connection?.attached ?? false);
+
+  void requestKeyboard() {
+    if (_focusNode.hasFocus) {
+      _openInputConnection();
+    } else {
+      FocusScope.of(context).requestFocus(_focusNode);
+    }
+  }
+
+  void selectSuggestion(T data) {
+    setState(() {
+      _chips.add(data);
+      _updateTextInputState();
+      _suggestions = [];
+    });
+    widget.onChanged(_chips.toList(growable: false));
+  }
+
+  void deleteChip(T data) {
+    setState(() {
+      _chips.remove(data);
+      _updateTextInputState();
+    });
+    widget.onChanged(_chips.toList(growable: false));
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode = FocusNode();
+    _focusNode.addListener(_onFocusChanged);
+  }
+
+  void _onFocusChanged() {
+    if (_focusNode.hasFocus) {
+      _openInputConnection();
+    } else {
+      _closeInputConnectionIfNeeded();
+    }
+    setState(() {
+      // rebuild so that _TextCursor is hidden.
+    });
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    _closeInputConnectionIfNeeded();
+    super.dispose();
+  }
+
+  void _openInputConnection() {
+    if (!_hasInputConnection) {
+      _connection?.setEditingState(_value);
+    }
+    _connection?.show();
+  }
+
+  void _closeInputConnectionIfNeeded() {
+    if (_hasInputConnection) {
+      _connection?.close();
+      _connection = null;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var chipsChildren = _chips
+        .map<Widget>(
+          (data) => widget.chipBuilder(context, this, data),
+        )
+        .toList();
+
+    final theme = Theme.of(context);
+
+    chipsChildren.add(
+      SizedBox(
+        height: 32.0,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: <Widget>[
+            Text(
+              text,
+              style: theme.textTheme.bodyLarge?.copyWith(
+                height: 1.5,
+              ),
+            ),
+            _TextCaret(
+              resumed: _focusNode.hasFocus,
+            ),
+          ],
+        ),
+      ),
+    );
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      //mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: requestKeyboard,
+          child: InputDecorator(
+            decoration: widget.decoration,
+            isFocused: _focusNode.hasFocus,
+            isEmpty: _value.text.isEmpty,
+            child: Wrap(
+              children: chipsChildren,
+              spacing: 4.0,
+              runSpacing: 4.0,
+            ),
+          ),
+        ),
+        Expanded(
+          child: ListView.builder(
+            itemCount: _suggestions.length,
+            itemBuilder: (BuildContext context, int index) {
+              return widget.suggestionBuilder(
+                  context, this, _suggestions[index]);
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  void updateEditingValue(TextEditingValue value) {
+    final oldCount = _countReplacements(_value);
+    final newCount = _countReplacements(value);
+    setState(() {
+      if (newCount < oldCount) {
+        _chips = Set.from(_chips.take(newCount));
+      }
+      _value = value;
+    });
+    _onSearchChanged(text);
+  }
+
+  int _countReplacements(TextEditingValue value) {
+    return value.text.codeUnits
+        .where((ch) => ch == kObjectReplacementChar)
+        .length;
+  }
+
+  void _updateTextInputState() {
+    final text =
+        String.fromCharCodes(_chips.map((_) => kObjectReplacementChar));
+    _value = TextEditingValue(
+      text: text,
+      selection: TextSelection.collapsed(offset: text.length),
+      composing: TextRange(start: 0, end: text.length),
+    );
+    _connection?.setEditingState(_value);
+  }
+
+  void _onSearchChanged(String value) async {
+    final localId = ++_searchId;
+    final results = await widget.findSuggestions(value);
+    if (_searchId == localId && mounted) {
+      setState(() => _suggestions = results
+          .where((profile) => !_chips.contains(profile))
+          .toList(growable: false));
+    }
+  }
+}
+
+class _TextCaret extends StatefulWidget {
+  const _TextCaret({
+    this.duration = const Duration(milliseconds: 500),
+    this.resumed = false,
+  });
+
+  final Duration duration;
+  final bool resumed;
+
+  @override
+  _TextCursorState createState() => _TextCursorState();
+}
+
+class _TextCursorState extends State<_TextCaret>
+    with SingleTickerProviderStateMixin {
+  bool _displayed = false;
+  late Timer _timer;
+
+  @override
+  void initState() {
+    super.initState();
+    _timer = Timer.periodic(widget.duration, _onTimer);
+  }
+
+  void _onTimer(Timer timer) {
+    setState(() => _displayed = !_displayed);
+  }
+
+  @override
+  void dispose() {
+    _timer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return FractionallySizedBox(
+      heightFactor: 0.7,
+      child: Opacity(
+        opacity: _displayed && widget.resumed ? 1.0 : 0.0,
+        child: Container(
+          width: 2.0,
+          color: theme.primaryColor,
+        ),
+      ),
+    );
+  }
+}

lib/features/document_bulk_action/view/widgets/bulk_edit_page.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:paperless_api/paperless_api.dart';
 
-class BulkEditPage<int, T extends Label> extends StatefulWidget {
+class BulkEditPage<T extends Label> extends StatefulWidget {
   final bool enableMultipleChoice;
   final Map<int, T> availableOptions;
 

lib/features/document_details/view/pages/document_details_page.dart

@@ -5,7 +5,7 @@ import 'package:open_filex/open_filex.dart';
 import 'package:paperless_api/paperless_api.dart';
 import 'package:paperless_mobile/core/bloc/connectivity_cubit.dart';
 import 'package:paperless_mobile/core/translation/error_code_localization_mapper.dart';
-import 'package:paperless_mobile/core/widgets/material/search/colored_tab_bar.dart';
+import 'package:paperless_mobile/core/widgets/material/colored_tab_bar.dart';
 import 'package:paperless_mobile/extensions/flutter_extensions.dart';
 import 'package:paperless_mobile/features/document_details/cubit/document_details_cubit.dart';
 import 'package:paperless_mobile/features/document_details/view/widgets/document_content_widget.dart';
@@ -42,6 +42,8 @@ class DocumentDetailsPage extends StatefulWidget {
 class _DocumentDetailsPageState extends State<DocumentDetailsPage> {
   late Future<DocumentMetaData> _metaData;
   static const double _itemSpacing = 24;
+
+  final _pagingScrollController = ScrollController();
   @override
   void initState() {
     super.initState();
@@ -79,7 +81,10 @@ class _DocumentDetailsPageState extends State<DocumentDetailsPage> {
             bottomNavigationBar: _buildBottomAppBar(),
             body: NestedScrollView(
               headerSliverBuilder: (context, innerBoxIsScrolled) => [
-                SliverAppBar(
+                SliverOverlapAbsorber(
+                  handle:
+                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
+                  sliver: SliverAppBar(
                     title: Text(context
                         .watch<DocumentDetailsCubit>()
                         .state
@@ -94,7 +99,8 @@ class _DocumentDetailsPageState extends State<DocumentDetailsPage> {
                       background: Stack(
                         alignment: Alignment.topCenter,
                         children: [
-                        BlocBuilder<DocumentDetailsCubit, DocumentDetailsState>(
+                          BlocBuilder<DocumentDetailsCubit,
+                              DocumentDetailsState>(
                             builder: (context, state) => Positioned.fill(
                               child: DocumentPreview(
                                 document: state.document,
@@ -171,6 +177,7 @@ class _DocumentDetailsPageState extends State<DocumentDetailsPage> {
                       ),
                     ),
                   ),
+                ),
               ],
               body: BlocBuilder<DocumentDetailsCubit, DocumentDetailsState>(
                 builder: (context, state) {
@@ -181,8 +188,19 @@ class _DocumentDetailsPageState extends State<DocumentDetailsPage> {
                       context.read(),
                       documentId: state.document.id,
                     ),
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 16,
+                        horizontal: 16,
+                      ),
                       child: TabBarView(
                         children: [
+                          CustomScrollView(
+                            slivers: [
+                              SliverOverlapInjector(
+                                handle: NestedScrollView
+                                    .sliverOverlapAbsorberHandleFor(context),
+                              ),
                               DocumentOverviewWidget(
                                 document: state.document,
                                 itemSpacing: _itemSpacing,
@@ -192,19 +210,49 @@ class _DocumentDetailsPageState extends State<DocumentDetailsPage> {
                                 availableTags: state.tags,
                                 availableStoragePaths: state.storagePaths,
                               ),
+                            ],
+                          ),
+                          CustomScrollView(
+                            slivers: [
+                              SliverOverlapInjector(
+                                handle: NestedScrollView
+                                    .sliverOverlapAbsorberHandleFor(context),
+                              ),
                               DocumentContentWidget(
                                 isFullContentLoaded: state.isFullContentLoaded,
                                 document: state.document,
                                 fullContent: state.fullContent,
                                 queryString: widget.titleAndContentQueryString,
                               ),
+                            ],
+                          ),
+                          CustomScrollView(
+                            slivers: [
+                              SliverOverlapInjector(
+                                handle: NestedScrollView
+                                    .sliverOverlapAbsorberHandleFor(context),
+                              ),
                               DocumentMetaDataWidget(
                                 document: state.document,
                                 itemSpacing: _itemSpacing,
                               ),
-                        const SimilarDocumentsView(),
                             ],
                           ),
+                          CustomScrollView(
+                            controller: _pagingScrollController,
+                            slivers: [
+                              SliverOverlapInjector(
+                                handle: NestedScrollView
+                                    .sliverOverlapAbsorberHandleFor(context),
+                              ),
+                              SimilarDocumentsView(
+                                pagingScrollController: _pagingScrollController,
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
                   );
                 },
               ),

lib/features/document_details/view/widgets/document_content_widget.dart

@@ -20,11 +20,7 @@ class DocumentContentWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
+    return SliverToBoxAdapter(
-      padding: const EdgeInsets.symmetric(
-        vertical: 16,
-        horizontal: 16,
-      ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [

lib/features/document_details/view/widgets/document_meta_data_widget.dart

@@ -31,15 +31,9 @@ class _DocumentMetaDataWidgetState extends State<DocumentMetaDataWidget> {
         if (state.metaData == null) {
           return const Center(child: CircularProgressIndicator());
         }
-        return SingleChildScrollView(
+        return SliverList(
-          child: Padding(
+          delegate: SliverChildListDelegate(
-            padding: const EdgeInsets.symmetric(
+            [
-              vertical: 16,
-              horizontal: 16,
-            ),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
               ArchiveSerialNumberField(
                 document: widget.document,
               ).paddedOnly(bottom: widget.itemSpacing),
@@ -75,7 +69,6 @@ class _DocumentMetaDataWidgetState extends State<DocumentMetaDataWidget> {
               ).paddedOnly(bottom: widget.itemSpacing),
             ],
           ),
-          ),
         );
       },
     );

lib/features/document_details/view/widgets/document_overview_widget.dart

@@ -30,12 +30,9 @@ class DocumentOverviewWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
+    return SliverList(
-      padding: const EdgeInsets.symmetric(
+      delegate: SliverChildListDelegate(
-        vertical: 16,
+        [
-        horizontal: 16,
-      ),
-      children: [
           DetailsItem(
             label: S.of(context)!.title,
             content: HighlightedText(
@@ -92,6 +89,7 @@ class DocumentOverviewWidget extends StatelessWidget {
             ).paddedOnly(bottom: itemSpacing),
           ),
         ],
+      ),
     );
   }
 }

lib/features/documents/view/pages/documents_page.dart

@@ -4,7 +4,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:paperless_api/paperless_api.dart';
 import 'package:paperless_mobile/core/bloc/connectivity_cubit.dart';
 import 'package:paperless_mobile/core/delegate/customizable_sliver_persistent_header_delegate.dart';
-import 'package:paperless_mobile/core/widgets/material/search/colored_tab_bar.dart';
+import 'package:paperless_mobile/core/widgets/material/colored_tab_bar.dart';
 import 'package:paperless_mobile/extensions/flutter_extensions.dart';
 import 'package:paperless_mobile/features/app_drawer/view/app_drawer.dart';
 import 'package:paperless_mobile/features/document_search/view/sliver_search_bar.dart';

lib/features/labels/view/pages/labels_page.dart

@@ -4,7 +4,7 @@ import 'package:paperless_api/paperless_api.dart';
 import 'package:paperless_mobile/core/bloc/connectivity_cubit.dart';
 import 'package:paperless_mobile/core/delegate/customizable_sliver_persistent_header_delegate.dart';
 import 'package:paperless_mobile/core/repository/label_repository.dart';
-import 'package:paperless_mobile/core/widgets/material/search/colored_tab_bar.dart';
+import 'package:paperless_mobile/core/widgets/material/colored_tab_bar.dart';
 import 'package:paperless_mobile/features/app_drawer/view/app_drawer.dart';
 import 'package:paperless_mobile/features/document_search/view/sliver_search_bar.dart';
 import 'package:paperless_mobile/features/edit_label/view/impl/add_correspondent_page.dart';

lib/features/similar_documents/view/similar_documents_view.dart

@@ -7,11 +7,13 @@ import 'package:paperless_mobile/features/documents/view/widgets/adaptive_docume
 import 'package:paperless_mobile/features/documents/view/widgets/documents_empty_state.dart';
 import 'package:paperless_mobile/features/paged_document_view/view/document_paging_view_mixin.dart';
 import 'package:paperless_mobile/features/similar_documents/cubit/similar_documents_cubit.dart';
+import 'package:paperless_mobile/generated/l10n/app_localizations.dart';
 import 'package:paperless_mobile/helpers/message_helpers.dart';
 import 'package:paperless_mobile/routes/document_details_route.dart';
 
 class SimilarDocumentsView extends StatefulWidget {
-  const SimilarDocumentsView({super.key});
+  final ScrollController pagingScrollController;
+  const SimilarDocumentsView({super.key, required this.pagingScrollController});
 
   @override
   State<SimilarDocumentsView> createState() => _SimilarDocumentsViewState();
@@ -20,8 +22,7 @@ class SimilarDocumentsView extends StatefulWidget {
 class _SimilarDocumentsViewState extends State<SimilarDocumentsView>
     with DocumentPagingViewMixin<SimilarDocumentsView, SimilarDocumentsCubit> {
   @override
-  final pagingScrollController = ScrollController();
+  ScrollController get pagingScrollController => widget.pagingScrollController;
-
   @override
   void initState() {
     super.initState();
@@ -43,25 +44,20 @@ class _SimilarDocumentsViewState extends State<SimilarDocumentsView>
         return BlocBuilder<SimilarDocumentsCubit, SimilarDocumentsState>(
           builder: (context, state) {
             if (!connectivity.isConnected && !state.hasLoaded) {
-              return const OfflineWidget();
+              return const SliverToBoxAdapter(
+                child: OfflineWidget(),
+              );
             }
             if (state.hasLoaded &&
                 !state.isLoading &&
                 state.documents.isEmpty) {
-              return DocumentsEmptyState(
+              return SliverToBoxAdapter(
-                state: state,
+                child: Center(
-                onReset: () => context
+                  child: Text(S.of(context)!.noItemsFound),
-                    .read<SimilarDocumentsCubit>()
-                    .updateFilter(
-                      filter: DocumentFilter.initial.copyWith(
-                        moreLike: () =>
-                            context.read<SimilarDocumentsCubit>().documentId,
-                      ),
                 ),
               );
             }
-            return DefaultAdaptiveDocumentsView(
+            return SliverAdaptiveDocumentsView(
-              scrollController: pagingScrollController,
               documents: state.documents,
               hasInternetConnection: connectivity.isConnected,
               isLabelClickable: false,