fix: better naming

app/javascript/dashboard/components-next/changelog-card/GroupedStackedChangelogCard.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import StackedChangelogCard from './StackedChangelogCard.vue';
 
 const props = defineProps({
-  cards: {
+  posts: {
     type: Array,
     required: true,
   },
@@ -11,7 +11,7 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  dismissingCards: {
+  dismissingSlugs: {
     type: Array,
     default: () => [],
   },
@@ -19,22 +19,22 @@ const props = defineProps({
 
 const emit = defineEmits(['readMore', 'dismiss', 'cardClick']);
 
-const stackedCards = computed(() => props.cards?.slice(0, 5));
+const stackedPosts = computed(() => props.posts?.slice(0, 5));
 
-const isCardDismissing = card => props.dismissingCards.includes(card.slug);
+const isPostDismissing = post => props.dismissingSlugs.includes(post.slug);
 
-const handleReadMore = card => emit('readMore', card.slug);
-const handleDismiss = card => emit('dismiss', card.slug);
-const handleCardClick = (card, index) => {
-  if (index !== props.currentIndex && !isCardDismissing(card)) {
-    emit('cardClick', { slug: card.slug, index });
+const handleReadMore = post => emit('readMore', post.slug);
+const handleDismiss = post => emit('dismiss', post.slug);
+const handlePostClick = (post, index) => {
+  if (index !== props.currentIndex && !isPostDismissing(post)) {
+    emit('cardClick', { slug: post.slug, index });
   }
 };
 
 const getCardClasses = index => {
   const pos =
-    (index - props.currentIndex + stackedCards.value.length) %
-    stackedCards.value.length;
+    (index - props.currentIndex + stackedPosts.value.length) %
+    stackedPosts.value.length;
   const base =
     'relative transition-all duration-500 ease-out col-start-1 row-start-1';
 
@@ -56,18 +56,17 @@ const getCardClasses = index => {
   <div class="overflow-hidden">
     <div class="hidden relative grid-cols-1 pt-8 pb-2 lg:grid">
       <div
-        v-for="(card, index) in stackedCards"
-        :key="card.slug || index"
+        v-for="(post, index) in stackedPosts"
+        :key="post.slug || index"
         :class="getCardClasses(index)"
       >
         <StackedChangelogCard
-          :card="card"
-          :show-actions="index === currentIndex"
-          :show-media="index === currentIndex"
-          :is-dismissing="isCardDismissing(card)"
-          @read-more="handleReadMore(card)"
-          @dismiss="handleDismiss(card)"
-          @card-click="handleCardClick(card, index)"
+          :card="post"
+          :is-actions-visible="index === currentIndex"
+          :is-dismissing="isPostDismissing(post)"
+          @read-more="handleReadMore(post)"
+          @dismiss="handleDismiss(post)"
+          @card-click="handlePostClick(post, index)"
         />
       </div>
     </div>

app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue

@@ -6,15 +6,7 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  primaryAction: {
-    type: Object,
-    default: () => ({ label: 'Read more', color: 'slate' }),
-  },
-  secondaryAction: {
-    type: Object,
-    default: () => ({ label: 'Dismiss', color: 'slate' }),
-  },
-  showActions: {
+  isActionsVisible: {
     type: Boolean,
     default: true,
   },
@@ -84,18 +76,18 @@ const handleCardClick = () => {
       />
     </div>
 
-    <div v-if="showActions" class="flex justify-between items-center mt-2">
+    <div v-if="isActionsVisible" class="flex justify-between items-center mt-2">
       <Button
-        :label="primaryAction.label"
-        :color="primaryAction.color"
+        label="Read more"
+        color="slate"
         link
         sm
         class="text-xs font-normal hover:!no-underline"
         @click.stop="handleReadMore"
       />
       <Button
-        :label="secondaryAction.label"
-        :color="secondaryAction.color"
+        label="Dismiss"
+        color="slate"
         link
         sm
         class="text-xs font-normal hover:!no-underline"

app/javascript/dashboard/components-next/sidebar/SidebarChangelogCard.vue

@@ -18,8 +18,8 @@ const dismissedSlugs = computed(() => {
   return uiSettings.value.changelog_dismissed_slugs || [];
 });
 
-// Get undismissed posts
-const visibleCards = computed(() => {
+// Get undismissed posts - these are the changelog posts that should be shown
+const undismissedPosts = computed(() => {
   return posts.value.filter(post => !dismissedSlugs.value.includes(post.slug));
 });
 
@@ -75,23 +75,24 @@ const handleDismiss = slug => {
   setTimeout(() => {
     dismissPost(slug);
     dismissingCards.value = dismissingCards.value.filter(s => s !== slug);
-    if (currentIndex.value >= visibleCards.value.length) currentIndex.value = 0;
+    if (currentIndex.value >= undismissedPosts.value.length)
+      currentIndex.value = 0;
   }, 200);
 };
 
 const handleReadMore = () => {
-  const currentCard = visibleCards.value[currentIndex.value];
-  if (currentCard?.url) {
-    window.open(currentCard.url, '_blank');
+  const currentPost = undismissedPosts.value[currentIndex.value];
+  if (currentPost?.url) {
+    window.open(currentPost.url, '_blank');
     // Also dismiss the card when user clicks read more
-    handleDismiss(currentCard.slug);
+    handleDismiss(currentPost.slug);
   }
 };
 
 const handleCardClick = () => {
-  const currentCard = visibleCards.value[currentIndex.value];
-  if (currentCard?.url) {
-    window.open(currentCard.url, '_blank');
+  const currentPost = undismissedPosts.value[currentIndex.value];
+  if (currentPost?.url) {
+    window.open(currentPost.url, '_blank');
   }
 };
 
@@ -101,11 +102,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="visibleCards.length > 0" class="px-2 pt-1">
+  <div v-if="undismissedPosts.length > 0" class="px-2 pt-1">
     <GroupedStackedChangelogCard
-      :cards="visibleCards"
+      :posts="undismissedPosts"
       :current-index="currentIndex"
-      :dismissing-cards="dismissingCards"
+      :dismissing-slugs="dismissingCards"
       class="min-h-[240px]"
       @read-more="handleReadMore"
       @dismiss="handleDismiss"