Improve app list empty state screen and fix order of app context menu options

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

@@ -39,23 +39,25 @@
           <MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
             View published app
           </MenuItem>
-          <MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
-            Unpublish
-          </MenuItem>
         {/if}
         {#if app.lockedBy && app.lockedBy?.email === $auth.user?.email}
           <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
             Release lock
           </MenuItem>
         {/if}
+        <MenuItem on:click={() => exportApp(app)} icon="Download">
+          Export
+        </MenuItem>
+        {#if app.deployed}
+          <MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
+            Unpublish
+          </MenuItem>
+        {/if}
         {#if !app.deployed}
           <MenuItem on:click={() => deleteApp(app)} icon="Delete">
             Delete
           </MenuItem>
         {/if}
-        <MenuItem on:click={() => exportApp(app)} icon="Download">
-          Export
-        </MenuItem>
       </ActionMenu>
     </div>
     <div class="status">

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

@@ -17,10 +17,9 @@
   export let deleteApp
   export let unpublishApp
   export let releaseLock
-  export let last
 </script>
 
-<div class="title" class:last>
+<div class="title">
   <div class="preview" use:gradient={{ seed: app.name }} />
   <div class="name" on:click={() => editApp(app)}>
     <Heading size="XS">
@@ -28,10 +27,10 @@
     </Heading>
   </div>
 </div>
-<div class:last>
+<div>
   Updated {Math.round(Math.random() * 10 + 1)} months ago
 </div>
-<div class:last>
+<div>
   <StatusLight
     positive={!app.lockedYou && !app.lockedOther}
     notice={app.lockedYou}
@@ -46,12 +45,12 @@
     {/if}
   </StatusLight>
 </div>
-<div class:last>
+<div>
   <StatusLight active={app.deployed} neutral={!app.deployed}>
     {#if app.deployed}Published{:else}Unpublished{/if}
   </StatusLight>
 </div>
-<div class:last>
+<div>
   <Button
     disabled={app.lockedOther}
     on:click={() => editApp(app)}
@@ -64,19 +63,21 @@
       <MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
         View published app
       </MenuItem>
-      <MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
-        Unpublish
-      </MenuItem>
     {/if}
     {#if app.lockedBy && app.lockedBy?.email === $auth.user?.email}
       <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
         Release lock
       </MenuItem>
     {/if}
+    <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
+    {#if app.deployed}
+      <MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
+        Unpublish
+      </MenuItem>
+    {/if}
     {#if !app.deployed}
       <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
     {/if}
-    <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
   </ActionMenu>
 </div>
 

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

@@ -179,47 +179,47 @@
 </script>
 
 <Page wide>
-  <Layout noPadding>
-    <div class="title">
-      <Heading>Apps</Heading>
-      <ButtonGroup>
-        <Button secondary on:click={initiateAppImport}>Import app</Button>
-        <Button cta on:click={initiateAppCreation}>Create new app</Button>
-      </ButtonGroup>
-    </div>
-    <div class="filter">
-      <div class="select">
-        <Select
-          bind:value={sortBy}
-          placeholder={null}
-          options={[
-            { label: "Sort by name", value: "name" },
-            { label: "Sort by recently updated", value: "updated" },
-            { label: "Sort by status", value: "status" },
-          ]}
-        />
+  {#if loaded && enrichedApps.length}
+    <Layout noPadding>
+      <div class="title">
+        <Heading>Apps</Heading>
+        <ButtonGroup>
+          <Button secondary on:click={initiateAppImport}>Import app</Button>
+          <Button cta on:click={initiateAppCreation}>Create new app</Button>
+        </ButtonGroup>
+      </div>
+      <div class="filter">
+        <div class="select">
+          <Select
+            bind:value={sortBy}
+            placeholder={null}
+            options={[
+              { label: "Sort by name", value: "name" },
+              { label: "Sort by recently updated", value: "updated" },
+              { label: "Sort by status", value: "status" },
+            ]}
+          />
+        </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>
-      <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>
-    {#if loaded && enrichedApps.length}
       <div
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
       >
-        {#each enrichedApps as app, idx (app.appId)}
+        {#each enrichedApps as app (app.appId)}
           <svelte:component
             this={layout === "grid" ? AppCard : AppRow}
             {releaseLock}
@@ -229,12 +229,11 @@
             {editApp}
             {exportApp}
             {deleteApp}
-            last={idx === enrichedApps.length - 1}
           />
         {/each}
       </div>
-    {/if}
-  </Layout>
+    </Layout>
+  {/if}
   {#if !enrichedApps.length && !creatingApp && loaded}
     <div class="empty-wrapper">
       <Modal inline>
@@ -318,7 +317,7 @@
     text-overflow: ellipsis;
     padding: 0 var(--spacing-s);
   }
-  .appTable :global(> div:not(.last)) {
+  .appTable :global(> div) {
     border-bottom: var(--border-light);
   }
   .empty-wrapper {