From 510afccf4fdb1d17bd7f4bae40a715b868ecf087 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:25 +0000
Subject: [PATCH 01/42] feat: embla custom carousel

---
 .../components/cell/attachment/Carousel.vue   | 206 +++++++-----------
 .../components/cell/attachment/Image.vue      |   6 +-
 .../nc-gui/components/general/Overlay.vue     |  10 +-
 .../nc-gui/components/nc/Carousel/Content.vue |  27 +++
 .../nc-gui/components/nc/Carousel/Item.vue    |  21 ++
 .../nc-gui/components/nc/Carousel/Next.vue    |  26 +++
 .../components/nc/Carousel/Previous.vue       |  26 +++
 .../nc-gui/components/nc/Carousel/index.vue   |  65 ++++++
 .../components/nc/Carousel/interface.ts       |  24 ++
 .../components/nc/Carousel/useCarousel.ts     |  51 +++++
 10 files changed, 330 insertions(+), 132 deletions(-)
 create mode 100644 packages/nc-gui/components/nc/Carousel/Content.vue
 create mode 100644 packages/nc-gui/components/nc/Carousel/Item.vue
 create mode 100644 packages/nc-gui/components/nc/Carousel/Next.vue
 create mode 100644 packages/nc-gui/components/nc/Carousel/Previous.vue
 create mode 100644 packages/nc-gui/components/nc/Carousel/index.vue
 create mode 100644 packages/nc-gui/components/nc/Carousel/interface.ts
 create mode 100644 packages/nc-gui/components/nc/Carousel/useCarousel.ts

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index d77bf4402a..0ed3217a37 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -1,156 +1,116 @@
 <script lang="ts" setup>
-import { onKeyDown } from '@vueuse/core'
+import type { CarouselApi } from '../../nc/Carousel/interface'
 import { useAttachmentCell } from './utils'
 
 const { selectedImage, visibleItems, downloadAttachment } = useAttachmentCell()!
 
-const carouselRef = ref()
-
 const container = ref()
 
-const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
-
+const emblaMainApi: CarouselApi = ref()
+const emblaThumbnailApi: CarouselApi = ref()
+const selectedIndex = ref(0)
 const { getPossibleAttachmentSrc } = useAttachment()
 
-/** navigate to previous image on button click */
-onKeyDown(
-  (e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
-  () => {
-    if (carouselRef.value) carouselRef.value.prev()
-  },
-)
-
-/** navigate to next image on button click */
-onKeyDown(
-  (e) => ['Right', 'ArrowRight', 'D'].includes(e.key),
-  () => {
-    if (carouselRef.value) carouselRef.value.next()
-  },
-)
+useEventListener(container, 'click', (e) => {
+  if (!(e.target as HTMLElement)?.closest('.keep-open') && !(e.target as HTMLElement)?.closest('img')) {
+    selectedImage.value = false
+  }
+})
 
-/** set our selected image when slide changes */
-function onSlideChange(index: number) {
-  selectedImage.value = imageItems.value[index]
+function onThumbClick(index: number) {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+  emblaMainApi.value.scrollTo(index)
 }
 
-/** set our carousel ref and move to initial slide  */
-const setCarouselRef = (el: Element) => {
-  carouselRef.value = el
-
-  carouselRef.value?.goTo(
-    imageItems.value.findIndex((item) => item === selectedImage.value),
-    true,
-  )
+function onSelect() {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+  selectedIndex.value = emblaMainApi.value?.selectedScrollSnap()
+  selectedImage.value = visibleItems.value[emblaMainApi.value?.selectedScrollSnap()]
+  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
 }
 
-/** close overlay view when clicking outside of image */
-useEventListener(container, 'click', (e) => {
-  if (!(e.target as HTMLElement)?.closest('.keep-open') && !(e.target as HTMLElement)?.closest('img')) {
-    selectedImage.value = false
-  }
+watchOnce(emblaMainApi, (emblaMainApi) => {
+  if (!emblaMainApi) return
+
+  onSelect()
+  emblaMainApi.on('select', onSelect)
+  emblaThumbnailApi.value?.on('reInit', onSelect)
 })
 </script>
 
 <template>
-  <GeneralOverlay v-model="selectedImage" :z-index="1001" class="bg-gray-500 bg-opacity-50">
-    <template v-if="selectedImage">
-      <div ref="container" class="overflow-hidden p-12 text-center relative xs:h-screen">
-        <div class="text-white group absolute top-5 right-5">
-          <component
-            :is="iconMap.closeCircle"
-            class="group-hover:text-red-500 cursor-pointer text-4xl"
-            @click.stop="selectedImage = false"
-          />
-        </div>
+  <GeneralOverlay v-model="selectedImage" transition :z-index="1001" class="bg-black bg-opacity-90">
+    <div v-if="selectedImage" class="flex">
+      <div ref="container" class="overflow-hidden text-center relative h-screen">
+        <NcButton
+          class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
+          size="xsmall"
+          type="text"
+          @click.stop="selectedImage = false"
+        >
+          <component :is="iconMap.close" class="text-white" />
+        </NcButton>
 
         <div
-          class="keep-open select-none group hover:(ring-1 ring-accent) ring-opacity-100 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
-          @click.stop="downloadAttachment(selectedImage)"
+          class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
         >
-          <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
+          <h3
+            style="width: max-content"
+            class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
+            @click.stop="downloadAttachment(selectedImage)"
+          >
+            {{ selectedImage && selectedImage.title }}
+          </h3>
         </div>
 
-        <a-carousel
-          v-if="!!selectedImage"
-          :ref="setCarouselRef"
-          dots-class="slick-dots slick-thumb"
-          :after-change="onSlideChange"
-          arrows
-        >
-          <template #prevArrow>
-            <div class="custom-slick-arrow left-2 z-1 keep-open">
-              <MaterialSymbolsArrowCircleLeftRounded class="rounded-full" />
-            </div>
-          </template>
-
-          <template #nextArrow>
-            <div class="custom-slick-arrow !right-2 z-1 keep-open">
-              <MaterialSymbolsArrowCircleRightRounded class="rounded-full" />
-            </div>
-          </template>
-
-          <template #customPaging="props">
-            <div class="cursor-pointer h-full nc-attachment-img-wrapper">
+        <NcCarousel class="relative p-22 keep-open" @init-api="(val) => (emblaMainApi = val)">
+          <NcCarouselContent>
+            <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
               <LazyCellAttachmentImage
-                class="!block m-auto h-full w-full"
-                :alt="imageItems[props.i].title || `#${props.i}`"
-                :srcs="getPossibleAttachmentSrc(imageItems[props.i])"
+                class="nc-attachment-img-wrapper !h-[80%]"
+                object-fit="contain"
+                :alt="item.title"
+                :srcs="getPossibleAttachmentSrc(item)"
               />
-            </div>
-          </template>
-          <div v-for="(item, idx) of imageItems" :key="idx">
-            <LazyCellAttachmentImage :srcs="getPossibleAttachmentSrc(item)" class="max-w-70vw max-h-70vh" />
-          </div>
-        </a-carousel>
+            </NcCarouselItem>
+          </NcCarouselContent>
+          <NcCarouselPrevious size="small" class="!top-5/12 z-20 !left-8 !absolute" />
+          <NcCarouselNext size="small" class="!top-5/12 z-20 !right-8 !absolute" />
+        </NcCarousel>
+
+        <div class="absolute !w-screen !bottom-5 max-h-18 z-30 flex items-center justify-center inset-x-0">
+          <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
+            <NcCarouselContent class="!flex !gap-3 ml-0">
+              <NcCarouselItem
+                v-for="(item, index) in visibleItems"
+                :key="index"
+                :class="{
+                  'nc-active-attachment': index === selectedIndex,
+                }"
+                class="pl-0 opacity-50 !basis-1/4 cursor-pointer"
+                @click="onThumbClick(index)"
+              >
+                <LazyCellAttachmentImage
+                  class="nc-attachment-img-wrapper"
+                  object-fit="contain"
+                  :alt="item.title"
+                  :srcs="getPossibleAttachmentSrc(item)"
+                />
+              </NcCarouselItem>
+            </NcCarouselContent>
+          </NcCarousel>
+        </div>
       </div>
-    </template>
+    </div>
   </GeneralOverlay>
 </template>
 
-<style scoped>
-.ant-carousel :deep(.custom-slick-arrow .nc-icon):hover {
-  @apply !bg-white;
-}
-.ant-carousel :deep(.slick-dots) {
-  @apply relative mt-4;
-}
-
-.ant-carousel :deep(.slick-slide) {
-  @apply w-full;
-}
-
-.ant-carousel :deep(.slick-slide img) {
-  @apply border-1 m-auto;
-}
-
-.ant-carousel :deep(.slick-thumb) {
-  @apply bottom-2;
-}
-
-.ant-carousel :deep(.slick-thumb li) {
-  @apply w-[60px] h-[45px];
-}
-
-.ant-carousel :deep(.slick-thumb li img) {
-  @apply w-full h-full block;
-  filter: grayscale(100%);
-}
-
-.ant-carousel :deep(.slick-thumb li.slick-active img) {
-  filter: grayscale(0%);
-}
-
-.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
-  @apply text-4xl text-white hover:text-primary active:text-accent opacity-100 cursor-pointer z-1;
-}
-.ant-carousel :deep(.custom-slick-arrow:before) {
-  display: none;
-}
-.ant-carousel :deep(.custom-slick-arrow:hover) {
-  opacity: 0.5;
-}
-
+<style lang="scss">
 .nc-attachment-img-wrapper {
   width: fit-content !important;
 }
+
+.nc-active-attachment {
+  @apply transform opacity-100 scale-110 transition-transform;
+}
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Image.vue
index 58a6d6dcc7..fa34210b87 100644
--- a/packages/nc-gui/components/cell/attachment/Image.vue
+++ b/packages/nc-gui/components/cell/attachment/Image.vue
@@ -2,6 +2,7 @@
 interface Props {
   srcs: string[]
   alt?: string
+  objectFit?: string
 }
 
 const props = defineProps<Props>()
@@ -14,7 +15,10 @@ const onError = () => index.value++
 <template>
   <LazyNuxtImg
     v-if="index < props.srcs.length"
-    class="m-auto h-full max-h-full w-auto nc-attachment-image object-cover"
+    :class="{
+      '!object-contain': props.objectFit === 'contain',
+    }"
+    class="m-auto h-full max-h-full w-auto object-cover nc-attachment-image"
     :src="props.srcs[index]"
     :alt="props?.alt || ''"
     placeholder
diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index a030c746a9..1f903f8d6e 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -46,13 +46,7 @@ export default {
 <template>
   <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
     <Transition :name="transition ? 'fade' : undefined" mode="out-in">
-      <div
-        v-show="!!vModel"
-        v-bind="$attrs"
-        :style="{ zIndex }"
-        :class="[inline ? 'absolute' : 'fixed']"
-        class="top-0 left-0 bottom-0 right-0"
-      >
+      <div v-show="!!vModel" v-bind="$attrs" :style="{ zIndex }" :class="[inline ? 'absolute' : 'fixed']" class="inset-0">
         <slot :is-open="vModel" />
       </div>
     </Transition>
@@ -62,7 +56,7 @@ export default {
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s;
+  transition: opacity 0.8s;
 }
 
 .fade-enter,
diff --git a/packages/nc-gui/components/nc/Carousel/Content.vue b/packages/nc-gui/components/nc/Carousel/Content.vue
new file mode 100644
index 0000000000..07f64cdf3d
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/Content.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden carousel-container">
+    <div
+      :class="{
+        'flex-col': orientation === 'vertical',
+        [props.class]: props.class,
+      }"
+      class="flex embla__container"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/nc/Carousel/Item.vue b/packages/nc-gui/components/nc/Carousel/Item.vue
new file mode 100644
index 0000000000..f4f0f5cddd
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/Item.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="{
+      [props.class]: props.class,
+    }"
+    class="min-w-0 shrink-0 embla__slide grow-0 basis-full"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/nc-gui/components/nc/Carousel/Next.vue b/packages/nc-gui/components/nc/Carousel/Next.vue
new file mode 100644
index 0000000000..9070a59647
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/Next.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <NcButton
+    :disabled="!canScrollNext"
+    type="secondary"
+    size="xsmall"
+    :class="{
+      'rotate-90': orientation === 'vertical',
+      [props.class]: props.class,
+    }"
+    class="absolute"
+    @click="scrollNext"
+  >
+    <slot>
+      <GeneralIcon icon="arrowRight" class="h-4 w-4 text-current" />
+    </slot>
+  </NcButton>
+</template>
diff --git a/packages/nc-gui/components/nc/Carousel/Previous.vue b/packages/nc-gui/components/nc/Carousel/Previous.vue
new file mode 100644
index 0000000000..4ce0cf79d1
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/Previous.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <NcButton
+    :disabled="!canScrollPrev"
+    type="secondary"
+    size="xsmall"
+    :class="{
+      'rotate-90': orientation === 'vertical',
+      [props.class]: props.class,
+    }"
+    class="!absolute"
+    @click="scrollPrev"
+  >
+    <slot>
+      <GeneralIcon icon="arrowLeft" class="h-4 w-4 text-current" />
+    </slot>
+  </NcButton>
+</template>
diff --git a/packages/nc-gui/components/nc/Carousel/index.vue b/packages/nc-gui/components/nc/Carousel/index.vue
new file mode 100644
index 0000000000..359cb58744
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useProvideCarousel } from './useCarousel'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const carouselArgs = useProvideCarousel(props, emits)
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    carouselArgs.scrollPrev()
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    carouselArgs.scrollNext()
+  }
+}
+
+defineExpose(carouselArgs)
+</script>
+
+<template>
+  <div
+    :class="{
+      [props.class]: props.class,
+    }"
+    class="relative embla !focus-visible:outline-none"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+  >
+    <slot v-bind="carouselArgs" />
+  </div>
+</template>
+
+<style lang="scss">
+.embla {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+}
+.embla__slide {
+  position: relative;
+  flex: 0 0 100%;
+}
+</style>
diff --git a/packages/nc-gui/components/nc/Carousel/interface.ts b/packages/nc-gui/components/nc/Carousel/interface.ts
new file mode 100644
index 0000000000..f3d6b459cc
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/interface.ts
@@ -0,0 +1,24 @@
+import type { HTMLAttributes, UnwrapRef } from 'vue'
+import type useEmblaCarousel from 'embla-carousel-vue'
+import type { EmblaCarouselVueType } from 'embla-carousel-vue'
+
+export type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}
diff --git a/packages/nc-gui/components/nc/Carousel/useCarousel.ts b/packages/nc-gui/components/nc/Carousel/useCarousel.ts
new file mode 100644
index 0000000000..bcbdbb599b
--- /dev/null
+++ b/packages/nc-gui/components/nc/Carousel/useCarousel.ts
@@ -0,0 +1,51 @@
+import emblaCarouselVue from 'embla-carousel-vue'
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    )
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value) return
+
+      emblaApi.value?.on('init', onSelect)
+      emblaApi.value?.on('reInit', onSelect)
+      emblaApi.value?.on('select', onSelect)
+
+      emits('init-api', emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState) throw new Error('useCarousel must be used within a <Carousel />')
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }

From a08d9601819c75f1006dbc080e208a50b58e01a5 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:25 +0000
Subject: [PATCH 02/42] fix: check for more keys

---
 packages/nc-gui/components/nc/Carousel/index.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/nc/Carousel/index.vue b/packages/nc-gui/components/nc/Carousel/index.vue
index 359cb58744..94bff7bd63 100644
--- a/packages/nc-gui/components/nc/Carousel/index.vue
+++ b/packages/nc-gui/components/nc/Carousel/index.vue
@@ -19,16 +19,16 @@ onUnmounted(() => {
 })
 
 function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
-  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+  const prevKey = props.orientation === 'vertical' ? ['ArrowUp', 'Up', 'w', 'W'] : ['ArrowLeft', 'Left', 'a', 'A']
+  const nextKey = props.orientation === 'vertical' ? ['ArrowDown', 'Down', 's', 'S'] : ['ArrowRight', 'Right', 'd', 'D']
 
