[#6813] Add status indicator to changes to prepare for conditions

Author: arbron

lang/en.json

@@ -2533,6 +2533,8 @@
     }
   },
   "Status": {
+    "ChangeActive": "Change Active",
+    "ChangeInactive": "Change Inactive",
     "Inactive": "Inactive",
     "Passive": "Passive",
     "Temporary": "Temporary",

less/v2/inventory.less

@@ -485,12 +485,12 @@
     }
 
     .changes .change-row {
-      position: relative;
-      border-top: var(--activity-row-border);
-      padding-left: 20px;
+      border-block-start: var(--activity-row-border);
       min-block-size: 32px;
+      padding-inline-start: 20px;
+      position: relative;
 
-      &:last-child { border-bottom: var(--activity-row-border); }
+      &:last-child { border-block-end: var(--activity-row-border); }
 
       &::before {
         content: "\f192";
@@ -512,6 +512,7 @@
       }
 
       .item-name .title { font-size: var(--font-size-12); }
+      .application-status { align-content: center; }
     }
   }
 

templates/effects/columns/controls.hbs

@@ -35,6 +35,15 @@
             data-context-menu aria-label="{{ localize 'DND5E.AdditionalControls' }}">
         <i class="fa-solid fa-ellipsis-vertical" inert></i>
     </button>
+
+    {{else if isChange}}
+
+    <span class="application-status">
+        <!-- TODO: Change this to checking `entry.applied` once conditions are merged -->
+        <i class="fa-solid fa-{{ ifThen effect.active 'check' 'xmark' }}"
+           aria-label="{{ localize (concat 'DND5E.EFFECT.Status.Change' (ifThen effect.active 'Active' 'Inactive')) }}"></i>
+    </span>
+
     {{/if}}
 
 </div>