refactor(cuesheet): improve image scrolling

[cpvalente]

No description provided.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 310e8c24-a31b-4f8d-9868-34016dac20fe

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.}

[Copilot]

🔵 Needs a closer look

There are concrete security/performance regressions to address (scheme validation for window.open, and restoring lazy-loading behavior for images).

Pull request overview

This PR refactors cuesheet image handling to reduce table layout shifting during scroll (virtualized rows) and to improve URL validation/feedback for image sources.

Changes:

• Add isValidImageSource validation (http/https) with UI feedback for rejected inputs.
• Cache previously loaded image dimensions and reserve space on re-mount to prevent row-height shifts.
• Add tests for URL validation and the image-dimensions LRU cache, and pass a column label through for alt text.

File summaries

File	Description
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx	Adds URL validation, load/error state, reserved-space rendering using remembered dimensions, and alt text support.
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss	Adds styling for invalid input state and user-visible error/rejection messages.
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx	Passes fieldLabel into EditableImage for accessibility (alt).
apps/client/src/views/cuesheet/tests/EditableImage.test.ts	Adds unit tests for isValidImageSource.
apps/client/src/common/utils/imageDimensions.ts	Introduces an in-memory (LRU-capped) cache for image dimensions to support reserved-space rendering.
apps/client/src/common/utils/tests/imageDimensions.test.ts	Adds tests for remembering dimensions and LRU eviction behavior.

Review details

Suppressed comments (3)

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx:81

• The validation error message says "(https://...)" but isValidImageSource accepts both http and https; this is misleading for users who paste an http URL and see it accepted.

        {isRejected && <span className={style.message}>Images are referenced by link (https://...)</span>}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx:119

• The previous implementation used loading='lazy', but the new <img> removed it. In a table view with many images, this can cause unnecessary network/CPU work and degrade scrolling performance.

        <img
          src={initialValue}
          alt={fieldLabel}
          className={style.image}
          onLoad={(event) => {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx:58

• openInNewTab opens whatever string is stored in initialValue; since this value can come from persisted data, it should be constrained to http(s) before calling window.open to avoid opening unexpected/unsupported URL schemes.

This issue also appears in the following locations of the same file:

• line 81
• line 115

  const openInNewTab = () => {
    if (initialValue) {
      window.open(initialValue, '_blank', 'noopener,noreferrer');
    }
  };

• Files reviewed: 6/6 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.