185 files

custom_components/taskmate/www/taskmate-approvals-card.js

@@ -106,6 +106,9 @@ class TaskMateApprovalsCard extends LitElement {
       }
 
       .approve-all-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
         background: rgba(255, 255, 255, 0.2);
         color: white;
         border: 1px solid rgba(255, 255, 255, 0.45);
@@ -118,6 +121,18 @@ class TaskMateApprovalsCard extends LitElement {
       }
       .approve-all-btn:hover { background: rgba(255, 255, 255, 0.3); }
       .approve-all-btn:disabled { opacity: 0.6; cursor: default; }
+      /* Reuses the spin keyframes already defined for the loading spinner. */
+      .btn-spinner {
+        width: 12px; height: 12px;
+        border: 2px solid rgba(255, 255, 255, 0.45);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 0.7s linear infinite;
+        flex-shrink: 0;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .btn-spinner { animation: none; opacity: 0.7; }
+      }
 
       .card-content { padding: 16px; }
 
@@ -537,7 +552,9 @@ class TaskMateApprovalsCard extends LitElement {
           <div class="header-right">
             ${filteredCompletions.length > 0
               ? html`<button class="approve-all-btn" ?disabled="${this._loading['__all__']}"
-                  @click="${() => this._handleApproveAll(filteredCompletions)}">${this._t('approvals.approve_all')}</button>`
+                  @click="${() => this._handleApproveAll(filteredCompletions)}">${this._loading['__all__']
+                    ? html`<span class="btn-spinner"></span>${this._t('approvals.approve_all_busy')}`
+                    : this._t('approvals.approve_all')}</button>`
               : ""}
             ${totalPending > 0 ? html`<span class="pending-count">${totalPending}</span>` : ""}
           </div>
@@ -724,7 +741,9 @@ class TaskMateApprovalsCard extends LitElement {
         <span class="tt">${title}</span>
         ${completions.length > 0
           ? html`<button class="approve-all-btn" ?disabled="${this._loading['__all__']}"
-              @click="${() => this._handleApproveAll(completions)}">${this._t('approvals.approve_all')}</button>`
+              @click="${() => this._handleApproveAll(completions)}">${this._loading['__all__']
+                ? html`<span class="btn-spinner"></span>${this._t('approvals.approve_all_busy')}`
+                : this._t('approvals.approve_all')}</button>`
           : ""}
         ${count > 0 ? html`<span class="cnt">${count}</span>` : ""}
       </div>`;
@@ -785,7 +804,7 @@ class TaskMateApprovalsCard extends LitElement {
       <button class="btn bad" style="flex:1" ?disabled="${isLoading}" @click="${reject}">👎 ${this._t('approvals.reject')}</button>`;
   }
 
-  _apPhotoDesigned(it, cls, fallback) {
+  _apPhotoDesigned(it, cls) {
     const photoUrl = tmSafePhotoUrl(it.photo);
     if (it.kind !== "completion" || !photoUrl) {
       return it.kind === "claim" && it.icon
@@ -1154,8 +1173,6 @@ class TaskMateApprovalsCard extends LitElement {
   }
 
   _getDayLabel(date) {
-    const timezone = this._getTimezone();
-
     // Get today's date parts in HA timezone
     const now = new Date();
     const todayParts = this._getDatePartsInTimezone(now);
@@ -1252,7 +1269,7 @@ class TaskMateApprovalsCard extends LitElement {
   _renderApprovals(groupedByDay) {
     return html`
       ${groupedByDay.map(
-        ([dayKey, dayGroup]) => html`
+        ([, dayGroup]) => html`
           <div class="day-group">
             <div class="day-header">${dayGroup.label}</div>
             ${this._renderTimeCategories(dayGroup.timeCategories)}