Conversation
📝 WalkthroughWalkthroughThis pull request introduces Feature 014: Photo List View Toggle, a front-end feature enabling users to switch between thumbnail and list-based photo views. It adds specification and planning documents, creates new Vue components for list rendering, integrates list view controls, extends state management to support the new layout type, updates styling logic, and provides translations across 22 languages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Poem
🚥 Pre-merge checks | ❌ 1❌ Failed checks (1 warning)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
lang/de/gallery.php (1)
244-244:⚠️ Potential issue | 🟡 MinorPre-existing typo:
'rename'maps to'v'.This is not introduced by this PR, but worth flagging:
'rename' => 'v'appears to be a leftover keystroke rather than a German translation. The expected value would be'Umbenennen'.
🧹 Nitpick comments (7)
resources/js/layouts/PhotoLayout.ts (1)
30-46: Minor:alignis computed but unused for the "list" branch.The
alignvariable on line 30 is always computed even when layout is"list", which returns before using it. Consider moving the early return above thealigncomputation to avoid the dead code path, or simply leave as-is since the cost is negligible.Also, a slightly cleaner way to get element children:
🔧 Optional simplification
const align = isLTR() ? "left" : "right"; // For list view, reset the container height to auto and clear child inline styles if (layoutState.layout === "list") { photoListing.style.height = "auto"; // Clear positioning styles from children that were set by other layouts - const gridItems = [...photoListing.childNodes].filter((item) => item.nodeType === 1) as HTMLElement[]; - gridItems.forEach((item) => { + photoListing.querySelectorAll<HTMLElement>(":scope > *").forEach((item) => { item.style.position = ""; item.style.top = ""; item.style.left = ""; item.style.right = ""; item.style.width = ""; item.style.height = ""; }); return; }resources/js/components/gallery/albumModule/PhotoListView.vue (1)
26-31: UnusedtoggleBuyMeemit declaration.
toggleBuyMeis declared indefineEmitsbut is never emitted anywhere in this component. Either remove it or wire it to a handler fromPhotoListItem.docs/specs/4-architecture/features/014-photo-list-view/plan.md (1)
449-452: Missing trailinghr+ last-updated footer.As per coding guidelines, Markdown files should end with an
<hr>line followed by*Last updated: [date]*. The header metadata includes the date, but the footer is also required.📝 Suggested addition at the end of the file
4. **Persistence** – Add optional localStorage persistence for layout preference + +--- + +*Last updated: 2026-02-24*As per coding guidelines: "At the bottom of documentation files, add an hr line followed by 'Last updated: [date of the update]'".
docs/specs/4-architecture/features/014-photo-list-view/spec.md (1)
389-392: Missing trailinghr+ last-updated footer.Same as the plan document — add the required footer per coding guidelines.
📝 Suggested addition at the end of the file
4. List toggle button should use PrimeVue icons (pi-list) for consistency with album list view + +--- + +*Last updated: 2026-02-24*As per coding guidelines: "At the bottom of documentation files, add an hr line followed by 'Last updated: [date of the update]'".
resources/js/stores/LayoutState.ts (1)
5-8: Nit: double space in concatenated class strings.
BASEends with a trailing space andHOVER_STROKEstarts with a leading space, producing a double space when concatenated (e.g.,"...scale-150 group-hover:stroke-black..."). This is harmless for CSS but slightly messy.🧹 Optional cleanup
-const BASE = "my-0 w-5 h-5 mr-0 ml-0 transition-all duration-300 group-hover:scale-150 "; -const HOVER_STROKE = " group-hover:stroke-black dark:group-hover:stroke-white "; +const BASE = "my-0 w-5 h-5 mr-0 ml-0 transition-all duration-300 group-hover:scale-150"; +const HOVER_STROKE = " group-hover:stroke-black dark:group-hover:stroke-white";Then adjust the getter concatenation to add spaces where needed:
- return BASE + HOVER_STROKE + (this.layout === "square" ? "stroke-primary-400" : "stroke-neutral-400"); + return BASE + HOVER_STROKE + " " + (this.layout === "square" ? "stroke-primary-400" : "stroke-neutral-400");docs/specs/4-architecture/features/014-photo-list-view/tasks.md (2)
175-182: T-014-20 appears already implemented — mark it[x]?
PhotoListItem.vuealready includesaria-label,role="row", andtabindex="0"(lines 8-10 of the component). This task could be checked off, per the guideline to mark tasks as soon as they pass verification.As per coding guidelines: "Mark each task [x] in the feature's tasks.md as soon as it passes verification. Do not batch task completions."
114-136: Test tasks ordered after implementation tasks.The coding guidelines specify that task checklists should order "tests before code". Currently I7–I9 (test increments) follow I1–I6 (implementation increments). Consider whether re-ordering to place at least the unit test scaffolding/fixture tasks before or alongside their corresponding implementation tasks would better align with the guidelines for future features.
This isn't blocking for this PR since the plan was structured this way, but worth noting for consistency.
As per coding guidelines: "Maintain a per-feature tasks checklist… that mirrors the plan, orders tests before code."
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
docs/specs/4-architecture/features/014-photo-list-view/plan.mddocs/specs/4-architecture/features/014-photo-list-view/spec.mddocs/specs/4-architecture/features/014-photo-list-view/tasks.mdlang/ar/gallery.phplang/bg/gallery.phplang/cz/gallery.phplang/de/gallery.phplang/el/gallery.phplang/en/gallery.phplang/es/gallery.phplang/fa/gallery.phplang/fr/gallery.phplang/hu/gallery.phplang/it/gallery.phplang/ja/gallery.phplang/nl/gallery.phplang/no/gallery.phplang/pl/gallery.phplang/pt/gallery.phplang/ru/gallery.phplang/sk/gallery.phplang/sv/gallery.phplang/vi/gallery.phplang/zh_CN/gallery.phplang/zh_TW/gallery.phpresources/js/components/gallery/albumModule/PhotoListItem.vueresources/js/components/gallery/albumModule/PhotoListView.vueresources/js/components/gallery/albumModule/PhotoThumbPanelControl.vueresources/js/components/gallery/albumModule/PhotoThumbPanelList.vueresources/js/layouts/PhotoLayout.tsresources/js/stores/LayoutState.ts
Fixes #4055
Summary by CodeRabbit
Release Notes