chore: sync various (#9864)

* chore: sync various Signed-off-by: mertmit <mertmit99@gmail.com> * test: ws scope Signed-off-by: mertmit <mertmit99@gmail.com> * fix(nc-gui): ncSubmenu right icon visibility issue * fix(nc-gui): use viewTypeAlias in all the places --------- Signed-off-by: mertmit <mertmit99@gmail.com> Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
2026-05-03 20:16:45 +00:00 · 2024-11-20 19:18:09 +03:00
parent 50600bfbda
commit 6724fd2f9d
183 changed files with 15394 additions and 3590 deletions
--- a/packages/nc-gui/components/workspace/project/CreateMode.vue
+++ b/packages/nc-gui/components/workspace/project/CreateMode.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import NcCreateBasePlaceholder from '~icons/nc-icons/create-base-placeholder'
+import NcCreateBaseWithAiPlaceholder from '~icons/nc-icons/create-base-with-ai-placeholder'
+
+interface Props {
+  aiMode: boolean | null
+}
+const props = withDefaults(defineProps<Props>(), {})
+
+const emit = defineEmits(['update:aiMode'])
+
+const aiMode = useVModel(props, 'aiMode', emit)
+
+const { isFeatureEnabled } = useBetaFeatureToggle()
+
+onMounted(() => {
+  if (!isFeatureEnabled(FEATURE_FLAG.AI_FEATURES)) {
+    aiMode.value = false
+  }
+})
+</script>
+
+<template>
+  <div v-if="isFeatureEnabled(FEATURE_FLAG.AI_FEATURES)" class="nc-create-base-wrapper">
+    <div v-e="['c:base:create-blank']" class="nc-create-base" @click="aiMode = false">
+      <div class="nc-placeholder-icon-wrapper">
+        <component :is="NcCreateBasePlaceholder" class="nc-placeholder-icon stroke-transparent" />
+      </div>
+      <div class="nc-create-base-content">
+        <div class="nc-create-base-content-title">
+          <GeneralIcon icon="plus" class="h-4 w-4 !text-nc-content-gray-subtle" />
+          Start from scratch
+        </div>
+        <div class="nc-create-base-content-subtitle">Build your Base according to your specific requirements.</div>
+      </div>
+    </div>
+    <div v-e="['c:base:build-with-ai']" class="nc-create-base-ai" @click="aiMode = true">
+      <div class="nc-placeholder-icon-wrapper">
+        <component :is="NcCreateBaseWithAiPlaceholder" class="nc-placeholder-icon stroke-transparent" />
+      </div>
+      <div class="nc-create-base-content">
+        <div class="nc-create-base-content-title">
+          <GeneralIcon icon="ncAutoAwesome" class="h-4 w-4 !text-nc-fill-purple-dark" />
+          Build Base with AI
+        </div>
+        <div class="nc-create-base-content-subtitle">Quickly build your ideal Base with all tables, views and fields.</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-create-base-wrapper {
+  @apply flex gap-4;
+
+  & > div {
+    @apply rounded-xl flex flex-col border-1 w-[288px] overflow-hidden cursor-pointer transition-all;
+
+    .nc-placeholder-icon-wrapper {
+      @apply border-b-1 h-[180px] flex items-center justify-center;
+
+      .nc-placeholder-icon {
+        @apply flex-none;
+      }
+    }
+
+    &.nc-create-base {
+      @apply border-brand-200;
+
+      &:hover {
+        box-shadow: 0px 12px 16px -4px rgba(51, 102, 255, 0.12), 0px 4px 6px -2px rgba(51, 102, 255, 0.08);
+      }
+
+      .nc-placeholder-icon-wrapper {
+        @apply border-brand-200 bg-nc-bg-brand;
+      }
+    }
+
+    &.nc-create-base-ai {
+      @apply border-purple-200;
+
+      &:hover {
+        box-shadow: 0px 12px 16px -4px rgba(125, 38, 205, 0.12), 0px 4px 6px -2px rgba(125, 38, 205, 0.08);
+      }
+
+      .nc-placeholder-icon-wrapper {
+        @apply border-purple-200 bg-nc-bg-purple-light;
+      }
+    }
+
+    .nc-create-base-content {
+      @apply px-4 py-3 flex flex-col gap-2;
+
+      .nc-create-base-content-title {
+        @apply flex items-center gap-2 text-base text-nc-content-gray font-bold;
+      }
+
+      .nc-create-base-content-subtitle {
+        @apply text-small leading-[18px] text-nc-content-gray-muted;
+      }
+    }
+  }
+}
+</style>