Fix issues from PR

packages/frontend-2/components/viewer/resources/ActiveVersionCard.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="bg-primary-muted flex gap-2 py-2 px-4">
-    <EyeIcon v-tippy="'Currently viewing'" class="h-4 w-4 text-primary mt-0_5" />
+    <EyeIcon
+      v-tippy="'Currently viewing'"
+      class="h-4 w-4 text-primary mt-0_5 focus:outline-0 shrink-0"
+    />
     <div class="flex flex-col overflow-hidden text-xs select-none">
-      <div class="inline-block rounded-full font-bold">
+      <div class="inline-block rounded-full font-bold truncate">
         {{ version.sourceApplication }}
       </div>
       <div class="truncate text-foreground-2">
         {{ version.message || 'no message' }}
       </div>
       <div class="italic text-foreground-2">
-        {{ timeAgo(version.createdAt) }}
+        {{ timeAgo }}
       </div>
     </div>
   </div>
@@ -17,8 +20,8 @@
 
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import { EyeIcon } from '@heroicons/vue/24/solid'
+import { computed } from 'vue'
 
 interface Version {
   sourceApplication?: string | null
@@ -26,17 +29,12 @@ interface Version {
   createdAt: string
 }
 
-defineProps({
-  version: {
-    type: Object as () => Version,
-    required: true
-  }
+const props = defineProps<{
+  version: Version
+}>()
+
+const timeAgo = computed(() => {
+  if (!props.version.createdAt) return 'no message'
+  return dayjs(props.version.createdAt).from(dayjs())
 })
-
-dayjs.extend(relativeTime)
-
-const timeAgo = (date: string) => {
-  if (!date) return 'no message'
-  return dayjs(date).from(dayjs())
-}
 </script>

packages/frontend-2/components/viewer/resources/ModelCard.vue

@@ -25,10 +25,12 @@
           >
             {{ modelName.header }}
           </div>
-          <div class="text-foreground-2 truncate text-xs">
+          <div class="text-foreground-1 truncate text-xs">
             <span
               v-tippy="createdAt"
-              :class="`${showVersions ? 'text-white/70' : ''} text-xs font-semibold`"
+              :class="`${
+                showVersions ? 'text-foundation-5' : ''
+              } text-xs font-semibold`"
             >
               {{ isLatest ? 'latest version' : timeAgoCreatedAt }}
             </span>
@@ -50,13 +52,9 @@
           <ChevronUpIcon class="h-4 w-4" />
         </div>
       </div>
-      <ActiveVersionCard
+      <ViewerResourcesActiveVersionCard
         v-if="loadedVersion && showVersions"
-        :version="{
-          sourceApplication: loadedVersion.sourceApplication,
-          message: loadedVersion.message,
-          createdAt: loadedVersion.createdAt
-        }"
+        :version="loadedVersion"
       />
     </div>
     <Transition>
@@ -123,7 +121,6 @@ import {
   useInjectedViewerRequestedResources
 } from '~~/lib/viewer/composables/setup'
 import { useDiffUtilities } from '~~/lib/viewer/composables/ui'
-import ActiveVersionCard from './ActiveVersionCard.vue'
 
 type ModelItem = NonNullable<Get<ViewerLoadedResourcesQuery, 'project.models.items[0]'>>