add recently tracked timeentries dropdown to timetracker

resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue

@@ -13,13 +13,19 @@ import type {
     TimeEntry,
     Client,
 } from '@/packages/api/src';
-import { ref, watch } from 'vue';
-import type { Dayjs } from 'dayjs';
+import {computed, nextTick, ref, watch} from 'vue';
+import type {Dayjs} from 'dayjs';
+import {useTimeEntriesStore} from '@/utils/useTimeEntries';
+import {storeToRefs} from 'pinia';
+import {useFocus} from "@vueuse/core";
+import {autoUpdate, flip, limitShift, offset, shift, useFloating} from "@floating-ui/vue";
+import TimeTrackerRecentlyTrackedEntry from "@/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue";
+import {useSelectEvents} from "@/packages/ui/src/utils/select";
 
 const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
     required: true,
 });
-const liveTimer = defineModel<Dayjs | null>('liveTimer', { required: true });
+const liveTimer = defineModel<Dayjs | null>('liveTimer', {required: true});
 
 const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
 
@@ -50,11 +56,33 @@ function updateProject() {
     emit('updateTimeEntry');
 }
 
+function setCurrentTimeEntry(timeEntry: TimeEntry){
+    console.log('asdasd')
+    currentTimeEntry.value.description = timeEntry.description;
+    currentTimeEntry.value.project_id = timeEntry.project_id;
+    currentTimeEntry.value.task_id = timeEntry.task_id;
+    currentTimeEntry.value.tags = timeEntry.tags;
+    currentTimeEntry.value.billable = timeEntry.billable;
+}
+
 function startTimerIfNotActive() {
-    if (!props.isActive) {
+    if(highlightedDropdownEntryId.value){
+        const timeEntry = filteredRecentlyTrackedTimeEntries.value.find((item) => item.id === highlightedDropdownEntryId.value);
+        if(timeEntry){
+            setCurrentTimeEntry(timeEntry);
+            showDropdown.value = false;
+        }
+    }
+    else {
         currentTimeEntry.value.description = tempDescription.value;
+    }
+
+    if (!props.isActive) {
         emit('startTimer');
     }
+    else {
+        emit('updateTimeEntry');
+    }
 }
 
 function setBillableDefaultForProject() {
@@ -74,6 +102,7 @@ function onToggleButtonPress(newState: boolean) {
         emit('stopTimer');
     }
 }
+
 const tempDescription = ref(currentTimeEntry.value.description);
 watch(
     () => currentTimeEntry.value.description,
@@ -81,12 +110,56 @@ watch(
         tempDescription.value = currentTimeEntry.value.description;
     }
 );
+
 function updateTimeEntryDescription() {
     if (currentTimeEntry.value.description !== tempDescription.value) {
         currentTimeEntry.value.description = tempDescription.value;
         emit('updateTimeEntry');
     }
 }
+
+const {timeEntries} = storeToRefs(useTimeEntriesStore());
+const filteredRecentlyTrackedTimeEntries = computed(() => {
+    return timeEntries.value.filter((item) => {
+        return item.description
+            ?.toLowerCase()
+            ?.includes(tempDescription.value?.toLowerCase()?.trim() || '');
+    }).slice(0, 5);;
+});
+
+const showDropdown = ref(false);
+const {focused} = useFocus(currentTimeEntryDescriptionInput)
+
+watch(focused, (focused) => {
+    nextTick(() => {
+        // make sure the click event on the dropdown does not get interrupted
+        showDropdown.value = focused
+    });
+});
+
+
+const floating = ref(null);
+const {floatingStyles} = useFloating(currentTimeEntryDescriptionInput, floating, {
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+        offset(10),
+        shift({
+            limiter: limitShift({
+                offset: 5,
+            }),
+        }),
+        flip({
+            fallbackAxisSideDirection: 'start',
+        }),
+    ],
+});
+const highlightedDropdownEntryId = ref<string | null>(null);
+
+useSelectEvents(filteredRecentlyTrackedTimeEntries,
+    highlightedDropdownEntryId,
+    (item) => item.id,
+    showDropdown)
 </script>
 
 <template>
@@ -95,7 +168,7 @@ function updateTimeEntryDescription() {
         data-testid="dashboard_timer">
         <div
             class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
-            <div class="flex flex-1 items-center pr-6">
+            <div class="flex flex-1 items-center pr-6 relative">
                 <input
                     ref="currentTimeEntryDescriptionInput"
                     v-model="tempDescription"
@@ -104,7 +177,33 @@ function updateTimeEntryDescription() {
                     class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
                     type="text"
                     @keydown.enter="startTimerIfNotActive"
-                    @blur="updateTimeEntryDescription" />
+                    @keydown.esc="showDropdown = false"
+                    @blur="updateTimeEntryDescription"/>
+                <div
+                    v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
+                    ref="floating"
+                    class="z-50 w-full max-w-2xl"
+                    :style="floatingStyles">
+                    <div
+                        class="rounded-lg ring-1 w-full fixed min-w-xl top-0 left-0 ring-black ring-opacity-5 border border-card-border overflow-none shadow-dropdown bg-card-background">
+                        <div
+                            class="text-text-tertiary text-xs font-semibold border-b border-border-tertiary px-2 py-1.5">
+                            Recently Tracked Time Entries
+                        </div>
+                        <div class="text-text-secondary py-1 px-1.5">
+                            <TimeTrackerRecentlyTrackedEntry
+                                v-for="timeEntry in filteredRecentlyTrackedTimeEntries"
+                                :key="timeEntry.id"
+                                :time-entry="timeEntry"
+                                :highlighted="highlightedDropdownEntryId === timeEntry.id"
+                                :projects="projects"
+                                :tasks="tasks"
+                                @mousedown="setCurrentTimeEntry(timeEntry)"
+                                @mouseenter="highlightedDropdownEntryId = timeEntry.id"
+                            ></TimeTrackerRecentlyTrackedEntry>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="flex items-center justify-between pl-2 shrink min-w-0">
                 <div