refactor to shadcn components, dynamically load extension frontend

add jetstream permissions, add dynamic inertia module loading, add shadcn components, change modals and dropdowns to shadcn dismissable layer,

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

@@ -56,7 +56,7 @@ function getNameForKey(key: BillableKey | undefined) {
                 <span>
                     {{ getNameForKey(model) }}
                 </span>
-                <ChevronDownIcon class="text-muted w-5"></ChevronDownIcon>
+                <ChevronDownIcon class="text-text-secondary w-5"></ChevronDownIcon>
             </Badge>
         </template>
     </SelectDropdown>

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

@@ -7,7 +7,7 @@ const model = defineModel<string>({ default: '' });
 
 <template>
     <div>
-        <Dropdown align="bottom">
+        <Dropdown align="center">
             <template #trigger>
                 <button
                     class="p-2 bg-input-background hover:bg-tertiary transition rounded-full border border-input-border">

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

@@ -77,7 +77,7 @@ const emit = defineEmits(['submit']);
                 @keydown.enter="emit('submit')" />
         </div>
     </div>
-    <div class="flex items-center text-muted text-xs pt-2 pl-1">
+    <div class="flex items-center text-text-secondary text-xs pt-2 pl-1">
         <span>
             <span class="font-semibold"> Info: </span>
             {{ billableOptionInfoText }}