From b65bb9023b61ecf75f20ddc78ca0a76157cdc855 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Fri, 1 Aug 2025 12:50:12 +0100
Subject: [PATCH] Models empty state

---
 .../global/illustration/emptystate/Models.vue | 128 ++++++++++++++++++
 .../components/viewer/controls/Left.vue       |   4 +-
 .../components/viewer/models/Actions.vue      |   9 +-
 .../components/viewer/models/Panel.vue        |  11 +-
 4 files changed, 143 insertions(+), 9 deletions(-)
 create mode 100644 packages/frontend-2/components/global/illustration/emptystate/Models.vue

diff --git a/packages/frontend-2/components/global/illustration/emptystate/Models.vue b/packages/frontend-2/components/global/illustration/emptystate/Models.vue
new file mode 100644
index 000000000..5cfa52af7
--- /dev/null
+++ b/packages/frontend-2/components/global/illustration/emptystate/Models.vue
@@ -0,0 +1,128 @@
+<template>
+  <svg
+    width="194"
+    height="141"
+    viewBox="0 0 194 141"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.99907 57.3669L124.822 17.7594C127.703 16.7988 131.551 17.9639 133.416 20.3616L189.592 92.5873C191.457 94.985 190.632 97.7074 187.751 98.668L68.928 138.276C66.0463 139.236 62.1984 138.071 60.3336 135.673L4.15799 63.4476C2.2931 61.0499 3.11738 58.3275 5.99907 57.3669Z"
+      fill="currentColor"
+      class="fill-foundation-2"
+    />
+    <path
+      d="M5.99907 57.3669L124.822 17.7594C127.703 16.7988 131.551 17.9639 133.416 20.3616L189.592 92.5873C191.457 94.985 190.632 97.7074 187.751 98.668L68.928 138.276C66.0463 139.236 62.1984 138.071 60.3336 135.673L4.15799 63.4476C2.2931 61.0499 3.11738 58.3275 5.99907 57.3669Z"
+      stroke="currentColor"
+      class="stroke-outline-5"
+    />
+    <g clip-path="url(#clip0_1292_252810)">
+      <g clip-path="url(#clip1_1292_252810)">
+        <path
+          d="M70.2824 95.2936L109.853 89.7543L91.3456 65.9597L57.4463 78.7901L70.2824 95.2936Z"
+          fill="currentColor"
+          class="fill-foundation stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M152.677 64.5977L109.852 89.7544L91.3454 65.9598L142.236 51.1736L152.677 64.5977Z"
+          fill="currentColor"
+          class="fill-foundation-2 stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M73.3716 50.6423L102.837 32.453L118.925 53.1365L85.5753 66.3329L73.3716 50.6423Z"
+          fill="currentColor"
+          class="fill-foundation stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M147.845 62.3606L109.582 81.6143L100.72 70.2207L142.424 55.3907L147.845 62.3606Z"
+          fill="currentColor"
+          class="fill-foundation stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M62.457 76.8958L76.129 94.4741"
+          stroke="currentColor"
+          class="stroke-outline-5"
+          stroke-miterlimit="10"
+        />
+        <path
+          d="M68.1668 74.735L82.7949 93.5427"
+          stroke="currentColor"
+          class="stroke-outline-5"
+          stroke-miterlimit="10"
+        />
+        <path
+          d="M74.7316 72.2502L90.4578 92.4696"
+          stroke="currentColor"
+          class="stroke-outline-5"
+          stroke-miterlimit="10"
+        />
+        <path
+          d="M82.365 69.3611L99.3682 91.2224"
+          stroke="currentColor"
+          class="stroke-outline-5"
+          stroke-miterlimit="10"
+        />
+        <path
+          d="M93.3629 68.5537L144.204 52.3733L140.504 47.6164L86.7189 60.0115L93.3629 68.5537Z"
+          fill="currentColor"
+          class="fill-foundation-2 stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M93.3629 68.5537L57.7381 80.9755L53.1962 75.1359L86.7189 60.0115L93.3629 68.5537Z"
+          fill="currentColor"
+          class="fill-foundation stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M137.004 48.4233L118.564 52.6725L102.838 32.453L124.515 32.3659L137.004 48.4233Z"
+          fill="currentColor"
+          class="fill-foundation-2 stroke-outline-5"
+          stroke="currentColor"
+          stroke-linejoin="round"
+        />
+      </g>
+    </g>
+    <rect
+      x="0.585984"
+      y="0.177422"
+      width="136.5"
+      height="102.75"
+      rx="5.625"
+      transform="matrix(0.948683 -0.316228 0.613941 0.789352 -0.0788556 44.0924)"
+      stroke="currentColor"
+      class="stroke-outline-5"
+      stroke-width="0.75"
+      stroke-dasharray="3 4"
+    />
+    <defs>
+      <clipPath id="clip0_1292_252810">
+        <rect
+          width="137.25"
+          height="103.5"
+          rx="6"
+          transform="matrix(0.948683 -0.316228 0.613941 0.789352 0 43.8697)"
+          fill="white"
+        />
+      </clipPath>
+      <clipPath id="clip1_1292_252810">
+        <rect
+          width="91"
+          height="60"
+          fill="white"
+          transform="matrix(0.948683 -0.316228 0.613941 0.789352 37.0532 54.3806)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index 40ff17d23..e540b965f 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -117,9 +117,7 @@
       ]"
       :style="`width: ${widthClass};`"
     >
