feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue

@@ -2,17 +2,21 @@
 import CategoryCard from './CategoryCard.vue';
 const categories = [
   {
-    id: 'getting-started',
-    title: '🚀 Getting started',
+    id: 1,
+    title: 'Getting started',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '5',
+    articlesCount: 5,
+    slug: 'getting-started',
+    icon: '🚀',
   },
   {
-    id: 'marketing',
-    title: '📈 Marketing',
+    id: 2,
+    title: 'Marketing',
     description: '',
-    articlesCount: '4',
+    articlesCount: 4,
+    slug: 'marketing',
+    icon: '📈',
   },
 ];
 </script>
@@ -31,9 +35,12 @@ const categories = [
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <CategoryCard
+          :id="category.id"
+          :slug="category.slug"
           :title="category.title"
           :description="category.description"
           :articles-count="category.articlesCount"
+          :icon="category.icon"
         />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -8,14 +9,14 @@ import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.v
 
 const props = defineProps({
   id: {
-    type: String,
+    type: Number,
     required: true,
   },
   title: {
     type: String,
     required: true,
   },
-  articlesCount: {
+  icon: {
     type: String,
     required: true,
   },
@@ -23,25 +24,41 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  articlesCount: {
+    type: Number,
+    required: true,
+  },
+  slug: {
+    type: String,
+    required: true,
+  },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'action']);
+
+const { t } = useI18n();
 
 const isOpen = ref(false);
 
-const menuItems = [
+const categoryMenuItems = [
   {
     label: 'Edit',
     action: 'edit',
+    value: 'edit',
     icon: 'edit',
   },
   {
     label: 'Delete',
     action: 'delete',
+    value: 'delete',
     icon: 'delete',
   },
 ];
 
+const categoryTitleWithIcon = computed(() => {
+  return `${props.icon} ${props.title}`;
+});
+
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -50,48 +67,51 @@ const hasDescription = computed(() => {
   return props.description.length > 0;
 });
 
-const handleClick = id => {
-  emit('click', id);
+const handleClick = slug => {
+  emit('click', slug);
 };
 
-// eslint-disable-next-line no-unused-vars
-const handleAction = action => {
-  // TODO: Implement action
+const handleAction = ({ action, value }) => {
+  emit('action', { action, value, id: props.id });
+  isOpen.value = false;
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
-  <CardLayout @click="handleClick(id)">
+  <CardLayout>
     <template #header>
       <div class="flex gap-2">
-        <div class="flex justify-between w-full">
+        <div class="flex justify-between w-full gap-1">
           <div class="flex items-center justify-start gap-2">
             <span
-              class="text-base cursor-pointer group-hover/cardLayout:underline text-slate-900 dark:text-slate-50 line-clamp-1"
+              class="text-base cursor-pointer hover:underline text-slate-900 dark:text-slate-50 line-clamp-1"
+              @click="handleClick(slug)"
             >
-              {{ title }}
+              {{ categoryTitleWithIcon }}
             </span>
             <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
+              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center truncate border rounded-lg min-w-fit text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
             >
-              {{ articlesCount }} articles
+              {{
+                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
+                  count: articlesCount,
+                })
+              }}
             </span>
           </div>
           <div class="relative group" @click.stop>
-            <Button
-              variant="ghost"
-              size="icon"
-              icon="more-vertical"
-              class="w-8 z-60 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="isOpen = !isOpen"
-            />
             <OnClickOutside @trigger="isOpen = false">
+              <Button
+                variant="ghost"
+                size="sm"
+                icon="more-vertical"
+                class="w-8 z-60 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+                @click="isOpen = !isOpen"
+              />
               <DropdownMenu
                 v-if="isOpen"
-                :menu-items="menuItems"
-                class="right-0 mt-1 xl:left-0 top-full z-60"
+                :menu-items="categoryMenuItems"
+                class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
                 @action="handleAction"
               />
             </OnClickOutside>