docs: S2 docs layout + general improvements

[reidbarber]

• Add Adobe copyright footer
• Make the SideNav / ToC widths static
• Fix page min height on mobile
• Fix search menu closing when opening links in new tab (listen for custom navigation event)
• Show error toast if client route and error page 404 (lost connection or server down)
• Show error toast if clipboard copies fail
• Move the markdown copy button into area below table of contents
• Add "Open in ChatGPT" and "Open in Claude" links to markdown menu
• Add skeleton page loading (+ pre-filled page title, + optimistically render sidebar and ToC )
• Added prefetching via pointerover and focus listeners
• Consolidated search and tag logic between desktop and mobile search menus

Fixes from testing:

• Search logic now is startWith > includes > tags
• Added "password" type to Realtime validation example in React Spectrum Forms docs
• When TagGroup in search menu is focused, 'ESC' should close the search menu
• Hide Blog and Releases listing pages in search menu
• fixed icon sizes in the drag and drop blog post example
• Fixed scrolling fade effect in ToC

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[majornista]

I think we need to add scroll-padding-block-start: 60px; scroll-padding-block-end: 6px; in the SearchMenu where we have a TagGroup that uses position: sticky that sits on top of the ComponentCardView. We may need to do this with break points, because when the page is resized or scaled, the TagGroup can wrap, which means the scroll-padding-block-start will need to be larger.

react-spectrum/packages/dev/s2-docs/src/SearchMenu.tsx

Line 356 in ab5e6f3

<div className={style({height: 'full', overflow: 'auto', paddingX: 16, paddingBottom: 16})}>

[snowystinger]

It's strange, there's still a delay moving to the new page with the skeleton. Then the skeleton appears and disappears so fast that it doesn't feel like it's helping with the transition.

[devongovett]

@majornista fyi I removed the sticky positioning in this PR: #9135

[devongovett]

nice! would be cool if we could get optimistic updates working for the sidenav, so when you click a link the selection moves instantly as soon as the skeleton appears. might be able to do that with useOptimistic. ideally the skeleton would also not appear at all if the page load is fast.

[devongovett]

Question for the team: do we prefer this at the bottom of the page or at the top (i.e. above "on this page")? Most sites seem to have it at the top. I don't mind the bottom but it's a little less prominent. Also moves around a bit depending on the length of the toc.

[reidbarber]

My reasoning was that the table of contents is more useful most of the time, so it's better when scanning to read that first. Also if we end up adding more actions (feedback button, etc.) it might crowd the top. Definitely open to changing this though.

Also for pages with many sections it renders at the bottom and the ToC has scrolling.

[LFDanLu]

IMO I like it at the bottom, but it really depends on how prominent we want to make it

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[snowystinger]

Looks like title string matching isn't be preferred over tags? i think it's matching "info" in tooltip over "fo" in "forms"

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs