add format check, update prettier rules, apply rules consistently

resources/js/packages/ui/src/Project/ProjectBadge.vue

@@ -31,12 +31,7 @@ const indicatorClasses = {
     <Badge :name :size :tag :class="props.class" :color :border>
         <div
             :style="{ backgroundColor: props.color }"
-            :class="
-                twMerge(
-                    indicatorClasses[size],
-                    'inline-block rounded-full shrink-0'
-                )
-            "></div>
+            :class="twMerge(indicatorClasses[size], 'inline-block rounded-full shrink-0')"></div>
         <div class="min-w-0">
             <slot>
                 {{ name }}

resources/js/packages/ui/src/Project/ProjectBillableRateModal.vue

@@ -42,8 +42,8 @@ defineEmits<{
             >.
         </p>
         <p class="py-1 text-center font-semibold max-w-md mx-auto">
-            Do you want to update all existing time entries, where the project
-            billable rate applies as well?
+            Do you want to update all existing time entries, where the project billable rate applies
+            as well?
         </p>
     </BillableRateModal>
 </template>

resources/js/packages/ui/src/Project/ProjectBillableSelect.vue

@@ -49,10 +49,7 @@ function getNameForKey(key: BillableKey | undefined) {
         :get-name-for-item="getNameFromItem"
         :items="options">
         <template #trigger>
-            <Badge
-                tag="button"
-                size="xlarge"
-                class="bg-input-background cursor-pointer">
+            <Badge tag="button" size="xlarge" class="bg-input-background cursor-pointer">
                 <span>
                     {{ getNameForKey(model) }}
                 </span>

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -3,11 +3,7 @@ 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 { computed, ref } from 'vue';
-import type {
-    CreateClientBody,
-    CreateProjectBody,
-    Project,
-} from '@/packages/api/src';
+import type { CreateClientBody, CreateProjectBody, Project } from '@/packages/api/src';
 import { getRandomColor } from '@/packages/ui/src/utils/color';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
@@ -63,9 +59,7 @@ useFocus(projectNameInput, { initialValue: true });
 
 const currentClientName = computed(() => {
     if (project.value.client_id) {
-        return props.clients.find(
-            (client) => client.id === project.value.client_id
-        )?.name;
+        return props.clients.find((client) => client.id === project.value.client_id)?.name;
     }
     return 'No Client';
 });
@@ -80,8 +74,7 @@ const currentClientName = computed(() => {
         </template>
 
         <template #content>
-            <div
-                class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
+            <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
                 <div class="flex-1 flex items-center">
                     <div class="text-center pr-5">
                         <InputLabel for="color" value="Color" />
@@ -117,8 +110,7 @@ const currentClientName = computed(() => {
                                 class="bg-input-background cursor-pointer hover:bg-tertiary"
                                 size="xlarge">
                                 <div class="flex items-center space-x-2">
-                                    <UserCircleIcon
-                                        class="w-5 text-icon-default"></UserCircleIcon>
+                                    <UserCircleIcon class="w-5 text-icon-default"></UserCircleIcon>
                                     <span>
                                         {{ currentClientName }}
                                     </span>
@@ -132,9 +124,7 @@ const currentClientName = computed(() => {
                 <div>
                     <ProjectEditBillableSection
                         v-model:is-billable="project.is_billable"
-                        v-model:billable-rate="
-                            project.billable_rate
-                        "
+                        v-model:billable-rate="project.billable_rate"
                         :currency="currency"></ProjectEditBillableSection>
                 </div>
                 <div>

resources/js/packages/ui/src/Project/ProjectDropdownItem.vue

@@ -10,9 +10,7 @@ defineProps<{
     <div
         class="flex justify-between items-center w-full text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
         <div class="flex space-x-3 items-center px-3 py-1.5">
-            <div
-                :style="{ backgroundColor: color }"
-                class="w-3 h-3 rounded-full"></div>
+            <div :style="{ backgroundColor: color }" class="w-3 h-3 rounded-full"></div>
             <span>{{ name }}</span>
         </div>
         <slot name="actions"></slot>

resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue

@@ -40,8 +40,7 @@ watch(billableRateSelect, () => {
 billableRateSelect.value = 'non-billable';
 
 const billableOptionInfoTexts: { [key in BillableKey]: string } = {
-    'non-billable':
-        'New time entries for this project will not be marked billable by default.',
+    'non-billable': 'New time entries for this project will not be marked billable by default.',
     'default-rate':
         'New time entries for this project will be billable at the default rate by default.',
     'custom-rate':
@@ -58,8 +57,7 @@ const emit = defineEmits(['submit']);
     <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4 pt-6">
         <div>
             <div class="flex items-center space-x-1 mb-2">
-                <BillableIcon
-                    class="text-text-quaternary h-4 ml-1 mr-0.5"></BillableIcon>
+                <BillableIcon class="text-text-quaternary h-4 ml-1 mr-0.5"></BillableIcon>
                 <InputLabel for="billable" value="Billable Default" />
             </div>
             <ProjectBillableSelect