fix story sidebar not being selected on deeplink

Author: yannbf

app/components/Storybook/FileTree.vue

@@ -26,7 +26,7 @@ function isNodeActive(node: StorybookFileTree): boolean {
 
 // Build route object for a story
 function getStoryRoute(node: StorybookFileTree): RouteLocationRaw {
-  if (node.type === 'story') {
+  if (node.type === 'story' && node.storyId) {
     return {
       name: 'stories',
       params: { path: props.basePath },
@@ -36,7 +36,7 @@ function getStoryRoute(node: StorybookFileTree): RouteLocationRaw {
   // For directories - navigate to first story in that directory
   if (node.type === 'directory') {
     const firstStory = getFirstStoryInDirectory(node)
-    if (firstStory) {
+    if (firstStory?.storyId) {
       return {
         name: 'stories',
         params: { path: props.basePath },
@@ -69,6 +69,48 @@ function getNodeIcon(node: StorybookFileTree): string {
 
 const { toggleDir, isExpanded, autoExpandAncestors } = useStoryTreeState(props.baseUrl)
 
+const storyRefs = shallowReactive(new Map<string, HTMLElement>())
+
+function setStoryRef(storyId: string | null) {
+  return (el: Element | { $el?: Element } | null) => {
+    if (!storyId) return
+    if (!el) {
+      storyRefs.delete(storyId)
+      return
+    }
+    const target = '$el' in el ? el.$el : el
+    if (target instanceof HTMLElement) storyRefs.set(storyId, target)
+  }
+}
+
+function findStoryPath(tree: StorybookFileTree[], storyId: string): string | null {
+  for (const node of tree) {
+    if (node.type === 'story' && node.storyId === storyId) return node.path
+    if (node.type === 'directory' && node.children) {
+      const found = findStoryPath(node.children, storyId)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+watch(
+  [() => props.currentStoryId, () => props.tree],
+  ([storyId, tree]) => {
+    if (!storyId || !tree.length || depth.value !== 0) return
+    const storyPath = findStoryPath(tree, storyId)
+    if (!storyPath) return
+    autoExpandAncestors(storyPath)
+    nextTick(() => {
+      const target = storyRefs.get(storyId)
+      if (target) {
+        target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+      }
+    })
+  },
+  { immediate: true },
+)
+
 // Handle directory click - toggle expansion and navigate to first story
 function handleDirectoryClick(node: StorybookFileTree) {
   if (node.type !== 'directory') return
@@ -120,6 +162,7 @@ function handleDirectoryClick(node: StorybookFileTree) {
           block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
           :classicon="getNodeIcon(node)"
+          :ref="setStoryRef(node.storyId)"
         >
           <span class="truncate">{{ node.name }}</span>
         </LinkBase>

app/components/Storybook/MobileTreeDrawer.vue

@@ -59,6 +59,7 @@ watch(isOpen, open => (isLocked.value = open))
     <aside
       v-if="isOpen"
       class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
+      data-story-tree-scroll
     >
       <div
         class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-start"

app/pages/package-stories/[...path].vue

@@ -365,6 +365,7 @@ defineOgImageComponent('Default', {
         class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <StorybookFileTree
+          data-story-tree-scroll
           :tree="storybookTree"
           :current-story-id="currentStoryId"
           :base-url="`/package-stories/${packageName}/v/${version}`"