feat: Implemented new view type, fix connectivity issues, fix offline issues, fix loading animations, fix documents page paging

2025-12-15 00:12:22 -06:00 · 2023-02-14 00:24:14 +01:00
parent c5033792aa
commit 6f66bf27fd
29 changed files with 806 additions and 606 deletions
--- a/lib/features/documents/view/widgets/adaptive_documents_view.dart
+++ b/lib/features/documents/view/widgets/adaptive_documents_view.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:paperless_api/paperless_api.dart';
 import 'package:paperless_mobile/core/repository/provider/label_repositories_provider.dart';
-import 'package:paperless_mobile/features/documents/view/widgets/document_grid_loading_widget.dart';
-import 'package:paperless_mobile/features/documents/view/widgets/documents_list_loading_widget.dart';
+import 'package:paperless_mobile/features/documents/view/widgets/placeholder/document_grid_loading_widget.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/items/document_detailed_item.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/items/document_grid_item.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/items/document_list_item.dart';
+import 'package:paperless_mobile/features/documents/view/widgets/placeholder/documents_list_loading_widget.dart';
+import 'package:paperless_mobile/features/paged_document_view/cubit/paged_documents_state.dart';
 import 'package:paperless_mobile/features/settings/model/view_type.dart';

 abstract class AdaptiveDocumentsView extends StatelessWidget {
@@ -42,6 +43,24 @@ abstract class AdaptiveDocumentsView extends StatelessWidget {
    required this.hasLoaded,
    this.enableHeroAnimation = true,
  });
