Skip to content

Add photo list display#4113

Merged
ildyria merged 2 commits intomasterfrom
photo-list-display
Feb 24, 2026
Merged

Add photo list display#4113
ildyria merged 2 commits intomasterfrom
photo-list-display

Conversation

@ildyria
Copy link
Member

@ildyria ildyria commented Feb 24, 2026

Fixes #4055

Summary by CodeRabbit

Release Notes

  • New Features
    • List view layout for photos with metadata display (title, date, type, size, rating) and layout toggle control, available in 18+ languages.

@ildyria ildyria requested a review from a team as a code owner February 24, 2026 13:21
@coderabbitai
Copy link

coderabbitai bot commented Feb 24, 2026

📝 Walkthrough

Walkthrough

This 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

Cohort / File(s) Summary
Documentation & Planning
docs/specs/4-architecture/features/014-photo-list-view/plan.md, spec.md, tasks.md
Comprehensive feature specification with plan document outlining 11 increments (I1–I11), full specification with UI mockups and requirements, and task-tracking scaffold for implementation verification across components, tests, and documentation.
Language & Translations
lang/ar/gallery.php, lang/bg/gallery.php, lang/cz/gallery.php, lang/de/gallery.php, lang/el/gallery.php, lang/en/gallery.php, lang/es/gallery.php, lang/fa/gallery.php, lang/fr/gallery.php, lang/hu/gallery.php, lang/it/gallery.php, lang/ja/gallery.php, lang/nl/gallery.php, lang/no/gallery.php, lang/pl/gallery.php, lang/pt/gallery.php, lang/ru/gallery.php, lang/sk/gallery.php, lang/sv/gallery.php, lang/vi/gallery.php, lang/zh_CN/gallery.php, lang/zh_TW/gallery.php
Added new translation key layout.list with localized list view labels across all 22 supported language files; single-line additions following consistent structure.
New List Components
resources/js/components/gallery/albumModule/PhotoListItem.vue, resources/js/components/gallery/albumModule/PhotoListView.vue
PhotoListItem renders individual photo entries with thumbnail, metadata (title, date, type badges, filesize, rating), and optional contextual badges (cover, header). PhotoListView container handles selection logic with modifier-key support and event forwarding to parent. Both integrate with Pinia stores and support accessibility.
Component Integration
resources/js/components/gallery/albumModule/PhotoThumbPanelControl.vue, resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue
PhotoThumbPanelControl adds new list toggle button mirroring existing layout controls. PhotoThumbPanelList conditionally renders PhotoListView when layout is 'list', falling back to thumbnail grid for other layouts; forwards all events without altering semantics.
State Management & Layout Logic
resources/js/stores/LayoutState.ts, resources/js/layouts/PhotoLayout.ts
LayoutState introduces ExtendedPhotoLayoutType to include 'list' variant, adds listClass getter with active/inactive styling, and refines hover-stroke behavior. PhotoLayout adds early-return branch for 'list' layout to apply auto height and clear inline positioning styles, bypassing standard layout algorithm.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Poem

🐰 A list of photos hops into view,
With titles, dates, and badges too!
The toggle switches layouts with grace,
Twenty tongues translate this place,
Component harmony makes it true!
Thump-thump for Feature 014! 🎉

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.

✏️ 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 | 🟡 Minor

Pre-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: align is computed but unused for the "list" branch.

The align variable on line 30 is always computed even when layout is "list", which returns before using it. Consider moving the early return above the align computation 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: Unused toggleBuyMe emit declaration.

toggleBuyMe is declared in defineEmits but is never emitted anywhere in this component. Either remove it or wire it to a handler from PhotoListItem.

docs/specs/4-architecture/features/014-photo-list-view/plan.md (1)

449-452: Missing trailing hr + 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 trailing hr + 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.

BASE ends with a trailing space and HOVER_STROKE starts 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.vue already includes aria-label, role="row", and tabindex="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

📥 Commits

Reviewing files that changed from the base of the PR and between f9523a4 and a2d9a4b.

📒 Files selected for processing (31)
  • docs/specs/4-architecture/features/014-photo-list-view/plan.md
  • docs/specs/4-architecture/features/014-photo-list-view/spec.md
  • docs/specs/4-architecture/features/014-photo-list-view/tasks.md
  • lang/ar/gallery.php
  • lang/bg/gallery.php
  • lang/cz/gallery.php
  • lang/de/gallery.php
  • lang/el/gallery.php
  • lang/en/gallery.php
  • lang/es/gallery.php
  • lang/fa/gallery.php
  • lang/fr/gallery.php
  • lang/hu/gallery.php
  • lang/it/gallery.php
  • lang/ja/gallery.php
  • lang/nl/gallery.php
  • lang/no/gallery.php
  • lang/pl/gallery.php
  • lang/pt/gallery.php
  • lang/ru/gallery.php
  • lang/sk/gallery.php
  • lang/sv/gallery.php
  • lang/vi/gallery.php
  • lang/zh_CN/gallery.php
  • lang/zh_TW/gallery.php
  • resources/js/components/gallery/albumModule/PhotoListItem.vue
  • resources/js/components/gallery/albumModule/PhotoListView.vue
  • resources/js/components/gallery/albumModule/PhotoThumbPanelControl.vue
  • resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue
  • resources/js/layouts/PhotoLayout.ts
  • resources/js/stores/LayoutState.ts

@ildyria ildyria merged commit 85da487 into master Feb 24, 2026
44 checks passed
@ildyria ildyria deleted the photo-list-display branch February 24, 2026 16:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create a list view for photos

1 participant