Add project activity history panel

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@bimdata/bcf-components": "6.7.7",
     "@bimdata/components": "1.10.1",
-    "@bimdata/design-system": "2.3.0",
+    "@bimdata/design-system": "2.4.0",
     "@bimdata/typescript-fetch-api-client": "10.37.0",
     "@bimdata/viewer": "2.17.1",
     "@paddle/paddle-js": "^1.6.4",

src/components/specific/models/models-table/ModelsTable.vue

@@ -42,7 +42,7 @@
       <ModelTagsCell :model="model" :parent="modelsTable" />
     </template>
     <template #cell-location="{ row: model }">
-      <div class="visas-table__location">
+      <div class="models-table__location">
         <ModelPathCell
           :model="model"
           :allFolders="allFolders"

src/components/specific/models/models-table/model-path-cell/ModelPathCell.vue

@@ -11,7 +11,7 @@
           maxWidth="200px"
         />
       </div>
-  
+
       <transition name="fade">
         <div v-if="hovering || showFullPath" class="model-path-cell__location">
           <div
@@ -57,21 +57,15 @@
               <BIMDataIconChevron size="xxxs" fill color="default" />
             </div>
           </div>
-
-          <span
-            v-else
-            class="folder-name flex items-center"
-            @click.stop="goToGedRoot"
-          >
+
+          <span v-else class="folder-name flex items-center" @click.stop="goToGedRoot">
             <BIMDataIconFolderLocation fill color="primary" margin="0 6px 0 0" />
             {{ $t("t.rootFolder") }}
           </span>
         </div>
       </transition>
     </template>
-    <template v-else>
-      -
-    </template>
+    <template v-else> - </template>
   </div>
 </template>
 
@@ -102,7 +96,7 @@ export default {
     const hovering = ref(false);
     const showFullPath = ref(false);
     const hasLocation = computed(
-      () => ![MODEL_TYPE.META_BUILDING, MODEL_TYPE.PHOTOSPHERE_BUILDING].includes(props.model.type)
+      () => ![MODEL_TYPE.META_BUILDING, MODEL_TYPE.PHOTOSPHERE_BUILDING].includes(props.model.type),
     );
 
     const folderLocation = (model) => {

src/components/specific/projects/project-history-activity/ProjectHistoryActivity.css

@@ -0,0 +1,22 @@
+.history-activity-panel {
+  height: calc(100vh - 44px - 40px - 12px - 12px);
+  overflow: auto;
+  .header {
+    h3 {
+      margin-bottom: 12px;
+      font-size: 18px;
+    }
+  }
+  .day-group {
+    margin-top: 20px;
+    .day-title {
+      font-size: 13px;
+      color: var(--color-granite);
+      margin-bottom: 8px;
+      font-weight: 600;
+    }
+
+  }
+
+}
+

src/components/specific/projects/project-history-activity/ProjectHistoryActivity.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="history-activity-panel">
+    <div class="header">
+      <h3>{{ $t("ProjectOverview.activity.title") }}</h3>
+    </div>
+
+    <div v-for="(logs, day) in groupedLogs" :key="day" class="day-group">
+      <div class="day-title">{{ day }}</div>
+      <ActivityItem
+        v-for="log in logs"
+        :key="log.id"
+        :log="log"
+        :formatTimeAgo="formatTimeAgo"
+        @go-folder="$emit('go-folder', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { getActivityFromLog } from "./activityConfig";
+
+import { useTimeAgo } from "../../../../composables/time.js";
+import ProjectService from "../../../../services/ProjectService.js";
+
+import ActivityItem from "./activity-item/ActivityItem.vue";
+
+export default {
+  props: {
+    project: Object,
+  },
+  components: {
+    ActivityItem,
+  },
+  setup(props) {
+    const { t, locale } = useI18n();
+    const logs = ref([]);
+
+    const { formatTimeAgo } = useTimeAgo();
+
+    onMounted(async () => {
+      const fetchedLogs = await ProjectService.fetchLogs(props.project);
+
+      logs.value = fetchedLogs
+        .map((log) => {
+          const activity = getActivityFromLog(log);
+
+          if (!activity) return null;
+
+          return {
+            ...log,
+            dateObj: new Date(log.date),
+            activity,
+          };
+        })
+        .filter(Boolean);
+    });
+
+    const formatDay = (date) => {
+      const today = new Date();
+      const yesterday = new Date();
+      yesterday.setDate(today.getDate() - 1);
+
+      if (date.toDateString() === today.toDateString()) {
+        return t("t.today");
+      }
+
+      if (date.toDateString() === yesterday.toDateString()) {
+        return t("t.yesterday");
+      }
+
+      return date.toLocaleDateString(locale.value, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      });
+    };
+
+    const groupedLogs = computed(() =>
+      logs.value
+        .slice()
+        .sort((a, b) => b.dateObj - a.dateObj)
+        .reduce((groups, log) => {
+          const key = formatDay(log.dateObj);
+
+          groups[key] ??= [];
+          groups[key].push(log);
+
+          return groups;
+        }, {}),
+    );
+
+    return {
+      groupedLogs,
+      formatTimeAgo,
+    };
+  },
+};
+</script>
+
+<style scoped src="./ProjectHistoryActivity.css"></style>

src/components/specific/projects/project-history-activity/activity-item/ActivityItem.css

@@ -0,0 +1,120 @@
+.activity-item {
+  display: flex;
+  border-radius: 12px;
+  padding: 8px;
+  margin-bottom: 6px;
+  border: 1px solid var(--color-silver-light);
+  transition: 0.2s;
+  cursor: pointer;
+  &:hover {
+    background: #f9fafb;
+  }
+  .icon {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    font-size: 14px;
+  }
+  .content {
+    flex: 1;
+    .title {
+      font-size: 14px;
+      color: var(--color-granite);
+      .primary {
+        color: var(--color-primary);
+        font-weight: 500;
+      }
+    }
+    .date {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 4px;
+    }
+    .details {
+      margin: 6px 0;
+      font-size: 11px;
+      color: var(--color-granite-light);
+      .detail {
+        min-height: 32px;
+        span {
+          color: var(--color-primary);
+          font-weight: 500;
+        }
+      }
+    }
+    .meta {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      .badge {
+        padding: 3px 8px;
+        border-radius: 50px;
+        font-size: 10px;
+      }
+
+      .user {
+        background: #f3f4f6;
+        padding: 2px 6px;
+        border-radius: 999px;
+        font-size: 10px;
+      }
+    }
+  }
+  .arrow {
+    color: #9ca3af;
+    font-size: 18px;
+  }
+  .blue {
+    background: rgba(32, 93, 189, 0.1);
+    color: var(--color-neutral);
+  }
+  .flame {
+    background: rgba(255, 61, 30, .1);
+    color: var(--color-high);
+  }
+  .green {
+    background: rgba(0, 175, 80, .1);
+    color: var(--color-success);
+  }
+  .middle-blue {
+    background: rgba(0, 136, 224, 0.1);
+    color: #0088E0;
+  }
+  .orange {
+    background: rgba(255, 145, 0, 0.1);
+    color: var(--color-warning);
+  }
+  .pink {
+    background: rgba(227,85,119, 0.1);
+    color: #E35577;
+  }
+  .purple {
+    background: rgba(162,89,234, 0.1);
+    color: #A259EA;
+  }
+  .red {
+    background: rgba(188, 0, 10, 0.1);
+    color: var(--color-danger);
+  }
+  .teal {
+    background: rgba(27, 155, 162, 0.1);
+    color: #1B9BA2;
+  }
+  .expand-enter-active,
+  .expand-leave-active {
+    transition: all 0.2s ease;
+  }
+
+  .expand-enter-from,
+  .expand-leave-to {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+}