🐛 Added explanatory message when linking to hidden/deleted comments

[kevinansfield]

ref https://linear.app/ghost/issue/BER-3324/

• scroll the page to the comments area when a permalink targets a hidden/deleted comment
• show a notice: "The linked comment is no longer available."

Before: No scroll or error message

After: Scroll to comments area, shows message:

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Bumps apps/comments-ui version to 1.3.6. Adds showMissingCommentNotice: boolean to the app context/state and initializes/updates it during permalink scroll-target resolution. Renders a "The linked comment is no longer available." notice in the content component and performs automatic scrolling (handling iframe resize when present). Updates e2e permalink tests to assert the notice and scroll behavior for missing permalinks. Adds the new i18n key across locale files.

Suggested reviewers

• rob-ghost
• peterzimon

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding an explanatory message when users link to hidden/deleted comments. It accurately reflects the primary functionality added.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the feature to show a notice when linking to hidden/deleted comments.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@apps/comments-ui/src/components/content/content.tsx`:
- Around line 140-154: Replace the cross-frame scrolling that calls
scrollToElement(container) inside the useEffect with the element's native
scrollIntoView API: when showMissingCommentNotice is true and
containerRef.current exists (inside the useEffect), call
container.scrollIntoView({ behavior: 'smooth', block: 'center' }) instead of
scrollToElement(container); keep the existing iframe-resize handling via
findContainingIframe and onIframeResize but ensure the callback passed to
onIframeResize calls container.scrollIntoView({ behavior: 'smooth', block:
'center' }) as well so scrolling works correctly across iframes.

In `@ghost/i18n/locales/fr/comments.json`:
- Line 72: The French locale entry for the key "The linked comment is no longer
available." in comments.json is empty; update that value to a proper French
translation such as "Le commentaire lié n'est plus disponible." by replacing the
empty string in the "The linked comment is no longer available." entry so French
users see the localized text (locate the key in
ghost/i18n/locales/fr/comments.json and edit the value).

🧹 Nitpick comments (1)

apps/comments-ui/src/components/content/content.tsx (1)

76-76: showMissingCommentNotice is never cleared — consider resetting on hash change.

Once showMissingCommentNotice is true, it persists for the component lifetime. If a user later clicks a valid comment permalink (triggering hashchange), the stale notice will remain visible alongside the newly highlighted comment. Consider dispatching a state reset in the hashchange handler (lines 103–117) when a valid comment is found.

[coderabbitai]

🧹 Nitpick comments (2)

apps/comments-ui/src/app.tsx (1)

198-206: fetchScrollTarget silently swallows all errors — consider logging.

The catch-all on line 203 returns null for any failure, including network errors or unexpected API responses. While this is safe (the UI falls back to showing the missing-comment notice), a transient network error would be indistinguishable from a genuinely missing comment. A console.warn would aid debugging without changing behavior.

Proposed change

     } catch {
+        // eslint-disable-next-line no-console
+        console.warn(`[Comments] Failed to fetch scroll target comment ${targetId}`);
         return null;
     }

apps/comments-ui/test/e2e/permalink.test.ts (1)

103-104: Consider extracting tallBodyHtml to a shared constant.

The same HTML string is duplicated across five tests. A module-level constant would reduce noise and make future changes (e.g., adjusting the height) a single-point edit.

Example

+const TALL_BODY_HTML = '<html><head><meta charset="UTF-8" /></head><body><div style="width: 100%; height: 1500px;"></div></body></html>';
+
 test.describe('Comment Permalinks', async () => {

Then replace all inline tallBodyHtml declarations with TALL_BODY_HTML.

Also applies to: 164-165, 188-189, 215-216, 252-253

[coderabbitai]

🧹 Nitpick comments (1)

apps/comments-ui/src/components/content/content.tsx (1)

169-173: Consider scrolling to the notice element rather than the comments container.

The containerRef (line 194) points to the comment-elements div, which sits below the notice, sorting form, and main form in the DOM. When scrollToElement(container) fires, the notice banner at lines 169–173 may end up above the visible viewport, especially if the forms/sorting UI add enough height between the notice and the comment list.

If the intent is for the user to see the notice immediately after scroll, attach the ref (or a separate ref) to the notice element itself, or to a wrapper encompassing both the notice and comments.

[weylandswart]

Looks good to me!