add format check, update prettier rules, apply rules consistently

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

@@ -13,19 +13,19 @@ import type {
     TimeEntry,
     Client,
 } from '@/packages/api/src';
-import {computed, nextTick, ref, watch} from 'vue';
-import type {Dayjs} from 'dayjs';
-import {useTimeEntriesStore} from '@/utils/useTimeEntries';
-import {storeToRefs} from 'pinia';
-import {useFocus} from "@vueuse/core";
-import {autoUpdate, flip, limitShift, offset, shift, useFloating} from "@floating-ui/vue";
-import TimeTrackerRecentlyTrackedEntry from "@/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue";
-import {useSelectEvents} from "@/packages/ui/src/utils/select";
+import { computed, nextTick, ref, watch } from 'vue';
+import type { Dayjs } from 'dayjs';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { storeToRefs } from 'pinia';
+import { useFocus } from '@vueuse/core';
+import { autoUpdate, flip, limitShift, offset, shift, useFloating } from '@floating-ui/vue';
+import TimeTrackerRecentlyTrackedEntry from '@/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue';
+import { useSelectEvents } from '@/packages/ui/src/utils/select';
 
 const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
     required: true,
 });
-const liveTimer = defineModel<Dayjs | null>('liveTimer', {required: true});
+const liveTimer = defineModel<Dayjs | null>('liveTimer', { required: true });
 
 const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
 
@@ -60,13 +60,12 @@ function setAndStartTimer(timeEntry: TimeEntry) {
     setCurrentTimeEntry(timeEntry);
     if (!props.isActive) {
         emit('startTimer');
-    }
-    else {
+    } else {
         emit('updateTimeEntry');
     }
 }
 
