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,6 +179,7 @@
 </script>
 
 <Page wide>
+  {#if loaded && enrichedApps.length}
     <Layout noPadding>
       <div class="title">
         <Heading>Apps</Heading>
@@ -214,12 +215,11 @@
           />
         </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>
+  {/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 {