-      <ViewerModelsPanel
-        v-if="resourceItems.length !== 0 && activePanel === 'models'"
-      />
+      <ViewerModelsPanel v-if="activePanel === 'models'" />
       <KeepAlive v-show="resourceItems.length !== 0 && activePanel === 'filters'">
         <ViewerFiltersPanel />
       </KeepAlive>
diff --git a/packages/frontend-2/components/viewer/models/Actions.vue b/packages/frontend-2/components/viewer/models/Actions.vue
index 467a2b076..4bb4aafd1 100644
--- a/packages/frontend-2/components/viewer/models/Actions.vue
+++ b/packages/frontend-2/components/viewer/models/Actions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <div v-tippy="'Versions'" class="flex">
+    <div v-if="!hideVersions" v-tippy="'Versions'" class="flex">
       <button
         class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
         @click="$emit('showVersions')"
@@ -9,7 +9,7 @@
         <span class="sr-only">Versions</span>
       </button>
     </div>
-    <div v-tippy="'Add model'" class="flex">
+    <div v-if="!hideAddModel" v-tippy="'Add model'" class="flex">
       <button
         class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
         @click="$emit('addModel')"
@@ -22,6 +22,11 @@
 </template>
 
 <script setup lang="ts">
+defineProps<{
+  hideVersions?: boolean
+  hideAddModel?: boolean
+}>()
+
 defineEmits<{
   showVersions: []
   addModel: []
diff --git a/packages/frontend-2/components/viewer/models/Panel.vue b/packages/frontend-2/components/viewer/models/Panel.vue
index 1c2360279..becc49182 100644
--- a/packages/frontend-2/components/viewer/models/Panel.vue
+++ b/packages/frontend-2/components/viewer/models/Panel.vue
@@ -14,6 +14,7 @@
       <template #actions>
         <ViewerModelsActions
           v-if="!hasObjects"
+          :hide-versions="resourceItems.length === 0"
           @show-versions="showVersions = true"
           @add-model="showAddModel = true"
         />
@@ -52,10 +53,12 @@
         </template>
 
         <!-- Empty State -->
-        <div v-else class="flex flex-col items-center justify-center gap-4 h-full">
-          <IconViewerModels v-if="!showVersions" class="h-10 w-10 text-foreground-2" />
-          <IconVersions v-else class="h-10 w-10 text-foreground-2" />
-          <p class="text-body-xs text-foreground-2">No models loaded, yet.</p>
+        <div
+          v-else
+          class="flex flex-col items-center justify-center gap-4 h-full -mt-8"
+        >
+          <IllustrationEmptystateModels />
+          <span class="text-body-xs text-foreground-2">No models loaded, yet.</span>
           <FormButton @click="showAddModel = true">Add model</FormButton>
         </div>
       </div>