fix: fixed manually adding time where datetime picker would overlap at the top, feat: added shortcut to the exact time tracking logger in the add time buttton from card back section + adjusted UI to have hours and minutes next to each other and auto focus hours input

Author: danniehansen

src/capabilities/card-back-section/add_time_manually.vue

@@ -1,47 +1,57 @@
 <template>
   <div class="flex flex-column align-items-start pt-4 add-time-container">
-    <!-- Help button -->
-    <div class="w-full flex justify-content-end">
+    <!-- Header with button and help -->
+    <div class="w-full flex justify-content-between align-items-center">
+      <Button
+        label="Log Exact Times"
+        icon="pi pi-calendar-clock"
+        outlined
+        size="small"
+        @click="openAddTimeRange"
+      />
       <HelpButton
         feature="manualTime"
         title="Learn about adding time manually"
       />
     </div>
 
-    <span class="p-float-label w-full">
-      <InputNumber
-        id="f-hours"
-        v-model="hours"
-        placeholder="0"
-        class="w-full"
-        :format="false"
-        :use-grouping="false"
-        :min-fraction-digits="0"
-        :max-fraction-digits="2"
-        :min="0"
-        thousand-separator=""
-        locale="en-GB"
-      />
-      <label for="f-hours">Hours</label>
-    </span>
-
-    <span class="p-float-label w-full">
-      <InputNumber
-        id="f-minutes"
-        v-model="minutes"
-        placeholder="0"
-        class="w-full"
-        :format="false"
-        :use-grouping="false"
-        :min-fraction-digits="0"
-        :max-fraction-digits="0"
-        :min="0"
-        :max="59"
-        thousand-separator=""
-        locale="en-GB"
-      />
-      <label for="f-minutes">Minutes</label>
-    </span>
+    <!-- Hours and Minutes inputs side by side -->
+    <div class="w-full flex flex-row input-row">
+      <span class="p-float-label input-half">
+        <InputNumber
+          id="f-hours"
+          v-model="hours"
+          placeholder="0"
+          class="w-full"
+          :format="false"
+          :use-grouping="false"
+          :min-fraction-digits="0"
+          :max-fraction-digits="2"
+          :min="0"
+          thousand-separator=""
+          locale="en-GB"
+        />
+        <label for="f-hours">Hours</label>
+      </span>
+
+      <span class="p-float-label input-half">
+        <InputNumber
+          id="f-minutes"
+          v-model="minutes"
+          placeholder="0"
+          class="w-full"
+          :format="false"
+          :use-grouping="false"
+          :min-fraction-digits="0"
+          :max-fraction-digits="0"
+          :min="0"
+          :max="59"
+          thousand-separator=""
+          locale="en-GB"
+        />
+        <label for="f-minutes">Minutes</label>
+      </span>
+    </div>
 
     <Button label="Add time" class="w-full" @click="save" />
   </div>
@@ -63,12 +73,31 @@ const minutes = ref<number>(0);
 
 onMounted(() => {
   // Auto-focus the hours input field
-  const hoursInput = document.getElementById('f-hours');
-  if (hoursInput) {
-    hoursInput.focus();
-  }
+  setTimeout(() => {
+    const hoursInput = document.querySelector('#f-hours input');
+    if (hoursInput) {
+      (hoursInput as HTMLInputElement).focus();
+    }
+  }, 100);
 });
 
