refactor tag components and tagCreate events, change global week_start and timezone settings, fix pie charts

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

@@ -339,8 +339,8 @@ async function createProject(project: CreateProjectBody, callback: () => void) {
                 tag="button"
                 :name="selectedProjectName"
                 class="focus:border-border-tertiary focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator">
-                <div class="flex items-center space-x-1">
-                    <span>
+                <div class="flex nowrap items-center space-x-1">
+                    <span class="whitespace-nowrap text-xs lg:text-sm">
                         {{ selectedProjectName }}
                     </span>
                     <ChevronRightIcon

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

@@ -3,8 +3,13 @@ import TagDropdown from '@/Components/Common/Tag/TagDropdown.vue';
 import { twMerge } from 'tailwind-merge';
 import { TagIcon } from '@heroicons/vue/20/solid';
 import { computed } from 'vue';
+import type { Tag } from '@/utils/api';
+
+const emit = defineEmits<{
+    changed: [];
+    createTag: [name: string, callback: (tag: Tag) => void];
+}>();
 
-const emit = defineEmits(['changed']);
 const model = defineModel({
     default: [],
 });
@@ -15,10 +20,17 @@ const iconColorClasses = computed(() => {
         return 'text-icon-default hover:text-icon-active focus:text-icon-active';
     }
 });
+defineProps<{
+    tags: Tag[];
+}>();
 </script>
 
 <template>
-    <TagDropdown @changed="emit('changed')" v-model="model">
+    <TagDropdown
+        @createTag="(...args) => $emit('createTag', ...args)"
+        @changed="emit('changed')"
+        v-model="model"
+        :tags="tags">
         <template #trigger>
             <button
                 data-testid="tag_dropdown"