-  if (event.key === prevKey) {
+  if (prevKey.includes(event.key)) {
     event.preventDefault()
     carouselArgs.scrollPrev()
     return
   }
 
-  if (event.key === nextKey) {
+  if (nextKey.includes(event.key)) {
     event.preventDefault()
     carouselArgs.scrollNext()
   }

From 2aa05ebe0912dc7e504b258876b1a7ef9e2cb459 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:25 +0000
Subject: [PATCH 03/42] feat: native video player

---
 packages/nc-gui/assets/nc-icons/play.svg      |   5 +
 .../components/cell/attachment/Carousel.vue   | 100 ++++++++++++------
 .../components/cell/attachment/Modal.vue      |   6 +-
 .../components/cell/attachment/Video.vue      |  23 ++++
 .../components/cell/attachment/index.vue      |  12 +--
 .../components/cell/attachment/utils.ts       |   4 +-
 .../nc-gui/components/nc/Carousel/Item.vue    |   5 +-
 packages/nc-gui/utils/fileUtils.ts            |  27 ++++-
 packages/nc-gui/utils/iconUtils.ts            |   2 +
 9 files changed, 133 insertions(+), 51 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/play.svg
 create mode 100644 packages/nc-gui/components/cell/attachment/Video.vue

diff --git a/packages/nc-gui/assets/nc-icons/play.svg b/packages/nc-gui/assets/nc-icons/play.svg
new file mode 100644
index 0000000000..a0015479fd
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/play.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="play">
+<path id="Vector" d="M3.33331 2L12.6666 8L3.33331 14V2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 0ed3217a37..9ea237a93d 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -1,52 +1,71 @@
 <script lang="ts" setup>
 import type { CarouselApi } from '../../nc/Carousel/interface'
 import { useAttachmentCell } from './utils'
-
 const { selectedImage, visibleItems, downloadAttachment } = useAttachmentCell()!
 
-const container = ref()
+const container = ref<HTMLElement | null>(null)
 
 const emblaMainApi: CarouselApi = ref()
 const emblaThumbnailApi: CarouselApi = ref()
-const selectedIndex = ref(0)
+const selectedIndex = ref()
+
 const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
-  if (!(e.target as HTMLElement)?.closest('.keep-open') && !(e.target as HTMLElement)?.closest('img')) {
-    selectedImage.value = false
+  const target = e.target as HTMLElement
+  if (!target.closest('.keep-open') && !target.closest('img')) {
+    selectedFile.value = false
   }
 })
 
-function onThumbClick(index: number) {
+const onThumbClick = (index: number) => {
   if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+
   emblaMainApi.value.scrollTo(index)
+  emblaThumbnailApi.value.scrollTo(index)
 }
 
-function onSelect() {
+const onSelect = () => {
   if (!emblaMainApi.value || !emblaThumbnailApi.value) return
-  selectedIndex.value = emblaMainApi.value?.selectedScrollSnap()
-  selectedImage.value = visibleItems.value[emblaMainApi.value?.selectedScrollSnap()]
-  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
+
+  const newSnap = emblaMainApi.value.selectedScrollSnap()
+
+  selectedIndex.value = newSnap
+  selectedFile.value = visibleItems.value[newSnap]
+  emblaThumbnailApi.value.scrollTo(newSnap)
 }
 
-watchOnce(emblaMainApi, (emblaMainApi) => {
+watchOnce(emblaMainApi, async (emblaMainApi) => {
   if (!emblaMainApi) return
 
-  onSelect()
-  emblaMainApi.on('select', onSelect)
   emblaThumbnailApi.value?.on('reInit', onSelect)
+
+  emblaMainApi.on('select', onSelect)
+
+  await nextTick(() => {
+    if (!selectedIndex.value) {
+      const newIndex = visibleItems.value.findIndex((item) => {
+        if (selectedFile.value?.path) return item?.path === selectedFile.value.path
+        if (selectedFile.value?.url) return item?.url === selectedFile.value.url
+        return selectedFile.value?.title === item?.title
+      })
+
+      selectedIndex.value = newIndex
+      emblaMainApi.scrollTo(newIndex)
+    }
+  })
 })
 </script>
 
 <template>
-  <GeneralOverlay v-model="selectedImage" transition :z-index="1001" class="bg-black bg-opacity-90">
-    <div v-if="selectedImage" class="flex">
-      <div ref="container" class="overflow-hidden text-center relative h-screen">
+  <GeneralOverlay v-model="selectedFile" transition :z-index="1001" class="bg-black bg-opacity-90">
+    <div v-if="selectedFile" class="flex w-full justify-center items-center">
+      <div ref="container" class="overflow-hidden w-full flex items-center justify-center text-center relative h-screen">
         <NcButton
           class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
           size="xsmall"
           type="text"
-          @click.stop="selectedImage = false"
+          @click.stop="selectedFile = false"
         >
           <component :is="iconMap.close" class="text-white" />
         </NcButton>
@@ -59,7 +78,7 @@ watchOnce(emblaMainApi, (emblaMainApi) => {
             class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
             @click.stop="downloadAttachment(selectedImage)"
           >
-            {{ selectedImage && selectedImage.title }}
+            {{ selectedFile && selectedFile.title }}
           </h3>
         </div>
 
@@ -67,35 +86,50 @@ watchOnce(emblaMainApi, (emblaMainApi) => {
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
               <LazyCellAttachmentImage
-                class="nc-attachment-img-wrapper !h-[80%]"
+                v-if="isImage(item.title, item.mimeType)"
+                class="nc-attachment-img-wrapper !h-[60%]"
                 object-fit="contain"
                 :alt="item.title"
                 :srcs="getPossibleAttachmentSrc(item)"
               />
+
+              <LazyCellAttachmentVideo
+                v-else-if="isVideo(item.title, item.mimeType)"
+                class="!h-[60%]"
+                :alt="item.title"
+                :srcs="getPossibleAttachmentSrc(item)"
+              />
             </NcCarouselItem>
           </NcCarouselContent>
-          <NcCarouselPrevious size="small" class="!top-5/12 z-20 !left-8 !absolute" />
-          <NcCarouselNext size="small" class="!top-5/12 z-20 !right-8 !absolute" />
         </NcCarousel>
 
-        <div class="absolute !w-screen !bottom-5 max-h-18 z-30 flex items-center justify-center inset-x-0">
+        <div class="absolute w-full !bottom-5 max-h-18 z-30 flex items-center justify-center">
           <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
-            <NcCarouselContent class="!flex !gap-3 ml-0">
+            <NcCarouselContent class="!flex !gap-2 ml-0">
               <NcCarouselItem
                 v-for="(item, index) in visibleItems"
                 :key="index"
                 :class="{
-                  'nc-active-attachment': index === selectedIndex,
+                  ' opacity-100': index === selectedIndex,
                 }"
-                class="pl-0 opacity-50 !basis-1/4 cursor-pointer"
+                class="px-2 keep-open opacity-50 !basis-1/8 cursor-pointer"
                 @click="onThumbClick(index)"
               >
-                <LazyCellAttachmentImage
-                  class="nc-attachment-img-wrapper"
-                  object-fit="contain"
-                  :alt="item.title"
-                  :srcs="getPossibleAttachmentSrc(item)"
-                />
+                <div class="flex items-center justify-center">
+                  <LazyCellAttachmentImage
+                    v-if="isImage(item.title, item.mimeType)"
+                    class="nc-attachment-img-wrapper h-12"
+                    object-fit="contain"
+                    :alt="item.title"
+                    :srcs="getPossibleAttachmentSrc(item)"
+                  />
+                  <div
+                    v-else-if="isVideo(item.title, item.mimeType)"
+                    class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
+                  >
+                    <GeneralIcon class="text-white" icon="play" />
+                  </div>
+                </div>
               </NcCarouselItem>
             </NcCarouselContent>
           </NcCarousel>
@@ -109,8 +143,4 @@ watchOnce(emblaMainApi, (emblaMainApi) => {
 .nc-attachment-img-wrapper {
   width: fit-content !important;
 }
-
-.nc-active-attachment {
-  @apply transform opacity-100 scale-110 transition-transform;
-}
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index a952a31b2b..4c11785e44 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -18,7 +18,7 @@ const {
   onDrop,
   downloadAttachment,
   updateModelValue,
-  selectedImage,
+  selectedFile,
   selectedVisibleItems,
   bulkDownloadAttachments,
   renameFile,
@@ -42,10 +42,10 @@ onKeyDown('Escape', () => {
 })
 
 function onClick(item: Record<string, any>) {
-  selectedImage.value = item
+  selectedFile.value = item
   modalVisible.value = false
 
-  const stopHandle = watch(selectedImage, (nextImage) => {
+  const stopHandle = watch(selectedFile, (nextImage) => {
     if (!nextImage) {
       setTimeout(() => {
         modalVisible.value = true
diff --git a/packages/nc-gui/components/cell/attachment/Video.vue b/packages/nc-gui/components/cell/attachment/Video.vue
new file mode 100644
index 0000000000..28c0a5dde1
--- /dev/null
+++ b/packages/nc-gui/components/cell/attachment/Video.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  srcs: string[]
+  alt?: string
+  mimeType?: string
+  objectFit?: string
+}
+
+const props = defineProps<Props>()
+
+const index = ref(0)
+
+const onError = () => index.value++
+</script>
+
+<template>
+  <video controls>
+    <source :src="props.srcs[index]" :type="props.mimeType" />
+    Your browser does not support the video tag.
+  </video>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index dc2796d3a7..9b428a1e19 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -51,7 +51,7 @@ const {
   onDrop,
   isLoading,
   FileIcon,
-  selectedImage,
+  selectedFile,
   isReadonly,
   storedFiles,
   removeFile,
@@ -163,12 +163,12 @@ const onExpand = () => {
   modalVisible.value = true
 }
 
-const onImageClick = (item: any) => {
+const onFileClick = (item: any) => {
   if (isMobileMode.value && !isExpandedForm.value) return
 
   if (!isMobileMode.value && (isGallery.value || isKanban.value) && !isExpandedForm.value) return
 
-  selectedImage.value = item
+  selectedFile.value = item
 }
 
 const keydownEnter = (e: KeyboardEvent) => {
@@ -219,7 +219,7 @@ const handleFileDelete = (i: number) => {
     class="nc-attachment-cell relative flex color-transition gap-2 flex items-center w-full xs:(min-h-12 max-h-32)"
     :class="{ 'justify-center': !active, 'justify-between': active, 'px-2': isExpandedForm }"
   >
-    <LazyCellAttachmentCarousel />
+    <LazyCellAttachmentCarousel v-if="selectedFile" />
 
     <template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
       <general-overlay
@@ -291,7 +291,7 @@ const handleFileDelete = (i: number) => {
               <div
                 class="nc-attachment flex items-center flex-col flex-wrap justify-center flex-auto"
                 :class="{ '!w-30': isForm || isExpandedForm }"
-                @click="() => onImageClick(item)"
+                @click="() => onFileClick(item)"
               >
                 <LazyCellAttachmentImage
                   :alt="item.title || `#${i}`"
@@ -318,7 +318,7 @@ const handleFileDelete = (i: number) => {
                 'h-20.8 !w-30': rowHeight === 6 || isForm || isExpandedForm,
                 'ml-2': active,
               }"
-              @click="openAttachment(item)"
+              @click="onFileClick(item)"
             >
               <component :is="FileIcon(item.icon)" v-if="item.icon" :class="{ 'h-13 w-13': isForm || isExpandedForm }" />
 
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index fe75b2824f..9fa625aeb7 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -42,7 +42,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     const modalVisible = ref(false)
 
     /** for image carousel */
-    const selectedImage = ref()
+    const selectedFile = ref()
 
     const videoStream = ref<MediaStream | null>(null)
 
@@ -414,7 +414,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       renameFile,
       downloadAttachment,
       updateModelValue,
-      selectedImage,
+      selectedFile,
       uploadViaUrl,
       selectedVisibleItems,
       storedFiles,
diff --git a/packages/nc-gui/components/nc/Carousel/Item.vue b/packages/nc-gui/components/nc/Carousel/Item.vue
index f4f0f5cddd..fbc05cf1c9 100644
--- a/packages/nc-gui/components/nc/Carousel/Item.vue
+++ b/packages/nc-gui/components/nc/Carousel/Item.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 
 const props = defineProps<WithClassAsProps>()
-
-const { orientation } = useCarousel()
 </script>
 
 <template>
@@ -14,7 +11,7 @@ const { orientation } = useCarousel()
     :class="{
       [props.class]: props.class,
     }"
-    class="min-w-0 shrink-0 embla__slide grow-0 basis-full"
+    class="min-w-0 shrink-0 flex justify-center items-center embla__slide grow-0 basis-full"
   >
     <slot />
   </div>
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index 521bbf6e7c..6fd7a47ef0 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -15,11 +15,36 @@ const imageExt = [
   'heic-sequence',
 ]
 
+const videoExt = [
+  'webm',
+  'mpg',
+  'mp2',
+  'mpeg',
+  'ogg',
+  'mp4',
+  'm4v',
+  'avi',
+  'wmv',
+  'mov',
+  'qt',
+  'flv',
+  'mkv',
+  '3gp',
+  '3g2',
+  'vob',
+  'ts',
+  'ts',
+]
+
+const isVideo = (name: string, mimetype?: string) => {
+  return videoExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('video/')
+}
+
 const isImage = (name: string, mimetype?: string) => {
   return imageExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('image/')
 }
 
-export { isImage, imageExt }
+export { isImage, imageExt, isVideo }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 89cdc89804..ca25e886af 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -204,6 +204,7 @@ import NcMaximize from '~icons/nc-icons/maximize'
 import NcMaximizeAll from '~icons/nc-icons/maximize-all'
 import NcDrag from '~icons/nc-icons/drag'
 import NcRefresh from '~icons/nc-icons/refresh'
+import NcPlay from '~icons/nc-icons/play'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -638,6 +639,7 @@ export const iconMap = {
   ncDrag: NcDrag,
   refresh: NcRefresh,
   chevronUpDown: NcChevronUpDown,
+  play: NcPlay,
 }
 
 export const getMdiIcon = (type: string): any => {

From bd84d75c4ce3f155bd34af796a0a6eb2f698a6ce Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:25 +0000
Subject: [PATCH 04/42] feat: videojs player

---
 .../components/cell/attachment/Carousel.vue   |  58 ++++++---
 .../components/cell/attachment/Image.vue      |   1 +
 .../components/cell/attachment/Video.vue      | 116 ++++++++++++++++--
 packages/nc-gui/utils/objectUtils.ts          |  26 ++++
 4 files changed, 172 insertions(+), 29 deletions(-)
 create mode 100644 packages/nc-gui/utils/objectUtils.ts

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 9ea237a93d..98098e4511 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -13,7 +13,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
   const target = e.target as HTMLElement
-  if (!target.closest('.keep-open') && !target.closest('img')) {
+  if (!target.closest('.keep-open') && (!target.closest('img') || !target.closest('video'))) {
     selectedFile.value = false
   }
 })
@@ -82,23 +82,32 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           </h3>
         </div>
 
-        <NcCarousel class="relative p-22 keep-open" @init-api="(val) => (emblaMainApi = val)">
+        <NcCarousel
+          class="!absolute inset-16 keep-open flex justify-center items-center"
+          @init-api="(val) => (emblaMainApi = val)"
+        >
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-              <LazyCellAttachmentImage
-                v-if="isImage(item.title, item.mimeType)"
-                class="nc-attachment-img-wrapper !h-[60%]"
-                object-fit="contain"
-                :alt="item.title"
-                :srcs="getPossibleAttachmentSrc(item)"
-              />
-
-              <LazyCellAttachmentVideo
-                v-else-if="isVideo(item.title, item.mimeType)"
-                class="!h-[60%]"
-                :alt="item.title"
-                :srcs="getPossibleAttachmentSrc(item)"
-              />
+              <div class="w-full flex items-center">
+                <LazyCellAttachmentImage
+                  v-if="isImage(item.title, item.mimeType)"
+                  class="nc-attachment-img-wrapper"
+                  object-fit="contain"
+                  :alt="item.title"
+                  :srcs="getPossibleAttachmentSrc(item)"
+                />
+
+                <LazyCellAttachmentVideo
+                  v-else-if="isVideo(item.title, item.mimeType)"
+                  class="!h-full"
+                  :src="getPossibleAttachmentSrc(item)[0]"
+                  :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
+                />
+                <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
+                  <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
+                  <div class="text-gray-800 text-sm">{{ item.title }}</div>
+                </div>
+              </div>
             </NcCarouselItem>
           </NcCarouselContent>
         </NcCarousel>
@@ -129,6 +138,9 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   >
                     <GeneralIcon class="text-white" icon="play" />
                   </div>
+                  <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
+                    <GeneralIcon class="text-white" icon="file" />
+                  </div>
                 </div>
               </NcCarouselItem>
             </NcCarouselContent>
@@ -140,7 +152,17 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 </template>
 
 <style lang="scss">
-.nc-attachment-img-wrapper {
-  width: fit-content !important;
+.nc-attachment-carousel {
+  width: max-content;
+}
+
+.carousel-container {
+  @apply !w-full;
+}
+
+.vjs-fluid {
+  &:not(.vjs-audio-only-mode) {
+    padding-top: 49.25% !important;
+  }
 }
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Image.vue
index fa34210b87..a109bf8803 100644
--- a/packages/nc-gui/components/cell/attachment/Image.vue
+++ b/packages/nc-gui/components/cell/attachment/Image.vue
@@ -20,6 +20,7 @@ const onError = () => index.value++
     }"
     class="m-auto h-full max-h-full w-auto object-cover nc-attachment-image"
     :src="props.srcs[index]"
+    loading="lazy"
     :alt="props?.alt || ''"
     placeholder
     quality="75"
diff --git a/packages/nc-gui/components/cell/attachment/Video.vue b/packages/nc-gui/components/cell/attachment/Video.vue
index 28c0a5dde1..a7a7b831a5 100644
--- a/packages/nc-gui/components/cell/attachment/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Video.vue
@@ -1,23 +1,117 @@
 <script setup lang="ts">
+import videojs from 'video.js'
+import { stripUndefinedOrNull } from '~/utils/objectUtils'
+import 'video.js/dist/video-js.css'
+
 interface Props {
-  srcs: string[]
-  alt?: string
-  mimeType?: string
-  objectFit?: string
+  autoplay?: boolean
+  controls?: boolean
+  height?: string | number
+  loop?: boolean
+  muted?: boolean
+  poster?: string
+  preload?: 'auto' | 'metadata' | 'none'
+  width?: string | number
+  aspectRatio?: string
+  audioOnlyMode?: boolean
+  audioPosterMode?: boolean
+  autoSetup?: boolean
+  disablePictureInPicture?: boolean
+  enableDocumentPictireInPicture?: boolean
+  enableSmoothSeeking?: boolean
+  fluid?: boolean
+  src?: string
+  fullScreen?: {
+    options?: {
+      navigationUI?: 'hide' | 'show'
+      id?: string
+    }
+  }
+  inactivityTimeout?: number
+  language?: string
+  liveui?: boolean
+  notSupportedMessage?: string
+  playbackRates?: number[]
+  playsinline?: boolean
+  plugins?: Record<string, any>
+  preferFullWindow?: boolean
+  responsive?: boolean
+  restoreEl?: Element | boolean
+  skipButtons?: {
+    forward?: number
+    back?: number
+  }
+  sources?: {
+    src: string
+    type: string
+  }[]
+  suppressNotSupportedError?: boolean
+  techOrder?: string[]
+  userActions?: {
+    click?: (event: Event) => void | boolean
+    doubleClick?: (event: Event) => void | boolean
+    hotkeys?: (event: Event) => void | boolean | Record<string, (event: Event) => void>
+  }
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  preload: 'metadata',
+  aspectRatio: '16:9',
+  controls: true,
+  audioOnlyMode: false,
+  audioPosterMode: false,
+  autoSetup: true,
+  disablePictureInPicture: false,
+  enableDocumentPictireInPicture: false,
+  enableSmoothSeeking: true,
+  fluid: true,
+  fullScreen: {
+    options: {
+      navigationUI: 'hide',
+      id: undefined,
+    },
+  },
+  language: 'en',
+  liveui: false,
+  playsinline: true,
+  preferFullWindow: false,
+  responsive: false,
+  restoreEl: false,
+})
+
+const emit = defineEmits<Emits>()
+
+interface Emits {
+  (event: 'init', player: any): void
 }
 
-const props = defineProps<Props>()
+const videoPlayer = ref<Element>()
+
+const player = ref()
 
-const index = ref(0)
+onMounted(() => {
+  if (!videoPlayer.value) return
+  player.value = videojs(videoPlayer.value, stripUndefinedOrNull(props))
+  emit('init', player.value)
+})
 
-const onError = () => index.value++
+onBeforeUnmount(() => {
+  if (player.value) {
+    player.value.dispose()
+  }
+})
 </script>
 
 <template>
-  <video controls>
-    <source :src="props.srcs[index]" :type="props.mimeType" />
-    Your browser does not support the video tag.
-  </video>
+  <div
+    class="w-full"
+    :class="{
+      [props.class]: props.class,
+    }"
+  >
+    <video ref="videoPlayer" class="video-js h-full w-full"></video>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/packages/nc-gui/utils/objectUtils.ts b/packages/nc-gui/utils/objectUtils.ts
new file mode 100644
index 0000000000..6eb34de220
--- /dev/null
+++ b/packages/nc-gui/utils/objectUtils.ts
@@ -0,0 +1,26 @@
+type NonUndefined<T> = T extends undefined ? never : T
+type NonNull<T> = T extends null ? never : T
+type NonNullableObject<T> = {
+  [K in keyof T]: NonUndefined<NonNull<T[K]>>
+}
+
+type Prettify<T> = {
+  [K in keyof T]: T[K]
+} & {}
+
+export const stripUndefinedOrNull = <T>(obj: T): Prettify<NonNullableObject<T>> => {
+  const strip = (input: unknown): unknown => {
+    return Array.isArray(input)
+      ? input.map(strip)
+      : input !== null && typeof input === 'object'
+      ? Object.entries(input)
+          .filter(([, value]) => value !== undefined && value !== null)
+          .reduce((acc, [key, value]) => {
+            acc[key as keyof typeof acc] = strip(value)
+            return acc
+          }, {} as Record<string, unknown>)
+      : input
+  }
+
+  return strip(obj) as Prettify<NonNullableObject<T>>
+}

From 8b3457f41496109348855c390e6805b4a2273bc8 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 05/42] fix: refactor files

---
 .../components/cell/attachment/Carousel.vue     | 17 +++++++++++------
 .../nc-gui/components/cell/attachment/Modal.vue |  2 +-
 .../cell/attachment/{ => Preview}/Image.vue     |  0
 .../cell/attachment/{ => Preview}/Video.vue     |  0
 .../nc-gui/components/cell/attachment/index.vue |  2 +-
 .../nc-gui/components/general/FormBanner.vue    |  6 +++++-
 packages/nc-gui/components/smartsheet/Form.vue  |  2 +-
 .../nc-gui/components/smartsheet/Gallery.vue    |  2 +-
 .../nc-gui/components/smartsheet/Kanban.vue     |  2 +-
 .../components/smartsheet/calendar/SideMenu.vue |  2 +-
 .../virtual-cell/components/ListItem.vue        |  2 +-
 11 files changed, 23 insertions(+), 14 deletions(-)
 rename packages/nc-gui/components/cell/attachment/{ => Preview}/Image.vue (100%)
 rename packages/nc-gui/components/cell/attachment/{ => Preview}/Video.vue (100%)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 98098e4511..6e66cca0e3 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -89,7 +89,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
               <div class="w-full flex items-center">
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
                   class="nc-attachment-img-wrapper"
                   object-fit="contain"
@@ -97,7 +97,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
 
-                <LazyCellAttachmentVideo
+                <LazyCellAttachmentPreviewVideo
                   v-else-if="isVideo(item.title, item.mimeType)"
                   class="!h-full"
                   :src="getPossibleAttachmentSrc(item)[0]"
@@ -112,20 +112,25 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           </NcCarouselContent>
         </NcCarousel>
 
-        <div class="absolute w-full !bottom-5 max-h-18 z-30 flex items-center justify-center">
+        <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
           <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
             <NcCarouselContent class="!flex !gap-2 ml-0">
               <NcCarouselItem
                 v-for="(item, index) in visibleItems"
                 :key="index"
                 :class="{
-                  ' opacity-100': index === selectedIndex,
+                  'opacity-100': index === selectedIndex,
+                  '!basis-1/2': visibleItems.length === 2,
+                  '!basis-1/3': visibleItems.length === 3,
+                  '!basis-1': visibleItems.length === 1,
+                  '!basis-1/4': visibleItems.length === 4,
+                  '!basis-1/8': visibleItems.length > 4,
                 }"
-                class="px-2 keep-open opacity-50 !basis-1/8 cursor-pointer"
+                class="px-2 keep-open opacity-50 cursor-pointer"
                 @click="onThumbClick(index)"
               >
                 <div class="flex items-center justify-center">
-                  <LazyCellAttachmentImage
+                  <LazyCellAttachmentPreviewImage
                     v-if="isImage(item.title, item.mimeType)"
                     class="nc-attachment-img-wrapper h-12"
                     object-fit="contain"
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 4c11785e44..6ceed95d6b 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -144,7 +144,7 @@ const handleFileDelete = (i: number) => {
               :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
               class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
             >
-              <LazyCellAttachmentImage
+              <LazyCellAttachmentPreviewImage
                 v-if="isImage(item.title, item.mimetype)"
                 :srcs="getPossibleAttachmentSrc(item)"
                 class="max-h-full h-64 m-auto justify-center"
diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Preview/Image.vue
similarity index 100%
rename from packages/nc-gui/components/cell/attachment/Image.vue
rename to packages/nc-gui/components/cell/attachment/Preview/Image.vue
diff --git a/packages/nc-gui/components/cell/attachment/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
similarity index 100%
rename from packages/nc-gui/components/cell/attachment/Video.vue
rename to packages/nc-gui/components/cell/attachment/Preview/Video.vue
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 9b428a1e19..fa49ba9ae1 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -293,7 +293,7 @@ const handleFileDelete = (i: number) => {
                 :class="{ '!w-30': isForm || isExpandedForm }"
                 @click="() => onFileClick(item)"
               >
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   :alt="item.title || `#${i}`"
                   class="rounded"
                   :class="{
diff --git a/packages/nc-gui/components/general/FormBanner.vue b/packages/nc-gui/components/general/FormBanner.vue
index 6a609a866e..04f42a9128 100644
--- a/packages/nc-gui/components/general/FormBanner.vue
+++ b/packages/nc-gui/components/general/FormBanner.vue
@@ -19,7 +19,11 @@ const getBannerImageSrc = computed(() => {
     :class="!bannerImageUrl ? 'shadow-sm' : ''"
     :style="{ aspectRatio: 4 / 1 }"
   >
-    <LazyCellAttachmentImage v-if="bannerImageUrl" :srcs="getBannerImageSrc" class="nc-form-banner-image object-cover w-full" />
+    <LazyCellAttachmentPreviewImage
+      v-if="bannerImageUrl"
+      :srcs="getBannerImageSrc"
+      class="nc-form-banner-image object-cover w-full"
+    />
     <div v-else class="h-full flex items-stretch justify-between bg-white">
       <div class="flex -mt-1">
         <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 00e2e8d023..edb4e62f35 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -872,7 +872,7 @@ useEventListener(
                             "
                             style="transition: all 0.3s ease-in"
                           >
-                            <LazyCellAttachmentImage
+                            <LazyCellAttachmentPreviewImage
                               v-if="formViewData.logo_url"
                               :key="formViewData.logo_url?.path"
                               :srcs="getFormLogoSrc"
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 592298e1bd..9624445a2e 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -299,7 +299,7 @@ watch(
                   </template>
 
                   <template v-for="(attachment, index) in attachments(record)">
-                    <LazyCellAttachmentImage
+                    <LazyCellAttachmentPreviewImage
                       v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                       :key="`carousel-${record.row.id}-${index}`"
                       class="h-52"
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 29e1bd6d25..2ce7b3a7c1 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -785,7 +785,7 @@ const handleSubmitRenameOrNewStack = async (loadMeta: boolean, stack?: any, stac
                                         </template>
 
                                         <template v-for="attachment in attachments(record)">
-                                          <LazyCellAttachmentImage
+                                          <LazyCellAttachmentPreviewImage
                                             v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                                             :key="attachment.path"
                                             class="h-52"
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 421d8da88f..27e6a1c436 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -582,7 +582,7 @@ onClickOutside(searchRef, toggleSearch)
                     </template>
 
                     <template v-for="(attachment, index) in attachments(record)">
-                      <LazyCellAttachmentImage
+                      <LazyCellAttachmentPreviewImage
                         v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                         :key="`carousel-${record.row.id}-${index}`"
                         class="h-10 !w-10 !object-contain"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index b703638b23..952f34a6f4 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -88,7 +88,7 @@ const displayValue = computed(() => {
             <a-carousel autoplay class="!w-11 !h-11 !max-h-11 !max-w-11">
               <template #customPaging> </template>
               <template v-for="(attachmentObj, index) in attachments">
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
                   :key="`carousel-${attachmentObj.title}-${index}`"
                   class="!w-11 !h-11 !max-h-11 !max-w-11object-cover !rounded-l-xl"

From fa6a4b95ae65cca9364c119f6654e4bc0ab408f4 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 06/42] feat: pdf viewer

---
 .../components/cell/attachment/Carousel.vue       | 15 ++++++++++++---
 .../components/cell/attachment/Preview/Pdf.vue    | 13 +++++++++++++
 packages/nc-gui/components/nc/Carousel/Item.vue   |  2 +-
 packages/nc-gui/utils/fileUtils.ts                |  6 +++++-
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 packages/nc-gui/components/cell/attachment/Preview/Pdf.vue

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 6e66cca0e3..6b88730142 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -88,7 +88,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         >
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-              <div class="w-full flex items-center">
+              <div class="w-full h-full justify-center flex items-center">
                 <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
                   class="nc-attachment-img-wrapper"
@@ -99,10 +99,14 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 
                 <LazyCellAttachmentPreviewVideo
                   v-else-if="isVideo(item.title, item.mimeType)"
-                  class="!h-full"
+                  class="!h-full flex items-center"
                   :src="getPossibleAttachmentSrc(item)[0]"
                   :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
                 />
+                <LazyCellAttachmentPreviewPdf
+                  v-else-if="isPdf(item.title, item.mimeType)"
+                  :src="getPossibleAttachmentSrc(item)[0]"
+                />
                 <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
                   <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
                   <div class="text-gray-800 text-sm">{{ item.title }}</div>
@@ -143,6 +147,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   >
                     <GeneralIcon class="text-white" icon="play" />
                   </div>
+
                   <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
                     <GeneralIcon class="text-white" icon="file" />
                   </div>
@@ -162,7 +167,11 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 }
 
 .carousel-container {
-  @apply !w-full;
+  @apply !w-full flex items-center h-full;
+
+  .embla__container {
+    @apply items-center h-full w-full;
+  }
 }
 
 .vjs-fluid {
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
new file mode 100644
index 0000000000..33c172e5f8
--- /dev/null
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <iframe :src="props.src" width="100%" height="100%"></iframe>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/nc/Carousel/Item.vue b/packages/nc-gui/components/nc/Carousel/Item.vue
index fbc05cf1c9..439d3ff2f7 100644
--- a/packages/nc-gui/components/nc/Carousel/Item.vue
+++ b/packages/nc-gui/components/nc/Carousel/Item.vue
@@ -11,7 +11,7 @@ const props = defineProps<WithClassAsProps>()
     :class="{
       [props.class]: props.class,
     }"
-    class="min-w-0 shrink-0 flex justify-center items-center embla__slide grow-0 basis-full"
+    class="min-w-0 shrink-0 flex justify-center items-center embla__slide h-full grow-0 basis-full"
   >
     <slot />
   </div>
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index 6fd7a47ef0..46c1f6f350 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -44,7 +44,11 @@ const isImage = (name: string, mimetype?: string) => {
   return imageExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('image/')
 }
 
-export { isImage, imageExt, isVideo }
+const isPdf = (name: string, mimetype?: string) => {
+  return name?.toLowerCase().endsWith('.pdf') || mimetype?.startsWith('application/pdf')
+}
+
+export { isImage, imageExt, isVideo, isPdf }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome

From de45679d8697ce2185544eb051339840b97019b2 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 07/42] feat: pdf viewer with docs support

---
 .../nc-gui/assets/nc-icons/google-docs.svg    | 89 +++++++++++++++++++
 .../components/cell/attachment/Carousel.vue   |  3 +-
 .../cell/attachment/Preview/Pdf.vue           | 35 +++++++-
 packages/nc-gui/utils/iconUtils.ts            |  4 +
 4 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/google-docs.svg

diff --git a/packages/nc-gui/assets/nc-icons/google-docs.svg b/packages/nc-gui/assets/nc-icons/google-docs.svg
new file mode 100644
index 0000000000..180ef36e8a
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/google-docs.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="47px" height="65px" viewBox="0 0 47 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>Docs-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-1"></path>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-3"></path>
+        <linearGradient x1="50.0053945%" y1="8.58610612%" x2="50.0053945%" y2="100.013939%" id="linearGradient-5">
+            <stop stop-color="#1A237E" stop-opacity="0.2" offset="0%"></stop>
+            <stop stop-color="#1A237E" stop-opacity="0.02" offset="100%"></stop>
+        </linearGradient>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-6"></path>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-8"></path>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-10"></path>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-12"></path>
+        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="path-14"></path>
+        <radialGradient cx="3.16804688%" cy="2.71744318%" fx="3.16804688%" fy="2.71744318%" r="161.248516%" gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)" id="radialGradient-16">
+            <stop stop-color="#FFFFFF" stop-opacity="0.1" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Consumer-Apps-Docs-Large-VD-R8" transform="translate(-451.000000, -463.000000)">
+            <g id="Hero" transform="translate(0.000000, 63.000000)">
+                <g id="Personal" transform="translate(277.000000, 309.000000)">
+                    <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
+                        <g id="Group">
+                            <g id="Clipped">
+                                <mask id="mask-2" fill="white">
+                                    <use xlink:href="#path-1"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z" id="Path" fill="#4285F4" fill-rule="nonzero" mask="url(#mask-2)"></path>
+                            </g>
+                            <g id="Clipped">
+                                <mask id="mask-4" fill="white">
+                                    <use xlink:href="#path-3"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <polygon id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero" mask="url(#mask-4)" points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"></polygon>
+                            </g>
+                            <g id="Clipped">
+                                <mask id="mask-7" fill="white">
+                                    <use xlink:href="#path-6"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <path d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z" id="Shape" fill="#F1F1F1" fill-rule="nonzero" mask="url(#mask-7)"></path>
+                            </g>
+                            <g id="Clipped">
+                                <mask id="mask-9" fill="white">
+                                    <use xlink:href="#path-8"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <g id="Group" mask="url(#mask-9)">
+                                    <g transform="translate(26.437500, -2.954545)">
+                                        <path d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z" id="Path" fill="#A1C2FA" fill-rule="nonzero"></path>
+                                    </g>
+                                </g>
+                            </g>
+                            <g id="Clipped">
+                                <mask id="mask-11" fill="white">
+                                    <use xlink:href="#path-10"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <path d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z" id="Path" fill-opacity="0.2" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-11)"></path>
+                            </g>
+                            <g id="Clipped">
+                                <mask id="mask-13" fill="white">
+                                    <use xlink:href="#path-12"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <path d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z" id="Path" fill-opacity="0.2" fill="#1A237E" fill-rule="nonzero" mask="url(#mask-13)"></path>
+                            </g>
+                            <g id="Clipped">
+                                <mask id="mask-15" fill="white">
+                                    <use xlink:href="#path-14"></use>
+                                </mask>
+                                <g id="SVGID_1_"></g>
+                                <path d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z" id="Path" fill-opacity="0.1" fill="#1A237E" fill-rule="nonzero" mask="url(#mask-15)"></path>
+                            </g>
+                        </g>
+                        <path d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z" id="Path" fill="url(#radialGradient-16)" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 6b88730142..ec3336cee3 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -13,7 +13,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
   const target = e.target as HTMLElement
-  if (!target.closest('.keep-open') && (!target.closest('img') || !target.closest('video'))) {
+  if (!target.closest('.keep-open') || !target.closest('.nc-button')) {
     selectedFile.value = false
   }
 })
@@ -105,6 +105,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                 />
                 <LazyCellAttachmentPreviewPdf
                   v-else-if="isPdf(item.title, item.mimeType)"
+                  class="keep-open"
                   :src="getPossibleAttachmentSrc(item)[0]"
                 />
                 <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 33c172e5f8..68e5bfde6d 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -1,13 +1,46 @@
 <script setup lang="ts">
 interface Props {
   src: string
+  class?: string
 }
 
 const props = defineProps<Props>()
+
+const openMethod = ref<'browser' | 'google' | undefined>()
 </script>
 
 <template>
-  <iframe :src="props.src" width="100%" height="100%"></iframe>
+  <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
+    <GeneralIcon class="w-28 h-28" icon="pdfFile" />
+
+    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
+
+    <div class="flex items-center justify-center gap-2">
+      <NcButton @click="openMethod = 'browser'">
+        <div class="flex items-center gap-1">
+          <GeneralIcon icon="lock" />
+          Open in browser
+        </div>
+      </NcButton>
+      <NcButton type="secondary" @click="openMethod = 'google'">
+        <div class="flex items-center gap-1">
+          <GeneralIcon class="w-4 h-4" icon="googleDocs" />
+
+          Open with Google Docs
+        </div>
+      </NcButton>
+    </div>
+  </div>
+
+  <iframe v-if="openMethod === 'browser'" :class="props.class" :src="props.src" width="100%" height="100%"></iframe>
+  <iframe
+    v-else-if="openMethod === 'google'"
+    :class="props.class"
+    :src="`https://docs.google.com/viewer?url=${src}&embedded=true`"
+    width="100%"
+    height="100%"
+    frameborder="0"
+  ></iframe>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index ca25e886af..0141fc302c 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -40,6 +40,7 @@ import Phishing from '~icons/material-symbols/phishing-outline-rounded'
 import MdiAccountGroup from '~icons/mdi/account-group'
 import MdiDotsVertical from '~icons/mdi/dots-vertical'
 import MdiDotsHorizontal from '~icons/mdi/dots-horizontal'
+import MdiPdf from '~icons/mdi/file-pdf'
 import PhExcelThin from '~icons/ph/microsoft-excel-logo-light'
 import VscodeIconsExcelColored from '~icons/vscode-icons/file-type-excel'
 import PhCsvThin from '~icons/ph/file-csv'
@@ -205,6 +206,7 @@ import NcMaximizeAll from '~icons/nc-icons/maximize-all'
 import NcDrag from '~icons/nc-icons/drag'
 import NcRefresh from '~icons/nc-icons/refresh'
 import NcPlay from '~icons/nc-icons/play'
+import GoogleDocs from '~icons/nc-icons/google-docs'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -640,6 +642,8 @@ export const iconMap = {
   refresh: NcRefresh,
   chevronUpDown: NcChevronUpDown,
   play: NcPlay,
+  googleDocs: GoogleDocs,
+  pdfFile: MdiPdf,
 }
 
 export const getMdiIcon = (type: string): any => {

From d1eea7f285d5a244dd1cbb7be4a9c6c1109c9ff1 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 08/42] feat: add rename, update, delete functionality

---
 .../components/cell/attachment/Carousel.vue   | 76 ++++++++++++++++++-
 .../components/cell/attachment/utils.ts       |  7 +-
 2 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index ec3336cee3..e16621a5e5 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import type { CarouselApi } from '../../nc/Carousel/interface'
 import { useAttachmentCell } from './utils'
-const { selectedImage, visibleItems, downloadAttachment } = useAttachmentCell()!
+
+const { selectedFile, visibleItems, downloadAttachment, removeFile, renameFile, isPublic, isReadonly } = useAttachmentCell()!
+
+const { isSharedForm } = useSmartsheetStoreOrThrow()
+
+const { isUIAllowed } = useRoles()
 
 const container = ref<HTMLElement | null>(null)
 
@@ -9,6 +14,25 @@ const emblaMainApi: CarouselApi = ref()
 const emblaThumbnailApi: CarouselApi = ref()
 const selectedIndex = ref()
 
+const filetoDelete = reactive({
+  title: '',
+  i: 0,
+})
+const isModalOpen = ref(false)
+
+function onRemoveFileClick(title: any, i: number) {
+  isModalOpen.value = true
+  filetoDelete.title = title
+  filetoDelete.i = i
+}
+
+const handleFileDelete = (i: number) => {
+  removeFile(i)
+  isModalOpen.value = false
+  filetoDelete.i = 0
+  filetoDelete.title = ''
+}
+
 const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
@@ -58,7 +82,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 </script>
 
 <template>
-  <GeneralOverlay v-model="selectedFile" transition :z-index="1001" class="bg-black bg-opacity-90">
+  <GeneralOverlay v-model="selectedFile" transition :z-index="50" class="bg-black bg-opacity-90">
     <div v-if="selectedFile" class="flex w-full justify-center items-center">
       <div ref="container" class="overflow-hidden w-full flex items-center justify-center text-center relative h-screen">
         <NcButton
@@ -157,6 +181,54 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
             </NcCarouselContent>
           </NcCarousel>
         </div>
+
+        <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
+          <NcTooltip v-if="!isReadonly" placement="bottom">
+            <template #title> {{ $t('title.removeFile') }} </template>
+            <NcButton
+              class="!text-red-500 !hover:bg-transparent"
+              size="xsmall"
+              type="text"
+              @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
+            >
+              <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+            </NcButton>
+          </NcTooltip>
+
+          <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
+            <template #title> {{ $t('title.renameFile') }} </template>
+            <NcButton
+              size="xsmall"
+              class="nc-attachment-rename !hover:bg-transparent !text-white"
+              type="text"
+              @click="renameFile(selectedFile, selectedIndex, true)"
+            >
+              <component :is="iconMap.rename" />
+            </NcButton>
+          </NcTooltip>
+
+          <NcButton size="small" @click="downloadFile(selectedFile)">
+            <div class="flex items-center gap-2 justify-center">
+              <component :is="iconMap.download" />
+              {{ $t('title.downloadFile') }}
+            </div>
+          </NcButton>
+        </div>
+        <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
+          <template #entity-preview>
+            <span>
+              <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
+                <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
+                <div
+                  class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
+                  :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+                >
+                  {{ filetoDelete.title }}
+                </div>
+              </div>
+            </span>
+          </template>
+        </GeneralDeleteModal>
       </div>
     </div>
   </GeneralOverlay>
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index 9fa625aeb7..674104fb2a 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -264,7 +264,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
-    async function renameFile(attachment: AttachmentType, idx: number) {
+    async function renameFile(attachment: AttachmentType, idx: number, updateSelectedFile?: boolean) {
       return new Promise<boolean>((resolve) => {
         const { close } = useDialog(RenameFile, {
           title: attachment.title,
@@ -272,6 +272,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
             attachments.value[idx].title = newTitle
             updateModelValue(JSON.stringify(attachments.value))
             close()
+
+            if (updateSelectedFile) {
+              selectedFile.value = { ...attachment, title: newTitle }
+            }
+
             resolve(true)
           },
           onCancel: () => {

From f146c7306dbdc982aa277fa3ee8cad02b7d4bd13 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 09/42] chore: refactor

---
 .../components/cell/attachment/Carousel.vue   | 261 +++++++++---------
 1 file changed, 130 insertions(+), 131 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index e16621a5e5..c32244570f 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -37,7 +37,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
   const target = e.target as HTMLElement
-  if (!target.closest('.keep-open') || !target.closest('.nc-button')) {
+  if (!target.closest('.keep-open') || !target.closest('.nc-button') || !target?.closest('img') || !target?.closest('video')) {
     selectedFile.value = false
   }
 })
@@ -83,153 +83,152 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 
 <template>
   <GeneralOverlay v-model="selectedFile" transition :z-index="50" class="bg-black bg-opacity-90">
-    <div v-if="selectedFile" class="flex w-full justify-center items-center">
-      <div ref="container" class="overflow-hidden w-full flex items-center justify-center text-center relative h-screen">
-        <NcButton
-          class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
-          size="xsmall"
-          type="text"
-          @click.stop="selectedFile = false"
+    <div
+      v-if="selectedFile"
+      ref="container"
+      class="flex w-full overflow-hidden justify-center text-center relative h-screen items-center"
+    >
+      <NcButton
+        class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
+        size="xsmall"
+        type="text"
+        @click.stop="selectedFile = false"
+      >
+        <component :is="iconMap.close" class="text-white" />
+      </NcButton>
+
+      <div
+        class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
+      >
+        <h3
+          style="width: max-content"
+          class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
+          @click.stop="downloadAttachment(selectedFile)"
         >
-          <component :is="iconMap.close" class="text-white" />
-        </NcButton>
-
-        <div
-          class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
-        >
-          <h3
-            style="width: max-content"
-            class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
-            @click.stop="downloadAttachment(selectedImage)"
-          >
-            {{ selectedFile && selectedFile.title }}
-          </h3>
-        </div>
+          {{ selectedFile && selectedFile.title }}
+        </h3>
+      </div>
 
-        <NcCarousel
-          class="!absolute inset-16 keep-open flex justify-center items-center"
-          @init-api="(val) => (emblaMainApi = val)"
-        >
-          <NcCarouselContent>
-            <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-              <div class="w-full h-full justify-center flex items-center">
+      <NcCarousel class="!absolute inset-16 keep-open flex justify-center items-center" @init-api="(val) => (emblaMainApi = val)">
+        <NcCarouselContent>
+          <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
+            <div class="w-full h-full justify-center flex items-center">
+              <LazyCellAttachmentPreviewImage
+                v-if="isImage(item.title, item.mimeType)"
+                class="nc-attachment-img-wrapper"
+                object-fit="contain"
+                :alt="item.title"
+                :srcs="getPossibleAttachmentSrc(item)"
+              />
+
+              <LazyCellAttachmentPreviewVideo
+                v-else-if="isVideo(item.title, item.mimeType)"
+                class="!h-full flex items-center"
+                :src="getPossibleAttachmentSrc(item)[0]"
+                :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
+              />
+              <LazyCellAttachmentPreviewPdf
+                v-else-if="isPdf(item.title, item.mimeType)"
+                class="keep-open"
+                :src="getPossibleAttachmentSrc(item)[0]"
+              />
+              <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
+                <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
+                <div class="text-gray-800 text-sm">{{ item.title }}</div>
+              </div>
+            </div>
+          </NcCarouselItem>
+        </NcCarouselContent>
+      </NcCarousel>
+
+      <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
+        <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
+          <NcCarouselContent class="!flex !gap-2 ml-0">
+            <NcCarouselItem
+              v-for="(item, index) in visibleItems"
+              :key="index"
+              :class="{
+                'opacity-100': index === selectedIndex,
+                '!basis-1/2': visibleItems.length === 2,
+                '!basis-1/3': visibleItems.length === 3,
+                '!basis-1': visibleItems.length === 1,
+                '!basis-1/4': visibleItems.length === 4,
+                '!basis-1/8': visibleItems.length > 4,
+              }"
+              class="px-2 keep-open opacity-50 cursor-pointer"
+              @click="onThumbClick(index)"
+            >
+              <div class="flex items-center justify-center">
                 <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
-                  class="nc-attachment-img-wrapper"
+                  class="nc-attachment-img-wrapper h-12"
                   object-fit="contain"
                   :alt="item.title"
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
-
-                <LazyCellAttachmentPreviewVideo
+                <div
                   v-else-if="isVideo(item.title, item.mimeType)"
-                  class="!h-full flex items-center"
-                  :src="getPossibleAttachmentSrc(item)[0]"
-                  :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
-                />
-                <LazyCellAttachmentPreviewPdf
-                  v-else-if="isPdf(item.title, item.mimeType)"
-                  class="keep-open"
-                  :src="getPossibleAttachmentSrc(item)[0]"
-                />
-                <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
-                  <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
-                  <div class="text-gray-800 text-sm">{{ item.title }}</div>
+                  class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
+                >
+                  <GeneralIcon class="text-white" icon="play" />
+                </div>
+
+                <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
+                  <GeneralIcon class="text-white" icon="file" />
                 </div>
               </div>
             </NcCarouselItem>
           </NcCarouselContent>
         </NcCarousel>
+      </div>
 
-        <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
-          <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
-            <NcCarouselContent class="!flex !gap-2 ml-0">
-              <NcCarouselItem
-                v-for="(item, index) in visibleItems"
-                :key="index"
-                :class="{
-                  'opacity-100': index === selectedIndex,
-                  '!basis-1/2': visibleItems.length === 2,
-                  '!basis-1/3': visibleItems.length === 3,
-                  '!basis-1': visibleItems.length === 1,
-                  '!basis-1/4': visibleItems.length === 4,
-                  '!basis-1/8': visibleItems.length > 4,
-                }"
-                class="px-2 keep-open opacity-50 cursor-pointer"
-                @click="onThumbClick(index)"
-              >
-                <div class="flex items-center justify-center">
-                  <LazyCellAttachmentPreviewImage
-                    v-if="isImage(item.title, item.mimeType)"
-                    class="nc-attachment-img-wrapper h-12"
-                    object-fit="contain"
-                    :alt="item.title"
-                    :srcs="getPossibleAttachmentSrc(item)"
-                  />
-                  <div
-                    v-else-if="isVideo(item.title, item.mimeType)"
-                    class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
-                  >
-                    <GeneralIcon class="text-white" icon="play" />
-                  </div>
-
-                  <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
-                    <GeneralIcon class="text-white" icon="file" />
-                  </div>
-                </div>
-              </NcCarouselItem>
-            </NcCarouselContent>
-          </NcCarousel>
-        </div>
-
-        <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
-          <NcTooltip v-if="!isReadonly" placement="bottom">
-            <template #title> {{ $t('title.removeFile') }} </template>
-            <NcButton
-              class="!text-red-500 !hover:bg-transparent"
-              size="xsmall"
-              type="text"
-              @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
-            >
-              <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
-            </NcButton>
-          </NcTooltip>
-
-          <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
-            <template #title> {{ $t('title.renameFile') }} </template>
-            <NcButton
-              size="xsmall"
-              class="nc-attachment-rename !hover:bg-transparent !text-white"
-              type="text"
-              @click="renameFile(selectedFile, selectedIndex, true)"
-            >
-              <component :is="iconMap.rename" />
-            </NcButton>
-          </NcTooltip>
-
-          <NcButton size="small" @click="downloadFile(selectedFile)">
-            <div class="flex items-center gap-2 justify-center">
-              <component :is="iconMap.download" />
-              {{ $t('title.downloadFile') }}
-            </div>
+      <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
+        <NcTooltip v-if="!isReadonly" placement="bottom">
+          <template #title> {{ $t('title.removeFile') }} </template>
+          <NcButton
+            class="!text-red-500 !hover:bg-transparent"
+            size="xsmall"
+            type="text"
+            @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
+          >
+            <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
           </NcButton>
-        </div>
-        <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
-          <template #entity-preview>
-            <span>
-              <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-                <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
-                <div
-                  class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
-                  :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-                >
-                  {{ filetoDelete.title }}
-                </div>
-              </div>
-            </span>
-          </template>
-        </GeneralDeleteModal>
+        </NcTooltip>
+
+        <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
+          <template #title> {{ $t('title.renameFile') }} </template>
+          <NcButton
+            size="xsmall"
+            class="nc-attachment-rename !hover:bg-transparent !text-white"
+            type="text"
+            @click="renameFile(selectedFile, selectedIndex, true)"
+          >
+            <component :is="iconMap.rename" />
+          </NcButton>
+        </NcTooltip>
+
+        <NcButton size="small" @click="downloadFile(selectedFile)">
+          <div class="flex items-center gap-2 justify-center">
+            <component :is="iconMap.download" />
+            {{ $t('title.downloadFile') }}
+          </div>
+        </NcButton>
       </div>
+      <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
+        <template #entity-preview>
+          <span>
+            <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
+              <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
+              <div
+                class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
+                :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+              >
+                {{ filetoDelete.title }}
+              </div>
+            </div>
+          </span>
+        </template>
+      </GeneralDeleteModal>
     </div>
   </GeneralOverlay>
 </template>

From 34f75bcba48751cbbff7173658da0541c33cc878 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 10/42] fix: click outside

---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index c32244570f..6f2e8280b2 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -37,7 +37,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
   const target = e.target as HTMLElement
-  if (!target.closest('.keep-open') || !target.closest('.nc-button') || !target?.closest('img') || !target?.closest('video')) {
+  if (!target.closest('.keep-open') && !target.closest('.nc-button') && !target?.closest('img') && !target?.closest('video')) {
     selectedFile.value = false
   }
 })

From f548dd23fd465a0a490808baa36b0e6854c789e3 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 11/42] feat: support office file types

---
 .../components/cell/attachment/Carousel.vue   | 13 +++++++
 .../cell/attachment/Preview/MiscOffice.vue    | 37 +++++++++++++++++++
 packages/nc-gui/utils/fileUtils.ts            | 37 ++++++++++++++++++-
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 6f2e8280b2..8ec0cdba4b 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { CarouselApi } from '../../nc/Carousel/interface'
 import { useAttachmentCell } from './utils'
+import { isOffice } from '~/utils/fileUtils'
 
 const { selectedFile, visibleItems, downloadAttachment, removeFile, renameFile, isPublic, isReadonly } = useAttachmentCell()!
 
@@ -132,6 +133,11 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                 class="keep-open"
                 :src="getPossibleAttachmentSrc(item)[0]"
               />
+              <LazyCellAttachmentPreviewMiscOffice
+                v-else-if="isOffice(item.title, item.mimeType)"
+                class="keep-open"
+                :src="getPossibleAttachmentSrc(item)[0]"
+              />
               <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
                 <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
                 <div class="text-gray-800 text-sm">{{ item.title }}</div>
@@ -173,6 +179,13 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   <GeneralIcon class="text-white" icon="play" />
                 </div>
 
+                <div
+                  v-else-if="isPdf(item.title, item.mimeType)"
+                  class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
+                >
+                  <GeneralIcon class="text-white" icon="pdfFile" />
+                </div>
+
                 <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
                   <GeneralIcon class="text-white" icon="file" />
                 </div>
diff --git a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
new file mode 100644
index 0000000000..5bc2d33b95
--- /dev/null
+++ b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+const openMethod = ref<'google' | undefined>()
+</script>
+
+<template>
+  <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
+    <GeneralIcon class="w-28 h-28" icon="pdfFile" />
+
+    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
+
+    <NcButton type="secondary" @click="openMethod = 'google'">
+      <div class="flex items-center gap-1">
+        <GeneralIcon class="w-4 h-4" icon="googleDocs" />
+
+        Open with Google Docs
+      </div>
+    </NcButton>
+  </div>
+
+  <iframe
+    v-else-if="openMethod === 'google'"
+    :class="props.class"
+    :src="`https://docs.google.com/viewer?url=${src}&embedded=true`"
+    width="100%"
+    height="100%"
+    frameborder="0"
+  ></iframe>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index 46c1f6f350..94eec1e448 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -36,6 +36,37 @@ const videoExt = [
   'ts',
 ]
 
+const officeExt = [
+  'txt',
+  'css',
+  'html',
+  'php',
+  'c',
+  'cpp',
+  'h',
+  'hpp',
+  'js',
+  'doc',
+  'docx',
+  'xls',
+  'xlsx',
+  'ppt',
+  'pptx',
+  'pdf',
+  'pages',
+  'ai',
+  'psd',
+  'tiff',
+  'dxf',
+  'svg',
+  'eps',
+  'ps',
+  'ttf',
+  'xps',
+  'zip',
+  'rar',
+]
+
 const isVideo = (name: string, mimetype?: string) => {
   return videoExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('video/')
 }
@@ -48,7 +79,11 @@ const isPdf = (name: string, mimetype?: string) => {
   return name?.toLowerCase().endsWith('.pdf') || mimetype?.startsWith('application/pdf')
 }
 
-export { isImage, imageExt, isVideo, isPdf }
+const isOffice = (name: string, mimetype?: string) => {
+  return officeExt.some((e) => name?.toLowerCase().endsWith(`.${e}`))
+}
+
+export { isImage, imageExt, isVideo, isPdf, isOffice }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome

From ca0b473df1a47e2bae47b0a93d5873ed30efa400 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 12/42] fix: z-index increase when in expanded form

---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 8ec0cdba4b..03fb1bc93b 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -5,6 +5,8 @@ import { isOffice } from '~/utils/fileUtils'
 
 const { selectedFile, visibleItems, downloadAttachment, removeFile, renameFile, isPublic, isReadonly } = useAttachmentCell()!
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+
 const { isSharedForm } = useSmartsheetStoreOrThrow()
 
 const { isUIAllowed } = useRoles()
@@ -83,7 +85,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 </script>
 
 <template>
-  <GeneralOverlay v-model="selectedFile" transition :z-index="50" class="bg-black bg-opacity-90">
+  <GeneralOverlay v-model="selectedFile" transition :z-index="isExpandedFormOpen ? 1000 : 50" class="bg-black bg-opacity-90">
     <div
       v-if="selectedFile"
       ref="container"

From f430aa36c804fc942ad70f6daa7a060753c3ac02 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 13/42] fix: encode Uri

---
 .../nc-gui/components/cell/attachment/Preview/MiscOffice.vue    | 2 +-
 packages/nc-gui/components/cell/attachment/Preview/Pdf.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
index 5bc2d33b95..a760691c7f 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
@@ -27,7 +27,7 @@ const openMethod = ref<'google' | undefined>()
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
-    :src="`https://docs.google.com/viewer?url=${src}&embedded=true`"
+    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src)}&embedded=true`"
     width="100%"
     height="100%"
     frameborder="0"
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 68e5bfde6d..5b4a36386f 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -36,7 +36,7 @@ const openMethod = ref<'browser' | 'google' | undefined>()
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
-    :src="`https://docs.google.com/viewer?url=${src}&embedded=true`"
+    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src)}&embedded=true`"
     width="100%"
     height="100%"
     frameborder="0"

From 8b251ba12b6b4e882440227103e2a37db2b2ea71 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 14/42] fix: ux fixes

---
 packages/nc-gui/assets/nc-icons/globe.svg     | 12 +++
 .../components/cell/attachment/Carousel.vue   | 80 +++++++++++++------
 .../cell/attachment/Preview/MiscOffice.vue    |  2 -
 .../cell/attachment/Preview/Pdf.vue           |  6 +-
 .../cell/attachment/Preview/Video.vue         | 21 ++---
 packages/nc-gui/utils/fileUtils.ts            |  3 +-
 packages/nc-gui/utils/iconUtils.ts            |  2 +
 7 files changed, 81 insertions(+), 45 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/globe.svg

diff --git a/packages/nc-gui/assets/nc-icons/globe.svg b/packages/nc-gui/assets/nc-icons/globe.svg
new file mode 100644
index 0000000000..98f1340af7
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/globe.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="globe" clip-path="url(#clip0_184_5557)">
+<path id="Vector" d="M8.00001 14.6666C11.6819 14.6666 14.6667 11.6819 14.6667 7.99998C14.6667 4.31808 11.6819 1.33331 8.00001 1.33331C4.31811 1.33331 1.33334 4.31808 1.33334 7.99998C1.33334 11.6819 4.31811 14.6666 8.00001 14.6666Z" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M1.33334 8H14.6667" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M8.00001 1.33331C9.66753 3.15888 10.6152 5.528 10.6667 7.99998C10.6152 10.472 9.66753 12.8411 8.00001 14.6666C6.33249 12.8411 5.38484 10.472 5.33334 7.99998C5.38484 5.528 6.33249 3.15888 8.00001 1.33331V1.33331Z" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_184_5557">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 03fb1bc93b..81626027b4 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -62,6 +62,20 @@ const onSelect = () => {
   emblaThumbnailApi.value.scrollTo(newSnap)
 }
 
+const goPrev = () => {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+
+  emblaMainApi.value.scrollPrev()
+  emblaThumbnailApi.value.scrollPrev()
+}
+
+const goNext = () => {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+
+  emblaMainApi.value.scrollNext()
+  emblaThumbnailApi.value.scrollNext()
+}
+
 watchOnce(emblaMainApi, async (emblaMainApi) => {
   if (!emblaMainApi) return
 
@@ -112,10 +126,13 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         </h3>
       </div>
 
-      <NcCarousel class="!absolute inset-16 keep-open flex justify-center items-center" @init-api="(val) => (emblaMainApi = val)">
+      <NcCarousel
+        class="!absolute inset-y-16 inset-x-24 keep-open flex justify-center items-center"
+        @init-api="(val) => (emblaMainApi = val)"
+      >
         <NcCarouselContent>
           <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-            <div class="w-full h-full justify-center flex items-center">
+            <div class="justify-center w-full h-full flex items-center">
               <LazyCellAttachmentPreviewImage
                 v-if="isImage(item.title, item.mimeType)"
                 class="nc-attachment-img-wrapper"
@@ -126,7 +143,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 
               <LazyCellAttachmentPreviewVideo
                 v-else-if="isVideo(item.title, item.mimeType)"
-                class="!h-full flex items-center"
+                class="flex items-center w-full"
                 :src="getPossibleAttachmentSrc(item)[0]"
                 :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
               />
@@ -149,9 +166,24 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         </NcCarouselContent>
       </NcCarousel>
 
-      <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
+      <div
+        v-if="emblaMainApi?.canScrollPrev()"
+        class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white left-2 h-full flex items-center inset-y-0 my-0"
+        @click="goPrev"
+      >
+        <component :is="iconMap.arrowLeft" class="text-7xl" />
+      </div>
+      <div
+        v-if="emblaMainApi?.canScrollNext()"
+        class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white right-2 h-full flex items-center inset-y-0 my-0"
+        @click="goNext"
+      >
+        <component :is="iconMap.arrowRight" class="text-7xl" />
+      </div>
+
+      <div class="absolute w-full !bottom-2 max-h-18 z-30 flex items-center justify-center">
         <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
-          <NcCarouselContent class="!flex !gap-2 ml-0">
+          <NcCarouselContent class="!flex !gap-2">
             <NcCarouselItem
               v-for="(item, index) in visibleItems"
               :key="index"
@@ -198,18 +230,6 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
       </div>
 
       <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
-        <NcTooltip v-if="!isReadonly" placement="bottom">
-          <template #title> {{ $t('title.removeFile') }} </template>
-          <NcButton
-            class="!text-red-500 !hover:bg-transparent"
-            size="xsmall"
-            type="text"
-            @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
-          >
-            <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
-          </NcButton>
-        </NcTooltip>
-
         <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
           <template #title> {{ $t('title.renameFile') }} </template>
           <NcButton
@@ -222,12 +242,24 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           </NcButton>
         </NcTooltip>
 
-        <NcButton size="small" @click="downloadFile(selectedFile)">
-          <div class="flex items-center gap-2 justify-center">
+        <NcTooltip v-if="!isReadonly" placement="bottom">
+          <template #title> {{ $t('title.downloadFile') }} </template>
+          <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
             <component :is="iconMap.download" />
-            {{ $t('title.downloadFile') }}
-          </div>
-        </NcButton>
+          </NcButton>
+        </NcTooltip>
+
+        <NcTooltip v-if="!isReadonly" placement="bottom">
+          <template #title> {{ $t('title.removeFile') }} </template>
+          <NcButton
+            class="!hover:bg-transparent !text-white"
+            size="xsmall"
+            type="text"
+            @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
+          >
+            <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+          </NcButton>
+        </NcTooltip>
       </div>
       <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
         <template #entity-preview>
@@ -261,9 +293,9 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
   }
 }
 
-.vjs-fluid {
+/*.vjs-fluid {
   &:not(.vjs-audio-only-mode) {
     padding-top: 49.25% !important;
   }
-}
+}*/
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
index a760691c7f..ea6da3e269 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
@@ -13,8 +13,6 @@ const openMethod = ref<'google' | undefined>()
   <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
     <GeneralIcon class="w-28 h-28" icon="pdfFile" />
 
-    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
-
     <NcButton type="secondary" @click="openMethod = 'google'">
       <div class="flex items-center gap-1">
         <GeneralIcon class="w-4 h-4" icon="googleDocs" />
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 5b4a36386f..5b9baac32f 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -13,12 +13,10 @@ const openMethod = ref<'browser' | 'google' | undefined>()
   <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
     <GeneralIcon class="w-28 h-28" icon="pdfFile" />
 
-    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
-
     <div class="flex items-center justify-center gap-2">
-      <NcButton @click="openMethod = 'browser'">
+      <NcButton type="secondary" @click="openMethod = 'browser'">
         <div class="flex items-center gap-1">
-          <GeneralIcon icon="lock" />
+          <GeneralIcon icon="globe" />
           Open in browser
         </div>
       </NcButton>
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index a7a7b831a5..adbe9428c3 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -57,7 +57,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   preload: 'metadata',
-  aspectRatio: '16:9',
   controls: true,
   audioOnlyMode: false,
   audioPosterMode: false,
@@ -66,18 +65,13 @@ const props = withDefaults(defineProps<Props>(), {
   enableDocumentPictireInPicture: false,
   enableSmoothSeeking: true,
   fluid: true,
-  fullScreen: {
-    options: {
-      navigationUI: 'hide',
-      id: undefined,
-    },
-  },
   language: 'en',
-  liveui: false,
+  liveui: true,
   playsinline: true,
   preferFullWindow: false,
-  responsive: false,
+  responsive: true,
   restoreEl: false,
+  class: '',
 })
 
 const emit = defineEmits<Emits>()
@@ -104,14 +98,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div
-    class="w-full"
+  <video
+    ref="videoPlayer"
     :class="{
       [props.class]: props.class,
     }"
-  >
-    <video ref="videoPlayer" class="video-js h-full w-full"></video>
-  </div>
+    class="video-js h-auto w-full"
+  ></video>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index 94eec1e448..e1611e71f9 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -19,6 +19,7 @@ const videoExt = [
   'webm',
   'mpg',
   'mp2',
+  'mp3',
   'mpeg',
   'ogg',
   'mp4',
@@ -33,7 +34,6 @@ const videoExt = [
   '3g2',
   'vob',
   'ts',
-  'ts',
 ]
 
 const officeExt = [
@@ -65,6 +65,7 @@ const officeExt = [
   'xps',
   'zip',
   'rar',
+  'csv',
 ]
 
 const isVideo = (name: string, mimetype?: string) => {
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 0141fc302c..d94b2d8630 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -207,6 +207,7 @@ import NcDrag from '~icons/nc-icons/drag'
 import NcRefresh from '~icons/nc-icons/refresh'
 import NcPlay from '~icons/nc-icons/play'
 import GoogleDocs from '~icons/nc-icons/google-docs'
+import NcGlobe from '~icons/nc-icons/globe'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -644,6 +645,7 @@ export const iconMap = {
   play: NcPlay,
   googleDocs: GoogleDocs,
   pdfFile: MdiPdf,
+  globe: NcGlobe,
 }
 
 export const getMdiIcon = (type: string): any => {

From 6dfdc5916593eca1fe253a0c87f23a8767907635 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH 15/42] fix: replace videojs with plyr

---
 .../components/cell/attachment/Carousel.vue   |  4 +-
 .../cell/attachment/Preview/Video.vue         | 85 +++----------------
 packages/nc-gui/utils/objectUtils.ts          | 26 ------
 3 files changed, 16 insertions(+), 99 deletions(-)
 delete mode 100644 packages/nc-gui/utils/objectUtils.ts

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 81626027b4..f2e67fda37 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -144,8 +144,8 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
               <LazyCellAttachmentPreviewVideo
                 v-else-if="isVideo(item.title, item.mimeType)"
                 class="flex items-center w-full"
-                :src="getPossibleAttachmentSrc(item)[0]"
-                :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
+                :mime-type="item.mimeType"
+                :src="getPossibleAttachmentSrc(item)"
               />
               <LazyCellAttachmentPreviewPdf
                 v-else-if="isPdf(item.title, item.mimeType)"
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index adbe9428c3..8304068bbf 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -1,76 +1,14 @@
 <script setup lang="ts">
-import videojs from 'video.js'
-import { stripUndefinedOrNull } from '~/utils/objectUtils'
-import 'video.js/dist/video-js.css'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
 interface Props {
-  autoplay?: boolean
-  controls?: boolean
-  height?: string | number
-  loop?: boolean
-  muted?: boolean
-  poster?: string
-  preload?: 'auto' | 'metadata' | 'none'
-  width?: string | number
-  aspectRatio?: string
-  audioOnlyMode?: boolean
-  audioPosterMode?: boolean
-  autoSetup?: boolean
-  disablePictureInPicture?: boolean
-  enableDocumentPictireInPicture?: boolean
-  enableSmoothSeeking?: boolean
-  fluid?: boolean
-  src?: string
-  fullScreen?: {
-    options?: {
-      navigationUI?: 'hide' | 'show'
-      id?: string
-    }
-  }
-  inactivityTimeout?: number
-  language?: string
-  liveui?: boolean
-  notSupportedMessage?: string
-  playbackRates?: number[]
-  playsinline?: boolean
-  plugins?: Record<string, any>
-  preferFullWindow?: boolean
-  responsive?: boolean
-  restoreEl?: Element | boolean
-  skipButtons?: {
-    forward?: number
-    back?: number
-  }
-  sources?: {
-    src: string
-    type: string
-  }[]
-  suppressNotSupportedError?: boolean
-  techOrder?: string[]
-  userActions?: {
-    click?: (event: Event) => void | boolean
-    doubleClick?: (event: Event) => void | boolean
-    hotkeys?: (event: Event) => void | boolean | Record<string, (event: Event) => void>
-  }
+  src?: string[]
+  mimeType?: string
   class?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  preload: 'metadata',
-  controls: true,
-  audioOnlyMode: false,
-  audioPosterMode: false,
-  autoSetup: true,
-  disablePictureInPicture: false,
-  enableDocumentPictireInPicture: false,
-  enableSmoothSeeking: true,
-  fluid: true,
-  language: 'en',
-  liveui: true,
-  playsinline: true,
-  preferFullWindow: false,
-  responsive: true,
-  restoreEl: false,
   class: '',
 })
 
@@ -80,19 +18,19 @@ interface Emits {
   (event: 'init', player: any): void
 }
 
-const videoPlayer = ref<Element>()
+const videoPlayer = ref<HTMLElement>()
 
 const player = ref()
 
 onMounted(() => {
   if (!videoPlayer.value) return
-  player.value = videojs(videoPlayer.value, stripUndefinedOrNull(props))
+  player.value = new Plyr(videoPlayer.value)
   emit('init', player.value)
 })
 
 onBeforeUnmount(() => {
   if (player.value) {
-    player.value.dispose()
+    player.value.destroy()
   }
 })
 </script>
@@ -100,11 +38,16 @@ onBeforeUnmount(() => {
 <template>
   <video
     ref="videoPlayer"
+    controls
+    crossorigin
+    playsinline
     :class="{
       [props.class]: props.class,
     }"
-    class="video-js h-auto w-full"
-  ></video>
+    class="videoplayer h-auto w-full"
+  >
+    <source v-for="(src, id) in props.src" :key="id" :src="src" :type="mimeType" />
+  </video>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/packages/nc-gui/utils/objectUtils.ts b/packages/nc-gui/utils/objectUtils.ts
deleted file mode 100644
index 6eb34de220..0000000000
--- a/packages/nc-gui/utils/objectUtils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-type NonUndefined<T> = T extends undefined ? never : T
-type NonNull<T> = T extends null ? never : T
-type NonNullableObject<T> = {
-  [K in keyof T]: NonUndefined<NonNull<T[K]>>
-}
-
-type Prettify<T> = {
-  [K in keyof T]: T[K]
-} & {}
-
-export const stripUndefinedOrNull = <T>(obj: T): Prettify<NonNullableObject<T>> => {
-  const strip = (input: unknown): unknown => {
-    return Array.isArray(input)
-      ? input.map(strip)
-      : input !== null && typeof input === 'object'
-      ? Object.entries(input)
-          .filter(([, value]) => value !== undefined && value !== null)
-          .reduce((acc, [key, value]) => {
-            acc[key as keyof typeof acc] = strip(value)
-            return acc
-          }, {} as Record<string, unknown>)
-      : input
-  }
-
-  return strip(obj) as Prettify<NonNullableObject<T>>
-}

From ec05ce816f9391cbb07b4c68efb66052c5a13ae1 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 16/42] feat: add fallback mechanism,

---
 .../components/cell/attachment/Carousel.vue   | 11 +++------
 .../cell/attachment/Preview/MiscOffice.vue    | 15 ++++++++++--
 .../cell/attachment/Preview/Pdf.vue           | 24 ++++++++++++++++---
 .../cell/attachment/Preview/Video.vue         |  8 +++++--
 packages/nc-gui/utils/fileUtils.ts            |  6 ++++-
 5 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index f2e67fda37..5b1239a64a 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -145,17 +145,18 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                 v-else-if="isVideo(item.title, item.mimeType)"
                 class="flex items-center w-full"
                 :mime-type="item.mimeType"
+                :title="item.title"
                 :src="getPossibleAttachmentSrc(item)"
               />
               <LazyCellAttachmentPreviewPdf
                 v-else-if="isPdf(item.title, item.mimeType)"
                 class="keep-open"
-                :src="getPossibleAttachmentSrc(item)[0]"
+                :src="getPossibleAttachmentSrc(item)"
               />
               <LazyCellAttachmentPreviewMiscOffice
                 v-else-if="isOffice(item.title, item.mimeType)"
                 class="keep-open"
-                :src="getPossibleAttachmentSrc(item)[0]"
+                :src="getPossibleAttachmentSrc(item)"
               />
               <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
                 <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
@@ -292,10 +293,4 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
     @apply items-center h-full w-full;
   }
 }
-
-/*.vjs-fluid {
-  &:not(.vjs-audio-only-mode) {
-    padding-top: 49.25% !important;
-  }
-}*/
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
index ea6da3e269..d7ff14e017 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
 interface Props {
-  src: string
+  src: string[]
   class?: string
 }
 
 const props = defineProps<Props>()
 
+const currentIndex = ref(0)
+
+const handleError = () => {
+  if (currentIndex.value < props.src.length - 1) {
+    currentIndex.value = currentIndex.value + 1
+  } else {
+    currentIndex.value = -1
+  }
+}
+
 const openMethod = ref<'google' | undefined>()
 </script>
 
@@ -25,10 +35,11 @@ const openMethod = ref<'google' | undefined>()
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
-    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src)}&embedded=true`"
+    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src[currentIndex])}&embedded=true`"
     width="100%"
     height="100%"
     frameborder="0"
+    @error="handleError"
   ></iframe>
 </template>
 
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 5b9baac32f..8a6c5eda1f 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
 interface Props {
-  src: string
+  src: string[]
   class?: string
 }
 
 const props = defineProps<Props>()
 
+const currentIndex = ref(0)
+
+const handleError = () => {
+  if (currentIndex.value < props.src.length - 1) {
+    currentIndex.value = currentIndex.value + 1
+  } else {
+    currentIndex.value = -1
+  }
+}
+
 const openMethod = ref<'browser' | 'google' | undefined>()
 </script>
 
@@ -30,14 +40,22 @@ const openMethod = ref<'browser' | 'google' | undefined>()
     </div>
   </div>
 
-  <iframe v-if="openMethod === 'browser'" :class="props.class" :src="props.src" width="100%" height="100%"></iframe>
+  <iframe
+    v-if="openMethod === 'browser'"
+    :class="props.class"
+    :src="src[currentIndex]"
+    width="100%"
+    height="100%"
+    @error="handleError"
+  ></iframe>
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
-    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src)}&embedded=true`"
+    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src[currentIndex])}&embedded=true`"
     width="100%"
     height="100%"
     frameborder="0"
+    @error="handleError"
   ></iframe>
 </template>
 
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index 8304068bbf..845d4e7a1d 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -6,6 +6,7 @@ interface Props {
   src?: string[]
   mimeType?: string
   class?: string
+  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,7 +25,9 @@ const player = ref()
 
 onMounted(() => {
   if (!videoPlayer.value) return
-  player.value = new Plyr(videoPlayer.value)
+  player.value = new Plyr(videoPlayer.value, {
+    previewThumbnails: {},
+  })
   emit('init', player.value)
 })
 
@@ -42,9 +45,10 @@ onBeforeUnmount(() => {
     crossorigin
     playsinline
     :class="{
+      '!w-128 !h-72': isAudio(title ?? '', mimeType),
       [props.class]: props.class,
     }"
-    class="videoplayer h-auto w-full"
+    class="videoplayer w-full"
   >
     <source v-for="(src, id) in props.src" :key="id" :src="src" :type="mimeType" />
   </video>
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index e1611e71f9..005a54bdf7 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -68,6 +68,10 @@ const officeExt = [
   'csv',
 ]
 
+const isAudio = (name: string, mimetype?: string) => {
+  return name?.toLowerCase().endsWith('.mp3') || mimetype?.startsWith('audio/')
+}
+
 const isVideo = (name: string, mimetype?: string) => {
   return videoExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('video/')
 }
@@ -84,7 +88,7 @@ const isOffice = (name: string, mimetype?: string) => {
   return officeExt.some((e) => name?.toLowerCase().endsWith(`.${e}`))
 }
 
-export { isImage, imageExt, isVideo, isPdf, isOffice }
+export { isImage, imageExt, isVideo, isPdf, isOffice, isAudio }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome

From fa2195b99334f780b6ba4db22ed9d9e8533dcdd1 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 17/42] fix: opacity not updating

---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 5b1239a64a..4808641e07 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -132,7 +132,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
       >
         <NcCarouselContent>
           <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-            <div class="justify-center w-full h-full flex items-center">
+            <div v-if="selectedIndex === index" class="justify-center w-full h-full flex items-center">
               <LazyCellAttachmentPreviewImage
                 v-if="isImage(item.title, item.mimeType)"
                 class="nc-attachment-img-wrapper"
@@ -189,11 +189,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
               v-for="(item, index) in visibleItems"
               :key="index"
               :class="{
-                'opacity-100': index === selectedIndex,
-                '!basis-1/2': visibleItems.length === 2,
-                '!basis-1/3': visibleItems.length === 3,
-                '!basis-1': visibleItems.length === 1,
-                '!basis-1/4': visibleItems.length === 4,
+                '!opacity-100': index === selectedIndex,
                 '!basis-1/8': visibleItems.length > 4,
               }"
               class="px-2 keep-open opacity-50 cursor-pointer"

From 5969da2f41e208fa576f0fd2a6d6b95fed2228f2 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 18/42] feat: load comments from attachmnets fix: comments
 refactor from expandedformstore

---
 .../components/cell/attachment/Carousel.vue   | 331 +++++----
 .../components/cell/attachment/index.vue      |   8 +-
 .../smartsheet/expanded-form/Comments.vue     | 689 ------------------
 .../expanded-form/Sidebar/Audits.vue          | 145 ++++
 .../expanded-form/Sidebar/Comments.vue        | 488 +++++++++++++
 .../expanded-form/Sidebar/index.vue           |  80 ++
 .../smartsheet/expanded-form/index.vue        |   4 +-
 .../composables/useExpandedFormStore.ts       | 197 +----
 packages/nc-gui/composables/useRowComments.ts | 235 ++++++
 9 files changed, 1141 insertions(+), 1036 deletions(-)
 delete mode 100644 packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
 create mode 100644 packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
 create mode 100644 packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Comments.vue
 create mode 100644 packages/nc-gui/components/smartsheet/expanded-form/Sidebar/index.vue
 create mode 100644 packages/nc-gui/composables/useRowComments.ts

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 4808641e07..9921a484a4 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -9,6 +9,8 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()
 
+const openComments = ref(false)
+
 const { isUIAllowed } = useRoles()
 
 const container = ref<HTMLElement | null>(null)
@@ -96,183 +98,210 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
     }
   })
 })
+
+const toggleComment = () => {
+  openComments.value = !openComments.value
+}
+
+onMounted(() => {
+  if (!isPublic.value && !isExpandedFormOpen.value && isUIAllowed('commentList')) {
+    const { loadComments } = useRowCommentsOrThrow()
+    loadComments()
+  }
+})
 </script>
 
 <template>
   <GeneralOverlay v-model="selectedFile" transition :z-index="isExpandedFormOpen ? 1000 : 50" class="bg-black bg-opacity-90">
-    <div
-      v-if="selectedFile"
-      ref="container"
-      class="flex w-full overflow-hidden justify-center text-center relative h-screen items-center"
-    >
-      <NcButton
-        class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
-        size="xsmall"
-        type="text"
-        @click.stop="selectedFile = false"
-      >
-        <component :is="iconMap.close" class="text-white" />
-      </NcButton>
-
+    <div class="flex w-full h-full">
       <div
-        class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
+        v-if="selectedFile"
+        ref="container"
+        class="flex w-full overflow-hidden justify-center text-center relative h-screen items-center"
       >
-        <h3
-          style="width: max-content"
-          class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
-          @click.stop="downloadAttachment(selectedFile)"
+        <NcButton
+          class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
+          size="xsmall"
+          type="text"
+          @click.stop="selectedFile = false"
         >
-          {{ selectedFile && selectedFile.title }}
-        </h3>
-      </div>
+          <component :is="iconMap.close" class="text-white" />
+        </NcButton>
 
-      <NcCarousel
-        class="!absolute inset-y-16 inset-x-24 keep-open flex justify-center items-center"
-        @init-api="(val) => (emblaMainApi = val)"
-      >
-        <NcCarouselContent>
-          <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-            <div v-if="selectedIndex === index" class="justify-center w-full h-full flex items-center">
-              <LazyCellAttachmentPreviewImage
-                v-if="isImage(item.title, item.mimeType)"
-                class="nc-attachment-img-wrapper"
-                object-fit="contain"
-                :alt="item.title"
-                :srcs="getPossibleAttachmentSrc(item)"
-              />
-
-              <LazyCellAttachmentPreviewVideo
-                v-else-if="isVideo(item.title, item.mimeType)"
-                class="flex items-center w-full"
-                :mime-type="item.mimeType"
-                :title="item.title"
-                :src="getPossibleAttachmentSrc(item)"
-              />
-              <LazyCellAttachmentPreviewPdf
-                v-else-if="isPdf(item.title, item.mimeType)"
-                class="keep-open"
-                :src="getPossibleAttachmentSrc(item)"
-              />
-              <LazyCellAttachmentPreviewMiscOffice
-                v-else-if="isOffice(item.title, item.mimeType)"
-                class="keep-open"
-                :src="getPossibleAttachmentSrc(item)"
-              />
-              <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
-                <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
-                <div class="text-gray-800 text-sm">{{ item.title }}</div>
-              </div>
-            </div>
-          </NcCarouselItem>
-        </NcCarouselContent>
-      </NcCarousel>
-
-      <div
-        v-if="emblaMainApi?.canScrollPrev()"
-        class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white left-2 h-full flex items-center inset-y-0 my-0"
-        @click="goPrev"
-      >
-        <component :is="iconMap.arrowLeft" class="text-7xl" />
-      </div>
-      <div
-        v-if="emblaMainApi?.canScrollNext()"
-        class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white right-2 h-full flex items-center inset-y-0 my-0"
-        @click="goNext"
-      >
-        <component :is="iconMap.arrowRight" class="text-7xl" />
-      </div>
+        <div
+          class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
+        >
+          <h3
+            style="width: max-content"
+            class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
+            @click.stop="downloadAttachment(selectedFile)"
+          >
+            {{ selectedFile && selectedFile.title }}
+          </h3>
+        </div>
 
-      <div class="absolute w-full !bottom-2 max-h-18 z-30 flex items-center justify-center">
-        <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
-          <NcCarouselContent class="!flex !gap-2">
-            <NcCarouselItem
-              v-for="(item, index) in visibleItems"
-              :key="index"
-              :class="{
-                '!opacity-100': index === selectedIndex,
-                '!basis-1/8': visibleItems.length > 4,
-              }"
-              class="px-2 keep-open opacity-50 cursor-pointer"
-              @click="onThumbClick(index)"
-            >
-              <div class="flex items-center justify-center">
+        <NcCarousel
+          class="!absolute inset-y-16 inset-x-24 keep-open flex justify-center items-center"
+          @init-api="(val) => (emblaMainApi = val)"
+        >
+          <NcCarouselContent>
+            <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
+              <div v-if="selectedIndex === index" class="justify-center w-full h-full flex items-center">
                 <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
-                  class="nc-attachment-img-wrapper h-12"
+                  class="nc-attachment-img-wrapper"
                   object-fit="contain"
                   :alt="item.title"
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
-                <div
-                  v-else-if="isVideo(item.title, item.mimeType)"
-                  class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
-                >
-                  <GeneralIcon class="text-white" icon="play" />
-                </div>
 
-                <div
+                <LazyCellAttachmentPreviewVideo
+                  v-else-if="isVideo(item.title, item.mimeType)"
+                  class="flex items-center w-full"
+                  :mime-type="item.mimeType"
+                  :title="item.title"
+                  :src="getPossibleAttachmentSrc(item)"
+                />
+                <LazyCellAttachmentPreviewPdf
                   v-else-if="isPdf(item.title, item.mimeType)"
-                  class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
-                >
-                  <GeneralIcon class="text-white" icon="pdfFile" />
-                </div>
-
-                <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
-                  <GeneralIcon class="text-white" icon="file" />
+                  class="keep-open"
+                  :src="getPossibleAttachmentSrc(item)"
+                />
+                <LazyCellAttachmentPreviewMiscOffice
+                  v-else-if="isOffice(item.title, item.mimeType)"
+                  class="keep-open"
+                  :src="getPossibleAttachmentSrc(item)"
+                />
+                <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
+                  <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
+                  <div class="text-gray-800 text-sm">{{ item.title }}</div>
                 </div>
               </div>
             </NcCarouselItem>
           </NcCarouselContent>
         </NcCarousel>
-      </div>
 
-      <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
-        <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
-          <template #title> {{ $t('title.renameFile') }} </template>
-          <NcButton
-            size="xsmall"
-            class="nc-attachment-rename !hover:bg-transparent !text-white"
-            type="text"
-            @click="renameFile(selectedFile, selectedIndex, true)"
-          >
-            <component :is="iconMap.rename" />
-          </NcButton>
-        </NcTooltip>
-
-        <NcTooltip v-if="!isReadonly" placement="bottom">
-          <template #title> {{ $t('title.downloadFile') }} </template>
-          <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
-            <component :is="iconMap.download" />
-          </NcButton>
-        </NcTooltip>
-
-        <NcTooltip v-if="!isReadonly" placement="bottom">
-          <template #title> {{ $t('title.removeFile') }} </template>
-          <NcButton
-            class="!hover:bg-transparent !text-white"
-            size="xsmall"
-            type="text"
-            @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
-          >
-            <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+        <div
+          v-if="emblaMainApi?.canScrollPrev()"
+          class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white left-2 h-full flex items-center inset-y-0 my-0"
+          @click="goPrev"
+        >
+          <component :is="iconMap.arrowLeft" class="text-7xl" />
+        </div>
+        <div
+          v-if="emblaMainApi?.canScrollNext()"
+          class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white right-2 h-full flex items-center inset-y-0 my-0"
+          @click="goNext"
+        >
+          <component :is="iconMap.arrowRight" class="text-7xl" />
+        </div>
+
+        <div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2">
+          <NcButton class="!hover:bg-transparent" type="text" size="small" @click="toggleComment">
+            <div class="flex gap-1 text-white justify-center items-center">
+              Comments
+              <GeneralIcon icon="comment" />
+            </div>
           </NcButton>
-        </NcTooltip>
-      </div>
-      <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
-        <template #entity-preview>
-          <span>
-            <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-              <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
-              <div
-                class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
-                :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+        </div>
+
+        <div class="text-white absolute right-2 top-2 cursor-pointer"></div>
+
+        <div class="absolute w-full !bottom-2 max-h-18 z-30 flex items-center justify-center">
+          <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
+            <NcCarouselContent class="!flex !gap-2">
+              <NcCarouselItem
+                v-for="(item, index) in visibleItems"
+                :key="index"
+                :class="{
+                  '!opacity-100': index === selectedIndex,
+                  '!basis-1/8': visibleItems.length > 4,
+                }"
+                class="px-2 keep-open opacity-50 cursor-pointer"
+                @click="onThumbClick(index)"
               >
-                {{ filetoDelete.title }}
+                <div class="flex items-center justify-center">
+                  <LazyCellAttachmentPreviewImage
+                    v-if="isImage(item.title, item.mimeType)"
+                    class="nc-attachment-img-wrapper h-12"
+                    object-fit="contain"
+                    :alt="item.title"
+                    :srcs="getPossibleAttachmentSrc(item)"
+                  />
+                  <div
+                    v-else-if="isVideo(item.title, item.mimeType)"
+                    class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
+                  >
+                    <GeneralIcon class="text-white" icon="play" />
+                  </div>
+
+                  <div
+                    v-else-if="isPdf(item.title, item.mimeType)"
+                    class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
+                  >
+                    <GeneralIcon class="text-white" icon="pdfFile" />
+                  </div>
+
+                  <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
+                    <GeneralIcon class="text-white" icon="file" />
+                  </div>
+                </div>
+              </NcCarouselItem>
+            </NcCarouselContent>
+          </NcCarousel>
+        </div>
+
+        <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
+          <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
+            <template #title> {{ $t('title.renameFile') }} </template>
+            <NcButton
+              size="xsmall"
+              class="nc-attachment-rename !hover:bg-transparent !text-white"
+              type="text"
+              @click="renameFile(selectedFile, selectedIndex, true)"
+            >
+              <component :is="iconMap.rename" />
+            </NcButton>
+          </NcTooltip>
+
+          <NcTooltip v-if="!isReadonly" placement="bottom">
+            <template #title> {{ $t('title.downloadFile') }} </template>
+            <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
+              <component :is="iconMap.download" />
+            </NcButton>
+          </NcTooltip>
+
+          <NcTooltip v-if="!isReadonly" placement="bottom">
+            <template #title> {{ $t('title.removeFile') }} </template>
+            <NcButton
+              class="!hover:bg-transparent !text-white"
+              size="xsmall"
+              type="text"
+              @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
+            >
+              <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+            </NcButton>
+          </NcTooltip>
+        </div>
+        <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
+          <template #entity-preview>
+            <span>
+              <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
+                <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
+                <div
+                  class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
+                  :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+                >
+                  {{ filetoDelete.title }}
+                </div>
               </div>
-            </div>
-          </span>
-        </template>
-      </GeneralDeleteModal>
+            </span>
+          </template>
+        </GeneralDeleteModal>
+      </div>
+      <div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88">
+        <LazySmartsheetExpandedFormSidebarComments />
+      </div>
     </div>
   </GeneralOverlay>
 </template>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index fa49ba9ae1..cb4a1e8f0b 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -61,7 +61,13 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
 
 const active = inject(ActiveCellInj, ref(false))
 
-const { state: rowState } = useSmartsheetRowStoreOrThrow()
+const { state: rowState, row } = useSmartsheetRowStoreOrThrow()
+
+const meta = inject(MetaInj, ref())
+
+if (!isPublic.value && !isForm.value && meta.value) {
+  useProvideRowComments(meta, row)
+}
 
 const { isOverDropZone } = useDropZone(currentCellRef as any, onDrop)
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
deleted file mode 100644
index e458428b3f..0000000000
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ /dev/null
@@ -1,689 +0,0 @@
-<script setup lang="ts">
-import { type AuditType, type CommentType, ProjectRoles } from 'nocodb-sdk'
-
-const props = defineProps<{
-  loading: boolean
-  primaryKey: string | null
-}>()
-
-const {
-  loadComments,
-  deleteComment,
-  comments,
-  resolveComment,
-  audits,
-  isAuditLoading,
-  saveComment: _saveComment,
-  updateComment,
-} = useExpandedFormStoreOrThrow()
-
-const { isExpandedFormCommentMode } = storeToRefs(useConfigStore())
-
-const commentsWrapperEl = ref<HTMLDivElement>()
-
-const commentInputRef = ref<any>()
-
-const comment = ref('')
-
-const { copy } = useClipboard()
-
-const route = useRoute()
-
-const { dashboardUrl } = useDashboard()
-
-const { user, appInfo } = useGlobal()
-
-const basesStore = useBases()
-
-const { basesUser } = storeToRefs(basesStore)
-
-const meta = inject(MetaInj, ref())
-
-const baseUsers = computed(() => (meta.value?.base_id ? basesUser.value.get(meta.value?.base_id) || [] : []))
-
-const isExpandedFormLoading = computed(() => props.loading)
-
-const tab = ref<'comments' | 'audits'>('comments')
-
-const { isUIAllowed } = useRoles()
-
-const router = useRouter()
-
-const hasEditPermission = computed(() => isUIAllowed('commentEdit'))
-
-const editCommentValue = ref<CommentType>()
-
-const isEditing = ref<boolean>(false)
-
-const isCommentMode = ref(false)
-
-const hoveredCommentId = ref<null | string>(null)
-
-async function onEditComment() {
-  if (!isEditing.value || !editCommentValue.value?.comment) return
-
-  while (editCommentValue.value.comment.endsWith('<br />') || editCommentValue.value.comment.endsWith('\n')) {
-    if (editCommentValue.value.comment.endsWith('<br />')) {
-      editCommentValue.value.comment = editCommentValue.value.comment.slice(0, -6)
-    } else {
-      editCommentValue.value.comment = editCommentValue.value.comment.slice(0, -2)
-    }
-  }
-
-  isCommentMode.value = true
-
-  const tempCom = {
-    ...editCommentValue.value,
-  }
-
-  isEditing.value = false
-  editCommentValue.value = undefined
-  await updateComment(tempCom.id!, {
-    comment: tempCom.comment,
-  })
-  loadComments()
-}
-
-function onCancel(e: KeyboardEvent) {
-  if (!isEditing.value) return
-  e.preventDefault()
-  e.stopPropagation()
-  editCommentValue.value = undefined
-  loadComments()
-  isEditing.value = false
-  editCommentValue.value = undefined
-}
-
-function editComment(comment: CommentType) {
-  editCommentValue.value = {
-    ...comment,
-  }
-  isEditing.value = true
-  nextTick(() => {
-    scrollToComment(comment.id)
-  })
-}
-
-const value = computed({
-  get() {
-    return editCommentValue.value?.comment || ''
-  },
-  set(val) {
-    if (!editCommentValue.value) return
-    editCommentValue.value.comment = val
-  },
-})
-
-function scrollComments() {
-  if (commentsWrapperEl.value) {
-    commentsWrapperEl.value.scrollTo({
-      top: commentsWrapperEl.value.scrollHeight,
-      behavior: 'smooth',
-    })
-  }
-}
-
-const saveComment = async () => {
-  if (!comment.value.trim()) return
-
-  while (comment.value.endsWith('<br />') || comment.value.endsWith('\n')) {
-    if (comment.value.endsWith('<br />')) {
-      comment.value = comment.value.slice(0, -6)
-    } else {
-      comment.value = comment.value.slice(0, -2)
-    }
-  }
-
-  isCommentMode.value = true
-
-  // Optimistic Insert
-  comments.value = [
-    ...comments.value,
-    {
-      id: `temp-${new Date().getTime()}`,
-      comment: comment.value,
-      created_at: new Date().toISOString(),
-      created_by: user.value?.id,
-      created_by_email: user.value?.email,
-      created_display_name: user.value?.display_name ?? '',
-    },
-  ]
-
-  const tempCom = comment.value
-  comment.value = ''
-
-  commentInputRef?.value?.setEditorContent('', true)
-  await nextTick(() => {
-    scrollComments()
-  })
-
-  try {
-    await _saveComment(tempCom)
-    await nextTick(() => {
-      isExpandedFormCommentMode.value = true
-    })
-    scrollComments()
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const copyComment = async (comment: CommentType) => {
-  await copy(
-    encodeURI(
-      `${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.baseId}/${meta.value?.id}?rowId=${props.primaryKey}&commentId=${comment.id}`,
-    ),
-  )
-}
-
-function scrollToComment(commentId: string) {
-  const commentEl = document.querySelector(`.${commentId}`)
-  if (commentEl) {
-    commentEl.scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-    })
-  }
-}
-
-function scrollToAudit(auditId?: string) {
-  if (!auditId) return
-
-  const auditEl = commentsWrapperEl.value?.querySelector(`.nc-audit-item.${auditId}`)
-  if (auditEl) {
-    auditEl.scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-    })
-  }
-}
-
-watch(commentsWrapperEl, () => {
-  setTimeout(() => {
-    nextTick(() => {
-      const query = router.currentRoute.value.query
-      const commentId = query.commentId
-      if (commentId) {
-        router.push({
-          query: {
-            rowId: query.rowId,
-          },
-        })
-        scrollToComment(commentId as string)
-
-        hoveredCommentId.value = commentId as string
-
-        onClickOutside(document.querySelector(`.${hoveredCommentId.value}`)! as HTMLDivElement, handleResetHoverEffect)
-      } else {
-        scrollComments()
-      }
-    })
-  }, 100)
-})
-
-const createdBy = (
-  comment: CommentType & {
-    created_display_name?: string
-  },
-) => {
-  if (comment.created_by === user.value?.id) {
-    return 'You'
-  } else if (comment.created_display_name?.trim()) {
-    return comment.created_display_name || 'Shared source'
-  } else if (comment.created_by_email) {
-    return comment.created_by_email
-  } else {
-    return 'Shared source'
-  }
-}
-
-const createdByAudit = (
-  comment: AuditType & {
-    created_display_name?: string
-  },
-) => {
-  if (comment.user === user.value?.email) {
-    return 'You'
-  } else if (comment.created_display_name?.trim()) {
-    return comment.created_display_name || 'Shared source'
-  } else if (comment.user) {
-    return comment.user
-  } else {
-    return 'Shared source'
-  }
-}
-
-const getUserRole = (email: string) => {
-  const user = baseUsers.value.find((user) => user.email === email)
-  if (!user) return ProjectRoles.NO_ACCESS
-
-  return user.roles || ProjectRoles.NO_ACCESS
-}
-
-const editedAt = (comment: CommentType) => {
-  if (comment.updated_at !== comment.created_at && comment.updated_at) {
-    const str = timeAgo(comment.updated_at).replace(' ', '_')
-    return `[(edited)](a~~~###~~~Edited_${str}) `
-  }
-  return ''
-}
-
-function handleResetHoverEffect() {
-  if (!hoveredCommentId.value) return
-
-  hoveredCommentId.value = null
-}
-
-watch(
-  () => audits.value.length,
-  (auditCount) => {
-    nextTick(() => {
-      setTimeout(() => {
-        scrollToAudit(audits.value[auditCount - 1]?.id)
-      }, 100)
-    })
-  },
-)
-</script>
-
-<template>
-  <div class="flex flex-col bg-white !h-full w-full rounded-br-2xl overflow-hidden">
-    <NcTabs v-model:activeKey="tab" class="h-full">
-      <a-tab-pane key="comments" class="w-full h-full">
-        <template #tab>
-          <div v-e="['c:row-expand:comment']" class="flex items-center gap-2">
-            <GeneralIcon icon="messageCircle" class="w-4 h-4" />
-            <span class="<lg:hidden"> Comments </span>
-          </div>
-        </template>
-        <div
-          class="h-full"
-          :class="{
-            'pb-1': !hasEditPermission,
-          }"
-        >
-          <div v-if="isExpandedFormLoading" class="flex flex-col items-center justify-center w-full h-full">
-            <GeneralLoader size="xlarge" />
-          </div>
-          <div v-else class="flex flex-col h-full">
-            <div v-if="comments.length === 0" class="flex flex-col my-1 text-center justify-center h-full nc-scrollbar-thin">
-              <div class="text-center text-3xl text-gray-700">
-                <GeneralIcon icon="commentHere" />
-              </div>
-              <div class="font-medium text-center my-6 text-gray-500">
-                {{ hasEditPermission ? $t('activity.startCommenting') : $t('activity.noCommentsYet') }}
-              </div>
-            </div>
-            <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
-              <div
-                v-for="commentItem of comments"
-                :key="commentItem.id"
-                :class="`${commentItem.id}`"
-                class="nc-comment-item"
-                @mouseover="handleResetHoverEffect"
-              >
-                <div
-                  :class="{
-                  'hover:bg-gray-100': editCommentValue?.id !== commentItem!.id,
-                  'nc-hovered-comment bg-gray-100': hoveredCommentId === commentItem!.id
-                }"
-                  class="group gap-3 overflow-hidden px-3 py-2 transition-colors"
-                >
-                  <div class="flex items-start justify-between">
-                    <div
-                      class="flex items-start gap-3 flex-1"
-                      :class="{
-                        'w-[calc(100%)] group-hover:w-[calc(100%_-_50px)]': !appInfo.ee,
-                        'w-[calc(100%_-_44px)] group-hover:w-[calc(100%_-_72px)]': appInfo.ee && commentItem.resolved_by,
-                        'w-[calc(100%_-_16px)] group-hover:w-[calc(100%_-_72px)]':
-                          appInfo.ee && !commentItem.resolved_by && hasEditPermission,
-                        'w-[calc(100%_-_16px)] group-hover:w-[calc(100%_-_44px)]':
-                          appInfo.ee && !commentItem.resolved_by && !hasEditPermission,
-                      }"
-                    >
-                      <GeneralUserIcon
-                        :email="commentItem.created_by_email"
-                        :name="commentItem.created_display_name"
-                        class="mt-0.5"
-                        size="medium"
-                      />
-                      <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
-                        <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
-                          <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
-                            {{ createdBy(commentItem) }}
-                          </div>
-
-                          <template #overlay>
-                            <div class="bg-white rounded-lg">
-                              <div class="flex items-center gap-4 py-3 px-2">
-                                <GeneralUserIcon
-                                  class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
-                                  :name="commentItem.created_display_name"
-                                  :email="commentItem.created_by_email"
-                                />
-                                <div class="flex flex-col">
-                                  <div class="font-semibold text-gray-800">
-                                    {{ createdBy(commentItem) }}
-                                  </div>
-                                  <div class="text-xs text-gray-600">
-                                    {{ commentItem.created_by_email }}
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                v-if="isUIAllowed('dataEdit')"
-                                class="px-3 rounded-b-lg !text-[13px] items-center text-gray-600 flex gap-1 bg-gray-100 py-1.5"
-                              >
-                                Has <RolesBadge size="sm" :border="false" :role="getUserRole(commentItem.created_by_email!)" />
-                                role in base
-                              </div>
-                            </div>
-                          </template>
-                        </NcDropdown>
-                        <div class="text-xs text-gray-500">
-                          {{ timeAgo(commentItem.created_at!) }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="flex items-center">
-                      <NcDropdown
-                        v-if="!editCommentValue"
-                        class="nc-comment-more-actions !hidden !group-hover:block"
-                        overlay-class-name="!min-w-[160px]"
-                        placement="bottomRight"
-                      >
-                        <NcButton
-                          class="nc-expand-form-more-actions !hover:bg-gray-200 !w-7 !h-7 !bg-transparent"
-                          size="xsmall"
-                          type="text"
-                        >
-                          <GeneralIcon class="text-md" icon="threeDotVertical" />
-                        </NcButton>
-                        <template #overlay>
-                          <NcMenu>
-                            <NcMenuItem
-                              v-if="user && commentItem.created_by_email === user.email && hasEditPermission"
-                              v-e="['c:comment-expand:comment:edit']"
-                              class="text-gray-700"
-                              @click="editComment(commentItem)"
-                            >
-                              <div class="flex gap-2 items-center">
-                                <component :is="iconMap.rename" class="cursor-pointer" />
-                                {{ $t('general.edit') }}
-                              </div>
-                            </NcMenuItem>
-                            <NcMenuItem
-                              v-e="['c:comment-expand:comment:copy']"
-                              class="text-gray-700"
-                              @click="copyComment(commentItem)"
-                            >
-                              <div class="flex gap-2 items-center">
-                                <component :is="iconMap.copy" class="cursor-pointer" />
-                                {{ $t('general.copy') }} URL
-                              </div>
-                            </NcMenuItem>
-                            <template v-if="user && commentItem.created_by_email === user.email && hasEditPermission">
-                              <NcDivider />
-                              <NcMenuItem
-                                v-e="['c:row-expand:comment:delete']"
-                                class="!text-red-500 !hover:bg-red-50"
-                                @click="deleteComment(commentItem.id!)"
-                              >
-                                <div class="flex gap-2 items-center">
-                                  <component :is="iconMap.delete" class="cursor-pointer" />
-                                  {{ $t('general.delete') }}
-                                </div>
-                              </NcMenuItem>
-                            </template>
-                          </NcMenu>
-                        </template>
-                      </NcDropdown>
-                      <div v-if="appInfo.ee">
-                        <NcTooltip v-if="!commentItem.resolved_by && hasEditPermission">
-                          <NcButton
-                            class="nc-resolve-comment-btn !w-7 !h-7 !bg-transparent !hover:bg-gray-200 !hidden !group-hover:block"
-                            size="xsmall"
-                            type="text"
-                            @click="resolveComment(commentItem.id!)"
-                          >
-                            <GeneralIcon class="text-md" icon="checkCircle" />
-                          </NcButton>
-
-                          <template #title>Click to resolve </template>
-                        </NcTooltip>
-
-                        <NcTooltip v-else-if="commentItem.resolved_by">
-                          <template #title>{{ `Resolved by ${commentItem.resolved_display_name}` }}</template>
-                          <NcButton
-                            class="!h-7 !w-7 !bg-transparent !hover:bg-gray-200 text-semibold"
-                            size="xsmall"
-                            type="text"
-                            @click="resolveComment(commentItem.id!)"
-                          >
-                            <GeneralIcon class="text-md rounded-full bg-[#17803D] text-white" icon="checkFill" />
-                          </NcButton>
-                        </NcTooltip>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    :class="{
-                      'mt-3': commentItem.id === editCommentValue?.id,
-                    }"
-                    class="flex-1 flex flex-col gap-1 max-w-[calc(100%)]"
-                  >
-                    <SmartsheetExpandedFormRichComment
-                      v-if="commentItem.id === editCommentValue?.id && hasEditPermission"
-                      v-model:value="value"
-                      autofocus
-                      :hide-options="false"
-                      class="expanded-form-comment-edit-input cursor-text expanded-form-comment-input !py-2 !px-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[240px]"
-                      data-testid="expanded-form-comment-input"
-                      sync-value-change
-                      @save="onEditComment"
-                      @keydown.esc="onCancel"
-                      @blur="
-                        () => {
-                          editCommentValue = undefined
-                          isEditing = false
-                        }
-                      "
-                      @keydown.enter.exact.prevent="onEditComment"
-                    />
-
-                    <div v-else class="space-y-1 pl-9">
-                      <SmartsheetExpandedFormRichComment
-                        :value="`${commentItem.comment}  ${editedAt(commentItem)}`"
-                        class="!text-small !leading-18px !text-gray-800 -ml-1"
-                        read-only
-                        sync-value-change
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-if="hasEditPermission" class="px-3 pb-3 nc-comment-input !rounded-br-2xl gap-2 flex">
-              <SmartsheetExpandedFormRichComment
-                ref="commentInputRef"
-                v-model:value="comment"
-                :hide-options="false"
-                placeholder="Comment..."
-                class="expanded-form-comment-input !py-2 !px-2 cursor-text border-1 rounded-lg w-full bg-transparent !text-gray-800 !text-small !leading-18px !max-h-[240px]"
-                :autofocus="isExpandedFormCommentMode"
-                data-testid="expanded-form-comment-input"
-                @focus="isExpandedFormCommentMode = false"
-                @keydown.stop
-                @save="saveComment"
-                @keydown.enter.exact.prevent="saveComment"
-              />
-            </div>
-          </div>
-        </div>
-      </a-tab-pane>
-
-      <a-tab-pane key="audits" class="w-full" :disabled="appInfo.ee">
-        <template #tab>
-          <NcTooltip v-if="appInfo.ee" class="tab flex-1">
-            <template #title>{{ $t('title.comingSoon') }}</template>
-
-            <div v-e="['c:row-expand:audit']" class="flex items-center gap-2 text-gray-400">
-              <GeneralIcon icon="audit" class="w-4 h-4" />
-              <span class="<lg:hidden"> Audits </span>
-            </div>
-          </NcTooltip>
-
-          <div v-else v-e="['c:row-expand:audit']" class="flex items-center gap-2">
-            <GeneralIcon icon="audit" class="w-4 h-4" />
-            <span class="<lg:hidden"> Audits </span>
-          </div>
-        </template>
-        <div class="h-full pb-1">
-          <div v-if="isExpandedFormLoading || isAuditLoading" class="flex flex-col items-center justify-center w-full h-full">
-            <GeneralLoader size="xlarge" />
-          </div>
-
-          <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
-            <template v-if="audits.length === 0">
-              <div class="flex flex-col text-center justify-center h-full">
-                <div class="text-center text-3xl text-gray-600">
-                  <MdiHistory />
-                </div>
-                <div class="font-bold text-center my-1 text-gray-600">See changes to this record</div>
-              </div>
-            </template>
-
-            <div v-for="audit of audits" :key="audit.id" :class="`${audit.id}`" class="nc-audit-item">
-              <div class="group gap-3 overflow-hidden px-3 py-2 hover:bg-gray-100">
-                <div class="flex items-start justify-between">
-                  <div class="flex items-start gap-3 flex-1 w-full">
-                    <GeneralUserIcon
-                      :email="audit.created_by_email"
-                      :name="audit.created_display_name"
-                      class="mt-0.5"
-                      size="medium"
-                    />
-                    <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
-                      <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
-                        <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
-                          {{ createdByAudit(audit) }}
-                        </div>
-
-                        <template #overlay>
-                          <div class="bg-white rounded-lg">
-                            <div class="flex items-center gap-4 py-3 px-2">
-                              <GeneralUserIcon
-                                class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
-                                :name="audit.created_display_name"
-                                :email="audit.created_by_email"
-                              />
-                              <div class="flex flex-col">
-                                <div class="font-semibold text-gray-800">
-                                  {{ createdByAudit(audit) }}
-                                </div>
-                                <div class="text-xs text-gray-600">
-                                  {{ audit.created_by_email }}
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              v-if="isUIAllowed('dataEdit')"
-                              class="px-3 rounded-b-lg !text-[13px] items-center text-gray-600 flex gap-1 bg-gray-100 py-1.5"
-                            >
-                              Has <RolesBadge size="sm" :border="false" :role="getUserRole(audit.created_by_email!)" />
-                              role in base
-                            </div>
-                          </div>
-                        </template>
-                      </NcDropdown>
-                      <div class="text-xs text-gray-500">
-                        {{ timeAgo(audit.created_at!) }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-dompurify-html="audit.details" class="!text-[13px] text-gray-500 !leading-5 !pl-9"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </a-tab-pane>
-    </NcTabs>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tab {
-  @apply max-w-1/2;
-}
-
-.nc-audit-item {
-  @apply gap-3;
-}
-
-.tab .tab-title {
-  @apply min-w-0 flex justify-center gap-2 font-semibold items-center;
-  word-break: 'keep-all';
-  white-space: 'nowrap';
-  display: 'inline';
-}
-
-.text-decoration-line-through {
-  text-decoration: line-through;
-}
-
-:deep(.red.lighten-4) {
-  @apply bg-red-100 rounded-md line-through;
-}
-
-:deep(.green.lighten-4) {
-  @apply bg-green-100 rounded-md !mr-3;
-}
-
-:deep(.ant-tabs) {
-  @apply !overflow-visible;
-  .ant-tabs-nav {
-    @apply px-3 bg-white;
-    .ant-tabs-nav-list {
-      @apply w-[99%] mx-auto gap-6;
-
-      .ant-tabs-tab {
-        @apply flex-1 flex items-center justify-center pt-3 pb-2.5;
-
-        & + .ant-tabs-tab {
-          @apply !ml-0;
-        }
-      }
-    }
-  }
-  .ant-tabs-content-holder {
-    .ant-tabs-content {
-      @apply h-full;
-    }
-  }
-}
-
-:deep(.expanded-form-comment-input) {
-  @apply transition-all duration-150 min-h-8;
-  box-shadow: none;
-  &:focus,
-  &:focus-within {
-    @apply min-h-16 !bg-white border-brand-500;
-    box-shadow: 0px 0px 0px 2px rgba(51, 102, 255, 0.24);
-  }
-  &::placeholder {
-    @apply !text-gray-400;
-  }
-}
-
-:deep(.expanded-form-comment-edit-input .nc-comment-rich-editor) {
-  @apply bg-white;
-}
-
-.nc-hovered-comment {
-  .nc-expand-form-more-actions,
-  .nc-resolve-comment-btn {
-    @apply !block;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
new file mode 100644
index 0000000000..cd46ed9c45
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { type AuditType, ProjectRoles } from 'nocodb-sdk'
+
+const { user } = useGlobal()
+
+const { isUIAllowed } = useRoles()
+
+const basesStore = useBases()
+
+const { basesUser } = storeToRefs(basesStore)
+
+const meta = inject(MetaInj, ref())
+
+const baseUsers = computed(() => (meta.value?.base_id ? basesUser.value.get(meta.value?.base_id) || [] : []))
+
+const { audits, isAuditLoading } = useExpandedFormStoreOrThrow()
+
+const auditsWrapperEl = ref<HTMLElement | null>(null)
+
+function scrollToAudit(auditId?: string) {
+  if (!auditId) return
+
+  const auditEl = auditsWrapperEl.value?.querySelector(`.nc-audit-item.${auditId}`)
+  if (auditEl) {
+    auditEl.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    })
+  }
+}
+
+const createdByAudit = (
+  comment: AuditType & {
+    created_display_name?: string
+  },
+) => {
+  if (comment.user === user.value?.email) {
+    return 'You'
+  } else if (comment.created_display_name?.trim()) {
+    return comment.created_display_name || 'Shared source'
+  } else if (comment.user) {
+    return comment.user
+  } else {
+    return 'Shared source'
+  }
+}
+
+const getUserRole = (email: string) => {
+  const user = baseUsers.value.find((user) => user.email === email)
+  if (!user) return ProjectRoles.NO_ACCESS
+
+  return user.roles || ProjectRoles.NO_ACCESS
+}
+watch(
+  () => audits.value.length,
+  (auditCount) => {
+    nextTick(() => {
+      setTimeout(() => {
+        scrollToAudit(audits.value[auditCount - 1]?.id)
+      }, 100)
+    })
+  },
+)
+</script>
+
+<template>
+  <div class="h-full pb-1">
+    <div v-if="isAuditLoading" class="flex flex-col items-center justify-center w-full h-full">
+      <GeneralLoader size="xlarge" />
+    </div>
+
+    <div v-else ref="auditsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
+      <template v-if="audits.length === 0">
+        <div class="flex flex-col text-center justify-center h-full">
+          <div class="text-center text-3xl text-gray-600">
+            <MdiHistory />
+          </div>
+          <div class="font-bold text-center my-1 text-gray-600">See changes to this record</div>
+        </div>
+      </template>
+
+      <div v-for="audit of audits" :key="audit.id" :class="`${audit.id}`" class="nc-audit-item">
+        <div class="group gap-3 overflow-hidden px-3 py-2 hover:bg-gray-100">
+          <div class="flex items-start justify-between">
+            <div class="flex items-start gap-3 flex-1 w-full">
+              <GeneralUserIcon :email="audit.created_by_email" :name="audit.created_display_name" class="mt-0.5" size="medium" />
+              <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
+                <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
+                  <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
+                    {{ createdByAudit(audit) }}
+                  </div>
+
+                  <template #overlay>
+                    <div class="bg-white rounded-lg">
+                      <div class="flex items-center gap-4 py-3 px-2">
+                        <GeneralUserIcon
+                          class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
+                          :name="audit.created_display_name"
+                          :email="audit.created_by_email"
+                        />
+                        <div class="flex flex-col">
+                          <div class="font-semibold text-gray-800">
+                            {{ createdByAudit(audit) }}
+                          </div>
+                          <div class="text-xs text-gray-600">
+                            {{ audit.created_by_email }}
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        v-if="isUIAllowed('dataEdit')"
+                        class="px-3 rounded-b-lg !text-[13px] items-center text-gray-600 flex gap-1 bg-gray-100 py-1.5"
+                      >
+                        Has <RolesBadge size="sm" :border="false" :role="getUserRole(audit.created_by_email!)" />
+                        role in base
+                      </div>
+                    </div>
+                  </template>
+                </NcDropdown>
+                <div class="text-xs text-gray-500">
+                  {{ timeAgo(audit.created_at!) }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-dompurify-html="audit.details" class="!text-[13px] text-gray-500 !leading-5 !pl-9"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.red.lighten-4) {
+  @apply bg-red-100 rounded-md line-through;
+}
+
+.nc-audit-item {
+  @apply gap-3;
+}
+
+:deep(.green.lighten-4) {
+  @apply bg-green-100 rounded-md !mr-3;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Comments.vue
new file mode 100644
index 0000000000..cdf2d0e5ed
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Comments.vue
@@ -0,0 +1,488 @@
+<script setup lang="ts">
+import { type CommentType, ProjectRoles } from 'nocodb-sdk'
+
+const { user, appInfo } = useGlobal()
+
+const { dashboardUrl } = useDashboard()
+
+const { isUIAllowed } = useRoles()
+
+const { copy } = useClipboard()
+
+const route = useRoute()
+
+const hasEditPermission = computed(() => isUIAllowed('commentEdit'))
+
+const { isExpandedFormCommentMode } = storeToRefs(useConfigStore())
+
+const basesStore = useBases()
+
+const { basesUser } = storeToRefs(basesStore)
+
+const meta = inject(MetaInj, ref())
+
+const {
+  deleteComment,
+  resolveComment,
+  isCommentsLoading,
+  comments,
+  loadComments,
+  updateComment,
+  saveComment: _saveComment,
+  primaryKey,
+} = useRowCommentsOrThrow()
+
+const editCommentValue = ref<CommentType>()
+
+const commentsWrapperEl = ref<HTMLDivElement>()
+
+const isEditing = ref<boolean>(false)
+
+const isCommentMode = ref(false)
+
+const hoveredCommentId = ref<null | string>(null)
+
+const commentInputRef = ref<any>()
+
+const comment = ref('')
+
+const router = useRouter()
+
+const baseUsers = computed(() => (meta.value?.base_id ? basesUser.value.get(meta.value?.base_id) || [] : []))
+
+function scrollComments() {
+  if (commentsWrapperEl.value) {
+    commentsWrapperEl.value.scrollTo({
+      top: commentsWrapperEl.value.scrollHeight,
+      behavior: 'smooth',
+    })
+  }
+}
+
+const saveComment = async () => {
+  if (!comment.value.trim()) return
+
+  while (comment.value.endsWith('<br />') || comment.value.endsWith('\n')) {
+    if (comment.value.endsWith('<br />')) {
+      comment.value = comment.value.slice(0, -6)
+    } else {
+      comment.value = comment.value.slice(0, -2)
+    }
+  }
+
+  isCommentMode.value = true
+
+  // Optimistic Insert
+  comments.value = [
+    ...comments.value,
+    {
+      id: `temp-${new Date().getTime()}`,
+      comment: comment.value,
+      created_at: new Date().toISOString(),
+      created_by: user.value?.id,
+      created_by_email: user.value?.email,
+      created_display_name: user.value?.display_name ?? '',
+    },
+  ]
+
+  const tempCom = comment.value
+  comment.value = ''
+
+  commentInputRef?.value?.setEditorContent('', true)
+  await nextTick(() => {
+    scrollComments()
+  })
+
+  try {
+    await _saveComment(tempCom)
+    await nextTick(() => {
+      isExpandedFormCommentMode.value = true
+    })
+    scrollComments()
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const copyComment = async (comment: CommentType) => {
+  await copy(
+    encodeURI(
+      `${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.baseId}/${meta.value?.id}?rowId=${primaryKey.value}&commentId=${comment.id}`,
+    ),
+  )
+}
+
+function scrollToComment(commentId: string) {
+  const commentEl = document.querySelector(`.${commentId}`)
+  if (commentEl) {
+    commentEl.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    })
+  }
+}
+
+function onCancel(e: KeyboardEvent) {
+  if (!isEditing.value) return
+  e.preventDefault()
+  e.stopPropagation()
+  editCommentValue.value = undefined
+  loadComments()
+  isEditing.value = false
+  editCommentValue.value = undefined
+}
+
+function editComment(comment: CommentType) {
+  editCommentValue.value = {
+    ...comment,
+  }
+  isEditing.value = true
+  nextTick(() => {
+    scrollToComment(comment.id!)
+  })
+}
+
+const value = computed({
+  get() {
+    return editCommentValue.value?.comment || ''
+  },
+  set(val) {
+    if (!editCommentValue.value) return
+    editCommentValue.value.comment = val
+  },
+})
+
+async function onEditComment() {
+  if (!isEditing.value || !editCommentValue.value?.comment) return
+
+  while (editCommentValue.value.comment.endsWith('<br />') || editCommentValue.value.comment.endsWith('\n')) {
+    if (editCommentValue.value.comment.endsWith('<br />')) {
+      editCommentValue.value.comment = editCommentValue.value.comment.slice(0, -6)
+    } else {
+      editCommentValue.value.comment = editCommentValue.value.comment.slice(0, -2)
+    }
+  }
+
+  isCommentMode.value = true
+
+  const tempCom = {
+    ...editCommentValue.value,
+  }
+
+  isEditing.value = false
+  editCommentValue.value = undefined
+  await updateComment(tempCom.id!, {
+    comment: tempCom.comment,
+  })
+  loadComments()
+}
+
+const createdBy = (
+  comment: CommentType & {
+    created_display_name?: string
+  },
+) => {
+  if (comment.created_by === user.value?.id) {
+    return 'You'
+  } else if (comment.created_display_name?.trim()) {
+    return comment.created_display_name || 'Shared source'
+  } else if (comment.created_by_email) {
+    return comment.created_by_email
+  } else {
+    return 'Shared source'
+  }
+}
+
+const editedAt = (comment: CommentType) => {
+  if (comment.updated_at !== comment.created_at && comment.updated_at) {
+    const str = timeAgo(comment.updated_at).replace(' ', '_')
+    return `[(edited)](a~~~###~~~Edited_${str}) `
+  }
+  return ''
+}
+
+function handleResetHoverEffect() {
+  if (!hoveredCommentId.value) return
+
+  hoveredCommentId.value = null
+}
+
+watch(commentsWrapperEl, () => {
+  setTimeout(() => {
+    nextTick(() => {
+      const query = router.currentRoute.value.query
+      const commentId = query.commentId
+      if (commentId) {
+        router.push({
+          query: {
+            rowId: query.rowId,
+          },
+        })
+        scrollToComment(commentId as string)
+
+        hoveredCommentId.value = commentId as string
+
+        onClickOutside(document.querySelector(`.${hoveredCommentId.value}`)! as HTMLDivElement, handleResetHoverEffect)
+      } else {
+        scrollComments()
+      }
+    })
+  }, 100)
+})
+
+const getUserRole = (email: string) => {
+  const user = baseUsers.value.find((user) => user.email === email)
+  if (!user) return ProjectRoles.NO_ACCESS
+
+  return user.roles || ProjectRoles.NO_ACCESS
+}
+</script>
+
+<template>
+  <div
+    class="h-full"
+    :class="{
+      'pb-1': !hasEditPermission,
+    }"
+  >
+    <div v-if="isCommentsLoading" class="flex flex-col items-center justify-center w-full h-full">
+      <GeneralLoader size="xlarge" />
+    </div>
+    <div v-else class="flex flex-col h-full">
+      <div v-if="comments.length === 0" class="flex flex-col my-1 text-center justify-center h-full nc-scrollbar-thin">
+        <div class="text-center text-3xl text-gray-700">
+          <GeneralIcon icon="commentHere" />
+        </div>
+        <div class="font-medium text-center my-6 text-gray-500">
+          {{ hasEditPermission ? $t('activity.startCommenting') : $t('activity.noCommentsYet') }}
+        </div>
+      </div>
+      <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
+        <div
+          v-for="commentItem of comments"
+          :key="commentItem.id"
+          :class="`${commentItem.id}`"
+          class="nc-comment-item"
+          @mouseover="handleResetHoverEffect"
+        >
+          <div
+            :class="{
+                  'hover:bg-gray-100': editCommentValue?.id !== commentItem!.id,
+                  'nc-hovered-comment bg-gray-100': hoveredCommentId === commentItem!.id
+                }"
+            class="group gap-3 overflow-hidden px-3 py-2 transition-colors"
+          >
+            <div class="flex items-start justify-between">
+              <div
+                class="flex items-start gap-3 flex-1"
+                :class="{
+                  'w-[calc(100%)] group-hover:w-[calc(100%_-_50px)]': !appInfo.ee,
+                  'w-[calc(100%_-_44px)] group-hover:w-[calc(100%_-_72px)]': appInfo.ee && commentItem.resolved_by,
+                  'w-[calc(100%_-_16px)] group-hover:w-[calc(100%_-_72px)]':
+                    appInfo.ee && !commentItem.resolved_by && hasEditPermission,
+                  'w-[calc(100%_-_16px)] group-hover:w-[calc(100%_-_44px)]':
+                    appInfo.ee && !commentItem.resolved_by && !hasEditPermission,
+                }"
+              >
+                <GeneralUserIcon
+                  :email="commentItem.created_by_email"
+                  :name="commentItem.created_display_name"
+                  class="mt-0.5"
+                  size="medium"
+                />
+                <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
+                  <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
+                    <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
+                      {{ createdBy(commentItem) }}
+                    </div>
+
+                    <template #overlay>
+                      <div class="bg-white rounded-lg">
+                        <div class="flex items-center gap-4 py-3 px-2">
+                          <GeneralUserIcon
+                            class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
+                            :name="commentItem.created_display_name"
+                            :email="commentItem.created_by_email"
+                          />
+                          <div class="flex flex-col">
+                            <div class="font-semibold text-gray-800">
+                              {{ createdBy(commentItem) }}
+                            </div>
+                            <div class="text-xs text-gray-600">
+                              {{ commentItem.created_by_email }}
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          v-if="isUIAllowed('dataEdit')"
+                          class="px-3 rounded-b-lg !text-[13px] items-center text-gray-600 flex gap-1 bg-gray-100 py-1.5"
+                        >
+                          Has <RolesBadge size="sm" :border="false" :role="getUserRole(commentItem.created_by_email!)" />
+                          role in base
+                        </div>
+                      </div>
+                    </template>
+                  </NcDropdown>
+                  <div class="text-xs text-gray-500">
+                    {{ timeAgo(commentItem.created_at!) }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center">
+                <NcDropdown
+                  v-if="!editCommentValue"
+                  class="nc-comment-more-actions !hidden !group-hover:block"
+                  overlay-class-name="!min-w-[160px]"
+                  placement="bottomRight"
+                >
+                  <NcButton
+                    class="nc-expand-form-more-actions !hover:bg-gray-200 !w-7 !h-7 !bg-transparent"
+                    size="xsmall"
+                    type="text"
+                  >
+                    <GeneralIcon class="text-md" icon="threeDotVertical" />
+                  </NcButton>
+                  <template #overlay>
+                    <NcMenu>
+                      <NcMenuItem
+                        v-if="user && commentItem.created_by_email === user.email && hasEditPermission"
+                        v-e="['c:comment-expand:comment:edit']"
+                        class="text-gray-700"
+                        @click="editComment(commentItem)"
+                      >
+                        <div class="flex gap-2 items-center">
+                          <component :is="iconMap.rename" class="cursor-pointer" />
+                          {{ $t('general.edit') }}
+                        </div>
+                      </NcMenuItem>
+                      <NcMenuItem v-e="['c:comment-expand:comment:copy']" class="text-gray-700" @click="copyComment(commentItem)">
+                        <div class="flex gap-2 items-center">
+                          <component :is="iconMap.copy" class="cursor-pointer" />
+                          {{ $t('general.copy') }} URL
+                        </div>
+                      </NcMenuItem>
+                      <template v-if="user && commentItem.created_by_email === user.email && hasEditPermission">
+                        <NcDivider />
+                        <NcMenuItem
+                          v-e="['c:row-expand:comment:delete']"
+                          class="!text-red-500 !hover:bg-red-50"
+                          @click="deleteComment(commentItem.id!)"
+                        >
+                          <div class="flex gap-2 items-center">
+                            <component :is="iconMap.delete" class="cursor-pointer" />
+                            {{ $t('general.delete') }}
+                          </div>
+                        </NcMenuItem>
+                      </template>
+                    </NcMenu>
+                  </template>
+                </NcDropdown>
+                <div v-if="appInfo.ee">
+                  <NcTooltip v-if="!commentItem.resolved_by && hasEditPermission">
+                    <NcButton
+                      class="nc-resolve-comment-btn !w-7 !h-7 !bg-transparent !hover:bg-gray-200 !hidden !group-hover:block"
+                      size="xsmall"
+                      type="text"
+                      @click="resolveComment(commentItem.id!)"
+                    >
+                      <GeneralIcon class="text-md" icon="checkCircle" />
+                    </NcButton>
+
+                    <template #title>Click to resolve </template>
+                  </NcTooltip>
+
+                  <NcTooltip v-else-if="commentItem.resolved_by">
+                    <template #title>{{ `Resolved by ${commentItem.resolved_display_name}` }}</template>
+                    <NcButton
+                      class="!h-7 !w-7 !bg-transparent !hover:bg-gray-200 text-semibold"
+                      size="xsmall"
+                      type="text"
+                      @click="resolveComment(commentItem.id!)"
+                    >
+                      <GeneralIcon class="text-md rounded-full bg-[#17803D] text-white" icon="checkFill" />
+                    </NcButton>
+                  </NcTooltip>
+                </div>
+              </div>
+            </div>
+            <div
+              :class="{
+                'mt-3': commentItem.id === editCommentValue?.id,
+              }"
+              class="flex-1 flex flex-col gap-1 max-w-[calc(100%)]"
+            >
+              <SmartsheetExpandedFormRichComment
+                v-if="commentItem.id === editCommentValue?.id && hasEditPermission"
+                v-model:value="value"
+                autofocus
+                :hide-options="false"
+                class="expanded-form-comment-edit-input cursor-text expanded-form-comment-input !py-2 !px-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[240px]"
+                data-testid="expanded-form-comment-input"
+                sync-value-change
+                @save="onEditComment"
+                @keydown.esc="onCancel"
+                @blur="
+                  () => {
+                    editCommentValue = undefined
+                    isEditing = false
+                  }
+                "
+                @keydown.enter.exact.prevent="onEditComment"
+              />
+
+              <div v-else class="space-y-1 pl-9">
+                <SmartsheetExpandedFormRichComment
+                  :value="`${commentItem.comment}  ${editedAt(commentItem)}`"
+                  class="!text-small !leading-18px !text-gray-800 -ml-1"
+                  read-only
+                  sync-value-change
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="hasEditPermission" class="px-3 pb-3 nc-comment-input !rounded-br-2xl gap-2 flex">
+        <SmartsheetExpandedFormRichComment
+          ref="commentInputRef"
+          v-model:value="comment"
+          :hide-options="false"
+          placeholder="Comment..."
+          class="expanded-form-comment-input !py-2 !px-2 cursor-text border-1 rounded-lg w-full bg-transparent !text-gray-800 !text-small !leading-18px !max-h-[240px]"
+          :autofocus="isExpandedFormCommentMode"
+          data-testid="expanded-form-comment-input"
+          @focus="isExpandedFormCommentMode = false"
+          @keydown.stop
+          @save="saveComment"
+          @keydown.enter.exact.prevent="saveComment"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.expanded-form-comment-input) {
+  @apply transition-all duration-150 min-h-8;
+  box-shadow: none;
+  &:focus,
+  &:focus-within {
+    @apply min-h-16 !bg-white border-brand-500;
+    box-shadow: 0px 0px 0px 2px rgba(51, 102, 255, 0.24);
+  }
+  &::placeholder {
+    @apply !text-gray-400;
+  }
+}
+
+:deep(.expanded-form-comment-edit-input .nc-comment-rich-editor) {
+  @apply bg-white;
+}
+
+.nc-hovered-comment {
+  .nc-expand-form-more-actions,
+  .nc-resolve-comment-btn {
+    @apply !block;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/index.vue
new file mode 100644
index 0000000000..9a324c59e3
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/index.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const { appInfo } = useGlobal()
+
+const tab = ref<'comments' | 'audits'>('comments')
+</script>
+
+<template>
+  <div class="flex flex-col bg-white !h-full w-full rounded-br-2xl overflow-hidden">
+    <NcTabs v-model:activeKey="tab" class="h-full">
+      <a-tab-pane key="comments" class="w-full h-full">
+        <template #tab>
+          <div v-e="['c:row-expand:comment']" class="flex items-center gap-2">
+            <GeneralIcon icon="messageCircle" class="w-4 h-4" />
+            <span class="<lg:hidden"> Comments </span>
+          </div>
+        </template>
+        <SmartsheetExpandedFormSidebarComments />
+      </a-tab-pane>
+
+      <a-tab-pane key="audits" class="w-full" :disabled="appInfo.ee">
+        <template #tab>
+          <NcTooltip v-if="appInfo.ee" class="tab flex-1">
+            <template #title>{{ $t('title.comingSoon') }}</template>
+
+            <div v-e="['c:row-expand:audit']" class="flex items-center gap-2 text-gray-400">
+              <GeneralIcon icon="audit" class="w-4 h-4" />
+              <span class="<lg:hidden"> Audits </span>
+            </div>
+          </NcTooltip>
+
+          <div v-else v-e="['c:row-expand:audit']" class="flex items-center gap-2">
+            <GeneralIcon icon="audit" class="w-4 h-4" />
+            <span class="<lg:hidden"> Audits </span>
+          </div>
+        </template>
+        <SmartsheetExpandedFormSidebarAudits />
+      </a-tab-pane>
+    </NcTabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tab {
+  @apply max-w-1/2;
+}
+
+.tab .tab-title {
+  @apply min-w-0 flex justify-center gap-2 font-semibold items-center;
+  word-break: 'keep-all';
+  white-space: 'nowrap';
+  display: 'inline';
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through;
+}
+
+:deep(.ant-tabs) {
+  @apply !overflow-visible;
+  .ant-tabs-nav {
+    @apply px-3 bg-white;
+    .ant-tabs-nav-list {
+      @apply w-[99%] mx-auto gap-6;
+
+      .ant-tabs-tab {
+        @apply flex-1 flex items-center justify-center pt-3 pb-2.5;
+
+        & + .ant-tabs-tab {
+          @apply !ml-0;
+        }
+      }
+    }
+  }
+  .ant-tabs-content-holder {
+    .ant-tabs-content {
+      @apply h-full;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 79195050b3..b633764159 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -342,7 +342,7 @@ if (isKanban.value) {
 provide(IsExpandedFormOpenInj, isExpanded)
 
 const triggerRowLoad = async (rowId?: string) => {
-  await Promise.allSettled([loadComments(rowId), loadAudits(rowId), _loadRow(rowId)])
+  await Promise.allSettled([loadComments(rowId, false), loadAudits(rowId), _loadRow(rowId)])
   isLoading.value = false
 }
 
@@ -972,7 +972,7 @@ export default {
           :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
           class="nc-comments-drawer border-l-1 relative border-gray-200 bg-gray-50 w-1/3 max-w-[340px] min-w-0 h-full xs:hidden rounded-br-2xl"
         >
-          <SmartsheetExpandedFormComments :primary-key="primaryKey" :loading="isLoading" />
+          <SmartsheetExpandedFormSidebar />
         </div>
       </div>
     </div>
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 12704c4377..68836530d6 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -1,4 +1,4 @@
-import type { AuditType, ColumnType, CommentType, TableType } from 'nocodb-sdk'
+import type { AuditType, ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, ViewTypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import dayjs from 'dayjs'
@@ -10,19 +10,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const isPublic = inject(IsPublicInj, ref(false))
 
-  const comments = ref<
-    Array<
-      CommentType & {
-        created_display_name: string
-        resolved_display_name?: string
-      }
-    >
-  >([])
-
   const audits = ref<Array<AuditType>>([])
 
-  const isCommentsLoading = ref(false)
-
   const isAuditLoading = ref(false)
 
   const commentsDrawer = ref(true)
@@ -61,6 +50,9 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
+  const { comments, resolveComment, loadComments, updateComment, deleteComment, saveComment, isCommentsLoading } =
+    useProvideRowComments(meta, row)
+
   const { isUIAllowed } = useRoles()
 
   // getters
@@ -101,78 +93,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     return extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
   })
 
-  const loadComments = async (_rowId?: string) => {
-    if (!isUIAllowed('commentList') || (!row.value && !_rowId)) return
-
-    const rowId = _rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
-
-    if (!rowId) return
-
-    try {
-      isCommentsLoading.value = true
-
-      const res = ((
-        await $api.utils.commentList({
-          row_id: rowId,
-          fk_model_id: meta.value.id as string,
-        })
-      ).list || []) as Array<
-        CommentType & {
-          created_display_name: string
-        }
-      >
-
-      comments.value = res.map((comment) => {
-        const user = baseUsers.value.find((u) => u.id === comment.created_by)
-        const resolvedUser = comment.resolved_by ? baseUsers.value.find((u) => u.id === comment.resolved_by) : null
-        return {
-          ...comment,
-          created_display_name: user?.display_name ?? (user?.email ?? '').split('@')[0],
-          resolved_display_name: resolvedUser ? resolvedUser.display_name ?? resolvedUser.email.split('@')[0] : null,
-        }
-      })
-    } catch (e: unknown) {
-      message.error(
-        await extractSdkResponseErrorMsg(
-          e as Error & {
-            response: any
-          },
-        ),
-      )
-    } finally {
-      isCommentsLoading.value = false
-    }
-  }
-
-  const deleteComment = async (commentId: string) => {
-    if (!isUIAllowed('commentDelete')) return
-    const tempC = comments.value.find((c) => c.id === commentId)
-
-    try {
-      comments.value = comments.value.filter((c) => c.id !== commentId)
-
-      await $api.utils.commentDelete(commentId)
-
-      // update comment count in rowMeta
-      Object.assign(row.value, {
-        ...row.value,
-        rowMeta: {
-          ...row.value.rowMeta,
-          commentCount: (row.value.rowMeta.commentCount ?? 1) - 1,
-        },
-      })
-    } catch (e: unknown) {
-      message.error(
-        await extractSdkResponseErrorMsg(
-          e as Error & {
-            response: any
-          },
-        ),
-      )
-      comments.value = [...comments.value, tempC]
-    }
-  }
-
   const loadAudits = async (_rowId?: string, showLoading: boolean = true) => {
     if (!isUIAllowed('auditListRow') || isEeUI || (!row.value && !_rowId)) return
 
@@ -224,84 +144,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     }
   }
 
-  const resolveComment = async (commentId: string) => {
-    if (!isUIAllowed('commentResolve')) return
-    const tempC = comments.value.find((c) => c.id === commentId)
-
-    try {
-      comments.value = comments.value.map((c) => {
-        if (c.id === commentId) {
-          return {
-            ...c,
-            resolved_by: tempC.resolved_by ? null : $state.user?.value?.id,
-            resolved_by_email: tempC.resolved_by ? null : $state.user?.value?.email,
-            resolved_display_name: tempC.resolved_by
-              ? null
-              : $state.user?.value?.display_name ?? $state.user?.value?.email.split('@')[0],
-          }
-        }
-        return c
-      })
-      await $api.utils.commentResolve(commentId)
-    } catch (e: unknown) {
-      comments.value = comments.value.map((c) => {
-        if (c.id === commentId) {
-          return tempC
-        }
-        return c
-      })
-      message.error(
-        await extractSdkResponseErrorMsg(
-          e as Error & {
-            response: any
-          },
-        ),
-      )
-    }
-  }
-
-  const saveComment = async (comment: string) => {
-    try {
-      if (!row.value || !comment) {
-        comments.value = comments.value.filter((c) => !c.id?.startsWith('temp-'))
-        return
-      }
-
-      const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
-
-      if (!rowId) return
-
-      await $api.utils.commentRow({
-        fk_model_id: meta.value?.id as string,
-        row_id: rowId,
-        comment: `${comment}`.replace(/(<br \/>)+$/g, ''),
-      })
-
-      // Increase Comment Count in rowMeta
-      Object.assign(row.value, {
-        rowMeta: {
-          ...row.value.rowMeta,
-          commentCount: (row.value.rowMeta.commentCount ?? 0) + 1,
-        },
-      })
-
-      // reloadTrigger?.trigger()
-
-      await loadComments()
-    } catch (e: any) {
-      comments.value = comments.value.filter((c) => !(c.id ?? '').startsWith('temp-'))
-      message.error(
-        await extractSdkResponseErrorMsg(
-          e as Error & {
-            response: any
-          },
-        ),
-      )
-    }
-
-    $e('a:row-expand:comment')
-  }
-
   const save = async (
     ltarState: Record<string, any> = {},
     undo = false,
@@ -536,37 +378,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     }
   }
 
-  const updateComment = async (commentId: string, comment: Partial<CommentType>) => {
-    const tempEdit = comments.value.find((c) => c.id === commentId)
-    try {
-      comments.value = comments.value.map((c) => {
-        if (c.id === commentId) {
-          return {
-            ...c,
-            ...comment,
-            updated_at: new Date().toISOString(),
-          }
-        }
-        return c
-      })
-      await $api.utils.commentUpdate(commentId, comment)
-    } catch (e: any) {
-      comments.value = comments.value.map((c) => {
-        if (c.id === commentId) {
-          return tempEdit
-        }
-        return c
-      })
-      message.error(
-        await extractSdkResponseErrorMsg(
-          e as Error & {
-            response: any
-          },
-        ),
-      )
-    }
-  }
-
   return {
     ...rowStore,
     loadComments,
diff --git a/packages/nc-gui/composables/useRowComments.ts b/packages/nc-gui/composables/useRowComments.ts
new file mode 100644
index 0000000000..a45ce8b6c7
--- /dev/null
+++ b/packages/nc-gui/composables/useRowComments.ts
@@ -0,0 +1,235 @@
+import type { ColumnType, CommentType, TableType } from 'nocodb-sdk'
+
+const [useProvideRowComments, useRowComments] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
+  const isCommentsLoading = ref(false)
+
+  const { isUIAllowed } = useRoles()
+
+  const { $e, $state, $api } = useNuxtApp()
+
+  const comments = ref<
+    Array<
+      CommentType & {
+        created_display_name: string
+        resolved_display_name?: string
+      }
+    >
+  >([])
+
+  const basesStore = useBases()
+
+  const { basesUser } = storeToRefs(basesStore)
+
+  const baseUsers = computed(() => (meta.value.base_id ? basesUser.value.get(meta.value.base_id) || [] : []))
+
+  const loadComments = async (_rowId?: string, ignoreLoadingIndicator = true) => {
+    if (!isUIAllowed('commentList') || (!row.value && !_rowId)) return
+
+    const rowId = _rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+
+    if (!rowId) return
+
+    try {
+      if (!ignoreLoadingIndicator) isCommentsLoading.value = true
+
+      const res = ((
+        await $api.utils.commentList({
+          row_id: rowId,
+          fk_model_id: meta.value.id as string,
+        })
+      ).list || []) as Array<
+        CommentType & {
+          created_display_name: string
+        }
+      >
+
+      comments.value = res.map((comment) => {
+        const user = baseUsers.value.find((u) => u.id === comment.created_by)
+        const resolvedUser = comment.resolved_by ? baseUsers.value.find((u) => u.id === comment.resolved_by) : null
+        return {
+          ...comment,
+          created_display_name: user?.display_name ?? (user?.email ?? '').split('@')[0],
+          resolved_display_name: resolvedUser ? resolvedUser.display_name ?? resolvedUser.email.split('@')[0] : undefined,
+        }
+      })
+    } catch (e: unknown) {
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+    } finally {
+      if (!ignoreLoadingIndicator) isCommentsLoading.value = false
+    }
+  }
+
+  const deleteComment = async (commentId: string) => {
+    if (!isUIAllowed('commentDelete')) return
+    const tempC = comments.value.find((c) => c.id === commentId)
+
+    if (!tempC) return
+
+    try {
+      comments.value = comments.value.filter((c) => c.id !== commentId)
+
+      await $api.utils.commentDelete(commentId)
+
+      // update comment count in rowMeta
+      Object.assign(row.value, {
+        ...row.value,
+        rowMeta: {
+          ...row.value.rowMeta,
+          commentCount: (row.value.rowMeta.commentCount ?? 1) - 1,
+        },
+      })
+    } catch (e: unknown) {
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+      comments.value = [...comments.value, tempC]
+    }
+  }
+
+  const resolveComment = async (commentId: string) => {
+    if (!isUIAllowed('commentResolve')) return
+    const tempC = comments.value.find((c) => c.id === commentId)
+
+    if (!tempC) return
+
+    try {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return {
+            ...c,
+            resolved_by: tempC.resolved_by ? undefined : $state.user?.value?.id,
+            resolved_by_email: tempC.resolved_by ? undefined : $state.user?.value?.email,
+            resolved_display_name: tempC.resolved_by
+              ? undefined
+              : $state.user?.value?.display_name ?? $state.user?.value?.email.split('@')[0],
+          }
+        }
+        return c
+      })
+      await $api.utils.commentResolve(commentId, {})
+    } catch (e: unknown) {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return tempC
+        }
+        return c
+      })
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+    }
+  }
+
+  const saveComment = async (comment: string) => {
+    try {
+      if (!row.value || !comment) {
+        comments.value = comments.value.filter((c) => !c.id?.startsWith('temp-'))
+        return
+      }
+
+      const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+
+      if (!rowId) return
+
+      await $api.utils.commentRow({
+        fk_model_id: meta.value?.id as string,
+        row_id: rowId,
+        comment: `${comment}`.replace(/(<br \/>)+$/g, ''),
+      })
+
+      // Increase Comment Count in rowMeta
+      Object.assign(row.value, {
+        rowMeta: {
+          ...row.value.rowMeta,
+          commentCount: (row.value.rowMeta.commentCount ?? 0) + 1,
+        },
+      })
+
+      // reloadTrigger?.trigger()
+
+      await loadComments()
+    } catch (e: any) {
+      comments.value = comments.value.filter((c) => !(c.id ?? '').startsWith('temp-'))
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+    }
+
+    $e('a:row-expand:comment')
+  }
+
+  const updateComment = async (commentId: string, comment: Partial<CommentType>) => {
+    const tempEdit = comments.value.find((c) => c.id === commentId)
+    if (!tempEdit) return
+    try {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return {
+            ...c,
+            ...comment,
+            updated_at: new Date().toISOString(),
+          }
+        }
+        return c
+      })
+      await $api.utils.commentUpdate(commentId, comment)
+    } catch (e: any) {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return tempEdit
+        }
+        return c
+      })
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+    }
+  }
+
+  const primaryKey = computed(() => {
+    return extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+  })
+
+  return {
+    comments,
+    loadComments,
+    saveComment,
+    updateComment,
+    resolveComment,
+    deleteComment,
+    isCommentsLoading,
+    primaryKey,
+  }
+})
+
+export { useProvideRowComments }
+
+export function useRowCommentsOrThrow() {
+  const rowComments = useRowComments()
+  if (!rowComments) {
+    throw new Error('useRowComments is not provided')
+  }
+  return rowComments
+}

