feat(fe2): empty states (discussions, models, projects, etc.)

packages/frontend-2/components/project/page/latest-items/comments/IntroCard.vue

@@ -1,15 +1,14 @@
 <template>
-  <div
-    :class="[
-      'p-4',
-      'flex flex-col space-y-4 sm:space-y-0 sm:flex-row sm:space-x-6 sm:items-center'
-    ]"
-  >
-    <div class="w-42 h-42 group transition-[margin-right] mr-0 hover:mr-12">
+  <div :class="['p-4', 'flex flex-col justify-center items-center space-y-8']">
+    <div
+      :class="`w-42 h-42 group transition-[margin-right] mr-0 hover:mr-12 ${
+        small ? 'scale-75' : ''
+      }`"
+    >
       <template v-if="!isDarkTheme">
         <img
           src="~~/assets/images/discussions/d-w-1.png"
-          class="opacity-80 w-36 h-auto shadow-md relative transition grayscale blur-none group-hover:blur-sm group-hover:grayscale-0 group-hover:-translate-x-10 group-hover:-translate-y-3 group-hover:scale-105"
+          class="opacity-80 w-36 h-auto shadow-md relative transition grayscale blur-[1px] group-hover:blur-[2px] group-hover:grayscale-0 group-hover:-translate-x-10 group-hover:-translate-y-3 group-hover:scale-105"
           alt="discussions image"
         />
         <img
@@ -21,7 +20,7 @@
       <template v-else>
         <img
           src="~~/assets/images/discussions/d-d-1.png"
-          class="opacity-80 w-36 h-auto shadow-md relative transition grayscale blur-none group-hover:blur-sm group-hover:grayscale-0 group-hover:-translate-x-10 group-hover:-translate-y-3 group-hover:scale-105"
+          class="opacity-80 w-36 h-auto shadow-md relative transition grayscale blur-[1px] group-hover:blur-[2px] group-hover:grayscale-0 group-hover:-translate-x-10 group-hover:-translate-y-3 group-hover:scale-105"
           alt="discussions image"
         />
         <img
@@ -31,15 +30,24 @@
         />
       </template>
     </div>
-    <div class="text-foreground">
+    <div class="text-foreground text-center">
       <div>Speckle allows for real time discussions straight in your 3D model.</div>
-      <div class="text-xs text-foreground-2">
+      <div v-if="!small" class="text-xs text-foreground-2">
         Head over to a model and start coordinating right away!
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+withDefaults(
+  defineProps<{
+    small?: boolean
+  }>(),
+  {
+    small: false
+  }
+)
+
 import { useTheme } from '~~/lib/core/composables/theme'
 const { isDarkTheme } = useTheme()
 </script>

packages/frontend-2/components/projects/Dashboard.vue

@@ -15,8 +15,8 @@
       />
     </div>
     <div
-      class="flex flex-col space-y-2 md:flex-row md:items-center mb-8 pt-4"
       v-if="!showEmptyState"
+      class="flex flex-col space-y-2 md:flex-row md:items-center mb-8 pt-4"
     >
       <h1 class="h4 font-bold">Projects</h1>
 

packages/frontend-2/components/viewer/Controls.vue

@@ -94,7 +94,7 @@
           : '-translate-x-[100%] opacity-0'
       }`"
     >
-      <div v-show="activeControl === 'models'">
+      <div v-show="resourceItems.length !== 0 && activeControl === 'models'">
         <KeepAlive>
           <ViewerResourcesList
             class="pointer-events-auto"
@@ -103,17 +103,38 @@
           />
         </KeepAlive>
       </div>
-      <div v-show="activeControl === 'explorer'">
+      <div v-show="resourceItems.length !== 0 && activeControl === 'explorer'">
         <KeepAlive>
           <ViewerExplorer class="pointer-events-auto" @close="activeControl = 'none'" />
         </KeepAlive>
       </div>
       <ViewerComments
-        v-if="activeControl === 'discussions'"
+        v-if="resourceItems.length !== 0 && activeControl === 'discussions'"
         class="pointer-events-auto"
         @close="activeControl = 'none'"
       />
-      <ViewerFilters v-if="activeControl === 'filters'" class="pointer-events-auto" />
+      <ViewerFilters
+        v-if="resourceItems.length !== 0 && activeControl === 'filters'"
+        class="pointer-events-auto"
+      />
+
+      <!-- Empty state -->
+      <div v-if="resourceItems.length === 0">
+        <div class="flex items-center py-3 px-2">
+          <div class="text-sm text-foreground-2">No models loaded.</div>
+          <div>
+            <FormButton
+              size="xs"
+              text
+              :icon-left="PlusIcon"
+              @click="openAddModel = true"
+            >
+              Add
+            </FormButton>
+            <ViewerResourcesAddModelDialog v-model:open="openAddModel" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -122,7 +143,8 @@ import {
   CubeIcon,
   ChatBubbleLeftRightIcon,
   ArrowsPointingOutIcon,
-  ScissorsIcon
+  ScissorsIcon,
+  PlusIcon
 } from '@heroicons/vue/24/outline'
 import { Nullable } from '@speckle/shared'
 import {
@@ -134,15 +156,19 @@ import {
   ModifierKeys,
   getKeyboardShortcutTitle
 } from '@speckle/ui-components'
+import { useInjectedViewerLoadedResources } from '~~/lib/viewer/composables/setup'
 
 const {
   zoomExtentsOrSelection,
   toggleProjection,
   camera: { isOrthoProjection }
 } = useCameraUtilities()
+const { resourceItems } = useInjectedViewerLoadedResources()
+
 const { toggleSectionBox, isSectionBoxEnabled } = useSectionBoxUtilities()
 
 type ActiveControl = 'none' | 'models' | 'explorer' | 'filters' | 'discussions'
+const openAddModel = ref(false)
 
 const activeControl = ref<ActiveControl>('models')
 const scrollableControlsContainer = ref(null as Nullable<HTMLDivElement>)

packages/frontend-2/components/viewer/comments/Comments.vue

@@ -56,7 +56,13 @@
         :key="thread.id"
         :thread="thread"
       />
-      <div v-if="commentThreads.length === 0">TODO: Empty state</div>
+      <div v-if="commentThreads.length === 0">
+        <ProjectPageLatestItemsCommentsIntroCard small />
+      </div>
+      <!-- TODO: new thread on click in centre of screen, I can't figure out how -->
+      <!-- <div class="py-2 text-center">
+        <FormButton>New Discussion</FormButton>
+      </div> -->
     </div>
   </ViewerLayoutPanel>
 </template>

packages/frontend-2/components/viewer/explorer/Explorer.vue

@@ -20,7 +20,7 @@
           Collapse
         </FormButton>
       </template>
-      <div class="relative flex flex-col space-y-2 py-2">
+      <div v-if="rootNodes.length !== 0" class="relative flex flex-col space-y-2 py-2">
         <div
           v-for="(rootNode, idx) in rootNodes"
           :key="idx"

packages/frontend-2/pages/projects/[id]/index.vue

@@ -23,7 +23,7 @@
         <!-- Latest comments -->
         <ProjectPageLatestItemsComments :project="project" />
         <!-- More actions -->
-        <ProjectPageMoreActions />
+        <!-- <ProjectPageMoreActions /> -->
       </div>
     </div>
   </div>