Enhance layouts for GoalsPage, NoteDialog, AnnotationDialog, and Book Edit#17
Merged
Conversation
…d add corresponding test
… corresponding test
… page and preferences provider
…th improved layout
There was a problem hiding this comment.
Pull request overview
This PR delivers a set of Flutter UI/UX layout improvements to make key flows more consistent across screen sizes, including a responsive Book Edit desktop layout, unified empty states, and a simplified “Add book” flow that always uses modal bottom sheets. It also updates Profile section labeling to match the new navigation copy and adds/updates widget tests to lock in the expected layouts.
Changes:
- Implement responsive pane behavior and metadata-control hierarchy updates on the Book Edit page (with supporting layout tests).
- Standardize several dialogs/sheets to content-sized modal bottom sheets and introduce shared empty-state rendering in selection sheets and Goals.
- Update Profile section labels (“Storage & sync” → “Storage”, etc.) and align provider/test expectations.
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/superpowers/specs/2026-07-13-book-edit-responsive-pane-design.md | Adds spec for Book Edit responsive pane behavior and metadata control hierarchy. |
| docs/superpowers/specs/2026-07-13-add-book-bottom-sheets-design.md | Adds spec for bottom-sheet-only add-book flow and updated copy. |
| docs/superpowers/plans/2026-07-13-book-edit-responsive-pane.md | Adds implementation plan and test guidance for Book Edit responsive layout. |
| docs/superpowers/plans/2026-07-13-add-book-bottom-sheets.md | Adds implementation plan and test guidance for add-book bottom sheets. |
| app/test/widgets/shared/selection_sheets_empty_state_test.dart | Tests centered empty-state behavior for topics/shelves sheets. |
| app/test/widgets/book_details/note_dialog_test.dart | Tests bounded multiline behavior and sheet sizing for notes. |
| app/test/widgets/book_details/annotation_dialog_test.dart | Tests annotation sheet is no longer draggable and remains stable. |
| app/test/widgets/add_book/add_book_sheets_test.dart | Verifies add-book choice/import open as modal bottom sheets on desktop and checks copy/structure. |
| app/test/pages/profile_storage_sync_test.dart | Updates tests for renamed Profile “Storage” section label. |
| app/test/pages/goals_page_test.dart | Adds tests for vertically centered Goals empty state at multiple widths. |
| app/test/pages/book_edit_page_layout_test.dart | Expands layout tests for intermediate/stacked desktop and metadata control ordering. |
| app/lib/widgets/topics/manage_topics_sheet.dart | Refactors topics empty state to use shared EmptyState. |
| app/lib/widgets/shelves/move_to_shelf_sheet.dart | Refactors shelves empty state to use shared EmptyState and simplifies empty handling. |
| app/lib/widgets/shared/bottom_sheet_header.dart | Makes onSave optional and adjusts header layout for centered titles. |
| app/lib/widgets/book_form/responsive_form_row.dart | Uses local constraints to decide row vs column layout for paired form fields. |
| app/lib/widgets/book_details/note_dialog.dart | Converts note sheet to constrained, content-sized layout with bounded multiline input. |
| app/lib/widgets/book_details/annotation_dialog.dart | Converts annotation sheet to constrained, content-sized layout without draggable sheet. |
| app/lib/widgets/add_book/import_book_sheet.dart | Removes desktop dialog branch; standardizes import flow to modal bottom sheet with new header/copy. |
| app/lib/widgets/add_book/add_book_choice_sheet.dart | Removes desktop dialog branch; standardizes choice flow to modal bottom sheet with updated copy. |
| app/lib/providers/preferences_provider.dart | Updates internal section comment/labeling to match “Storage” naming. |
| app/lib/pages/profile_page.dart | Updates Profile section labels/nav ordering and moves About section placement. |
| app/lib/pages/goals_page.dart | Unifies Goals empty state rendering via EmptyState across mobile/desktop layouts. |
| app/lib/pages/book_edit_page.dart | Implements responsive desktop pane logic and reorders metadata controls within the form pane. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ), | ||
| ), | ||
| ) | ||
| : _buildEmptyState(context), |
Comment on lines
+244
to
247
| Text( | ||
| 'EPUB, PDF, AZW3, MOBI, CBZ/CBR', | ||
| style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurfaceVariant), | ||
| ), |
Comment on lines
+279
to
+286
| Widget _buildPendingContent(Widget child) { | ||
| return SizedBox( | ||
| key: const Key('import-pending-content'), | ||
| width: double.infinity, | ||
| height: _pendingContentHeight, | ||
| child: Center(child: child), | ||
| ); | ||
| } |
Comment on lines
+23
to
+27
| - Format list: `EPUB, PDF, AZW3, MOBI, CBZ/CBR` | ||
| - Prompt: `Select a digital book file` | ||
|
|
||
| The offline-storage explanation and `Browse files` action remain unchanged. | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces several UI and UX improvements across the app, focusing on consistency, responsive layouts, and code simplification. The main highlights include a responsive redesign of the Book Edit page for better desktop and mobile experiences, a refactor of the Goals page to provide a unified empty state, updates to the Profile page for clearer section labeling, and simplification of the Add Book flow to always use a bottom sheet. Additionally, some minor cleanups and improvements to code organization and theming are included.
Responsive Layouts and UI Consistency
book_edit_page.dart) now uses a responsive layout: on wide screens, the cover and form are shown side-by-side with clearly defined pane widths; on smaller screens, they stack vertically. Helper methods were introduced to organize the code and ensure consistent spacing and structure. [1] [2]goals_page.dart) now uses a unified and improved empty state, shown both on mobile and desktop when there are no goals, using the sharedEmptyStatewidget. The logic for displaying goals versus the empty state is streamlined for both layouts. [1] [2] [3] [4] [5] [6] [7]Theming and Section Label Updates
profile_page.dart) updates section headers and navigation labels for clarity and brevity (e.g., "Storage & sync" → "Storage", "Privacy & data" → "Privacy"). The About section is repositioned for better organization. [1] [2] [3] [4] [5] [6] [7]preferences_provider.dart) is updated to match the new section naming ("Storage & sync" → "Storage"). [1] [2]Add Book Flow Simplification
add_book_choice_sheet.dart) now always uses a modal bottom sheet, regardless of platform, simplifying the user experience and code. The subtitle for importing books is updated for accuracy. [1] [2] [3]Book Edit Page Metadata Section Refactor
Minor Cleanups
These changes collectively improve the user interface, maintainability, and overall experience of the app.