Slice 2: Show “Panel is no longer available” overlay on info panels/forms

[fungairino]

Feature UX: use the provided UX mockup https://www.figma.com/file/iK3zlhXpXqjPCX8jgriynh/SideBar?type=design&node-id=1748-3224&mode=design&t=SjRFqEO49OZWGfmF-4

Engineering Considerations/Implementation Sketch

• Add a new stale boolean attribute to TemporaryPanelEntry and FormPanelEntry, and a new reducer method invalidatePanels , for updating all current forms and panels to stale = true
• Set up listener in the [ConnectedSidebar](https://github.com/pixiebrix/pixiebrix-extension/blob/83fd174a189408e7eb133b6b5f5d21851ef738f8/src/sidebar/ConnectedSidebar.tsx#L131-L130) for browser.webNavigation.onBeforeNavigate (note: checking that frameType is "outermost_frame" and the tabId is the one connected to the sidebar) that sets any temporary and form panels as stale using the sidebarSlice setPanels method.
• We will need to pass the connected tabId as a prop into the sidebar component
  Render the “Panel not available on this Page” overlay over the temporary and form panel body. Close button should trigger closing the panel.

Test Plan:

• Ensure that this not occur on SPA navigation (ex. on a github repo, switching from the Code to Pull Requests tab.
• If a link opens a new tab, the old tab’s sidebar panels should not be marked as stale
• Ensure that this occurs when refreshing the page
• Navigating via new link in the browser or following a link.

From: https://www.notion.so/pixiebrix/Phase-gracefully-handle-page-reload-navigation-in-the-Chromium-Side-Panel-0efdedb6c1e44b088e65106202e08c28?pvs=4#ec3a3eef571a4be988dcee641ee86759