Portal app creation updates

packages/builder/src/components/common/TemplateCard.svelte

@@ -3,6 +3,7 @@
   export let imageSrc
   export let name
   export let icon
+  export let description = ""
   export let overlayEnabled = true
 
   let imageError = false
@@ -36,7 +37,10 @@
     </div>
   </div>
   <div class="template-thumbnail-text">
-    <div>{name}</div>
+    <div class="template-name">{name}</div>
+    {#if description}
+      <div class="template-description">{description}</div>
+    {/if}
   </div>
 </div>
 
@@ -70,19 +74,40 @@
     position: absolute;
     bottom: 0px;
     display: flex;
-    align-items: center;
-    height: 30%;
+    flex-direction: column;
+    height: 35%;
     width: 100%;
+    background-color: var(--spectrum-global-color-gray-50);
+    padding-bottom: 1rem;
+  }
+
+  .template-thumbnail-text > div {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .template-name {
     color: var(
       --spectrum-heading-xs-text-color,
       var(--spectrum-alias-heading-text-color)
     );
-    background-color: var(--spectrum-global-color-gray-50);
+    font-size: 14px;
+    font-weight: 600;
+    margin-top: 0.75rem;
   }
 
-  .template-thumbnail-text > div {
-    padding-left: 1rem;
-    padding-right: 1rem;
+  .template-description {
+    color: var(--spectrum-global-color-gray-600);
+    font-size: 12px;
+    font-weight: 400;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.5;
   }
 
   .template-card {
@@ -91,7 +116,7 @@
     border-radius: var(--border-radius-s);
     border: 1px solid var(--spectrum-global-color-gray-300);
     overflow: hidden;
-    min-height: 200px;
+    min-height: 220px;
   }
 
   .template-card > * {
@@ -112,7 +137,7 @@
   }
 
   .card-body {
-    padding-left: 1rem;
-    padding-top: 1rem;
+    padding-left: 1.25rem;
+    padding-top: 1.25rem;
   }
 </style>

packages/builder/src/components/start/CreateAppModal.svelte

@@ -134,6 +134,8 @@
         data.append("templateKey", template.key)
       }
 
+      data.append("isOnboarding", "false")
+
       // Create App
       const createdApp = await API.createApp(data)
 

packages/builder/src/components/start/TemplatesModal.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { ModalContent, Layout } from "@budibase/bbui"
+  import TemplateCard from "@/components/common/TemplateCard.svelte"
+  import { templates } from "@/stores/portal"
+  import type { TemplateMetadata } from "@budibase/types"
+
+  export let onSelectTemplate: (_template: TemplateMetadata) => void
+
+  let newTemplates: TemplateMetadata[] = []
+  $: {
+    const templateList = $templates as TemplateMetadata[]
+    newTemplates = templateList?.filter(template => template.new) || []
+  }
+</script>
+
+<ModalContent
+  title="Choose a starting template"
+  size="XL"
+  showCancelButton={false}
+  showConfirmButton={false}
+>
+  <Layout noPadding gap="M">
+    <div class="template-grid">
+      {#each newTemplates as template}
+        <button
+          class="template-wrapper"
+          on:click={() => onSelectTemplate(template)}
+        >
+          <TemplateCard
+            name={template.name}
+            imageSrc={template.image}
+            backgroundColour={template.background}
+            icon={template.icon}
+            description={template.description}
+          />
+        </button>
+      {/each}
+    </div>
+  </Layout>
+</ModalContent>
+
+<style>
+  .template-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-l);
+    padding: var(--spacing-m);
+  }
+
+  .template-wrapper {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    background: none;
+    border: none;
+    padding: 0;
+    text-align: left;
+    font-family: var(--font-sans);
+  }
+
+  .template-wrapper:hover {
+    transform: translateY(-4px);
+  }
+</style>