From 3de58d92db52682e1235b15743d005ce975d620e Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 19:45:08 +0300
Subject: [PATCH 01/10] feat(app): add layout customization modal (#620)

---
 packages/histoire-app/src/app/App.vue         | 12 ++++
 .../src/app/components/app/AppHeader.vue      | 16 +++++
 .../src/app/components/layout/LayoutItem.vue  | 36 ++++++++++
 .../app/components/layout/LayoutItemGroup.vue | 18 +++++
 .../src/app/components/layout/LayoutModal.vue | 67 +++++++++++++++++++
 .../src/app/components/layout/LayoutPane.vue  | 45 +++++++++++++
 .../histoire-app/src/app/stores/layout.ts     | 37 ++++++++++
 7 files changed, 231 insertions(+)
 create mode 100644 packages/histoire-app/src/app/components/layout/LayoutItem.vue
 create mode 100644 packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue
 create mode 100644 packages/histoire-app/src/app/components/layout/LayoutModal.vue
 create mode 100644 packages/histoire-app/src/app/components/layout/LayoutPane.vue
 create mode 100644 packages/histoire-app/src/app/stores/layout.ts

diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index ab4c95ed..c8f6fdc8 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -14,6 +14,7 @@ import Breadcrumb from './components/app/Breadcrumb.vue'
 import InitialLoading from './components/app/InitialLoading.vue'
 import BaseSplitPane from './components/base/BaseSplitPane.vue'
 import CommandPromptsModal from './components/command/CommandPromptsModal.vue'
+import LayoutModal from './components/layout/LayoutModal.vue'
 import SearchModal from './components/search/SearchModal.vue'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import StoryList from './components/tree/StoryList.vue'
@@ -66,6 +67,10 @@ useTitle(computed(() => {
 const loadSearch = ref(false)
 const isSearchOpen = ref(false)
 
+// Layout
+
+const isLayoutOpen = ref(false)
+
 watch(isSearchOpen, (value) => {
   if (value) {
     loadSearch.value = true
@@ -136,6 +141,7 @@ const commandStore = useCommandStore()
         <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
           <AppHeader
             class="htw-flex-none"
+            @layout="isLayoutOpen = true"
             @search="isSearchOpen = true"
           />
           <StoryList
@@ -151,6 +157,12 @@ const commandStore = useCommandStore()
       </template>
     </BaseSplitPane>
 
+    <LayoutModal
+      v-if="!isMobile"
+      :shown="isLayoutOpen"
+      @close="isLayoutOpen = false"
+    />
+
     <SearchModal
       v-if="loadSearch"
       :shown="isSearchOpen"
diff --git a/packages/histoire-app/src/app/components/app/AppHeader.vue b/packages/histoire-app/src/app/components/app/AppHeader.vue
index 11d3ab30..1b22c2be 100644
--- a/packages/histoire-app/src/app/components/app/AppHeader.vue
+++ b/packages/histoire-app/src/app/components/app/AppHeader.vue
@@ -4,11 +4,13 @@ import { computed } from 'vue'
 import { histoireConfig } from '../../util/config'
 import { isDark, toggleDark } from '../../util/dark'
 import { onKeyboardShortcut } from '../../util/keyboard'
+import { isMobile } from '../../util/responsive'
 import { makeTooltip } from '../../util/tooltip'
 import AppLogo from './AppLogo.vue'
 
 defineEmits({
   search: () => true,
+  layout: () => true,
 })
 
 const themeIcon = computed(() => {
@@ -37,6 +39,20 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
       </a>
     </div>
     <div class="htw-ml-auto htw-flex-none htw-flex">
+      <a
+        v-if="!isMobile"
+        v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')"
+        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
+        aria-label="Open layout customization"
+        data-test-id="layout-btn"
+        @click="$emit('layout')"
+      >
+        <Icon
+          icon="carbon:panel-expansion"
+          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
+        />
+      </a>
+
       <a
         v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
         class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
diff --git a/packages/histoire-app/src/app/components/layout/LayoutItem.vue b/packages/histoire-app/src/app/components/layout/LayoutItem.vue
new file mode 100644
index 00000000..e6153901
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import BaseListItem from '../base/BaseListItem.vue'
+
+defineProps<{
+  title: string
+  icon: string
+  stateIcon?: string
+  isActive?: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <BaseListItem
+    :is-active="isActive"
+    class="htw-px-6 htw-py-4 htw-gap-4"
+    @navigate="$emit('click')"
+  >
+    <Icon
+      class="htw-w-4 htw-h-4 htw-flex-none"
+      :icon="icon"
+      aria-hidden="true"
+    />
+    <span class="htw-flex-1">{{ title }}</span>
+    <Icon
+      v-if="stateIcon"
+      class="htw-w-4 htw-h-4 htw-flex-none htw-opacity-70"
+      :icon="stateIcon"
+      aria-hidden="true"
+    />
+  </BaseListItem>
+</template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue b/packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue
new file mode 100644
index 00000000..98fd6e81
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div role="group">
+    <div
+      role="heading"
+      aria-level="3"
+      class="htw-px-6 htw-pt-3 htw-pb-1 htw-text-xs htw-uppercase htw-tracking-wide htw-opacity-50"
+    >
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutModal.vue b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
new file mode 100644
index 00000000..5b805ef3
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { defineAsyncComponent } from 'vue'
+import SearchLoading from '../search/SearchLoading.vue'
+
+const LayoutPane = defineAsyncComponent({
+  loader: () => import('./LayoutPane.vue'),
+  loadingComponent: SearchLoading,
+  delay: 0,
+})
+
+defineProps({
+  shown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+function close() {
+  emit('close')
+}
+
+function onEsc(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    close()
+  }
+}
+</script>
+
+<template>
+  <div
+    v-show="shown"
+    class="histoire-layout-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+    data-test-id="layout-modal"
+    @keydown="onEsc"
+  >
+    <div
+      class="htw-absolute htw-inset-0"
+      @click="close()"
+    />
+    <div class="htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850">
+      <div class="htw-flex htw-items-center htw-px-6 htw-py-3 htw-text-gray-900 dark:htw-text-gray-100">
+        <h2 class="htw-flex-1 htw-text-sm htw-font-medium htw-m-0">
+          Customize Layout
+        </h2>
+        <button
+          type="button"
+          class="htw-flex htw-items-center htw-justify-center htw-p-1 htw-bg-transparent htw-border-0 htw-text-gray-500 dark:htw-text-gray-400 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer"
+          aria-label="Close layout customization"
+          data-test-id="layout-modal-close"
+          @click="close()"
+        >
+          <Icon
+            icon="carbon:close"
+            class="htw-w-5 htw-h-5"
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <LayoutPane />
+    </div>
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutPane.vue b/packages/histoire-app/src/app/components/layout/LayoutPane.vue
new file mode 100644
index 00000000..f34d3292
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutPane.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useLayoutStore } from '../../stores/layout'
+import LayoutItem from './LayoutItem.vue'
+import LayoutItemGroup from './LayoutItemGroup.vue'
+
+const layoutStore = useLayoutStore()
+</script>
+
+<template>
+  <div class="htw-py-2">
+    <LayoutItemGroup title="Visibility">
+      <LayoutItem
+        title="Story List"
+        icon="carbon:open-panel-filled-left"
+        :state-icon="layoutStore.settings.storyListVisible ? 'carbon:view' : 'carbon:view-off'"
+        data-test-id="layout-toggle-story-list"
+        @click="layoutStore.toggleStoryList()"
+      />
+      <LayoutItem
+        title="Story Options"
+        icon="carbon:open-panel-filled-right"
+        :state-icon="layoutStore.settings.storyOptionsVisible ? 'carbon:view' : 'carbon:view-off'"
+        data-test-id="layout-toggle-story-options"
+        @click="layoutStore.toggleStoryOptions()"
+      />
+    </LayoutItemGroup>
+
+    <LayoutItemGroup title="Story Options Placement">
+      <LayoutItem
+        title="Right"
+        icon="carbon:open-panel-filled-right"
+        :is-active="layoutStore.settings.storyOptionsPlacement === 'right'"
+        data-test-id="layout-placement-right"
+        @click="layoutStore.setStoryOptionsPlacement('right')"
+      />
+      <LayoutItem
+        title="Bottom"
+        icon="carbon:open-panel-filled-bottom"
+        :is-active="layoutStore.settings.storyOptionsPlacement === 'bottom'"
+        data-test-id="layout-placement-bottom"
+        @click="layoutStore.setStoryOptionsPlacement('bottom')"
+      />
+    </LayoutItemGroup>
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/stores/layout.ts b/packages/histoire-app/src/app/stores/layout.ts
new file mode 100644
index 00000000..f6679c54
--- /dev/null
+++ b/packages/histoire-app/src/app/stores/layout.ts
@@ -0,0 +1,37 @@
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+
+export type StoryOptionsPlacement = 'right' | 'bottom'
+
+export interface LayoutSettings {
+  storyListVisible: boolean
+  storyOptionsVisible: boolean
+  storyOptionsPlacement: StoryOptionsPlacement
+}
+
+export const useLayoutStore = defineStore('layout', () => {
+  const settings = useStorage<LayoutSettings>('_histoire-layout-v1', {
+    storyListVisible: true,
+    storyOptionsVisible: true,
+    storyOptionsPlacement: 'right',
+  })
+
+  function toggleStoryList() {
+    settings.value.storyListVisible = !settings.value.storyListVisible
+  }
+
+  function toggleStoryOptions() {
+    settings.value.storyOptionsVisible = !settings.value.storyOptionsVisible
+  }
+
+  function setStoryOptionsPlacement(value: StoryOptionsPlacement) {
+    settings.value.storyOptionsPlacement = value
+  }
+
+  return {
+    settings,
+    toggleStoryList,
+    toggleStoryOptions,
+    setStoryOptionsPlacement,
+  }
+})

From d108393f7b74b5e25024d0c0ad5efae28aea5182 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 10:10:43 +0300
Subject: [PATCH 02/10] feat(app): promote AppHeader above split pane

---
 packages/histoire-app/src/app/App.vue | 55 +++++++++++++++------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index c8f6fdc8..544352ac 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -129,33 +129,38 @@ const commandStore = useCommandStore()
       <RouterView class="htw-grow" />
     </div>
 
-    <BaseSplitPane
+    <div
       v-else
-      save-id="main-horiz"
-      :min="5"
-      :max="50"
-      :default-split="15"
-      class="htw-h-full"
+      class="htw-h-full htw-flex htw-flex-col"
     >
-      <template #first>
-        <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
-          <AppHeader
-            class="htw-flex-none"
-            @layout="isLayoutOpen = true"
-            @search="isSearchOpen = true"
-          />
-          <StoryList
-            :tree="tree"
-            :stories="stories"
-            class="htw-flex-1"
-          />
-        </div>
-      </template>
-
-      <template #last>
-        <RouterView />
-      </template>
-    </BaseSplitPane>
+      <AppHeader
+        class="htw-flex-none"
+        @layout="isLayoutOpen = true"
+        @search="isSearchOpen = true"
+      />
+
+      <BaseSplitPane
+        save-id="main-horiz"
+        :min="5"
+        :max="50"
+        :default-split="15"
+        class="htw-flex-1 htw-min-h-0"
+      >
+        <template #first>
+          <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
+            <StoryList
+              :tree="tree"
+              :stories="stories"
+              class="htw-flex-1"
+            />
+          </div>
+        </template>
+
+        <template #last>
+          <RouterView />
+        </template>
+      </BaseSplitPane>
+    </div>
 
     <LayoutModal
       v-if="!isMobile"

From c678bc71cd184515ea5b28549fe960337c52c218 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 10:25:23 +0300
Subject: [PATCH 03/10] fix(app): histoire-base-list-ite typo

---
 packages/histoire-app/src/app/components/base/BaseListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/histoire-app/src/app/components/base/BaseListItem.vue b/packages/histoire-app/src/app/components/base/BaseListItem.vue
index 0ef27fa1..b768c7cc 100644
--- a/packages/histoire-app/src/app/components/base/BaseListItem.vue
+++ b/packages/histoire-app/src/app/components/base/BaseListItem.vue
@@ -14,7 +14,7 @@ function handleNavigate() {
 
 <template>
   <a
-    class="istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
     :class="[
       $attrs.class,
       isActive

From 644a891a04078c4bbffa2694a1be2dcae4ee1509 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 19:46:17 +0300
Subject: [PATCH 04/10] feat(app): toggle pane visibility and placement

---
 examples/vue3/cypress/e2e/layout.cy.js        | 63 +++++++++++++++++++
 packages/histoire-app/src/app/App.vue         |  7 +++
 .../src/app/components/layout/LayoutModal.vue | 10 +--
 .../app/components/panel/StorySidePanel.vue   | 10 ++-
 .../src/app/components/story/StoryView.vue    | 10 ++-
 5 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 examples/vue3/cypress/e2e/layout.cy.js

diff --git a/examples/vue3/cypress/e2e/layout.cy.js b/examples/vue3/cypress/e2e/layout.cy.js
new file mode 100644
index 00000000..1c4302f5
--- /dev/null
+++ b/examples/vue3/cypress/e2e/layout.cy.js
@@ -0,0 +1,63 @@
+/// <reference types="cypress" />
+
+describe('Layout customization', () => {
+  beforeEach(() => {
+    cy.window().then(w => w.localStorage.removeItem('_histoire-layout-v1'))
+    cy.visit('/')
+  })
+
+  it('opens the modal via the header button', () => {
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-modal"]').should('be.visible')
+    cy.contains('[data-test-id="layout-modal"]', 'Customize Layout')
+  })
+
+  it('toggles Story List visibility', () => {
+    cy.get('.histoire-base-split-pane').should('exist')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-toggle-story-list"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.get('.histoire-base-split-pane').should('not.exist')
+  })
+
+  it('toggles Story Options visibility on a story', () => {
+    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
+    cy.get('[data-test-id="story-side-panel"]').should('exist')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-toggle-story-options"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.get('[data-test-id="story-side-panel"]').should('not.exist')
+  })
+
+  it('switches Story Options placement to Bottom', () => {
+    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
+    cy.get('[data-test-id="story-side-panel"]').should('exist')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-placement-bottom"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.get('.histoire-base-split-pane.portrait').should('exist')
+  })
+
+  it('persists settings across reload', () => {
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-toggle-story-list"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.reload()
+    cy.get('.histoire-base-split-pane').should('not.exist')
+  })
+
+  it('hides the Layout button on mobile', () => {
+    cy.viewport(375, 667)
+    cy.get('[data-test-id="layout-btn"]').should('not.exist')
+  })
+
+  it('closes the modal via backdrop and Esc', () => {
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-modal"]').should('be.visible')
+    cy.get('body').click(10, 10)
+    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('body').type('{esc}')
+    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
+  })
+})
diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index 544352ac..e28c8aae 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -19,6 +19,7 @@ import SearchModal from './components/search/SearchModal.vue'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import StoryList from './components/tree/StoryList.vue'
 import { useCommandStore } from './stores/command'
+import { useLayoutStore } from './stores/layout'
 import { useStoryStore } from './stores/story'
 import { histoireConfig } from './util/config'
 import { onKeyboardShortcut } from './util/keyboard'
@@ -97,6 +98,7 @@ onMounted(() => {
 })
 
 const commandStore = useCommandStore()
+const layoutStore = useLayoutStore()
 </script>
 
 <template>
@@ -140,6 +142,7 @@ const commandStore = useCommandStore()
       />
 
       <BaseSplitPane
+        v-if="layoutStore.settings.storyListVisible"
         save-id="main-horiz"
         :min="5"
         :max="50"
@@ -160,6 +163,10 @@ const commandStore = useCommandStore()
           <RouterView />
         </template>
       </BaseSplitPane>
+      <RouterView
+        v-else
+        class="htw-flex-1 htw-min-h-0"
+      />
     </div>
 
     <LayoutModal
diff --git a/packages/histoire-app/src/app/components/layout/LayoutModal.vue b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
index 5b805ef3..7ab9aa78 100644
--- a/packages/histoire-app/src/app/components/layout/LayoutModal.vue
+++ b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { useEventListener } from '@vueuse/core'
 import { defineAsyncComponent } from 'vue'
 import SearchLoading from '../search/SearchLoading.vue'
 
@@ -9,7 +10,7 @@ const LayoutPane = defineAsyncComponent({
   delay: 0,
 })
 
-defineProps({
+const props = defineProps({
   shown: {
     type: Boolean,
     default: false,
@@ -24,11 +25,11 @@ function close() {
   emit('close')
 }
 
-function onEsc(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
+useEventListener(window, 'keydown', (event: KeyboardEvent) => {
+  if (props.shown && event.key === 'Escape') {
     close()
   }
-}
+})
 </script>
 
 <template>
@@ -36,7 +37,6 @@ function onEsc(event: KeyboardEvent) {
     v-show="shown"
     class="histoire-layout-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
     data-test-id="layout-modal"
-    @keydown="onEsc"
   >
     <div
       class="htw-absolute htw-inset-0"
diff --git a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
index bec3e1bb..e2c84e4d 100644
--- a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
+++ b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
 
 import BaseEmpty from '../base/BaseEmpty.vue'
@@ -12,6 +13,11 @@ import StoryEvents from './StoryEvents.vue'
 import StorySourceCode from './StorySourceCode.vue'
 
 const storyStore = useStoryStore()
+const layoutStore = useLayoutStore()
+
+const innerOrientation = computed(() =>
+  layoutStore.settings.storyOptionsPlacement === 'bottom' ? 'landscape' : 'portrait',
+)
 
 const route = useRoute()
 
@@ -44,8 +50,8 @@ const panelContentComponent = computed(() => {
 
   <BaseSplitPane
     v-else
-    save-id="story-sidepane"
-    orientation="portrait"
+    :save-id="`story-sidepane-${innerOrientation}`"
+    :orientation="innerOrientation"
     class="histoire-story-side-panel histoire-loaded htw-h-full"
     data-test-id="story-side-panel"
   >
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index 129cf265..44c04559 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue'
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
 
 import { isMobile } from '../../util/responsive'
@@ -12,6 +13,7 @@ import StorySidePanel from '../panel/StorySidePanel.vue'
 import StoryViewer from './StoryViewer.vue'
 
 const storyStore = useStoryStore()
+const layoutStore = useLayoutStore()
 
 const router = useRouter()
 const route = useRoute()
@@ -90,12 +92,16 @@ function scrollDocsToTop() {
     <template v-else-if="isMobile">
       <StoryViewer />
     </template>
+    <template v-else-if="!layoutStore.settings.storyOptionsVisible">
+      <StoryViewer />
+    </template>
     <BaseSplitPane
       v-else
-      save-id="story-main"
+      :save-id="`story-main-${layoutStore.settings.storyOptionsPlacement}`"
+      :orientation="layoutStore.settings.storyOptionsPlacement === 'bottom' ? 'portrait' : 'landscape'"
       :min="30"
       :max="95"
-      :default-split="75"
+      :default-split="layoutStore.settings.storyOptionsPlacement === 'bottom' ? 60 : 75"
       class="htw-h-full"
     >
       <template #first>

From 7397c7d7750df10478d7641681b3c1cdfe23b842 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 19:48:32 +0300
Subject: [PATCH 05/10] feat(shared): per-story storyOptions override (fix
 #558)

---
 examples/vue3/cypress/e2e/layout.cy.js            |  7 +++++++
 examples/vue3/cypress/e2e/stories-list.cy.js      |  2 +-
 .../src/components/StoryOptionsOverride.story.vue | 15 +++++++++++++++
 .../src/app/components/story/StoryView.vue        |  8 ++++++--
 packages/histoire-shared/src/types/story.ts       |  9 ++++++++-
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 examples/vue3/src/components/StoryOptionsOverride.story.vue

diff --git a/examples/vue3/cypress/e2e/layout.cy.js b/examples/vue3/cypress/e2e/layout.cy.js
index 1c4302f5..21375bf5 100644
--- a/examples/vue3/cypress/e2e/layout.cy.js
+++ b/examples/vue3/cypress/e2e/layout.cy.js
@@ -51,6 +51,13 @@ describe('Layout customization', () => {
     cy.get('[data-test-id="layout-btn"]').should('not.exist')
   })
 
+  it('respects per-story meta.storyOptions override', () => {
+    cy.get('[data-test-id="story-list-item"]').contains('StoryOptions Override').click()
+    cy.get('[data-test-id="story-side-panel"]').should('not.exist')
+    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
+    cy.get('[data-test-id="story-side-panel"]').should('exist')
+  })
+
   it('closes the modal via backdrop and Esc', () => {
     cy.get('[data-test-id="layout-btn"]').click()
     cy.get('[data-test-id="layout-modal"]').should('be.visible')
diff --git a/examples/vue3/cypress/e2e/stories-list.cy.js b/examples/vue3/cypress/e2e/stories-list.cy.js
index 7a284eb1..654cd9ad 100644
--- a/examples/vue3/cypress/e2e/stories-list.cy.js
+++ b/examples/vue3/cypress/e2e/stories-list.cy.js
@@ -4,7 +4,7 @@ describe('Stories list', () => {
   it('should display the stories', () => {
     cy.clearLocalStorage()
     cy.visit('/')
-    cy.get('[data-test-id="story-list-item"]').should('have.length', 35)
+    cy.get('[data-test-id="story-list-item"]').should('have.length', 36)
     cy.get('[data-test-id="story-list-item"]').contains('🐱 Meow')
     cy.get('[data-test-id="story-list-item"]').contains('BaseButton').contains('3') // Variants count
     cy.get('[data-test-id="story-list-item"]').contains('Demo')
diff --git a/examples/vue3/src/components/StoryOptionsOverride.story.vue b/examples/vue3/src/components/StoryOptionsOverride.story.vue
new file mode 100644
index 00000000..07c26695
--- /dev/null
+++ b/examples/vue3/src/components/StoryOptionsOverride.story.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const meta = { storyOptions: false }
+</script>
+
+<template>
+  <Story
+    title="StoryOptions Override"
+    icon="carbon:no-image"
+    :meta="meta"
+  >
+    <Variant>
+      <p>This story sets <code>meta.storyOptions: false</code>, which forces the right pane hidden regardless of the global Layout setting.</p>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index 44c04559..84d8e9ba 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
@@ -15,6 +15,10 @@ import StoryViewer from './StoryViewer.vue'
 const storyStore = useStoryStore()
 const layoutStore = useLayoutStore()
 
+const effectiveStoryOptionsVisible = computed(() =>
+  storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible,
+)
+
 const router = useRouter()
 const route = useRoute()
 
@@ -92,7 +96,7 @@ function scrollDocsToTop() {
     <template v-else-if="isMobile">
       <StoryViewer />
     </template>
-    <template v-else-if="!layoutStore.settings.storyOptionsVisible">
+    <template v-else-if="!effectiveStoryOptionsVisible">
       <StoryViewer />
     </template>
     <BaseSplitPane
diff --git a/packages/histoire-shared/src/types/story.ts b/packages/histoire-shared/src/types/story.ts
index 43622288..6871ca3d 100644
--- a/packages/histoire-shared/src/types/story.ts
+++ b/packages/histoire-shared/src/types/story.ts
@@ -43,7 +43,14 @@ export interface StoryProps extends CommonProps, InheritedProps {
 
 export interface CommonMeta {}
 
-export interface StoryMeta extends CommonMeta {}
+export interface StoryMeta extends CommonMeta {
+  /**
+   * When set, overrides the global Story Options visibility for this story.
+   * `true` forces the right pane visible; `false` forces it hidden.
+   * `undefined` (default) defers to the global layout setting.
+   */
+  storyOptions?: boolean
+}
 
 export interface Story {
   id: string

From d82f378e9f5d7de81d71e47457148f59e3c96e82 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 11:00:08 +0300
Subject: [PATCH 06/10] feat(app): keyboard shortcut for layout modal

---
 examples/vue3/cypress/e2e/layout.cy.js | 7 +++++++
 packages/histoire-app/src/app/App.vue  | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/examples/vue3/cypress/e2e/layout.cy.js b/examples/vue3/cypress/e2e/layout.cy.js
index 21375bf5..0d92f743 100644
--- a/examples/vue3/cypress/e2e/layout.cy.js
+++ b/examples/vue3/cypress/e2e/layout.cy.js
@@ -51,6 +51,13 @@ describe('Layout customization', () => {
     cy.get('[data-test-id="layout-btn"]').should('not.exist')
   })
 
+  it('opens and toggles via keyboard shortcut', () => {
+    cy.get('body').type('{meta}{shift}l')
+    cy.get('[data-test-id="layout-modal"]').should('be.visible')
+    cy.get('body').type('{meta}{shift}l')
+    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
+  })
+
   it('respects per-story meta.storyOptions override', () => {
     cy.get('[data-test-id="story-list-item"]').contains('StoryOptions Override').click()
     cy.get('[data-test-id="story-side-panel"]').should('not.exist')
diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index e28c8aae..3081f126 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -83,6 +83,11 @@ onKeyboardShortcut(['ctrl+k', 'meta+k'], (event) => {
   event.preventDefault()
 })
 
+onKeyboardShortcut(['ctrl+shift+l', 'meta+shift+l'], (event) => {
+  isLayoutOpen.value = !isLayoutOpen.value
+  event.preventDefault()
+})
+
 const loading = ref(false)
 
 if (import.meta.hot && !rawFiles.length) {

From 0e8056798e11b6628b24396afa9d5d07f6cc3d68 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 19:38:09 +0300
Subject: [PATCH 07/10] feat(app): introduce iOS-style glossy top bar

---
 packages/histoire-app/src/app/App.vue         | 73 +++++++++++--------
 .../src/app/components/app/AppActions.vue     | 58 +++++++++++++++
 .../src/app/components/app/AppHeader.vue      | 56 +-------------
 .../src/app/components/app/TopBar.vue         | 64 ++++++++++++++++
 .../src/app/components/app/TopBarChip.vue     |  5 ++
 .../src/app/components/app/TopBarChipItem.vue |  7 ++
 .../src/app/components/base/BaseSplitPane.vue |  9 ++-
 .../app/components/story/StoryVariantGrid.vue | 19 -----
 .../story/StoryVariantSingleView.vue          | 33 ---------
 .../src/app/components/story/StoryView.vue    |  7 +-
 .../toolbar/DevOnlyToolbarOpenInEditor.vue    |  7 +-
 .../components/toolbar/ToolbarBackground.vue  | 17 ++---
 .../app/components/toolbar/ToolbarNewTab.vue  |  7 +-
 .../toolbar/ToolbarResponsiveSize.vue         | 12 +--
 .../toolbar/ToolbarTextDirection.vue          |  7 +-
 .../app/components/toolbar/ToolbarTitle.vue   | 40 ++++++++--
 16 files changed, 249 insertions(+), 172 deletions(-)
 create mode 100644 packages/histoire-app/src/app/components/app/AppActions.vue
 create mode 100644 packages/histoire-app/src/app/components/app/TopBar.vue
 create mode 100644 packages/histoire-app/src/app/components/app/TopBarChip.vue
 create mode 100644 packages/histoire-app/src/app/components/app/TopBarChipItem.vue

diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index 3081f126..76f8e550 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -9,9 +9,11 @@ import type { StoryFile, Tree } from './types'
 import { useTitle } from '@vueuse/core'
 import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$histoire-stories'
 import { computed, onMounted, ref, watch } from 'vue'
+import AppActions from './components/app/AppActions.vue'
 import AppHeader from './components/app/AppHeader.vue'
 import Breadcrumb from './components/app/Breadcrumb.vue'
 import InitialLoading from './components/app/InitialLoading.vue'
+import TopBar from './components/app/TopBar.vue'
 import BaseSplitPane from './components/base/BaseSplitPane.vue'
 import CommandPromptsModal from './components/command/CommandPromptsModal.vue'
 import LayoutModal from './components/layout/LayoutModal.vue'
@@ -118,7 +120,7 @@ const layoutStore = useLayoutStore()
   </div>
 
   <div
-    class="htw-h-screen htw-bg-white dark:htw-bg-gray-700 dark:htw-text-gray-100"
+    class="htw-h-screen htw-bg-gray-100 dark:htw-bg-gray-750 dark:htw-text-gray-100"
     :style="{
       // Prevent flash of content
       opacity: mounted ? 1 : 0,
@@ -128,7 +130,14 @@ const layoutStore = useLayoutStore()
       v-if="isMobile"
       class="htw-h-full htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800"
     >
-      <AppHeader @search="isSearchOpen = true" />
+      <div class="htw-flex htw-items-center htw-gap-2 htw-pr-4">
+        <AppHeader class="htw-flex-1" />
+        <AppActions
+          class="htw-flex-none"
+          @layout="isLayoutOpen = true"
+          @search="isSearchOpen = true"
+        />
+      </div>
       <Breadcrumb
         :tree="tree"
         :stories="stories"
@@ -136,42 +145,44 @@ const layoutStore = useLayoutStore()
       <RouterView class="htw-grow" />
     </div>
 
+    <BaseSplitPane
+      v-else-if="layoutStore.settings.storyListVisible"
+      save-id="main-horiz"
+      :min="5"
+      :max="50"
+      :default-split="15"
+      class="htw-h-full"
+    >
+      <template #first>
+        <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
+          <AppHeader class="htw-flex-none" />
+          <StoryList
+            :tree="tree"
+            :stories="stories"
+            class="htw-flex-1"
+          />
+        </div>
+      </template>
+
+      <template #last>
+        <div class="htw-flex htw-flex-col htw-h-full">
+          <TopBar
+            @layout="isLayoutOpen = true"
+            @search="isSearchOpen = true"
+          />
+          <RouterView class="htw-flex-1 htw-min-h-0" />
+        </div>
+      </template>
+    </BaseSplitPane>
     <div
       v-else
       class="htw-h-full htw-flex htw-flex-col"
     >
-      <AppHeader
-        class="htw-flex-none"
+      <TopBar
         @layout="isLayoutOpen = true"
         @search="isSearchOpen = true"
       />
-
-      <BaseSplitPane
-        v-if="layoutStore.settings.storyListVisible"
-        save-id="main-horiz"
-        :min="5"
-        :max="50"
-        :default-split="15"
-        class="htw-flex-1 htw-min-h-0"
-      >
-        <template #first>
-          <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
-            <StoryList
-              :tree="tree"
-              :stories="stories"
-              class="htw-flex-1"
-            />
-          </div>
-        </template>
-
-        <template #last>
-          <RouterView />
-        </template>
-      </BaseSplitPane>
-      <RouterView
-        v-else
-        class="htw-flex-1 htw-min-h-0"
-      />
+      <RouterView class="htw-flex-1 htw-min-h-0" />
     </div>
 
     <LayoutModal
diff --git a/packages/histoire-app/src/app/components/app/AppActions.vue b/packages/histoire-app/src/app/components/app/AppActions.vue
new file mode 100644
index 00000000..6ef425d7
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/AppActions.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { histoireConfig } from '../../util/config'
+import { isDark, toggleDark } from '../../util/dark'
+import { isMobile } from '../../util/responsive'
+import { makeTooltip } from '../../util/tooltip'
+import TopBarChip from './TopBarChip.vue'
+import TopBarChipItem from './TopBarChipItem.vue'
+
+defineEmits({
+  search: () => true,
+  layout: () => true,
+})
+
+const themeIcon = computed(() => {
+  return isDark.value ? 'carbon:moon' : 'carbon:sun'
+})
+</script>
+
+<template>
+  <TopBarChip>
+    <TopBarChipItem
+      v-if="!isMobile"
+      v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')"
+      aria-label="Open layout customization"
+      data-test-id="layout-btn"
+      @click="$emit('layout')"
+    >
+      <Icon
+        icon="carbon:panel-expansion"
+        class="htw-w-4 htw-h-4"
+      />
+    </TopBarChipItem>
+
+    <TopBarChipItem
+      v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
+      data-test-id="search-btn"
+      @click="$emit('search')"
+    >
+      <Icon
+        icon="carbon:search"
+        class="htw-w-4 htw-h-4"
+      />
+    </TopBarChipItem>
+
+    <TopBarChipItem
+      v-if="!histoireConfig.theme.hideColorSchemeSwitch"
+      v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
+      @click="toggleDark()"
+    >
+      <Icon
+        :icon="themeIcon"
+        class="htw-w-4 htw-h-4"
+      />
+    </TopBarChipItem>
+  </TopBarChip>
+</template>
diff --git a/packages/histoire-app/src/app/components/app/AppHeader.vue b/packages/histoire-app/src/app/components/app/AppHeader.vue
index 1b22c2be..cd7cded7 100644
--- a/packages/histoire-app/src/app/components/app/AppHeader.vue
+++ b/packages/histoire-app/src/app/components/app/AppHeader.vue
@@ -1,22 +1,9 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { histoireConfig } from '../../util/config'
-import { isDark, toggleDark } from '../../util/dark'
+import { toggleDark } from '../../util/dark'
 import { onKeyboardShortcut } from '../../util/keyboard'
-import { isMobile } from '../../util/responsive'
-import { makeTooltip } from '../../util/tooltip'
 import AppLogo from './AppLogo.vue'
 
-defineEmits({
-  search: () => true,
-  layout: () => true,
-})
-
-const themeIcon = computed(() => {
-  return isDark.value ? 'carbon:moon' : 'carbon:sun'
-})
-
 onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
   event.preventDefault()
   toggleDark()
@@ -25,7 +12,7 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
 
 <template>
   <div
-    class="histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+    class="histoire-app-header htw-px-4 htw-h-14 htw-flex htw-items-center htw-gap-2"
   >
     <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
       <a
@@ -38,44 +25,5 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
         />
       </a>
     </div>
-    <div class="htw-ml-auto htw-flex-none htw-flex">
-      <a
-        v-if="!isMobile"
-        v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')"
-        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
-        aria-label="Open layout customization"
-        data-test-id="layout-btn"
-        @click="$emit('layout')"
-      >
-        <Icon
-          icon="carbon:panel-expansion"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-        />
-      </a>
-
-      <a
-        v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
-        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
-        data-test-id="search-btn"
-        @click="$emit('search')"
-      >
-        <Icon
-          icon="carbon:search"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-        />
-      </a>
-
-      <a
-        v-if="!histoireConfig.theme.hideColorSchemeSwitch"
-        v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
-        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
-        @click="toggleDark()"
-      >
-        <Icon
-          :icon="themeIcon"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-        />
-      </a>
-    </div>
   </div>
 </template>
diff --git a/packages/histoire-app/src/app/components/app/TopBar.vue b/packages/histoire-app/src/app/components/app/TopBar.vue
new file mode 100644
index 00000000..69585995
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/TopBar.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { useStoryStore } from '../../stores/story'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
+import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
+import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
+import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
+import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
+import AppActions from './AppActions.vue'
+import TopBarChip from './TopBarChip.vue'
+
+defineEmits({
+  search: () => true,
+  layout: () => true,
+})
+
+const storyStore = useStoryStore()
+</script>
+
+<template>
+  <div class="histoire-top-bar htw-flex-none htw-flex htw-items-center htw-h-14 htw-px-4 htw-gap-3">
+    <div class="htw-flex-1 htw-flex htw-items-center htw-justify-start htw-min-w-0">
+      <AppActions
+        class="htw-flex-none"
+        @layout="$emit('layout')"
+        @search="$emit('search')"
+      />
+    </div>
+
+    <div class="htw-flex-none htw-flex htw-items-center htw-justify-center htw-min-w-0">
+      <TopBarChip
+        v-if="storyStore.currentStory || storyStore.currentVariant"
+        class="htw-px-6 htw-py-1.5 htw-max-w-full"
+      >
+        <ToolbarTitle
+          :variant="storyStore.currentVariant ?? undefined"
+          :story="storyStore.currentStory ?? undefined"
+        />
+      </TopBarChip>
+    </div>
+
+    <div class="htw-flex-1 htw-flex htw-items-center htw-justify-end htw-min-w-0">
+      <TopBarChip
+        v-if="storyStore.currentStory && !storyStore.currentStory.docsOnly"
+      >
+        <ToolbarResponsiveSize
+          v-if="storyStore.currentVariant && !storyStore.currentVariant.responsiveDisabled"
+        />
+        <ToolbarBackground />
+        <ToolbarTextDirection />
+        <ToolbarNewTab
+          v-if="storyStore.currentVariant"
+          :variant="storyStore.currentVariant"
+          :story="storyStore.currentStory"
+        />
+        <DevOnlyToolbarOpenInEditor
+          v-if="__HISTOIRE_DEV__"
+          :file="storyStore.currentStory.file?.filePath"
+          tooltip="Edit story in editor"
+        />
+      </TopBarChip>
+    </div>
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/app/TopBarChip.vue b/packages/histoire-app/src/app/components/app/TopBarChip.vue
new file mode 100644
index 00000000..d1c42f12
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/TopBarChip.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="histoire-top-bar-chip htw-flex htw-items-center htw-bg-gradient-to-b htw-from-white/85 htw-to-white/60 dark:htw-from-gray-800/65 dark:htw-to-gray-800/40 htw-backdrop-blur-md htw-border htw-border-white/60 dark:htw-border-white/15 htw-rounded-lg htw-overflow-hidden htw-shadow-md">
+    <slot />
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/app/TopBarChipItem.vue b/packages/histoire-app/src/app/components/app/TopBarChipItem.vue
new file mode 100644
index 00000000..55ed9fae
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/TopBarChipItem.vue
@@ -0,0 +1,7 @@
+<template>
+  <a
+    class="histoire-top-bar-chip-item htw-flex htw-items-center htw-gap-1 htw-px-2.5 htw-py-1.5 hover:htw-bg-white/50 active:htw-bg-white/70 dark:hover:htw-bg-white/10 dark:active:htw-bg-white/15 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100 htw-transition-colors"
+  >
+    <slot />
+  </a>
+</template>
diff --git a/packages/histoire-app/src/app/components/base/BaseSplitPane.vue b/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
index 4b6ac2ea..9ecaec4b 100644
--- a/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
+++ b/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
@@ -45,6 +45,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  showDivider: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits({
@@ -177,7 +182,7 @@ onUnmounted(() => {
       class="htw-relative htw-top-0 htw-left-0 htw-z-20"
       :class="{
         'htw-pointer-events-none': dragging,
-        'htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'landscape',
+        'htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'landscape' && showDivider,
         'htw-flex-none': fixed,
       }"
       :style="leftStyle"
@@ -199,7 +204,7 @@ onUnmounted(() => {
       class="htw-relative htw-bottom-0 htw-right-0"
       :class="{
         'htw-pointer-events-none': dragging,
-        'htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'portrait',
+        'htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'portrait' && showDivider,
         'htw-flex-1': fixed,
       }"
       :style="rightStyle"
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
index ba243bdd..095f1113 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -2,10 +2,6 @@
 import { useResizeObserver } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
-import { isMobile } from '../../util/responsive'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
 const storyStore = useStoryStore()
@@ -120,21 +116,6 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 
 <template>
   <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
-    >
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
-        :file="storyStore.currentStory.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
     <div
       ref="el"
       class="htw-overflow-y-auto htw-flex htw-flex-1"
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
index 40a707b3..bcfc9edb 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
@@ -1,12 +1,5 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
-import { isMobile } from '../../util/responsive'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
-import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
-import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
 import StoryVariantSinglePreviewNative from './StoryVariantSinglePreviewNative.vue'
 import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
 
@@ -21,32 +14,6 @@ defineProps<{
     class="histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col"
     data-test-id="story-variant-single-view"
   >
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
-    >
-      <ToolbarTitle
-        :variant="variant"
-      />
-      <ToolbarResponsiveSize
-        v-if="!variant.responsiveDisabled"
-      />
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-      <ToolbarNewTab
-        :variant="variant"
-        :story="story"
-      />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
-        :file="story.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
-    <!-- Preview -->
     <StoryVariantSinglePreviewNative
       v-if="story.layout?.iframe === false"
       :story="story"
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index 84d8e9ba..af8a7b7b 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -106,6 +106,7 @@ function scrollDocsToTop() {
       :min="30"
       :max="95"
       :default-split="layoutStore.settings.storyOptionsPlacement === 'bottom' ? 60 : 75"
+      :show-divider="false"
       class="htw-h-full"
     >
       <template #first>
@@ -113,7 +114,11 @@ function scrollDocsToTop() {
       </template>
 
       <template #last>
-        <StorySidePanel />
+        <div class="htw-h-full htw-w-full htw-p-2">
+          <div class="htw-h-full htw-w-full htw-rounded-lg htw-border htw-border-gray-200 dark:htw-border-gray-700 htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700">
+            <StorySidePanel />
+          </div>
+        </div>
       </template>
     </BaseSplitPane>
   </div>
diff --git a/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue b/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
index a3f9e0ab..32f36013 100644
--- a/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
+++ b/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { openInEditor } from '../../util/open-in-editor.js'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 defineProps<{
   file: string
@@ -9,15 +10,15 @@ defineProps<{
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="tooltip"
     target="_blank"
-    class="histoire-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-open-in-editor"
     @click="openInEditor(file)"
   >
     <Icon
       icon="carbon:script-reference"
       class="htw-w-4 htw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
index 5f0d7f7c..68f07599 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
@@ -16,21 +16,20 @@ const contrastColor = computed(() => getContrastColor(settings))
     v-if="histoireConfig.backgroundPresets.length"
     placement="bottom-end"
     :skidding="6"
-    class="histoire-toolbar-background htw-h-full htw-flex-none"
+    class="histoire-toolbar-background htw-flex-none"
     data-test-id="toolbar-background"
   >
     <div
       v-tooltip="'Background color'"
-      class="htw-cursor-pointer hover:htw-text-primary-500 htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+      class="htw-flex htw-items-center htw-gap-1 htw-px-2.5 htw-py-1.5 hover:htw-bg-white/50 dark:hover:htw-bg-white/10 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100 htw-transition-colors htw-group"
     >
-      <div
-        class="bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50 htw-flex htw-items-center htw-justify-center htw-text-xs"
-      >
-        <span v-if="contrastColor">a</span>
-      </div>
       <Icon
-        icon="carbon:caret-down"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        icon="carbon:color-palette"
+        class="htw-w-4 htw-h-4"
+      />
+      <Icon
+        icon="carbon:chevron-down"
+        class="htw-w-3 htw-h-3 htw-opacity-40 group-hover:htw-opacity-70"
       />
     </div>
 
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
index aa9cddf2..4d4253d7 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
@@ -3,6 +3,7 @@ import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { getSandboxUrl } from '../../util/sandbox'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 const props = defineProps<{
   variant: Variant
@@ -15,15 +16,15 @@ const sandboxUrl = computed(() => {
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     target="_blank"
-    class="histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-new-tab"
   >
     <Icon
       icon="carbon:launch"
       class="htw-w-4 htw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
index 42dd1082..0f93cdb3 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
@@ -13,22 +13,22 @@ const settings = usePreviewSettingsStore().currentSettings
     placement="bottom-end"
     :skidding="6"
     :disabled="!histoireConfig.responsivePresets?.length"
-    class="histoire-toolbar-responsive-size htw-h-full htw-flex-none"
+    class="histoire-toolbar-responsive-size htw-flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
-      class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+      class="htw-flex htw-items-center htw-gap-1 htw-px-2.5 htw-py-1.5 htw-text-gray-900 dark:htw-text-gray-100 htw-transition-colors htw-group"
       :class="{
-        'htw-cursor-pointer hover:htw-text-primary-500': histoireConfig.responsivePresets?.length,
+        'hover:htw-bg-white/50 dark:hover:htw-bg-white/10 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer': histoireConfig.responsivePresets?.length,
       }"
     >
       <Icon
         icon="carbon:devices"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        class="htw-w-4 htw-h-4"
       />
       <Icon
-        icon="carbon:caret-down"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        icon="carbon:chevron-down"
+        class="htw-w-3 htw-h-3 htw-opacity-40 group-hover:htw-opacity-70"
       />
     </div>
 
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
index fe44e57b..753507ee 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
-    class="histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-text-direction"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >
     <Icon
       :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
       class="htw-w-4 htw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
index 263a616a..ad1f2dc5 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
@@ -1,21 +1,45 @@
 <script lang="ts" setup>
-import type { Variant } from '../../types'
+import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
 
-defineProps<{
-  variant: Variant
+const props = defineProps<{
+  variant?: Variant
+  story?: Story
 }>()
+
+const icon = computed(() => props.variant?.icon ?? props.story?.icon ?? 'carbon:cube')
+const iconColor = computed(() => props.variant?.iconColor ?? props.story?.iconColor)
+const title = computed(() => props.variant?.title ?? props.story?.title ?? '')
+const subtitle = computed(() => {
+  if (props.variant && props.story && props.story.title !== props.variant.title) {
+    return props.story.title
+  }
+  return undefined
+})
 </script>
 
 <template>
-  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
+  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-2 htw-min-w-0">
     <Icon
-      :icon="variant.icon ?? 'carbon:cube'"
-      class="htw-w-4 htw-h-4 htw-opacity-50"
+      :icon="icon"
+      class="htw-w-4 htw-h-4 htw-flex-none"
       :class="[
-        variant.iconColor ? 'bind-icon-color' : 'htw-text-gray-500',
+        iconColor ? 'bind-icon-color' : 'htw-text-gray-500 dark:htw-text-gray-400',
       ]"
     />
-    <span>{{ variant.title }}</span>
+    <div class="htw-flex htw-flex-col htw-justify-center htw-min-w-0 htw-leading-tight htw-text-center htw-h-[2.25rem]">
+      <span class="htw-truncate htw-text-sm htw-font-medium htw-text-gray-900 dark:htw-text-gray-100">{{ title }}</span>
+      <span
+        v-if="subtitle"
+        class="htw-truncate htw-text-xs htw-text-gray-500 dark:htw-text-gray-400"
+      >{{ subtitle }}</span>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('iconColor');
+}
+</style>

From a4b762feb3c1f6f5e67dd4a30a565bb0507fee5d Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 19:55:49 +0300
Subject: [PATCH 08/10] refactor(app): simplify topbar and layout store

---
 examples/vue3/cypress/e2e/layout.cy.js        |  2 +-
 packages/histoire-app/src/app/App.vue         |  5 --
 .../src/app/components/app/TopBar.vue         | 76 ++++++++--------
 .../src/app/components/layout/LayoutModal.vue | 15 +---
 .../src/app/components/layout/LayoutPane.vue  | 18 ++--
 .../app/components/panel/StorySidePanel.vue   | 86 ++++++++++---------
 .../src/app/components/story/StoryView.vue    | 16 ++--
 .../histoire-app/src/app/stores/layout.ts     | 15 ----
 8 files changed, 103 insertions(+), 130 deletions(-)

diff --git a/examples/vue3/cypress/e2e/layout.cy.js b/examples/vue3/cypress/e2e/layout.cy.js
index 0d92f743..4866cb14 100644
--- a/examples/vue3/cypress/e2e/layout.cy.js
+++ b/examples/vue3/cypress/e2e/layout.cy.js
@@ -2,7 +2,7 @@
 
 describe('Layout customization', () => {
   beforeEach(() => {
-    cy.window().then(w => w.localStorage.removeItem('_histoire-layout-v1'))
+    cy.clearLocalStorage()
     cy.visit('/')
   })
 
diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index 76f8e550..d963573e 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -65,13 +65,8 @@ useTitle(computed(() => {
   return histoireConfig.theme.title
 }))
 
-// Search
-
 const loadSearch = ref(false)
 const isSearchOpen = ref(false)
-
-// Layout
-
 const isLayoutOpen = ref(false)
 
 watch(isSearchOpen, (value) => {
diff --git a/packages/histoire-app/src/app/components/app/TopBar.vue b/packages/histoire-app/src/app/components/app/TopBar.vue
index 69585995..6dd78018 100644
--- a/packages/histoire-app/src/app/components/app/TopBar.vue
+++ b/packages/histoire-app/src/app/components/app/TopBar.vue
@@ -18,47 +18,43 @@ const storyStore = useStoryStore()
 </script>
 
 <template>
-  <div class="histoire-top-bar htw-flex-none htw-flex htw-items-center htw-h-14 htw-px-4 htw-gap-3">
-    <div class="htw-flex-1 htw-flex htw-items-center htw-justify-start htw-min-w-0">
-      <AppActions
-        class="htw-flex-none"
-        @layout="$emit('layout')"
-        @search="$emit('search')"
-      />
-    </div>
+  <div class="histoire-top-bar htw-flex-none htw-grid htw-grid-cols-[1fr_auto_1fr] htw-items-center htw-h-14 htw-px-4 htw-gap-3">
+    <AppActions
+      class="htw-justify-self-start"
+      @layout="$emit('layout')"
+      @search="$emit('search')"
+    />
 
-    <div class="htw-flex-none htw-flex htw-items-center htw-justify-center htw-min-w-0">
-      <TopBarChip
-        v-if="storyStore.currentStory || storyStore.currentVariant"
-        class="htw-px-6 htw-py-1.5 htw-max-w-full"
-      >
-        <ToolbarTitle
-          :variant="storyStore.currentVariant ?? undefined"
-          :story="storyStore.currentStory ?? undefined"
-        />
-      </TopBarChip>
-    </div>
+    <TopBarChip
+      v-if="storyStore.currentStory || storyStore.currentVariant"
+      class="htw-px-6 htw-py-1.5 htw-max-w-full"
+    >
+      <ToolbarTitle
+        :variant="storyStore.currentVariant ?? undefined"
+        :story="storyStore.currentStory ?? undefined"
+      />
+    </TopBarChip>
+    <span v-else />
 
-    <div class="htw-flex-1 htw-flex htw-items-center htw-justify-end htw-min-w-0">
-      <TopBarChip
-        v-if="storyStore.currentStory && !storyStore.currentStory.docsOnly"
-      >
-        <ToolbarResponsiveSize
-          v-if="storyStore.currentVariant && !storyStore.currentVariant.responsiveDisabled"
-        />
-        <ToolbarBackground />
-        <ToolbarTextDirection />
-        <ToolbarNewTab
-          v-if="storyStore.currentVariant"
-          :variant="storyStore.currentVariant"
-          :story="storyStore.currentStory"
-        />
-        <DevOnlyToolbarOpenInEditor
-          v-if="__HISTOIRE_DEV__"
-          :file="storyStore.currentStory.file?.filePath"
-          tooltip="Edit story in editor"
-        />
-      </TopBarChip>
-    </div>
+    <TopBarChip
+      v-if="storyStore.currentStory && !storyStore.currentStory.docsOnly"
+      class="htw-justify-self-end"
+    >
+      <ToolbarResponsiveSize
+        v-if="storyStore.currentVariant && !storyStore.currentVariant.responsiveDisabled"
+      />
+      <ToolbarBackground />
+      <ToolbarTextDirection />
+      <ToolbarNewTab
+        v-if="storyStore.currentVariant"
+        :variant="storyStore.currentVariant"
+        :story="storyStore.currentStory"
+      />
+      <DevOnlyToolbarOpenInEditor
+        v-if="__HISTOIRE_DEV__"
+        :file="storyStore.currentStory.file?.filePath"
+        tooltip="Edit story in editor"
+      />
+    </TopBarChip>
   </div>
 </template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutModal.vue b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
index 7ab9aa78..99072c9e 100644
--- a/packages/histoire-app/src/app/components/layout/LayoutModal.vue
+++ b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { useEventListener } from '@vueuse/core'
-import { defineAsyncComponent } from 'vue'
-import SearchLoading from '../search/SearchLoading.vue'
-
-const LayoutPane = defineAsyncComponent({
-  loader: () => import('./LayoutPane.vue'),
-  loadingComponent: SearchLoading,
-  delay: 0,
-})
+import { onKeyboardShortcut } from '../../util/keyboard'
+import LayoutPane from './LayoutPane.vue'
 
 const props = defineProps({
   shown: {
@@ -25,8 +18,8 @@ function close() {
   emit('close')
 }
 
-useEventListener(window, 'keydown', (event: KeyboardEvent) => {
-  if (props.shown && event.key === 'Escape') {
+onKeyboardShortcut(['escape'], () => {
+  if (props.shown) {
     close()
   }
 })
diff --git a/packages/histoire-app/src/app/components/layout/LayoutPane.vue b/packages/histoire-app/src/app/components/layout/LayoutPane.vue
index f34d3292..458c8374 100644
--- a/packages/histoire-app/src/app/components/layout/LayoutPane.vue
+++ b/packages/histoire-app/src/app/components/layout/LayoutPane.vue
@@ -3,7 +3,7 @@ import { useLayoutStore } from '../../stores/layout'
 import LayoutItem from './LayoutItem.vue'
 import LayoutItemGroup from './LayoutItemGroup.vue'
 
-const layoutStore = useLayoutStore()
+const settings = useLayoutStore().settings
 </script>
 
 <template>
@@ -12,16 +12,16 @@ const layoutStore = useLayoutStore()
       <LayoutItem
         title="Story List"
         icon="carbon:open-panel-filled-left"
-        :state-icon="layoutStore.settings.storyListVisible ? 'carbon:view' : 'carbon:view-off'"
+        :state-icon="settings.storyListVisible ? 'carbon:view' : 'carbon:view-off'"
         data-test-id="layout-toggle-story-list"
-        @click="layoutStore.toggleStoryList()"
+        @click="settings.storyListVisible = !settings.storyListVisible"
       />
       <LayoutItem
         title="Story Options"
         icon="carbon:open-panel-filled-right"
-        :state-icon="layoutStore.settings.storyOptionsVisible ? 'carbon:view' : 'carbon:view-off'"
+        :state-icon="settings.storyOptionsVisible ? 'carbon:view' : 'carbon:view-off'"
         data-test-id="layout-toggle-story-options"
-        @click="layoutStore.toggleStoryOptions()"
+        @click="settings.storyOptionsVisible = !settings.storyOptionsVisible"
       />
     </LayoutItemGroup>
 
@@ -29,16 +29,16 @@ const layoutStore = useLayoutStore()
       <LayoutItem
         title="Right"
         icon="carbon:open-panel-filled-right"
-        :is-active="layoutStore.settings.storyOptionsPlacement === 'right'"
+        :is-active="settings.storyOptionsPlacement === 'right'"
         data-test-id="layout-placement-right"
-        @click="layoutStore.setStoryOptionsPlacement('right')"
+        @click="settings.storyOptionsPlacement = 'right'"
       />
       <LayoutItem
         title="Bottom"
         icon="carbon:open-panel-filled-bottom"
-        :is-active="layoutStore.settings.storyOptionsPlacement === 'bottom'"
+        :is-active="settings.storyOptionsPlacement === 'bottom'"
         data-test-id="layout-placement-bottom"
-        @click="layoutStore.setStoryOptionsPlacement('bottom')"
+        @click="settings.storyOptionsPlacement = 'bottom'"
       />
     </LayoutItemGroup>
   </div>
diff --git a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
index e2c84e4d..2a3bf62b 100644
--- a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
+++ b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
@@ -34,49 +34,53 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <BaseEmpty
-    v-if="!storyStore.currentVariant"
-    class="histoire-story-side-panel histoire-selection"
-  >
-    <span>Select a variant</span>
-  </BaseEmpty>
+  <div class="htw-h-full htw-w-full htw-p-2">
+    <div class="htw-h-full htw-w-full htw-rounded-lg htw-border htw-border-gray-200 dark:htw-border-gray-700 htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700">
+      <BaseEmpty
+        v-if="!storyStore.currentVariant"
+        class="histoire-story-side-panel histoire-selection"
+      >
+        <span>Select a variant</span>
+      </BaseEmpty>
 
-  <BaseEmpty
-    v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
-    class="histoire-story-side-panel histoire-loading"
-  >
-    <span>Loading...</span>
-  </BaseEmpty>
+      <BaseEmpty
+        v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
+        class="histoire-story-side-panel histoire-loading"
+      >
+        <span>Loading...</span>
+      </BaseEmpty>
 
-  <BaseSplitPane
-    v-else
-    :save-id="`story-sidepane-${innerOrientation}`"
-    :orientation="innerOrientation"
-    class="histoire-story-side-panel histoire-loaded htw-h-full"
-    data-test-id="story-side-panel"
-  >
-    <template #first>
-      <div class="htw-flex htw-flex-col htw-h-full">
-        <PaneTabs
-          :story="storyStore.currentStory"
-          :variant="storyStore.currentVariant"
-        />
+      <BaseSplitPane
+        v-else
+        :save-id="`story-sidepane-${innerOrientation}`"
+        :orientation="innerOrientation"
+        class="histoire-story-side-panel histoire-loaded htw-h-full"
+        data-test-id="story-side-panel"
+      >
+        <template #first>
+          <div class="htw-flex htw-flex-col htw-h-full">
+            <PaneTabs
+              :story="storyStore.currentStory"
+              :variant="storyStore.currentVariant"
+            />
 
-        <component
-          :is="panelContentComponent"
-          :story="storyStore.currentStory"
-          :variant="storyStore.currentVariant"
-          class="htw-h-full htw-overflow-auto"
-        />
-      </div>
-    </template>
+            <component
+              :is="panelContentComponent"
+              :story="storyStore.currentStory"
+              :variant="storyStore.currentVariant"
+              class="htw-h-full htw-overflow-auto"
+            />
+          </div>
+        </template>
 
-    <template #last>
-      <StorySourceCode
-        :story="storyStore.currentStory"
-        :variant="storyStore.currentVariant"
-        class="htw-h-full"
-      />
-    </template>
-  </BaseSplitPane>
+        <template #last>
+          <StorySourceCode
+            :story="storyStore.currentStory"
+            :variant="storyStore.currentVariant"
+            class="htw-h-full"
+          />
+        </template>
+      </BaseSplitPane>
+    </div>
+  </div>
 </template>
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index af8a7b7b..612363be 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -19,6 +19,10 @@ const effectiveStoryOptionsVisible = computed(() =>
   storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible,
 )
 
+const placement = computed(() => layoutStore.settings.storyOptionsPlacement)
+const splitOrientation = computed(() => placement.value === 'bottom' ? 'portrait' : 'landscape')
+const splitDefaultSplit = computed(() => placement.value === 'bottom' ? 60 : 75)
+
 const router = useRouter()
 const route = useRoute()
 
@@ -101,11 +105,11 @@ function scrollDocsToTop() {
     </template>
     <BaseSplitPane
       v-else
-      :save-id="`story-main-${layoutStore.settings.storyOptionsPlacement}`"
-      :orientation="layoutStore.settings.storyOptionsPlacement === 'bottom' ? 'portrait' : 'landscape'"
+      :save-id="`story-main-${placement}`"
+      :orientation="splitOrientation"
       :min="30"
       :max="95"
-      :default-split="layoutStore.settings.storyOptionsPlacement === 'bottom' ? 60 : 75"
+      :default-split="splitDefaultSplit"
       :show-divider="false"
       class="htw-h-full"
     >
@@ -114,11 +118,7 @@ function scrollDocsToTop() {
       </template>
 
       <template #last>
-        <div class="htw-h-full htw-w-full htw-p-2">
-          <div class="htw-h-full htw-w-full htw-rounded-lg htw-border htw-border-gray-200 dark:htw-border-gray-700 htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700">
-            <StorySidePanel />
-          </div>
-        </div>
+        <StorySidePanel />
       </template>
     </BaseSplitPane>
   </div>
diff --git a/packages/histoire-app/src/app/stores/layout.ts b/packages/histoire-app/src/app/stores/layout.ts
index f6679c54..9e4a9728 100644
--- a/packages/histoire-app/src/app/stores/layout.ts
+++ b/packages/histoire-app/src/app/stores/layout.ts
@@ -16,22 +16,7 @@ export const useLayoutStore = defineStore('layout', () => {
     storyOptionsPlacement: 'right',
   })
 
-  function toggleStoryList() {
-    settings.value.storyListVisible = !settings.value.storyListVisible
-  }
-
-  function toggleStoryOptions() {
-    settings.value.storyOptionsVisible = !settings.value.storyOptionsVisible
-  }
-
-  function setStoryOptionsPlacement(value: StoryOptionsPlacement) {
-    settings.value.storyOptionsPlacement = value
-  }
-
   return {
     settings,
-    toggleStoryList,
-    toggleStoryOptions,
-    setStoryOptionsPlacement,
   }
 })

From 0c6761276430fd98e2ef5cbe3fedfa0059b57343 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 20:27:18 +0300
Subject: [PATCH 09/10] test(app): update existing specs for new toolbar title
 location

---
 examples/vue3/cypress/e2e/search.cy.js        | 8 ++++----
 examples/vue3/cypress/e2e/story-preview.cy.js | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/vue3/cypress/e2e/search.cy.js b/examples/vue3/cypress/e2e/search.cy.js
index 7ec5a989..fe64d32d 100644
--- a/examples/vue3/cypress/e2e/search.cy.js
+++ b/examples/vue3/cypress/e2e/search.cy.js
@@ -7,12 +7,12 @@ describe('Search', () => {
     cy.get('[data-test-id="search-modal"] input').type('Demo')
     cy.get('[data-test-id="search-item"]').should('have.length.greaterThan', 3)
     cy.get('[data-test-id="search-item"]').contains('untitled').click()
-    cy.get('[data-test-id="story-variant-single-view"]').contains('untitled')
+    cy.get('.histoire-toolbar-title').contains('untitled')
     cy.get('[data-test-id="search-btn"]').click()
     cy.get('[data-test-id="search-modal"] input').type('variant 2')
     cy.contains('[data-test-id="search-item"][data-selected]', 'Variant 2')
     cy.get('[data-test-id="search-modal"] input').type('{enter}')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('Variant 2')
+    cy.get('.histoire-toolbar-title').contains('Variant 2')
   })
 
   it('should handle keyboard navigation', () => {
@@ -21,13 +21,13 @@ describe('Search', () => {
     cy.get('[data-test-id="search-modal"] input').type('Demo')
     cy.contains('[data-test-id="search-item"][data-selected]', 'Demo')
     cy.get('[data-test-id="search-modal"] input').type('{downArrow}{enter}')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('untitled')
+    cy.get('.histoire-toolbar-title').contains('untitled')
     cy.get('[data-test-id="search-btn"]').click()
     cy.get('[data-test-id="search-modal"] input').clear()
     cy.get('[data-test-id="search-modal"] input').type('Demo')
     cy.contains('[data-test-id="search-item"][data-selected]', 'Demo')
     cy.get('[data-test-id="search-modal"] input').type('{downArrow}{downArrow}{enter}')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('Variant 2')
+    cy.get('.histoire-toolbar-title').contains('Variant 2')
   })
 
   it('should close', () => {
diff --git a/examples/vue3/cypress/e2e/story-preview.cy.js b/examples/vue3/cypress/e2e/story-preview.cy.js
index 766db5c6..a8e1b53e 100644
--- a/examples/vue3/cypress/e2e/story-preview.cy.js
+++ b/examples/vue3/cypress/e2e/story-preview.cy.js
@@ -11,7 +11,7 @@ describe('Story preview', () => {
     cy.get('[data-test-id="story-list-item"]').contains('Demo').click()
     cy.get('[data-test-id="story-variant-list-item"]').should('have.length', 2)
     cy.get('[data-test-id="story-variant-list-item"]').contains('untitled').click()
-    cy.get('[data-test-id="story-variant-single-view"]').contains('untitled')
+    cy.get('.histoire-toolbar-title').contains('untitled')
     getIframeBody().contains('Hello world!')
     cy.get('[data-test-id="story-source-code"]').should('have.text', '<Demo message="Hello world!" />')
   })
@@ -21,7 +21,7 @@ describe('Story preview', () => {
     cy.get('[data-test-id="story-list-item"]').contains('Demo').click()
     cy.get('[data-test-id="story-variant-list-item"]').should('have.length', 2)
     cy.get('[data-test-id="story-variant-list-item"]').contains('Variant 2').click()
-    cy.get('[data-test-id="story-variant-single-view"]').contains('Variant 2')
+    cy.get('.histoire-toolbar-title').contains('Variant 2')
     getIframeBody().contains('Meow!')
     cy.get('[data-test-id="story-source-code"]').should('have.text', '<Demo message="Meow!" />')
   })

From 5094084e3453b00fec6e0ea6e3522adce198118a Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Thu, 30 Apr 2026 21:24:41 +0300
Subject: [PATCH 10/10] fix(app): address PR feedback

---
 packages/histoire-app/src/app/App.vue                      | 6 ++++++
 packages/histoire-app/src/app/components/app/AppHeader.vue | 7 -------
 .../histoire-app/src/app/components/base/BaseListItem.vue  | 2 +-
 .../src/app/components/toolbar/ToolbarBackground.vue       | 4 ----
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index d963573e..7c28bc0c 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -24,6 +24,7 @@ import { useCommandStore } from './stores/command'
 import { useLayoutStore } from './stores/layout'
 import { useStoryStore } from './stores/story'
 import { histoireConfig } from './util/config'
+import { toggleDark } from './util/dark'
 import { onKeyboardShortcut } from './util/keyboard'
 import { mapFile } from './util/mapping'
 import { isMobile } from './util/responsive'
@@ -85,6 +86,11 @@ onKeyboardShortcut(['ctrl+shift+l', 'meta+shift+l'], (event) => {
   event.preventDefault()
 })
 
+onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
+  event.preventDefault()
+  toggleDark()
+})
+
 const loading = ref(false)
 
 if (import.meta.hot && !rawFiles.length) {
diff --git a/packages/histoire-app/src/app/components/app/AppHeader.vue b/packages/histoire-app/src/app/components/app/AppHeader.vue
index cd7cded7..db6c7fd8 100644
--- a/packages/histoire-app/src/app/components/app/AppHeader.vue
+++ b/packages/histoire-app/src/app/components/app/AppHeader.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import { histoireConfig } from '../../util/config'
-import { toggleDark } from '../../util/dark'
-import { onKeyboardShortcut } from '../../util/keyboard'
 import AppLogo from './AppLogo.vue'
-
-onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
-  event.preventDefault()
-  toggleDark()
-})
 </script>
 
 <template>
diff --git a/packages/histoire-app/src/app/components/base/BaseListItem.vue b/packages/histoire-app/src/app/components/base/BaseListItem.vue
index b768c7cc..f3ea8e4e 100644
--- a/packages/histoire-app/src/app/components/base/BaseListItem.vue
+++ b/packages/histoire-app/src/app/components/base/BaseListItem.vue
@@ -14,7 +14,7 @@ function handleNavigate() {
 
 <template>
   <a
-    class="histoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-base-list-item htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
     :class="[
       $attrs.class,
       isActive
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
index 68f07599..c84455c6 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
@@ -1,14 +1,10 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { histoireConfig } from '../../util/config'
-import { getContrastColor } from '../../util/preview-settings'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
-
-const contrastColor = computed(() => getContrastColor(settings))
 </script>
 
 <template>