fix(post-composer): restore mention autocomplete suggestions

[dmnyc]

Summary

Typing @<name> in the new kind:1 post composer was not showing any mention suggestions at all — no dropdown, not even the "Searching..." state.

Root cause

PR #280 switched MentionDropdown to position: fixed to escape the composer's overflow container. Per the CSS spec, position: fixed is positioned against the viewport unless an ancestor has transform, filter, or perspective — in which case that ancestor becomes the containing block.

Modal.svelte's <dialog> uses Tailwind's -translate-x-1/2 -translate-y-1/2 (a permanent transform: translate(...)), so the dropdown's top / left values — computed from the caret's getBoundingClientRect() in viewport coordinates — were being interpreted relative to the dialog box. The dropdown was rendering with the correct state (verified via debug logs showing show=true, populated suggestions, the search timer firing), just painted far off-screen.

Fix

Portal MentionDropdown to document.body when rendered. It now lives outside the transformed dialog subtree, so position: fixed is correctly viewport-relative and the caret-based coordinates land where expected. ReplyComposer and every other call site benefit from this too.

Also drop a redundant double-assignment in PostComposer's on:input handler (also from #280) so the composer matches ReplyComposer's working pattern — the controller's onTextChange callback is already the single source of truth for composer text state.

Notes

• Stacked on fix(error-boundary): stop showing fatal UI for benign window errors #305 → Recipe editor UX: auto-save, add-by-URL, drag-reorder, markdown links #304. Once those two merge, this PR's diff collapses to a single commit across MentionDropdown.svelte and PostComposer.svelte.

Test plan

• Open the New Post modal, type @s — dropdown appears anchored to caret with matching profiles.
• Continue typing @seth — dropdown narrows to matches.
• Arrow-down / Enter selects a suggestion, pill renders in composer.
• Typing a space or Esc dismisses the dropdown without posting.
• Verify no regression in ReplyComposer (inline comment replies still work).
• Verify no regression in [nip19]/+page.svelte reply composer.

[Copilot]

Pull request overview

This PR restores mention autocomplete visibility in the post composer by portaling MentionDropdown to document.body so its position: fixed caret coordinates remain viewport-relative even inside transformed modals. The diff also includes several stacked UX fixes in the recipe editor and app shell.

Changes:

• Portal MentionDropdown to document.body and simplify PostComposer’s input handling to rely on the mention controller as the source of truth.
• Improve recipe editor UX (auto-save drafts, ensure markdown preview links open in new tabs, add media-by-URL, fix drag-reorder drop behavior).
• App-shell tweaks (suppress fatal UI for benign window errors, prevent dark-mode logo flash, version bump).

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/MentionDropdown.svelte	Portals dropdown to document.body to avoid transformed-modal containing-block issues.
src/components/PostComposer.svelte	Removes redundant state assignment in on:input, delegating to mention controller callbacks.
src/routes/create/+page.svelte	Adds auto-save state, signature-based change detection, and silent debounced draft saving.
src/lib/parser.ts	Forces target/_blank behavior to survive DOMPurify sanitization for markdown-rendered links.
src/components/MediaUploader.svelte	Adds a collapsible “Add images by URL” UI with basic URL validation and dedupe.
src/components/StringComboBox.svelte	Improves drag-and-drop reorder to support “drop after” (incl. last item) with visual indicators.
src/components/ErrorBoundary.svelte	Changes handling of window errors to log-only and removes the previous svelte:window binding.
src/components/Header.svelte	Adds logo marker classes for pre-Tailwind flash prevention.
src/components/DesktopSideNav.svelte	Adds logo marker classes for pre-Tailwind flash prevention.
src/app.html	Inlines early CSS to hide the incorrect theme logo before Tailwind loads.
package.json	Bumps app version.

Comments suppressed due to low confidence (1)

src/routes/create/+page.svelte:78

• onMount now continues running after goto('/login') (it isn't awaited/returned), so draft initialization + event listeners + auto-save arming can still happen briefly during redirect. Consider await goto('/login') and return (or just return after calling goto) to avoid side effects when the user isn't authenticated.

  onMount(async () => {
    if ($userPublickey == '') goto('/login');

    // Initialize draft store
    initializeDraftStore();

    // Check for draft ID in URL
    const draftId = $page.url.searchParams.get('draft');
    if (draftId) {
      loadDraftById(draftId);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

handleError() is no longer wired up to anything after removing <svelte:window on:error={handleError} />, so the component will never set error and will never render the fallback UI. If you still want to support the “programmatic CustomEvent path” described in the comment, add an explicit event listener that routes those CustomEvents to handleError (and keep the separate logging-only path for native ErrorEvents), or otherwise remove the dead error UI/state if the boundary is intended to be log-only now.

[Copilot]

draftSignature is assigned in a reactive statement but is never declared (no let draftSignature anywhere in the component). With TS strict this will fail compilation (draftSignature is not defined). Declare it in the <script> block (e.g., initialize to an empty string) before first use in onMount/runAutoSave and the reactive assignment.