Checklist: Autocomplete "See what's new" on URL navigation

code/core/src/manager/components/Focus/Focus.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { styled } from 'storybook/theming';
 
-import { useLocationHash } from '../useLocationHash';
+import { useLocationHash } from '../../hooks/useLocation';
 
 const FocusOutline = styled.div<{ active?: boolean; outlineOffset?: number }>(
   ({ theme, active = false, outlineOffset = 0 }) => ({

code/core/src/manager/hooks/useLocation.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+export const LocationMonitor = {
+  _currentHref: globalThis.window?.location.href ?? '',
+  _intervalId: null as ReturnType<typeof setInterval> | null,
+  _listeners: new Set<(location: Location) => void>(),
+
+  start() {
+    if (this._intervalId === null) {
+      this._intervalId = setInterval(() => {
+        const newLocation = globalThis.window.location;
+        if (newLocation.href !== this._currentHref) {
+          this._currentHref = newLocation.href;
+          this._listeners.forEach((listener) => listener(newLocation));
+        }
+      }, 100);
+    }
+  },
+
+  stop() {
+    if (this._intervalId !== null) {
+      clearInterval(this._intervalId);
+      this._intervalId = null;
+    }
+  },
+
+  subscribe(...listeners: Array<(location: Location) => void>) {
+    listeners.forEach((listener) => this._listeners.add(listener));
+    this.start();
+    return () => {
+      listeners.forEach((listener) => this._listeners.delete(listener));
+      if (this._listeners.size === 0) {
+        this.stop();
+      }
+    };
+  },
+};
+
+export const useLocationHash = () => {
+  const [hash, setHash] = useState(globalThis.window?.location.hash ?? '');
+  useEffect(() => LocationMonitor.subscribe((location) => setHash(location.hash)), []);
+  return hash.slice(1);
+};

code/core/src/manager/settings/Checklist/Checklist.tsx

@@ -15,7 +15,7 @@ import { styled } from 'storybook/theming';
 
 import { Focus } from '../../components/Focus/Focus';
 import type { ChecklistItem, useChecklist } from '../../components/sidebar/useChecklist';
-import { useLocationHash } from '../../components/useLocationHash';
+import { useLocationHash } from '../../hooks/useLocation';
 
 type ChecklistSection = {
   id: string;

code/core/src/shared/checklist-store/checklistData.tsx

@@ -30,6 +30,7 @@ import {
 import { SUPPORTED_FRAMEWORKS } from '../../cli/AddonVitestService.constants';
 import { ADDON_ID as ADDON_DOCS_ID } from '../../docs-tools/shared';
 import { TourGuide } from '../../manager/components/TourGuide/TourGuide';
+import { LocationMonitor } from '../../manager/hooks/useLocation';
 import type { initialState } from './checklistData.state';
 
 const CodeWrapper = styled.div(({ theme }) => ({
@@ -365,11 +366,10 @@ export const Primary: Story = {
           criteria: "What's New page is opened",
           action: {
             label: 'Go',
-            onClick: ({ api, accept }) => {
-              api.navigate('/settings/whats-new');
-              accept();
-            },
+            onClick: ({ api }) => api.navigate('/settings/whats-new'),
           },
+          subscribe: ({ accept }) =>
+            LocationMonitor.subscribe((l) => l.search.endsWith('/settings/whats-new') && accept()),
         },
       ],
     },