From 636914bbe5d776d4c2a4d67e0be5bbc99db9791c Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 12 Nov 2024 15:30:39 +0100
Subject: [PATCH] improve time picker parsing, fix nested escape listeners,
 change project member select

---
 e2e/project-members.spec.ts                   |   1 +
 e2e/time.spec.ts                              |  11 +-
 .../Common/Member/MemberCombobox.vue          | 153 +++---------------
 .../Common/Member/MemberEditModal.vue         |   1 +
 .../ProjectMember/ProjectMemberEditModal.vue  |   1 +
 .../Common/TimeEntry/TimeEntryCreateModal.vue |   1 -
 .../Partials/OrganizationBillableRate.vue     |   1 +
 .../ui/src/Input/BillableRateInput.vue        |   2 +-
 .../js/packages/ui/src/Input/DatePicker.vue   |   2 +-
 .../js/packages/ui/src/Input/Dropdown.vue     |  27 +++-
 .../ui/src/Input/DurationHumanInput.vue       |  44 ++---
 .../packages/ui/src/Input/SelectDropdown.vue  |  61 ++++---
 .../ui/src/Input/SelectDropdownItem.vue       |  24 +--
 .../js/packages/ui/src/Input/TextInput.vue    |  11 +-
 .../js/packages/ui/src/Input/TimePicker.vue   |  54 ++++++-
 .../ui/src/Input/TimeRangeSelector.vue        |   8 +-
 resources/js/packages/ui/src/Modal.vue        |  23 ++-
 .../Project/ProjectEditBillableSection.vue    |   2 +-
 .../src/TimeEntry/TimeEntryRangeSelector.vue  |  15 +-
 .../TimeEntry/TimeEntryRowDurationInput.vue   |   3 +-
 .../packages/ui/src/utils/dismissableLayer.ts |   7 +
 21 files changed, 224 insertions(+), 228 deletions(-)
 create mode 100644 resources/js/packages/ui/src/utils/dismissableLayer.ts

diff --git a/e2e/project-members.spec.ts b/e2e/project-members.spec.ts
index d1d22dcb..656f5781 100644
--- a/e2e/project-members.spec.ts
+++ b/e2e/project-members.spec.ts
@@ -24,6 +24,7 @@ test('test that updating project member billable rate works for existing time en
     await page.getByRole('button', { name: 'Add Member' }).click();
 
     await expect(page.getByText('Add Project Member').first()).toBeVisible();
+    await page.getByRole('button', { name: 'Select a member' }).click();
     await page.keyboard.press('Enter');
     await page.getByRole('button', { name: 'Add Project Member' }).click();
 
diff --git a/e2e/time.spec.ts b/e2e/time.spec.ts
index b65aab50..cc6ffb49 100644
--- a/e2e/time.spec.ts
+++ b/e2e/time.spec.ts
@@ -191,14 +191,7 @@ test('test that updating a the start of an existing time entry in the overview w
         'time_entry_range_selector'
     );
     await timeEntryRangeElement.click();
-    await page
-        .getByTestId('time_entry_range_start')
-        .getByTestId('time_picker_hour')
-        .fill('1');
-    await page
-        .getByTestId('time_entry_range_start')
-        .getByTestId('time_picker_minute')
-        .fill('1');
+    await page.getByTestId('time_picker_input').first().fill('1');
     await Promise.all([
         page.waitForResponse(async (response) => {
             return (
@@ -213,7 +206,7 @@ test('test that updating a the start of an existing time entry in the overview w
         }),
         page
             .getByTestId('time_entry_range_end')
-            .getByTestId('time_picker_minute')
+            .getByTestId('time_picker_input')
             .press('Enter'),
     ]);
 });
diff --git a/resources/js/Components/Common/Member/MemberCombobox.vue b/resources/js/Components/Common/Member/MemberCombobox.vue
index b324d720..8f059e8e 100644
--- a/resources/js/Components/Common/Member/MemberCombobox.vue
+++ b/resources/js/Components/Common/Member/MemberCombobox.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import ClientDropdownItem from '@/packages/ui/src/Client/ClientDropdownItem.vue';
 import { useMembersStore } from '@/utils/useMembers';
-import { UserIcon, XMarkIcon } from '@heroicons/vue/24/solid';
-import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import { UserIcon, ChevronDownIcon } from '@heroicons/vue/24/solid';
 import { useFocus } from '@vueuse/core';
 import type { ProjectMember } from '@/packages/api/src';
-import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
+import { Badge, SelectDropdown } from '@/packages/ui/src';
+import type { Member } from '@/packages/api';
 
 const membersStore = useMembersStore();
 const { members } = storeToRefs(membersStore);
@@ -31,13 +30,9 @@ const searchInput = ref<HTMLInputElement | null>(null);
 
 const searchValue = ref('');
 
-function isMemberSelected(id: string) {
-    return model.value === id;
-}
-
 useFocus(searchInput, { initialValue: true });
 
-const filteredMembers = computed(() => {
+const filteredMembers = computed<Member[]>(() => {
     return members.value.filter((member) => {
         return (
             member.name
@@ -65,70 +60,7 @@ function resetHighlightedItem() {
     }
 }
 
-function updateSearchValue(event: Event) {
-    const newInput = (event.target as HTMLInputElement).value;
-    if (newInput === ' ') {
-        searchValue.value = '';
-        const highlightedClientId = highlightedItemId.value;
-        if (highlightedClientId) {
-            const highlightedClient = members.value.find(
-                (member) => member.id === highlightedClientId
-            );
-            if (highlightedClient) {
-                model.value = highlightedClient.id;
-            }
-        }
-    } else {
-        searchValue.value = newInput;
-    }
-}
-
-const emit = defineEmits(['update:modelValue', 'changed']);
-
-function updateMember(newValue: string | null) {
-    if (newValue) {
-        model.value = newValue;
-        nextTick(() => {
-            emit('changed');
-        });
-    }
-}
-
-function moveHighlightUp() {
-    if (highlightedItem.value) {
-        const currentHightlightedIndex = filteredMembers.value.indexOf(
-            highlightedItem.value
-        );
-        if (currentHightlightedIndex === 0) {
-            highlightedItemId.value =
-                filteredMembers.value[filteredMembers.value.length - 1].id;
-        } else {
-            highlightedItemId.value =
-                filteredMembers.value[currentHightlightedIndex - 1].id;
-        }
-    }
-}
-
-function moveHighlightDown() {
-    if (highlightedItem.value) {
-        const currentHightlightedIndex = filteredMembers.value.indexOf(
-            highlightedItem.value
-        );
-        if (currentHightlightedIndex === filteredMembers.value.length - 1) {
-            highlightedItemId.value = filteredMembers.value[0].id;
-        } else {
-            highlightedItemId.value =
-                filteredMembers.value[currentHightlightedIndex + 1].id;
-        }
-    }
-}
-
 const highlightedItemId = ref<string | null>(null);
-const highlightedItem = computed(() => {
-    return members.value.find(
-        (member) => member.id === highlightedItemId.value
-    );
-});
 
 const currentValue = computed(() => {
     if (model.value) {
@@ -136,70 +68,27 @@ const currentValue = computed(() => {
     }
     return searchValue.value;
 });
-
-const hasMemberSelected = computed(() => {
-    return model.value !== '';
-});
-
-const showMembersDropdown = ref(true);
 </script>
 
 <template>
-    <Dropdown
-        align="bottom-start"
-        width="300"
-        v-model="showMembersDropdown"
-        :closeOnContentClick="true">
-        <template #trigger>
-            <div class="flex relative">
-                <div
-                    ref="reference"
-                    class="absolute h-full items-center px-3 w-full flex justify-between">
-                    <UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
-                    <button
-                        v-if="hasMemberSelected"
-                        @click="model = ''"
-                        class="focus:text-accent-200 focus:bg-card-background text-muted">
-                        <XMarkIcon class="relative z-10 w-4"></XMarkIcon>
-                    </button>
+    <SelectDropdown
+        v-model="model"
+        :items="filteredMembers"
+        :get-key-from-item="(member) => member.id"
+        :get-name-for-item="(member) => member.name">
+        <template v-slot:trigger>
+            <Badge
+                tag="button"
+                class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary font-normal cursor py-1.5">
+                <UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
+                <div v-if="currentValue" class="flex-1 truncate">
+                    {{ currentValue }}
                 </div>
-                <TextInput
-                    :value="currentValue"
-                    :disabled="disabled"
-                    @input="updateSearchValue"
-                    data-testid="member_dropdown_search"
-                    @keydown.enter.prevent="updateMember(highlightedItemId)"
-                    @keydown.up.prevent="moveHighlightUp"
-                    class="relative w-full pl-10"
-                    @keydown.down.prevent="moveHighlightDown"
-                    placeholder="Search for a member..."
-                    ref="searchInput" />
-            </div>
-        </template>
-        <template #content>
-            <div
-                class="py-2 text-white px-3"
-                v-if="filteredMembers.length === 0">
-                All members are already added.
-            </div>
-            <div
-                v-for="member in filteredMembers"
-                :key="member.id"
-                role="option"
-                :value="member.id"
-                :class="{
-                    'bg-card-background-active':
-                        member.id === highlightedItemId,
-                }"
-                @click="updateMember(member.id)"
-                data-testid="client_dropdown_entries"
-                :data-client-id="member.id">
-                <ClientDropdownItem
-                    :selected="isMemberSelected(member.id)"
-                    :name="member.name"></ClientDropdownItem>
-            </div>
+                <div class="flex-1" v-else>Select a member...</div>
+                <ChevronDownIcon class="w-4 text-muted"></ChevronDownIcon>
+            </Badge>
         </template>
-    </Dropdown>
+    </SelectDropdown>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/Components/Common/Member/MemberEditModal.vue b/resources/js/Components/Common/Member/MemberEditModal.vue
index bbb734ff..71dc3627 100644
--- a/resources/js/Components/Common/Member/MemberEditModal.vue
+++ b/resources/js/Components/Common/Member/MemberEditModal.vue
@@ -151,6 +151,7 @@ const roleDescription = computed(() => {
                             v-if="billableRateSelect === 'custom-rate'">
                             <InputLabel
                                 for="memberBillableRate"
+                                class="mb-2"
                                 value="Billable Rate" />
                             <BillableRateInput
                                 focus
diff --git a/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue b/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
index e0391952..6dcf8e04 100644
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
@@ -89,6 +89,7 @@ useFocus(projectNameInput, { initialValue: true });
                 <div class="col-span-3 sm:col-span-1 flex-1">
                     <InputLabel
                         for="billable_rate"
+                        class="mb-2"
                         value="Billable Rate"></InputLabel>
                     <BillableRateInput
                         @keydown.enter="submit"
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue b/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
index 54019f48..4132cbfe 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
@@ -219,7 +219,6 @@ const billableProxy = computed({
                     <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">
diff --git a/resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue b/resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
index 03f42cc7..460319dc 100644
--- a/resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
+++ b/resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
@@ -71,6 +71,7 @@ function checkForConfirmationModal() {
                 <div class="col-span-6 sm:col-span-4">
                     <InputLabel
                         for="organizationBillableRate"
+                        class="mb-2"
                         value="Organization Billable Rate" />
                     <BillableRateInput
                         v-if="organization"
diff --git a/resources/js/packages/ui/src/Input/BillableRateInput.vue b/resources/js/packages/ui/src/Input/BillableRateInput.vue
index f48a0175..fcebe99e 100644
--- a/resources/js/packages/ui/src/Input/BillableRateInput.vue
+++ b/resources/js/packages/ui/src/Input/BillableRateInput.vue
@@ -82,7 +82,7 @@ const inputValue = ref(formatValue(model.value));
             type="text"
             :name="name"
             placeholder="Billable Rate"
-            class="mt-2 block w-full"
+            class="block w-full"
             autocomplete="teamMemberRate" />
         <div
             class="absolute top-0 right-0 h-full flex items-center px-4 font-medium pointer-events-none">
diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 69d5c4a2..f7af1d1b 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 focus-visible:outline-0 focus-visible:ring-0 rounded-md',
+                    'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
                     props.class
                 )
             "
diff --git a/resources/js/packages/ui/src/Input/Dropdown.vue b/resources/js/packages/ui/src/Input/Dropdown.vue
index 3d1b468a..827b8776 100644
--- a/resources/js/packages/ui/src/Input/Dropdown.vue
+++ b/resources/js/packages/ui/src/Input/Dropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import {
     flip,
     limitShift,
@@ -10,6 +10,8 @@ import {
 } from '@floating-ui/vue';
 import { offset } from '@floating-ui/vue';
 import { autoUpdate } from '@floating-ui/vue';
+import { useId } from 'radix-vue';
+import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
 
 const props = withDefaults(
     defineProps<{
@@ -24,17 +26,28 @@ const props = withDefaults(
 
 const emit = defineEmits(['open', 'submit']);
 const open = defineModel({ default: false });
+const id = useId();
 
 const closeOnEscape = (e: KeyboardEvent) => {
-    if (open.value && e.key === 'Escape') {
-        open.value = false;
-    }
-    if (open.value && e.key === 'Enter') {
-        emit('submit');
-        if (props.closeOnContentClick) open.value = false;
+    if (isLastLayer(id)) {
+        if (open.value && e.key === 'Escape') {
+            open.value = false;
+        }
+        if (open.value && e.key === 'Enter') {
+            emit('submit');
+            if (props.closeOnContentClick) open.value = false;
+        }
     }
 };
 
+watch(open, (value) => {
+    if (value) {
+        layers.value.push(id);
+    } else {
+        layers.value = layers.value.filter((layer) => layer !== id);
+    }
+});
+
 onMounted(() => document.addEventListener('keydown', closeOnEscape));
 onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
 
diff --git a/resources/js/packages/ui/src/Input/DurationHumanInput.vue b/resources/js/packages/ui/src/Input/DurationHumanInput.vue
index a73dec4c..b980e5c4 100644
--- a/resources/js/packages/ui/src/Input/DurationHumanInput.vue
+++ b/resources/js/packages/ui/src/Input/DurationHumanInput.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import parse from 'parse-duration';
-import { computed, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import {
     formatHumanReadableDuration,
     getDayJsInstance,
 } from '@/packages/ui/src/utils/time';
 import dayjs from 'dayjs';
 import { twMerge } from 'tailwind-merge';
+import { TextInput } from '@/packages/ui/src';
 const temporaryCustomTimerEntry = ref<string>('');
 
 const start = defineModel('start', {
@@ -49,7 +50,7 @@ function updateDuration() {
         start.value = newStartDate.utc().format();
     }
     // fallback to minutes if just a number is given
-    temporaryCustomTimerEntry.value = '';
+    updateTimeEntryInputValue();
 }
 
 function isNumeric(value: string) {
@@ -62,39 +63,24 @@ const props = defineProps<{
 
 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 = '';
-        }
-    },
-});
+watch([start, end], updateTimeEntryInputValue);
+onMounted(() => updateTimeEntryInputValue());
+
+function updateTimeEntryInputValue() {
+    if (start.value && end.value) {
+        const startTime = dayjs(start.value);
+        const diff = getDayJsInstance()(end.value).diff(startTime, 'seconds');
+        temporaryCustomTimerEntry.value = formatHumanReadableDuration(diff);
+    }
+}
 </script>
 
 <template>
-    <input
-        placeholder="00:00:00"
+    <TextInput
         ref="inputField"
         @blur="updateDuration"
         @keydown.enter="updateDuration"
-        v-model="currentTime"
+        v-model="temporaryCustomTimerEntry"
         :class="twMerge('text-text-secondary', props.class)"
         type="text" />
 </template>
diff --git a/resources/js/packages/ui/src/Input/SelectDropdown.vue b/resources/js/packages/ui/src/Input/SelectDropdown.vue
index 7ad99f3b..70df41dd 100644
--- a/resources/js/packages/ui/src/Input/SelectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/SelectDropdown.vue
@@ -5,7 +5,6 @@ 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,
 });
@@ -41,12 +40,36 @@ const filteredItems = computed<T[]>(() => {
     });
 });
 
+const highlightedItemId = ref<string | null>(model.value);
+
+watch(model, () => {
+    highlightedItemId.value = model.value;
+});
+
 watch(filteredItems, () => {
-    if (filteredItems.value.length > 0) {
+    if (
+        filteredItems.value.length > 0 &&
+        filteredItems.value.find(
+            (item) => props.getKeyFromItem(item) === highlightedItemId.value
+        ) === undefined
+    ) {
         highlightedItemId.value = props.getKeyFromItem(filteredItems.value[0]);
     }
 });
 
+watch(highlightedItemId, () => {
+    if (highlightedItemId.value) {
+        const highlightedDomElement = dropdownViewport.value?.querySelector(
+            `[data-select-id="${highlightedItemId.value}"]`
+        ) as HTMLElement;
+
+        highlightedDomElement?.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+});
+
 const emit = defineEmits(['update:modelValue', 'changed']);
 
 function setItem(newValue: string | null) {
@@ -89,7 +112,6 @@ function moveHighlightDown() {
     }
 }
 
-const highlightedItemId = ref<string | null>(model.value);
 const highlightedItem = computed(() => {
     return props.items.find(
         (item) => props.getKeyFromItem(item) === highlightedItemId.value
@@ -120,20 +142,16 @@ onKeyStroke('Enter', (e) => {
 watch(open, () => {
     if (open.value === true) {
         nextTick(() => {
-            scrollCurrentItemInView();
+            const highlightedDomElement = dropdownViewport.value?.querySelector(
+                `[data-select-id="${model.value}"]`
+            ) as HTMLElement;
+            dropdownViewport.value?.scrollTo({
+                top: highlightedDomElement?.offsetTop ?? 0,
+                behavior: 'instant',
+            });
         });
     }
 });
-
-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>
@@ -145,7 +163,10 @@ function scrollCurrentItemInView() {
             <div
                 ref="dropdownViewport"
                 :class="
-                    twMerge('w-60 max-h-60 overflow-y-scroll', props.class)
+                    twMerge(
+                        'w-60 py-1.5 max-h-60 overflow-y-scroll',
+                        props.class
+                    )
                 ">
                 <div
                     v-for="item in filteredItems"
@@ -153,12 +174,14 @@ function scrollCurrentItemInView() {
                     role="option"
                     :data-select-id="props.getKeyFromItem(item)"
                     :value="props.getKeyFromItem(item)"
-                    :class="{
-                        'bg-card-background-active':
-                            props.getKeyFromItem(item) === highlightedItemId,
-                    }"
                     :data-item-id="props.getKeyFromItem(item)">
                     <SelectDropdownItem
+                        @mouseenter="
+                            highlightedItemId = props.getKeyFromItem(item)
+                        "
+                        :highlighted="
+                            props.getKeyFromItem(item) === highlightedItemId
+                        "
                         :selected="props.getKeyFromItem(item) === model"
                         @click="setItem(props.getKeyFromItem(item))"
                         :name="props.getNameForItem(item)"></SelectDropdownItem>
diff --git a/resources/js/packages/ui/src/Input/SelectDropdownItem.vue b/resources/js/packages/ui/src/Input/SelectDropdownItem.vue
index ef930f31..77b37790 100644
--- a/resources/js/packages/ui/src/Input/SelectDropdownItem.vue
+++ b/resources/js/packages/ui/src/Input/SelectDropdownItem.vue
@@ -4,20 +4,24 @@ import { twMerge } from 'tailwind-merge';
 const props = defineProps<{
     name: string;
     selected: boolean;
+    highlighted: boolean;
 }>();
 </script>
 
 <template>
-    <div
-        :class="
-            twMerge(
-                'flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out cursor-pointer ',
-                props.selected
-                    ? 'bg-accent-300/20'
-                    : 'hover:bg-card-background-active'
-            )
-        ">
-        <span>{{ name }}</span>
+    <div class="px-1">
+        <div
+            :class="
+                twMerge(
+                    'flex items-center space-x-3 w-full px-1.5 py-1.5 rounded text-start text-sm font-medium leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out cursor-pointer ',
+                    props.highlighted && 'bg-card-background-active',
+                    props.selected
+                        ? 'bg-accent-300/20'
+                        : 'hover:bg-card-background-active'
+                )
+            ">
+            <span>{{ name }}</span>
+        </div>
     </div>
 </template>
 
diff --git a/resources/js/packages/ui/src/Input/TextInput.vue b/resources/js/packages/ui/src/Input/TextInput.vue
index c8f08554..f29d9f1b 100644
--- a/resources/js/packages/ui/src/Input/TextInput.vue
+++ b/resources/js/packages/ui/src/Input/TextInput.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { twMerge } from 'tailwind-merge';
 
-defineProps<{
+const props = defineProps<{
     name?: string;
+    class?: string;
 }>();
 
 const input = ref<HTMLInputElement | null>(null);
@@ -20,7 +22,12 @@ const model = defineModel();
 <template>
     <input
         ref="input"
-        class="border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm"
+        :class="
+            twMerge(
+                'border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm',
+                props.class
+            )
+        "
         v-model="model"
         :name="name" />
 </template>
diff --git a/resources/js/packages/ui/src/Input/TimePicker.vue b/resources/js/packages/ui/src/Input/TimePicker.vue
index 5b5a5554..c07a5253 100644
--- a/resources/js/packages/ui/src/Input/TimePicker.vue
+++ b/resources/js/packages/ui/src/Input/TimePicker.vue
@@ -6,6 +6,7 @@ import {
 } from '@/packages/ui/src/utils/time';
 import { useFocus } from '@vueuse/core';
 import { SelectDropdown, TextInput } from '@/packages/ui/src';
+import { twMerge } from 'tailwind-merge';
 
 // This has to be a localized timestamp, not UTC
 const model = defineModel<string | null>({
@@ -36,6 +37,47 @@ function updateTime(event: Event) {
             emit('changed', model.value);
         }
     }
+    // check if input is only numbers
+    else if (/^\d+$/.test(newValue)) {
+        if (newValue.length === 4) {
+            // parse 1300 to 13:00
+            const [hours, minutes] = [
+                newValue.slice(0, 2),
+                newValue.slice(2, 4),
+            ];
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        } else if (newValue.length === 3) {
+            // parse 130 to 01:30
+            const [hours, minutes] = [
+                newValue.slice(0, 1),
+                newValue.slice(1, 3),
+            ];
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        } else if (newValue.length === 2) {
+            // parse 13 to 13:00
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(newValue), 23))
+                .set('minutes', 0)
+                .format();
+            emit('changed', model.value);
+        } else if (newValue.length === 1) {
+            // parse 1 to 01:00
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(newValue), 23))
+                .set('minutes', 0)
+                .format();
+            emit('changed', model.value);
+        }
+    }
+
     inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
 }
 
@@ -96,7 +138,7 @@ const closestValue = computed({
 <template>
     <div class="flex min-w-0 items-center justify-center text-white">
         <SelectDropdown
-            class="min-w-0 w-28"
+            :class="twMerge('mine-w-0 w-24', size === 'large' && 'w-28')"
             v-model="closestValue"
             v-model:open="open"
             :get-key-from-item="(item) => item.timestamp"
@@ -106,18 +148,24 @@ const closestValue = computed({
                 <TextInput
                     v-model="inputValue"
                     ref="timeInput"
-                    class="w-28 text-center"
+                    :class="
+                        twMerge(
+                            'text-center w-24 px-3 py-2',
+                            size === 'large' && 'w-28'
+                        )
+                    "
                     @blur="updateTime"
                     @keydown.enter="
                         updateTime($event);
                         open = false;
                     "
+                    @keydown.tab="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"
+                    data-testid="time_picker_input"
                     type="text" />
             </template>
         </SelectDropdown>
diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
index 1f48b675..756bca2f 100644
--- a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
+++ b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
@@ -57,27 +57,27 @@ watch(focused, (newValue, oldValue) => {
         class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2">
         <div class="px-2">
             <div class="font-bold text-white text-sm pb-2">Start</div>
-            <div class="space-y-1">
+            <div class="space-y-2">
                 <TimePicker
                     data-testid="time_entry_range_start"
                     :focus
                     @changed="updateTimeEntry"
                     v-model="tempStart"></TimePicker>
                 <DatePicker
-                    class="text-sm px-2 py-1"
+                    class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
                     @changed="updateTimeEntry"
                     v-model="tempStart"></DatePicker>
             </div>
         </div>
         <div class="px-2">
             <div class="font-bold text-white text-sm pb-2">End</div>
-            <div v-if="tempEnd !== null" class="space-y-1">
+            <div v-if="tempEnd !== null" class="space-y-2">
                 <TimePicker
                     data-testid="time_entry_range_end"
                     @changed="updateTimeEntry"
                     v-model="tempEnd"></TimePicker>
                 <DatePicker
-                    class="text-sm px-2 py-1"
+                    class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
                     @changed="updateTimeEntry"
                     v-model="tempEnd"></DatePicker>
             </div>
diff --git a/resources/js/packages/ui/src/Modal.vue b/resources/js/packages/ui/src/Modal.vue
index a21f7ed7..4f275b9d 100644
--- a/resources/js/packages/ui/src/Modal.vue
+++ b/resources/js/packages/ui/src/Modal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { useId } from 'radix-vue';
+import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
 
 const props = defineProps({
     show: {
@@ -34,20 +36,35 @@ const close = () => {
         emit('close');
     }
 };
+const id = useId();
 
 const closeOnEscape = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && props.show) {
-        close();
+    if (isLastLayer(id)) {
+        if (e.key === 'Escape' && props.show) {
+            close();
+        }
     }
 };
 
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onMounted(() => {
+    document.addEventListener('keydown', closeOnEscape);
+});
 
 onUnmounted(() => {
     document.removeEventListener('keydown', closeOnEscape);
     document.body.style.overflow = 'visible';
 });
 
+watch(
+    () => props.show,
+    (value) => {
+        if (value) {
+            layers.value.push(id);
+        } else {
+            layers.value = layers.value.filter((layer) => layer !== id);
+        }
+    }
+);
 const maxWidthClass = computed(() => {
     return {
         sm: 'sm:max-w-sm',
diff --git a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue b/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
index b93bd046..60c98903 100644
--- a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
+++ b/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
@@ -69,7 +69,7 @@ const emit = defineEmits(['submit']);
         <div
             class="sm:max-w-[120px]"
             v-if="billableRateSelect === 'custom-rate'">
-            <InputLabel for="billableRate" value="Billable Rate" />
+            <InputLabel for="billableRate" value="Billable Rate" class="mb-2" />
             <BillableRateInput
                 @keydown.enter="emit('submit')"
                 :currency="currency"
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
index 4b6a67e8..4135cf77 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -3,6 +3,7 @@ import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { defineProps, ref } from 'vue';
 import { formatDate, formatStartEnd } from '@/packages/ui/src/utils/time';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
+import { twMerge } from 'tailwind-merge';
 
 defineProps<{
     start: string;
@@ -27,11 +28,15 @@ const open = ref(false);
             <template #trigger>
                 <button
                     data-testid="time_entry_range_selector"
-                    class="text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                    :class="{
-                        'text-sm py-2 font-medium': !showDate,
-                        'text-xs py-1.5 font-semibold': showDate,
-                    }">
+                    :class="
+                        twMerge(
+                            'text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
+                            showDate
+                                ? 'text-xs py-1.5 font-semibold'
+                                : 'text-sm py-2 font-medium',
+                            open && 'border-card-border bg-card-background'
+                        )
+                    ">
                     {{ formatStartEnd(start, end) }}
                     <span v-if="showDate" class="text-text-tertiary font-medium"
                         >{{ formatDate(start) }}
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
index c186c221..e50beb51 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
@@ -71,8 +71,9 @@ function selectInput(event: Event) {
         <template #trigger>
             <input
                 data-testid="time_entry_duration_input"
-                class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold"
+                class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-white/80"
                 @focus="selectInput"
+                @keydown.tab="open = false"
                 @blur="updateTimerAndStartLiveTimerUpdate"
                 @keydown.enter="updateTimerAndStartLiveTimerUpdate"
                 v-model="currentTime" />
diff --git a/resources/js/packages/ui/src/utils/dismissableLayer.ts b/resources/js/packages/ui/src/utils/dismissableLayer.ts
new file mode 100644
index 00000000..ba3d3521
--- /dev/null
+++ b/resources/js/packages/ui/src/utils/dismissableLayer.ts
@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+export const layers = ref<string[]>([]);
+
+export function isLastLayer(id: string) {
+    return layers.value[layers.value.length - 1] === id;
+}