re-add status lights for app row

packages/bbui/src/Form/Core/Picker.svelte

@@ -6,7 +6,6 @@
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
-  import Icon from "../../Icon/Icon.svelte"
 
   export let id = null
   export let disabled = false
@@ -160,21 +159,17 @@
           >
             {#if getOptionIcon(option, idx)}
               <span class="icon-Padding">
-                {#if getOptionIcon(option, idx).includes("assets")}
+                <img
-                  <img
+                  src={getOptionIcon(option, idx)}
-                    src={getOptionIcon(option, idx)}
+                  alt="icon"
-                    alt="icon"
+                  width="20"
-                    width="20"
+                  height="15"
-                    height="15"
+                />
-                  />
-                {:else}<Icon name={getOptionIcon(option, idx)} />{/if}
-              </span>
-            {/if}
-            {#if getOptionLabel(option, idx)}
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
               </span>
             {/if}
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"

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

@@ -1,7 +1,14 @@
 <script>
-  import { Heading, Button, Icon, ActionMenu, MenuItem } from "@budibase/bbui"
+  import {
+    Heading,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    StatusLight,
+  } from "@budibase/bbui"
   import { apps } from "stores/portal"
-
+  import { processStringSync } from "@budibase/string-templates"
   export let app
   export let exportApp
   export let viewApp
@@ -29,9 +36,35 @@
     </div>
   </div>
 </div>
-<div class="desktop" />
+<div class="desktop">
-<div class="desktop" />
+  {#if app.updatedAt}
-<div class="desktop" />
+    {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>
   <Button
     disabled={app.lockedOther}

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

@@ -9,7 +9,7 @@
 
   let iconsList = [
     "Actions",
-    "Algorithm",
+    "ConversionFunnel",
     "App",
     "Briefcase",
     "Money",
@@ -23,6 +23,15 @@
     "Magnify",
     "Launch",
     "Actions",
+    "Car",
+    "Camera",
+    "Bug",
+    "Channel",
+    "Calculator",
+    "Calendar",
+    "GraphDonut",
+    "GraphBarHorizontal",
+    "Demographic",
   ]
   export const show = () => {
     modal.show()
@@ -86,7 +95,7 @@
 <style>
   .scrollable-icons {
     overflow-y: auto;
-    height: 150px;
+    height: 230px;
   }
 
   .grid {

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -441,7 +441,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 10px;
+    gap: 5px;
   }
 
   @media only screen and (max-width: 560px) {
@@ -489,7 +489,7 @@
   .select {
     display: grid;
     grid-template-columns: auto auto;
-    grid-gap: 50px;
+    grid-gap: 30px;
   }
   .filter :global(.spectrum-ActionGroup) {
     flex-wrap: nowrap;