refactor(fe2): If description is line-clamped show read more and description dialog (#2955)

* Add read more and dialog for workspace description

* Troubleshooting

* Improve "Read more" button reactivity in workspace header

packages/frontend-2/components/global/icon/Triangle.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.64645 8.35355C9.84171 8.15829 9.84171 7.84171 9.64645 7.64645L6.85355 4.85355C6.53857 4.53857 6 4.76165 6 5.20711V10.7929C6 11.2383 6.53857 11.4614 6.85355 11.1464L9.64645 8.35355Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

packages/frontend-2/components/workspace/header/DescriptionDialog.vue

@@ -0,0 +1,30 @@
+<template>
+  <LayoutDialog
+    v-model:open="isOpen"
+    max-width="sm"
+    :buttons="dialogButtons"
+    title="Workspace description"
+  >
+    <div class="mb-2">{{ description }}</div>
+  </LayoutDialog>
+</template>
+
+<script setup lang="ts">
+import type { LayoutDialogButton } from '@speckle/ui-components'
+
+defineProps<{
+  description: string
+}>()
+
+const isOpen = defineModel<boolean>('open', { required: true })
+
+const dialogButtons = computed((): LayoutDialogButton[] => [
+  {
+    text: 'Close',
+    props: { color: 'primary' },
+    onClick: () => {
+      isOpen.value = false
+    }
+  }
+])
+</script>

packages/frontend-2/components/workspace/header/Header.vue

@@ -13,10 +13,25 @@
           size="lg"
         />
       </div>
-      <div class="flex flex-col">
+      <div class="group flex flex-col">
         <h1 class="text-heading line-clamp-2">{{ workspaceInfo.name }}</h1>
-        <div class="text-body-xs text-foreground-2 line-clamp-2">
-          {{ workspaceInfo.description || 'No workspace description' }}
+        <div class="flex">
+          <div
+            ref="descriptionRef"
+            class="text-body-xs text-foreground-2 line-clamp-1 max-w-xs"
+          >
+            {{ workspaceInfo.description || 'No workspace description' }}
+          </div>
+          <FormButton
+            v-if="hasOverflow"
+            color="subtle"
+            size="sm"
+            class="hidden group-hover:flex items-center text-foreground text-body-2xs"
+            @click="showDescriptionDialog"
+          >
+            Read more
+            <IconTriangle class="text-foreground" />
+          </FormButton>
         </div>
       </div>
     </div>
@@ -85,10 +100,15 @@
         </div>
       </div>
     </div>
+    <DescriptionDialog
+      v-model:open="isDescriptionDialogOpen"
+      :description="workspaceInfo.description || 'No workspace description'"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
 import { Roles } from '@speckle/shared'
 import { graphql } from '~~/lib/common/generated/gql'
 import type { WorkspaceHeader_WorkspaceFragment } from '~~/lib/common/generated/gql/graphql'
@@ -100,6 +120,7 @@ import {
   SettingMenuKeys,
   type AvailableSettingsMenuKeys
 } from '~/lib/settings/helpers/types'
+import DescriptionDialog from './DescriptionDialog.vue'
 
 graphql(`
   fragment WorkspaceHeader_Workspace on Workspace {
@@ -173,4 +194,20 @@ const onActionChosen = (params: { item: LayoutMenuItem; event: MouseEvent }) =>
       break
   }
 }
+
+const descriptionRef = ref<HTMLElement | null>(null)
+const { height } = useElementSize(descriptionRef)
+
+const hasOverflow = computed(() => {
+  if (descriptionRef.value) {
+    return descriptionRef.value.scrollHeight > height.value
+  }
+  return false
+})
+
+const isDescriptionDialogOpen = ref(false)
+
+const showDescriptionDialog = () => {
+  isDescriptionDialogOpen.value = true
+}
 </script>