GH-96 - Ability to rename files and folders

UI updates to provide rename option for files and folders.

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

@@ -517,6 +517,32 @@ li.da-actions-menu-item button:hover {
   min-height: 400px;
 }
 
+/* Loader */
+.da-loader-overlay {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.7);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.da-loader {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 2s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 
 @media (min-width: 900px) {
   .da-breadcrumb {

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

@@ -212,6 +212,67 @@ export default class DaBrowse extends LitElement {
     this._canPaste = false;
   }
 
+  renameBtnVisibility(item) {
+    if (this._selectedItems.length === 1) {
+      this._oneSelected = true;
+    } else {
+      this._oneSelected = false;
+    }
+  }
+
+  handleRename() {
+    const item = this._selectedItems[0];    
+    const _listItems = this.shadowRoot.querySelectorAll('.da-item-list-item-title');
+    let listItem;
+
+    // Find the selected item in the list
+    _listItems.forEach((li) => {
+      const href = li.getAttribute('href');
+      const path = href.replace(/\/edit#|\/sheet#|\/media#|#/, '');
+      if (item.path.includes(path)) {
+        listItem = li;
+        return;
+      }
+    });
+
+    if (!listItem) {
+      console.error('Selected item not found in the list.');
+      return;
+    }
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = item.name;
+    input.className = 'da-item-list-item-title';
+    input.addEventListener('keydown', async (e) => {
+      const resetSelection = () => {
+        input.replaceWith(listItem);
+        input.remove();
+        this.clearSelection();
+        this.requestUpdate();
+      };
+
+      if (e.key === 'Enter') {
+        const newname = item.ext ? `${input.value}.${item.ext}` : input.value;
+        const formData = new FormData();
+        formData.append('newname', newname);
+        const opts = { method: 'POST', body: formData };
+        input.insertAdjacentHTML('afterend', '<div class="da-loader-overlay"><div class="da-loader"></div></div>');
+        await daFetch(`${DA_ORIGIN}/rename${item.path}`, opts);        
+        input.nextElementSibling.remove();
+        // Update the item with new name and path
+        item.path = item.path.substring(0, item.path.lastIndexOf('/') + 1) + newname;
+        item.name = input.value;        
+        resetSelection();
+      } else if (e.key === 'Escape') {
+        resetSelection();
+      }
+    });
+
+    listItem.replaceWith(input);
+    input.focus();
+  }
+
   handleTab(idx) {
     const current = this._tabItems.find((item) => item.selected);
     if (this._tabItems[idx].id === current.id) return;
@@ -292,6 +353,12 @@ export default class DaBrowse extends LitElement {
           <span>${this._selectedItems.length} selected</span>
         </div>
         <div class="da-action-bar-right-rail">
+          <button
+            @click=${this.handleRename}
+            class="rename-button ${this._oneSelected ? '' : 'hide-button'}">
+            <img src="/blocks/browse/da-browse/img/Smock_TextEdit_18_N.svg" />            
+            <span>Rename</span>
+          </button>
           <button
             @click=${this.handleCopy}
             class="copy-button ${this._canPaste ? 'hide-button' : ''}">
@@ -322,7 +389,7 @@ export default class DaBrowse extends LitElement {
             <div class="da-item-list-item-inner">
               ${allowSelect ? html`
                 <div class="checkbox-wrapper">
-                  <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); }}">
+                  <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); this.renameBtnVisibility(item); }}">
                   <label class="checkbox-label" for="item-selected-${idx}"></label>
                 </div>
                 <input type="checkbox" name="select" style="display: none;">