Use real conditions for limits

packages/frontend-2/components/project/model-page/Versions.vue

@@ -42,7 +42,6 @@
           :style="`z-index: ${items.length - i};`"
           :selectable="!!selectedItems.length"
           :selection-disabled="disabledSelections[item.id]"
-          :limited="true"
           @select="onSelect(item)"
           @chosen="onSingleActionChosen($event, item)"
           @embed="handleEmbed(item.id)"

packages/frontend-2/components/viewer/PreSetupWrapper.vue

@@ -195,16 +195,17 @@ const hasMissingReferencedObject = computed(() => {
 
 // Check for missing thread when a specific threadId is present in URL
 const hasMissingThread = computed(() => {
-  // If there's no threadId in URL, there's no missing thread
-  if (!focusedThreadId.value) return false
-
-  // If threads are loaded, check if the specific threadId from URL is among them
   const threadIdFromUrl = focusedThreadId.value
-  const isThreadMissing = !state.resources.response.commentThreads.value.some(
+
+  // If there's no threadId in URL, there's no missing thread
+  if (!threadIdFromUrl) return false
+
+  // Find the thread with this ID
+  const thread = state.resources.response.commentThreads.value.find(
     (thread) => thread.id === threadIdFromUrl
   )
 
-  return isThreadMissing
+  return !thread || !thread.rawText
 })
 
 const isFederated = computed(

packages/frontend-2/components/viewer/comments/Comments.vue

@@ -56,7 +56,6 @@
           v-for="thread in commentThreads"
           :key="thread.id"
           :thread="thread"
-          :limited="true"
         />
         <div v-if="commentThreads.length === 0" class="pb-4">
           <ProjectPageLatestItemsCommentsEmptyState

packages/frontend-2/components/viewer/comments/ListItem.vue

@@ -4,9 +4,9 @@
   <div
     :class="`p-1.5 pb-1 flex flex-col rounded-md
       ${isOpenInViewer ? 'bg-highlight-2' : ''}
-      ${limited ? 'cursor-default' : 'cursor-pointer hover:bg-highlight-3'}
+      ${isLimited ? 'cursor-default' : 'cursor-pointer hover:bg-highlight-3'}
     `"
-    @click="limited ? null : open(thread.id)"
+    @click="isLimited ? null : open(thread.id)"
   >
     <div class="flex w-full items-center">
       <div class="flex-1 flex flex-col gap-y-1.5">
@@ -20,14 +20,14 @@
           </span>
         </div>
         <div
-          v-if="!limited"
+          v-if="!isLimited"
           class="truncate text-body-2xs text-foreground dark:text-foreground-2"
         >
           {{ thread.rawText }}
         </div>
         <ViewerResourcesUpgradeLimitAlert
           v-else
-          text="Upgrade to see comments older than (count) days."
+          text="Upgrade to see comments older than 30 days."
         />
         <div class="text-body-3xs flex items-center space-x-3 text-foreground-3 mb-1">
           <div
@@ -57,7 +57,7 @@
         </div>
       </div>
       <FormButton
-        v-if="!limited"
+        v-if="!isLimited"
         v-tippy="thread.archived ? 'Unresolve' : 'Resolve'"
         :icon-left="thread.archived ? CheckCircleIcon : CheckCircleIconOutlined"
         text
@@ -89,7 +89,6 @@ import { useThreadUtilities } from '~~/lib/viewer/composables/ui'
 
 const props = defineProps<{
   thread: LoadedCommentThread
-  limited?: boolean
 }>()
 
 const {
@@ -106,6 +105,11 @@ const {
   }
 } = useInjectedViewerState()
 
+// Determine if thread is plan limited based on missing rawText
+const isLimited = computed(() => {
+  return !props.thread.rawText || props.thread.rawText.trim() === ''
+})
+
 const mp = useMixpanel()
 const open = (id: string) => {
   openThreadRaw(id)

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

@@ -2,7 +2,9 @@
 <template>
   <div
     :class="`group relative block w-full space-y-2 rounded-md pb-2 text-left ${
-      clickable && !limited ? 'hover:bg-primary-muted cursor-pointer' : 'cursor-default'
+      clickable && !isLimited
+        ? 'hover:bg-primary-muted cursor-pointer'
+        : 'cursor-default'
     }
     ${isLoaded ? 'bg-highlight-3' : 'bg-highlight-1'}
     `"
@@ -46,8 +48,8 @@
         v-tippy="'Shows a summary of added, deleted and changed elements.'"
         size="sm"
         text
-        :disabled="limited"
-        :class="limited ? '!text-foreground-3 font-medium' : 'font-medium'"
+        :disabled="isLimited"
+        :class="isLimited ? '!text-foreground-3 font-medium' : 'font-medium'"
         @click.stop="handleViewChanges"
       >
         View changes
@@ -59,9 +61,10 @@
     <!-- Main stuff -->
     <div class="flex items-center space-x-1 pl-5">
       <div
-        class="diagonal-stripes bg-foundation h-16 w-16 flex-shrink-0 rounded-md border border-outline-3"
+        class="bg-foundation h-16 w-16 flex-shrink-0 rounded-md border border-outline-3"
+        :class="isLimited ? 'diagonal-stripes' : ''"
       >
-        <div v-if="limited" class="flex items-center justify-center w-full h-full">
+        <div v-if="isLimited" class="flex items-center justify-center w-full h-full">
           <div
             class="flex h-8 w-8 items-center justify-center rounded-md bg-foundation border border-outline-3"
           >
@@ -72,15 +75,18 @@
       </div>
       <div class="flex flex-col space-y-1 overflow-hidden">
         <div class="flex min-w-0 items-center space-x-1">
-          <div v-if="limited" class="text-body-3xs text-foreground-2 pr-8 select-none">
-            Upgrade to view versions older than (count) days.
+          <div
+            v-if="isLimited"
+            class="text-body-3xs text-foreground-2 pr-8 select-none"
+          >
+            Upgrade to view versions older than {{ limitDays }} days.
           </div>
           <div v-else class="truncate text-xs">
             {{ version.message || 'no message' }}
           </div>
         </div>
         <FormButton
-          v-if="limited"
+          v-if="isLimited"
           color="outline"
           size="sm"
           @click="
@@ -120,16 +126,13 @@ const props = withDefaults(
     showTimeline?: boolean
     last: boolean
     lastLoaded: boolean
-    limited?: boolean
   }>(),
   {
     clickable: true,
     default: false,
     showTimeline: true,
     last: false,
-    lastLoaded: false,
-    // TODO: remove this once we have a way to check if the version is limited
-    limited: true
+    lastLoaded: false
   }
 )
 
@@ -141,6 +144,14 @@ const emit = defineEmits<{
 const isLoaded = computed(() => props.isLoadedVersion)
 const isLatest = computed(() => props.isLatestVersion)
 
+// Check if version is limited by plan restrictions
+const isLimited = computed(() => {
+  return props.version.referencedObject === null
+})
+
+// Todo: Number of days in the version history limit
+const limitDays = computed(() => 30)
+
 const createdAt = computed(() => {
   return {
     full: formattedFullDate(props.version.createdAt),
@@ -154,7 +165,7 @@ const mp = useMixpanel()
 const { activeWorkspaceSlug } = useNavigation()
 
 const handleClick = () => {
-  if (props.limited) return
+  if (isLimited.value) return
   if (props.clickable) emit('changeVersion', props.version.id)
   mp.track('Viewer Action', {
     type: 'action',