From e2290d5e147769a01d403f1f5b1b06151bcfc75c Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 14 Apr 2025 15:33:13 +0100
Subject: [PATCH 1/2] Add card ctas

---
 .../components/projects/Dashboard.vue         | 23 +++++++++-
 .../components/projects/DashboardFilled.vue   |  5 +++
 .../projects/MoveToWorkspaceAlert.vue         | 11 ++---
 .../projects/ProjectDashboardCard.vue         | 45 ++++++++++++++-----
 .../frontend-2/pages/projects/[id]/index.vue  |  9 +++-
 5 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/packages/frontend-2/components/projects/Dashboard.vue b/packages/frontend-2/components/projects/Dashboard.vue
index 425a131db..a41f7dc65 100644
--- a/packages/frontend-2/components/projects/Dashboard.vue
+++ b/packages/frontend-2/components/projects/Dashboard.vue
@@ -2,7 +2,10 @@
   <div>
     <Portal to="primary-actions"></Portal>
     <div v-if="!showEmptyState" class="flex flex-col gap-4">
-      <ProjectsMoveToWorkspaceAlert v-if="isWorkspacesEnabled" />
+      <ProjectsMoveToWorkspaceAlert
+        v-if="isWorkspacesEnabled"
+        @move-project="onMoveProject"
+      />
       <div class="flex items-center gap-2 mb-2">
         <Squares2X2Icon class="h-5 w-5" />
         <h1 class="text-heading-lg">Projects</h1>
@@ -61,7 +64,11 @@
       @create-project="openNewProject = true"
     />
     <template v-else-if="projects?.items?.length">
-      <ProjectsDashboardFilled :projects="projects" show-workspace-link />
+      <ProjectsDashboardFilled
+        :projects="projects"
+        show-workspace-link
+        @move-project="onMoveProject"
+      />
       <InfiniteLoading
         :settings="{ identifier: infiniteLoaderId }"
         @infinite="infiniteLoad"
@@ -69,6 +76,11 @@
     </template>
     <CommonEmptySearchState v-else-if="!showLoadingBar" @clear-search="clearSearch" />
     <ProjectsAddDialog v-model:open="openNewProject" />
+    <WorkspaceMoveProjectManager
+      v-if="showMoveProjectDialog"
+      v-model:open="showMoveProjectDialog"
+      :project-id="emittedProjectId"
+    />
   </div>
 </template>
 
@@ -105,6 +117,8 @@ const selectedRoles = ref(undefined as Optional<StreamRoles[]>)
 const filterProjectsToMove = ref(false)
 const openNewProject = ref(false)
 const showLoadingBar = ref(false)
+const showMoveProjectDialog = ref(false)
+const emittedProjectId = ref('')
 const areQueriesLoading = useQueryLoading()
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
 useUserProjectsUpdatedTracking()
@@ -180,6 +194,11 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
   }
 }
 
