From d111e36fef4f741ffa2b6ef14c15c3487ab93c35 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 14 Dec 2023 14:21:35 -0800
Subject: [PATCH 1/3] Only give card-header margin-bottom if not empty

---
 web/src/components/PCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/PCard.vue b/web/src/components/PCard.vue
index 285eebee9..dd53e6f66 100644
--- a/web/src/components/PCard.vue
+++ b/web/src/components/PCard.vue
@@ -98,7 +98,7 @@ defineProps({
     }
 
     .card-header {
-      &:not(:last-child) {
+      &:not(:empty) {
         margin-bottom: 12px;
       }
     }

From 635fb822a6f04464d00b0dc976396177205e619a Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 14 Dec 2023 14:21:53 -0800
Subject: [PATCH 2/3] Add text-low-contrast CSS util class

---
 web/src/style.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/src/style.css b/web/src/style.css
index e9cd5b2a0..a835de47f 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -116,3 +116,10 @@ h1, h2, h3, h4, h5, h6, p {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.body--light .text-low-contrast {
+  color: #757575;
+}
+.body--dark .text-low-contrast {
+  color: #9e9e9e;
+}

From 6c5e7ada3998d25fcfafd598879b4e1e7864c7f6 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 14 Dec 2023 14:22:15 -0800
Subject: [PATCH 3/3] Display add Destination PCard if no deployments

---
 web/src/views/project-page/ProjectPage.vue | 34 ++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
index ac00e0e5e..9dce1944d 100644
--- a/web/src/views/project-page/ProjectPage.vue
+++ b/web/src/views/project-page/ProjectPage.vue
@@ -12,6 +12,7 @@
       </h2>
 
       <PButton
+        v-if="hasDeployments"
         hierarchy="primary"
         :to="{ name: 'addNewDeployment' }"
       >
@@ -19,13 +20,37 @@
       </PButton>
     </div>
 
-    <div class="card-grid">
+    <div
+      v-if="hasDeployments"
+      class="card-grid"
+    >
       <DeploymentCard
         v-for="deployment in deployments"
         :key="deployment.id"
         :deployment="deployment"
       />
     </div>
+    <div v-else>
+      <PCard
+        :to="{ name: 'addNewDeployment' }"
+      >
+        <div class="flex column items-center">
+          <q-icon
+            name="add"
+            size="2rem"
+          />
+          <h3 class="text-body1 text-weight-medium q-mt-sm">
+            Add a New Destination
+          </h3>
+          <p class="q-mt-xs text-low-contrast">
+            This project hasn't been published yet.
+          </p>
+          <p class="text-low-contrast">
+            Get started by adding a destination.
+          </p>
+        </div>
+      </PCard>
+    </div>
 
     <h2 class="text-h6">
       Configurations
@@ -46,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useApi } from 'src/api';
 import { Deployment, isDeploymentError } from 'src/api/types/deployments';
@@ -55,11 +80,16 @@ import ConfigCard from './ConfigCard.vue';
 import DeploymentCard from './DeploymentCard.vue';
 import FileTree from 'src/components/FileTree.vue';
 import PButton from 'src/components/PButton.vue';
+import PCard from 'src/components/PCard.vue';
 
 const api = useApi();
 const deployments = ref<Deployment[]>([]);
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
+const hasDeployments = computed(() => {
+  return deployments.value.length > 0;
+});
+
 async function getDeployments() {
   const response = (await api.deployments.getAll()).data;
   deployments.value = response.filter<Deployment>((d): d is Deployment => {