From 53557e1bb143784ff55a73087a48e321c445953b Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 6 Dec 2021 11:55:23 +0000
Subject: [PATCH] initial home screen redesign layout

---
 .../src/components/start/AppRow.svelte        |  43 +----
 .../pages/builder/portal/apps/index.svelte    | 153 +++++++++++-------
 2 files changed, 104 insertions(+), 92 deletions(-)

diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index a80722733e..8dbe428dde 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -1,14 +1,6 @@
 <script>
   import { gradient } from "actions"
-  import {
-    Heading,
-    Button,
-    Icon,
-    ActionMenu,
-    MenuItem,
-    StatusLight,
-  } from "@budibase/bbui"
-  import { processStringSync } from "@budibase/string-templates"
+  import { Heading, Button, Icon, ActionMenu, MenuItem } from "@budibase/bbui"
 
   export let app
   export let exportApp
@@ -28,40 +20,15 @@
     </Heading>
   </div>
 </div>
-<div class="desktop">
-  {#if app.updatedAt}
-    {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
-      time: new Date().getTime() - new Date(app.updatedAt).getTime(),
-    })}
-  {:else}
-    Never updated
-  {/if}
-</div>
-<div class="desktop">
-  <StatusLight
-    positive={!app.lockedYou && !app.lockedOther}
-    notice={app.lockedYou}
-    negative={app.lockedOther}
-  >
-    {#if app.lockedYou}
-      Locked by you
-    {:else if app.lockedOther}
-      Locked by {app.lockedBy.email}
-    {:else}
-      Open
-    {/if}
-  </StatusLight>
-</div>
-<div class="desktop">
-  <StatusLight active={app.deployed} neutral={!app.deployed}>
-    {#if app.deployed}Published{:else}Unpublished{/if}
-  </StatusLight>
-</div>
+<div class="desktop" />
+<div class="desktop" />
+<div class="desktop" />
 <div>
   <Button
     disabled={app.lockedOther}
     on:click={() => editApp(app)}
     size="S"
+    quiet
     secondary>Open</Button
   >
   <ActionMenu align="right">
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 40218b0ca9..3fe4eb6a5e 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -2,15 +2,15 @@
   import {
     Heading,
     Layout,
+    Detail,
     Button,
-    ActionButton,
-    ActionGroup,
     ButtonGroup,
     Input,
     Select,
     Modal,
     Page,
     notifications,
+    Body,
     Search,
   } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
@@ -23,12 +23,10 @@
   import download from "downloadjs"
   import { goto } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import AppCard from "components/start/AppCard.svelte"
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
   import analytics, { Events } from "analytics"
 
-  let layout = "grid"
   let sortBy = "name"
   let template
   let selectedApp
@@ -42,7 +40,7 @@
   let cloud = $admin.cloud
   let appName = ""
   let creatingFromTemplate = false
-
+  let templates = []
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
   $: filteredApps = enrichedApps.filter(app =>
     app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -260,8 +258,15 @@
     }
   }
 
+  async function fetchTemplates() {
+    const response = await api.get("/api/templates?type=app")
+    templates = await response.json()
+    console.log(templates)
+  }
+
   onMount(async () => {
     await apps.load()
+    await fetchTemplates()
     // if the portal is loaded from an external URL with a template param
     const initInfo = await auth.getInitInfo()
     if (initInfo?.init_template) {
@@ -274,17 +279,49 @@
 </script>
 
 <Page wide>
-  {#if loaded && enrichedApps.length}
-    <Layout noPadding>
+  <Layout gap="S" noPadding>
+    <div class="title">
+      <Heading size="S">Welcome to Budibase</Heading>
+
+      <ButtonGroup>
+        {#if cloud}
+          <Button secondary on:click={initiateAppsExport}>Export apps</Button>
+        {/if}
+        <Button secondary on:click={initiateAppImport}>Import app</Button>
+        <Button cta on:click={initiateAppCreation}>Create app</Button>
+      </ButtonGroup>
+    </div>
+    <Body size="XS">Manage your apps and get a head start with templates</Body>
+
+    <Detail>Quick Start Templates</Detail>
+    <div class="grid">
+      {#each templates as val}
+        <div class="template-card">
+          <div class="card-body">
+            <div style="color: {val.background}" class="iconAlign">
+              <svg
+                width="26px"
+                height="26px"
+                class="spectrum-Icon"
+                style="color:{val.background};"
+                focusable="false"
+              >
+                <use xlink:href="#spectrum-icon-18-{val.icon}" />
+              </svg>
+            </div>
+            <div class="iconAlign">
+              <Body weight="900" size="XS">{val.name}</Body>
+              <div style="font-size: 10px;">
+                <Body size="XS">{val.category.toUpperCase()}</Body>
+              </div>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+    {#if loaded && enrichedApps.length}
       <div class="title">
-        <Heading>Apps</Heading>
-        <ButtonGroup>
-          {#if cloud}
-            <Button secondary on:click={initiateAppsExport}>Export apps</Button>
-          {/if}
-          <Button secondary on:click={initiateAppImport}>Import app</Button>
-          <Button cta on:click={initiateAppCreation}>Create app</Button>
-        </ButtonGroup>
+        <Detail>My Apps</Detail>
       </div>
       <div class="filter">
         <div class="select">
@@ -302,31 +339,14 @@
             <Search placeholder="Search" bind:value={searchTerm} />
           </div>
         </div>
-        <ActionGroup>
-          <ActionButton
-            on:click={() => (layout = "grid")}
-            selected={layout === "grid"}
-            quiet
-            icon="ClassicGridView"
-          />
-          <ActionButton
-            on:click={() => (layout = "table")}
-            selected={layout === "table"}
-            quiet
-            icon="ViewRow"
-          />
-        </ActionGroup>
       </div>
       <div class="mobile-search">
         <Search placeholder="Search" bind:value={searchTerm} />
       </div>
-      <div
-        class:appGrid={layout === "grid"}
-        class:appTable={layout === "table"}
-      >
+      <div class="appTable">
         {#each filteredApps as app (app.appId)}
           <svelte:component
-            this={layout === "grid" ? AppCard : AppRow}
+            this={AppRow}
             {releaseLock}
             {app}
             {unpublishApp}
@@ -338,21 +358,21 @@
           />
         {/each}
       </div>
-    </Layout>
-  {/if}
-  {#if !enrichedApps.length && !creatingApp && loaded}
-    <div class="empty-wrapper">
-      <Modal inline>
-        <CreateAppModal {template} inline={true} />
-      </Modal>
-    </div>
-  {/if}
-  {#if creatingFromTemplate}
-    <div class="empty-wrapper">
-      <p>Creating your Budibase app from your selected template...</p>
-      <Spinner size="10" />
-    </div>
-  {/if}
+    {/if}
+    {#if !enrichedApps.length && !creatingApp && loaded}
+      <div class="empty-wrapper">
+        <Modal inline>
+          <CreateAppModal {template} inline={true} />
+        </Modal>
+      </div>
+    {/if}
+    {#if creatingFromTemplate}
+      <div class="empty-wrapper">
+        <p>Creating your Budibase app from your selected template...</p>
+        <Spinner size="10" />
+      </div>
+    {/if}
+  </Layout>
 </Page>
 <Modal
   bind:this={creationModal}
@@ -405,6 +425,36 @@
       flex-direction: column;
       align-items: flex-start;
     }
+    .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .iconAlign {
+    padding: 0 0 0 var(--spacing-m);
+    display: inline-block;
+  }
+  .template-card {
+    height: 60px;
+    width: 255px;
+    border-radius: var(--border-radius-s);
+    margin-bottom: var(--spacing-m);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+  }
+
+  .card-body {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+  }
+
+  .grid {
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  }
+
+  @media (min-width: 200px) {
   }
 
   .select {
@@ -419,11 +469,6 @@
     display: none;
   }
 
-  .appGrid {
-    display: grid;
-    grid-gap: 50px;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  }
   .appTable {
     display: grid;
     grid-template-rows: auto;