chore: Minor fix

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

@@ -6,65 +6,50 @@ const sampleCards = [
   {
     id: 'chatwoot-captain',
     title: 'Chatwoot Captain',
-    slug: 'chatwoot-captain',
+    meta_title: 'Chatwoot Captain',
-    description:
+    meta_description:
       'Watch how our latest feature can transform your workflow with powerful automation tools.',
-    media: {
+    slug: 'chatwoot-captain',
-      type: 'image',
+    feature_image:
-      src: 'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
+      'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
-      alt: 'Chatwoot Captain demo image',
-    },
   },
   {
     id: 'smart-routing',
     title: 'Smart Routing Forms',
-    slug: 'smart-routing',
+    meta_title: 'Smart Routing Forms',
-    description:
+    meta_description:
       'Screen bookers with intelligent forms and route them to the right team member.',
-    media: {
+    slug: 'smart-routing',
-      type: 'video',
+    feature_image: 'https://www.chatwoot.com/images/dashboard-dark.webp',
-      src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
-      poster:
-        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg',
-      alt: 'Routing forms demo video',
-    },
   },
   {
     id: 'instant-meetings',
     title: 'Instant Meetings',
+    meta_title: 'Instant Meetings',
+    meta_description: 'Start instant meetings directly from shared links.',
     slug: 'instant-meetings',
-    description: 'Start instant meetings directly from shared links.',
+    feature_image:
-    media: {
+      'https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=600',
-      type: 'image',
-      src: 'https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=600',
-      alt: 'Instant meetings UI preview',
-    },
   },
   {
     id: 'analytics',
     title: 'Advanced Analytics',
-    slug: 'analytics',
+    meta_title: 'Advanced Analytics',
-    description:
+    meta_description:
       'Track meeting performance, conversion, and response rates in one place.',
-    media: {
+    slug: 'analytics',
-      type: 'video',
+    feature_image:
-      src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500',
-      poster:
-        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg',
-      alt: 'Analytics dashboard video preview',
-    },
   },
   {
     id: 'team-collaboration',
     title: 'Team Collaboration',
-    slug: 'team-collaboration',
+    meta_title: 'Team Collaboration',
-    description:
+    meta_description:
       'Coordinate with your team seamlessly using shared availability.',
-    media: {
+    slug: 'team-collaboration',
-      type: 'image',
+    feature_image:
-      src: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600',
+      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400',
-      alt: 'Team collaboration meeting view',
-    },
   },
 ];
 
@@ -72,12 +57,11 @@ const visibleCards = ref([...sampleCards]);
 const currentIndex = ref(0);
 const dismissingCards = ref([]);
 
