Add front-end

[ildyria]

Summary by CodeRabbit

• New Features

  • Added a faster, cached album browser with breadcrumbs, root navigation, thumbnails, and virtualized selections.
  • Updated Move, Fix Tree, and Bulk Album Edit for the new album-listing experience.
  • Bulk editing now searches the complete album set and supports broader selection.
  • Refreshed the admin dashboard with reusable statistic and navigation tiles.

• Bug Fixes

  • Album listings refresh after relevant album changes and account transitions.
  • Thumbnail loading safely handles cancellation and unavailable assets.

• Style

  • Updated dashboard icons and simplified document markup.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds a flag-gated v3 album-list flow for v8 consumers. It introduces shared album state, nested-tree operations, cached thumbnails, picker integration, cache invalidation, Fix Tree and Bulk Album Edit rewiring, reusable admin tile components, and root markup cleanup.

Changes

Album Listing v3

Layer / File(s)	Summary
Contracts and feature flag docs/specs/4-architecture/features/058-album-listing-v3-adoption/..., docs/specs/4-architecture/open-questions.md, resources/js/lychee.d.ts, resources/js/services/..., resources/js/stores/LycheeState.ts, package.json	The specification, API types, v3 service, URL helper, initialization state, and WASM dependency define the STRUCT_OF_ARRAY_ENABLED flow.
Shared album state and thumbnails resources/js/stores/AlbumListState.ts, resources/js/services/thumb-asset-service.ts, resources/js/v8/components/thumbs/Thumb.vue	The shared store reconstructs album trees and derives exclusions and breadcrumbs. Thumbnail loading uses caching, cancellation, object URLs, and placeholders.
Picker integration and cache invalidation resources/js/v8/components/forms/album/..., resources/js/v8/components/forms/auth/LoginForm.vue, resources/js/v8/components/forms/gallery-dialogs/..., resources/js/v8/components/modals/..., resources/js/v8/menus/LeftMenu.vue, resources/js/v8/views/RegisterPage.vue	The picker selects the v2 or v3 loader, renders structured options, handles root targets, and invalidates album state after identity and album mutations.
Fix Tree and Bulk Album Edit resources/js/v8/views/FixTree.vue, resources/js/v8/views/BulkAlbumEdit.vue, resources/js/v8/composables/album/treeOperations.ts	Fix Tree consumes struct-of-arrays data through the existing WASM pipeline. Bulk Album Edit loads the full set once and performs filtering, pagination, and selection locally.
Scenario and delivery scope docs/specs/4-architecture/features/058-album-listing-v3-adoption/plan.md, docs/specs/4-architecture/features/058-album-listing-v3-adoption/tasks.md	The plans expand implementation increments, scenarios, verification gates, exit criteria, and v8-only scope.

Admin dashboard components

Layer / File(s)	Summary
Reusable admin tile components resources/js/v8/components/admin/AdminStatTile.vue, resources/js/v8/components/admin/AdminTileLink.vue, resources/js/v8/components/icons/PiMiniIcon.vue	Reusable components render statistics, badges, translated labels, internal routes, external links, keyboard handling, and optional icon fills.
Dashboard wiring and icons resources/js/v8/views/admin/AdminDashboard.vue, resources/js/v8/composables/useAdminTiles.ts	The dashboard delegates tile rendering and navigation to the new components. Tile icons use Lucide identifiers.

Markup cleanup

Layer / File(s)	Summary
Root HTML cleanup resources/views/vueapp.blade.php	Legacy XHTML, JSF, and PrimeFaces namespace attributes are removed from the root element.

Estimated code review effort: 4 (Complex) | ~60 minutes

Merge Risk: 🟡 Moderate · up to b9463

The PR changes album-tree requests and related editing UI, but Fix Tree still uses the v3 request when the feature flag is off, so the default behavior may be broken; merge should wait for that path to be corrected or explicitly accepted. The type-contract and stale-breadcrumb issues are bounded follow-ups.

Poem

I hop through arrays, neat and bright,
Cached albums stay in tidy flight.
Thumbs load, trees align,
Root paths and breadcrumbs shine.
The rabbit celebrates the design.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

❌ Patch coverage is 87.50000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 91.30%. Comparing base (dd8a134) to head (ceeb27f).

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​lychee-org/​nested-set-checker-wasm@​1.0.0 ⏵ 2.0.0	+3			+3