+const openAddTimeRange = async () => {
+  const trello = getTrelloCard();
+  const memberId = await getMemberId();
+  const card = await trello.card('id');
+
+  await trello.modal({
+    title: 'Add Time Range',
+    url: `./index.html?page=add-time-range&memberId=${memberId}&cardId=${card.id}`,
+    fullscreen: false,
+    height: 650
+  });
+
+  // Close the popup after the modal is closed
+  // This refreshes the data in the parent view
+  await trello.closePopup();
+};
+
 const save = async () => {
   if (!hours.value && !minutes.value) {
     await getTrelloCard().alert({
@@ -98,6 +127,30 @@ setTimeout(resizeTrelloFrame);
 
 <style scoped>
 .add-time-container {
-  gap: 2rem;
+  gap: 1.5rem;
+}
+
+/* Ensure button has proper spacing */
+.add-time-container > div:first-child {
+  margin-bottom: 0.5rem;
+}
+
+/* Input row with gap */
+.input-row {
+  gap: 1rem;
+}
+
+/* Input fields at 50% width each with gap accounted for */
+.input-half {
+  flex: 1;
+  min-width: 0;
+}
+
+.input-half :deep(.p-inputnumber) {
+  width: 100%;
+}
+
+.input-half :deep(.p-inputtext) {
+  width: 100%;
 }
 </style>

src/pages/ManageMemberTime.vue

@@ -63,7 +63,7 @@
 
         <div v-else class="entries-list">
           <div
-            v-for="range in sortedRanges"
+            v-for="range in visibleRanges"
             :key="range.rangeId"
             class="entry-card"
           >
@@ -96,6 +96,35 @@
               />
             </div>
           </div>
+
+          <!-- Collapsed entries summary -->
+          <div
+            v-if="hasCollapsedEntries"
+            class="collapsed-entry-card"
+            @click="toggleShowAll"
+          >
+            <div class="collapsed-main">
+              <div class="collapsed-icon">
+                <i
+                  :class="
+                    showAllEntries ? 'pi pi-chevron-up' : 'pi pi-chevron-down'
+                  "
+                ></i>
+              </div>
+              <div class="collapsed-details">
+                <span class="collapsed-label">
+                  {{
+                    showAllEntries
+                      ? 'Show Less'
+                      : `${collapsedRanges.length} More Entries`
+                  }}
+                </span>
+                <span v-if="!showAllEntries" class="collapsed-duration">
+                  {{ formatTime(collapsedTotalTime, false) }}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -142,6 +171,8 @@ const memberId = ref('');
 const memberName = ref('');
 const timeRanges = ref<Range[]>([]);
 const activeTimer = ref<any>(null);
+const showAllEntries = ref(false);
+const MAX_VISIBLE_ENTRIES = 5;
 let cardId = '';
 
 const hasAnyTime = computed(() => {
@@ -152,6 +183,34 @@ const sortedRanges = computed(() => {
   return [...timeRanges.value].sort((a, b) => b.start - a.start);
 });
 
+const visibleRanges = computed(() => {
+  if (
+    showAllEntries.value ||
+    sortedRanges.value.length <= MAX_VISIBLE_ENTRIES
+  ) {
+    return sortedRanges.value;
+  }
+  return sortedRanges.value.slice(0, MAX_VISIBLE_ENTRIES);
+});
+
+const collapsedRanges = computed(() => {
+  if (
+    showAllEntries.value ||
+    sortedRanges.value.length <= MAX_VISIBLE_ENTRIES
+  ) {
+    return [];
+  }
+  return sortedRanges.value.slice(MAX_VISIBLE_ENTRIES);
+});
+
+const collapsedTotalTime = computed(() => {
+  return collapsedRanges.value.reduce((sum, range) => sum + range.diff, 0);
+});
+
+const hasCollapsedEntries = computed(() => {
+  return sortedRanges.value.length > MAX_VISIBLE_ENTRIES;
+});
+
 const totalTime = computed(() => {
   const rangesTime = timeRanges.value.reduce(
     (sum, range) => sum + range.diff,
@@ -161,6 +220,11 @@ const totalTime = computed(() => {
   return rangesTime + timerTime;
 });
 
+const toggleShowAll = () => {
+  showAllEntries.value = !showAllEntries.value;
+  setTimeout(resizeTrelloFrame, 100);
+};
+
 onMounted(async () => {
   const params = new URLSearchParams(window.location.search);
   memberId.value = params.get('memberId') || '';
@@ -363,7 +427,7 @@ const openAddManualTime = async () => {
     title: 'Add Time Manually',
     url: `./index.html?page=add-time-range&memberId=${memberId.value}&cardId=${cardId}`,
     fullscreen: false,
-    height: 600
+    height: 650
   });
 
   // Reload data after modal closes
@@ -598,6 +662,69 @@ html[data-color-mode='dark'] .entry-duration {
   gap: 0.25rem;
 }
 
+/* Collapsed Entry Card */
+.collapsed-entry-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  user-select: none;
+}
+
+.collapsed-entry-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.collapsed-entry-card:active {
+  transform: translateY(0);
+}
+
+html[data-color-mode='dark'] .collapsed-entry-card {
+  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+}
+
+html[data-color-mode='dark'] .collapsed-entry-card:hover {
+  box-shadow: 0 4px 12px rgba(90, 103, 216, 0.4);
+}
+
+.collapsed-main {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.collapsed-icon {
+  font-size: 1.25rem;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.collapsed-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.collapsed-label {
+  font-size: 0.9375rem;
+  color: white;
+  font-weight: 600;
+}
+
+.collapsed-duration {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
 /* Total Section */
 .total-section {
   margin-top: 0.5rem;