+
+  AdaptiveDocumentsView.fromPagedState(
+    DocumentPagingState state, {
+    super.key,
+    this.onSelected,
+    this.onTap,
+    this.onCorrespondentSelected,
+    this.onDocumentTypeSelected,
+    this.onStoragePathSelected,
+    this.onTagSelected,
+    this.isLabelClickable = true,
+    this.enableHeroAnimation = true,
+    required this.hasInternetConnection,
+    this.viewType = ViewType.list,
+    this.selectedDocumentIds = const [],
+  })  : documents = state.documents,
+        isLoading = state.isLoading,
+        hasLoaded = state.hasLoaded;
 }

 class SliverAdaptiveDocumentsView extends AdaptiveDocumentsView {
@@ -115,7 +134,7 @@ class SliverAdaptiveDocumentsView extends AdaptiveDocumentsView {
        (context, index) {
          final document = documents.elementAt(index);
          return LabelRepositoriesProvider(
-            child: DocumentGridItem(
+            child: DocumentDetailedItem(
              isLabelClickable: isLabelClickable,
              document: document,
              onTap: onTap,
@@ -136,7 +155,7 @@ class SliverAdaptiveDocumentsView extends AdaptiveDocumentsView {

  Widget _buildGridView() {
    if (showLoadingPlaceholder) {
-      return DocumentGridLoadingWidget.sliver();
+      return const DocumentGridLoadingWidget.sliver();
    }
    return SliverGrid.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
@@ -205,6 +224,7 @@ class DefaultAdaptiveDocumentsView extends AdaptiveDocumentsView {
    }

    return ListView.builder(
+      padding: EdgeInsets.zero,
      controller: scrollController,
      primary: false,
      itemCount: documents.length,
@@ -235,6 +255,7 @@ class DefaultAdaptiveDocumentsView extends AdaptiveDocumentsView {
    }

    return ListView.builder(
+      padding: EdgeInsets.zero,
      physics: const PageScrollPhysics(),
      controller: scrollController,
      primary: false,
@@ -265,6 +286,7 @@ class DefaultAdaptiveDocumentsView extends AdaptiveDocumentsView {
      return DocumentGridLoadingWidget();
    }
    return GridView.builder(
+      padding: EdgeInsets.zero,
      controller: scrollController,
      primary: false,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
--- a/lib/features/documents/view/widgets/document_preview.dart
+++ b/lib/features/documents/view/widgets/document_preview.dart
@@ -2,51 +2,59 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:paperless_api/paperless_api.dart';
+import 'package:paperless_mobile/features/documents/view/pages/document_view.dart';
 import 'package:provider/provider.dart';
 import 'package:shimmer/shimmer.dart';

 class DocumentPreview extends StatelessWidget {
-  final int id;
+  final DocumentModel document;
  final BoxFit fit;
  final Alignment alignment;
  final double borderRadius;
  final bool enableHero;
+  final double scale;

  const DocumentPreview({
    super.key,
-    required this.id,
+    required this.document,
    this.fit = BoxFit.cover,
-    this.alignment = Alignment.center,
-    this.borderRadius = 8.0,
+    this.alignment = Alignment.topCenter,
+    this.borderRadius = 12.0,
    this.enableHero = true,
+    this.scale = 1.1,
  });

  @override
  Widget build(BuildContext context) {
-    if (!enableHero) {
-      return _buildPreview(context);
-    }
-    return Hero(
-      tag: "thumb_$id",
-      child: _buildPreview(context),
+    return HeroMode(
+      enabled: enableHero,
+      child: Hero(
+        tag: "thumb_${document.id}",
+        child: _buildPreview(context),
+      ),
    );
  }

-  ClipRRect _buildPreview(BuildContext context) {
+  Widget _buildPreview(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
-      child: CachedNetworkImage(
-        fit: fit,
-        alignment: Alignment.topCenter,
-        cacheKey: "thumb_$id",
-        imageUrl: context.read<PaperlessDocumentsApi>().getThumbnailUrl(id),
-        errorWidget: (ctxt, msg, __) => Text(msg),
-        placeholder: (context, value) => Shimmer.fromColors(
-          baseColor: Colors.grey[300]!,
-          highlightColor: Colors.grey[100]!,
-          child: const SizedBox(height: 100, width: 100),
+      child: Transform.scale(
+        scale: scale,
+        child: CachedNetworkImage(
+          fit: fit,
+          alignment: alignment,
+          cacheKey: "thumb_${document.id}",
+          imageUrl: context
+              .read<PaperlessDocumentsApi>()
+              .getThumbnailUrl(document.id),
+          errorWidget: (ctxt, msg, __) => Text(msg),
+          placeholder: (context, value) => Shimmer.fromColors(
+            baseColor: Colors.grey[300]!,
+            highlightColor: Colors.grey[100]!,
+            child: const SizedBox(height: 100, width: 100),
+          ),
+          cacheManager: context.watch<CacheManager>(),
        ),
-        cacheManager: context.watch<CacheManager>(),
      ),
    );
  }
--- a/lib/features/documents/view/widgets/items/document_detailed_item.dart
+++ b/lib/features/documents/view/widgets/items/document_detailed_item.dart
@@ -1,6 +1,13 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:paperless_mobile/extensions/flutter_extensions.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/document_preview.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/items/document_item.dart';
+import 'package:paperless_mobile/features/labels/correspondent/view/widgets/correspondent_widget.dart';
+import 'package:paperless_mobile/features/labels/document_type/view/widgets/document_type_widget.dart';
+import 'package:paperless_mobile/features/labels/tags/view/widgets/tags_widget.dart';

 class DocumentDetailedItem extends DocumentItem {
  const DocumentDetailedItem({
@@ -20,12 +27,118 @@ class DocumentDetailedItem extends DocumentItem {

  @override
  Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+    final insets = MediaQuery.of(context).viewInsets;
+    final padding = MediaQuery.of(context).viewPadding;
+    final availableHeight = size.height -
+        insets.top -
+        insets.bottom -
+        padding.top -
+        padding.bottom -
+        kBottomNavigationBarHeight -
+        kToolbarHeight;
+    final maxHeight = min(500.0, availableHeight);
    return Card(
-      child: Column(
-        children: [
-          DocumentPreview(id: document.id),
-        ],
+      child: InkWell(
+        enableFeedback: true,
+        borderRadius: BorderRadius.circular(12),
+        onTap: () {
+          if (isSelectionActive) {
+            onSelected?.call(document);
+          } else {
+            onTap?.call(document);
+          }
+        },
+        onLongPress: () {
+          onSelected?.call(document);
+        },
+        child: Stack(
+          children: [
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ConstrainedBox(
+                  constraints: BoxConstraints.tightFor(
+                    width: double.infinity,
+                    height: maxHeight / 2,
+                  ),
+                  child: DocumentPreview(
+                    document: document,
+                    fit: BoxFit.cover,
+                    alignment: Alignment.topCenter,
+                  ),
+                ),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text(
+                      DateFormat.yMMMMd().format(document.created),
+                      style: Theme.of(context)
+                          .textTheme
+                          .bodySmall
+                          ?.apply(color: Theme.of(context).hintColor),
+                    ),
+                    if (document.archiveSerialNumber != null)
+                      Row(
+                        children: [
+                          Text(
+                            '#${document.archiveSerialNumber}',
+                            style: Theme.of(context)
+                                .textTheme
+                                .bodySmall
+                                ?.apply(color: Theme.of(context).hintColor),
+                          ),
+                        ],
+                      ),
+                  ],
+                ).paddedLTRB(8, 8, 8, 4),
+                Text(
+                  document.title,
+                  style: Theme.of(context).textTheme.titleMedium,
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                ).paddedLTRB(8, 0, 8, 4),
+                Row(
+                  children: [
+                    const Icon(
+                      Icons.person_outline,
+                      size: 16,
+                    ).paddedOnly(right: 4.0),
+                    CorrespondentWidget(
+                      onSelected: onCorrespondentSelected,
+                      textStyle: Theme.of(context).textTheme.titleSmall?.apply(
+                            color:
+                                Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
+                      correspondentId: document.correspondent,
+                    ),
+                  ],
+                ).paddedLTRB(8, 0, 8, 4),
+                Row(
+                  children: [
+                    const Icon(
+                      Icons.description_outlined,
+                      size: 16,
+                    ).paddedOnly(right: 4.0),
+                    DocumentTypeWidget(
+                      onSelected: onDocumentTypeSelected,
+                      textStyle: Theme.of(context).textTheme.titleSmall?.apply(
+                            color:
+                                Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
+                      documentTypeId: document.documentType,
+                    ),
+                  ],
+                ).paddedLTRB(8, 0, 8, 4),
+                TagsWidget(
+                  isMultiLine: false,
+                  tagIds: document.tags,
+                ).padded(),
+              ],
+            ),
+          ],
+        ),
      ),
-    );
+    ).padded();
  }
 }
--- a/lib/features/documents/view/widgets/items/document_grid_item.dart
+++ b/lib/features/documents/view/widgets/items/document_grid_item.dart
@@ -25,66 +25,62 @@ class DocumentGridItem extends DocumentItem {

  @override
  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: _onTap,
-      onLongPress: onSelected != null ? () => onSelected!(document) : null,
-      child: AbsorbPointer(
-        absorbing: isSelectionActive,
-        child: Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Card(
-            elevation: 1.0,
-            color: isSelected
-                ? Theme.of(context).colorScheme.inversePrimary
-                : Theme.of(context).cardColor,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                AspectRatio(
-                  aspectRatio: 1,
-                  child: DocumentPreview(
-                    id: document.id,
-                    borderRadius: 12.0,
-                    enableHero: enableHeroAnimation,
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Card(
+        elevation: 1.0,
+        color: isSelected
+            ? Theme.of(context).colorScheme.inversePrimary
+            : Theme.of(context).cardColor,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(12),
+          onTap: _onTap,
+          onLongPress: onSelected != null ? () => onSelected!(document) : null,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AspectRatio(
+                aspectRatio: 1,
+                child: DocumentPreview(
+                  document: document,
+                  borderRadius: 12.0,
+                  enableHero: enableHeroAnimation,
+                ),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      CorrespondentWidget(
+                        correspondentId: document.correspondent,
+                      ),
+                      DocumentTypeWidget(
+                        documentTypeId: document.documentType,
+                      ),
+                      Text(
+                        document.title,
+                        maxLines: document.tags.isEmpty ? 3 : 2,
+                        overflow: TextOverflow.ellipsis,
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      const Spacer(),
+                      TagsWidget(
+                        tagIds: document.tags,
+                        isMultiLine: false,
+                        onTagSelected: onTagSelected,
+                      ),
+                      const Spacer(),
+                      Text(
+                        DateFormat.yMMMd().format(document.created),
+                        style: Theme.of(context).textTheme.bodySmall,
+                      ),
+                    ],
                  ),
                ),
-                Expanded(
-                  child: Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        CorrespondentWidget(
-                          correspondentId: document.correspondent,
-                        ),
-                        DocumentTypeWidget(
-                          documentTypeId: document.documentType,
-                        ),
-                        Text(
-                          document.title,
-                          maxLines: document.tags.isEmpty ? 3 : 2,
-                          overflow: TextOverflow.ellipsis,
-                          style: Theme.of(context).textTheme.titleMedium,
-                        ),
-                        const Spacer(),
-                        TagsWidget(
-                          tagIds: document.tags,
-                          isMultiLine: false,
-                          onTagSelected: onTagSelected,
-                        ),
-                        const Spacer(),
-                        Text(
-                          DateFormat.yMMMd().format(
-                            document.created,
-                          ),
-                          style: Theme.of(context).textTheme.bodySmall,
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              ],
-            ),
+              ),
+            ],
          ),
        ),
      ),
--- a/lib/features/documents/view/widgets/items/document_list_item.dart
+++ b/lib/features/documents/view/widgets/items/document_list_item.dart
@@ -122,7 +122,7 @@ class DocumentListItem extends DocumentItem {
          aspectRatio: _a4AspectRatio,
          child: GestureDetector(
            child: DocumentPreview(
-              id: document.id,
+              document: document,
              fit: BoxFit.cover,
              alignment: Alignment.topCenter,
              enableHero: enableHeroAnimation,
--- a/lib/features/documents/view/widgets/placeholder/document_grid_loading_widget.dart
+++ b/lib/features/documents/view/widgets/placeholder/document_grid_loading_widget.dart
@@ -1,24 +1,15 @@
-import 'dart:math';
-
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:paperless_mobile/core/widgets/shimmer_placeholder.dart';
 import 'package:paperless_mobile/extensions/flutter_extensions.dart';
-import 'package:paperless_mobile/features/documents/view/widgets/document_preview.dart';
-import 'package:paperless_mobile/features/documents/view/widgets/placeholder/document_item_placeholder.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/placeholder/tags_placeholder.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/placeholder/text_placeholder.dart';
-import 'package:shimmer/shimmer.dart';

-class DocumentGridLoadingWidget extends StatelessWidget
-    with DocumentItemPlaceholder {
+class DocumentGridLoadingWidget extends StatelessWidget {
  final bool _isSliver;
  @override
-  final Random random = Random(1257195195);
-  DocumentGridLoadingWidget({super.key}) : _isSliver = false;
+  const DocumentGridLoadingWidget({super.key}) : _isSliver = false;

-  DocumentGridLoadingWidget.sliver({super.key}) : _isSliver = true;
+  const DocumentGridLoadingWidget.sliver({super.key}) : _isSliver = true;

  @override
  Widget build(BuildContext context) {
@@ -41,8 +32,6 @@ class DocumentGridLoadingWidget extends StatelessWidget
  }

  Widget _buildPlaceholderGridItem(BuildContext context) {
-    final values = nextValues;
-
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
@@ -68,21 +57,25 @@ class DocumentGridLoadingWidget extends StatelessWidget
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
-                      TextPlaceholder(
-                        length: values.correspondentLength,
+                      const TextPlaceholder(
+                        length: 70,
+                        fontSize: 16,
+                      ).padded(1),
+                      const TextPlaceholder(
+                        length: 50,
                        fontSize: 16,
                      ).padded(1),
                      TextPlaceholder(
-                        length: values.titleLength,
-                        fontSize: 16,
+                        length: 200,
+                        fontSize:
+                            Theme.of(context).textTheme.titleMedium?.fontSize ??
+                                10,
+                      ).padded(1),
+                      const Spacer(),
+                      const TagsPlaceholder(
+                        count: 2,
+                        dense: true,
                      ),
-                      if (values.tagCount > 0) ...[
-                        const Spacer(),
-                        TagsPlaceholder(
-                          count: values.tagCount,
-                          dense: true,
-                        ),
-                      ],
                      const Spacer(),
                      TextPlaceholder(
                        length: 100,
--- a/lib/features/documents/view/widgets/placeholder/document_item_placeholder.dart
+++ b/lib/features/documents/view/widgets/placeholder/document_item_placeholder.dart
@@ -1,30 +0,0 @@
-import 'dart:math';
-
-mixin DocumentItemPlaceholder {
-  static const _tags = ["    ", "            ", "      "];
-  static const _titleLengths = <double>[double.infinity, 150.0, 200.0];
-  static const _correspondentLengths = <double>[120.0, 80.0, 40.0];
-
-  Random get random;
-
-  RandomDocumentItemPlaceholderValues get nextValues {
-    return RandomDocumentItemPlaceholderValues(
-      tagCount: random.nextInt(_tags.length + 1),
-      correspondentLength: _correspondentLengths[
-          random.nextInt(_correspondentLengths.length - 1)],
-      titleLength: _titleLengths[random.nextInt(_titleLengths.length - 1)],
-    );
-  }
-}
-
-class RandomDocumentItemPlaceholderValues {
-  final int tagCount;
-  final double correspondentLength;
-  final double titleLength;
-
-  RandomDocumentItemPlaceholderValues({
-    required this.tagCount,
-    required this.correspondentLength,
-    required this.titleLength,
-  });
-}
--- a/lib/features/documents/view/widgets/placeholder/documents_list_loading_widget.dart
+++ b/lib/features/documents/view/widgets/placeholder/documents_list_loading_widget.dart
@@ -1,21 +1,13 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:paperless_mobile/core/widgets/shimmer_placeholder.dart';
-import 'package:paperless_mobile/extensions/flutter_extensions.dart';
-import 'package:paperless_mobile/features/documents/view/widgets/placeholder/document_item_placeholder.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/placeholder/tags_placeholder.dart';
 import 'package:paperless_mobile/features/documents/view/widgets/placeholder/text_placeholder.dart';

-class DocumentsListLoadingWidget extends StatelessWidget
-    with DocumentItemPlaceholder {
+class DocumentsListLoadingWidget extends StatelessWidget {
  final bool _isSliver;
-  DocumentsListLoadingWidget({super.key}) : _isSliver = false;
+  const DocumentsListLoadingWidget({super.key}) : _isSliver = false;

-  DocumentsListLoadingWidget.sliver({super.key}) : _isSliver = true;
-
-  @override
-  final Random random = Random(1209571050);
+  const DocumentsListLoadingWidget.sliver({super.key}) : _isSliver = true;

  @override
  Widget build(BuildContext context) {
@@ -35,26 +27,31 @@ class DocumentsListLoadingWidget extends StatelessWidget

  Widget _buildFakeListItem(BuildContext context) {
    const fontSize = 14.0;
-    final values = nextValues;
    return ShimmerPlaceholder(
      child: ListTile(
        contentPadding: const EdgeInsets.all(8),
        dense: true,
        isThreeLine: true,
        leading: ClipRRect(
-          borderRadius: BorderRadius.circular(8),
+          borderRadius: BorderRadius.circular(12),
          child: Container(
            color: Colors.white,
            height: double.infinity,
            width: 35,
          ),
        ),
-        title: Row(
+        title: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
-            TextPlaceholder(
-              length: values.correspondentLength,
+            const TextPlaceholder(
+              length: 120,
              fontSize: fontSize,
            ),
+            const SizedBox(height: 2),
+            TextPlaceholder(
+              length: 220,
+              fontSize: Theme.of(context).textTheme.titleMedium!.fontSize!,
+            ),
          ],
        ),
        subtitle: Padding(
@@ -63,14 +60,10 @@ class DocumentsListLoadingWidget extends StatelessWidget
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
+              TagsPlaceholder(count: 2, dense: true),
+              SizedBox(height: 2),
              TextPlaceholder(
-                length: values.titleLength,
-                fontSize: fontSize,
-              ),
-              if (values.tagCount > 0)
-                TagsPlaceholder(count: values.tagCount, dense: true),
-              TextPlaceholder(
-                length: 100,
+                length: 250,
                fontSize: Theme.of(context).textTheme.labelSmall!.fontSize!,
              ),
            ],
--- a/lib/features/documents/view/widgets/placeholder/tags_placeholder.dart
+++ b/lib/features/documents/view/widgets/placeholder/tags_placeholder.dart
@@ -15,6 +15,7 @@ class TagsPlaceholder extends StatelessWidget {
    return SizedBox(
      height: 32,
      child: ListView.separated(
+        padding: EdgeInsets.zero,
        itemCount: count,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => FilterChip(
--- a/lib/features/documents/view/widgets/placeholder/text_placeholder.dart
+++ b/lib/features/documents/view/widgets/placeholder/text_placeholder.dart
@@ -1,9 +1,4 @@
-import 'dart:math';
-
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
-import 'package:paperless_mobile/extensions/flutter_extensions.dart';

 class TextPlaceholder extends StatelessWidget {
  final double length;
--- a/lib/features/documents/view/widgets/selection/view_type_selection_widget.dart
+++ b/lib/features/documents/view/widgets/selection/view_type_selection_widget.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:paperless_api/paperless_api.dart';
 import 'package:paperless_mobile/features/settings/model/view_type.dart';

 /// Meant to be used with blocbuilder.
@@ -28,22 +27,26 @@ class ViewTypeSelectionWidget extends StatelessWidget {
        break;
    }
    return PopupMenuButton<ViewType>(
-      child: Icon(icon),
+      initialValue: viewType,
+      icon: Icon(icon),
      itemBuilder: (context) => [
        _buildViewTypeOption(
-          ViewType.list,
-          'List',
-          Icons.list,
+          context,
+          type: ViewType.list,
+          label: 'List', //TODO: INTL
+          icon: Icons.list,
        ),
        _buildViewTypeOption(
-          ViewType.grid,
-          'Grid',
-          Icons.grid_view_rounded,
+          context,
+          type: ViewType.grid,
+          label: 'Grid', //TODO: INTL
+          icon: Icons.grid_view_rounded,
        ),
        _buildViewTypeOption(
-          ViewType.detailed,
-          'Detailed',
-          Icons.article_outlined,
+          context,
+          type: ViewType.detailed,
+          label: 'Detailed', //TODO: INTL
+          icon: Icons.article_outlined,
        ),
      ],
      onSelected: (next) {
@@ -53,17 +56,22 @@ class ViewTypeSelectionWidget extends StatelessWidget {
  }

  PopupMenuItem<ViewType> _buildViewTypeOption(
-    ViewType type,
-    String label,
-    IconData icon,
-  ) {
+    BuildContext context, {
+    required ViewType type,
+    required String label,
+    required IconData icon,
+  }) {
+    final selected = type == viewType;
    return PopupMenuItem(
      value: type,
      child: ListTile(
-        selected: type == viewType,
-        trailing: type == viewType ? const Icon(Icons.done) : null,
+        selected: selected,
+        trailing: selected ? const Icon(Icons.done) : null,
        title: Text(label),
+        iconColor: Theme.of(context).colorScheme.onSurface,
+        textColor: Theme.of(context).colorScheme.onSurface,
        leading: Icon(icon),
+        contentPadding: EdgeInsets.zero,
      ),
    );
  }