+const onMoveProject = (projectId: string) => {
+  emittedProjectId.value = projectId
+  showMoveProjectDialog.value = true
+}
+
 watch(search, (newVal) => {
   if (newVal) showLoadingBar.value = true
   else showLoadingBar.value = false
diff --git a/packages/frontend-2/components/projects/DashboardFilled.vue b/packages/frontend-2/components/projects/DashboardFilled.vue
index e5e492f5c..b2b9e1aa1 100644
--- a/packages/frontend-2/components/projects/DashboardFilled.vue
+++ b/packages/frontend-2/components/projects/DashboardFilled.vue
@@ -6,6 +6,7 @@
         :project="project"
         :show-workspace-link="showWorkspaceLink"
         :workspace-page="workspacePage"
+        @move-project="$emit('moveProject', $event)"
       />
     </div>
   </div>
@@ -19,6 +20,10 @@ import type {
   ProjectsDashboardFilledUserFragment
 } from '~~/lib/common/generated/gql/graphql'
 
+defineEmits<{
+  moveProject: (projectId: string) => void
+}>()
+
 const props = defineProps<{
   projects: ProjectsDashboardFilledProjectFragment | ProjectsDashboardFilledUserFragment
   showWorkspaceLink?: boolean
diff --git a/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue b/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue
index 66b8a25f5..1d6d25314 100644
--- a/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue
+++ b/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue
@@ -26,7 +26,7 @@
           </div>
 
           <div class="flex gap-2 mt-2 mb-3">
-            <FormButton @click="showMoveProjectDialog = true">
+            <FormButton @click="$emit('moveProject', projectId)">
               {{ projectId ? 'Move project' : 'Show projects to move' }}
             </FormButton>
             <FormButton
@@ -41,11 +41,6 @@
         </div>
       </div>
     </CommonCard>
-    <WorkspaceMoveProjectManager
-      v-if="showMoveProjectDialog"
-      v-model:open="showMoveProjectDialog"
-      :project-id="projectId"
-    />
   </div>
 </template>
 
@@ -57,5 +52,7 @@ defineProps<{
   projectId?: string
 }>()
 
-const showMoveProjectDialog = ref(false)
+defineEmits<{
+  moveProject: (projectId: string) => void
+}>()
 </script>
diff --git a/packages/frontend-2/components/projects/ProjectDashboardCard.vue b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
index 64b8cafc5..e3889b2e1 100644
--- a/packages/frontend-2/components/projects/ProjectDashboardCard.vue
+++ b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
@@ -4,9 +4,16 @@
       class="relative group flex flex-col items-stretch md:flex-row md:space-x-2 border border-outline-3 rounded-xl p-4 transition bg-foundation"
     >
       <div
-        class="w-full md:w-48 flex flex-col justify-between col-span-3 lg:col-span-1 mb-4 md:mb-0 flex-shrink-0 space-y-1 pl-2 pr-6 py-2"
+        class="w-full md:w-56 flex flex-col justify-between col-span-3 lg:col-span-1 mb-4 md:mb-0 flex-shrink-0 space-y-1 pl-2 pr-6 py-2"
       >
         <div class="flex flex-col">
+          <CommonBadge
+            v-if="!project.workspace?.id && isWorkspacesEnabled"
+            class="mb-2 max-w-max"
+            rounded
+          >
+            Project to move
+          </CommonBadge>
           <NuxtLink
             :to="projectRoute(project.id)"
             class="break-words hover:text-primary text-heading mb-2"
@@ -43,16 +50,28 @@
               {{ project.workspace.name }}
             </p>
           </NuxtLink>
-          <FormButton
-            :to="allProjectModelsRoute(project.id) + '/'"
-            size="sm"
-            color="outline"
-            :icon-right="ChevronRightIcon"
-          >
-            {{
-              `${modelItemTotalCount} ${modelItemTotalCount === 1 ? 'model' : 'models'}`
-            }}
-          </FormButton>
+          <div class="flex gap-2">
+            <FormButton
+              :to="allProjectModelsRoute(project.id) + '/'"
+              size="sm"
+              color="outline"
+              :icon-right="ChevronRightIcon"
+            >
+              {{
+                `${modelItemTotalCount} ${
+                  modelItemTotalCount === 1 ? 'model' : 'models'
+                }`
+              }}
+            </FormButton>
+            <FormButton
+              v-if="!project.workspace?.id && isWorkspacesEnabled"
+              size="sm"
+              color="outline"
+              @click="$emit('moveProject', project.id)"
+            >
+              Move project...
+            </FormButton>
+          </div>
         </div>
       </div>
       <div :class="gridClasses">
@@ -100,6 +119,10 @@ import { ChevronRightIcon } from '@heroicons/vue/20/solid'
 import { workspaceRoute } from '~/lib/common/helpers/route'
 import { RoleInfo, type StreamRoles } from '@speckle/shared'
 
+defineEmits<{
+  moveProject: [projectId: string]
+}>()
+
 const props = defineProps<{
   project: ProjectDashboardItemFragment
   showWorkspaceLink?: boolean
diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
index 88a37707b..3fdd85d46 100644
--- a/packages/frontend-2/pages/projects/[id]/index.vue
+++ b/packages/frontend-2/pages/projects/[id]/index.vue
@@ -10,6 +10,7 @@
       <ProjectsMoveToWorkspaceAlert
         v-if="isWorkspacesEnabled && !project.workspace"
         :project-id="project.id"
+        @move-project="onMoveProject"
       />
 
       <div
@@ -62,11 +63,11 @@
       </LayoutTabsHorizontal>
     </div>
 
-    <ProjectsMoveToWorkspaceDialog
+    <WorkspaceMoveProjectManager
       v-if="project"
       v-model:open="showMoveDialog"
-      :project="project"
       event-source="project-page"
+      :project-id="project.id"
     />
   </div>
 </template>
@@ -315,4 +316,8 @@ const onActionChosen = (params: { item: LayoutMenuItem; event: MouseEvent }) =>
       break
   }
 }
+
+const onMoveProject = () => {
+  showMoveDialog.value = true
+}
 </script>

From 3d1a643f8b700762fc4655c4351731b9766e67a3 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 14 Apr 2025 16:01:58 +0100
Subject: [PATCH 2/2] Fix emits

---
 packages/frontend-2/components/projects/Dashboard.vue       | 4 ++--
 packages/frontend-2/components/projects/DashboardFilled.vue | 4 ++--
 .../frontend-2/components/projects/MoveToWorkspaceAlert.vue | 6 ++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/frontend-2/components/projects/Dashboard.vue b/packages/frontend-2/components/projects/Dashboard.vue
index a41f7dc65..ce3b2ef6b 100644
--- a/packages/frontend-2/components/projects/Dashboard.vue
+++ b/packages/frontend-2/components/projects/Dashboard.vue
@@ -4,7 +4,7 @@
     <div v-if="!showEmptyState" class="flex flex-col gap-4">
       <ProjectsMoveToWorkspaceAlert
         v-if="isWorkspacesEnabled"
-        @move-project="onMoveProject"
+        @move-project="(id) => onMoveProject(id)"
       />
       <div class="flex items-center gap-2 mb-2">
         <Squares2X2Icon class="h-5 w-5" />
@@ -67,7 +67,7 @@
       <ProjectsDashboardFilled
         :projects="projects"
         show-workspace-link
-        @move-project="onMoveProject"
+        @move-project="(id) => onMoveProject(id)"
       />
       <InfiniteLoading
         :settings="{ identifier: infiniteLoaderId }"
diff --git a/packages/frontend-2/components/projects/DashboardFilled.vue b/packages/frontend-2/components/projects/DashboardFilled.vue
index b2b9e1aa1..aa6c8ef7b 100644
--- a/packages/frontend-2/components/projects/DashboardFilled.vue
+++ b/packages/frontend-2/components/projects/DashboardFilled.vue
@@ -6,7 +6,7 @@
         :project="project"
         :show-workspace-link="showWorkspaceLink"
         :workspace-page="workspacePage"
-        @move-project="$emit('moveProject', $event)"
+        @move-project="$emit('moveProject', project.id)"
       />
     </div>
   </div>
@@ -21,7 +21,7 @@ import type {
 } from '~~/lib/common/generated/gql/graphql'
 
 defineEmits<{
-  moveProject: (projectId: string) => void
+  (e: 'moveProject', projectId: string): void
 }>()
 
 const props = defineProps<{
diff --git a/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue b/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue
index 1d6d25314..a7627d27a 100644
--- a/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue
+++ b/packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue
@@ -48,11 +48,9 @@
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
 import { LearnMoreMoveProjectsUrl } from '~/lib/common/helpers/route'
 
+defineEmits(['moveProject'])
+
 defineProps<{
   projectId?: string
 }>()
-
-defineEmits<{
-  moveProject: (projectId: string) => void
-}>()
 </script>