-const handlePrimaryAction = slug => {
+const handleReadMore = slug => {
-  const card = visibleCards.value.find(c => c.slug === slug);
+  console.log(`Read more: ${slug}`);
-  console.log(`Primary action: ${card?.title}`);
 };
 
-const handleSecondaryAction = slug => {
+const handleDismiss = slug => {
   dismissingCards.value.push(slug);
   setTimeout(() => {
     const idx = visibleCards.value.findIndex(c => c.slug === slug);
@@ -87,9 +71,9 @@ const handleSecondaryAction = slug => {
   }, 200);
 };
 
-const handleCardClick = index => {
+const handleCardClick = data => {
-  currentIndex.value = index;
+  currentIndex.value = data.index;
-  console.log(`Card clicked: ${visibleCards.value[index].title}`);
+  console.log(`Card clicked: ${visibleCards.value[data.index].title}`);
 };
 
 const resetDemo = () => {
@@ -107,12 +91,13 @@ const resetDemo = () => {
     <Variant title="Interactive Demo">
       <div class="p-4 bg-n-solid-2 rounded-md mx-auto w-64 h-[400px]">
         <GroupedStackedChangelogCard
-          :cards="visibleCards"
+          :posts="visibleCards"
           :current-index="currentIndex"
-          :dismissing-cards="dismissingCards"
+          :is-active="currentIndex === 0"
-          class="min-h-[200px]"
+          :dismissing-slugs="dismissingCards"
-          @primary-action="handlePrimaryAction"
+          class="min-h-[270px]"
-          @secondary-action="handleSecondaryAction"
+          @read-more="handleReadMore"
+          @dismiss="handleDismiss"
           @card-click="handleCardClick"
         />
 

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

@@ -54,7 +54,7 @@ const getCardClasses = index => {
 
 <template>
   <div class="overflow-hidden">
-    <div class="hidden relative grid-cols-1 pt-8 pb-2 lg:grid">
+    <div class="relative grid grid-cols-1 pt-8 pb-1 px-2">
       <div
         v-for="(post, index) in stackedPosts"
         :key="post.slug || index"
@@ -62,7 +62,7 @@ const getCardClasses = index => {
       >
         <StackedChangelogCard
           :card="post"
-          :is-actions-visible="index === currentIndex"
+          :is-active="index === currentIndex"
           :is-dismissing="isPostDismissing(post)"
           @read-more="handleReadMore(post)"
           @dismiss="handleDismiss(post)"

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

@@ -4,44 +4,24 @@ import StackedChangelogCard from './StackedChangelogCard.vue';
 const imageCards = {
   id: 'chatwoot-captain',
   title: 'Chatwoot Captain',
+  meta_title: 'Chatwoot Captain',
+  meta_description:
+    'Watch how our latest feature can transform your workflow with powerful automation tools.',
   slug: 'chatwoot-captain',
-  description:
+  feature_image:
-    'Watch how our latest feature can transform your workflow with powerful automation tools.',
+    'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
-  media: {
-    type: 'image',
-    src: 'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
-    alt: 'Chatwoot Captain demo image',
-  },
 };
 
-const videoCards = {
+const handleReadMore = () => {
-  id: 'chatwoot-captain-preview',
+  console.log(`Read more: ${imageCards.title}`);
-  title: 'Chatwoot Captain Preview',
-  slug: 'chatwoot-captain-preview',
-  description:
-    'Watch how our latest feature can transform your workflow with powerful automation tools.',
-  media: {
-    type: 'video',
-    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
-    poster:
-      'https://i.ytimg.com/an_webp/-c_xDMtoOG0/mqdefault_6s.webp?du=3000&sqp=CKrwvMcG&rs=AOn4CLCwHpsblr0TRE9yI7UuEY4aLyr8sw',
-    alt: 'Chatwoot Captain demo video',
-  },
 };
 
-const handlePrimaryAction = data => {
+const handleDismiss = () => {
-  console.log('Primary action clicked:', data);
+  console.log(`Dismissed: ${imageCards.title}`);
-  console.log(`Primary action: ${data.card.title}`);
 };
 
-const handleSecondaryAction = data => {
+const handleCardClick = () => {
-  console.log('Secondary action clicked:', data);
+  console.log(`Card clicked: ${imageCards.title}`);
-  console.log(`Dismissed: ${data.card.title}`);
-};
-
-const handleCardClick = data => {
-  console.log('Card clicked:', data);
-  console.log(`Card clicked: ${data.card.title}`);
 };
 </script>
 
@@ -54,24 +34,11 @@ const handleCardClick = data => {
       <div class="p-3 bg-n-solid-2 w-56">
         <StackedChangelogCard
           :card="imageCards"
-          show-actions
+          is-active
-          show-media
+          :is-dismissing="false"
-          @primary-action="handlePrimaryAction"
+          @read-more="handleReadMore(imageCards)"
-          @secondary-action="handleSecondaryAction"
+          @dismiss="handleDismiss(imageCards)"
-          @card-click="handleCardClick"
+          @card-click="handleCardClick(imageCards)"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Single Card - With Video">
-      <div class="p-3 bg-n-solid-2 w-56">
-        <StackedChangelogCard
-          :card="videoCards"
-          show-actions
-          show-media
-          @primary-action="handlePrimaryAction"
-          @secondary-action="handleSecondaryAction"
-          @card-click="handleCardClick"
         />
       </div>
     </Variant>

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

@@ -1,14 +1,14 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
 
-const props = defineProps({
+defineProps({
   card: {
     type: Object,
     required: true,
   },
-  isActionsVisible: {
+  isActive: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   isDismissing: {
     type: Boolean,
@@ -19,23 +19,26 @@ const props = defineProps({
 const emit = defineEmits(['readMore', 'dismiss', 'cardClick']);
 
 const handleReadMore = () => {
-  emit('readMore', { card: props.card });
+  emit('readMore');
 };
 
 const handleDismiss = () => {
-  emit('dismiss', { card: props.card });
+  emit('dismiss');
 };
 
 const handleCardClick = () => {
-  emit('cardClick', { card: props.card });
+  emit('cardClick');
 };
 </script>
 
 <template>
   <div
     data-testid="changelog-card"
-    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 cursor-pointer border-n-weak hover:shadow-md bg-n-background text-n-slate-12"
+    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 cursor-pointer border-n-weak bg-n-background text-n-slate-12"
-    :class="{ 'animate-fade-out pointer-events-none': isDismissing }"
+    :class="{
+      'animate-fade-out pointer-events-none': isDismissing,
+      'hover:shadow': isActive,
+    }"
     @click="handleCardClick"
   >
     <div>
@@ -76,7 +79,7 @@ const handleCardClick = () => {
       />
     </div>
 
-    <div v-if="isActionsVisible" class="flex justify-between items-center mt-2">
+    <div class="flex justify-between items-center mt-1">
       <Button
         label="Read more"
         color="slate"

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

@@ -100,7 +100,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="unDismissedPosts.length > 0" class="px-2 pt-1">
+  <div v-if="unDismissedPosts.length > 0" class="pt-1">
     <GroupedStackedChangelogCard
       :posts="unDismissedPosts"
       :current-index="currentIndex"