Added a label to add last used date on each group

groups/createElements.js

@@ -27,6 +27,7 @@ const createCard = (
           }  
         </div>
         <p class="card__description"></p>
+        <p class="card__last-used"></p>
         <div class="card__action">
             <button class="card__btn button"></button>
             <span class="card__count">
@@ -35,12 +36,39 @@ const createCard = (
             </span>
         </div>
     `;
-
+  
   if (group.isUpdating)
     cardElement.querySelector('.card__btn').classList.add('button--blocked');
   cardElement.querySelector('.card__title').textContent = group.title;
   cardElement.querySelector('.card__description').textContent =
     group.description;
+  const lastUsedElement = cardElement.querySelector('.card__last-used');
+  if (group.lastUsedOnMs) {
+    const shortFormatted = new Intl.DateTimeFormat('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    }).format(new Date(group.lastUsedOnMs));
+    lastUsedElement.classList.add('tooltip-container');
+    lastUsedElement.textContent = `Last used on: ${shortFormatted}`;
+
+    const tooltip = document.createElement('span');
+    tooltip.className = 'tooltip';
+    tooltip.innerText = new Intl.DateTimeFormat('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZoneName: 'short',
+      hour12: true,
+    }).format(new Date(group.lastUsedOnMs));
+    lastUsedElement.appendChild(tooltip);
+  } else {
+    lastUsedElement.style.display = 'none';
+  }
   cardElement.querySelector('.card__btn').textContent = group.isMember
     ? 'Remove me'
     : 'Add me';

groups/script.js

@@ -196,13 +196,20 @@ const afterAuthentication = async () => {
           .split('-')
           .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
           .join(' ');
+        const lastUsedOnMs =
+          group?.lastUsedOn?.seconds != null
+            ? group.lastUsedOn.seconds * 1000
+            : group?.lastUsedOn?._seconds != null
+            ? group.lastUsedOn._seconds * 1000
+            : undefined;  
         acc[group.id] = {
           id: group.id,
           title: title,
           count: group.memberCount,
           isMember: group.isMember,
           roleId: group.roleid,
           description: group.description,
+          lastUsedOnMs,
           isUpdating: false,
         };
         return acc;

groups/style.css

@@ -390,6 +390,39 @@ body {
   line-height: 18px;
 }
 
+.card__last-used {
+  margin-top: 0.4rem;
+  color: var(--color-text-secondary);
+  font-weight: 400;
+  font-size: 0.75rem;
+}
+
+
+.tooltip-container {
+  position: relative;
+}
+
+.tooltip {
+  background-color: var(--black-color, #000);
+  color: var(--white, #fff);
+  visibility: hidden;
+  text-align: center;
+  border-radius: 4px;
+  padding: 0.5rem;
+  position: absolute;
+  opacity: 0.9;
+  font-size: 0.7rem;
+  width: 10rem;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5rem;
+}
+
+.tooltip-container:hover .tooltip {
+  visibility: visible;
+  transition-delay: 400ms;
+}
+
 .card__action {
   display: flex;
   justify-content: space-between;