feat: Update articles page UI (#13049)

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

@@ -29,12 +29,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'tabChange',
-  'localeChange',
-  'categoryChange',
-  'newArticle',
-]);
+const emit = defineEmits(['tabChange', 'localeChange', 'categoryChange']);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -126,23 +121,21 @@ const handleCategoryAction = ({ value }) => {
   isCategoryMenuOpen.value = false;
 };
 
-const handleNewArticle = () => {
-  emit('newArticle');
-};
-
 const handleTabChange = value => {
   emit('tabChange', value);
 };
 </script>
 
 <template>
-  <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
+  <div
+    class="flex flex-col items-start justify-between w-full gap-2 lg:flex-row"
+  >
     <TabBar
       :tabs="tabs"
       :initial-active-tab="activeTabIndex"
       @tab-changed="handleTabChange"
     />
-    <div class="flex items-start justify-between w-full gap-2">
+    <div class="flex items-start justify-between lg:justify-end w-full gap-2">
       <div class="flex items-center gap-2">
         <div class="relative group">
           <OnClickOutside @trigger="isLocaleMenuOpen = false">
@@ -159,7 +152,7 @@ const handleTabChange = value => {
               v-if="isLocaleMenuOpen"
               :menu-items="localeMenuItems"
               show-search
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="ltr:left-0 rtl:right-0 w-40 max-w-[300px] mt-2 overflow-y-auto top-full max-h-60"
               @action="handleLocaleAction"
             />
           </OnClickOutside>
@@ -180,18 +173,12 @@ const handleTabChange = value => {
               v-if="isCategoryMenuOpen"
               :menu-items="categoryMenuItems"
               show-search
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="ltr:right-0 rtl:left-0 w-48 mt-2 overflow-y-auto top-full max-h-60"
               @action="handleCategoryAction"
             />
           </OnClickOutside>
         </div>
       </div>
-      <Button
-        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
-        icon="i-lucide-plus"
-        size="sm"
-        @click="handleNewArticle"
-      />
     </div>
   </div>
 </template>

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

@@ -136,7 +136,12 @@ const navigateToNewArticlePage = () => {
     :total-items="articlesCount"
     :items-per-page="25"
     :header="portalName"
+    :header-title="t('HELP_CENTER.ARTICLES_PAGE.HEADER')"
+    :create-button-label="
+      t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')
+    "
     :show-pagination-footer="shouldShowPaginationFooter"
+    @create="navigateToNewArticlePage"
     @update:current-page="handlePageChange"
   >
     <template #header-actions>
@@ -149,7 +154,6 @@ const navigateToNewArticlePage = () => {
           @tab-change="handleTabChange"
           @locale-change="handleLocaleAction"
           @category-change="handleCategoryAction"
-          @new-article="navigateToNewArticlePage"
         />
         <CategoryHeaderControls
           v-else-if="showCategoryHeaderControls"

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -85,7 +85,7 @@ const handleDeletePortal = () => {
       </div>
       <div
         v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
+        class="flex flex-col w-full gap-4 max-w-2xl pb-8"
       >
         <PortalBaseSettings
           :active-portal="activePortal"