fix: attachments tab design similar to tasks

frontend/src/components/Activities/Activities.vue

@@ -67,13 +67,7 @@
         v-else-if="title == 'Tasks'"
         class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
       >
-        <TaskArea
-          v-model="all_activities"
-          v-model:doc="doc"
-          :modalRef="modalRef"
-          :tasks="activities"
-          :doctype="doctype"
-        />
+        <TaskArea :modalRef="modalRef" :tasks="activities" :doctype="doctype" />
       </div>
       <div v-else-if="title == 'Calls'" class="activity">
         <div v-for="(call, i) in activities">
@@ -104,20 +98,15 @@
           </div>
         </div>
       </div>
-      <div v-else-if="title == 'Attachments'">
-        <div class="flex flex-col gap-2 px-3 sm:px-10 mb-4">
       <div
-            v-for="attachment in activities"
-            :key="attachment.name"
-            class="activity"
+        v-else-if="title == 'Attachments'"
+        class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
       >
         <AttachmentArea
-              :attachment="attachment"
+          :attachments="activities"
           @reload="all_activities.reload() && scroll()"
         />
       </div>
-        </div>
-      </div>
       <div
         v-else
         v-for="(activity, i) in activities"

frontend/src/components/Activities/AttachmentArea.vue

@@ -1,11 +1,13 @@
 <template>
+  <div v-if="attachments.length">
+    <div v-for="(attachment, i) in attachments" :key="attachment.name">
       <div
-    class="flex justify-between gap-2 border rounded text-base px-3 py-2 cursor-pointer"
-    @click="openFile"
+        class="activity flex justify-between gap-2 hover:bg-gray-50 rounded text-base p-2.5 cursor-pointer"
+        @click="openFile(attachment)"
       >
         <div class="flex gap-2 truncate">
           <div
-        class="size-11 rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
+            class="size-11 bg-white rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
             :class="{ border: !isImage(attachment.file_type) }"
           >
             <img
@@ -14,7 +16,11 @@
               :src="attachment.file_url"
               :alt="attachment.file_name"
             />
-        <component v-else class="size-4" :is="fileIcon(attachment.file_type)" />
+            <component
+              v-else
+              class="size-4"
+              :is="fileIcon(attachment.file_type)"
+            />
           </div>
           <div class="flex flex-col justify-center gap-1 truncate">
             <div class="text-base text-gray-800 truncate">
@@ -33,11 +39,15 @@
           </Tooltip>
           <div class="flex gap-1">
             <Tooltip
-          :text="attachment.is_private ? __('Make public') : __('Make private')"
+              :text="
+                attachment.is_private ? __('Make public') : __('Make private')
+              "
             >
               <Button
                 class="!size-5"
-            @click.stop="togglePrivate(attachment.name, attachment.is_private)"
+                @click.stop="
+                  togglePrivate(attachment.name, attachment.is_private)
+                "
               >
                 <FeatherIcon
                   :name="attachment.is_private ? 'lock' : 'unlock'"
@@ -56,6 +66,12 @@
           </div>
         </div>
       </div>
+      <div
+        v-if="i < attachments.length - 1"
+        class="mx-2 h-px border-t border-gray-200"
+      />
+    </div>
+  </div>
 </template>
 <script setup>
 import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
@@ -72,15 +88,15 @@ import {
 } from '@/utils'
 
 const props = defineProps({
-  attachment: Object,
+  attachments: Array,
 })
 
 const emit = defineEmits(['reload'])
 
 const { $dialog } = globalStore()
 
-function openFile() {
-  window.open(props.attachment.file_url, '_blank')
+function openFile(attachment) {
+  window.open(attachment.file_url, '_blank')
 }
 
 function togglePrivate(fileName, isPrivate) {

frontend/src/components/Activities/TaskArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="tasks.length">
-    <div v-for="(task, i) in tasks">
+    <div v-for="(task, i) in tasks" :key="task.name">
       <div
         class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
         @click="modalRef.showTask(task)"