From 268a55d936ae5ad7a8ed123344d103af0c0c2d66 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 19/42] fix: increase z-index fix: update comment icon

---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 9921a484a4..b4cdc29e8e 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -120,7 +120,7 @@ onMounted(() => {
         class="flex w-full overflow-hidden justify-center text-center relative h-screen items-center"
       >
         <NcButton
-          class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
+          class="top-5 !absolute cursor-pointer !z-30 !hover:bg-transparent left-5"
           size="xsmall"
           type="text"
           @click.stop="selectedFile = false"
@@ -200,7 +200,7 @@ onMounted(() => {
           <NcButton class="!hover:bg-transparent" type="text" size="small" @click="toggleComment">
             <div class="flex gap-1 text-white justify-center items-center">
               Comments
-              <GeneralIcon icon="comment" />
+              <GeneralIcon icon="messageCircle" />
             </div>
           </NcButton>
         </div>
@@ -215,7 +215,8 @@ onMounted(() => {
                 :key="index"
                 :class="{
                   '!opacity-100': index === selectedIndex,
-                  '!basis-1/8': visibleItems.length > 4,
+                  '!basis-1/8': visibleItems.length >= 4,
+                  '!basis-1/3': visibleItems.length >= 1,
                 }"
                 class="px-2 keep-open opacity-50 cursor-pointer"
                 @click="onThumbClick(index)"

From ebc4f724f99cb22b5aa778a7fbc21fb12fccc3e2 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 20/42] chore: lint

---
 .../components/cell/attachment/Preview/Video.vue     |  2 +-
 packages/nc-gui/components/cell/attachment/index.vue | 12 +-----------
 packages/nc-gui/components/dashboard/View.vue        | 10 +++++-----
 .../components/smartsheet/calendar/MonthView.vue     |  8 --------
 packages/nc-gui/utils/fileUtils.ts                   |  2 +-
 5 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index 845d4e7a1d..d17447a403 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -50,7 +50,7 @@ onBeforeUnmount(() => {
     }"
     class="videoplayer w-full"
   >
-    <source v-for="(src, id) in props.src" :key="id" :src="src" :type="mimeType" />
+    <source v-for="(source, id) in props.src" :key="id" :src="source" :type="mimeType" />
   </video>
 </template>
 
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index cb4a1e8f0b..aaf28c73a5 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -38,7 +38,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()!
 
 const { isMobileMode } = useGlobal()
 
-const { getPossibleAttachmentSrc, openAttachment: _openAttachment } = useAttachment()
+const { getPossibleAttachmentSrc } = useAttachment()
 
 const {
   isPublic,
@@ -152,16 +152,6 @@ const open = (e: Event) => {
   openAttachmentModal()
 }
 
-const openAttachment = (item: any) => {
-  if (isMobileMode.value && !isExpandedForm.value) {
-    isExpandedForm.value = true
-
-    return
-  }
-
-  _openAttachment(item)
-}
-
 const onExpand = () => {
   if (isMobileMode.value) return
 
diff --git a/packages/nc-gui/components/dashboard/View.vue b/packages/nc-gui/components/dashboard/View.vue
index efa5afdf25..df91b6c335 100644
--- a/packages/nc-gui/components/dashboard/View.vue
+++ b/packages/nc-gui/components/dashboard/View.vue
@@ -47,6 +47,11 @@ watch(currentSidebarSize, () => {
 
 const sidebarWidth = computed(() => (isMobileMode.value ? viewportWidth.value : sideBarSize.value.old))
 
+const remToPx = (rem: number) => {
+  const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+  return rem * fontSize
+}
+
 const normalizedWidth = computed(() => {
   const maxSize = remToPx(viewportWidth.value <= 1560 ? 20 : 35)
   const minSize = remToPx(16)
@@ -147,11 +152,6 @@ onMounted(() => {
   handleSidebarOpenOnMobileForNonViews()
 })
 
-function remToPx(rem: number) {
-  const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
-  return rem * fontSize
-}
-
 function onResize(widthPercent: any) {
   if (isMobileMode.value) return
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 149865e924..ed79de6946 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -55,14 +55,6 @@ const isDayInPagedMonth = (date: dayjs.Dayjs) => {
   return date.month() === selectedMonth.value.month()
 }
 
-const getDayIndex = (date: dayjs.Dayjs) => {
-  let dayIndex = date.day() - 1
-  if (dayIndex === -1) {
-    dayIndex = 6
-  }
-  return dayIndex
-}
-
 const dragElement = ref<HTMLElement | null>(null)
 
 const draggingId = ref<string | null>(null)
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index 005a54bdf7..0a4a54eec0 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -84,7 +84,7 @@ const isPdf = (name: string, mimetype?: string) => {
   return name?.toLowerCase().endsWith('.pdf') || mimetype?.startsWith('application/pdf')
 }
 
-const isOffice = (name: string, mimetype?: string) => {
+const isOffice = (name: string, _mimetype?: string) => {
   return officeExt.some((e) => name?.toLowerCase().endsWith(`.${e}`))
 }
 

From 01c5a87d89d43bf9420687df541f85243e8d87df Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 21/42] fix: remove comments fix: update attachment cell ui
 fix: update attachment expand model

---
 .../components/cell/attachment/Carousel.vue   |  18 +-
 .../components/cell/attachment/Modal.vue      | 159 ++++++++----------
 .../components/cell/attachment/index.vue      |  88 ++++++----
 packages/nc-gui/components/nc/Tooltip.vue     |  16 +-
 4 files changed, 154 insertions(+), 127 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index b4cdc29e8e..1a8276d9e4 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -196,14 +196,14 @@ onMounted(() => {
           <component :is="iconMap.arrowRight" class="text-7xl" />
         </div>
 
-        <div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2">
+        <!--        <div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2">
           <NcButton class="!hover:bg-transparent" type="text" size="small" @click="toggleComment">
             <div class="flex gap-1 text-white justify-center items-center">
               Comments
               <GeneralIcon icon="messageCircle" />
             </div>
           </NcButton>
-        </div>
+        </div> -->
 
         <div class="text-white absolute right-2 top-2 cursor-pointer"></div>
 
@@ -253,7 +253,11 @@ onMounted(() => {
         </div>
 
         <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
-          <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
+          <NcTooltip
+            v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)"
+            color="light"
+            placement="bottom"
+          >
             <template #title> {{ $t('title.renameFile') }} </template>
             <NcButton
               size="xsmall"
@@ -265,14 +269,14 @@ onMounted(() => {
             </NcButton>
           </NcTooltip>
 
-          <NcTooltip v-if="!isReadonly" placement="bottom">
+          <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
             <template #title> {{ $t('title.downloadFile') }} </template>
             <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
               <component :is="iconMap.download" />
             </NcButton>
           </NcTooltip>
 
-          <NcTooltip v-if="!isReadonly" placement="bottom">
+          <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
             <template #title> {{ $t('title.removeFile') }} </template>
             <NcButton
               class="!hover:bg-transparent !text-white"
@@ -300,9 +304,9 @@ onMounted(() => {
           </template>
         </GeneralDeleteModal>
       </div>
-      <div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88">
+      <!--      <div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88">
         <LazySmartsheetExpandedFormSidebarComments />
-      </div>
+      </div> -->
     </div>
   </GeneralOverlay>
 </template>
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 6ceed95d6b..3f123f2309 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -28,6 +28,8 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
+const { isMobileMode } = useGlobal()
+
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -82,19 +84,28 @@ const handleFileDelete = (i: number) => {
 </script>
 
 <template>
-  <a-modal
+  <NcModal
     v-model:visible="modalVisible"
+    wrap-class-name="nc-modal-attachment-expand-cell"
     class="nc-attachment-modal"
     :class="{ active: modalVisible }"
     width="80%"
-    :footer="null"
-    wrap-class-name="nc-modal-attachment-expand-cell"
   >
-    <template #title>
-      <div class="flex gap-4">
+    <div class="flex justify-between pb-2 gap-4">
+      <div class="font-semibold underline">{{ column?.title }}</div>
+
+      <div class="flex items-center gap-2">
+        <NcButton v-if="selectedVisibleItems.length > 0" size="small" @click="bulkDownloadAttachments">
+          <div class="flex gap-2 items-center">
+            <GeneralIcon icon="download" />
+            {{ $t('activity.bulkDownload') }}
+          </div>
+        </NcButton>
+
         <NcButton
           v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)"
           class="nc-attach-file group"
+          size="small"
           data-testid="attachment-expand-file-picker-button"
           @click="open"
         >
@@ -104,65 +115,65 @@ const handleFileDelete = (i: number) => {
           </div>
         </NcButton>
 
-        <div class="flex items-center gap-2">
-          {{ $t('labels.viewingAttachmentsOf') }}
-          <div class="font-semibold underline">{{ column?.title }}</div>
-        </div>
+        <NcButton type="secondary" size="small" @click="modalVisible = false">
+          <GeneralIcon icon="close" />
+        </NcButton>
+      </div>
+    </div>
 
-        <div
-          v-if="selectedVisibleItems.includes(true) && selectedVisibleItems.length > 1"
-          class="flex flex-1 items-center gap-3 justify-end mr-[30px]"
-        >
-          <NcButton type="primary" class="nc-attachment-download-all" @click="bulkDownloadAttachments">
-            {{ $t('activity.bulkDownload') }}
-          </NcButton>
-        </div>
+    <div ref="dropZoneRef" tabindex="0" class="relative">
+      <div
+        v-if="isSharedForm || (!readOnly && !dragging && isOverDropZone)"
+        class="text-white absolute inset-0 bg-white flex flex-col items-center justify-center gap-2 border-dashed border-1 border-gray-700"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
+        <div class="text-gray-800 text-3xl">{{ $t('labels.dropHere') }}</div>
       </div>
-    </template>
-    <div ref="dropZoneRef" tabindex="0">
-      <template v-if="isSharedForm || (!readOnly && !dragging)">
-        <general-overlay
-          v-model="isOverDropZone"
-          inline
-          class="text-white ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
-        >
-          <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
-          <div class="text-white text-3xl">{{ $t('labels.dropHere') }}</div>
-        </general-overlay>
-      </template>
 
-      <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
-        <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col group gap-1">
-          <a-card class="nc-attachment-item group">
-            <NcCheckbox
-              v-model:checked="selectedVisibleItems[i]"
-              class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
-              :class="{ '!opacity-100': selectedVisibleItems[i] }"
+      <div
+        ref="sortableRef"
+        :class="{ dragging }"
+        class="grid max-h-140 overflow-auto nc-scrollbar-md md:grid-cols-3 xl:grid-cols-5 gap-y-8 gap-x-4 relative"
+      >
+        <div
+          v-for="(item, i) of visibleItems"
+          :key="`${item.title}-${i}`"
+          class="nc-attachment-item group flex border-1 gap-2 rounded-md border-gray-200 flex-col relative"
+        >
+          <NcCheckbox
+            v-model:checked="selectedVisibleItems[i]"
+            class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
+            :class="{ '!opacity-100': selectedVisibleItems[i] }"
+          />
+
+          <div
+            :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
+            class="nc-attachment h-full flex justify-center items-center overflow-hidden"
+          >
+            <LazyCellAttachmentPreviewImage
+              v-if="isImage(item.title, item.mimetype)"
+              :srcs="getPossibleAttachmentSrc(item)"
+              class="max-h-full h-64 m-auto rounded-md justify-center"
+              @click.stop="onClick(item)"
             />
 
-            <div
-              :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
-              class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
-            >
-              <LazyCellAttachmentPreviewImage
-                v-if="isImage(item.title, item.mimetype)"
-                :srcs="getPossibleAttachmentSrc(item)"
-                class="max-h-full h-64 m-auto justify-center"
-                @click.stop="onClick(item)"
-              />
+            <component
+              :is="FileIcon(item.icon)"
+              v-else-if="item.icon"
+              :height="isMobileMode ? 45 : 150"
+              :width="isMobileMode ? 45 : 150"
+              @click.stop="openAttachment(item)"
+            />
 
-              <component
-                :is="FileIcon(item.icon)"
-                v-else-if="item.icon"
-                height="150"
-                width="150"
-                @click.stop="openAttachment(item)"
-              />
+            <IcOutlineInsertDriveFile
+              v-else
+              :height="isMobileMode ? 45 : 150"
+              :width="isMobileMode ? 45 : 150"
+              @click.stop="openAttachment(item)"
+            />
+          </div>
 
-              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openAttachment(item)" />
-            </div>
-          </a-card>
-          <div class="relative flex" :title="item.title">
+          <div class="relative px-1 flex" :title="item.title">
             <div class="flex-auto truncate line-height-4">
               {{ item.title }}
             </div>
@@ -200,6 +211,7 @@ const handleFileDelete = (i: number) => {
         </div>
       </div>
     </div>
+
     <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
       <template #entity-preview>
         <span>
@@ -215,48 +227,19 @@ const handleFileDelete = (i: number) => {
         </span>
       </template>
     </GeneralDeleteModal>
-  </a-modal>
+  </NcModal>
 </template>
 
 <style lang="scss">
 .hide-ui {
   @apply h-0 w-0 overflow-hidden whitespace-nowrap;
-
-  // When the parent with class 'group' is hovered
   .group:hover & {
     @apply h-auto w-auto overflow-visible whitespace-normal;
   }
 }
 .nc-attachment-modal {
   .nc-attachment-item {
-    @apply !h-2/3 !min-h-[200px] flex items-center justify-center relative;
-
-    @supports (-moz-appearance: none) {
-      @apply hover:border-0;
-    }
-
-    &::after {
-      @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
-      content: '';
-    }
-
-    @supports (-moz-appearance: none) {
-      &:hover::after {
-        @apply ring shadow;
-      }
-
-      &:active::after {
-        @apply ring ring-accent ring-opacity-100 shadow;
-      }
-    }
-  }
-
-  .ant-card-body {
-    @apply !p-2 w-full h-full;
-  }
-
-  .ant-modal-body {
-    @apply !p-0;
+    @apply h-[200px] max-h-[200px] flex relative;
   }
 
   .dragging {
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index aaf28c73a5..2cbdf2642c 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -231,41 +231,41 @@ const handleFileDelete = (i: number) => {
     </template>
 
     <div
-      v-if="!isReadonly"
+      v-if="!isReadonly && active && !visibleItems.length"
       :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
-      class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none shadow-sm hover:(bg-primary bg-opacity-10)"
+      class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none"
       data-testid="attachment-cell-file-picker-button"
       tabindex="0"
-      @click="open"
       @keydown.enter="keydownEnter"
       @keydown.space="keydownSpace"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
       <NcTooltip placement="bottom" class="xs:w-full">
-        <template #title
-          ><span data-rec="true">{{ $t('activity.attachmentDrop') }} </span></template
-        >
+        <template #title>
+          <span data-rec="true">{{ $t('activity.attachmentDrop') }} </span>
+        </template>
 
-        <div
-          v-if="active || !visibleItems.length || (isForm && visibleItems.length)"
-          class="flex items-center gap-1 xs:(w-full min-w-12 h-7 justify-center)"
+        <NcButton
+          type="secondary"
+          size="xsmall"
+          data-testid="attachment-cell-file-picker-button"
+          class="!px-2 !h-5.5 !min-w-[fit-content]"
+          @click.stop="open"
         >
-          <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
-          <div
-            v-if="!visibleItems.length"
-            data-rec="true"
-            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-tiny xs:(justify-center rounded-lg text-sm)"
-          >
-            {{ $t('activity.addFiles') }}
+          <div class="flex items-center !text-xs gap-1 justify-center">
+            <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
+            <span class="text-[10px]">
+              {{ $t('activity.addFiles') }}
+            </span>
           </div>
-        </div>
+        </NcButton>
       </NcTooltip>
     </div>
 
     <div v-else class="flex" />
 
-    <template v-if="visibleItems.length">
+    <template v-if="visibleItems.length > 0">
       <div
         ref="sortableRef"
         :class="{
@@ -312,7 +312,6 @@ const handleFileDelete = (i: number) => {
                 'h-8': rowHeight === 2,
                 'h-16.8': rowHeight === 4,
                 'h-20.8 !w-30': rowHeight === 6 || isForm || isExpandedForm,
-                'ml-2': active,
               }"
               @click="onFileClick(item)"
             >
@@ -334,20 +333,49 @@ const handleFileDelete = (i: number) => {
         </template>
       </div>
 
-      <div
-        v-if="active || (isForm && visibleItems.length)"
-        class="xs:hidden group cursor-pointer flex gap-1 items-center rounded border-none p-1"
+      <NcTooltip
+        placement="bottom"
+        class="nc-action-icon !absolute !hidden right-0 nc-text-area-expand-btn group-hover:block z-3"
+        :class="{
+          'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
+          'top-1': !(isGrid && !isForm),
+        }"
+        :style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
       >
-        <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+        <template #title>{{ $t('activity.viewAttachment') }}</template>
+        <NcButton
+          type="secondary"
+          size="xsmall"
+          data-testid="attachment-cell-file-picker-button"
+          class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
+          @click.stop="onExpand"
+        >
+          <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-        <NcTooltip v-else placement="bottom" class="flex">
-          <template #title> {{ $t('activity.viewAttachment') }}</template>
+          <component :is="iconMap.expand" v-else class="transform group-hover:(!text-grey-800) text-gray-700 text-xs" />
+        </NcButton>
+      </NcTooltip>
 
-          <NcButton type="text" size="xsmall" @click.stop="onExpand">
-            <component :is="iconMap.expand" />
-          </NcButton>
-        </NcTooltip>
-      </div>
+      <NcTooltip
+        placement="bottom"
+        class="nc-action-icon !absolute !hidden left-0 nc-text-area-expand-btn group-hover:block z-3"
+        :class="{
+          'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
+          'top-1': !(isGrid && !isForm),
+        }"
+        :style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
+      >
+        <template #title>{{ $t('activity.addFiles') }}</template>
+        <NcButton
+          type="secondary"
+          size="xsmall"
+          data-testid="attachment-cell-file-picker-button"
+          class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
+          @click.stop="open"
+        >
+          <MaterialSymbolsAttachFile class="text-gray-500 text-tiny group-hover:(!text-grey-800) text-gray-700" />
+        </NcButton>
+      </NcTooltip>
     </template>
 
     <LazyCellAttachmentModal v-if="modalRendered" />
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
index c5c96b85e7..7ad4701885 100644
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -8,6 +8,7 @@ interface Props {
   modifierKey?: string
   tooltipStyle?: CSSProperties
   // force disable tooltip
+  color?: 'dark' | 'light'
   disabled?: boolean
   placement?: TooltipPlacement | undefined
   showOnTruncateOnly?: boolean
@@ -28,6 +29,8 @@ const hideOnClick = computed(() => props.hideOnClick)
 const placement = computed(() => props.placement ?? 'top')
 const wrapChild = computed(() => props.wrapChild ?? 'div')
 
+const color = computed(() => (props.color ? props.color : 'dark'))
+
 const el = ref()
 
 const showTooltip = controlledRef(false, {
@@ -117,7 +120,7 @@ const onClick = () => {
 <template>
   <a-tooltip
     v-model:visible="showTooltip"
-    :overlay-class-name="`nc-tooltip ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`"
+    :overlay-class-name="`nc-tooltip-${color} ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`"
     :overlay-style="tooltipStyle"
     :overlay-inner-style="overlayInnerStyle"
     arrow-point-at-center
@@ -139,7 +142,7 @@ const onClick = () => {
 .nc-tooltip.hidden {
   @apply invisible;
 }
-.nc-tooltip {
+.nc-tooltip-dark {
   .ant-tooltip-inner {
     @apply !px-2 !py-1 !rounded-lg !bg-gray-800;
   }
@@ -147,4 +150,13 @@ const onClick = () => {
     @apply !bg-gray-800;
   }
 }
+
+.nc-tooltip-light {
+  .ant-tooltip-inner {
+    @apply !px-2 !py-1 !text-gray-800 !rounded-lg !bg-gray-200;
+  }
+  .ant-tooltip-arrow-content {
+    @apply !bg-gray-200;
+  }
+}
 </style>

From 604602994148da7faa2850fb91fd41116cf526de Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 22/42] fix: ux fixes

---
 .../components/cell/attachment/Carousel.vue   |   5 +-
 .../cell/attachment/Preview/Pdf.vue           |   4 +-
 .../components/cell/attachment/index.vue      | 179 ++++++++++++------
 .../nc-gui/components/smartsheet/Form.vue     |   4 +-
 .../smartsheet/expanded-form/index.vue        |   8 +-
 5 files changed, 131 insertions(+), 69 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 1a8276d9e4..c66ea621f6 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -215,8 +215,9 @@ onMounted(() => {
                 :key="index"
                 :class="{
                   '!opacity-100': index === selectedIndex,
-                  '!basis-1/8': visibleItems.length >= 4,
-                  '!basis-1/3': visibleItems.length >= 1,
+                  '!basis-1/4': visibleItems.length >= 4,
+                  '!basis-1/3': visibleItems.length === 3,
+                  '!basis-1/2': visibleItems.length === 2,
                 }"
                 class="px-2 keep-open opacity-50 cursor-pointer"
                 @click="onThumbClick(index)"
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 8a6c5eda1f..9d4bd905f9 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -24,13 +24,13 @@ const openMethod = ref<'browser' | 'google' | undefined>()
     <GeneralIcon class="w-28 h-28" icon="pdfFile" />
 
     <div class="flex items-center justify-center gap-2">
-      <NcButton type="secondary" @click="openMethod = 'browser'">
+      <NcButton class="!w-52" type="secondary" @click="openMethod = 'browser'">
         <div class="flex items-center gap-1">
           <GeneralIcon icon="globe" />
           Open in browser
         </div>
       </NcButton>
-      <NcButton type="secondary" @click="openMethod = 'google'">
+      <NcButton type="secondary" class="!w-52" @click="openMethod = 'google'">
         <div class="flex items-center gap-1">
           <GeneralIcon class="w-4 h-4" icon="googleDocs" />
 
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 2cbdf2642c..9f6de88246 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -45,6 +45,8 @@ const {
   isForm,
   column,
   modalRendered,
+  downloadAttachment,
+  renameFile,
   modalVisible,
   attachments,
   visibleItems,
@@ -202,30 +204,89 @@ const handleFileDelete = (i: number) => {
 </script>
 
 <template>
+  <div v-if="isExpandedForm || isForm" class="form-attachment-cell">
+    <NcButton type="secondary" size="small" @click="open">
+      <div class="flex items-center !text-xs gap-1 justify-center">
+        <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
+        <span class="text-[10px]">
+          {{ $t('activity.addFiles') }}
+        </span>
+      </div>
+    </NcButton>
+
+    <div v-if="visibleItems.length > 0" class="grid mt-2 gap-2 grid-cols-3">
+      <div
+        v-for="(item, i) in visibleItems"
+        :key="`${item?.title}-${i}`"
+        class="nc-attachment-item group pt-2 gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
+      >
+        <div
+          :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
+          class="nc-attachment h-full flex justify-center items-center overflow-hidden"
+        >
+          <LazyCellAttachmentPreviewImage
+            v-if="isImage(item.title, item.mimetype)"
+            :srcs="getPossibleAttachmentSrc(item)"
+            class="max-h-full h-32 m-auto rounded-md justify-center"
+          />
+
+          <component :is="FileIcon(item.icon)" v-else-if="item.icon" :height="45" :width="45" />
+
+          <IcOutlineInsertDriveFile v-else :height="45" :width="45" />
+        </div>
+
+        <div class="relative px-1 flex" :title="item.title">
+          <div class="flex-auto truncate text-sm line-height-4">
+            {{ item.title }}
+          </div>
+          <div class="flex-none hide-ui transition-all transition-ease-in-out !h-6 flex items-center bg-white">
+            <NcTooltip placement="bottom">
+              <template #title> {{ $t('title.downloadFile') }} </template>
+              <NcButton class="!text-gray-500" size="xsmall" type="text" @click="downloadAttachment(item)">
+                <component :is="iconMap.download" />
+              </NcButton>
+            </NcTooltip>
+
+            <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
+              <template #title> {{ $t('title.renameFile') }} </template>
+              <NcButton size="xsmall" class="nc-attachment-rename !text-gray-500" type="text" @click="renameFile(item, i)">
+                <component :is="iconMap.rename" />
+              </NcButton>
+            </NcTooltip>
+
+            <NcTooltip v-if="!isReadonly" placement="bottom">
+              <template #title> {{ $t('title.removeFile') }} </template>
+              <NcButton class="!text-red-500" size="xsmall" type="text" @click.stop="onRemoveFileClick(item.title, i)">
+                <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+              </NcButton>
+            </NcTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
+    v-else
     ref="attachmentCellRef"
     :style="{
-      height:
-        isForm || isExpandedForm
-          ? undefined
-          : `max(${!rowHeight || rowHeight === 1 ? rowHeightInPx['1'] - 10 : rowHeightInPx[`${rowHeight}`] - 18}px, ${
-              isGrid ? '22px' : '32px'
-            })`,
+      height: `max(${!rowHeight || rowHeight === 1 ? rowHeightInPx['1'] - 10 : rowHeightInPx[`${rowHeight}`] - 18}px, ${
+        isGrid ? '22px' : '32px'
+      })`,
     }"
-    class="nc-attachment-cell relative flex color-transition gap-2 flex items-center w-full xs:(min-h-12 max-h-32)"
-    :class="{ 'justify-center': !active, 'justify-between': active, 'px-2': isExpandedForm }"
+    class="nc-attachment-cell relative group flex color-transition gap-2 flex items-center w-full xs:(min-h-12 max-h-32)"
+    :class="{ 'justify-center': !active, 'justify-between': active }"
   >
     <LazyCellAttachmentCarousel v-if="selectedFile" />
 
-    <template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
+    <template v-if="!isReadonly && !dragging && !!currentCellRef">
       <general-overlay
         v-model="isOverDropZone"
         inline
         :target="currentCellRef"
         data-rec="true"
-        class="nc-attachment-cell-dropzone text-white text-lg ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        class="nc-attachment-cell-dropzone text-white text-lg bg-gray-600/75 flex text-sm items-center justify-center gap-2"
       >
-        <MaterialSymbolsFileCopyOutline class="text-accent" />
+        <MaterialSymbolsFileCopyOutline />
         {{ $t('labels.dropHere') }}
       </general-overlay>
     </template>
@@ -263,19 +324,17 @@ const handleFileDelete = (i: number) => {
       </NcTooltip>
     </div>
 
-    <div v-else class="flex" />
-
     <template v-if="visibleItems.length > 0">
       <div
         ref="sortableRef"
         :class="{
-          'justify-center': !isExpandedForm && !isGallery && !isKanban,
-          'py-1': rowHeight === 1 && !isForm && !isExpandedForm,
-          'py-1.5 !gap-4 ': rowHeight !== 1 || isForm || isExpandedForm,
+          'justify-center': !isGallery && !isKanban,
+          'py-1': rowHeight === 1,
+          'py-1.5 !gap-4 ': rowHeight !== 1,
         }"
         class="nc-attachment-wrapper flex cursor-pointer w-full items-center flex-wrap gap-3 nc-scrollbar-thin mt-0 items-start px-[1px]"
         :style="{
-          maxHeight: isForm || isExpandedForm ? undefined : `max(100%, ${isGrid ? '22px' : '32px'})`,
+          maxHeight: `max(100%, ${isGrid ? '22px' : '32px'})`,
         }"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
@@ -286,7 +345,6 @@ const handleFileDelete = (i: number) => {
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div
                 class="nc-attachment flex items-center flex-col flex-wrap justify-center flex-auto"
-                :class="{ '!w-30': isForm || isExpandedForm }"
                 @click="() => onFileClick(item)"
               >
                 <LazyCellAttachmentPreviewImage
@@ -297,7 +355,7 @@ const handleFileDelete = (i: number) => {
                     'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
                     'h-8': rowHeight === 2,
                     'h-16.8': rowHeight === 4,
-                    'h-20.8': rowHeight === 6 || isForm || isExpandedForm,
+                    'h-20.8': rowHeight === 6,
                   }"
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
@@ -311,36 +369,26 @@ const handleFileDelete = (i: number) => {
                 'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
                 'h-8': rowHeight === 2,
                 'h-16.8': rowHeight === 4,
-                'h-20.8 !w-30': rowHeight === 6 || isForm || isExpandedForm,
+                'h-20.8 !w-30': rowHeight === 6,
               }"
               @click="onFileClick(item)"
             >
-              <component :is="FileIcon(item.icon)" v-if="item.icon" :class="{ 'h-13 w-13': isForm || isExpandedForm }" />
+              <component :is="FileIcon(item.icon)" v-if="item.icon" />
 
-              <IcOutlineInsertDriveFile v-else :class="{ 'h-13 w-13': isForm || isExpandedForm }" />
+              <IcOutlineInsertDriveFile v-else />
             </div>
-
-            <a-tooltip v-if="!isReadonly && (isForm || isExpandedForm)">
-              <template #title> {{ $t('title.removeFile') }} </template>
-              <component
-                :is="iconMap.closeCircle"
-                v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
-                class="nc-attachment-remove"
-                @click.stop="onRemoveFileClick(item.title, i)"
-              />
-            </a-tooltip>
           </NcTooltip>
         </template>
       </div>
 
       <NcTooltip
         placement="bottom"
-        class="nc-action-icon !absolute !hidden right-0 nc-text-area-expand-btn group-hover:block z-3"
+        class="nc-action-icon !absolute hidden right-0 nc-text-area-expand-btn !group-hover:block z-3"
         :class="{
-          'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
-          'top-1': !(isGrid && !isForm),
+          'top-0': isGrid && !(!rowHeight || rowHeight === 1),
+          'top-1': !isGrid,
         }"
-        :style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
+        :style="isGrid && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
       >
         <template #title>{{ $t('activity.viewAttachment') }}</template>
         <NcButton
@@ -358,12 +406,12 @@ const handleFileDelete = (i: number) => {
 
       <NcTooltip
         placement="bottom"
-        class="nc-action-icon !absolute !hidden left-0 nc-text-area-expand-btn group-hover:block z-3"
+        class="nc-action-icon !absolute hidden left-0 nc-text-area-expand-btn !group-hover:block z-3"
         :class="{
-          'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
-          'top-1': !(isGrid && !isForm),
+          'top-0': isGrid && !(!rowHeight || rowHeight === 1),
+          'top-1': !isGrid,
         }"
-        :style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
+        :style="isGrid && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
       >
         <template #title>{{ $t('activity.addFiles') }}</template>
         <NcButton
@@ -379,32 +427,41 @@ const handleFileDelete = (i: number) => {
     </template>
 
     <LazyCellAttachmentModal v-if="modalRendered" />
-
-    <LazyGeneralDeleteModal
-      v-if="isForm || isExpandedForm"
-      v-model:visible="isConfirmModalOpen"
-      entity-name="File"
-      :on-delete="() => handleFileDelete(filetoDelete.i)"
-    >
-      <template #entity-preview>
-        <span>
-          <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-            <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
-            <div
-              class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
-              :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-            >
-              {{ filetoDelete.title }}
-            </div>
-          </div>
-        </span>
-      </template>
-    </LazyGeneralDeleteModal>
   </div>
+  <LazyGeneralDeleteModal
+    v-if="isForm || isExpandedForm"
+    v-model:visible="isConfirmModalOpen"
+    entity-name="File"
+    :on-delete="() => handleFileDelete(filetoDelete.i)"
+  >
+    <template #entity-preview>
+      <span>
+        <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
+          <GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
+          <div
+            class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
+            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+          >
+            {{ filetoDelete.title }}
+          </div>
+        </div>
+      </span>
+    </template>
+  </LazyGeneralDeleteModal>
   <LazyCellAttachmentAttachFile v-if="isNewAttachmentModalOpen" v-model:value="isNewAttachmentModalOpen" />
 </template>
 
 <style lang="scss">
+.nc-data-cell {
+  &:has(.form-attachment-cell) {
+    @apply !border-none;
+    box-shadow: none !important;
+  }
+
+  .nc-cell-attachment {
+    @apply !border-none;
+  }
+}
 .nc-cell {
   .nc-attachment-cell {
     .nc-attachment {
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index edb4e62f35..03cec5e57b 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1687,7 +1687,9 @@ useEventListener(
 .nc-input {
   @apply appearance-none w-full;
   &:not(.layout-list) {
-    @apply !bg-white rounded-lg border-solid border-1 border-gray-200 !focus-within:border-brand-500;
+    &:not(.nc-cell-attachment) {
+      @apply !bg-white rounded-lg border-solid border-1 border-gray-200 !focus-within:border-brand-500;
+    }
   }
   &.layout-list {
     @apply h-auto !pl-0 !py-1;
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index b633764159..8513bdc757 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -795,7 +795,7 @@ export default {
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
                     class="bg-white flex-1 <lg:w-full px-1 min-h-[37px] flex items-center relative"
                     :class="{
-                      ' !select-text nc-system-field': isReadOnlyVirtualCell(col),
+                      '!select-text nc-system-field': isReadOnlyVirtualCell(col),
                       '!select-text nc-readonly-div-data-cell': readOnly,
                     }"
                   >
@@ -1055,12 +1055,14 @@ export default {
   @apply !rounded-lg;
   transition: all 0.3s;
 
-  &:not(.nc-readonly-div-data-cell):not(.nc-system-field) {
+  &:not(.nc-readonly-div-data-cell):not(.nc-system-field):not(.nc-attachment-cell) {
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
   }
   &:not(:focus-within):hover:not(.nc-readonly-div-data-cell):not(.nc-system-field) {
     @apply !border-1;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
+    &:not(.nc-attachment-cell) {
+      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
+    }
   }
 
   &.nc-readonly-div-data-cell,

From f71980199782aa8ffe8fe8a4f18a179b5cf4ce94 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 23/42] fix: rename modal, cursors not working

---
 .../components/cell/attachment/Carousel.vue   | 34 +++++++++++++++++--
 .../components/cell/attachment/utils.ts       |  6 ++++
 .../nc-gui/components/nc/Carousel/index.vue   | 24 -------------
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index c66ea621f6..7c2cf52ef0 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -3,13 +3,16 @@ import type { CarouselApi } from '../../nc/Carousel/interface'
 import { useAttachmentCell } from './utils'
 import { isOffice } from '~/utils/fileUtils'
 
-const { selectedFile, visibleItems, downloadAttachment, removeFile, renameFile, isPublic, isReadonly } = useAttachmentCell()!
+const { selectedFile, visibleItems, downloadAttachment, removeFile, renameFile, isPublic, isReadonly, isRenameModalOpen } =
+  useAttachmentCell()!
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()
 
+/*
 const openComments = ref(false)
+*/
 
 const { isUIAllowed } = useRoles()
 
@@ -99,10 +102,35 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
   })
 })
 
-const toggleComment = () => {
-  openComments.value = !openComments.value
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  if (isRenameModalOpen.value) return
+  const prevKey = ['ArrowLeft', 'Left', 'a', 'A']
+  const nextKey = ['ArrowRight', 'Right', 'd', 'D']
+
+  if (prevKey.includes(event.key)) {
+    event.preventDefault()
+    emblaMainApi.value?.scrollPrev()
+    return
+  }
+
+  if (nextKey.includes(event.key)) {
+    event.preventDefault()
+    emblaMainApi.value?.scrollNext()
+  }
 }
 
+/* const toggleComment = () => {
+  openComments.value = !openComments.value
+} */
+
 onMounted(() => {
   if (!isPublic.value && !isExpandedFormOpen.value && isUIAllowed('commentList')) {
     const { loadComments } = useRowCommentsOrThrow()
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index 674104fb2a..dcc7f6f3e0 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -56,6 +56,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       reset: true,
     })
 
+    const isRenameModalOpen = ref(false)
+
     const { appInfo } = useGlobal()
 
     const defaultAttachmentMeta = {
@@ -266,6 +268,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     async function renameFile(attachment: AttachmentType, idx: number, updateSelectedFile?: boolean) {
       return new Promise<boolean>((resolve) => {
+        isRenameModalOpen.value = true
         const { close } = useDialog(RenameFile, {
           title: attachment.title,
           onRename: (newTitle: string) => {
@@ -277,10 +280,12 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
               selectedFile.value = { ...attachment, title: newTitle }
             }
 
+            isRenameModalOpen.value = false
             resolve(true)
           },
           onCancel: () => {
             close()
+            isRenameModalOpen.value = false
             resolve(true)
           },
         })
@@ -429,6 +434,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       stopCamera,
       videoStream,
       permissionGranted,
+      isRenameModalOpen,
     }
   },
   'useAttachmentCell',
diff --git a/packages/nc-gui/components/nc/Carousel/index.vue b/packages/nc-gui/components/nc/Carousel/index.vue
index 94bff7bd63..510a43c611 100644
--- a/packages/nc-gui/components/nc/Carousel/index.vue
+++ b/packages/nc-gui/components/nc/Carousel/index.vue
@@ -10,30 +10,6 @@ const emits = defineEmits<CarouselEmits>()
 
 const carouselArgs = useProvideCarousel(props, emits)
 
-onMounted(() => {
-  document.addEventListener('keydown', onKeyDown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeyDown)
-})
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === 'vertical' ? ['ArrowUp', 'Up', 'w', 'W'] : ['ArrowLeft', 'Left', 'a', 'A']
-  const nextKey = props.orientation === 'vertical' ? ['ArrowDown', 'Down', 's', 'S'] : ['ArrowRight', 'Right', 'd', 'D']
-
-  if (prevKey.includes(event.key)) {
-    event.preventDefault()
-    carouselArgs.scrollPrev()
-    return
-  }
-
-  if (nextKey.includes(event.key)) {
-    event.preventDefault()
-    carouselArgs.scrollNext()
-  }
-}
-
 defineExpose(carouselArgs)
 </script>
 

From 99207aee5771baab1e6fcd5b310246b2546c8fcc Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 24/42] tests: update attachments tests

---
 .../nc-gui/components/cell/attachment/index.vue |  3 +--
 .../Dashboard/common/Cell/AttachmentCell.ts     | 17 +++++++++++++++--
 .../tests/db/columns/columnAttachments.spec.ts  |  1 +
 .../playwright/tests/db/views/viewForm.spec.ts  |  5 +++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 9f6de88246..a4b1aa4af9 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -205,7 +205,7 @@ const handleFileDelete = (i: number) => {
 
 <template>
   <div v-if="isExpandedForm || isForm" class="form-attachment-cell">
-    <NcButton type="secondary" size="small" @click="open">
+    <NcButton data-testid="attachment-cell-file-picker-button" type="secondary" size="small" @click="open">
       <div class="flex items-center !text-xs gap-1 justify-center">
         <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
         <span class="text-[10px]">
@@ -295,7 +295,6 @@ const handleFileDelete = (i: number) => {
       v-if="!isReadonly && active && !visibleItems.length"
       :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
       class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none"
-      data-testid="attachment-cell-file-picker-button"
       tabindex="0"
       @keydown.enter="keydownEnter"
       @keydown.space="keydownSpace"
diff --git a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
index 255e589dd0..b0df2e13d7 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
@@ -21,9 +21,22 @@ export class AttachmentCellPageObject extends BasePage {
   // filePath: to attach multiple files, pass an array of file paths
   // e.g. ['path/to/file1', 'path/to/file2']
   //
-  async addFile({ index, columnHeader, filePath }: { index?: number; columnHeader: string; filePath: string[] }) {
+  async addFile({
+    index,
+    columnHeader,
+    filePath,
+    skipElemClick,
+  }: {
+    index?: number;
+    columnHeader: string;
+    filePath: string[];
+    skipElemClick?: boolean;
+  }) {
     await this.get({ index, columnHeader }).scrollIntoViewIfNeeded();
-    await this.get({ index, columnHeader }).click({ position: { x: 1, y: 1 } });
+
+    if (!skipElemClick) {
+      await this.get({ index, columnHeader }).click({ position: { x: 1, y: 1 } });
+    }
 
     await this.get({ index, columnHeader }).locator('[data-testid="attachment-cell-file-picker-button"]').click();
 
diff --git a/tests/playwright/tests/db/columns/columnAttachments.spec.ts b/tests/playwright/tests/db/columns/columnAttachments.spec.ts
index c7c95bbbbe..a375c729d4 100644
--- a/tests/playwright/tests/db/columns/columnAttachments.spec.ts
+++ b/tests/playwright/tests/db/columns/columnAttachments.spec.ts
@@ -78,6 +78,7 @@ test.describe('Attachment column', () => {
     await sharedForm.cell.attachment.addFile({
       columnHeader: 'testAttach',
       filePath: [`${process.cwd()}/fixtures/sampleFiles/1.json`],
+      skipElemClick: true,
     });
 
     await sharedForm.rootPage.waitForTimeout(1000);
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index 745602d896..2f66edb011 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -226,6 +226,7 @@ test.describe('Form view', () => {
     await sharedForm.cell.attachment.addFile({
       columnHeader: 'Attachment',
       filePath: [`${process.cwd()}/fixtures/sampleFiles/sampleImage.jpeg`],
+      skipElemClick: true,
     });
     await sharedForm.cell.fillText({
       columnHeader: 'Title',
@@ -1355,6 +1356,7 @@ test.describe('Form view: field validation', () => {
     await sharedForm.cell.attachment.addFile({
       columnHeader: 'Attachment',
       filePath: [`${process.cwd()}/fixtures/sampleFiles/sampleImage.jpeg`],
+      skipElemClick: true,
     });
 
     const attError = await sharedForm.getFormFieldErrors({ title: 'Attachment' });
@@ -1369,6 +1371,7 @@ test.describe('Form view: field validation', () => {
     await sharedForm.cell.attachment.addFile({
       columnHeader: 'Attachment',
       filePath: [`${process.cwd()}/fixtures/sampleFiles/Image/2.png`],
+      skipElemClick: true,
     });
     await attError.verify({ hasError: false });
 
@@ -1401,6 +1404,7 @@ test.describe('Form view: field validation', () => {
     await surveyForm.cell.attachment.addFile({
       columnHeader: 'Attachment',
       filePath: [`${process.cwd()}/fixtures/sampleFiles/sampleImage.jpeg`],
+      skipElemClick: true,
     });
 
     const surveryAttError = await surveyForm.getFormFieldErrors();
@@ -1415,6 +1419,7 @@ test.describe('Form view: field validation', () => {
     await surveyForm.cell.attachment.addFile({
       columnHeader: 'Attachment',
       filePath: [`${process.cwd()}/fixtures/sampleFiles/Image/2.png`],
+      skipElemClick: true,
     });
     await surveryAttError.verify({ hasError: false });
 

From 1be7d6a6da088b85bda28f92f33f433fb2c982d2 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 25/42] tests: update attachments tests

---
 .../Dashboard/common/Cell/AttachmentCell.ts     | 17 +++++++++++++++--
 .../playwright/tests/db/views/viewForm.spec.ts  |  2 ++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
index b0df2e13d7..e41e5ad52e 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
@@ -52,9 +52,22 @@ export class AttachmentCellPageObject extends BasePage {
     await this.rootPage.waitForTimeout(750);
   }
 
-  async removeFile({ attIndex, index, columnHeader }: { attIndex: number; index?: number; columnHeader: string }) {
+  async removeFile({
+    attIndex,
+    index,
+    columnHeader,
+    skipElemClick,
+  }: {
+    attIndex: number;
+    index?: number;
+    columnHeader: string;
+    skipElemClick?: boolean;
+  }) {
     await this.get({ index, columnHeader }).scrollIntoViewIfNeeded();
-    await this.get({ index, columnHeader }).click({ position: { x: 1, y: 1 } });
+
+    if (!skipElemClick) {
+      await this.get({ index, columnHeader }).click({ position: { x: 1, y: 1 } });
+    }
 
     await this.get({ index, columnHeader }).locator('.nc-attachment-item').nth(attIndex).hover();
     await this.get({ index, columnHeader })
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index 2f66edb011..1719da3ae9 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -1366,6 +1366,7 @@ test.describe('Form view: field validation', () => {
     await sharedForm.cell.attachment.removeFile({
       columnHeader: 'Attachment',
       attIndex: 0,
+      skipElemClick: true,
     });
 
     await sharedForm.cell.attachment.addFile({
@@ -1414,6 +1415,7 @@ test.describe('Form view: field validation', () => {
     await surveyForm.cell.attachment.removeFile({
       columnHeader: 'Attachment',
       attIndex: 0,
+      skipElemClick: true,
     });
 
     await surveyForm.cell.attachment.addFile({

From ebddb85c1ae4bd86799efe96b1c5566a7aad49e2 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 26/42] tests: update attachments tests

---
 packages/nc-gui/components/cell/attachment/index.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index a4b1aa4af9..cab9d419f1 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -256,7 +256,12 @@ const handleFileDelete = (i: number) => {
 
             <NcTooltip v-if="!isReadonly" placement="bottom">
               <template #title> {{ $t('title.removeFile') }} </template>
-              <NcButton class="!text-red-500" size="xsmall" type="text" @click.stop="onRemoveFileClick(item.title, i)">
+              <NcButton
+                class="!text-red-500 nc-attachment-remove"
+                size="xsmall"
+                type="text"
+                @click.stop="onRemoveFileClick(item.title, i)"
+              >
                 <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
               </NcButton>
             </NcTooltip>

From 7a732741bc9df0f9b859306449481fc01f8b8212 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 27/42] fix(minor): alignment adjustments

---
 .../nc-gui/components/cell/attachment/Modal.vue  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 3f123f2309..4e664ab12f 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -91,8 +91,8 @@ const handleFileDelete = (i: number) => {
     :class="{ active: modalVisible }"
     width="80%"
   >
-    <div class="flex justify-between pb-2 gap-4">
-      <div class="font-semibold underline">{{ column?.title }}</div>
+    <div class="flex justify-between pb-6 gap-4">
+      <div class="font-semibold text-xl">{{ column?.title }}</div>
 
       <div class="flex items-center gap-2">
         <NcButton v-if="selectedVisibleItems.length > 0" size="small" @click="bulkDownloadAttachments">
@@ -173,7 +173,7 @@ const handleFileDelete = (i: number) => {
             />
           </div>
 
-          <div class="relative px-1 flex" :title="item.title">
+          <div class="relative px-4 pb-2 flex text-gray-500 text-sm" :title="item.title">
             <div class="flex-auto truncate line-height-4">
               {{ item.title }}
             </div>
@@ -181,21 +181,25 @@ const handleFileDelete = (i: number) => {
               <NcTooltip placement="bottom">
                 <template #title> {{ $t('title.downloadFile') }} </template>
                 <NcButton class="!text-gray-500" size="xsmall" type="text" @click="downloadAttachment(item)">
-                  <component :is="iconMap.download" />
+                  <component :is="iconMap.download" class="h-[14px] w-[14px]" />
                 </NcButton>
               </NcTooltip>
 
               <NcTooltip v-if="!isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                 <template #title> {{ $t('title.renameFile') }} </template>
                 <NcButton size="xsmall" class="nc-attachment-rename !text-gray-500" type="text" @click="renameFile(item, i)">
-                  <component :is="iconMap.rename" />
+                  <component :is="iconMap.rename" class="h-[14px] w-[14px]" />
                 </NcButton>
               </NcTooltip>
 
               <NcTooltip v-if="!readOnly" placement="bottom">
                 <template #title> {{ $t('title.removeFile') }} </template>
                 <NcButton class="!text-red-500" size="xsmall" type="text" @click="onRemoveFileClick(item.title, i)">
-                  <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+                  <component
+                    :is="iconMap.delete"
+                    v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
+                    class="h-[14px] w-[14px]"
+                  />
                 </NcButton>
               </NcTooltip>
             </div>

From ecc9860b771cd43c985ff92bc457f40bf09caa02 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 28/42] fix: styling issues

---
 .../components/cell/attachment/Carousel.vue   | 14 ++++--
 .../components/cell/attachment/index.vue      | 49 ++++++++++---------
 .../nc-gui/components/general/DeleteModal.vue | 12 ++++-
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 7c2cf52ef0..e9d4ce959b 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -84,6 +84,8 @@ const goNext = () => {
 watchOnce(emblaMainApi, async (emblaMainApi) => {
   if (!emblaMainApi) return
 
+  container.value?.focus()
+
   emblaThumbnailApi.value?.on('reInit', onSelect)
 
   emblaMainApi.on('select', onSelect)
@@ -290,18 +292,18 @@ onMounted(() => {
             <template #title> {{ $t('title.renameFile') }} </template>
             <NcButton
               size="xsmall"
-              class="nc-attachment-rename !hover:bg-transparent !text-white"
+              class="nc-attachment-rename !hover:text-gray-400 !hover:bg-transparent !text-white"
               type="text"
               @click="renameFile(selectedFile, selectedIndex, true)"
             >
-              <component :is="iconMap.rename" />
+              <component :is="iconMap.rename" class="!hover:text-gray-400" />
             </NcButton>
           </NcTooltip>
 
           <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
             <template #title> {{ $t('title.downloadFile') }} </template>
             <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
-              <component :is="iconMap.download" />
+              <component :is="iconMap.download" class="!hover:text-gray-400" />
             </NcButton>
           </NcTooltip>
 
@@ -313,7 +315,11 @@ onMounted(() => {
               type="text"
               @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
             >
-              <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+              <component
+                :is="iconMap.delete"
+                v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
+                class="!hover:text-gray-400"
+              />
             </NcButton>
           </NcTooltip>
         </div>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index cab9d419f1..2bcf8a52b8 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -129,7 +129,7 @@ watch(
 const isNewAttachmentModalOpen = ref(false)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
-  if (e.key === 'Enter' && !isReadonly.value) {
+  if (e.key === 'Enter' && !isReadonly.value && !selectedFile.value) {
     if (isNewAttachmentModalOpen.value) return
     e.stopPropagation()
     if (!modalVisible.value && !isMobileMode.value) {
@@ -214,11 +214,11 @@ const handleFileDelete = (i: number) => {
       </div>
     </NcButton>
 
-    <div v-if="visibleItems.length > 0" class="grid mt-2 gap-2 grid-cols-3">
+    <div v-if="visibleItems.length > 0" class="grid mt-2 gap-2 grid-cols-2">
       <div
         v-for="(item, i) in visibleItems"
         :key="`${item?.title}-${i}`"
-        class="nc-attachment-item group pt-2 gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
+        class="nc-attachment-item group gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
       >
         <div
           :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
@@ -227,40 +227,52 @@ const handleFileDelete = (i: number) => {
           <LazyCellAttachmentPreviewImage
             v-if="isImage(item.title, item.mimetype)"
             :srcs="getPossibleAttachmentSrc(item)"
-            class="max-h-full h-32 m-auto rounded-md justify-center"
+            object-fit="cover"
+            class="!w-full h-42 object-cover !m-0 rounded-t-[5px] justify-center"
+            @click="selectedFile = item"
           />
 
-          <component :is="FileIcon(item.icon)" v-else-if="item.icon" :height="45" :width="45" />
+          <component :is="FileIcon(item.icon)" v-else-if="item.icon" :height="45" :width="45" @click="selectedFile = item" />
 
-          <IcOutlineInsertDriveFile v-else :height="45" :width="45" />
+          <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click="selectedFile = item" />
         </div>
 
         <div class="relative px-1 flex" :title="item.title">
-          <div class="flex-auto truncate text-sm line-height-4">
+          <div class="flex-auto text-[13px] items-center truncate text-sm line-height-4">
             {{ item.title }}
           </div>
-          <div class="flex-none hide-ui transition-all transition-ease-in-out !h-6 flex items-center bg-white">
+          <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
             <NcTooltip placement="bottom">
               <template #title> {{ $t('title.downloadFile') }} </template>
-              <NcButton class="!text-gray-500" size="xsmall" type="text" @click="downloadAttachment(item)">
-                <component :is="iconMap.download" />
+              <NcButton
+                class="!p-0 !w-5 !h-5 text-gray-500 !min-w-[fit-content]"
+                size="xsmall"
+                type="text"
+                @click="downloadAttachment(item)"
+              >
+                <component :is="iconMap.download" class="!text-xs" />
               </NcButton>
             </NcTooltip>
 
             <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
               <template #title> {{ $t('title.renameFile') }} </template>
-              <NcButton size="xsmall" class="nc-attachment-rename !text-gray-500" type="text" @click="renameFile(item, i)">
-                <component :is="iconMap.rename" />
+              <NcButton
+                size="xsmall"
+                class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content]"
+                type="text"
+                @click="renameFile(item, i)"
+              >
+                <component :is="iconMap.rename" class="text-xs" />
               </NcButton>
             </NcTooltip>
 
             <NcTooltip v-if="!isReadonly" placement="bottom">
               <template #title> {{ $t('title.removeFile') }} </template>
               <NcButton
-                class="!text-red-500 nc-attachment-remove"
+                class="!p-0 !h-5 !w-5 !text-red-500 nc-attachment-remove !min-w-[fit-content]"
                 size="xsmall"
                 type="text"
-                @click.stop="onRemoveFileClick(item.title, i)"
+                @click="onRemoveFileClick(item.title, i)"
               >
                 <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
               </NcButton>
@@ -485,15 +497,6 @@ const handleFileDelete = (i: number) => {
   }
   .nc-attachment-item {
     @apply relative;
-
-    .nc-attachment-remove {
-      @apply absolute right-0.8 top-0.8 rounded hidden p-0.5 bg-white text-lg leading-none;
-      box-shadow: 0px 0px 4px #bbb;
-    }
-
-    &:hover .nc-attachment-remove {
-      @apply block;
-    }
   }
 }
 </style>
diff --git a/packages/nc-gui/components/general/DeleteModal.vue b/packages/nc-gui/components/general/DeleteModal.vue
index e1f8908b9a..f0734dcf79 100644
--- a/packages/nc-gui/components/general/DeleteModal.vue
+++ b/packages/nc-gui/components/general/DeleteModal.vue
@@ -11,6 +11,8 @@ const visible = useVModel(props, 'visible', emits)
 
 const isLoading = ref(false)
 
+const modalRef = ref<HTMLElement>()
+
 const { t } = useI18n()
 
 const deleteLabel = computed(() => props.deleteLabel ?? t('general.delete'))
@@ -40,11 +42,19 @@ onKeyStroke('Enter', () => {
 
   onDelete()
 })
+
+watch(visible, (value) => {
+  if (value) {
+    setTimeout(() => {
+      modalRef.value?.focus()
+    }, 100)
+  }
+})
 </script>
 
 <template>
   <GeneralModal v-model:visible="visible" size="small" centered>
-    <div class="flex flex-col p-6">
+    <div ref="modalRef" class="flex flex-col p-6">
       <div class="flex flex-row pb-2 mb-3 font-medium text-lg text-gray-800">{{ deleteLabel }} {{ props.entityName }}</div>
 
       <div class="mb-3 text-gray-800">

From c19e71f3be70e31f4b8f733e2e2a620247e14ec3 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 29/42] chore: change Files => files

---
 packages/nc-gui/lang/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index a63e301dc9..b373cba87a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -391,7 +391,7 @@
   "title": {
     "webcam": "Webcam",
     "uploadViaUrl": "Upload via URL",
-    "localFiles": "Local Files",
+    "localFiles": "Local files",
     "renameBase": "Rename Base",
     "renameWorkspace": "Rename Workspace",
     "renamingWorkspace": "Renaming Workspace",

From 7f40692fc1ee14950287321f7228b0694f486ece Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH 30/42] fix: styling issues

---
 .../components/cell/attachment/AttachFile.vue |  4 +-
 .../components/cell/attachment/Modal.vue      | 80 +++++++++++--------
 .../cell/attachment/UploadProviders/Local.vue |  6 +-
 .../cell/attachment/UploadProviders/Url.vue   |  2 +-
 .../components/cell/attachment/index.vue      |  9 ++-
 5 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/AttachFile.vue b/packages/nc-gui/components/cell/attachment/AttachFile.vue
index 1c636a0d96..9ce0306f92 100644
--- a/packages/nc-gui/components/cell/attachment/AttachFile.vue
+++ b/packages/nc-gui/components/cell/attachment/AttachFile.vue
@@ -47,8 +47,8 @@ watch(activeMenu, (newVal, oldValue) => {
     @keydown.esc="dialogShow = false"
   >
     <div class="flex h-full flex-row">
-      <div style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem" class="px-2 !-full flex-grow bg-gray-100">
-        <NcMenu class="!h-full !bg-gray-100">
+      <div style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem" class="px-2 !-full flex-grow bg-gray-50">
+        <NcMenu class="!h-full !bg-gray-50">
           <NcMenuItem
             key="local"
             :class="{
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 4e664ab12f..aea60ff891 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -28,8 +28,6 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { isMobileMode } = useGlobal()
-
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -136,70 +134,84 @@ const handleFileDelete = (i: number) => {
         class="grid max-h-140 overflow-auto nc-scrollbar-md md:grid-cols-3 xl:grid-cols-5 gap-y-8 gap-x-4 relative"
       >
         <div
-          v-for="(item, i) of visibleItems"
-          :key="`${item.title}-${i}`"
-          class="nc-attachment-item group flex border-1 gap-2 rounded-md border-gray-200 flex-col relative"
+          v-for="(item, i) in visibleItems"
+          :key="`${item?.title}-${i}`"
+          class="nc-attachment-item group gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
         >
           <NcCheckbox
             v-model:checked="selectedVisibleItems[i]"
             class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
             :class="{ '!opacity-100': selectedVisibleItems[i] }"
           />
-
           <div
-            :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
-            class="nc-attachment h-full flex justify-center items-center overflow-hidden"
+            :class="{
+              'cursor-move': dragging,
+              'cursor-pointer': !dragging,
+              'h-full': !isImage(item.title, item.mimetype),
+            }"
+            class="nc-attachment flex justify-center items-center overflow-hidden"
           >
             <LazyCellAttachmentPreviewImage
               v-if="isImage(item.title, item.mimetype)"
               :srcs="getPossibleAttachmentSrc(item)"
-              class="max-h-full h-64 m-auto rounded-md justify-center"
+              object-fit="cover"
+              class="!w-full h-42 object-cover !m-0 rounded-t-[5px] justify-center"
               @click.stop="onClick(item)"
             />
 
             <component
               :is="FileIcon(item.icon)"
               v-else-if="item.icon"
-              :height="isMobileMode ? 45 : 150"
-              :width="isMobileMode ? 45 : 150"
+              :height="45"
+              :width="45"
               @click.stop="openAttachment(item)"
             />
 
-            <IcOutlineInsertDriveFile
-              v-else
-              :height="isMobileMode ? 45 : 150"
-              :width="isMobileMode ? 45 : 150"
-              @click.stop="openAttachment(item)"
-            />
+            <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="openAttachment(item)" />
           </div>
 
-          <div class="relative px-4 pb-2 flex text-gray-500 text-sm" :title="item.title">
-            <div class="flex-auto truncate line-height-4">
+          <div class="relative px-1 flex" :title="item.title">
+            <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
               {{ item.title }}
-            </div>
-            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-6 flex items-center bg-white">
+
+              <template #title>
+                {{ item.title }}
+              </template>
+            </NcTooltip>
+            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
               <NcTooltip placement="bottom">
                 <template #title> {{ $t('title.downloadFile') }} </template>
-                <NcButton class="!text-gray-500" size="xsmall" type="text" @click="downloadAttachment(item)">
-                  <component :is="iconMap.download" class="h-[14px] w-[14px]" />
+                <NcButton
+                  class="!p-0 !w-5 !h-5 text-gray-500 !min-w-[fit-content]"
+                  size="xsmall"
+                  type="text"
+                  @click="downloadAttachment(item)"
+                >
+                  <component :is="iconMap.download" class="!text-xs" />
                 </NcButton>
               </NcTooltip>
 
               <NcTooltip v-if="!isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                 <template #title> {{ $t('title.renameFile') }} </template>
-                <NcButton size="xsmall" class="nc-attachment-rename !text-gray-500" type="text" @click="renameFile(item, i)">
-                  <component :is="iconMap.rename" class="h-[14px] w-[14px]" />
+                <NcButton
+                  size="xsmall"
+                  class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content]"
+                  type="text"
+                  @click="renameFile(item, i)"
+                >
+                  <component :is="iconMap.rename" class="text-xs" />
                 </NcButton>
               </NcTooltip>
 
-              <NcTooltip v-if="!readOnly" placement="bottom">
+              <NcTooltip v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                 <template #title> {{ $t('title.removeFile') }} </template>
-                <NcButton class="!text-red-500" size="xsmall" type="text" @click="onRemoveFileClick(item.title, i)">
-                  <component
-                    :is="iconMap.delete"
-                    v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
-                    class="h-[14px] w-[14px]"
-                  />
+                <NcButton
+                  class="!p-0 !h-4 !w-4 !text-red-500 nc-attachment-remove !min-w-[fit-content]"
+                  size="xsmall"
+                  type="text"
+                  @click="onRemoveFileClick(item.title, i)"
+                >
+                  <component :is="iconMap.delete" />
                 </NcButton>
               </NcTooltip>
             </div>
@@ -251,5 +263,9 @@ const handleFileDelete = (i: number) => {
       @apply !pointer-events-none;
     }
   }
+
+  .nc-checkbox > .ant-checkbox {
+    box-shadow: none !important;
+  }
 }
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
index 035569cf1d..704cefe33f 100644
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
       ref="dropZoneRef"
       :class="{
         'border-brand-500': isOverDropZone,
-        'border-dashed border-1': !tempFiles.length,
+        'border-dashed border-2': !tempFiles.length,
       }"
       data-testid="attachment-drop-zone"
       :style="`height: ${tempFiles.length > 0 ? '324px' : '100%'}`"
@@ -115,11 +115,11 @@ onBeforeUnmount(() => {
     >
       <div v-if="!tempFiles.length" class="flex cursor-pointer items-center justify-center flex-col gap-2">
         <template v-if="!isOverDropZone">
-          <component :is="iconMap.upload" class="w-5 h-5" />
+          <component :is="iconMap.upload" class="w-6 h-6" />
           <h1>
             {{ $t('labels.clickTo') }}
 
-            <span class="font-semibold"> {{ $t('labels.browseFiles') }} </span>
+            <span class="font-semibold text-brand-500"> {{ $t('labels.browseFiles') }} </span>
             {{ $t('general.or') }}
             <span class="font-semibold"> {{ $t('labels.dragFilesHere') }} </span>
 
diff --git a/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue b/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
index 55571c69de..148fb217c1 100644
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
@@ -38,7 +38,7 @@ const deleteAttachment = (index: number) => {
   tempAttachments.value.splice(index, 1)
 }
 
-const isValidUrl = ref(true)
+const isValidUrl = ref(false)
 
 const errorMessage = ref('')
 
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 2bcf8a52b8..ef1edacd1b 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -129,6 +129,7 @@ watch(
 const isNewAttachmentModalOpen = ref(false)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (modalVisible.value) return
   if (e.key === 'Enter' && !isReadonly.value && !selectedFile.value) {
     if (isNewAttachmentModalOpen.value) return
     e.stopPropagation()
@@ -238,9 +239,13 @@ const handleFileDelete = (i: number) => {
         </div>
 
         <div class="relative px-1 flex" :title="item.title">
-          <div class="flex-auto text-[13px] items-center truncate text-sm line-height-4">
+          <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
             {{ item.title }}
-          </div>
+
+            <template #title>
+              {{ item.title }}
+            </template>
+          </NcTooltip>
           <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
             <NcTooltip placement="bottom">
               <template #title> {{ $t('title.downloadFile') }} </template>

From 0771924b7a5f3f314dcc26c3ffa7f66c0b52b429 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 31/42] fix: update color

---
 packages/nc-gui/components/cell/attachment/Modal.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index aea60ff891..e2fbf05a29 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -170,15 +170,18 @@ const handleFileDelete = (i: number) => {
             <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="openAttachment(item)" />
           </div>
 
-          <div class="relative px-1 flex" :title="item.title">
-            <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
+          <div class="relative px-1 items-center flex" :title="item.title">
+            <NcTooltip
+              show-on-truncate-only
+              class="flex-auto truncate w-full text-[12px] items-center text-gray-700 text-sm line-height-4"
+            >
               {{ item.title }}
 
               <template #title>
                 {{ item.title }}
               </template>
             </NcTooltip>
-            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
+            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 flex items-center bg-white">
               <NcTooltip placement="bottom">
                 <template #title> {{ $t('title.downloadFile') }} </template>
                 <NcButton
@@ -248,7 +251,7 @@ const handleFileDelete = (i: number) => {
 
 <style lang="scss">
 .hide-ui {
-  @apply h-0 w-0 overflow-hidden whitespace-nowrap;
+  @apply h-0 w-0 overflow-x-hidden whitespace-nowrap;
   .group:hover & {
     @apply h-auto w-auto overflow-visible whitespace-normal;
   }

From 8284243e6ce61f38ef6f955c0f8501184bb2aac3 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 32/42] fix: alignment issues

---
 packages/nc-gui/components/cell/attachment/Modal.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index e2fbf05a29..249ec7aeaf 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -136,7 +136,7 @@ const handleFileDelete = (i: number) => {
         <div
           v-for="(item, i) in visibleItems"
           :key="`${item?.title}-${i}`"
-          class="nc-attachment-item group gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
+          class="nc-attachment-item group gap-1 flex border-1 rounded-md border-gray-200 flex-col relative"
         >
           <NcCheckbox
             v-model:checked="selectedVisibleItems[i]"
@@ -147,15 +147,14 @@ const handleFileDelete = (i: number) => {
             :class="{
               'cursor-move': dragging,
               'cursor-pointer': !dragging,
-              'h-full': !isImage(item.title, item.mimetype),
             }"
-            class="nc-attachment flex justify-center items-center overflow-hidden"
+            class="nc-attachment h-full flex justify-center items-center overflow-hidden"
           >
             <LazyCellAttachmentPreviewImage
               v-if="isImage(item.title, item.mimetype)"
               :srcs="getPossibleAttachmentSrc(item)"
               object-fit="cover"
-              class="!w-full h-42 object-cover !m-0 rounded-t-[5px] justify-center"
+              class="!w-full object-cover !m-0 rounded-t-[5px] justify-center"
               @click.stop="onClick(item)"
             />
 
@@ -170,7 +169,7 @@ const handleFileDelete = (i: number) => {
             <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="openAttachment(item)" />
           </div>
 
-          <div class="relative px-1 items-center flex" :title="item.title">
+          <div class="relative px-1 pb-1 items-center flex" :title="item.title">
             <NcTooltip
               show-on-truncate-only
               class="flex-auto truncate w-full text-[12px] items-center text-gray-700 text-sm line-height-4"

From 35d26c9b705bbe3a029930863eea5e686ec4c323 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 33/42] fix: min width for attachment column

---
 .../components/cell/attachment/AttachFile.vue |  5 +++-
 .../components/smartsheet/grid/Table.vue      | 26 +++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/AttachFile.vue b/packages/nc-gui/components/cell/attachment/AttachFile.vue
index 9ce0306f92..4308258ceb 100644
--- a/packages/nc-gui/components/cell/attachment/AttachFile.vue
+++ b/packages/nc-gui/components/cell/attachment/AttachFile.vue
@@ -51,6 +51,7 @@ watch(activeMenu, (newVal, oldValue) => {
         <NcMenu class="!h-full !bg-gray-50">
           <NcMenuItem
             key="local"
+            class="!hover:bg-gray-200 !hover:text-gray-800 rounded-md"
             :class="{
               'active-menu': activeMenu === 'local',
             }"
@@ -64,6 +65,7 @@ watch(activeMenu, (newVal, oldValue) => {
           <NcMenuItem
             v-if="!isPublic"
             key="url"
+            class="!hover:bg-gray-200 !hover:text-gray-800 rounded-md"
             :class="{
               'active-menu': activeMenu === 'url',
             }"
@@ -76,6 +78,7 @@ watch(activeMenu, (newVal, oldValue) => {
           </NcMenuItem>
           <NcMenuItem
             key="webcam"
+            class="!hover:bg-gray-200 !hover:text-gray-800 rounded-md"
             :class="{
               'active-menu': activeMenu === 'webcam',
             }"
@@ -115,7 +118,7 @@ watch(activeMenu, (newVal, oldValue) => {
 <style lang="scss">
 .nc-modal-attachment-create {
   .active-menu {
-    @apply !bg-gray-200 font-sembold text-brand-500 rounded-md;
+    @apply bg-brand-50 font-sembold text-brand-500 rounded-md;
   }
 }
 
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 727e5c356f..74b819c6c4 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -128,6 +128,7 @@ const {
   isViewColumnsLoading: _isViewColumnsLoading,
   updateGridViewColumn,
   gridViewCols,
+  metaColumnById,
   resizingColOldWith,
 } = useViewColumnsOrThrow()
 
@@ -1102,12 +1103,33 @@ const saveOrUpdateRecords = async (
 // #Grid Resize
 const onresize = (colID: string | undefined, event: any) => {
   if (!colID) return
-  updateGridViewColumn(colID, { width: event.detail })
+
+  // Set 80px minimum width for attachment cells
+  if (metaColumnById.value[colID].uidt === UITypes.Attachment) {
+    const size = event.detail.split('px')[0]
+    if (+size < 80) {
+      updateGridViewColumn(colID, { width: '80px' })
+    } else {
+      updateGridViewColumn(colID, { width: event.detail })
+    }
+  } else {
+    updateGridViewColumn(colID, { width: event.detail })
+  }
 }
 
 const onXcResizing = (cn: string | undefined, event: any) => {
   if (!cn) return
-  gridViewCols.value[cn].width = `${event.detail}`
+  // Set 80px minimum width for attachment cells
+  if (metaColumnById.value[cn].uidt === UITypes.Attachment) {
+    const size = event.detail.split('px')[0]
+    if (+size < 80) {
+      gridViewCols.value[cn].width = '80px'
+    } else {
+      gridViewCols.value[cn].width = `${event.detail}`
+    }
+  } else {
+    gridViewCols.value[cn].width = `${event.detail}`
+  }
 }
 
 const onXcStartResizing = (cn: string | undefined, event: any) => {

From 06a6557cc9d39bfad51e08a261621ee8e5bc9e27 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 34/42] fix: icon size

---
 packages/nc-gui/components/cell/attachment/Modal.vue   |  8 ++++----
 .../cell/attachment/UploadProviders/Local.vue          |  2 +-
 packages/nc-gui/components/cell/attachment/index.vue   | 10 +++++++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 249ec7aeaf..5820cde0a6 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -189,7 +189,7 @@ const handleFileDelete = (i: number) => {
                   type="text"
                   @click="downloadAttachment(item)"
                 >
-                  <component :is="iconMap.download" class="!text-xs" />
+                  <component :is="iconMap.download" class="!text-xs h-13px w-13px" />
                 </NcButton>
               </NcTooltip>
 
@@ -197,11 +197,11 @@ const handleFileDelete = (i: number) => {
                 <template #title> {{ $t('title.renameFile') }} </template>
                 <NcButton
                   size="xsmall"
-                  class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content]"
+                  class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content] gap-2"
                   type="text"
                   @click="renameFile(item, i)"
                 >
-                  <component :is="iconMap.rename" class="text-xs" />
+                  <component :is="iconMap.rename" class="text-xs h-13px w-13px" />
                 </NcButton>
               </NcTooltip>
 
@@ -213,7 +213,7 @@ const handleFileDelete = (i: number) => {
                   type="text"
                   @click="onRemoveFileClick(item.title, i)"
                 >
-                  <component :is="iconMap.delete" />
+                  <component :is="iconMap.delete" class="text-xs h-13px w-13px" />
                 </NcButton>
               </NcTooltip>
             </div>
diff --git a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
index 704cefe33f..70aec07a3b 100644
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
@@ -165,7 +165,7 @@ onBeforeUnmount(() => {
         </div>
       </template>
     </div>
-    <div v-if="tempFiles.length" class="flex gap-2 pt-1 bg-white w-full items-center justify-end">
+    <div v-if="tempFiles.length" class="flex gap-2 pt-2 bg-white w-full items-center justify-end">
       <NcButton :disabled="isLoading" type="secondary" size="small" @click="closeMenu">
         {{ $t('labels.cancel') }}
       </NcButton>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index ef1edacd1b..604f07bb45 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -255,7 +255,7 @@ const handleFileDelete = (i: number) => {
                 type="text"
                 @click="downloadAttachment(item)"
               >
-                <component :is="iconMap.download" class="!text-xs" />
+                <component :is="iconMap.download" class="!text-xs h-13px w-13px" />
               </NcButton>
             </NcTooltip>
 
@@ -267,7 +267,7 @@ const handleFileDelete = (i: number) => {
                 type="text"
                 @click="renameFile(item, i)"
               >
-                <component :is="iconMap.rename" class="text-xs" />
+                <component :is="iconMap.rename" class="text-xs h-13px w-13px" />
               </NcButton>
             </NcTooltip>
 
@@ -279,7 +279,11 @@ const handleFileDelete = (i: number) => {
                 type="text"
                 @click="onRemoveFileClick(item.title, i)"
               >
-                <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+                <component
+                  :is="iconMap.delete"
+                  v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
+                  class="text-xs h-13px w-13px"
+                />
               </NcButton>
             </NcTooltip>
           </div>

From 3847f14cb6c23319275950ef9dcb720b02ec7a46 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 35/42] chore: icon size change

---
 .../components/cell/attachment/UploadProviders/Local.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
index 70aec07a3b..b8844aadd6 100644
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
@@ -113,9 +113,9 @@ onBeforeUnmount(() => {
       class="flex flex-col items-center justify-center h-full w-full flex-grow-1 rounded-lg"
       @click="tempFiles.length > 0 ? () => {} : open()"
     >
-      <div v-if="!tempFiles.length" class="flex cursor-pointer items-center justify-center flex-col gap-2">
+      <div v-if="!tempFiles.length" class="flex cursor-pointer items-center justify-center flex-col gap-4">
         <template v-if="!isOverDropZone">
-          <component :is="iconMap.upload" class="w-6 h-6" />
+          <component :is="iconMap.upload" class="w-8 h-8 text-gray-500" />
           <h1>
             {{ $t('labels.clickTo') }}
 
@@ -127,7 +127,7 @@ onBeforeUnmount(() => {
           </h1>
         </template>
         <template v-if="isOverDropZone">
-          <component :is="iconMap.upload" class="w-5 text-brand-500 h-5" />
+          <component :is="iconMap.upload" class="w-8 text-brand-500 h-8" />
           <h1 class="text-brand-500 font-bold">{{ $t('labels.dropHere') }}</h1>
         </template>
       </div>

From f0b22f7c53528e42717bdb403acf5d6c64bb18ef Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 36/42] fix: add comments and review fixes

---
 .../components/cell/attachment/Carousel.vue   | 37 ++++++++++---------
 .../components/cell/attachment/index.vue      |  2 +-
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index e9d4ce959b..ee9460fc65 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -45,7 +45,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
   const target = e.target as HTMLElement
-  if (!target.closest('.keep-open') && !target.closest('.nc-button') && !target?.closest('img') && !target?.closest('video')) {
+  if (!target.closest('.keep-open') && !target.closest('.nc-button') && !target.closest('img') && !target.closest('video')) {
     selectedFile.value = false
   }
 })
@@ -81,9 +81,12 @@ const goNext = () => {
   emblaThumbnailApi.value.scrollNext()
 }
 
+// When the carousel is initialized, we set the selected index to the index of the selected file
+// and scroll to that index. We only need to do this once, so we use watchOnce.
 watchOnce(emblaMainApi, async (emblaMainApi) => {
   if (!emblaMainApi) return
 
+  // The focus is set to the container so that the keyboard navigation works
   container.value?.focus()
 
   emblaThumbnailApi.value?.on('reInit', onSelect)
@@ -131,7 +134,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 /* const toggleComment = () => {
   openComments.value = !openComments.value
-} */
+}
 
 onMounted(() => {
   if (!isPublic.value && !isExpandedFormOpen.value && isUIAllowed('commentList')) {
@@ -139,6 +142,11 @@ onMounted(() => {
     loadComments()
   }
 })
+*/
+
+const initEmblaApi = (val: any) => {
+  emblaMainApi.value = val
+}
 </script>
 
 <template>
@@ -170,10 +178,7 @@ onMounted(() => {
           </h3>
         </div>
 
-        <NcCarousel
-          class="!absolute inset-y-16 inset-x-24 keep-open flex justify-center items-center"
-          @init-api="(val) => (emblaMainApi = val)"
-        >
+        <NcCarousel class="!absolute inset-y-16 inset-x-24 keep-open flex justify-center items-center" @init-api="initEmblaApi">
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
               <div v-if="selectedIndex === index" class="justify-center w-full h-full flex items-center">
@@ -211,18 +216,10 @@ onMounted(() => {
           </NcCarouselContent>
         </NcCarousel>
 
-        <div
-          v-if="emblaMainApi?.canScrollPrev()"
-          class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white left-2 h-full flex items-center inset-y-0 my-0"
-          @click="goPrev"
-        >
+        <div v-if="emblaMainApi?.canScrollPrev()" class="left-2 carousel-navigation" @click="goPrev">
           <component :is="iconMap.arrowLeft" class="text-7xl" />
         </div>
-        <div
-          v-if="emblaMainApi?.canScrollNext()"
-          class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white right-2 h-full flex items-center inset-y-0 my-0"
-          @click="goNext"
-        >
+        <div v-if="emblaMainApi?.canScrollNext()" class="right-2 carousel-navigation" @click="goNext">
           <component :is="iconMap.arrowRight" class="text-7xl" />
         </div>
 
@@ -346,9 +343,15 @@ onMounted(() => {
   </GeneralOverlay>
 </template>
 
+<style scoped lang="scss">
+.carousel-navigation {
+  @apply absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white h-full flex items-center inset-y-0 my-0;
+}
+</style>
+
 <style lang="scss">
 .nc-attachment-carousel {
-  width: max-content;
+  @apply w-max;
 }
 
 .carousel-container {
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 604f07bb45..e188b7c8a4 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -229,7 +229,7 @@ const handleFileDelete = (i: number) => {
             v-if="isImage(item.title, item.mimetype)"
             :srcs="getPossibleAttachmentSrc(item)"
             object-fit="cover"
-            class="!w-full h-42 object-cover !m-0 rounded-t-[5px] justify-center"
+            class="!w-full !h-42 object-cover !m-0 rounded-t-[5px] justify-center"
             @click="selectedFile = item"
           />
 

From 7c72c22567773557646975741db668eb93c76532 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 37/42] fix: add pdf-object

---
 .../nc-gui/components/cell/attachment/Preview/Pdf.vue | 11 ++++++-----
 packages/nc-gui/plugins/pdf-object.ts                 |  5 +++++
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 packages/nc-gui/plugins/pdf-object.ts

diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 9d4bd905f9..ea8ee11d2c 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -40,17 +40,18 @@ const openMethod = ref<'browser' | 'google' | undefined>()
     </div>
   </div>
 
-  <iframe
+  <pdf-object
     v-if="openMethod === 'browser'"
     :class="props.class"
-    :src="src[currentIndex]"
-    width="100%"
-    height="100%"
+    :url="src[currentIndex]"
+    class="w-full h-full"
     @error="handleError"
-  ></iframe>
+  />
+
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
+    type="application/pdf"
     :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src[currentIndex])}&embedded=true`"
     width="100%"
     height="100%"
diff --git a/packages/nc-gui/plugins/pdf-object.ts b/packages/nc-gui/plugins/pdf-object.ts
new file mode 100644
index 0000000000..51f3a4fce7
--- /dev/null
+++ b/packages/nc-gui/plugins/pdf-object.ts
@@ -0,0 +1,5 @@
+import PDFObjectPlugin from 'pdfobject-vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(PDFObjectPlugin)
+})

From 6ca2dd5f3a241c30508acc4dcdef6eefb9b86346 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 38/42] fix: lock downloadFile

---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index ee9460fc65..4ea34a9cd3 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -299,7 +299,12 @@ const initEmblaApi = (val: any) => {
 
           <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
             <template #title> {{ $t('title.downloadFile') }} </template>
-            <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
+            <NcButton
+              class="!hover:bg-transparent !text-white"
+              size="xsmall"
+              type="text"
+              @click="downloadAttachment(selectedFile)"
+            >
               <component :is="iconMap.download" class="!hover:text-gray-400" />
             </NcButton>
           </NcTooltip>

From c463d1183589b60707dc1a842367e6a2493bf19a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 39/42] fix: video player in cloud

---
 packages/nc-gui/components/cell/attachment/Preview/Video.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index d17447a403..3f588f6bd4 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -42,7 +42,6 @@ onBeforeUnmount(() => {
   <video
     ref="videoPlayer"
     controls
-    crossorigin
     playsinline
     :class="{
       '!w-128 !h-72': isAudio(title ?? '', mimeType),

From 8c63ad52a0f3fd356c1160a482016b856dd77688 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 40/42] fix: player min-width and open attachment in carousel

---
 packages/nc-gui/components/cell/attachment/Modal.vue   | 10 ++--------
 .../components/cell/attachment/Preview/Video.vue       |  3 +--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 5820cde0a6..879db62531 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -158,15 +158,9 @@ const handleFileDelete = (i: number) => {
               @click.stop="onClick(item)"
             />
 
-            <component
-              :is="FileIcon(item.icon)"
-              v-else-if="item.icon"
-              :height="45"
-              :width="45"
-              @click.stop="openAttachment(item)"
-            />
+            <component :is="FileIcon(item.icon)" v-else-if="item.icon" :height="45" :width="45" @click.stop="onClick(item)" />
 
-            <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="openAttachment(item)" />
+            <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="onClick(item)" />
           </div>
 
           <div class="relative px-1 pb-1 items-center flex" :title="item.title">
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index 3f588f6bd4..080638ab0c 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -44,10 +44,9 @@ onBeforeUnmount(() => {
     controls
     playsinline
     :class="{
-      '!w-128 !h-72': isAudio(title ?? '', mimeType),
       [props.class]: props.class,
     }"
-    class="videoplayer w-full"
+    class="videoplayer !min-w-128 !min-h-72 w-full"
   >
     <source v-for="(source, id) in props.src" :key="id" :src="source" :type="mimeType" />
   </video>

From 0634526554b3db9da150deaa5d59ad0bd0f3c837 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:28 +0000
Subject: [PATCH 41/42] fix: nav triggering close fix: rerender nav controls on
 index change

---
 .../components/cell/attachment/Carousel.vue      | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 4ea34a9cd3..0fcfd7541d 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -216,10 +216,20 @@ const initEmblaApi = (val: any) => {
           </NcCarouselContent>
         </NcCarousel>
 
-        <div v-if="emblaMainApi?.canScrollPrev()" class="left-2 carousel-navigation" @click="goPrev">
+        <div
+          v-if="emblaMainApi?.canScrollPrev()"
+          :key="selectedIndex"
+          class="left-2 carousel-navigation keep-open"
+          @click="goPrev"
+        >
           <component :is="iconMap.arrowLeft" class="text-7xl" />
         </div>
-        <div v-if="emblaMainApi?.canScrollNext()" class="right-2 carousel-navigation" @click="goNext">
+        <div
+          v-if="emblaMainApi?.canScrollNext()"
+          :key="selectedIndex"
+          class="right-2 carousel-navigation keep-open"
+          @click="goNext"
+        >
           <component :is="iconMap.arrowRight" class="text-7xl" />
         </div>
 
@@ -350,7 +360,7 @@ const initEmblaApi = (val: any) => {
 
 <style scoped lang="scss">
 .carousel-navigation {
-  @apply absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white h-full flex items-center inset-y-0 my-0;
+  @apply absolute text-gray-400 hover:text-white  cursor-pointer text-white h-full flex items-center inset-y-0 my-0;
 }
 </style>
 

From 8edc86a89f0f5fc05095b05c18cb6510d079bf70 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Thu, 25 Jul 2024 10:12:00 +0530
Subject: [PATCH 42/42] fix: sync dependencies

---
 packages/nc-gui/package.json       |   4 +
 packages/nocodb-sdk/src/lib/Api.ts |  90 +++++
 pnpm-lock.yaml                     | 541 ++++++++++++++++++-----------
 3 files changed, 430 insertions(+), 205 deletions(-)

diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 37c7eff766..bf9026a3d2 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -62,6 +62,7 @@
     "dagre": "^0.8.5",
     "dayjs": "^1.11.11",
     "deep-object-diff": "^1.1.9",
+    "embla-carousel-vue": "^8.1.7",
     "emoji-mart-vue-fast": "^15.0.2",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
@@ -79,7 +80,10 @@
     "nocodb-sdk": "workspace:^",
     "papaparse": "^5.4.1",
     "parse-github-url": "^1.0.2",
+    "pdfobject": "^2.3.0",
+    "pdfobject-vue": "^0.0.4",
     "pinia": "^2.1.7",
+    "plyr": "^3.7.8",
     "qrcode": "^1.5.3",
     "rfdc": "^1.3.1",
     "showdown": "^2.1.0",
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 36373d1c4e..e95c9b80e0 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -9332,6 +9332,55 @@ export class Api<
         ...params,
       }),
 
+    /**
+ * @description Download attachment from a shared view
+ * 
+ * @tags Public
+ * @name DataAttachmentDownload
+ * @summary Get Shared View Attachment
+ * @request GET:/api/v2/public/shared-view/{sharedViewUuid}/downloadAttachment/{columnId}/{rowId}
+ * @response `200` `{
+  \** URL to download the attachment *\
+  url?: string,
+  \** Path to download the attachment *\
+  path?: string,
+
+}` OK
+ * @response `400` `{
+  \** @example BadRequest [Error]: <ERROR MESSAGE> *\
+  msg: string,
+
+}`
+ */
+    dataAttachmentDownload: (
+      sharedViewUuid: string,
+      columnId: IdType,
+      rowId: any,
+      query?: {
+        /** URL or Path of the attachment */
+        urlOrPath?: string;
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<
+        {
+          /** URL to download the attachment */
+          url?: string;
+          /** Path to download the attachment */
+          path?: string;
+        },
+        {
+          /** @example BadRequest [Error]: <ERROR MESSAGE> */
+          msg: string;
+        }
+      >({
+        path: `/api/v2/public/shared-view/${sharedViewUuid}/downloadAttachment/${columnId}/${rowId}`,
+        method: 'GET',
+        query: query,
+        format: 'json',
+        ...params,
+      }),
+
     /**
  * @description List Shared View Grouped Data
  * 
@@ -11826,6 +11875,47 @@ export class Api<
         ...params,
       }),
 
+    /**
+ * @description Download attachment from a given row
+ * 
+ * @tags DB Data Table Row
+ * @name AttachmentDownload
+ * @summary Download Attachment
+ * @request GET:/api/v2/downloadAttachment/{modelId}/{columnId}/{rowId}
+ * @response `200` `{
+  \** URL to download attachment *\
+  url?: string,
+  \** Path to download attachment *\
+  path?: string,
+
+}` OK
+ */
+    attachmentDownload: (
+      modelId: string,
+      columnId: string,
+      rowId: string,
+      query?: {
+        /** URL or Path of the attachment */
+        urlOrPath?: string;
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<
+        {
+          /** URL to download attachment */
+          url?: string;
+          /** Path to download attachment */
+          path?: string;
+        },
+        any
+      >({
+        path: `/api/v2/downloadAttachment/${modelId}/${columnId}/${rowId}`,
+        method: 'GET',
+        query: query,
+        format: 'json',
+        ...params,
+      }),
+
     /**
  * @description Copy links from the one cell and paste them into another cell or delete all records from cell
  * 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63cf9098b6..db41cf9c8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,19 +39,19 @@ importers:
     dependencies:
       '@braks/revue-draggable':
         specifier: ^0.4.3
-        version: 0.4.3(vue@3.4.33)
+        version: 0.4.3(vue@3.4.34)
       '@ckpack/vue-color':
         specifier: ^1.5.0
-        version: 1.5.0(vue@3.4.33)
+        version: 1.5.0(vue@3.4.34)
       '@iconify/vue':
         specifier: ^4.1.2
-        version: 4.1.2(vue@3.4.33)
+        version: 4.1.2(vue@3.4.34)
       '@nuxt/image':
         specifier: ^1.3.0
         version: 1.3.0
       '@pinia/nuxt':
         specifier: ^0.5.1
-        version: 0.5.1(vue@3.4.33)
+        version: 0.5.1(vue@3.4.34)
       '@tiptap/extension-link':
         specifier: ^2.4.0
         version: 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)
@@ -75,28 +75,28 @@ importers:
         version: 2.4.0(@tiptap/pm@2.4.0)
       '@tiptap/vue-3':
         specifier: 2.4.0
-        version: 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)(vue@3.4.33)
+        version: 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)(vue@3.4.34)
       '@vue-flow/additional-components':
         specifier: ^1.3.3
-        version: 1.3.3(@vue-flow/core@1.31.0)(vue@3.4.33)
+        version: 1.3.3(@vue-flow/core@1.31.0)(vue@3.4.34)
       '@vue-flow/core':
         specifier: ^1.30.1
-        version: 1.31.0(vue@3.4.33)
+        version: 1.31.0(vue@3.4.34)
       '@vuelidate/core':
         specifier: ^2.0.3
-        version: 2.0.3(vue@3.4.33)
+        version: 2.0.3(vue@3.4.34)
       '@vuelidate/validators':
         specifier: ^2.0.4
-        version: 2.0.4(vue@3.4.33)
+        version: 2.0.4(vue@3.4.34)
       '@vueuse/core':
         specifier: ^10.7.2
-        version: 10.7.2(vue@3.4.33)
+        version: 10.7.2(vue@3.4.34)
       '@vueuse/integrations':
         specifier: ^10.7.2
-        version: 10.7.2(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.33)
+        version: 10.7.2(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.34)
       ant-design-vue:
         specifier: ^3.2.20
-        version: 3.2.20(vue@3.4.33)
+        version: 3.2.20(vue@3.4.34)
       chart.js:
         specifier: ^4.4.2
         version: 4.4.2
@@ -115,9 +115,12 @@ importers:
       deep-object-diff:
         specifier: ^1.1.9
         version: 1.1.9
+      embla-carousel-vue:
+        specifier: ^8.1.7
+        version: 8.1.7(vue@3.4.34)
       emoji-mart-vue-fast:
         specifier: ^15.0.2
-        version: 15.0.2(vue@3.4.33)
+        version: 15.0.2(vue@3.4.34)
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -166,9 +169,18 @@ importers:
       parse-github-url:
         specifier: ^1.0.2
         version: 1.0.2
+      pdfobject:
+        specifier: ^2.3.0
+        version: 2.3.0
+      pdfobject-vue:
+        specifier: ^0.0.4
+        version: 0.0.4(pdfobject@2.3.0)(vue@3.4.34)
       pinia:
         specifier: ^2.1.7
-        version: 2.1.7(vue@3.4.33)
+        version: 2.1.7(vue@3.4.34)
+      plyr:
+        specifier: ^3.7.8
+        version: 3.7.8
       qrcode:
         specifier: ^1.5.3
         version: 1.5.3
@@ -204,28 +216,28 @@ importers:
         version: 13.11.0
       vue-advanced-cropper:
         specifier: ^2.8.8
-        version: 2.8.8(vue@3.4.33)
+        version: 2.8.8(vue@3.4.34)
       vue-barcode-reader:
         specifier: ^1.0.3
         version: 1.0.3
       vue-chartjs:
         specifier: ^5.3.1
-        version: 5.3.1(chart.js@4.4.2)(vue@3.4.33)
+        version: 5.3.1(chart.js@4.4.2)(vue@3.4.34)
       vue-dompurify-html:
         specifier: ^3.1.2
-        version: 3.1.2(vue@3.4.33)
+        version: 3.1.2(vue@3.4.34)
       vue-github-button:
         specifier: ^3.1.0
         version: 3.1.0
       vue-i18n:
         specifier: ^9.9.1
-        version: 9.9.1(vue@3.4.33)
+        version: 9.9.1(vue@3.4.34)
       vue-qrcode-reader:
         specifier: 3.1.9
         version: 3.1.9
       vue3-calendar-heatmap:
         specifier: ^2.0.5
-        version: 2.0.5(tippy.js@6.3.7)(vue@3.4.33)
+        version: 2.0.5(tippy.js@6.3.7)(vue@3.4.34)
       vue3-contextmenu:
         specifier: ^0.2.12
         version: 0.2.12
@@ -234,10 +246,10 @@ importers:
         version: 1.0.7
       vue3-text-clamp:
         specifier: ^0.1.2
-        version: 0.1.2(resize-detector@0.3.0)(vue@3.4.33)
+        version: 0.1.2(resize-detector@0.3.0)(vue@3.4.34)
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.4.33)
+        version: 4.1.0(vue@3.4.34)
       xlsx:
         specifier: https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
         version: '@cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz'
@@ -373,7 +385,7 @@ importers:
         version: 2.4.6
       '@vueuse/nuxt':
         specifier: ^10.7.2
-        version: 10.7.2(nuxt@3.11.2)(vue@3.4.33)
+        version: 10.7.2(nuxt@3.11.2)(vue@3.4.34)
       '@windicss/plugin-animations':
         specifier: ^1.0.9
         version: 1.0.9
@@ -415,7 +427,7 @@ importers:
         version: 0.18.5(@vue/compiler-sfc@3.4.27)
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(vue@3.4.33)
+        version: 0.26.0(vue@3.4.34)
       vite-plugin-monaco-editor:
         specifier: ^1.1.0
         version: 1.1.0(monaco-editor@0.45.0)
@@ -1173,14 +1185,14 @@ packages:
     resolution: {integrity: sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==}
     dev: false
 
-  /@ant-design/icons-vue@6.1.0(vue@3.4.33):
+  /@ant-design/icons-vue@6.1.0(vue@3.4.34):
     resolution: {integrity: sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==}
     peerDependencies:
       vue: latest
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.3.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /@antfu/eslint-config-basic@0.26.3(@typescript-eslint/parser@5.62.0)(eslint@8.56.0):
@@ -3154,7 +3166,7 @@ packages:
     engines: {node: '>=8.9'}
     dev: false
 
-  /@braks/revue-draggable@0.4.3(vue@3.4.33):
+  /@braks/revue-draggable@0.4.3(vue@3.4.34):
     resolution: {integrity: sha512-wmsfNHJQgSX0HFA726r+cm6ixYs+z/KLxfg1cx6xZ1PBGeZsuQCACdNdoKckyr/IH8FgIbBoIH0/6QiSbW3tEQ==}
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
@@ -3163,12 +3175,12 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      '@vueuse/core': 7.7.1(vue@3.4.33)
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.14.8(vue@3.4.33)
+      '@vueuse/core': 7.7.1(vue@3.4.34)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.14.9(vue@3.4.34)
     dev: false
 
-  /@ckpack/vue-color@1.5.0(vue@3.4.33):
+  /@ckpack/vue-color@1.5.0(vue@3.4.34):
     resolution: {integrity: sha512-dj1zXVyay2m4LdlLJCQSdIS2FYwUl77BZqyKmUXiehyqjCP0bGYnPcL38lrShzYUc2FdkYQX8ANZZjRahd4PQw==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -3176,7 +3188,7 @@ packages:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
       material-colors: 1.2.6
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /@clickhouse/client-common@0.2.9:
@@ -4452,13 +4464,13 @@ packages:
       - supports-color
     dev: true
 
-  /@iconify/vue@4.1.2(vue@3.4.33):
+  /@iconify/vue@4.1.2(vue@3.4.34):
     resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
     peerDependencies:
       vue: latest
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /@img/sharp-darwin-arm64@0.33.2:
@@ -4762,7 +4774,7 @@ packages:
       magic-string: 0.30.10
       mlly: 1.6.1
       source-map-js: 1.2.0
-      vue-i18n: 9.9.1(vue@3.4.33)
+      vue-i18n: 9.9.1(vue@3.4.34)
       yaml-eslint-parser: 1.2.2
     dev: true
 
@@ -4811,7 +4823,7 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
       unplugin: 1.5.1
-      vue-i18n: 9.9.1(vue@3.4.33)
+      vue-i18n: 9.9.1(vue@3.4.34)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -6014,7 +6026,7 @@ packages:
       semver: 7.6.2
     dev: true
 
-  /@nuxt/devtools@1.3.1(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(nuxt@3.11.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.33):
+  /@nuxt/devtools@1.3.1(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(nuxt@3.11.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.34):
     resolution: {integrity: sha512-SuiuqtlN6OMPn7hYqbydcJmRF/L86yxi8ApcjNVnMURYBPaAAN9egkEFpQ6AjzjX+UnaG1hU8FE0w6pWKSRp3A==}
     hasBin: true
     peerDependencies:
@@ -6025,9 +6037,9 @@ packages:
       '@nuxt/devtools-kit': 1.3.1(nuxt@3.11.2)(vite@4.5.3)
       '@nuxt/devtools-wizard': 1.3.1
       '@nuxt/kit': 3.11.2
-      '@vue/devtools-applet': 7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.33)
-      '@vue/devtools-core': 7.2.0(vite@4.5.3)(vue@3.4.33)
-      '@vue/devtools-kit': 7.2.0(vue@3.4.33)
+      '@vue/devtools-applet': 7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.34)
+      '@vue/devtools-core': 7.2.0(vite@4.5.3)(vue@3.4.34)
+      '@vue/devtools-kit': 7.2.0(vue@3.4.34)
       birpc: 0.2.17
       consola: 3.2.3
       cronstrue: 2.50.0
@@ -6386,7 +6398,7 @@ packages:
     resolution: {integrity: sha512-3BG5doAREcD50dbKyXgmjD4b1GzY8CUy3T41jMhHZXNDdaNwOd31IBq+D6dV00OSrDVhzrTVj0IxsUsnMyHvIQ==}
     dev: true
 
-  /@nuxt/vite-builder@3.11.2(eslint@8.56.0)(sass@1.71.1)(vue@3.4.33):
+  /@nuxt/vite-builder@3.11.2(eslint@8.56.0)(sass@1.71.1)(vue@3.4.34):
     resolution: {integrity: sha512-eXTZsAAN4dPz4eA2UD5YU2kD/DqgfyQp1UYsIdCe6+PAVe1ifkUboBjbc0piR5+3qI/S/eqk3nzxRGbiYF7Ccg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -6394,8 +6406,8 @@ packages:
     dependencies:
       '@nuxt/kit': 3.11.2
       '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
-      '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.33)
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.2.11)(vue@3.4.33)
+      '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.34)
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.2.11)(vue@3.4.34)
       autoprefixer: 10.4.19(postcss@8.4.39)
       clear: 0.1.0
       consola: 3.2.3
@@ -6425,7 +6437,7 @@ packages:
       vite: 5.2.11(sass@1.71.1)
       vite-node: 1.6.0(sass@1.71.1)
       vite-plugin-checker: 0.6.4(eslint@8.56.0)(vite@5.2.11)
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
       vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
       - '@types/node'
@@ -7278,11 +7290,11 @@ packages:
       '@parcel/watcher-win32-x64': 2.4.1
     dev: true
 
-  /@pinia/nuxt@0.5.1(vue@3.4.33):
+  /@pinia/nuxt@0.5.1(vue@3.4.34):
     resolution: {integrity: sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==}
     dependencies:
       '@nuxt/kit': 3.9.3
-      pinia: 2.1.7(vue@3.4.33)
+      pinia: 2.1.7(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - rollup
@@ -9258,7 +9270,7 @@ packages:
       - '@tiptap/pm'
     dev: false
 
-  /@tiptap/vue-3@2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)(vue@3.4.33):
+  /@tiptap/vue-3@2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)(vue@3.4.34):
     resolution: {integrity: sha512-NCw1Y4ScIrMCKC9YlepUHSAB8jq/PQ2f+AbZKh5bY2t/kMSJYLCJVHq9NFzG4TQtktgMGWCcEQVcDJ7YNpsfxw==}
     peerDependencies:
       '@tiptap/core': ^2.0.0
@@ -9269,7 +9281,7 @@ packages:
       '@tiptap/extension-bubble-menu': 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)
       '@tiptap/extension-floating-menu': 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)
       '@tiptap/pm': 2.4.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /@tootallnate/once@1.1.2:
@@ -9770,7 +9782,7 @@ packages:
   /@types/splitpanes@2.2.6:
     resolution: {integrity: sha512-3dV5sO1Ht74iER4jJU03mreL3f+Q2h47ZqXS6Sfbqc6hkCvsDrX1GA0NbYWRdNvZemPyTDzUoApWKeoGbALwkQ==}
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -9833,7 +9845,7 @@ packages:
   /@types/vue-barcode-reader@0.0.3:
     resolution: {integrity: sha512-klrzMKXdc1eHFnMQXl5QwTGuKki09hh+hxV0AlNjg72VpMRifEbW+roGbDK0LHCK+LTcz13Ebx2/bMKgQr0Ovw==}
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -10317,7 +10329,7 @@ packages:
       '@unhead/shared': 1.9.10
     dev: true
 
-  /@unhead/vue@1.9.10(vue@3.4.33):
+  /@unhead/vue@1.9.10(vue@3.4.34):
     resolution: {integrity: sha512-Zi65eTU5IIaqqXAVOVJ4fnwJRR751FZIFlzYOjIekf1eNkISy+A4xyz3NIEQWSlXCrOiDNgDhT0YgKUcx5FfHQ==}
     peerDependencies:
       vue: latest
@@ -10326,7 +10338,7 @@ packages:
       '@unhead/shared': 1.9.10
       hookable: 5.5.3
       unhead: 1.9.10
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: true
 
   /@unocss/astro@0.58.9(vite@4.5.3):
@@ -10609,7 +10621,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.11)(vue@3.4.33):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.11)(vue@3.4.34):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -10620,12 +10632,12 @@ packages:
       '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.24.3)
       vite: 5.2.11(sass@1.71.1)
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.33):
+  /@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.34):
     resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
@@ -10633,7 +10645,7 @@ packages:
       vue: latest
     dependencies:
       vite: 5.2.11(sass@1.71.1)
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: true
 
   /@vitest/expect@1.2.2:
@@ -10698,33 +10710,33 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@vue-flow/additional-components@1.3.3(@vue-flow/core@1.31.0)(vue@3.4.33):
+  /@vue-flow/additional-components@1.3.3(@vue-flow/core@1.31.0)(vue@3.4.34):
     resolution: {integrity: sha512-AZhz0diM7VIN7MGKODiuqiu+xiujFQSs2UdiThgNI5vGSwwizd0g9dGzB+LK0Dt4FCRJ1g64xzxqbrAFFfzuFw==}
     peerDependencies:
       '@vue-flow/core': ^1.0.0
       vue: latest
     dependencies:
-      '@vue-flow/core': 1.31.0(vue@3.4.33)
+      '@vue-flow/core': 1.31.0(vue@3.4.34)
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
-  /@vue-flow/core@1.31.0(vue@3.4.33):
+  /@vue-flow/core@1.31.0(vue@3.4.34):
     resolution: {integrity: sha512-LKKe856250UglAo2sU3OYYAU8i2I31tze1qZGOwG5d73QA2w6aYwiV3Ut3nmohAQIYhBrvkYcygyJ0iQ+HH1VA==}
     peerDependencies:
       vue: latest
     dependencies:
-      '@vueuse/core': 10.7.2(vue@3.4.33)
+      '@vueuse/core': 10.7.2(vue@3.4.34)
       d3-drag: 3.0.0
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
     dev: false
 
-  /@vue-macros/common@1.8.0(vue@3.4.33):
+  /@vue-macros/common@1.8.0(vue@3.4.34):
     resolution: {integrity: sha512-auDJJzE0z3uRe3867e0DsqcseKImktNf5ojCZgUKqiVxb2yTlwlgOVAYCgoep9oITqxkXQymSvFeKhedi8PhaA==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
@@ -10739,7 +10751,7 @@ packages:
       ast-kit: 0.11.2
       local-pkg: 0.4.3
       magic-string-ast: 0.3.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -10784,6 +10796,16 @@ packages:
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
+    dev: true
+
+  /@vue/compiler-core@3.4.34:
+    resolution: {integrity: sha512-Z0izUf32+wAnQewjHu+pQf1yw00EGOmevl1kE+ljjjMe7oEfpQ+BI3/JNK7yMB4IrUsqLDmPecUrpj3mCP+yJQ==}
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/shared': 3.4.34
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
 
   /@vue/compiler-dom@3.4.27:
     resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
@@ -10796,6 +10818,13 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.4.33
       '@vue/shared': 3.4.33
+    dev: true
+
+  /@vue/compiler-dom@3.4.34:
+    resolution: {integrity: sha512-3PUOTS1h5cskdOJMExCu2TInXuM0j60DRPpSCJDqOCupCfUZCJoyQmKtRmA8EgDNZ5kcEE7vketamRZfrEuVDw==}
+    dependencies:
+      '@vue/compiler-core': 3.4.34
+      '@vue/shared': 3.4.34
 
   /@vue/compiler-sfc@3.4.27:
     resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
@@ -10823,6 +10852,20 @@ packages:
       magic-string: 0.30.10
       postcss: 8.4.39
       source-map-js: 1.2.0
+    dev: true
+
+  /@vue/compiler-sfc@3.4.34:
+    resolution: {integrity: sha512-x6lm0UrM03jjDXTPZgD9Ad8bIVD1ifWNit2EaWQIZB5CULr46+FbLQ5RpK7AXtDHGjx9rmvC7QRCTjsiGkAwRw==}
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.4.34
+      '@vue/compiler-dom': 3.4.34
+      '@vue/compiler-ssr': 3.4.34
+      '@vue/shared': 3.4.34
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.39
+      source-map-js: 1.2.0
 
   /@vue/compiler-ssr@3.4.27:
     resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
@@ -10835,6 +10878,13 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.4.33
       '@vue/shared': 3.4.33
+    dev: true
+
+  /@vue/compiler-ssr@3.4.34:
+    resolution: {integrity: sha512-8TDBcLaTrFm5rnF+Qm4BlliaopJgqJ28Nsrc80qazynm5aJO+Emu7y0RWw34L8dNnTRdcVBpWzJxhGYzsoVu4g==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.34
+      '@vue/shared': 3.4.34
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -10843,21 +10893,21 @@ packages:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
     dev: true
 
-  /@vue/devtools-applet@7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.33):
+  /@vue/devtools-applet@7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.34):
     resolution: {integrity: sha512-ohl3uHejqu8v6BoCfsadpo6/QU1o585Im8AbH4bZiQTKdIot7OlBdk7pz9bK3muV6N1xKuiDNwYul0QYClOeSg==}
     peerDependencies:
       vue: latest
     dependencies:
-      '@vue/devtools-core': 7.2.0(vite@4.5.3)(vue@3.4.33)
-      '@vue/devtools-kit': 7.2.0(vue@3.4.33)
+      '@vue/devtools-core': 7.2.0(vite@4.5.3)(vue@3.4.34)
+      '@vue/devtools-kit': 7.2.0(vue@3.4.34)
       '@vue/devtools-shared': 7.2.0
-      '@vue/devtools-ui': 7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vue@3.4.33)
+      '@vue/devtools-ui': 7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vue@3.4.34)
       lodash-es: 4.17.21
       perfect-debounce: 1.0.0
       shiki: 1.5.2
       splitpanes: 3.1.5
-      vue: 3.4.33(typescript@5.4.5)
-      vue-virtual-scroller: 2.0.0-beta.8(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-virtual-scroller: 2.0.0-beta.8(vue@3.4.34)
     transitivePeerDependencies:
       - '@unocss/reset'
       - '@vue/composition-api'
@@ -10877,10 +10927,10 @@ packages:
       - vite
     dev: true
 
-  /@vue/devtools-core@7.2.0(vite@4.5.3)(vue@3.4.33):
+  /@vue/devtools-core@7.2.0(vite@4.5.3)(vue@3.4.34):
     resolution: {integrity: sha512-cHSeu70rTtubt2DYia+VDGNTC1m84Xyuk5eNTjmOpMLECaJnWnzCv6kR84EZp7rG+MVZalJG+4ecX2GaTbU3cQ==}
     dependencies:
-      '@vue/devtools-kit': 7.2.0(vue@3.4.33)
+      '@vue/devtools-kit': 7.2.0(vue@3.4.34)
       '@vue/devtools-shared': 7.2.0
       mitt: 3.0.1
       nanoid: 3.3.7
@@ -10891,7 +10941,7 @@ packages:
       - vue
     dev: true
 
-  /@vue/devtools-kit@7.2.0(vue@3.4.33):
+  /@vue/devtools-kit@7.2.0(vue@3.4.34):
     resolution: {integrity: sha512-Kx+U0QiQg/g714euYKfnCdhTcOycSlH1oyTE57D0sAmisdsRCNLfXcnnIwcFY2jdCpuz9DNbuE0VWQuYF5zAZQ==}
     peerDependencies:
       vue: latest
@@ -10901,7 +10951,7 @@ packages:
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: true
 
   /@vue/devtools-shared@7.2.0:
@@ -10910,7 +10960,7 @@ packages:
       rfdc: 1.3.1
     dev: true
 
-  /@vue/devtools-ui@7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vue@3.4.33):
+  /@vue/devtools-ui@7.2.0(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vue@3.4.34):
     resolution: {integrity: sha512-5raf2DLgicnT6vr9oO8kgN49ZqdDYtyph4hBH3sg9bvY2UtHgJs6m8uPqai5vKSrrEy/V30Rq/tahQlOiEbi+Q==}
     peerDependencies:
       '@unocss/reset': '>=0.50.0-0'
@@ -10920,14 +10970,14 @@ packages:
     dependencies:
       '@unocss/reset': 0.58.9
       '@vue/devtools-shared': 7.2.0
-      '@vueuse/components': 10.9.0(vue@3.4.33)
-      '@vueuse/core': 10.9.0(vue@3.4.33)
-      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.33)
+      '@vueuse/components': 10.9.0(vue@3.4.34)
+      '@vueuse/core': 10.9.0(vue@3.4.34)
+      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.34)
       colord: 2.9.3
-      floating-vue: 5.2.2(vue@3.4.33)
+      floating-vue: 5.2.2(vue@3.4.34)
       focus-trap: 7.5.4
       unocss: 0.58.9(@unocss/webpack@0.58.9)(postcss@8.4.39)(vite@4.5.3)
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - async-validator
@@ -10943,43 +10993,43 @@ packages:
       - universal-cookie
     dev: true
 
-  /@vue/reactivity@3.4.33:
-    resolution: {integrity: sha512-B24QIelahDbyHipBgbUItQblbd4w5HpG3KccL+YkGyo3maXyS253FzcTR3pSz739OTphmzlxP7JxEMWBpewilA==}
+  /@vue/reactivity@3.4.34:
+    resolution: {integrity: sha512-ua+Lo+wBRlBEX9TtgPOShE2JwIO7p6BTZ7t1KZVPoaBRfqbC7N3c8Mpzicx173fXxx5VXeU6ykiHo7WgLzJQDA==}
     dependencies:
-      '@vue/shared': 3.4.33
+      '@vue/shared': 3.4.34
 
-  /@vue/runtime-core@3.4.33:
-    resolution: {integrity: sha512-6wavthExzT4iAxpe8q37/rDmf44nyOJGISJPxCi9YsQO+8w9v0gLCFLfH5TzD1V1AYrTAdiF4Y1cgUmP68jP6w==}
+  /@vue/runtime-core@3.4.34:
+    resolution: {integrity: sha512-PXhkiRPwcPGJ1BnyBZFI96GfInCVskd0HPNIAZn7i3YOmLbtbTZpB7/kDTwC1W7IqdGPkTVC63IS7J2nZs4Ebg==}
     dependencies:
-      '@vue/reactivity': 3.4.33
-      '@vue/shared': 3.4.33
+      '@vue/reactivity': 3.4.34
+      '@vue/shared': 3.4.34
 
-  /@vue/runtime-dom@3.4.33:
-    resolution: {integrity: sha512-iHsMCUSFJ+4z432Bn9kZzHX+zOXa6+iw36DaVRmKYZpPt9jW9riF32SxNwB124i61kp9+AZtheQ/mKoJLerAaQ==}
+  /@vue/runtime-dom@3.4.34:
+    resolution: {integrity: sha512-dXqIe+RqFAK2Euak4UsvbIupalrhc67OuQKpD7HJ3W2fv8jlqvI7szfBCsAEcE8o/wyNpkloxB6J8viuF/E3gw==}
     dependencies:
-      '@vue/reactivity': 3.4.33
-      '@vue/runtime-core': 3.4.33
-      '@vue/shared': 3.4.33
+      '@vue/reactivity': 3.4.34
+      '@vue/runtime-core': 3.4.34
+      '@vue/shared': 3.4.34
       csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.27(vue@3.4.33):
+  /@vue/server-renderer@3.4.27(vue@3.4.34):
     resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
     peerDependencies:
       vue: latest
     dependencies:
       '@vue/compiler-ssr': 3.4.27
       '@vue/shared': 3.4.27
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
-  /@vue/server-renderer@3.4.33(vue@3.4.33):
-    resolution: {integrity: sha512-jTH0d6gQcaYideFP/k0WdEu8PpRS9MF8d0b6SfZzNi+ap972pZ0TNIeTaESwdOtdY0XPVj54XEJ6K0wXxir4fw==}
+  /@vue/server-renderer@3.4.34(vue@3.4.34):
+    resolution: {integrity: sha512-GeyEUfMVRZMD/mZcNONEqg7MiU10QQ1DB3O/Qr6+8uXpbwdlmVgQ5Qs1/ZUAFX1X2UUtqMoGrDRbxdWfOJFT7Q==}
     peerDependencies:
       vue: latest
     dependencies:
-      '@vue/compiler-ssr': 3.4.33
-      '@vue/shared': 3.4.33
-      vue: 3.4.33(typescript@5.4.5)
+      '@vue/compiler-ssr': 3.4.34
+      '@vue/shared': 3.4.34
+      vue: 3.4.34(typescript@5.4.5)
 
   /@vue/shared@3.4.21:
     resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
@@ -10990,6 +11040,10 @@ packages:
 
   /@vue/shared@3.4.33:
     resolution: {integrity: sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA==}
+    dev: true
+
+  /@vue/shared@3.4.34:
+    resolution: {integrity: sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A==}
 
   /@vue/test-utils@2.4.6:
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
@@ -10998,7 +11052,7 @@ packages:
       vue-component-type-helpers: 2.0.6
     dev: true
 
-  /@vuelidate/core@2.0.3(vue@3.4.33):
+  /@vuelidate/core@2.0.3(vue@3.4.34):
     resolution: {integrity: sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==}
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
@@ -11007,11 +11061,11 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.13.11(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.13.11(vue@3.4.34)
     dev: false
 
-  /@vuelidate/validators@2.0.4(vue@3.4.33):
+  /@vuelidate/validators@2.0.4(vue@3.4.34):
     resolution: {integrity: sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==}
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
@@ -11020,45 +11074,45 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.13.11(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.13.11(vue@3.4.34)
     dev: false
 
-  /@vueuse/components@10.9.0(vue@3.4.33):
+  /@vueuse/components@10.9.0(vue@3.4.34):
     resolution: {integrity: sha512-BHQpA0yIi3y7zKa1gYD0FUzLLkcRTqVhP8smnvsCK6GFpd94Nziq1XVPD7YpFeho0k5BzbBiNZF7V/DpkJ967A==}
     dependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.33)
-      '@vueuse/shared': 10.9.0(vue@3.4.33)
-      vue-demi: 0.14.8(vue@3.4.33)
+      '@vueuse/core': 10.9.0(vue@3.4.34)
+      '@vueuse/shared': 10.9.0(vue@3.4.34)
+      vue-demi: 0.14.8(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/core@10.7.2(vue@3.4.33):
+  /@vueuse/core@10.7.2(vue@3.4.34):
     resolution: {integrity: sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.2
-      '@vueuse/shared': 10.7.2(vue@3.4.33)
-      vue-demi: 0.14.7(vue@3.4.33)
+      '@vueuse/shared': 10.7.2(vue@3.4.34)
+      vue-demi: 0.14.7(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  /@vueuse/core@10.9.0(vue@3.4.33):
+  /@vueuse/core@10.9.0(vue@3.4.34):
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.9.0
-      '@vueuse/shared': 10.9.0(vue@3.4.33)
-      vue-demi: 0.14.8(vue@3.4.33)
+      '@vueuse/shared': 10.9.0(vue@3.4.34)
+      vue-demi: 0.14.8(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/core@7.7.1(vue@3.4.33):
+  /@vueuse/core@7.7.1(vue@3.4.34):
     resolution: {integrity: sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
@@ -11069,12 +11123,12 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@vueuse/shared': 7.7.1(vue@3.4.33)
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.14.8(vue@3.4.33)
+      '@vueuse/shared': 7.7.1(vue@3.4.34)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.14.9(vue@3.4.34)
     dev: false
 
-  /@vueuse/integrations@10.7.2(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.33):
+  /@vueuse/integrations@10.7.2(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.34):
     resolution: {integrity: sha512-+u3RLPFedjASs5EKPc69Ge49WNgqeMfSxFn+qrQTzblPXZg6+EFzhjarS5edj2qAf6xQ93f95TUxRwKStXj/sQ==}
     peerDependencies:
       async-validator: '*'
@@ -11115,19 +11169,19 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.7.2(vue@3.4.33)
-      '@vueuse/shared': 10.7.2(vue@3.4.33)
+      '@vueuse/core': 10.7.2(vue@3.4.34)
+      '@vueuse/shared': 10.7.2(vue@3.4.34)
       fuse.js: 6.6.2
       jwt-decode: 3.1.2
       qrcode: 1.5.3
       sortablejs: 1.15.2
-      vue-demi: 0.14.7(vue@3.4.33)
+      vue-demi: 0.14.7(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.33):
+  /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sortablejs@1.15.2)(vue@3.4.34):
     resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==}
     peerDependencies:
       async-validator: '*'
@@ -11168,14 +11222,14 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.33)
-      '@vueuse/shared': 10.9.0(vue@3.4.33)
+      '@vueuse/core': 10.9.0(vue@3.4.34)
+      '@vueuse/shared': 10.9.0(vue@3.4.34)
       focus-trap: 7.5.4
       fuse.js: 6.6.2
       jwt-decode: 3.1.2
       qrcode: 1.5.3
       sortablejs: 1.15.2
-      vue-demi: 0.14.8(vue@3.4.33)
+      vue-demi: 0.14.8(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -11188,17 +11242,17 @@ packages:
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
     dev: true
 
-  /@vueuse/nuxt@10.7.2(nuxt@3.11.2)(vue@3.4.33):
+  /@vueuse/nuxt@10.7.2(nuxt@3.11.2)(vue@3.4.34):
     resolution: {integrity: sha512-yv2hY4AiRoSqg9ELNpN6gOkDWxGuLiKE/bEbuTAAuUBhS5OeEDf5aB/kY0e/V6ZXj5XiU4LX3nE8YV8c+UKfmQ==}
     peerDependencies:
       nuxt: ^3.0.0
     dependencies:
       '@nuxt/kit': 3.9.3
-      '@vueuse/core': 10.7.2(vue@3.4.33)
+      '@vueuse/core': 10.7.2(vue@3.4.34)
       '@vueuse/metadata': 10.7.2
       local-pkg: 0.5.0
       nuxt: 3.11.2(@opentelemetry/api@1.4.1)(@unocss/reset@0.58.9)(eslint@8.56.0)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(qrcode@1.5.3)(sass@1.71.1)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)
-      vue-demi: 0.14.7(vue@3.4.33)
+      vue-demi: 0.14.7(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - rollup
@@ -11206,24 +11260,24 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/shared@10.7.2(vue@3.4.33):
+  /@vueuse/shared@10.7.2(vue@3.4.34):
     resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.33)
+      vue-demi: 0.14.8(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  /@vueuse/shared@10.9.0(vue@3.4.33):
+  /@vueuse/shared@10.9.0(vue@3.4.34):
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.33)
+      vue-demi: 0.14.8(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/shared@7.7.1(vue@3.4.33):
+  /@vueuse/shared@7.7.1(vue@3.4.34):
     resolution: {integrity: sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
@@ -11234,8 +11288,8 @@ packages:
       vue:
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.14.8(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.14.9(vue@3.4.34)
     dev: false
 
   /@webassemblyjs/ast@1.11.6:
@@ -11787,14 +11841,14 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /ant-design-vue@3.2.20(vue@3.4.33):
+  /ant-design-vue@3.2.20(vue@3.4.34):
     resolution: {integrity: sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: latest
     dependencies:
       '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 6.1.0(vue@3.4.33)
+      '@ant-design/icons-vue': 6.1.0(vue@3.4.34)
       '@babel/runtime': 7.22.11
       '@ctrl/tinycolor': 3.6.1
       '@simonwep/pickr': 1.8.2
@@ -11808,8 +11862,8 @@ packages:
       resize-observer-polyfill: 1.5.1
       scroll-into-view-if-needed: 2.2.31
       shallow-equal: 1.2.1
-      vue: 3.4.33(typescript@5.4.5)
-      vue-types: 3.0.2(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-types: 3.0.2(vue@3.4.34)
       warning: 4.0.3
     dev: false
 
@@ -14141,6 +14195,10 @@ packages:
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  /custom-event-polyfill@1.0.7:
+    resolution: {integrity: sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==}
+    dev: false
+
   /d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -14769,18 +14827,40 @@ packages:
       batch-processor: 1.0.0
     dev: false
 
+  /embla-carousel-reactive-utils@8.1.7(embla-carousel@8.1.7):
+    resolution: {integrity: sha512-FDPcWjNtW04KSuvSfGbVeoB8yl5no3E0++HikO/uW12cNkMnWt68C4OBOakZQZlpUdRQSA9KCYoBuQzfpVGvZQ==}
+    peerDependencies:
+      embla-carousel: 8.1.7
+    dependencies:
+      embla-carousel: 8.1.7
+    dev: false
+
+  /embla-carousel-vue@8.1.7(vue@3.4.34):
+    resolution: {integrity: sha512-cYTIGghkKOeMPI154mz1L60yCW6QMnsgKssEaHHfQ7aYo8KHKlvaY47ZWr5zVpBfSoKfSbB1mgPGvZxrj6Mvpg==}
+    peerDependencies:
+      vue: latest
+    dependencies:
+      embla-carousel: 8.1.7
+      embla-carousel-reactive-utils: 8.1.7(embla-carousel@8.1.7)
+      vue: 3.4.34(typescript@5.4.5)
+    dev: false
+
+  /embla-carousel@8.1.7:
+    resolution: {integrity: sha512-b3kBr2H+S1gx4neki0P+aqN6cA5Ibjqy4CR3Ufi3X+Q3JpoNXJgOmJMSPkoP9DKcDREwADN6UWZzRwF2oo0y9Q==}
+    dev: false
+
   /emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
 
-  /emoji-mart-vue-fast@15.0.2(vue@3.4.33):
+  /emoji-mart-vue-fast@15.0.2(vue@3.4.34):
     resolution: {integrity: sha512-q7VaE6yRrlQd+jpHPToh1XnIatgACkQjBj0vQ7uNaWrbVsKlhZaOsqZVoegT5IZt5XkYoR2x4MHMNep/BJP9rw==}
     peerDependencies:
       vue: latest
     dependencies:
       '@babel/runtime': 7.22.11
       core-js: 3.32.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /emoji-regex@8.0.0:
@@ -16730,7 +16810,7 @@ packages:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
     dev: true
 
-  /floating-vue@5.2.2(vue@3.4.33):
+  /floating-vue@5.2.2(vue@3.4.34):
     resolution: {integrity: sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==}
     peerDependencies:
       '@nuxt/kit': ^3.2.0
@@ -16740,8 +16820,8 @@ packages:
         optional: true
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.4.33(typescript@5.4.5)
-      vue-resize: 2.0.0-alpha.1(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.34)
     dev: true
 
   /fn.name@1.1.0:
@@ -20240,6 +20320,10 @@ packages:
       json5: 2.2.3
     dev: true
 
+  /loadjs@4.3.0:
+    resolution: {integrity: sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==}
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -22018,15 +22102,15 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.3.1(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(nuxt@3.11.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.33)
+      '@nuxt/devtools': 1.3.1(@unocss/reset@0.58.9)(floating-vue@5.2.2)(fuse.js@6.6.2)(jwt-decode@3.1.2)(nuxt@3.11.2)(qrcode@1.5.3)(sortablejs@1.15.2)(unocss@0.58.9)(vite@4.5.3)(vue@3.4.34)
       '@nuxt/kit': 3.11.2
       '@nuxt/schema': 3.11.2
       '@nuxt/telemetry': 2.5.3
       '@nuxt/ui-templates': 1.3.3
-      '@nuxt/vite-builder': 3.11.2(eslint@8.56.0)(sass@1.71.1)(vue@3.4.33)
+      '@nuxt/vite-builder': 3.11.2(eslint@8.56.0)(sass@1.71.1)(vue@3.4.34)
       '@unhead/dom': 1.9.10
       '@unhead/ssr': 1.9.10
-      '@unhead/vue': 1.9.10(vue@3.4.33)
+      '@unhead/vue': 1.9.10(vue@3.4.34)
       '@vue/shared': 3.4.21
       acorn: 8.11.3
       c12: 1.10.0
@@ -22066,13 +22150,13 @@ packages:
       unenv: 1.9.0
       unimport: 3.7.1
       unplugin: 1.10.1
-      unplugin-vue-router: 0.7.0(vue-router@4.3.0)(vue@3.4.33)
+      unplugin-vue-router: 0.7.0(vue-router@4.3.0)(vue@3.4.34)
       unstorage: 1.10.2(ioredis@5.4.1)
       untyped: 1.4.2
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
       vue-bundle-renderer: 2.0.0
       vue-devtools-stub: 0.1.0
-      vue-router: 4.3.0(vue@3.4.33)
+      vue-router: 4.3.0(vue@3.4.34)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -22897,6 +22981,20 @@ packages:
     resolution: {integrity: sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg==}
     dev: false
 
+  /pdfobject-vue@0.0.4(pdfobject@2.3.0)(vue@3.4.34):
+    resolution: {integrity: sha512-sk3IqtwyC1j7Gu0rkskOgWnJgDNtCkdwkxvnLGI3xK0pMhgleNw2IWpH41FSNVuE0h5zdjjakpXsv+YH0cbXfA==}
+    peerDependencies:
+      pdfobject: ^2.2.12
+      vue: latest
+    dependencies:
+      pdfobject: 2.3.0
+      vue: 3.4.34(typescript@5.4.5)
+    dev: false
+
+  /pdfobject@2.3.0:
+    resolution: {integrity: sha512-w/9pXDXTDs3IDmOri/w8lM/w6LHR0/F4fcBLLzH+4csSoyshQ5su0TE7k0FLHZO7aOjVLDGecqd1M89+PVpVAA==}
+    dev: false
+
   /pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
     dev: false
@@ -23049,7 +23147,7 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /pinia@2.1.7(vue@3.4.33):
+  /pinia@2.1.7(vue@3.4.34):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -23062,8 +23160,8 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.5.0
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.14.6(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.14.6(vue@3.4.34)
     dev: false
 
   /pinkie-promise@1.0.0:
@@ -23131,6 +23229,16 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /plyr@3.7.8:
+    resolution: {integrity: sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==}
+    dependencies:
+      core-js: 3.32.1
+      custom-event-polyfill: 1.0.7
+      loadjs: 4.3.0
+      rangetouch: 2.0.1
+      url-polyfill: 1.1.12
+    dev: false
+
   /pngjs@5.0.0:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}
@@ -24214,6 +24322,10 @@ packages:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
 
+  /rangetouch@2.0.1:
+    resolution: {integrity: sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==}
+    dev: false
+
   /raw-body@2.5.1:
     resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
     engines: {node: '>= 0.8'}
@@ -27295,7 +27407,7 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-vue-components@0.26.0(vue@3.4.33):
+  /unplugin-vue-components@0.26.0(vue@3.4.34):
     resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -27318,13 +27430,13 @@ packages:
       minimatch: 9.0.3
       resolve: 1.22.4
       unplugin: 1.7.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /unplugin-vue-router@0.7.0(vue-router@4.3.0)(vue@3.4.33):
+  /unplugin-vue-router@0.7.0(vue-router@4.3.0)(vue@3.4.34):
     resolution: {integrity: sha512-ddRreGq0t5vlSB7OMy4e4cfU1w2AwBQCwmvW3oP/0IHQiokzbx4hd3TpwBu3eIAFVuhX2cwNQwp1U32UybTVCw==}
     peerDependencies:
       vue-router: ^4.1.0
@@ -27334,7 +27446,7 @@ packages:
     dependencies:
       '@babel/types': 7.24.0
       '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      '@vue-macros/common': 1.8.0(vue@3.4.33)
+      '@vue-macros/common': 1.8.0(vue@3.4.34)
       ast-walker-scope: 0.5.0
       chokidar: 3.6.0
       fast-glob: 3.3.2
@@ -27344,7 +27456,7 @@ packages:
       pathe: 1.1.2
       scule: 1.3.0
       unplugin: 1.10.1
-      vue-router: 4.3.0(vue@3.4.33)
+      vue-router: 4.3.0(vue@3.4.34)
       yaml: 2.3.4
     transitivePeerDependencies:
       - rollup
@@ -27594,6 +27706,10 @@ packages:
       requires-port: 1.0.0
     dev: false
 
+  /url-polyfill@1.1.12:
+    resolution: {integrity: sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==}
+    dev: false
+
   /url@0.10.3:
     resolution: {integrity: sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==}
     dependencies:
@@ -28162,7 +28278,7 @@ packages:
     resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
     dev: true
 
-  /vue-advanced-cropper@2.8.8(vue@3.4.33):
+  /vue-advanced-cropper@2.8.8(vue@3.4.34):
     resolution: {integrity: sha512-yDM7Jb/gnxcs//JdbOogBUoHr1bhCQSto7/ohgETKAe4wvRpmqIkKSppMm1huVQr+GP1YoVlX/fkjKxvYzwwDQ==}
     engines: {node: '>=8', npm: '>=5'}
     peerDependencies:
@@ -28171,7 +28287,7 @@ packages:
       classnames: 2.5.1
       debounce: 1.2.1
       easy-bem: 1.1.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /vue-barcode-reader@1.0.3:
@@ -28186,21 +28302,21 @@ packages:
       ufo: 1.5.3
     dev: true
 
-  /vue-chartjs@5.3.1(chart.js@4.4.2)(vue@3.4.33):
+  /vue-chartjs@5.3.1(chart.js@4.4.2)(vue@3.4.34):
     resolution: {integrity: sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==}
     peerDependencies:
       chart.js: ^4.1.1
       vue: latest
     dependencies:
       chart.js: 4.4.2
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /vue-component-type-helpers@2.0.6:
     resolution: {integrity: sha512-qdGXCtoBrwqk1BT6r2+1Wcvl583ZVkuSZ3or7Y1O2w5AvWtlvvxwjGhmz5DdPJS9xqRdDlgTJ/38ehWnEi0tFA==}
     dev: true
 
-  /vue-demi@0.13.11(vue@3.4.33):
+  /vue-demi@0.13.11(vue@3.4.34):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
     hasBin: true
@@ -28212,10 +28328,10 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
-  /vue-demi@0.14.6(vue@3.4.33):
+  /vue-demi@0.14.6(vue@3.4.34):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -28227,10 +28343,10 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
-  /vue-demi@0.14.7(vue@3.4.33):
+  /vue-demi@0.14.7(vue@3.4.34):
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
@@ -28242,9 +28358,9 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
 
-  /vue-demi@0.14.8(vue@3.4.33):
+  /vue-demi@0.14.8(vue@3.4.34):
     resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
     engines: {node: '>=12'}
     hasBin: true
@@ -28256,20 +28372,35 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
+
+  /vue-demi@0.14.9(vue@3.4.34):
+    resolution: {integrity: sha512-dC1TJMODGM8lxhP6wLToncaDPPNB3biVxxRDuNCYpuXwi70ou7NsGd97KVTJ2omepGId429JZt8oaZKeXbqxwg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: latest
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.34(typescript@5.4.5)
+    dev: false
 
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
     dev: true
 
-  /vue-dompurify-html@3.1.2(vue@3.4.33):
+  /vue-dompurify-html@3.1.2(vue@3.4.34):
     resolution: {integrity: sha512-2xCnSuog5+OPUtmeAwPZY/6oV9YKuLhjgcl5EUw3jKbmhnyPo8YyCczCeRNGBorVcz1fCGm6PEOIUSXNS8I0ZA==}
     peerDependencies:
       vue: latest
     dependencies:
       dompurify: 2.4.7
-      vue: 3.4.33(typescript@5.4.5)
-      vue-demi: 0.13.11(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-demi: 0.13.11(vue@3.4.34)
     transitivePeerDependencies:
       - '@vue/composition-api'
     dev: false
@@ -28295,11 +28426,11 @@ packages:
   /vue-extensible-mail@0.0.3(typescript@5.4.5):
     resolution: {integrity: sha512-X9oEe/ent1mfmAX65lld/WDVCGRBxULvXbHC21j+mOU2EVmL73xLBEh6TRENc+BPyInzm4jjLa9JnhuEzbwNmQ==}
     dependencies:
-      '@vue/server-renderer': 3.4.27(vue@3.4.33)
+      '@vue/server-renderer': 3.4.27(vue@3.4.34)
       import-string: 0.1.2(typescript@5.4.5)
       scule: 1.3.0
       unbuild: 2.0.0(typescript@5.4.5)
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -28313,7 +28444,7 @@ packages:
       github-buttons: 2.27.0
     dev: false
 
-  /vue-i18n@9.9.1(vue@3.4.33):
+  /vue-i18n@9.9.1(vue@3.4.34):
     resolution: {integrity: sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==}
     engines: {node: '>= 16'}
     peerDependencies:
@@ -28322,14 +28453,14 @@ packages:
       '@intlify/core-base': 9.9.1
       '@intlify/shared': 9.9.1
       '@vue/devtools-api': 6.5.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
 
-  /vue-observe-visibility@2.0.0-alpha.1(vue@3.4.33):
+  /vue-observe-visibility@2.0.0-alpha.1(vue@3.4.34):
     resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
     peerDependencies:
       vue: latest
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: true
 
   /vue-qrcode-reader@3.1.9:
@@ -28338,51 +28469,51 @@ packages:
       barcode-detector: 1.0.4
       callforth: 0.3.1
       core-js: 3.32.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
       webrtc-adapter: 7.7.0
     transitivePeerDependencies:
       - typescript
     dev: false
 
-  /vue-resize@2.0.0-alpha.1(vue@3.4.33):
+  /vue-resize@2.0.0-alpha.1(vue@3.4.34):
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
     peerDependencies:
       vue: latest
     dependencies:
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: true
 
-  /vue-router@4.3.0(vue@3.4.33):
+  /vue-router@4.3.0(vue@3.4.34):
     resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==}
     peerDependencies:
       vue: latest
     dependencies:
       '@vue/devtools-api': 6.6.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: true
 
-  /vue-types@3.0.2(vue@3.4.33):
+  /vue-types@3.0.2(vue@3.4.34):
     resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
     engines: {node: '>=10.15.0'}
     peerDependencies:
       vue: latest
     dependencies:
       is-plain-object: 3.0.1
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
-  /vue-virtual-scroller@2.0.0-beta.8(vue@3.4.33):
+  /vue-virtual-scroller@2.0.0-beta.8(vue@3.4.34):
     resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
     peerDependencies:
       vue: latest
     dependencies:
       mitt: 2.1.0
-      vue: 3.4.33(typescript@5.4.5)
-      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.33)
-      vue-resize: 2.0.0-alpha.1(vue@3.4.33)
+      vue: 3.4.34(typescript@5.4.5)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.34)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.34)
     dev: true
 
-  /vue3-calendar-heatmap@2.0.5(tippy.js@6.3.7)(vue@3.4.33):
+  /vue3-calendar-heatmap@2.0.5(tippy.js@6.3.7)(vue@3.4.34):
     resolution: {integrity: sha512-qvveNQlTS5Aw7AvRLs0zOyu3uP5iGJlXJAnkrkG2ElDdyQ8H1TJhQ8rL702CROjAg16ezIveUY10nCO7lqZ25w==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -28390,7 +28521,7 @@ packages:
       vue: latest
     dependencies:
       tippy.js: 6.3.7
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /vue3-contextmenu@0.2.12:
@@ -28398,7 +28529,7 @@ packages:
     dependencies:
       core-js: 3.32.1
       mitt: 2.1.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
     dev: false
@@ -28419,38 +28550,38 @@ packages:
       mitt: 3.0.1
     dev: false
 
-  /vue3-text-clamp@0.1.2(resize-detector@0.3.0)(vue@3.4.33):
+  /vue3-text-clamp@0.1.2(resize-detector@0.3.0)(vue@3.4.34):
     resolution: {integrity: sha512-896tGhkwaDObKL4gUv9KhR6GQQYzIzut77P2jmfUoTaJ5lJP6kLMfCUEKwGQWbDgXXkqDcoE/QV/UtP4Jn7r3Q==}
     peerDependencies:
       resize-detector: ^0.3.0
       vue: latest
     dependencies:
       resize-detector: 0.3.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
-  /vue@3.4.33(typescript@5.4.5):
-    resolution: {integrity: sha512-VdMCWQOummbhctl4QFMcW6eNtXHsFyDlX60O/tsSQuCcuDOnJ1qPOhhVla65Niece7xq/P2zyZReIO5mP+LGTQ==}
+  /vue@3.4.34(typescript@5.4.5):
+    resolution: {integrity: sha512-VZze05HWlA3ItreQ/ka7Sx7PoD0/3St8FEiSlSTVgb6l4hL+RjtP2/8g5WQBzZgyf8WG2f+g1bXzC7zggLhAJA==}
     peerDependencies:
       typescript: latest
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.33
-      '@vue/compiler-sfc': 3.4.33
-      '@vue/runtime-dom': 3.4.33
-      '@vue/server-renderer': 3.4.33(vue@3.4.33)
-      '@vue/shared': 3.4.33
+      '@vue/compiler-dom': 3.4.34
+      '@vue/compiler-sfc': 3.4.34
+      '@vue/runtime-dom': 3.4.34
+      '@vue/server-renderer': 3.4.34(vue@3.4.34)
+      '@vue/shared': 3.4.34
       typescript: 5.4.5
 
-  /vuedraggable@4.1.0(vue@3.4.33):
+  /vuedraggable@4.1.0(vue@3.4.34):
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
     peerDependencies:
       vue: latest
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.4.33(typescript@5.4.5)
+      vue: 3.4.34(typescript@5.4.5)
     dev: false
 
   /w3c-keyname@2.2.8: