Add blank slate for excursions tab

entry_types/scrolled/config/locales/de.yml

@@ -1319,6 +1319,20 @@ de:
         done: Fertig
         add_chapter: Neues Kapitel
         add_excursion: Neuer Exkurs
+        excursion_blank_slate: |-
+          <p>
+            <strong>Exkurse</strong> bieten zusätzliche Inhalte abseits des
+            Hauptpfads. Sie öffnen sich in einer <strong>separaten
+            Ebene</strong> und der Leser kehrt automatisch zur
+            ursprünglichen Position zurück.
+          </p>
+          <p>
+            Lege deinen ersten Exkurs an und <strong>verlinke
+            ihn</strong> aus deinem Beitrag, um ihn für Leser zugänglich
+            zu machen.
+          </p>
+          <a target="_blank" rel="noopener noreferrer"
+              href="https://pageflow.freshdesk.com/de/support/solutions/articles/11000134532-was-sind-exkurse-und-wie-nutze-ich-sie-fr-vertiefende-inhalte">Mehr über Exkurse erfahren</a>
       aspect_ratios:
         narrow: Landscape (4:3)
         portrait: Portrait (3:4)

entry_types/scrolled/config/locales/en.yml

@@ -1301,6 +1301,20 @@ en:
         done: Done
         add_chapter: New chapter
         add_excursion: New excursion
+        excursion_blank_slate: |-
+          <p>
+            <strong>Excursions</strong> provide additional content
+            outside the main path. They open in a <strong>separate
+            layer</strong> and readers automatically return to their
+            original position.
+          </p>
+          <p>
+            Create your first excursion and <strong>link to
+            it</strong> from your story to make it accessible to
+            readers.
+          </p>
+          <a target="_blank" rel="noopener noreferrer"
+              href="https://pageflow.freshdesk.com/en/support/solutions/articles/11000134532-what-are-excursions-and-how-can-i-use-them-for-in-depth-content">Learn more about excursions</a>
       aspect_ratios:
         narrow: Landscape (4:3)
         portrait: Portrait (3:4)

entry_types/scrolled/package/spec/editor/views/EntryOutlineView-spec.js

@@ -9,7 +9,8 @@ import '@testing-library/jest-dom/extend-expect';
 describe('EntryOutlineView', () => {
   useFakeTranslations({
     'pageflow_scrolled.editor.storylines_tabs.main': 'Main',
-    'pageflow_scrolled.editor.storylines_tabs.excursions': 'Excursions'
+    'pageflow_scrolled.editor.storylines_tabs.excursions': 'Excursions',
+    'pageflow_scrolled.editor.storyline_item.excursion_blank_slate': 'Excursions provide additional content outside the main path. Create your first excursion.'
   });
 
   const {createEntry} = useEditorGlobals();
@@ -310,4 +311,55 @@ describe('EntryOutlineView', () => {
     expect(mainTab).toHaveAttribute('aria-selected', 'true');
     expect(screen.getByRole('link', {name: /Main Story Chapter/})).toBeInTheDocument();
   });
+
+  it('displays blank slate on excursions tab when no chapters exist', async () => {
+    const entry = createEntry({
+      storylines: [
+        {
+          id: 10,
+          permaId: 200,
+          position: 0,
+          configuration: {main: true}
+        },
+        {
+          id: 11,
+          permaId: 201,
+          position: 1,
+          configuration: {}
+        }
+      ],
+      chapters: [
+        {
+          id: 1,
+          permaId: 100,
+          position: 0,
+          storylineId: 10,
+          configuration: {
+            title: 'Main Story Chapter'
+          }
+        }
+      ]
+    });
+
+    const user = userEvent.setup();
+
+    render(new EntryOutlineView({entry}));
+
+    const tablist = screen.getByRole('tablist');
+    const excursionsTab = within(tablist).getByRole('tab', {name: 'Excursions'});
+
+    await user.click(excursionsTab);
+
+    expect(screen.getByText(/Excursions provide additional content outside the main path/)).toBeInTheDocument();
+  });
+
+  it('does not display blank slate on main tab when no chapters exist', () => {
+    const entry = createEntry({
+      chapters: []
+    });
+
+    render(new EntryOutlineView({entry}));
+
+    expect(screen.queryByText(/Excursions provide additional content outside the main path/)).toBeNull();
+  });
 });

entry_types/scrolled/package/src/editor/views/ExcursionBlankSlateView.js

@@ -0,0 +1,18 @@
+import Marionette from 'backbone.marionette';
+import I18n from 'i18n-js';
+
+import pictogramUrl from './images/excursion-pictogram.svg';
+import styles from './ExcursionBlankSlateView.module.css';
+
+export const ExcursionBlankSlateView = Marionette.ItemView.extend({
+  className: styles.box,
+
+  template: () => `
+    <div class="${styles.pictogram}">
+      <img src="${pictogramUrl}" alt="" />
+    </div>
+    <div>
+      ${I18n.t('pageflow_scrolled.editor.storyline_item.excursion_blank_slate')}
+    </div>
+  `
+});

entry_types/scrolled/package/src/editor/views/ExcursionBlankSlateView.module.css

@@ -0,0 +1,27 @@
+.box {
+  border-radius: rounded(lg);
+  padding: space(3);
+  margin-bottom: space(3);
+  background-color: var(--ui-selection-color-lighter);
+}
+
+.box p {
+  line-height: 1.4;
+  margin-bottom: 1em;
+}
+
+.box a {
+  text-decoration: underline;
+}
+
+.pictogram {
+  margin-bottom: space(3);
+  text-align: center;
+}
+
+.pictogram img {
+  width: 100%;
+  max-width: 20rem;
+  height: auto;
+  border-radius: rounded();
+}

entry_types/scrolled/package/src/editor/views/StorylineItemView.js

@@ -3,6 +3,7 @@ import I18n from 'i18n-js';
 import {cssModulesUtils, SortableCollectionView} from 'pageflow/ui';
 
 import {ChapterItemView} from './ChapterItemView';
+import {ExcursionBlankSlateView} from './ExcursionBlankSlateView';
 
 import styles from './StorylineItemView.module.css';
 import outlineStyles from './outline.module.css';
@@ -61,7 +62,8 @@ export const StorylineItemView = Marionette.Layout.extend({
       itemViewConstructor: ChapterItemView,
       itemViewOptions: {
         entry: this.options.entry
-      }
+      },
+      blankSlateViewConstructor: this.model.isMain() ? null : ExcursionBlankSlateView
     });
 
     this.subview(this.sortableCollectionView);