View full report

[coderabbitai]

Actionable comments posted: 10

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

resources/js/v8/views/BulkAlbumEdit.vue (1)

573-578: 🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win

Invalidate the shared album list after a successful rename.

saveTitle() updates albums and fullAlbums, but it does not invalidate AlbumListState. SearchTargetAlbum.vue builds breadcrumbs from that store, so it can display the old title after this rename succeeds.

Call useAlbumListStore().invalidate() in the rename success path.

🧹 Nitpick comments (1)

resources/js/v8/components/admin/AdminTileLink.vue (1)

11-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use a PrimeVue component for the badge.

This new component introduces Nuxt UI UChip. Replace it with the project-approved PrimeVue component.

As per coding guidelines: “Use TypeScript in composition API for Vue3 and use PrimeVue for UI components.”

Source: Coding guidelines

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1d29eb21-930f-4156-a77b-21d0b7af5203

📥 Commits

Reviewing files that changed from the base of the PR and between f97521b and fa47a95.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (35)

• docs/specs/4-architecture/features/058-album-listing-v3-adoption/plan.md
• docs/specs/4-architecture/features/058-album-listing-v3-adoption/spec.md
• docs/specs/4-architecture/features/058-album-listing-v3-adoption/tasks.md
• docs/specs/4-architecture/open-questions.md
• package.json
• resources/js/lychee.d.ts
• resources/js/services/album-list-v3-service.ts
• resources/js/services/constants.ts
• resources/js/services/thumb-asset-service.ts
• resources/js/stores/AlbumListState.ts
• resources/js/stores/LycheeState.ts
• resources/js/v8/components/admin/AdminStatTile.vue
• resources/js/v8/components/admin/AdminTileLink.vue
• resources/js/v8/components/forms/album/AlbumDelete.vue
• resources/js/v8/components/forms/album/AlbumMove.vue
• resources/js/v8/components/forms/album/AlbumVisibility.vue
• resources/js/v8/components/forms/album/SearchTargetAlbum.vue
• resources/js/v8/components/forms/album/Unlock.vue
• resources/js/v8/components/forms/auth/LoginForm.vue
• resources/js/v8/components/forms/gallery-dialogs/AlbumMergeDialog.vue
• resources/js/v8/components/forms/gallery-dialogs/DeleteDialog.vue
• resources/js/v8/components/forms/gallery-dialogs/MoveDialog.vue
• resources/js/v8/components/icons/PiMiniIcon.vue
• resources/js/v8/components/maintenance/FixTreeLine.vue
• resources/js/v8/components/modals/ImportFromServer.vue
• resources/js/v8/components/modals/WebauthnModal.vue
• resources/js/v8/components/thumbs/Thumb.vue
• resources/js/v8/composables/album/treeOperations.ts
• resources/js/v8/composables/useAdminTiles.ts
• resources/js/v8/menus/LeftMenu.vue
• resources/js/v8/views/BulkAlbumEdit.vue
• resources/js/v8/views/FixTree.vue
• resources/js/v8/views/RegisterPage.vue
• resources/js/v8/views/admin/AdminDashboard.vue
• resources/views/vueapp.blade.php

💤 Files with no reviewable changes (1)

• resources/js/v8/components/maintenance/FixTreeLine.vue

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

[coderabbitai]

🧹 Nitpick comments (1)

resources/js/services/thumb-asset-service.ts (1)

88-93: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Align the API base URL rule.

Line 89 uses Constants.getApiUrlV3() instead of the required Constants.getApiUrl(). Since this request targets a v3 endpoint, update the coding guideline to allow getApiUrlV3() for v3 services, or change the implementation if the endpoint is available through the required base URL.

As per coding guidelines, “Axios requests should be in the services/ directory and use ${Constants.getApiUrl()} to specify the base URL”.

Source: Coding guidelines

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a6059748-c869-4682-a355-cc9c12fa21a7

📥 Commits

Reviewing files that changed from the base of the PR and between fa47a95 and b94638e.

📒 Files selected for processing (3)

• resources/js/services/thumb-asset-service.ts
• resources/js/stores/AlbumListState.ts
• resources/js/v8/components/admin/AdminTileLink.vue

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.