more

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

@@ -1,27 +1,10 @@
 <template>
-  <ProjectEmptyState :small="small" title="No discussions, yet." :text="text">
-    <template #illustration>
-      <IllustrationEmptystateDiscussionTab />
-    </template>
-    <template #cta>
-      <div v-if="showButton" class="mt-3">
-        <FormButton :icon-left="PlusIcon" @click="() => $emit('new-discussion')">
-          New discussion
-        </FormButton>
-      </div>
-    </template>
-  </ProjectEmptyState>
+  <div
+    class="w-full flex justify-center items-center p-10 h-full gap-8 text-balance flex-col text-center"
+  >
+    <IllustrationEmptystateDiscussionTab />
+    <div>
+      <p class="text-foreground-2 text-heading-sm">No discussions, yet.</p>
+    </div>
+  </div>
 </template>
-<script setup lang="ts">
-import { PlusIcon } from '@heroicons/vue/24/solid'
-
-defineEmits<{
-  (e: 'new-discussion'): void
-}>()
-
-defineProps<{
-  small?: boolean
-  showButton?: boolean
-  text?: string
-}>()
-</script>

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

@@ -28,23 +28,14 @@
         />
       </LayoutMenu>
     </template>
-    <div class="flex flex-col">
-      <div class="flex flex-col gap-y-2 p-1">
+    <div class="flex flex-col h-full">
+      <div class="flex flex-col flex-1 gap-y-2 p-1">
         <ViewerCommentsListItem
           v-for="thread in commentThreads"
           :key="thread.id"
           :thread="thread"
         />
-        <div v-if="commentThreads.length === 0" class="pb-4">
-          <ProjectPageLatestItemsCommentsEmptyState
-            small
-            :show-button="canPostComment && hasSelectedObjects"
-            :text="
-              hasSelectedObjects ? undefined : 'Select an object to start collaborating'
-            "
-            @new-discussion="onNewDiscussion"
-          />
-        </div>
+        <ProjectPageLatestItemsCommentsEmptyState v-if="commentThreads.length === 0" />
       </div>
     </div>
   </ViewerLayoutSidePanel>
@@ -58,8 +49,6 @@ import {
   useInjectedViewerRequestedResources
 } from '~~/lib/viewer/composables/setup'
 import { useMixpanel } from '~~/lib/core/composables/mp'
-import { useCheckViewerCommentingAccess } from '~~/lib/viewer/composables/commentManagement'
-import { useSelectionUtilities } from '~~/lib/viewer/composables/ui'
 import type { LayoutMenuItem } from '~~/lib/layout/helpers/components'
 import { HorizontalDirection } from '~~/lib/common/composables/window'
 
@@ -102,12 +91,8 @@ graphql(`
 const { commentThreads, commentThreadsMetadata } = useInjectedViewerLoadedResources()
 const { threadFilters } = useInjectedViewerRequestedResources()
 const {
-  threads: {
-    hideBubbles,
-    openThread: { newThreadEditor }
-  }
+  threads: { hideBubbles }
 } = useInjectedViewerInterfaceState()
-const canPostComment = useCheckViewerCommentingAccess()
 const menuId = useId()
 
 const showVisibilityOptions = ref(false)
@@ -148,9 +133,6 @@ watch(includeArchived, (newVal) =>
   })
 )
 
-const { objectIds: selectedObjectIds } = useSelectionUtilities()
-
-const hasSelectedObjects = computed(() => selectedObjectIds.value.size > 0)
 const actionsItems = computed<LayoutMenuItem[][]>(() => [
   [
     {
@@ -188,8 +170,4 @@ const onActionChosen = (params: { item: LayoutMenuItem; event: MouseEvent }) =>
       break
   }
 }
-const onNewDiscussion = () => {
-  if (!hasSelectedObjects.value) return
-  newThreadEditor.value = true
-}
 </script>

packages/frontend-2/components/viewer/controls/Bottom.vue

@@ -64,7 +64,7 @@ enum ActivePanel {
 }
 
 const { getShortcutDisplayText, shortcuts, registerShortcuts } = useViewerShortcuts()
-const { toggleSectionBox } = useSectionBoxUtilities()
+const { toggleSectionBox, resetSectionBox, closeSectionBox } = useSectionBoxUtilities()
 const { getActiveMeasurement, removeMeasurement, enableMeasurements } =
   useMeasurementUtilities()
 const { resetExplode } = useFilterUtilities()
@@ -113,7 +113,10 @@ const panels = shallowRef({
 })
 
 const showResetButton = computed(() => {
-  return activePanel.value === ActivePanel.explode
+  return (
+    activePanel.value === ActivePanel.explode ||
+    activePanel.value === ActivePanel.sectionBox
+  )
 })
 
 const toggleActivePanel = (panel: ActivePanel) => {
@@ -136,7 +139,7 @@ const toggleMeasurements = () => {
 
 const onActivePanelClose = () => {
   if (activePanel.value === ActivePanel.sectionBox) {
-    toggleSectionBox()
+    closeSectionBox()
   }
   if (activePanel.value === ActivePanel.measurements) {
     enableMeasurements(false)
@@ -148,6 +151,9 @@ const onReset = () => {
   if (activePanel.value === ActivePanel.explode) {
     resetExplode()
   }
+  if (activePanel.value === ActivePanel.sectionBox) {
+    resetSectionBox()
+  }
 }
 
 registerShortcuts({
@@ -164,7 +170,7 @@ onKeyStroke('Escape', () => {
     if (activePanel.value === ActivePanel.measurements) {
       toggleMeasurements()
     } else if (activePanel.value === ActivePanel.sectionBox) {
-      toggleSectionBox()
+      closeSectionBox()
     }
     activePanel.value = ActivePanel.none
   }

packages/frontend-2/lib/viewer/composables/ui.ts

@@ -53,6 +53,10 @@ export function useSectionBoxUtilities() {
     }
   }
 
+  const closeSectionBox = () => {
+    visible.value = false
+  }
+
   const toggleSectionBox = () => {
     if (!isSectionBoxEnabled.value) {
       resolveSectionBoxFromSelection()
@@ -86,7 +90,8 @@ export function useSectionBoxUtilities() {
     isSectionBoxEdited,
     toggleSectionBox,
     resetSectionBox,
-    sectionBox
+    sectionBox,
+    closeSectionBox
   }
 }