add task selector, change dropdowns to use floating-ui

e2e/time.spec.ts

@@ -151,7 +151,7 @@ test('test that adding a new tag to an existing time entry works', async ({
     const newTagName = Math.floor(Math.random() * 1000000).toString();
 
     await newTimeEntry.getByTestId('time_entry_tag_dropdown').click();
-    await newTimeEntry.getByTestId('tag_dropdown_search').fill(newTagName);
+    await page.getByTestId('tag_dropdown_search').fill(newTagName);
 
     const [tagReponse] = await Promise.all([
         page.waitForResponse(async (response) => {
@@ -162,7 +162,7 @@ test('test that adding a new tag to an existing time entry works', async ({
                 (await response.json()).data.name === newTagName
             );
         }),
-        newTimeEntry.getByTestId('tag_dropdown_search').press('Enter'),
+        page.getByTestId('tag_dropdown_search').press('Enter'),
     ]);
 
     await page.waitForResponse(async (response) => {
@@ -178,12 +178,8 @@ test('test that adding a new tag to an existing time entry works', async ({
         );
     });
 
-    await expect(newTimeEntry.getByTestId('tag_dropdown_search')).toHaveValue(
-        ''
-    );
-    await expect(
-        newTimeEntry.getByRole('option', { name: newTagName })
-    ).toBeVisible();
+    await expect(page.getByTestId('tag_dropdown_search')).toHaveValue('');
+    await expect(page.getByRole('option', { name: newTagName })).toBeVisible();
 });
 
 // Test that Start / End Time Update Works
@@ -201,11 +197,11 @@ test('test that updating a the start of an existing time entry in the overview w
         'time_entry_range_selector'
     );
     await timeEntryRangeElement.click();
-    await newTimeEntry
+    await page
         .getByTestId('time_entry_range_start')
         .getByTestId('time_picker_hour')
         .fill('1');
-    await newTimeEntry
+    await page
         .getByTestId('time_entry_range_start')
         .getByTestId('time_picker_minute')
         .fill('1');
@@ -221,7 +217,7 @@ test('test that updating a the start of an existing time entry in the overview w
                 (await response.json()).data.end !== null
             );
         }),
-        newTimeEntry
+        page
             .getByTestId('time_entry_range_end')
             .getByTestId('time_picker_minute')
             .press('Tab'),
@@ -420,7 +416,7 @@ test('test that deleting a time entry from the overview works', async ({
     const newTimeEntry = timeEntryRows.first();
     const actionsDropdown = newTimeEntry.getByTestId('time_entry_actions');
     await actionsDropdown.click();
-    const deleteButton = newTimeEntry.getByTestId('time_entry_delete');
+    const deleteButton = page.getByTestId('time_entry_delete');
     await deleteButton.click();
     await expect(timeEntryRows).toHaveCount(timeEntryCount - 1);
 });

resources/js/Components/Common/Client/ClientDropdown.vue

@@ -148,7 +148,7 @@ const highlightedItem = computed(() => {
                     "
                     class="bg-card-background-active">
                     <div
-                        class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
+                        class="flex space-x-3 items-center px-4 py-3 text-xs text-white font-medium border-t rounded-b-lg border-card-background-separator">
                         <PlusCircleIcon
                             class="w-5 flex-shrink-0"></PlusCircleIcon>
                         <span>Add "{{ searchValue }}" as a new Client</span>

resources/js/Components/Common/Project/ProjectBadge.vue

@@ -32,9 +32,11 @@ const indicatorClasses = {
             :class="
                 twMerge(indicatorClasses[size], 'inline-block rounded-full')
             "></div>
-        <span>
-            {{ name }}
-        </span>
+        <div>
+            <slot>
+                {{ name }}
+            </slot>
+        </div>
     </Badge>
 </template>
 

resources/js/Components/Common/Project/ProjectDropdown.vue

@@ -107,7 +107,7 @@ function updateValue(project: Project) {
 </script>
 
 <template>
-    <Dropdown v-model="open" align="right" width="60">
+    <Dropdown v-model="open" align="bottom-start" width="60">
         <template #trigger>
             <ProjectBadge
                 ref="projectDropdownTrigger"

resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue

@@ -34,7 +34,6 @@ const { focused } = useFocusWithin(dropdownContent);
 
 watch(focused, (newValue, oldValue) => {
     if (oldValue === true && newValue === false) {
-        console.log(newValue, oldValue);
         updateTimeEntry();
     }
 });
@@ -43,7 +42,7 @@ watch(focused, (newValue, oldValue) => {
 <template>
     <div class="relative">
         <Dropdown
-            align="right"
+            align="bottom"
             :close-on-content-click="false"
             @submit="updateTimeEntry">
             <template #trigger>

resources/js/Components/Common/TimeEntry/TimeEntryRow.vue

@@ -2,11 +2,8 @@
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import TimeEntryRangeSelector from '@/Components/Common/TimeEntry/TimeEntryRangeSelector.vue';
-import type { Project, TimeEntry } from '@/utils/api';
-import { computed } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
+import type { TimeEntry } from '@/utils/api';
 import { storeToRefs } from 'pinia';
-import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
@@ -14,9 +11,7 @@ import TimeEntryRowDurationInput from '@/Components/Common/TimeEntry/TimeEntryRo
 import dayjs from 'dayjs';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
-
-const projectsStore = useProjectsStore();
-const { projects } = storeToRefs(projectsStore);
+import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { stopTimer, updateTimer } = currentTimeEntryStore;
@@ -29,12 +24,6 @@ const props = defineProps<{
 const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
     useTimeEntriesStore();
 
-const timeEntryProject = computed<Project | undefined>(() => {
-    return projects.value.find(
-        (project) => project.id === props.timeEntry.project_id
-    );
-});
-
 async function updateStartEndTime(start: string, end: string | null) {
     if (currentTimeEntry.value.id === props.timeEntry.id) {
         currentTimeEntry.value.start = start;
@@ -76,9 +65,16 @@ function updateTimeEntryDescription(description: string) {
 }
 
 function updateTimeEntryTags(tags: string[]) {
-    console.log(tags);
     updateTimeEntry({ ...props.timeEntry, tags });
 }
+
+function updateProjectAndTask(projectId: string, taskId: string) {
+    updateTimeEntry({
+        ...props.timeEntry,
+        project_id: projectId,
+        task_id: taskId,
+    });
+}
 </script>
 
 <template>
@@ -96,9 +92,14 @@ function updateTimeEntryTags(tags: string[]) {
                         :modelValue="
                             timeEntry.description
                         "></TimeEntryDescriptionInput>
-                    <ProjectDropdown
-                        :border="false"
-                        :value="timeEntryProject"></ProjectDropdown>
+
+                    <TimeTrackerProjectTaskDropdown
+                        :showBadgeBorder="false"
+                        @changed="updateProjectAndTask"
+                        :project="timeEntry.project_id"
+                        :task="
+                            timeEntry.task_id
+                        "></TimeTrackerProjectTaskDropdown>
                 </div>
                 <div class="flex items-center font-medium space-x-2">
                     <TimeEntryRowTagDropdown

resources/js/Components/Common/TimePicker.vue

@@ -38,7 +38,7 @@ function updateHours(event: Event) {
 </script>
 
 <template>
-    <div class="flex items-center justify-center">
+    <div class="flex items-center justify-center text-muted">
         <input
             :value="hours"
             @input="updateHours"

resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@heroicons/vue/16/solid';
+import Dropdown from '@/Components/Dropdown.vue';
+import { type Component, computed, nextTick, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useTasksStore } from '@/utils/useTasks';
+import ProjectDropdownItem from '@/Components/Common/Project/ProjectDropdownItem.vue';
+import type { Project, Task } from '@/utils/api';
+import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
+
+const projectStore = useProjectsStore();
+const { projects } = storeToRefs(projectStore);
+const taskStore = useTasksStore();
+const { tasks } = storeToRefs(taskStore);
+
+const task = defineModel<string | null>('task', {
+    default: null,
+});
+
+const project = defineModel<string | null>('project', {
+    default: null,
+});
+
+const searchInput = ref<HTMLInputElement | null>(null);
+const open = ref(false);
+const dropdownViewport = ref<Component | null>(null);
+
+const searchValue = ref('');
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        nextTick(() => {
+            initializeHighlightedItem();
+            searchInput.value?.focus();
+        });
+    }
+});
+
+type ProjectWithTasks = {
+    project: Project;
+    tasks: Task[];
+};
+
+withDefaults(
+    defineProps<{
+        showBadgeBorder: boolean;
+    }>(),
+    {
+        showBadgeBorder: true,
+    }
+);
+
+const filteredProjects = computed(() => {
+    return projects.value.reduce((filtered: ProjectWithTasks[], project) => {
+        const projectNameIncludesSearchTerm = project.name
+            .toLowerCase()
+            .includes(searchValue.value?.toLowerCase()?.trim() || '');
+
+        // check if one of the project tasks
+        const projectTasks = tasks.value.filter((task) => {
+            return task.project_id === project.id;
+        });
+
+        const filteredTasks = projectTasks.filter((task) => {
+            return task.name
+                .toLowerCase()
+                .includes(searchValue.value?.toLowerCase()?.trim() || '');
+        });
+
+        if (projectNameIncludesSearchTerm || filteredTasks.length > 0) {
+            filtered.push({ project: project, tasks: filteredTasks });
+        }
+
+        return filtered;
+    }, []);
+});
+
+async function addClientIfNoneExists() {
+    if (highlightedItemId.value) {
+        setProjectAndClientBasedOnHighlightedItem();
+    }
+}
+
+function isProjectSelected(project: Project) {
+    return project.value === project.id;
+}
+
+function initializeHighlightedItem() {
+    if (filteredProjects.value.length > 0) {
+        highlightedItemId.value = filteredProjects.value[0].project.id;
+    }
+}
+
+watch(filteredProjects, () => {
+    initializeHighlightedItem();
+});
+
+function setProjectAndClientBasedOnHighlightedItem() {
+    const highlightedProject = filteredProjects.value.find(
+        (project) => project.project.id === highlightedItemId.value
+    );
+    if (highlightedProject) {
+        selectProject(highlightedProject.project.id);
+    }
+    const highlightedTask = filteredProjects.value
+        .map((project) => project.tasks)
+        .flat()
+        .find((task) => task.id === highlightedItemId.value);
+    if (highlightedTask) {
+        selectTask(highlightedTask.id);
+    }
+}
+
+function updateSearchValue(event: Event) {
+    const newInput = (event.target as HTMLInputElement).value;
+    if (newInput === ' ') {
+        searchValue.value = '';
+        setProjectAndClientBasedOnHighlightedItem();
+    } else {
+        searchValue.value = newInput;
+    }
+}
+
+const emit = defineEmits(['update:modelValue', 'changed']);
+
+function moveHighlightUp() {
+    if (highlightedItemId.value) {
+        const currentHighlightedIndex = filteredProjects.value.findIndex(
+            (projectWithTasks) =>
+                projectWithTasks.project.id === highlightedItemId.value
+        );
+        // check if it is a project id
+        if (currentHighlightedIndex === -1) {
+            // the ID is a task ID
+            const currentProjectWithTasks = filteredProjects.value.find(
+                (projectWithTasks) =>
+                    projectWithTasks.tasks.some(
+                        (task) => task.id === highlightedItemId.value
+                    )
+            );
+            if (currentProjectWithTasks) {
+                const taskIndex = currentProjectWithTasks.tasks.findIndex(
+                    (task) => task.id === highlightedItemId.value
+                );
+                if (taskIndex === -1) {
+                    return;
+                }
+                if (taskIndex === 0) {
+                    // highlight the project if it was the first task before
+                    highlightedItemId.value =
+                        currentProjectWithTasks.project.id;
+                    return;
+                }
+                highlightedItemId.value =
+                    currentProjectWithTasks.tasks[taskIndex - 1].id;
+            }
+        }
+        if (currentHighlightedIndex === 0) {
+            // highlight the last project or the last project of the last project
+            const lastProject =
+                filteredProjects.value[filteredProjects.value.length - 1];
+            if (lastProject.tasks.length > 0) {
+                // highlight last task of last project
+                highlightedItemId.value =
+                    lastProject.tasks[lastProject.tasks.length - 1].id;
+            } else {
+                highlightedItemId.value =
+                    filteredProjects.value[
+                        filteredProjects.value.length - 1
+                    ].project.id;
+            }
+        } else {
+            const previousProject =
+                filteredProjects.value[currentHighlightedIndex - 1];
+            if (previousProject.tasks.length > 0) {
+                // highlight last task of previous project
+                highlightedItemId.value =
+                    previousProject.tasks[previousProject.tasks.length - 1].id;
+            } else {
+                highlightedItemId.value =
+                    filteredProjects.value[
+                        currentHighlightedIndex - 1
+                    ].project.id;
+            }
+        }
+    }
+}
+
+function moveHighlightDown() {
+    if (highlightedItemId.value) {
+        const currentHighlightedIndex = filteredProjects.value.findIndex(
+            (projectWithTasks) =>
+                projectWithTasks.project.id === highlightedItemId.value
+        );
+        // check if it is a project id
+        if (currentHighlightedIndex === -1) {
+            // the ID is a task ID
+            const currentProjectWithTasks = filteredProjects.value.find(
+                (projectWithTasks) =>
+                    projectWithTasks.tasks.some(
+                        (task) => task.id === highlightedItemId.value
+                    )
+            );
+            if (currentProjectWithTasks) {
+                const taskIndex = currentProjectWithTasks.tasks.findIndex(
+                    (task) => task.id === highlightedItemId.value
+                );
+                if (taskIndex === -1) {
+                    return;
+                }
+                if (taskIndex === currentProjectWithTasks.tasks.length - 1) {
+                    // highlight the next project if it was the last task in current project
+                    const projectIndex = filteredProjects.value.indexOf(
+                        currentProjectWithTasks
+                    );
+                    if (projectIndex === filteredProjects.value.length - 1) {
+                        // highlight the first project if it was the last project
+                        highlightedItemId.value =
+                            filteredProjects.value[0].project.id;
+                    } else {
+                        highlightedItemId.value =
+                            filteredProjects.value[projectIndex + 1].project.id;
+                    }
+                    return;
+                }
+                highlightedItemId.value =
+                    currentProjectWithTasks.tasks[taskIndex + 1].id;
+            }
+        }
+        if (currentHighlightedIndex === filteredProjects.value.length - 1) {
+            // highlight the first project or the last project of the last project
+            const lastProject =
+                filteredProjects.value[filteredProjects.value.length - 1];
+            if (lastProject.tasks.length > 0) {
+                // highlight last task of last project
+                highlightedItemId.value = lastProject.tasks[0].id;
+            } else {
+                highlightedItemId.value = filteredProjects.value[0].project.id;
+            }
+        } else {
+            const currentProjectWithTasks =
+                filteredProjects.value[currentHighlightedIndex];
+            if (currentProjectWithTasks.tasks.length > 0) {
+                // highlight last task of previous project
+                highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
+            } else {
+                highlightedItemId.value =
+                    filteredProjects.value[
+                        currentHighlightedIndex + 1
+                    ].project.id;
+            }
+        }
+    }
+}
+
+const highlightedItemId = ref<string | null>(null);
+
+const currentProject = computed(() => {
+    return projects.value.find(
+        (iteratingProject) => iteratingProject.id === project.value
+    );
+});
+
+const currentTask = computed(() => {
+    return tasks.value.find(
+        (iteratingTasks) => iteratingTasks.id === task.value
+    );
+});
+
+const selectedProjectName = computed(() => {
+    return currentProject.value?.name || 'No Project';
+});
+
+const selectedProjectColor = computed(() => {
+    return currentProject.value?.color || 'var(--theme-color-icon-default)';
+});
+
+function selectTask(taskId: string) {
+    task.value = taskId;
+    project.value =
+        tasks.value.find((task) => task.id === taskId)?.project_id || null;
+    open.value = false;
+    emit('changed', project.value, task.value);
+}
+
+function selectProject(projectId: string) {
+    project.value = projectId;
+    task.value = null;
+    open.value = false;
+    emit('changed', project.value, task.value);
+}
+</script>
+
+<template>
+    <Dropdown width="120" v-model="open" :closeOnContentClick="true">
+        <template #trigger>
+            <ProjectBadge
+                ref="projectDropdownTrigger"
+                :color="selectedProjectColor"
+                size="large"
+                :border="showBadgeBorder"
+                tag="button"
+                :name="selectedProjectName"
+                class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator">
+                <div class="flex items-center space-x-1">
+                    <span>
+                        {{ selectedProjectName }}
+                    </span>
+                    <ChevronRightIcon
+                        v-if="currentTask"
+                        class="w-5 text-muted"></ChevronRightIcon>
+                    <span v-if="currentTask">{{ currentTask.name }}</span>
+                </div>
+            </ProjectBadge>
+        </template>
+        <template #content>
+            <input
+                :value="searchValue"
+                @input="updateSearchValue"
+                @keydown.enter="addClientIfNoneExists"
+                data-testid="client_dropdown_search"
+                @keydown.up.prevent="moveHighlightUp"
+                @keydown.down.prevent="moveHighlightDown"
+                ref="searchInput"
+                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                placeholder="Search for a project or task..." />
+            <div ref="dropdownViewport" class="w-60">
+                <template
+                    v-for="projectWithTasks in filteredProjects"
+                    :key="projectWithTasks.project.id">
+                    <div
+                        role="option"
+                        :value="projectWithTasks.project.id"
+                        @click="selectProject(projectWithTasks.project.id)"
+                        class="border-t border-card-background-separator"
+                        :class="{
+                            'bg-card-background-active':
+                                projectWithTasks.project.id ===
+                                highlightedItemId,
+                        }"
+                        data-testid="client_dropdown_entries"
+                        :data-project-id="projectWithTasks.project.id">
+                        <ProjectDropdownItem
+                            :selected="
+                                isProjectSelected(projectWithTasks.project)
+                            "
+                            :name="projectWithTasks.project.name"
+                            :color="
+                                projectWithTasks.project.color
+                            "></ProjectDropdownItem>
+                    </div>
+                    <div
+                        v-for="task in projectWithTasks.tasks"
+                        :key="task.id"
+                        @click="selectTask(task.id)"
+                        :class="{
+                            'bg-card-background-active':
+                                task.id === highlightedItemId,
+                        }"
+                        class="flex items-center space-x-3 w-full px-3 py-1.5 text-start text-xs font-semibold leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                        <div class="w-3 h-3 rounded-full"></div>
+                        <span>{{ task.name }}</span>
+                    </div>
+                </template>
+            </div>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>

resources/js/Components/Dropdown.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { flip, type Placement, useFloating } from '@floating-ui/vue';
+import { offset } from '@floating-ui/vue';
+import { autoUpdate } from '@floating-ui/vue';
 
 const props = withDefaults(
     defineProps<{
-        align: string;
+        align: Placement;
         width: string;
         contentClasses?: string[];
         closeOnContentClick: boolean;
     }>(),
     {
-        align: 'right',
+        align: 'bottom-start',
         width: '48',
         contentClasses: () => [
             'overflow-none',
@@ -49,22 +52,6 @@ const widthClass = computed(() => {
     }[props.width.toString()];
 });
 
-const alignmentClasses = computed(() => {
-    if (props.align === 'left') {
-        return 'ltr:origin-top-left rtl:origin-top-right start-0';
-    }
-
-    if (props.align === 'right') {
-        return 'ltr:origin-top-right rtl:origin-top-left end-0';
-    }
-
-    if (props.align === 'bottom-right') {
-        return 'bottom-[calc(100%+15px)] ltr:origin-top-right rtl:origin-top-left end-0';
-    }
-
-    return 'origin-top';
-});
-
 function toggleOpen() {
     open.value = !open.value;
     if (open.value === true) {
@@ -76,11 +63,19 @@ function onBackgroundClick() {
     emit('submit');
     open.value = false;
 }
+
+const reference = ref(null);
+const floating = ref(null);
+const { floatingStyles } = useFloating(reference, floating, {
+    placement: props.align,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip(), offset(10)],
+});
 </script>
 
 <template>
-    <div class="relative">
-        <div @click.prevent="toggleOpen">
+    <div>
+        <div @click.prevent="toggleOpen" ref="reference">
             <slot name="trigger" />
         </div>
 
@@ -89,26 +84,29 @@ function onBackgroundClick() {
             v-show="open"
             class="fixed inset-0 z-40"
             @click.prevent="onBackgroundClick" />
-
-        <transition
-            enter-active-class="transition ease-out duration-200"
-            enter-from-class="transform opacity-0 scale-95"
-            enter-to-class="transform opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-75"
-            leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95">
+        <Teleport to="body">
             <div
                 v-show="open"
-                class="absolute z-50 mt-2 rounded-md shadow-lg"
-                :class="[widthClass, alignmentClasses]"
-                style="display: none"
+                ref="floating"
+                class="z-50"
+                :class="[widthClass]"
+                :style="floatingStyles"
                 @click="onContentClick">
-                <div
-                    class="rounded-lg ring-1 relative ring-black ring-opacity-5"
-                    :class="contentClasses">
-                    <slot name="content" />
-                </div>
+                <transition
+                    enter-active-class="transition ease-out duration-200"
+                    enter-from-class="transform opacity-0 scale-95"
+                    enter-to-class="transform opacity-100 scale-100"
+                    leave-active-class="transition ease-in duration-75"
+                    leave-from-class="transform opacity-100 scale-100"
+                    leave-to-class="transform opacity-0 scale-95">
+                    <div
+                        v-if="open"
+                        class="rounded-lg ring-1 relative ring-black ring-opacity-5"
+                        :class="contentClasses">
+                        <slot name="content" />
+                    </div>
+                </transition>
             </div>
-        </transition>
+        </Teleport>
     </div>
 </template>

resources/js/Components/TimeTracker.vue

@@ -3,7 +3,6 @@ import { ClockIcon } from '@heroicons/vue/20/solid';
 import CardTitle from '@/Components/Common/CardTitle.vue';
 import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
-import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
 import { usePage } from '@inertiajs/vue3';
 import { type User } from '@/types/models';
 import { computed, onMounted, ref, watch } from 'vue';
@@ -15,6 +14,7 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
 import parse from 'parse-duration';
 import TimeTrackerTagDropdown from '@/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue';
+import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 
 const page = usePage<{
     auth: {
@@ -166,9 +166,12 @@ function onTimeEntryEnterPress() {
                     type="text" />
             </div>
             <div class="flex items-center">
-                <ProjectDropdown
+                <TimeTrackerProjectTaskDropdown
                     @changed="updateTimeEntry"
-                    v-model="currentTimeEntry.project_id"></ProjectDropdown>
+                    v-model:project="currentTimeEntry.project_id"
+                    v-model:task="
+                        currentTimeEntry.task_id
+                    "></TimeTrackerProjectTaskDropdown>
             </div>
             <div class="flex items-center space-x-2 px-4">
                 <TimeTrackerTagDropdown

resources/js/Components/UserSettingsIcon.vue

@@ -24,7 +24,7 @@ const logout = () => {
 </script>
 <template>
     <div class="ms-3 relative">
-        <Dropdown align="bottom-right" width="48">
+        <Dropdown align="top" width="48">
             <template #trigger>
                 <button
                     v-if="page.props.jetstream.managesProfilePhotos"
@@ -78,9 +78,7 @@ const logout = () => {
 
                 <!-- Authentication -->
                 <form @submit.prevent="logout">
-                    <DropdownLink
-                        as="button"
-                        data-testid="logout_button">
+                    <DropdownLink as="button" data-testid="logout_button">
                         Log Out
                     </DropdownLink>
                 </form>

resources/js/utils/useCurrentTimeEntry.ts

@@ -89,6 +89,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
                     start: startTime,
                     description: currentTimeEntry.value?.description,
                     project_id: currentTimeEntry.value?.project_id,
+                    task_id: currentTimeEntry.value?.task_id,
                     billable: currentTimeEntry.value.billable,
                     tags: currentTimeEntry.value?.tags,
                 },
@@ -137,6 +138,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
                     description: currentTimeEntry.value.description,
                     user_id: user,
                     project_id: currentTimeEntry.value.project_id,
+                    task_id: currentTimeEntry.value.task_id,
                     start: currentTimeEntry.value.start,
                     billable: currentTimeEntry.value.billable,
                     end: null,