fix(stories): update footer navigation (#95582)

Follow-up to #95442, which updated sidebar and search routing behavior
but did not update the footer navigation.

This PR refactors the story footer cards to use the new URL scheme
rather than the old query scheme.

Author: natemoo-re

static/app/stories/view/storyFooter.tsx

@@ -1,51 +1,36 @@
 import styled from '@emotion/styled';
-import qs from 'query-string';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import {IconArrow} from 'sentry/icons';
-import {useStoryBookFilesByCategory} from 'sentry/stories/view/storySidebar';
-import type {StoryTreeNode} from 'sentry/stories/view/storyTree';
-import type {StoryDescriptor} from 'sentry/stories/view/useStoriesLoader';
-import {useStory} from 'sentry/stories/view/useStory';
 import {space} from 'sentry/styles/space';
-import {useLocation} from 'sentry/utils/useLocation';
 
-export function StoryFooter() {
-  const location = useLocation();
+import {useStoryBookFilesByCategory} from './storySidebar';
+import type {StoryTreeNode} from './storyTree';
+import {type StoryDescriptor} from './useStoriesLoader';
+import {useStory} from './useStory';
 
+export function StoryFooter() {
   const {story} = useStory();
-  const categories = useStoryBookFilesByCategory();
-  const pagination = findPreviousAndNextStory(story, categories);
-
-  const prevLocationDescriptor = qs.stringify({
-    ...location.query,
-    name: pagination?.prev?.story.filesystemPath,
-  });
-  const nextLocationDescriptor = qs.stringify({
-    ...location.query,
-    name: pagination?.next?.story.filesystemPath,
-  });
+  const stories = useStoryBookFilesByCategory();
+  const pagination = findPreviousAndNextStory(story, stories);
 
   return (
     <Flex align="center" justify="space-between" gap={space(2)}>
       {pagination?.prev && (
-        <Card
-          to={`/stories/?${prevLocationDescriptor}`}
-          icon={<IconArrow direction="left" />}
-        >
+        <Card to={pagination.prev.location} icon={<IconArrow direction="left" />}>
           <CardLabel>Previous</CardLabel>
-          <CardTitle>{pagination.prev.story.label}</CardTitle>
+          <CardTitle>{pagination.prev.label}</CardTitle>
         </Card>
       )}
       {pagination?.next && (
         <Card
           data-flip
-          to={`/stories/?${nextLocationDescriptor}`}
+          to={pagination.next.location}
           icon={<IconArrow direction="right" />}
         >
           <CardLabel>Next</CardLabel>
-          <CardTitle>{pagination.next.story.label}</CardTitle>
+          <CardTitle>{pagination.next.label}</CardTitle>
         </Card>
       )}
     </Flex>
@@ -56,14 +41,11 @@ function findPreviousAndNextStory(
   story: StoryDescriptor,
   categories: ReturnType<typeof useStoryBookFilesByCategory>
 ): {
-  next: {category: string; story: StoryTreeNode} | undefined;
-  prev: {category: string; story: StoryTreeNode} | undefined;
+  next?: StoryTreeNode;
+  prev?: StoryTreeNode;
 } | null {
-  const stories = Object.entries(categories).flatMap(([key, category]) =>
-    category.map(s => ({category: key, story: s}))
-  );
-
-  const currentIndex = stories.findIndex(s => s.story.filesystemPath === story.filename);
+  const stories = Object.values(categories).flat();
+  const currentIndex = stories.findIndex(s => s.filesystemPath === story.filename);
 
   if (currentIndex === -1) {
     return null;