chore: Minor fix

2025-10-29 18:22:53 +00:00 · 2025-10-16 12:04:34 +05:30
parent 65ee960218
commit 9a579fbfea
5 changed files with 66 additions and 111 deletions
--- a/app/javascript/dashboard/components-next/changelog-card/GroupedStackedChangelogCard.story.vue
+++ b/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',
-    description:
+    meta_title: 'Chatwoot Captain',
+    meta_description:
      'Watch how our latest feature can transform your workflow with powerful automation tools.',
-    media: {
-      type: 'image',
-      src: 'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
-      alt: 'Chatwoot Captain demo image',
-    },
+    slug: 'chatwoot-captain',
+    feature_image:
+      'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
  },
  {
    id: 'smart-routing',
    title: 'Smart Routing Forms',
-    slug: 'smart-routing',
-    description:
+    meta_title: 'Smart Routing Forms',
+    meta_description:
      'Screen bookers with intelligent forms and route them to the right team member.',
-    media: {
-      type: 'video',
-      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',
-    },
+    slug: 'smart-routing',
+    feature_image: 'https://www.chatwoot.com/images/dashboard-dark.webp',
  },
  {
    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.',
-    media: {
-      type: 'image',
-      src: 'https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=600',
-      alt: 'Instant meetings UI preview',
-    },
+    feature_image:
+      'https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=600',
  },
  {
    id: 'analytics',
    title: 'Advanced Analytics',
-    slug: 'analytics',
-    description:
+    meta_title: 'Advanced Analytics',
+    meta_description:
      'Track meeting performance, conversion, and response rates in one place.',
-    media: {
-      type: 'video',
-      src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-      poster:
-        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg',
-      alt: 'Analytics dashboard video preview',
-    },
+    slug: 'analytics',
+    feature_image:
+      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500',
  },
  {
    id: 'team-collaboration',
    title: 'Team Collaboration',
-    slug: 'team-collaboration',
-    description:
+    meta_title: 'Team Collaboration',
+    meta_description:
      'Coordinate with your team seamlessly using shared availability.',
-    media: {
-      type: 'image',
-      src: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600',
-      alt: 'Team collaboration meeting view',
-    },
+    slug: 'team-collaboration',
+    feature_image:
+      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400',
  },
 ];

@@ -72,12 +57,11 @@ const visibleCards = ref([...sampleCards]);
 const currentIndex = ref(0);
 const dismissingCards = ref([]);

-const handlePrimaryAction = slug => {
-  const card = visibleCards.value.find(c => c.slug === slug);
-  console.log(`Primary action: ${card?.title}`);
+const handleReadMore = slug => {
+  console.log(`Read more: ${slug}`);
 };

-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 => {
-  currentIndex.value = index;
-  console.log(`Card clicked: ${visibleCards.value[index].title}`);
+const handleCardClick = data => {
+  currentIndex.value = data.index;
+  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"
-          class="min-h-[200px]"
-          @primary-action="handlePrimaryAction"
-          @secondary-action="handleSecondaryAction"
+          :is-active="currentIndex === 0"
+          :dismissing-slugs="dismissingCards"
+          class="min-h-[270px]"
+          @read-more="handleReadMore"
+          @dismiss="handleDismiss"
          @card-click="handleCardClick"
        />

--- a/app/javascript/dashboard/components-next/changelog-card/GroupedStackedChangelogCard.vue
+++ b/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)"
--- a/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.story.vue
+++ b/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:
-    'Watch how our latest feature can transform your workflow with powerful automation tools.',
-  media: {
-    type: 'image',
-    src: 'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
-    alt: 'Chatwoot Captain demo image',
-  },
+  feature_image:
+    'https://www.chatwoot.com/images/captain/captain_thumbnail.jpg',
 };

-const videoCards = {
-  id: 'chatwoot-captain-preview',
-  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 handleReadMore = () => {
+  console.log(`Read more: ${imageCards.title}`);
 };

-const handlePrimaryAction = data => {
-  console.log('Primary action clicked:', data);
-  console.log(`Primary action: ${data.card.title}`);
+const handleDismiss = () => {
+  console.log(`Dismissed: ${imageCards.title}`);
 };

-const handleSecondaryAction = data => {
-  console.log('Secondary action clicked:', data);
-  console.log(`Dismissed: ${data.card.title}`);
-};
-
-const handleCardClick = data => {
-  console.log('Card clicked:', data);
-  console.log(`Card clicked: ${data.card.title}`);
+const handleCardClick = () => {
+  console.log(`Card clicked: ${imageCards.title}`);
 };
 </script>

@@ -54,24 +34,11 @@ const handleCardClick = data => {
      <div class="p-3 bg-n-solid-2 w-56">
        <StackedChangelogCard
          :card="imageCards"
-          show-actions
-          show-media
-          @primary-action="handlePrimaryAction"
-          @secondary-action="handleSecondaryAction"
-          @card-click="handleCardClick"
-        />
-      </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"
+          is-active
+          :is-dismissing="false"
+          @read-more="handleReadMore(imageCards)"
+          @dismiss="handleDismiss(imageCards)"
+          @card-click="handleCardClick(imageCards)"
        />
      </div>
    </Variant>
--- a/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
+++ b/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="{ 'animate-fade-out pointer-events-none': isDismissing }"
+    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,
+      '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"
--- a/app/javascript/dashboard/components-next/sidebar/SidebarChangelogCard.vue
+++ b/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"