-function setCurrentTimeEntry(timeEntry: TimeEntry){
+function setCurrentTimeEntry(timeEntry: TimeEntry) {
     currentTimeEntry.value.description = timeEntry.description;
     currentTimeEntry.value.project_id = timeEntry.project_id;
     currentTimeEntry.value.task_id = timeEntry.task_id;
@@ -75,21 +74,21 @@ function setCurrentTimeEntry(timeEntry: TimeEntry){
 }
 
 function startTimerIfNotActive() {
-    if(highlightedDropdownEntryId.value){
-        const timeEntry = filteredRecentlyTrackedTimeEntries.value.find((item) => item.id === highlightedDropdownEntryId.value);
-        if(timeEntry){
+    if (highlightedDropdownEntryId.value) {
+        const timeEntry = filteredRecentlyTrackedTimeEntries.value.find(
+            (item) => item.id === highlightedDropdownEntryId.value
+        );
+        if (timeEntry) {
             setCurrentTimeEntry(timeEntry);
             showDropdown.value = false;
         }
-    }
-    else {
+    } else {
         currentTimeEntry.value.description = tempDescription.value;
     }
 
     if (!props.isActive) {
         emit('startTimer');
-    }
-    else {
+    } else {
         emit('updateTimeEntry');
     }
 }
@@ -108,7 +107,7 @@ const blockRefocus = ref(false);
 function onToggleButtonPress(newState: boolean) {
     if (newState) {
         emit('startTimer');
-        if (!blockRefocus.value){
+        if (!blockRefocus.value) {
             currentTimeEntryDescriptionInput.value?.focus();
         }
     } else {
@@ -131,41 +130,47 @@ function updateTimeEntryDescription() {
     }
 }
 
-const {timeEntries} = storeToRefs(useTimeEntriesStore());
+const { timeEntries } = storeToRefs(useTimeEntriesStore());
 const filteredRecentlyTrackedTimeEntries = computed(() => {
     // do not include running time entries
     const finishedTimeEntries = timeEntries.value.filter((item) => item.end !== null);
 
     // filter out duplicates based on description, task, project, tags and billable
     const nonDuplicateTimeEntries = finishedTimeEntries.filter((item, index, self) => {
-        return index === self.findIndex((t) => (
-            t.description === item.description &&
-            t.task_id === item.task_id &&
-            t.project_id === item.project_id &&
-            t.tags.length === item.tags.length &&
-            t.tags.every((tag) => item.tags.includes(tag)) &&
-            t.billable === item.billable
-        ));
+        return (
+            index ===
+            self.findIndex(
+                (t) =>
+                    t.description === item.description &&
+                    t.task_id === item.task_id &&
+                    t.project_id === item.project_id &&
+                    t.tags.length === item.tags.length &&
+                    t.tags.every((tag) => item.tags.includes(tag)) &&
+                    t.billable === item.billable
+            )
+        );
     });
 
     // filter time entries based on current description
-    return nonDuplicateTimeEntries.filter((item) => {
-        return item.description
-            ?.toLowerCase()
-            ?.includes(tempDescription.value?.toLowerCase()?.trim() || '');
-    }).slice(0, 5);
+    return nonDuplicateTimeEntries
+        .filter((item) => {
+            return item.description
+                ?.toLowerCase()
+                ?.includes(tempDescription.value?.toLowerCase()?.trim() || '');
+        })
+        .slice(0, 5);
 });
 
 const showDropdown = ref(false);
-const {focused} = useFocus(currentTimeEntryDescriptionInput)
+const { focused } = useFocus(currentTimeEntryDescriptionInput);
 
 watch(focused, (focused) => {
     nextTick(() => {
         // make sure the click event on the dropdown does not get interrupted
-        showDropdown.value = focused
+        showDropdown.value = focused;
 
         // make sure that the input does not get refocused after the dropdown is closed
-        if(!focused){
+        if (!focused) {
             blockRefocus.value = true;
             setTimeout(() => {
                 blockRefocus.value = false;
@@ -174,9 +179,8 @@ watch(focused, (focused) => {
     });
 });
 
-
 const floating = ref(null);
-const {floatingStyles} = useFloating(currentTimeEntryDescriptionInput, floating, {
+const { floatingStyles } = useFloating(currentTimeEntryDescriptionInput, floating, {
     placement: 'bottom-start',
     whileElementsMounted: autoUpdate,
     middleware: [
@@ -193,16 +197,16 @@ const {floatingStyles} = useFloating(currentTimeEntryDescriptionInput, floating,
 });
 const highlightedDropdownEntryId = ref<string | null>(null);
 
-useSelectEvents(filteredRecentlyTrackedTimeEntries,
+useSelectEvents(
+    filteredRecentlyTrackedTimeEntries,
     highlightedDropdownEntryId,
     (item) => item.id,
-    showDropdown)
+    showDropdown
+);
 </script>
 
 <template>
-    <div
-        class="flex items-center relative @container"
-        data-testid="dashboard_timer">
+    <div class="flex items-center relative @container" data-testid="dashboard_timer">
         <div
             class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
             <div class="flex flex-1 items-center pr-6 relative">
@@ -211,18 +215,18 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
                     v-model="tempDescription"
                     placeholder="What are you working on?"
                     data-testid="time_entry_description"
-                    class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium    focus:ring-0 transition"
+                    class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition"
                     type="text"
                     @keydown.enter="startTimerIfNotActive"
                     @keydown.esc="showDropdown = false"
-                    @blur="updateTimeEntryDescription"/>
+                    @blur="updateTimeEntryDescription" />
                 <div
                     v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
                     ref="floating"
                     class="z-50 w-full max-w-2xl"
                     :style="floatingStyles">
                     <div
-                        class="rounded-lg w-full fixed min-w-xl top-0 left-0  border border-card-border overflow-none shadow-dropdown bg-card-background">
+                        class="rounded-lg w-full fixed min-w-xl top-0 left-0 border border-card-border overflow-none shadow-dropdown bg-card-background">
                         <div
                             class="text-text-tertiary text-xs font-semibold border-b border-border-tertiary px-2 py-1.5">
                             Recently Tracked Time Entries
@@ -236,20 +240,18 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
                                 :projects="projects"
                                 :tasks="tasks"
                                 @mousedown="setAndStartTimer(timeEntry)"
-                                @mouseenter="highlightedDropdownEntryId = timeEntry.id"
-                            ></TimeTrackerRecentlyTrackedEntry>
+                                @mouseenter="
+                                    highlightedDropdownEntryId = timeEntry.id
+                                "></TimeTrackerRecentlyTrackedEntry>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="flex items-center justify-between pl-2 shrink min-w-0">
-                <div
-                    class="flex items-center w-[130px] @2xl:w-auto shrink min-w-0">
+                <div class="flex items-center w-[130px] @2xl:w-auto shrink min-w-0">
                     <TimeTrackerProjectTaskDropdown
                         v-model:project="currentTimeEntry.project_id"
-                        v-model:task="
-                            currentTimeEntry.task_id
-                        "
+                        v-model:task="currentTimeEntry.task_id"
                         :create-client
                         :can-create-project
                         :clients
@@ -262,16 +264,12 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
                 </div>
                 <div class="flex items-center @2xl:space-x-2 px-2 @2xl:px-4">
                     <TimeTrackerTagDropdown
-                        v-model="
-                            currentTimeEntry.tags
-                        "
+                        v-model="currentTimeEntry.tags"
                         :create-tag
                         :tags="tags"
                         @changed="$emit('updateTimeEntry')"></TimeTrackerTagDropdown>
                     <BillableToggleButton
-                        v-model="
-                            currentTimeEntry.billable
-                        "
+                        v-model="currentTimeEntry.billable"
                         @changed="$emit('updateTimeEntry')"></BillableToggleButton>
                 </div>
                 <div class="border-l border-card-border">
@@ -282,14 +280,11 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
                         @stop-live-timer="emit('stopLiveTimer')"
                         @update-timer="emit('updateTimeEntry')"
                         @start-timer="emit('startTimer')"
-                        @keydown.enter="
-                            startTimerIfNotActive
-                        "></TimeTrackerRangeSelector>
+                        @keydown.enter="startTimerIfNotActive"></TimeTrackerRangeSelector>
                 </div>
             </div>
         </div>
-        <div
-            class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
+        <div class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
             <TimeTrackerStartStop
                 :active="isActive"
                 size="large"

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

@@ -12,12 +12,7 @@ import type {
 } from '@/packages/api/src';
 import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
 import Badge from '@/packages/ui/src/Badge.vue';
-import {
-    PlusIcon,
-    PlusCircleIcon,
-    MinusIcon,
-    XMarkIcon,
-} from '@heroicons/vue/16/solid';
+import { PlusIcon, PlusCircleIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/16/solid';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
 import { twMerge } from 'tailwind-merge';
 
@@ -58,9 +53,7 @@ const props = withDefaults(
         projects: Project[];
         tasks: Task[];
         clients: Client[];
-        createProject: (
-            project: CreateProjectBody
-        ) => Promise<Project | undefined>;
+        createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
         createClient: (client: CreateClientBody) => Promise<Client | undefined>;
         currency: string;
         emptyPlaceholder?: string;
@@ -95,9 +88,7 @@ function addProjectToFilterObject(
         (client) => client.id === project.client_id
     );
 
-    const client = props.clients.find(
-        (client) => client.id === project.client_id
-    );
+    const client = props.clients.find((client) => client.id === project.client_id);
 
     if (projectClientIndex !== -1) {
         // client already exists in filter array
@@ -216,20 +207,10 @@ watchEffect(() => {
             (!filterProject.is_archived || project.value === filterProject.id)
         ) {
             // search term matches project name
-            addProjectToFilterObject(
-                tempFilteredClients,
-                filterProject,
-                filteredTasks,
-                false
-            );
+            addProjectToFilterObject(tempFilteredClients, filterProject, filteredTasks, false);
         } else if (filteredTasks.length > 0 && !filterProject.is_archived) {
             // search term matches task name
-            addProjectToFilterObject(
-                tempFilteredClients,
-                filterProject,
-                filteredTasks,
-                true
-            );
+            addProjectToFilterObject(tempFilteredClients, filterProject, filteredTasks, true);
         }
     }
 
@@ -316,11 +297,8 @@ function moveHighlightUp() {
     // 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
-                )
+        const currentProjectWithTasks = filteredProjects.value.find((projectWithTasks) =>
+            projectWithTasks.tasks.some((task) => task.id === highlightedItemId.value)
         );
         if (currentProjectWithTasks) {
             const taskIndex = currentProjectWithTasks.tasks.findIndex(
@@ -334,34 +312,27 @@ function moveHighlightUp() {
                 highlightedItemId.value = currentProjectWithTasks.id;
                 return;
             }
-            highlightedItemId.value =
-                currentProjectWithTasks.tasks[taskIndex - 1].id;
+            highlightedItemId.value = currentProjectWithTasks.tasks[taskIndex - 1].id;
         }
     }
     if (currentHighlightedIndex === 0) {
         // selected project is the first project in the list
         // highlight the last project or the last task of the last project
-        const lastProject =
-            filteredProjects.value[filteredProjects.value.length - 1];
+        const lastProject = filteredProjects.value[filteredProjects.value.length - 1];
         if (lastProject.tasks.length > 0 && lastProject.expanded) {
             // highlight last task of last project
-            highlightedItemId.value =
-                lastProject.tasks[lastProject.tasks.length - 1].id;
+            highlightedItemId.value = lastProject.tasks[lastProject.tasks.length - 1].id;
         } else {
-            highlightedItemId.value =
-                filteredProjects.value[filteredProjects.value.length - 1].id;
+            highlightedItemId.value = filteredProjects.value[filteredProjects.value.length - 1].id;
         }
     } else {
         // selected item is a project that is not the first project in the list
-        const previousProject =
-            filteredProjects.value[currentHighlightedIndex - 1];
+        const previousProject = filteredProjects.value[currentHighlightedIndex - 1];
         if (previousProject.tasks.length > 0 && previousProject.expanded) {
             // highlight last task of previous project
-            highlightedItemId.value =
-                previousProject.tasks[previousProject.tasks.length - 1].id;
+            highlightedItemId.value = previousProject.tasks[previousProject.tasks.length - 1].id;
         } else {
-            highlightedItemId.value =
-                filteredProjects.value[currentHighlightedIndex - 1].id;
+            highlightedItemId.value = filteredProjects.value[currentHighlightedIndex - 1].id;
         }
     }
 }
@@ -375,11 +346,8 @@ function moveHighlightDown() {
     // 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
-                )
+        const currentProjectWithTasks = filteredProjects.value.find((projectWithTasks) =>
+            projectWithTasks.tasks.some((task) => task.id === highlightedItemId.value)
         );
         if (currentProjectWithTasks) {
             const taskIndex = currentProjectWithTasks.tasks.findIndex(
@@ -390,27 +358,22 @@ function moveHighlightDown() {
             }
             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
-                );
+                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].id;
                 } else {
-                    highlightedItemId.value =
-                        filteredProjects.value[projectIndex + 1].id;
+                    highlightedItemId.value = filteredProjects.value[projectIndex + 1].id;
                 }
                 return;
             }
-            highlightedItemId.value =
-                currentProjectWithTasks.tasks[taskIndex + 1].id;
+            highlightedItemId.value = currentProjectWithTasks.tasks[taskIndex + 1].id;
         }
     }
     if (currentHighlightedIndex === filteredProjects.value.length - 1) {
         // selected project is the last project in the list
         // highlight the first project or the last project of the last project
-        const lastProject =
-            filteredProjects.value[filteredProjects.value.length - 1];
+        const lastProject = filteredProjects.value[filteredProjects.value.length - 1];
         if (lastProject.tasks.length > 0 && lastProject.expanded) {
             // highlight last task of last project
             highlightedItemId.value = lastProject.tasks[0].id;
@@ -419,17 +382,12 @@ function moveHighlightDown() {
         }
     } else {
         // selected item is a project that is not the last project in the list
-        const currentProjectWithTasks =
-            filteredProjects.value[currentHighlightedIndex];
-        if (
-            currentProjectWithTasks.tasks.length > 0 &&
-            currentProjectWithTasks.expanded
-        ) {
+        const currentProjectWithTasks = filteredProjects.value[currentHighlightedIndex];
+        if (currentProjectWithTasks.tasks.length > 0 && currentProjectWithTasks.expanded) {
             // highlight last task of previous project
             highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
         } else {
-            highlightedItemId.value =
-                filteredProjects.value[currentHighlightedIndex + 1].id;
+            highlightedItemId.value = filteredProjects.value[currentHighlightedIndex + 1].id;
         }
     }
 }
@@ -481,15 +439,11 @@ function collapseProject() {
 }
 
 const currentProject = computed(() => {
-    return props.projects.find(
-        (iteratingProject) => iteratingProject.id === project.value
-    );
+    return props.projects.find((iteratingProject) => iteratingProject.id === project.value);
 });
 
 const currentTask = computed(() => {
-    return props.tasks.find(
-        (iteratingTasks) => iteratingTasks.id === task.value
-    );
+    return props.tasks.find((iteratingTasks) => iteratingTasks.id === task.value);
 });
 
 const selectedProjectName = computed(() => {
@@ -518,8 +472,7 @@ function setHighlightItemId(newId: string) {
 
 function selectTask(taskId: string) {
     task.value = taskId;
-    project.value =
-        props.tasks.find((task) => task.id === taskId)?.project_id || null;
+    project.value = props.tasks.find((task) => task.id === taskId)?.project_id || null;
     open.value = false;
     searchValue.value = '';
     emit('changed', project.value, task.value);
@@ -569,9 +522,7 @@ const showCreateProject = ref(false);
                     <ChevronRightIcon
                         v-if="currentTask"
                         class="w-4 lg:w-5 text-text-secondary shrink-0"></ChevronRightIcon>
-                    <div
-                        v-if="currentTask"
-                        class="min-w-0 shrink text-xs lg:text-sm truncate">
+                    <div v-if="currentTask" class="min-w-0 shrink text-xs lg:text-sm truncate">
                         {{ currentTask.name }}
                     </div>
                 </div>
@@ -587,9 +538,7 @@ const showCreateProject = ref(false);
             </ProjectBadge>
         </template>
         <template #content>
-            <UseFocusTrap
-                v-if="open"
-                :options="{ immediate: true, allowOutsideClick: true }">
+            <UseFocusTrap v-if="open" :options="{ immediate: true, allowOutsideClick: true }">
                 <input
                     ref="searchInput"
                     :value="searchValue"
@@ -607,9 +556,7 @@ const showCreateProject = ref(false);
                     ref="dropdownViewport"
                     class="min-w-[350px] max-h-[350px] overflow-y-scroll relative"
                     @mousemove="mouseEnterHighlightActivated = true">
-                    <template
-                        v-for="client in filteredResults"
-                        :key="client.id">
+                    <template v-for="client in filteredResults" :key="client.id">
                         <div
                             v-if="client.id !== 'no_project_no_client'"
                             class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
@@ -630,27 +577,17 @@ const showCreateProject = ref(false);
                                     class="rounded-lg"
                                     :class="{
                                         'bg-card-background-active':
-                                            projectWithTasks.id ===
-                                            highlightedItemId,
+                                            projectWithTasks.id === highlightedItemId,
                                     }">
                                     <ProjectDropdownItem
                                         class="hover:!bg-transparent"
-                                        :selected="
-                                            isProjectSelected(projectWithTasks)
-                                        "
+                                        :selected="isProjectSelected(projectWithTasks)"
                                         :name="projectWithTasks.name"
                                         :color="projectWithTasks.color"
-                                        @mouseenter="
-                                            setHighlightItemId(
-                                                projectWithTasks.id
-                                            )
-                                        ">
+                                        @mouseenter="setHighlightItemId(projectWithTasks.id)">
                                         <template #actions>
                                             <button
-                                                v-if="
-                                                    projectWithTasks.tasks
-                                                        .length > 0
-                                                "
+                                                v-if="projectWithTasks.tasks.length > 0"
                                                 tabindex="-1"
                                                 class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
                                                 :class="{
@@ -667,11 +604,7 @@ const showCreateProject = ref(false);
                                                     }
                                                 ">
                                                 <span
-                                                    >{{
-                                                        projectWithTasks.tasks
-                                                            .length
-                                                    }}
-                                                    Tasks</span
+                                                    >{{ projectWithTasks.tasks.length }} Tasks</span
                                                 >
                                                 <ChevronDownIcon
                                                     :class="{
@@ -684,31 +617,25 @@ const showCreateProject = ref(false);
                                     </ProjectDropdownItem>
                                 </div>
                             </div>
-                            <div
-                                v-if="projectWithTasks.expanded"
-                                class="bg-quaternary">
+                            <div v-if="projectWithTasks.expanded" class="bg-quaternary">
                                 <div
                                     v-for="task in projectWithTasks.tasks"
                                     :key="task.id"
                                     :data-task-id="task.id"
                                     :class="{
-                                        'bg-card-background-active':
-                                            task.id === highlightedItemId,
+                                        'bg-card-background-active': task.id === highlightedItemId,
                                     }"
                                     class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-text-primary focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                                     @click="selectTask(task.id)"
                                     @mouseenter="setHighlightItemId(task.id)">
-                                    <MinusIcon
-                                        class="w-3 h-3 text-text-quaternary"></MinusIcon>
+                                    <MinusIcon class="w-3 h-3 text-text-quaternary"></MinusIcon>
                                     <span>{{ task.name }}</span>
                                 </div>
                             </div>
                         </template>
                     </template>
                 </div>
-                <div
-                    v-if="canCreateProject"
-                    class="hover:bg-card-background-active rounded-b-lg">
+                <div v-if="canCreateProject" class="hover:bg-card-background-active rounded-b-lg">
                     <button
                         class="text-text-primary flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator"
                         @click="

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

@@ -3,11 +3,7 @@ import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { computed, ref } from 'vue';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 import dayjs, { Dayjs } from 'dayjs';
-import {
-    formatDuration,
-    getDayJsInstance,
-    parseTimeInput,
-} from '@/packages/ui/src/utils/time';
+import { formatDuration, getDayJsInstance, parseTimeInput } from '@/packages/ui/src/utils/time';
 import type { TimeEntry } from '@/packages/api/src';
 
 const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
@@ -59,10 +55,7 @@ const currentTime = computed({
 });
 
 function updateTimerAndStartLiveTimerUpdate() {
-    const { seconds } = parseTimeInput(
-        temporaryCustomTimerEntry.value,
-        'minutes'
-    );
+    const { seconds } = parseTimeInput(temporaryCustomTimerEntry.value, 'minutes');
 
     if (seconds && seconds > 0) {
         const newStartDate = dayjs().subtract(seconds, 's');
@@ -105,12 +98,7 @@ const timeRangeSelector = ref<HTMLElement | null>(null);
 function openModalOnTab(e: FocusEvent) {
     // check if the source is inside the dropdown
     const source = e.relatedTarget as HTMLElement;
-    if (
-        source &&
-        window.document.body
-            .querySelector<HTMLElement>('#app')
-            ?.contains(source)
-    ) {
+    if (source && window.document.body.querySelector<HTMLElement>('#app')?.contains(source)) {
         open.value = true;
     }
 }
@@ -118,10 +106,9 @@ function openModalOnTab(e: FocusEvent) {
 function focusNextElement(e: KeyboardEvent) {
     if (open.value) {
         e.preventDefault();
-        const focusableElement =
-            timeRangeSelector.value?.querySelector<HTMLElement>(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-            );
+        const focusableElement = timeRangeSelector.value?.querySelector<HTMLElement>(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
         focusableElement?.focus();
     }
 }

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

@@ -1,27 +1,24 @@
 <script setup lang="ts">
-
-import {ProjectBadge} from "@/packages/ui/src";
-import type {TimeEntry} from "@/packages/api/src";
-import {twMerge} from "tailwind-merge";
-import {ChevronRightIcon} from "@heroicons/vue/16/solid";
-import {computed} from "vue";
-import type {Project, Task} from "@/packages/api/src";
+import { ProjectBadge } from '@/packages/ui/src';
+import type { TimeEntry } from '@/packages/api/src';
+import { twMerge } from 'tailwind-merge';
+import { ChevronRightIcon } from '@heroicons/vue/16/solid';
+import { computed } from 'vue';
+import type { Project, Task } from '@/packages/api/src';
 
 const props = defineProps<{
-    timeEntry: TimeEntry,
-    highlighted: boolean,
-    projects?: Project[]
-    tasks?: Task[]
-}>()
+    timeEntry: TimeEntry;
+    highlighted: boolean;
+    projects?: Project[];
+    tasks?: Task[];
+}>();
 const project = computed(() => {
     return props.projects?.find(
         (iteratingProject) => iteratingProject.id === props.timeEntry.project_id
     );
 });
 const task = computed(() => {
-    return props.tasks?.find(
-        (iteratingTask) => iteratingTask.id === props.timeEntry.task_id
-    );
+    return props.tasks?.find((iteratingTask) => iteratingTask.id === props.timeEntry.task_id);
 });
 </script>
 
@@ -29,40 +26,35 @@ const task = computed(() => {
     <button
         tabindex="-1"
         :data-select-id="timeEntry.id"
-        :class="twMerge('px-2 py-1.5 flex justify-between items-center space-x-2 w-full rounded', props.highlighted && 'bg-card-background-active')">
+        :class="
+            twMerge(
+                'px-2 py-1.5 flex justify-between items-center space-x-2 w-full rounded',
+                props.highlighted && 'bg-card-background-active'
+            )
+        ">
         <span v-if="timeEntry.description !== ''" class="text-sm font-medium">
-            {{
-                    timeEntry.description
-            }}
-        </span>
-        <span v-else class="text-sm text-text-tertiary font-medium">
-            No Description
+            {{ timeEntry.description }}
         </span>
+        <span v-else class="text-sm text-text-tertiary font-medium"> No Description </span>
         <ProjectBadge
             ref="projectDropdownTrigger"
             :color="project?.color"
             :name="project?.name"
             class="">
             <div v-if="project" class="flex items-center lg:space-x-1 min-w-0">
-                    <span class="whitespace-nowrap text-xs ">
-                        {{ project?.name }}
-                    </span>
+                <span class="whitespace-nowrap text-xs">
+                    {{ project?.name }}
+                </span>
                 <ChevronRightIcon
                     v-if="task"
                     class="w-4 lg:w-5 text-text-secondary shrink-0"></ChevronRightIcon>
-                <div
-                    v-if="task"
-                    class="min-w-0 shrink text-xs truncate">
+                <div v-if="task" class="min-w-0 shrink text-xs truncate">
                     {{ task.name }}
                 </div>
             </div>
-            <div v-else>
-                No Project
-            </div>
+            <div v-else>No Project</div>
         </ProjectBadge>
     </button>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -7,8 +7,7 @@ defineEmits<{
 </script>
 
 <template>
-    <div
-        class="absolute w-full h-full backdrop-blur-sm z-10 flex items-center justify-center">
+    <div class="absolute w-full h-full backdrop-blur-sm z-10 flex items-center justify-center">
         <div
             class="w-full h-[calc(100%+10px)] absolute bg-default-background opacity-75 backdrop-blur-sm"></div>
         <div class="flex space-x-3 items-center w-full z-20 justify-center">

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

@@ -26,11 +26,7 @@ defineProps<{
 </script>
 
 <template>
-    <TagDropdown
-        v-model="model"
-        :create-tag
-        :tags="tags"
-        @changed="emit('changed')">
+    <TagDropdown v-model="model" :create-tag :tags="tags" @changed="emit('changed')">
         <template #trigger>
             <button
                 data-testid="tag_dropdown"