Repository navigation
feat: align Gallery UI with desktop - #661
Merged
Merged
Conversation
Reviewer's GuideThis PR brings the web Gallery in line with the desktop redesign by updating its visual system and settings hierarchy, adding shared-format grouping and group-aware creation/search/collapse behavior, implementing accessible cover repositioning with persistence and read-only handling, and validating the changes through expanded unit tests plus a real-component Chromium fixture. Sequence diagram for Gallery cover repositioningsequenceDiagram
actor User
User->>GalleryCardToolbar: click gallery-card-reposition
GalleryCardToolbar->>GalleryViewProvider: begin
GalleryViewProvider->>GalleryCard: activate reposition session
User->>GalleryCard: ArrowUp or drag cover
GalleryCard->>GalleryPreview: render draft offset
alt Save
User->>GalleryCardToolbar: click gallery-cover-save
GalleryCard->>Yjs: useUpdateRowMetaDispatch
Yjs-->>GalleryCard: persist RowMetaKey.CoverId
else Cancel or Escape
User->>GalleryCardToolbar: click gallery-cover-cancel
GalleryCard->>GalleryCard: discard draft offset
else Open another card
GalleryViewProvider->>GalleryCard: save previous session
GalleryCard->>Yjs: useUpdateRowMetaDispatch
end
State diagram for Gallery card interaction modesstateDiagram-v2
[*] --> Peekable
Peekable --> Repositioning: click gallery-card-reposition
Repositioning --> Peekable: gallery-cover-cancel
Repositioning --> Peekable: Escape
Repositioning --> Peekable: gallery-cover-save
Repositioning --> Repositioning: begin another card / save previous
Peekable --> ReadOnlyPeek: readOnly
ReadOnlyPeek --> PeekOpened: click gallery-card-peek
PeekOpened --> ReadOnlyPeek: close peek
Flow diagram for grouped Gallery rendering and row creationflowchart TD
Configure[Configure Gallery grouping] --> Grouping[Load shared grouping state]
Grouping --> Filter[Filter groups and rows by search query]
Filter --> Collapse{Group collapsed?}
Collapse -->|Yes| Header[Render group header only]
Collapse -->|No| Cards[Render group cards]
Cards --> NewRow[Create row in current group]
Header --> Expand[Expand group]
Expand --> Cards
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
- Page grouped galleries per group so "Load more" grows the group it was clicked in
- Keep the cover drag preview inside GalleryCardCover so pointer moves re-render only the cover
- Replace render-time ref writes with a shared useLatest hook
- Resolve the compact-mode preference per view instead of relying on a provider key
- Share the submenu pointer guard between Layout and the Gallery layout options
- Desktop parity: "Gallery" caption above the layout options, 200px card menu, "More" tooltip, 20px document indicator, "No groups for {field}" empty state, hint pill and hover alphas
- Fix DatabaseViews tests that mocked ListGroupingContext without useSyncListGroupingMetadata
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
- Save and Cancel in the reposition bar use 14px medium text at 64px width; Save gets the 4px radius and 8px side padding from the Figma floating action bar - The "Drag image to reposition" hint is a 40% black pill with fully opaque text, as in Figma node 7438:222959 - The "Gallery" caption above the layout options uses the Caption_S/Enhanced weight (500) Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Web now follows the Figma gallery (Database file, node 7404:109352). Desktop differences are listed in docs/gallery-view-figma-parity.md. - Cards: 12px radius, 16px gaps, 16:9 covers, layer-02 surface, hover border instead of a lifted shadow, wrapping 500-weight titles, 8px title gap, 12px compact spacing, person names only for one person - Columns follow the Figma size ranges (Small 200, Medium 260, Large 361 minimum widths) - Toolbar: Reposition, Rename, More with the Figma rename icon; the More menu is 240px with Copy link, Duplicate, Delete; no Peek button, since clicking the card opens the row - Groups: Figma header styling, Hide group and Delete with the Delete group confirmation, New group for select fields that stays visible while empty, and New page in the last row's free slot - New page tile is transparent; footer icons use icon/tertiary - Layout settings row shows the Gallery icon - Fix gallery e2e helpers and assertions that still targeted the pre-branch settings submenu Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The row peek was keyed by database and row id, so previous/next remounted the whole peek. The side panel was hidden and replayed its entrance animation, and a center peek choice fell back to the view's default (side peek for grid, board, gallery and list). Key the peek by database only so row navigation swaps the content in place, matching Desktop AppFlowy-Premium#1495. The scroller is keyed by row so each row still starts at the top. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
AI chat specs fail with Cloud reporting only "AI service is temporarily unavailable" because http://ai:5001 is unreachable; the AI container has already exited, but its logs were never collected. Save them, plus the container exit states, before the stack is torn down. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Cloud-Premium #1441 moved the AI service into Cloud, and from Cloud 0.20.1 the published appflowy_ai_premium:latest-amd64 expects Cloud's shared migrations to have created its schema. CI pins Cloud to a pre-#1441 revision, so the new AI image exits with "AI database schema is missing (af_ai_registry_bootstrap_state)", Cloud rejects AI chat creation as "AI service is temporarily unavailable", and every AI chat spec fails. Pin the last standalone AI release (0.13.5), which applies its own migrations, until CLOUD_REVISION moves past #1441. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Cloud-Premium #1441 moved the AI service into Cloud, which now owns the AI schema, so the AI image must come from the same revision as Cloud. Move the backend from the custom ci-web-row-list-9563cf767ef1 build to the 0.20.2 release, take the AI image from CLOUD_VERSION instead of a separate tag, and verify its revision with the other Rust images. 0.20.2 includes atomic row creation (Cloud-Premium #1375); the List field-order repair (#1372) that the custom build carried is not released. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The e2e spec still asserted that previous/next demotes center peek to side peek. Assert the new contract instead: the mode persists while the peek is open, the next opening starts in side peek again, and swapping rows never hides the side panel (the old per-row remount toggled its hidden attribute twice and replayed the entrance animation). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
With Cloud 0.20.2's larger seeded workspace, "Database 1 (Copy)" is appended below the visible sidebar, so the spec's forced click landed on the sidebar footer's Trash button instead. Use openCopiedPage, which falls back to the copy's own route when the sidebar click misses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Pull latest-amd64 for Cloud, Worker, Search and AI, and resolve the source revision behind that tag at the start of each test job, so the Cloud-Premium checkout (compose files, deploy.env, seed snapshot) always matches the images. The image-revision check still rejects a mixed set, for example while a release is being published. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…-parity Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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.
Description
Web Gallery now follows the merged desktop redesign in AppFlowy-Premium #1493 and its Figma design.
Validation
pnpm type-check, changed-source ESLint, andpnpm buildpassed.pnpm exec playwright test playwright/e2e/database/gallery-desktop.spec.ts --workers=1. The fixture runs the real components and Yjs dispatches without a server account.Feature Preview
Captured from the local browser fixture with built-in sample covers.
Light mode
Dark mode
Layout settings
Grouped Gallery
Checklist
General
Testing
Feature-Specific
Summary by Sourcery
Bring the Web Gallery experience into parity with the desktop redesign, including its presentation, controls, grouping workflows, and cover editing behavior.
New Features:
Bug Fixes:
Enhancements:
Tests: