Diff restyle

packages/frontend-2/components/viewer/compare-changes/ObjectGroup.vue

@@ -1,16 +1,24 @@
 <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <template>
   <div
-    class="bg-foundation-2 h-24 flex items-center justify-center flex-col rounded-md min-w-0 cursor-pointer border-b-4 hover:bg-highlight-3 text-center"
-    :class="isSelected ? 'border-primary bg-primary-muted' : 'border-transparent'"
+    class="rounded-md p-2 flex items-center gap-3"
+    :class="[
+      isSelected ? '' : 'border-transparent',
+      objectCount > 0 ? 'cursor-pointer hover:bg-highlight-1' : ''
+    ]"
     @click="setSelection()"
     @keypress="keyboardClick(setSelection)"
   >
-    <div :class="`text-heading-lg font-medium truncate max-w-full ${color}`">
+    <div class="shrink-0 h-10 w-1 rounded-full" :class="color" />
+    <div class="flex flex-col">
+      <div class="text-body-xs font-medium capitalize">{{ name }}</div>
+      <div class="text-body-xs font-medium text-foreground-2 -mt-0.5">
+        {{ description }}
+      </div>
+    </div>
+    <div class="text-heading-lg font-medium ml-auto">
       {{ objectCount }}
     </div>
-    <div class="text-body-2xs">{{ name }}</div>
-    <div class="text-body-3xs text-foreground-2 px-2">{{ description }}</div>
   </div>
 </template>
 <script setup lang="ts">
@@ -32,14 +40,14 @@ const props = defineProps<{
 const color = computed(() => {
   switch (props.name) {
     case 'added':
-      return 'text-green-500'
+      return 'bg-green-500'
     case 'removed':
-      return 'text-rose-500'
+      return 'bg-rose-500'
     case 'modified':
-      return 'text-yellow-500'
+      return 'bg-yellow-500'
     case 'unchanged':
     default:
-      return 'text-neutral-500'
+      return 'bg-neutral-500'
   }
 })
 

packages/frontend-2/components/viewer/compare-changes/Panel.vue

@@ -60,7 +60,7 @@
           @update:model-value="swapDiffMode"
         />
       </div>
-      <div class="grid grid-cols-2 gap-2">
+      <div class="flex flex-col gap-2">
         <ViewerCompareChangesObjectGroup name="unchanged" :object-ids="unchangedIds" />
         <ViewerCompareChangesObjectGroup name="modified" :object-ids="modifiedIds" />
         <ViewerCompareChangesObjectGroup name="added" :object-ids="addedIds" />

packages/frontend-2/components/viewer/models/Card.vue

@@ -177,6 +177,20 @@ const IconEyeClosed = resolveComponent('IconEyeClosed')
 const removeEnabled = computed(() => items.value.length > 1)
 
 const actionsItems = computed<LayoutMenuItem[][]>(() => [
+  [
+    {
+      title: 'Load latest version',
+      id: 'load-latest-version'
+    },
+    {
+      title: 'Show version history',
+      id: 'show-version-history'
+    },
+    {
+      title: 'Show version changes',
+      id: 'show-version-changes'
+    }
+  ],
   [
     {
       title: 'Remove model',