chore: Support creating articles from category view (#14406)

# Pull Request Template

## Description

This PR adds support for creating articles directly from the category
view. Previously, articles could only be created from the main articles
page. With this change, users can now create a new article while
browsing a specific category, making the workflow faster and more
convenient.

Fixes
https://linear.app/chatwoot/issue/CW-7050/create-an-article-when-inside-a-category

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Screencast


https://github.com/user-attachments/assets/e5a72a85-676e-4747-948a-6b1a19d2089f




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue

@@ -84,28 +84,20 @@ const findCategoryFromSlug = slug => {
   return categories.value?.find(category => category.slug === slug);
 };
 
-const assignCategoryFromSlug = slug => {
-  const categoryFromSlug = findCategoryFromSlug(slug);
-  if (categoryFromSlug) {
-    selectedCategoryId.value = categoryFromSlug.id;
-    return categoryFromSlug;
-  }
-  return null;
-};
-
 const selectedCategory = computed(() => {
   if (isNewArticle.value) {
+    if (selectedCategoryId.value) {
+      return (
+        categories.value?.find(c => c.id === selectedCategoryId.value) || null
+      );
+    }
     if (categorySlugFromRoute.value) {
-      const categoryFromSlug = assignCategoryFromSlug(
+      const categoryFromSlug = findCategoryFromSlug(
         categorySlugFromRoute.value
       );
       if (categoryFromSlug) return categoryFromSlug;
     }
-    return selectedCategoryId.value
-      ? categories.value.find(
-          category => category.id === selectedCategoryId.value
-        )
-      : categories.value[0] || null;
+    return categories.value?.[0] || null;
   }
   return categories.value.find(
     category => category.id === props.article?.category?.id

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -168,7 +168,9 @@ const handlePageChange = page => emit('pageChange', page);
 const navigateToNewArticlePage = () => {
   const { categorySlug, locale } = route.params;
   router.push({
-    name: 'portals_articles_new',
+    name: props.isCategoryArticles
+      ? 'portals_categories_articles_new'
+      : 'portals_articles_new',
     params: { categorySlug, locale },
   });
 };
@@ -274,6 +276,7 @@ watch(
           :categories="categories"
           :allowed-locales="allowedLocales"
           :has-selected-category="isCategoryArticles"
+          @new-article="navigateToNewArticlePage"
         />
       </div>
     </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['localeChange']);
+const emit = defineEmits(['localeChange', 'newArticle']);
 
 const route = useRoute();
 const router = useRouter();
@@ -179,7 +179,7 @@ const handleBreadcrumbClick = () => {
         />
       </OnClickOutside>
     </div>
-    <div v-else class="relative">
+    <div v-else class="relative flex items-center gap-2">
       <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
         <Button
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
@@ -196,6 +196,12 @@ const handleBreadcrumbClick = () => {
           @close="isEditCategoryDialogOpen = false"
         />
       </OnClickOutside>
+      <Button
+        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
+        icon="i-lucide-plus"
+        size="sm"
+        @click="emit('newArticle')"
+      />
     </div>
   </div>
 </template>

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

@@ -19,6 +19,7 @@ const DEFAULT_ROUTE = 'portals_articles_index';
 const CATEGORY_ROUTE = 'portals_categories_index';
 const CATEGORY_SUB_ROUTES = [
   'portals_categories_articles_index',
+  'portals_categories_articles_new',
   'portals_categories_articles_edit',
 ];
 

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -62,6 +62,14 @@ const portalRoutes = [
     meta,
     component: PortalsArticlesIndexPage,
   },
+  {
+    path: getPortalRoute(
+      ':portalSlug/:locale/categories/:categorySlug/articles/new'
+    ),
+    name: 'portals_categories_articles_new',
+    meta,
+    component: PortalsArticlesNewPage,
+  },
   {
     path: getPortalRoute(
       ':portalSlug/:locale/categories/:categorySlug/articles/:articleSlug'

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue

@@ -21,7 +21,18 @@ const selectedCategoryId = ref(null);
 const currentUserId = useMapGetter('getCurrentUserID');
 const categories = useMapGetter('categories/allCategories');
 
-const categoryId = computed(() => categories.value[0]?.id || null);
+const categoryId = computed(() => {
+  const { categorySlug } = route.params;
+  if (categorySlug) {
+    const matched = categories.value?.find(c => c.slug === categorySlug);
+    if (matched) return matched.id;
+  }
+  return categories.value[0]?.id || null;
+});
+
+const isCategoryArticles = computed(
+  () => route.name === 'portals_categories_articles_new'
+);
 
 const article = ref({});
 const isUpdating = ref(false);
@@ -44,23 +55,34 @@ const createNewArticle = async ({ title, content }) => {
   isUpdating.value = true;
   try {
     const { locale } = route.params;
+    const resolvedCategoryId = selectedCategoryId.value || categoryId.value;
     const articleId = await store.dispatch('articles/create', {
       portalSlug,
       content: article.value.content,
       title: article.value.title,
       locale: locale,
       authorId: selectedAuthorId.value || currentUserId.value,
-      categoryId: selectedCategoryId.value || categoryId.value,
+      categoryId: resolvedCategoryId,
     });
 
     useTrack(PORTALS_EVENTS.CREATE_ARTICLE, { locale });
 
+    const resolvedSlug = categories.value?.find(
+      c => c.id === resolvedCategoryId
+    )?.slug;
+    const startedFromCategorySlug = route.params.categorySlug;
+
     router.replace({
-      name: 'portals_articles_edit',
+      name: isCategoryArticles.value
+        ? 'portals_categories_articles_edit'
+        : 'portals_articles_edit',
       params: {
         articleSlug: articleId,
         portalSlug,
         locale,
+        ...(startedFromCategorySlug
+          ? { categorySlug: resolvedSlug || startedFromCategorySlug }
+          : {}),
       },
     });
   } catch (error) {
@@ -74,10 +96,17 @@ const createNewArticle = async ({ title, content }) => {
 
 const goBackToArticles = () => {
   const { tab, categorySlug, locale } = route.params;
-  router.push({
-    name: 'portals_articles_index',
-    params: { tab, categorySlug, locale },
-  });
+  if (isCategoryArticles.value) {
+    router.push({
+      name: 'portals_categories_articles_index',
+      params: { categorySlug, locale },
+    });
+  } else {
+    router.push({
+      name: 'portals_articles_index',
+      params: { tab, categorySlug, locale },
+    });
+  }
 };
 </script>