feat: comments

Author: usman-khalid

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

@@ -254,47 +254,6 @@ da-list-item.is-expanded::after {
   display: none;
 }
 
-.da-list-status {
-  position: fixed;
-  inset: 0;
-  background: rgb(255 255 255 / 60%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 500;
-}
-
-.da-list-status-toast {
-  width: 280px;
-  background: var(--s2-blue-800);
-  line-height: 48px;
-  border-radius: 6px;
-  filter: drop-shadow(rgb(0 0 0 / 15%) 0 1px 4px);
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  color: #fff;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-.da-list-status-title {
-  font-weight: 700;
-  padding: 0 12px 0 40px;
-  margin: 0;
-}
-
-.da-list-status-description {
-  line-height: 1.6;
-  padding: 6px 12px;
-  margin: 0;
-  background: rgb(255 255 255 / 10%);
-}
-
-.da-list-status-type-info .da-list-status-title {
-  background: var(--s2-blue-800) url("/blocks/browse/img/Smock_InfoOutline_18_N.svg") 12px 50% no-repeat;
-}
-
 /* Checkbox */
 
 .checkbox-wrapper {

blocks/browse/da-list/da-list.js

@@ -35,7 +35,7 @@ export default class DaList extends LitElement {
     _dropFiles: { state: true },
     _dropMessage: { state: true },
     _dropConflicts: { state: true },
-    _status: { state: true },
+    _toast: { state: true },
     _confirm: { state: true },
     _confirmText: { state: true },
     _unpublish: { state: true },
@@ -90,16 +90,17 @@ export default class DaList extends LitElement {
 
   async firstUpdated() {
     await import('../../shared/da-dialog/da-dialog.js');
+    await import('../../shared/da-toast/da-toast.js');
     await import('../da-actionbar/da-actionbar.js');
     this.setupObserver();
   }
 
   setStatus(text, description, type = 'info') {
     if (!text) {
-      this._status = null;
+      this._toast = null;
       return;
     }
-    this._status = { type, text, description };
+    this._toast = { type, text, description, duration: 0 };
   }
 
   handlePermissions(permissions) {
@@ -363,7 +364,7 @@ export default class DaList extends LitElement {
       return pasteItem;
     });
 
-    const showStatus = setTimeout(() => {
+    const pasteStatusTimer = setTimeout(() => {
       this.setStatus('Pasting', 'Please be patient. Pasting items with many children can take time.');
     }, 2000);
 
@@ -373,7 +374,7 @@ export default class DaList extends LitElement {
       await this.handleItemAction({ item, type });
     }));
 
-    clearTimeout(showStatus);
+    clearTimeout(pasteStatusTimer);
 
     this.setStatus();
     this.handleClear();
@@ -427,8 +428,7 @@ export default class DaList extends LitElement {
   }
 
   handleShare() {
-    this.setStatus('Copied', 'URLs have been copied to the clipboard.');
-    setTimeout(() => { this.setStatus(); }, 3000);
+    this._toast = { text: 'Copied', description: 'URLs have been copied to the clipboard.' };
   }
 
   dragenter(e) {
@@ -676,13 +676,7 @@ export default class DaList extends LitElement {
   }
 
   renderStatus() {
-    return html`
-      <div class="da-list-status">
-        <div class="da-list-status-toast da-list-status-type-${this._status.type}">
-          <p class="da-list-status-title">${this._status.text}</p>
-          ${this._status.description ? html`<p class="da-list-status-description">${this._status.description}</p>` : nothing}
-        </div>
-      </div>`;
+    return html`<da-toast .toast=${this._toast} @close=${() => { this._toast = null; }}></da-toast>`;
   }
 
   renderConfirm() {
@@ -870,7 +864,7 @@ export default class DaList extends LitElement {
         currentPath="${this.fullpath}"
         role="row"
         data-visible="${this._selectedItems?.length > 0}"></da-actionbar>
-      ${this._status ? this.renderStatus() : nothing}
+      ${this._toast ? this.renderStatus() : nothing}
       ${this._confirm ? this.renderConfirm() : nothing}
       ${this._dropConflicts?.length ? this.renderDropConfirm() : nothing}
       ${!this._confirm && this._itemErrors.length ? this.renderErrors() : nothing}

blocks/browse/da-sites/da-sites.css

@@ -411,45 +411,3 @@ form button:hover {
   text-align: center;
 }
 
-/* Handle Share */
-
-.da-list-status {
-  position: fixed;
-  inset: 0;
-  background: rgb(255 255 255 / 60%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 500;
-}
-
-.da-list-status-toast {
-  width: 280px;
-  background: var(--s2-blue-800);
-  line-height: 48px;
-  border-radius: 6px;
-  filter: drop-shadow(rgb(0 0 0 / 15%) 0 1px 4px);
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  color: #FFF;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-.da-list-status-title {
-  font-weight: 700;
-  padding: 0 12px 0 40px;
-  margin: 0;
-}
-
-.da-list-status-description {
-  line-height: 1.6;
-  padding: 6px 12px;
-  margin: 0;
-  background: rgb(255 255 255 / 10%);
-}
-
-.da-list-status-type-info .da-list-status-title {
-  background: var(--s2-blue-800) url('/blocks/browse/img/Smock_InfoOutline_18_N.svg') 12px 50% no-repeat;
-}

blocks/browse/da-sites/da-sites.js

@@ -13,7 +13,7 @@ function getRandom() {
 export default class DaSites extends LitElement {
   static properties = {
     _recents: { state: true },
-    _status: { state: true },
+    _toast: { state: true },
     _urlError: { state: true },
   };
 
@@ -26,6 +26,7 @@ export default class DaSites extends LitElement {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [sheet];
     this.getRecents();
+    import('../../shared/da-toast/da-toast.js');
   }
 
   mapRecentSites(recentSites) {
@@ -60,10 +61,6 @@ export default class DaSites extends LitElement {
     }
   }
 
-  setStatus(text, description, type = 'info') {
-    this._status = text ? { type, text, description } : null;
-  }
-
   handleRemove(site) {
     // Get the index of the site to remove
     const idx = this._recents.findIndex((recent) => recent.name === site.name);
@@ -119,18 +116,7 @@ export default class DaSites extends LitElement {
     const data = [new ClipboardItem({ [blob.type]: blob })];
     navigator.clipboard.write(data);
 
-    this.setStatus('Copied', 'The link was copied to the clipboard.');
-    setTimeout(() => { this.setStatus(); }, 3000);
-  }
-
-  renderStatus() {
-    return html`
-      <div class="da-list-status">
-        <div class="da-list-status-toast da-list-status-type-${this._status.type}">
-          <p class="da-list-status-title">${this._status.text}</p>
-          ${this._status.description ? html`<p class="da-list-status-description">${this._status.description}</p>` : nothing}
-        </div>
-      </div>`;
+    this._toast = { text: 'Copied', description: 'The link was copied to the clipboard.' };
   }
 
   renderGo() {
@@ -250,7 +236,7 @@ export default class DaSites extends LitElement {
           </a>
         </div>
       </div>
-      ${this._status ? this.renderStatus() : nothing}
+      <da-toast .toast=${this._toast} @close=${() => { this._toast = null; }}></da-toast>
     `;
   }
 }