feat: use dropdown menu for base create options instead of modal

packages/nc-gui/components/dashboard/TreeView/CreateProject/Menu.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+interface Props {
+    visible: boolean
+    variant: 'modal' | 'dropdown'
+    baseCreateMode: NcBaseCreateMode | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: 'dropdown',
+})
+
+const emits = defineEmits<{
+    (e: 'update:visible', value: boolean): void
+    (e: 'update:baseCreateMode', value: NcBaseCreateMode | null): void
+    (e: 'onSelect', mode: NcBaseCreateMode): void
+}>()
+
+
+const vVisible = useVModel(props, 'visible', emits)
+
+const baseCreateMode = useVModel(props, 'baseCreateMode', emits)
+
+const workspaceStore = useWorkspace()
+
+const { navigateToTemplates } = workspaceStore
+
+const { isTemplatesFeatureEnabled } = storeToRefs(workspaceStore)
+
+const { isAiFeaturesEnabled } = useNocoAi()
+
+const onClickOption = (mode: NcBaseCreateMode) => {
+    if (isTemplatesFeatureEnabled.value && mode === NcBaseCreateMode.FROM_TEMPLATE) {
+        vVisible.value = false
+        navigateToTemplates()
+
+        return
+    }
+
+    baseCreateMode.value = mode
+
+}
+
+onMounted(() => {
+    if (!isAiFeaturesEnabled.value && props.variant === 'modal') {
+        baseCreateMode.value = NcBaseCreateMode.FROM_SCRATCH
+    }
+})
+</script>
+
+<template>
+    <NcMenu v-if="variant === 'dropdown'" variant="large" data-testid="nc-home-create-new-menu"
+        @click="vVisible = false">
+        <DashboardTreeViewCreateProjectMenuItem v-e="['c:base:create:scratch']" icon="plus" label="From Scratch"
+            subtext="Start with an empty base" @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)" />
+
+        <DashboardTreeViewCreateProjectMenuItem v-if="isAiFeaturesEnabled" v-e="['c:base:ai:create']"
+            icon="ncAutoAwesome" label="Build with AI" subtext="Pre-built structures for common use cases"
+            @click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)" />
+
+    </NcMenu>
+    <div v-else class="flex flex-row gap-6 flex-wrap max-w-[min(80vw,738px)] children:(!w-[230px] !max-w-[230px])">
+        <ProjectActionItem v-e="['c:base:create:scratch']" icon="plus" label="From Scratch"
+            subtext="Start with an empty base" @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)" />
+
+        <ProjectActionItem v-if="isAiFeaturesEnabled" v-e="['c:base:ai:create']" icon="ncAutoAwesome"
+            label="Build with AI" subtext="Pre-built structures for common use cases"
+            @click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)" />
+
+    </div>
+</template>

packages/nc-gui/components/dashboard/TreeView/CreateProject/MenuItem.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+
+interface Props {
+    label: string
+    subtext?: string
+    icon?: IconMapKey
+}
+
+withDefaults(defineProps<Props>(), {
+})
+
+</script>
+
+<template>
+    <NcMenuItem :inner-class="`w-full ${$slots.subtext || subtext ? '!items-start' : ''}`">
+        <slot name="icon">
+            <GeneralIcon v-if="icon" :icon="icon" class="h-4 w-4 flex-none" :class="{
+                'mt-0.5': $slots.subtext || subtext
+            }" />
+        </slot>
+
+        <div class="nc-content-wrapper">
+            <div class="nc-content-label">
+                <slot name="label">{{ label }}</slot>
+            </div>
+            <div v-if="$slots.subtext || subtext" class="nc-content-subtext">
+                <slot name="subtext">{{ subtext }}</slot>
+            </div>
+        </div>
+    </NcMenuItem>
+</template>
+
+<style lang="scss" scoped>
+.nc-content-wrapper {
+    .nc-content-subtext {
+        @apply text-tiny !leading-4 text-nc-content-gray-muted;
+    }
+}
+</style>