From d5699da234a365148084a2f5421b0743a44cf647 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 11 Nov 2024 00:52:56 +0100
Subject: [PATCH] improve manual time entry modal, improve time picker, add
 human duration input

---
 resources/css/app.css                         |   2 +-
 .../Common/TimeEntry/TimeEntryCreateModal.vue | 154 ++++++++++++----
 .../Partials/TwoFactorAuthenticationForm.vue  |   2 +-
 resources/js/Pages/Time.vue                   |   3 +
 .../ui/src/Buttons/SecondaryButton.vue        |   4 +-
 .../js/packages/ui/src/Input/DatePicker.vue   |   3 +-
 .../ui/src/Input/DurationHumanInput.vue       | 102 ++++++++++
 .../packages/ui/src/Input/SelectDropdown.vue  |  34 +++-
 .../js/packages/ui/src/Input/TimePicker.vue   | 174 +++++++++---------
 .../TimeTrackerProjectTaskDropdown.vue        |   9 +-
 resources/js/utils/useCurrentTimeEntry.ts     |   2 +-
 11 files changed, 355 insertions(+), 134 deletions(-)
 create mode 100644 resources/js/packages/ui/src/Input/DurationHumanInput.vue

diff --git a/resources/css/app.css b/resources/css/app.css
index 5b97f0e6..bf927fdb 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -57,7 +57,7 @@
 }
 
 /* Track */
-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
     background: transparent;
 }
 
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue b/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
index dead653f..54019f48 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
@@ -2,15 +2,12 @@
 import TextInput from '@/packages/ui/src/Input/TextInput.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import { nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
-import TimeTrackerTagDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
-import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
 import { getCurrentUserId } from '@/utils/useUser';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
