Collapsible source headings

src/controllers/ElementIndexSettingsController.php

@@ -243,7 +243,7 @@ public function actionSaveCustomizeSourcesModalSettings(): Response
         // Get the old source configs
         $projectConfig = Craft::$app->getProjectConfig();
         $oldSourceConfigs = $projectConfig->get(ProjectConfig::PATH_ELEMENT_SOURCES . ".$elementType") ?? [];
-        $oldSourceConfigs = ArrayHelper::index(array_filter($oldSourceConfigs, fn($s) => $s['type'] !== ElementSources::TYPE_HEADING), 'key');
+        $oldSourceConfigs = ArrayHelper::index($oldSourceConfigs, 'key');
 
         $conditionsService = Craft::$app->getConditions();
 
@@ -254,22 +254,26 @@ public function actionSaveCustomizeSourcesModalSettings(): Response
 
         // Normalize to the way it's stored in the DB
         foreach ($sourceOrder as $source) {
-            if (isset($source['heading'])) {
-                $newSourceConfigs[] = [
-                    'type' => ElementSources::TYPE_HEADING,
-                    'heading' => $source['heading'],
-                ];
-            } elseif (isset($source['key'])) {
-                $isCustom = str_starts_with($source['key'], 'custom:');
+            if (isset($source['key'])) {
+                $type = match (true) {
+                    str_starts_with($source['key'], 'custom:') => ElementSources::TYPE_CUSTOM,
+                    str_starts_with($source['key'], 'heading:') => ElementSources::TYPE_HEADING,
+                    default => ElementSources::TYPE_NATIVE,
+                };
+
+                $isCustom = $type === ElementSources::TYPE_CUSTOM;
                 $sourceConfig = [
-                    'type' => $isCustom ? ElementSources::TYPE_CUSTOM : ElementSources::TYPE_NATIVE,
+                    'type' => $type,
                     'key' => $source['key'],
                 ];
 
                 // Were new settings posted?
                 if (isset($sourceSettings[$source['key']])) {
                     $postedSettings = $sourceSettings[$source['key']];
-                    $sourceConfig['tableAttributes'] = array_values(array_filter($postedSettings['tableAttributes'] ?? [])) ?: '-';
+
+                    if ($type !== ElementSources::TYPE_HEADING) {
+                        $sourceConfig['tableAttributes'] = array_values(array_filter($postedSettings['tableAttributes'] ?? [])) ?: '-';
+                    }
 
                     if (isset($postedSettings['defaultSort'])) {
                         $sourceConfig['defaultSort'] = $postedSettings['defaultSort'];
@@ -292,6 +296,8 @@ public function actionSaveCustomizeSourcesModalSettings(): Response
                         if (isset($postedSettings['userGroups']) && $postedSettings['userGroups'] !== '*') {
                             $sourceConfig['userGroups'] = is_array($postedSettings['userGroups']) ? $postedSettings['userGroups'] : false;
                         }
+                    } elseif ($type === ElementSources::TYPE_HEADING) {
+                        $sourceConfig['heading'] = $postedSettings['heading'];
                     } elseif (isset($postedSettings['enabled'])) {
                         $sourceConfig['disabled'] = !$postedSettings['enabled'];
                         if ($sourceConfig['disabled']) {

src/templates/_elements/sources.twig

@@ -81,31 +81,63 @@
 
 {% set nestedUnderHeading = false %}
 
+{% set toggleContent %}
+    <span class="cp-icon puny">
+        {{ iconSvg('angle-down') }}
+    </span>
+    <span class="visually-hidden">{{ 'Show nested sources' | t('app') }}</span>
+{% endset %}
+
 {% tag 'ul' with {
     class: keyPrefix ? 'nested' : null,
+    id: id ?? ''
 } %}
     {% for source in sources %}
         {% if (source.type ?? null) == 'heading' %}
+            {% set key = source.key ?? source.heading | kebab %}
             {% if nestedUnderHeading %}
                     </ul>
                 </li>
             {% endif %}
             <li class="heading">
-                <span>{{ source.heading|t('site') }}</span>
-                <ul>
+                <div class="source-item source-item--heading">
+                    <span class="type-heading-small">{{ source.heading|t('site') }}</span>
+                    {% include '_includes/disclosure-toggle' with {
+                        cookieName: 'sources-list:'~ key,
+                        controls: key,
+                        content: toggleContent,
+                        attributes: {
+                            class: 'source-item__toggle'
+                        }
+                    } only %}
+                </div>
+                <ul id="{{ key }}">
             {% set nestedUnderHeading = true %}
         {% elseif (source.sites ?? null) is not same as([]) %}
             {% set key = source.keyPath ?? (keyPrefix ~ source.key) %}
             {% tag 'li' with {
                 class: [
+                    (source.nested ?? false) ? 'collapsible' : null,
                     (source.disabled ?? false) ? 'hidden' : null,
                 ]|filter,
             } %}
-                {{ _self.sourceLink(key, source, isTopLevel, elementType, sortOptions ?? null, baseSortOptions ?? null, tableColumns ?? null, defaultTableColumns ?? null, viewModes ?? null) }}
+                <div class="source-item source-item--link">
+                    {{ _self.sourceLink(key, source, isTopLevel, elementType, sortOptions ?? null, baseSortOptions ?? null, tableColumns ?? null, defaultTableColumns ?? null, viewModes ?? null) }}
+                    {% if source.nested is defined and source.nested is not empty %}
+                        {% include '_includes/disclosure-toggle' with {
+                            cookieName: 'sources-list:'~ key,
+                            controls: key,
+                            content: toggleContent,
+                            attributes: {
+                                class: 'source-item__toggle'
+                            }
+                        } only %}
+                    {% endif %}
+                </div>
                 {% if source.nested is defined and source.nested is not empty %}
-                    <button class="toggle" aria-expanded="false" aria-label="{{ 'Show nested sources'|t('app') }}"></button>
                     {% include "_elements/sources" with {
                         keyPrefix: key ~ '/',
+                        id: key,
                         sources: source.nested
                     } %}
                 {% endif %}

src/web/assets/cp/src/css/_cp.scss

@@ -1620,6 +1620,52 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
+%type-heading-small {
+  text-transform: uppercase;
+  color: var(--medium-text-color);
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.source-item {
+  --source-item-toggle-size: calc(20rem / 16);
+  position: relative;
+
+  // Toggle button
+  .source-item__toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    width: var(--source-item-toggle-size);
+    height: var(--source-item-toggle-size);
+    z-index: 1;
+    color: inherit;
+  }
+
+  &:has(.sel) {
+    --icon-color: var(--white);
+  }
+}
+
+.has-active-child {
+  --icon-color: var(--white);
+
+  .source-item__toggle {
+    background-color: var(--gray-500);
+    color: var(--white);
+    border-radius: 4px;
+  }
+}
+
+.source-item--heading {
+  @extend %type-heading-small;
+}
+
 /* Sidebar */
 .sidebar {
   width: $sidebarWidth;
@@ -1635,38 +1681,38 @@ li.breadcrumb-toggle-wrapper {
   .heading {
     position: relative;
     margin-block: 0;
-    margin-inline: var(--xl);
+    line-height: 1.2;
 
     &:not(:first-child) {
       margin-block-start: var(--m);
     }
 
+    .type-heading-small,
     & > span {
+      // Backwards compatibility
+      @extend %type-heading-small;
       display: inline-block;
       position: relative;
       z-index: 1;
       padding-block: 0;
-      padding-inline: 5px;
+      padding-inline: var(--xl) var(--m);
       margin-block: 0;
-      margin-inline: -5px;
-      text-transform: uppercase;
-      color: var(--medium-text-color);
-      font-size: 11px;
-      font-weight: bold;
     }
 
     & > ul {
-      margin-block: 2px;
-      margin-inline: calc(var(--xl) * -1);
+      margin-block: var(--xs) 2px;
     }
   }
 
   @mixin nav-level($level) {
-    & > a {
+    & > a,
+    .type-heading-small,
+    [data-source-item] {
       padding-inline-start: 24px + 14 * $level;
     }
 
-    & > .toggle {
+    & > .toggle,
+    [aria-controls] {
       inset-inline-start: calc(var(--m) * #{$level});
     }
   }
@@ -1701,7 +1747,8 @@ li.breadcrumb-toggle-wrapper {
     li {
       position: relative;
 
-      &:not(.has-subnav) > a {
+      &:not(.has-subnav) > a,
+      &:not(.has-subnav) [data-source-item] {
         &:not(.sel):hover {
           text-decoration: none;
         }
@@ -1733,7 +1780,7 @@ li.breadcrumb-toggle-wrapper {
         flex-direction: row;
         align-items: center;
         padding-block: 7px;
-        padding-inline: var(--xl);
+        padding-inline: var(--xl) var(--m);
         min-height: var(--xl);
         box-sizing: border-box;
         color: var(--text-color);
@@ -1812,14 +1859,26 @@ li.breadcrumb-toggle-wrapper {
         justify-content: center;
       }
 
-      ul {
+      ul:not([data-state]) {
         display: none;
       }
 
+      ul[data-state='collapsed'] {
+        display: none;
+      }
+
+      ul[data-state='expanded'] {
+        display: block;
+      }
+
       &.heading,
       &.expanded {
         & > ul {
           display: block;
+
+          &[data-state='collapsed'] {
+            display: none;
+          }
         }
       }
     }

src/web/assets/cp/src/css/_craft-disclosure.scss

@@ -0,0 +1,9 @@
+craft-disclosure {
+  [aria-expanded='true'] .cp-icon {
+    transform: rotate(180deg);
+  }
+
+  [aria-expanded='false'] .cp-icon {
+    transform: rotate(0deg);
+  }
+}

src/web/assets/cp/src/css/_main.scss

@@ -1103,6 +1103,7 @@ a.fieldtoggle::before {
 }
 
 .toggle.expanded::before,
+.toggle[aria-expanded='true']::before,
 button.fieldtoggle:not(.lightswitch).expanded::before,
 a.fieldtoggle.expanded::before,
 .sidebar nav li.expanded > .toggle::before,

src/web/assets/cp/src/css/craft.scss

@@ -6,6 +6,7 @@
 @use 'cp';
 @use 'range';
 @use 'global-sidebar';
+@use 'craft-disclosure';
 @use 'craft-spinner';
 @use 'craft-tooltip';
 @use 'preview';

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -3158,9 +3158,11 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     // -------------------------------------------------------------------------
 
     _getSourcesInList: function ($list, topLevel) {
-      let $sources = $list.find('> li:not(.heading) > a');
+      let $sources = $list.find('> li:not(.heading) [data-source-item]');
       if (topLevel) {
-        $sources = $sources.add($list.find('> li.heading > ul > li > a'));
+        $sources = $sources.add(
+          $list.find('> li.heading > ul > li [data-source-item]')
+        );
       }
       return $sources;
     },
@@ -3963,11 +3965,35 @@ const SourceNav = Garnish.Base.extend(
     $container: null,
     $items: null,
     $selectedItem: null,
+    $disclosures: null,
+    activeChildClass: null,
 
     init: function (container, settings) {
       this.$container = $(container);
       this.setSettings(settings, SourceNav.defaults);
       this.$items = $();
+      this.initDisclosures();
+    },
+
+    initDisclosures: function () {
+      const self = this;
+      this.$disclosures = this.$container.find('craft-disclosure');
+      this.$disclosures.on('open', function () {
+        $(this)
+          .closest(`.${self.settings.activeChildClass}`)
+          .removeClass(self.settings.activeChildClass);
+      });
+
+      this.$disclosures.on('close', function () {
+        const disclosure = $(this)[0];
+        const target = disclosure.target;
+
+        if (target.querySelector(`.${self.settings.selectedClass}`)) {
+          $(disclosure.trigger)
+            .closest('.source-item')
+            .addClass(self.settings.activeChildClass);
+        }
+      });
     },
 
     addItems: function (items) {
@@ -4048,6 +4074,11 @@ const SourceNav = Garnish.Base.extend(
         .attr('aria-current', 'false')
         .removeClass(this.settings.selectedClass);
 
+      // Reset all disclosures
+      $(`.${this.settings.activeChildClass}`).removeClass(
+        this.settings.activeChildClass
+      );
+
       this.onSelectionChange();
     },
 
@@ -4109,6 +4140,7 @@ const SourceNav = Garnish.Base.extend(
   },
   {
     defaults: {
+      activeChildClass: 'has-active-child',
       selectedClass: 'sel',
       onSelectionChange: $.noop,
       handleCtrlClicks: false,