Add front-end - #4719
Conversation
…to-struct-of-array-frontend
📝 WalkthroughWalkthroughFeature 065 adds a flag-gated SoA photo listing path. It introduces v3 photo fetching, tile adaptation, analytic virtualization across five layout modes, on-demand details, virtualized renderers, rating-aware layout, drag-selection geometry, and supporting specification records. ChangesPhoto SoA frontend adoption
Estimated code review effort: 4 (Complex) | ~45 minutes Merge Risk: 🟡 Moderate · up to The new SoA gallery can replace filtered results with the full album, initially show incomplete tag data, and block keyboard users from opening non-list tiles. These issues should be resolved before merge, alongside the contradictory verification records. Poem
🚥 Pre-merge checks | ❌ 1❌ Failed checks (1 warning)
Full details: Docstring CoverageExplanation Docstring coverage is 76.92% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 13 functions across 7 files. (10 skipped: 10 unsupported.) Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| * typescript:transform` run in a dev environment), so hand-transcribed here | ||
| * from the PHP source directly. Replace with the generated | ||
| * `App.Http.Resources.V3.PhotoBucketResource` type once that command has | ||
| * been run. |
|
@coderabbitai review |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Team
Run ID: 88d877ad-f859-4f70-a846-01f5cc5d092b
📒 Files selected for processing (17)
docs/specs/4-architecture/features/065-photo-listing-struct-of-arrays-adoption/plan.mddocs/specs/4-architecture/features/065-photo-listing-struct-of-arrays-adoption/spec.mddocs/specs/4-architecture/features/065-photo-listing-struct-of-arrays-adoption/tasks.mddocs/specs/4-architecture/open-questions.mddocs/specs/4-architecture/roadmap.mdresources/js/composables/album/dragAndSelect.tsresources/js/services/album-service.tsresources/js/services/photo-children-v3-service.tsresources/js/stores/AlbumState.tsresources/js/stores/PhotoState.tsresources/js/v8/components/gallery/albumModule/AlbumPanel.vueresources/js/v8/components/gallery/albumModule/Virtualized/PhotoGridVirtual.vueresources/js/v8/components/gallery/albumModule/Virtualized/PhotoListItemVirtual.vueresources/js/v8/components/gallery/albumModule/Virtualized/PhotoThumbPanelVirtual.vueresources/js/v8/components/gallery/albumModule/Virtualized/PhotoThumbVirtual.vueresources/js/v8/composables/photo/analyticPhotoLayout.tsresources/js/v8/utils/adaptPhotoTile.ts
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
| if (this.albumId !== requestedAlbumId) { | ||
| return; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Prevent stale unfiltered results from replacing filtered results.
When loadPhotosV3() is pending, a tag or person filter starts a replacement loadPhotos() request for the same album. The album-ID guard remains valid, so the older v3 response can overwrite the filtered photo state. Use a shared photo-load revision for replacement loads in both methods. Apply results and loading-state changes only when the captured revision is current. Do not invalidate concurrent background prepend loads.
| void albumStore.loadPhotoDetails(selectedPhotosIds.value); | ||
| } | ||
| toggleTag(); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Open the tag dialog after selected-photo details resolve.
When albumStore.isPhotoSoaActive is true, toggleTag() can render the dialog while SoA tiles still contain incomplete tag data. Chain toggleTag from loadPhotoDetails() and return from that branch. The tag dialog reacts to later in-place merges, but delaying the open prevents the initial incomplete state. Keep toggleLicense() unchanged because it does not read photo.license.
Proposed fix
toggleTag: () => {
if (albumStore.isPhotoSoaActive) {
- void albumStore.loadPhotoDetails(selectedPhotosIds.value);
+ void albumStore.loadPhotoDetails(selectedPhotosIds.value).then(toggleTag);
+ return;
}
toggleTag();
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| void albumStore.loadPhotoDetails(selectedPhotosIds.value); | |
| } | |
| toggleTag(); | |
| void albumStore.loadPhotoDetails(selectedPhotosIds.value).then(toggleTag); | |
| return; | |
| } | |
| toggleTag(); |
| onMounted(async () => { | ||
| await initLayouts(); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Replace the asynchronous lifecycle callback.
Line 144 uses an async callback and Line 145 uses await. Call initLayouts().then(...) and set ready.value in the callback.
As per coding guidelines: “Do not use await async calls in Vue3, use .then() instead.”
Source: Coding guidelines
| @@ -0,0 +1,203 @@ | |||
| <template> | |||
| <a | |||
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Make the tile keyboard reachable.
Line 2 creates an anchor without href. The tile is not reachable by keyboard navigation. Keyboard users cannot open or select photos in non-list layouts.
Add keyboard focus and map Enter and Space to the root click action.
|
1 participant
Summary by CodeRabbit
New Features
Documentation