-import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { TagIcon } from '@heroicons/vue/20/solid';
 import {
     getDayJsInstance,
     getLocalizedDayJs,
@@ -24,11 +21,20 @@ import type {
     CreateProjectBody,
     Project,
     Client,
+    CreateTimeEntryBody,
 } from '@/packages/api/src';
 import { useClientsStore } from '@/utils/useClients';
 import TimePicker from '@/packages/ui/src/Input/TimePicker.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { canCreateProjects } from '@/utils/permissions';
+import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
+import { Badge } from '@/packages/ui/src';
+import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import SelectDropdown from '../../../packages/ui/src/Input/SelectDropdown.vue';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';
+
+import { InformationCircleIcon } from '@heroicons/vue/20/solid';
 const projectStore = useProjectsStore();
 const { projects } = storeToRefs(projectStore);
 const taskStore = useTasksStore();
@@ -36,26 +42,18 @@ const { tasks } = storeToRefs(taskStore);
 const clientStore = useClientsStore();
 const { clients } = storeToRefs(clientStore);
 
-const { createTimeEntry } = useTimeEntriesStore();
 const show = defineModel('show', { default: false });
 const saving = ref(false);
 
-defineProps<{
+const props = defineProps<{
     enableEstimatedTime: boolean;
+    createTimeEntry: (
+        entry: Omit<CreateTimeEntryBody, 'member_id'>
+    ) => Promise<void>;
+    createClient: (client: CreateClientBody) => Promise<Client | undefined>;
+    createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
 }>();
 
-async function createProject(
-    project: CreateProjectBody
-): Promise<Project | undefined> {
-    return await useProjectsStore().createProject(project);
-}
-
-async function createClient(
-    body: CreateClientBody
-): Promise<Client | undefined> {
-    return await useClientsStore().createClient(body);
-}
-
 const description = ref<HTMLInputElement | null>(null);
 
 watch(show, (value) => {
@@ -72,7 +70,7 @@ const timeEntryDefaultValues = {
     task_id: null,
     tags: [],
     billable: false,
-    start: getDayJsInstance().utc().format(),
+    start: getDayJsInstance().utc().subtract(1, 'h').format(),
     end: getDayJsInstance().utc().format(),
     user_id: getCurrentUserId(),
 };
@@ -97,7 +95,7 @@ watch(localEnd, (value) => {
 });
 
 async function submit() {
-    await createTimeEntry(timeEntry.value);
+    await props.createTimeEntry({ ...timeEntry.value });
     timeEntry.value = { ...timeEntryDefaultValues };
     localStart.value = getLocalizedDayJs(timeEntryDefaultValues.start).format();
     localEnd.value = getLocalizedDayJs(timeEntryDefaultValues.end).format();
@@ -107,6 +105,13 @@ const { tags } = storeToRefs(useTagsStore());
 async function createTag(tag: string) {
     return await useTagsStore().createTag(tag);
 }
+
+const billableProxy = computed({
+    get: () => (timeEntry.value.billable ? 'true' : 'false'),
+    set: (value: string) => {
+        timeEntry.value.billable = value === 'true';
+    },
+});
 </script>
 
 <template>
@@ -120,25 +125,28 @@ async function createTag(tag: string) {
         <template #content>
             <div class="sm:flex items-end space-y-2 sm:space-y-0 sm:space-x-4">
                 <div class="flex-1">
-                    <InputLabel for="description" value="Description" />
                     <TextInput
                         id="description"
                         ref="description"
+                        placeholder="What did you work on?"
                         v-model="timeEntry.description"
                         @keydown.enter="submit"
                         type="text"
                         class="mt-1 block w-full" />
                 </div>
-                <div class="flex items-center justify-between">
-                    <div>
+            </div>
+            <div
+                class="sm:flex justify-between items-end space-y-2 sm:space-y-0 pt-4 sm:space-x-4">
+                <div class="flex w-full items-center space-x-2 justify-between">
+                    <div class="flex-1 min-w-0">
                         <TimeTrackerProjectTaskDropdown
                             :clients
                             :createProject
                             :createClient
                             :canCreateProject="canCreateProjects()"
                             :currency="getOrganizationCurrencyString()"
-                            class="mt-1"
                             size="xlarge"
+                            class="bg-input-background"
                             :projects="projects"
                             :tasks="tasks"
                             :enableEstimatedTime="enableEstimatedTime"
@@ -147,33 +155,103 @@ async function createTag(tag: string) {
                                 timeEntry.task_id
                             "></TimeTrackerProjectTaskDropdown>
                     </div>
-                    <div class="flex items-center space-x-2 px-4">
-                        <TimeTrackerTagDropdown
-                            :tags="tags"
-                            :createTag="createTag"
-                            v-model="timeEntry.tags"></TimeTrackerTagDropdown>
-                        <BillableToggleButton
-                            v-model="timeEntry.billable"></BillableToggleButton>
+                    <div class="flex items-center space-x-2">
+                        <div class="flex-col">
+                            <TagDropdown
+                                :createTag
+                                v-model="timeEntry.tags"
+                                :tags="tags">
+                                <template v-slot:trigger>
+                                    <Badge
+                                        class="bg-input-background"
+                                        tag="button"
+                                        size="xlarge">
+                                        <TagIcon
+                                            v-if="timeEntry.tags.length === 0"
+                                            tag="button"
+                                            class="w-4"></TagIcon>
+                                        <div
+                                            v-else
+                                            class="bg-accent-300/20 w-5 h-5 font-medium rounded flex items-center transition justify-center">
+                                            {{ timeEntry.tags.length }}
+                                        </div>
+                                        <span>Tags</span>
+                                    </Badge>
+                                </template>
+                            </TagDropdown>
+                        </div>
+                        <div class="flex-col">
+                            <SelectDropdown
+                                v-model="billableProxy"
+                                :get-key-from-item="(item) => item.value"
+                                :get-name-for-item="(item) => item.label"
+                                :items="[
+                                    {
+                                        label: 'Billable',
+                                        value: 'true',
+                                    },
+                                    {
+                                        label: 'Non Billable',
+                                        value: 'false',
+                                    },
+                                ]">
+                                <template v-slot:trigger>
+                                    <Badge
+                                        class="bg-input-background"
+                                        tag="button"
+                                        size="xlarge">
+                                        <BillableIcon
+                                            class="h-4"></BillableIcon>
+                                        <span>{{
+                                            timeEntry.billable
+                                                ? 'Billable'
+                                                : 'Non-Billable'
+                                        }}</span>
+                                    </Badge>
+                                </template>
+                            </SelectDropdown>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="flex pt-4">
+            <div class="flex pt-4 space-x-4">
                 <div class="flex-1">
+                    <InputLabel>Duration</InputLabel>
+                    <div class="space-y-2 mt-1 flex flex-col">
+                        <DurationHumanInput
+                            class="h-full text-white py-2 flex-1 rounded-r-lg text-left px-3 text-base lg:text-lg font-bold border-input-border border rounded-lg bg-card-background placeholder-muted focus:ring-0 transition"
+                            v-model:start="localStart"
+                            v-model:end="localEnd"></DurationHumanInput>
+                        <div class="text-sm flex space-x-1">
+                            <InformationCircleIcon
+                                class="w-4 text-text-quaternary"></InformationCircleIcon>
+                            <span class="text-text-secondary text-xs">
+                                You can type natural language here f.e.
+                                <span class="font-semibold"> 2h 30m</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="">
                     <InputLabel>Start</InputLabel>
-                    <div class="flex items-center space-x-4 mt-1">
-                        <DatePicker v-model="localStart"></DatePicker>
+                    <div class="flex flex-col items-center space-y-2 mt-1">
                         <TimePicker
                             size="large"
                             v-model="localStart"></TimePicker>
+                        <DatePicker
+                            class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
+                            v-model="localStart"></DatePicker>
                     </div>
                 </div>
-                <div class="flex-1">
+                <div class="">
                     <InputLabel>End</InputLabel>
-                    <div class="flex items-center space-x-4 mt-1">
-                        <DatePicker v-model="localEnd"></DatePicker>
+                    <div class="flex flex-col items-center space-y-2 mt-1">
                         <TimePicker
                             size="large"
                             v-model="localEnd"></TimePicker>
+                        <DatePicker
+                            class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
+                            v-model="localEnd"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 19dff300..4b7d76bf 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -264,7 +264,7 @@ const disableTwoFactorAuthentication = () => {
                         @confirmed="disableTwoFactorAuthentication">
                         <SecondaryButton
                             v-if="confirming"
-                            :class="{ 'opacity-25': disabling }"
+                            :class="disabling ? 'opacity-25' : ''"
                             :disabled="disabling">
                             Cancel
                         </SecondaryButton>
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index 8e8f9e2a..95117973 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -121,6 +121,9 @@ function deleteSelected() {
 <template>
     <TimeEntryCreateModal
         :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+        :createProject="createProject"
+        :createClient="createClient"
+        :createTimeEntry="createTimeEntry"
         v-model:show="showManualTimeEntryModal"></TimeEntryCreateModal>
     <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
diff --git a/resources/js/packages/ui/src/Buttons/SecondaryButton.vue b/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
index 25845617..1a9d80c5 100644
--- a/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
+++ b/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
@@ -10,6 +10,7 @@ const props = withDefaults(
         icon?: Component;
         size: 'small' | 'base';
         loading: boolean;
+        class?: string;
     }>(),
     {
         type: 'button',
@@ -31,7 +32,8 @@ const sizeClasses = {
         :class="
             twMerge(
                 'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:border-input-border-active focus:outline-none focus:ring-0 disabled:opacity-25 ease-in-out',
-                sizeClasses[props.size]
+                sizeClasses[props.size],
+                props.class
             )
         ">
         <span
diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 0d839d88..69d5c4a2 100644
--- a/resources/js/packages/ui/src/Input/DatePicker.vue
+++ b/resources/js/packages/ui/src/Input/DatePicker.vue
@@ -54,7 +54,7 @@ const emit = defineEmits(['changed']);
             @keydown.enter="updateDate"
             :class="
                 twMerge(
-                    'bg-input-background border text-white border-input-border rounded-md',
+                    'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:ring-0 rounded-md',
                     props.class
                 )
             "
@@ -68,6 +68,7 @@ const emit = defineEmits(['changed']);
 <style scoped>
 input::-webkit-calendar-picker-indicator {
     filter: invert(1);
+
     opacity: 0.2;
 }
 </style>
diff --git a/resources/js/packages/ui/src/Input/DurationHumanInput.vue b/resources/js/packages/ui/src/Input/DurationHumanInput.vue
new file mode 100644
index 00000000..a73dec4c
--- /dev/null
+++ b/resources/js/packages/ui/src/Input/DurationHumanInput.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import parse from 'parse-duration';
+import { computed, ref } from 'vue';
+import {
+    formatHumanReadableDuration,
+    getDayJsInstance,
+} from '@/packages/ui/src/utils/time';
+import dayjs from 'dayjs';
+import { twMerge } from 'tailwind-merge';
+const temporaryCustomTimerEntry = ref<string>('');
+
+const start = defineModel('start', {
+    default: '',
+});
+
+const end = defineModel('end', {
+    default: '',
+});
+
+function isHHMM(value: string): boolean {
+    return HHMMtimeRegex.test(value);
+}
+
+function parseHHMM(value: string): string[] | null {
+    return value.match(HHMMtimeRegex);
+}
+
+function updateDuration() {
+    const time = parse(temporaryCustomTimerEntry.value, 's');
+
+    if (isNumeric(temporaryCustomTimerEntry.value)) {
+        const newStartDate = getDayJsInstance()(end.value).subtract(
+            parseInt(temporaryCustomTimerEntry.value),
+            'm'
+        );
+        start.value = newStartDate.utc().format();
+    } else if (isHHMM(temporaryCustomTimerEntry.value)) {
+        const results = parseHHMM(temporaryCustomTimerEntry.value);
+        if (results) {
+            const newStartDate = getDayJsInstance()(end.value)
+                .subtract(parseInt(results[1]), 'h')
+                .subtract(parseInt(results[2]), 'm');
+            start.value = newStartDate.utc().format();
+        }
+    }
+    // try to parse natural language like "1h 30m"
+    else if (time && time > 1) {
+        const newStartDate = getDayJsInstance()(end.value).subtract(time, 's');
+        start.value = newStartDate.utc().format();
+    }
+    // fallback to minutes if just a number is given
+    temporaryCustomTimerEntry.value = '';
+}
+
+function isNumeric(value: string) {
+    return /^-?\d+$/.test(value);
+}
+
+const props = defineProps<{
+    class?: string;
+}>();
+
+const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
+
+const currentTime = computed({
+    get() {
+        if (temporaryCustomTimerEntry.value !== '') {
+            return temporaryCustomTimerEntry.value;
+        }
+        if (start.value && end.value) {
+            const startTime = dayjs(start.value);
+            const diff = getDayJsInstance()(end.value).diff(
+                startTime,
+                'seconds'
+            );
+            return formatHumanReadableDuration(diff);
+        }
+        return null;
+    },
+    // setter
+    set(newValue) {
+        if (newValue) {
+            temporaryCustomTimerEntry.value = newValue;
+        } else {
+            temporaryCustomTimerEntry.value = '';
+        }
+    },
+});
+</script>
+
+<template>
+    <input
+        placeholder="00:00:00"
+        ref="inputField"
+        @blur="updateDuration"
+        @keydown.enter="updateDuration"
+        v-model="currentTime"
+        :class="twMerge('text-text-secondary', props.class)"
+        type="text" />
+</template>
+
+<style scoped></style>
diff --git a/resources/js/packages/ui/src/Input/SelectDropdown.vue b/resources/js/packages/ui/src/Input/SelectDropdown.vue
index e0364649..7ad99f3b 100644
--- a/resources/js/packages/ui/src/Input/SelectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/SelectDropdown.vue
@@ -1,28 +1,33 @@
 <script setup lang="ts" generic="T">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { type Component, computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import SelectDropdownItem from '@/packages/ui/src/Input/SelectDropdownItem.vue';
 import { onKeyStroke } from '@vueuse/core';
 import { type Placement } from '@floating-ui/vue';
+import { twMerge } from 'tailwind-merge';
 
 const model = defineModel<string | null>({
     default: null,
 });
 
+const open = defineModel('open', {
+    default: false,
+});
+
 const props = withDefaults(
     defineProps<{
         items: T[];
         getKeyFromItem: (item: T) => string | null;
         getNameForItem: (item: T) => string;
         align?: Placement;
+        class?: string;
     }>(),
     {
         align: 'bottom-start',
     }
 );
 
-const open = ref(false);
-const dropdownViewport = ref<Component | null>(null);
+const dropdownViewport = ref<HTMLDivElement | null>(null);
 
 const searchValue = ref('');
 
@@ -84,7 +89,7 @@ function moveHighlightDown() {
     }
 }
 
-const highlightedItemId = ref<string | null>(null);
+const highlightedItemId = ref<string | null>(model.value);
 const highlightedItem = computed(() => {
     return props.items.find(
         (item) => props.getKeyFromItem(item) === highlightedItemId.value
@@ -114,9 +119,21 @@ onKeyStroke('Enter', (e) => {
 
 watch(open, () => {
     if (open.value === true) {
-        highlightedItemId.value = model.value;
+        nextTick(() => {
+            scrollCurrentItemInView();
+        });
     }
 });
+
+function scrollCurrentItemInView() {
+    const highlightedDomElement = dropdownViewport.value?.querySelector(
+        `[data-select-id="${model.value}"]`
+    ) as HTMLElement;
+    dropdownViewport.value?.scrollTo({
+        top: highlightedDomElement?.offsetTop ?? 0,
+        behavior: 'instant',
+    });
+}
 </script>
 
 <template>
@@ -125,11 +142,16 @@ watch(open, () => {
             <slot name="trigger"> </slot>
         </template>
         <template #content>
-            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
+            <div
+                ref="dropdownViewport"
+                :class="
+                    twMerge('w-60 max-h-60 overflow-y-scroll', props.class)
+                ">
                 <div
                     v-for="item in filteredItems"
                     :key="props.getKeyFromItem(item) ?? 'none'"
                     role="option"
+                    :data-select-id="props.getKeyFromItem(item)"
                     :value="props.getKeyFromItem(item)"
                     :class="{
                         'bg-card-background-active':
diff --git a/resources/js/packages/ui/src/Input/TimePicker.vue b/resources/js/packages/ui/src/Input/TimePicker.vue
index 2652264a..5b5a5554 100644
--- a/resources/js/packages/ui/src/Input/TimePicker.vue
+++ b/resources/js/packages/ui/src/Input/TimePicker.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import {
     getDayJsInstance,
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
-import { twMerge } from 'tailwind-merge';
 import { useFocus } from '@vueuse/core';
+import { SelectDropdown, TextInput } from '@/packages/ui/src';
 
 // This has to be a localized timestamp, not UTC
 const model = defineModel<string | null>({
@@ -23,98 +23,104 @@ const props = withDefaults(
     }
 );
 
-const hours = ref(
-    model.value ? getLocalizedDayJs(model.value).format('HH') : null
-);
-const minutes = ref(
-    model.value ? getLocalizedDayJs(model.value).format('mm') : null
-);
-watch(
-    () => model.value,
-    () => {
-        hours.value = model.value
-            ? getLocalizedDayJs(model.value).format('HH')
-            : null;
-        minutes.value = model.value
-            ? getLocalizedDayJs(model.value).format('mm')
-            : null;
-    }
-);
-
-function updateMinutes(event: Event) {
+function updateTime(event: Event) {
     const target = event.target as HTMLInputElement;
-    const newValue = target.value;
-    if (!isNaN(parseInt(newValue))) {
-        model.value = getDayJsInstance()(model.value)
-            .set('minutes', Math.min(parseInt(newValue), 59))
-            .format();
+    const newValue = target.value.trim();
+    if (newValue.split(':').length === 2) {
+        const [hours, minutes] = newValue.split(':');
+        if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        }
     }
-    minutes.value = model.value
-        ? getLocalizedDayJs(model.value).format('mm')
-        : null;
+    inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
 }
 
-function updateHours(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const newValue = target.value;
-    if (newValue.endsWith(':')) {
-        minutesInput.value?.focus();
-    } else if (!isNaN(parseInt(newValue))) {
-        model.value = getLocalizedDayJs(model.value)
-            .set('hours', Math.min(parseInt(newValue), 23))
-            .format();
-    }
-    hours.value = model.value
-        ? getLocalizedDayJs(model.value).format('HH')
-        : null;
-}
+watch(model, (value) => {
+    inputValue.value = value ? getLocalizedDayJs(value).format('HH:mm') : null;
+});
 
-const hoursInput = ref<HTMLInputElement | null>(null);
-const minutesInput = ref<HTMLInputElement | null>(null);
+const timeInput = ref<HTMLInputElement | null>(null);
 const emit = defineEmits(['changed']);
 
-useFocus(hoursInput, { initialValue: props.focus });
+useFocus(timeInput, { initialValue: props.focus });
+
+const getStartOptions = computed(() => {
+    // options for the entire day in 15 minute intervals
+    const options = [];
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 15) {
+            const timestamp = getLocalizedDayJs(model.value)
+                .set('hour', hour)
+                .set('minute', minute)
+                .format();
+            const name = getLocalizedDayJs(model.value)
+                .set('hour', hour)
+                .set('minute', minute)
+                .format('HH:mm');
+            options.push({ timestamp, name });
+        }
+    }
+    return options;
+});
+const inputValue = ref(
+    model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
+);
+const open = ref(false);
+const closestValue = computed({
+    get() {
+        const target = getDayJsInstance()(model.value);
+        let closestDiff: number | null = null;
+        let closest = target;
+        for (const option of getStartOptions.value) {
+            const diff = Math.abs(
+                getDayJsInstance()(option.timestamp).diff(target)
+            );
+            if (closestDiff === null || diff < closestDiff) {
+                closestDiff = diff;
+                closest = getDayJsInstance()(option.timestamp);
+            }
+        }
+        return closest.format();
+    },
+    set(value: string) {
+        model.value = value;
+        emit('changed', model.value);
+    },
+});
 </script>
 
 <template>
-    <div class="flex items-center justify-center text-white">
-        <div
-            :class="
-                twMerge(
-                    'border bg-input-background rounded-md border-input-border overflow-hidden',
-                    props.size === 'large' ? 'py-1.5 px-2' : ''
-                )
-            ">
-            <input
-                v-model="hours"
-                ref="hoursInput"
-                @input="updateHours"
-                @keydown.enter="emit('changed')"
-                @focus="($event.target as HTMLInputElement).select()"
-                data-testid="time_picker_hour"
-                type="text"
-                :class="
-                    twMerge(
-                        'border-none bg-transparent px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active',
-                        props.size === 'large' ? 'text-base' : 'text-sm'
-                    )
-                " />
-            <span>:</span>
-            <input
-                v-model="minutes"
-                ref="minutesInput"
-                @keydown.enter="emit('changed')"
-                @input="updateMinutes"
-                @focus="($event.target as HTMLInputElement).select()"
-                data-testid="time_picker_minute"
-                type="text"
-                :class="
-                    twMerge(
-                        'border-none bg-transparent px-1 py-1 w-[30px] text-center focus:ring-0 focus:bg-card-background-active',
-                        props.size === 'large' ? 'text-base' : 'text-sm'
-                    )
-                " />
-        </div>
+    <div class="flex min-w-0 items-center justify-center text-white">
+        <SelectDropdown
+            class="min-w-0 w-28"
+            v-model="closestValue"
+            v-model:open="open"
+            :get-key-from-item="(item) => item.timestamp"
+            :get-name-for-item="(item) => item.name"
+            :items="getStartOptions">
+            <template #trigger>
+                <TextInput
+                    v-model="inputValue"
+                    ref="timeInput"
+                    class="w-28 text-center"
+                    @blur="updateTime"
+                    @keydown.enter="
+                        updateTime($event);
+                        open = false;
+                    "
+                    @focus="($event.target as HTMLInputElement).select()"
+                    @mouseup="($event.target as HTMLInputElement).select()"
+                    @click="($event.target as HTMLInputElement).select()"
+                    @pointerup="($event.target as HTMLInputElement).select()"
+                    @focusin="open = true"
+                    data-testid="time_picker_hour"
+                    type="text" />
+            </template>
+        </SelectDropdown>
     </div>
 </template>
 
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index df8870da..36591d4e 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -19,6 +19,7 @@ import {
     XMarkIcon,
 } from '@heroicons/vue/16/solid';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
+import { twMerge } from 'tailwind-merge';
 
 const task = defineModel<string | null>('task', {
     default: null,
@@ -65,6 +66,7 @@ const props = withDefaults(
         allowReset: boolean;
         enableEstimatedTime: boolean;
         canCreateProject: boolean;
+        class?: string;
     }>(),
     {
         showBadgeBorder: true,
@@ -552,7 +554,12 @@ const showCreateProject = ref(false);
                 :border="showBadgeBorder"
                 tag="button"
                 :name="selectedProjectName"
-                class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0 relative">
+                :class="
+                    twMerge(
+                        'focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0 relative',
+                        props.class
+                    )
+                ">
                 <div class="flex items-center lg:space-x-1 min-w-0">
                     <span class="whitespace-nowrap text-xs lg:text-sm">
                         {{ selectedProjectName }}
diff --git a/resources/js/utils/useCurrentTimeEntry.ts b/resources/js/utils/useCurrentTimeEntry.ts
index d401a9fd..70713c99 100644
--- a/resources/js/utils/useCurrentTimeEntry.ts
+++ b/resources/js/utils/useCurrentTimeEntry.ts
@@ -17,7 +17,7 @@ dayjs.extend(utc);
 
 const emptyTimeEntry = {
     id: '',
-    description: null,
+    description: '',
     user_id: '',
     start: '',
     end: null,