feat: preview/publish single + bulk on browse

blocks/browse/da-actionbar/da-actionbar.css

@@ -56,6 +56,33 @@ button {
   gap: var(--s2-spacing-75);
 }
 
+.da-action-bar .preview-button img,
+.da-action-bar .publish-button img {
+  filter: brightness(0) invert(1);
+}
+
+.da-action-bar .preview-button.loading img,
+.da-action-bar .publish-button.loading img {
+  display: none;
+}
+
+.da-action-bar .preview-button.loading::before,
+.da-action-bar .publish-button.loading::before {
+  content: "";
+  display: block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgb(255 255 255 / 40%);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: ab-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes ab-spin {
+  to { transform: rotate(360deg); }
+}
+
 .da-action-bar.hide,
 .da-action-bar .hide {
   display: none;

blocks/browse/da-actionbar/da-actionbar.js

@@ -22,6 +22,7 @@ export default class DaActionBar extends LitElement {
   static properties = {
     items: { attribute: false },
     permissions: { attribute: false },
+    loading: { attribute: false },
     isFavorite: { attribute: false },
     isHlx6: { attribute: false },
     _isCopying: { state: true },
@@ -102,6 +103,18 @@ export default class DaActionBar extends LitElement {
     this.dispatchEvent(event);
   }
 
+  handlePreview() {
+    const opts = { bubbles: true, composed: true };
+    const event = new CustomEvent('onpreview', opts);
+    this.dispatchEvent(event);
+  }
+
+  handlePublish() {
+    const opts = { bubbles: true, composed: true };
+    const event = new CustomEvent('onpublish', opts);
+    this.dispatchEvent(event);
+  }
+
   async handleShare() {
     const { items2Clipboard } = await import('../da-list/helpers/utils.js');
     items2Clipboard(this.items);
@@ -122,6 +135,10 @@ export default class DaActionBar extends LitElement {
     return this.permissions.some((permission) => permission === 'write');
   }
 
+  get _canAemAction() {
+    return this._canWrite && this.items.some((item) => item.ext && item.ext !== 'link') && !this._isCopying;
+  }
+
   get _canRename() {
     if (!this._canWrite) return false;
     const isFolder = !this.items[0]?.ext;
@@ -134,8 +151,7 @@ export default class DaActionBar extends LitElement {
   }
 
   get _canShare() {
-    const isFile = this.items.some((item) => item.ext && item.ext !== 'link');
-    return isFile && !this._isCopying;
+    return this.items.some((item) => item.ext && item.ext !== 'link') && !this._isCopying;
   }
 
   get currentAction() {
@@ -197,6 +213,20 @@ export default class DaActionBar extends LitElement {
             ${icon('delete')}
             <span>Delete</span>
           </button>
+          <button
+            @click=${this.handlePreview}
+            ?disabled=${!!this.loading}
+            class="preview-button ${this._canAemAction ? '' : 'hide'} ${this.loading === 'preview' ? 'loading' : ''}">
+            <img src="/blocks/edit/img/S2_Icon_Preview_20_N.svg" alt="" aria-hidden="true"/>
+            <span>Preview</span>
+          </button>
+          <button
+            @click=${this.handlePublish}
+            ?disabled=${!!this.loading}
+            class="publish-button ${this._canAemAction ? '' : 'hide'} ${this.loading === 'publish' ? 'loading' : ''}">
+            <img src="/blocks/edit/img/S2_Icon_Publish_20_N.svg" alt="" aria-hidden="true"/>
+            <span>Publish</span>
+          </button>
           <button
             @click=${this.handleShare}
             class="share-button ${this._canShare ? '' : 'hide'}">

blocks/browse/da-list/da-list.css

@@ -309,6 +309,29 @@ da-list-item.is-expanded::after {
   filter: brightness(0) invert(1);
 }
 
+.da-aem-results-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 24px;
+  z-index: 400;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 18px;
+  border: none;
+  background: var(--s2-blue-800);
+  color: #fff;
+  font-size: 14px;
+  font-family: var(--body-font-family);
+  cursor: pointer;
+  filter: drop-shadow(rgb(0 0 0 / 20%) 0 2px 6px);
+  white-space: nowrap;
+}
+
+.da-aem-results-btn:hover {
+  background: var(--s2-blue-900);
+}
+
+
 /* Drop conflicts dialog */
 .da-drop-conflicts {
   margin: 8px 0 0;
@@ -334,4 +357,13 @@ da-list-item.is-expanded::after {
   display: flex;
   align-items: center;
   gap: var(--s2-spacing-75);
+}
+
+.da-list-note-excluded {
+  display: inline-block;
+  text-transform: lowercase;
+}
+
+.da-list-note-excluded::first-letter {
+  text-transform: uppercase;
 }