chore: Add proxy

- increment cwctl version

.eslintrc.js

@@ -12,6 +12,20 @@ module.exports = {
         'vitest-globals/env': true,
       },
     },
+    {
+      files: ['**/*.story.vue'],
+      rules: {
+        'vue/no-undef-components': [
+          'error',
+          {
+            ignorePatterns: ['Variant', 'Story'],
+          },
+        ],
+        // Story files can have static strings, it doesn't need to handle i18n always.
+        'vue/no-bare-strings-in-template': 'off',
+        'no-console': 'off',
+      },
+    },
   ],
   plugins: ['html', 'prettier'],
   parserOptions: {
@@ -223,11 +237,5 @@ module.exports = {
   globals: {
     bus: true,
     vi: true,
-    // beforeEach: true,
-    // afterEach: true,
-    // test: true,
-    // describe: true,
-    // it: true,
-    // expect: true,
   },
 };

Gemfile.lock

@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actioncable (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionmailbox (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activestorage (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionmailer (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      actionview (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.4)
-      actionview (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionpack (7.0.8.5)
+      actionview (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actiontext (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activestorage (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionview (7.0.8.5)
+      activesupport (= 7.0.8.5)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8.4)
-      activesupport (= 7.0.8.4)
+    activejob (7.0.8.5)
+      activesupport (= 7.0.8.5)
       globalid (>= 0.3.6)
-    activemodel (7.0.8.4)
-      activesupport (= 7.0.8.4)
-    activerecord (7.0.8.4)
-      activemodel (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    activemodel (7.0.8.5)
+      activesupport (= 7.0.8.5)
+    activerecord (7.0.8.5)
+      activemodel (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    activestorage (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.4)
+    activesupport (7.0.8.5)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -373,7 +373,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -479,7 +479,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.14)
+    net-imap (0.4.17)
       date
       net-protocol
     net-pop (0.1.2)
@@ -557,7 +557,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (2.2.9)
+    rack (2.2.10)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -574,20 +574,20 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8.4)
-      actioncable (= 7.0.8.4)
-      actionmailbox (= 7.0.8.4)
-      actionmailer (= 7.0.8.4)
-      actionpack (= 7.0.8.4)
-      actiontext (= 7.0.8.4)
-      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activemodel (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    rails (7.0.8.5)
+      actioncable (= 7.0.8.5)
+      actionmailbox (= 7.0.8.5)
+      actionmailer (= 7.0.8.5)
+      actionpack (= 7.0.8.5)
+      actiontext (= 7.0.8.5)
+      actionview (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activemodel (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activestorage (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.4)
+      railties (= 7.0.8.5)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -595,9 +595,9 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    railties (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)

Makefile

@@ -6,7 +6,7 @@ RAILS_ENV ?= development
 setup:
 	gem install bundler
 	bundle install
-	yarn install
+	pnpm install
 
 db_create:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:create
@@ -30,7 +30,7 @@ server:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails server -b 0.0.0.0 -p 3000
 
 burn:
-	bundle && yarn
+	bundle && pnpm install
 
 run:
 	@if [ -f ./.overmind.sock ]; then \

app/controllers/api/v1/accounts/integrations/captain_controller.rb

@@ -1,22 +1,25 @@
 class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
   before_action :check_admin_authorization?
-  before_action :fetch_hook
+  before_action :hook
 
-  def sso_url
-    params_string =
-      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
-      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
-      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
+  def proxy
+    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
+    url = "#{base_url}/api/v1/accounts/#{hook.settings[:account_id]}/#{params[:route]}"
 
-    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
+    # make the request to the Captain service
+    # also add the access token and email to header use X-User-Email and X-User-Token
+    #
+    response = HTTParty.send(params[:method].downcase, url, body: params[:body], headers: {
+                               'X-User-Email' => hook.settings[:account_email],
+                               'X-User-Token' => hook.settings[:access_token]
+                             })
 
-    sso_url = "#{installation_config.value}/sso?#{params_string}"
-    render json: { sso_url: sso_url }, status: :ok
+    render json: response.body, status: response.code
   end
 
   private
 
-  def fetch_hook
-    @hook = Current.account.hooks.find_by!(app_id: 'captain')
+  def hook
+    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
   end
 end

app/controllers/google/callbacks_controller.rb

@@ -1,6 +1,15 @@
 class Google::CallbacksController < OauthCallbackController
   include GoogleConcern
 
+  def find_channel_by_email
+    # find by imap_login first, and then by email
+    # this ensures the legacy users can migrate correctly even if inbox email address doesn't match
+    imap_channel = Channel::Email.find_by(imap_login: users_data['email'], account: account)
+    return imap_channel if imap_channel
+
+    Channel::Email.find_by(email: users_data['email'], account: account)
+  end
+
   private
 
   def provider_name

app/controllers/oauth_callback_controller.rb

@@ -25,7 +25,7 @@ class OauthCallbackController < ApplicationController
   end
 
   def find_or_create_inbox
-    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
+    channel_email = find_channel_by_email
     # we need this value to know where to redirect on sucessful processing of the callback
     channel_exists = channel_email.present?
 
@@ -39,6 +39,10 @@ class OauthCallbackController < ApplicationController
     [channel_email.inbox, channel_exists]
   end
 
+  def find_channel_by_email
+    Channel::Email.find_by(email: users_data['email'], account: account)
+  end
+
   def update_channel(channel_email)
     channel_email.update!({
                             imap_login: users_data['email'], imap_address: imap_address,

app/javascript/dashboard/App.vue

@@ -13,6 +13,7 @@ import { useStore } from 'dashboard/composables/store';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
+import { useAccount } from 'dashboard/composables/useAccount';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -35,8 +36,9 @@ export default {
   setup() {
     const router = useRouter();
     const store = useStore();
+    const { accountId } = useAccount();
 
-    return { router, store };
+    return { router, store, currentAccountId: accountId };
   },
   data() {
     return {
@@ -52,7 +54,6 @@ export default {
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
-      currentAccountId: 'getCurrentAccountId',
     }),
     hasAccounts() {
       const { accounts = [] } = this.currentUser || {};
@@ -69,10 +70,13 @@ export default {
         this.showAddAccountModal = true;
       }
     },
-    currentAccountId() {
-      if (this.currentAccountId) {
-        this.initializeAccount();
-      }
+    currentAccountId: {
+      immediate: true,
+      handler() {
+        if (this.currentAccountId) {
+          this.initializeAccount();
+        }
+      },
     },
   },
   mounted() {

app/javascript/dashboard/assets/scss/_woot.scss

@@ -46,8 +46,158 @@
   @apply hidden;
 }
 
+// scss-lint:disable PropertySortOrder
 @layer base {
-  // scss-lint:disable PropertySortOrder
+  /* NEXT COLORS START */
+  :root {
+    /* slate */
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --slate-11: 96 100 108;
+    --slate-12: 28 32 36;
+
+    --ruby-1: 255 252 253;
+    --ruby-2: 255 247 248;
+    --ruby-3: 254 234 237;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    --background-color: 248 248 248;
+    --solid-1: 255 255 255;
+    --solid-2: 252 252 252;
+    --solid-3: 255 255 255;
+    --solid-active: 250 251 251;
+    --white-alpha: 255 255 255 0.1;
+    --border-weak: 231 231 231;
+    --border-strong: 235 235 235;
+    --amber-solid: 252 232 193;
+    --blue-solid: 218 236 255;
+    --blue: 39 129 246;
+
+    /* alpha is added by default */
+    --alpha-1: 36, 38, 48, 0.06;
+    --alpha-2: 130, 134, 150, 0.12;
+    --alpha-3: 255, 255, 255, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-2: 0, 0, 0, 0.04;
+  }
+
+  body.dark {
+    /* slate */
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --slate-11: 176 180 186;
+    --slate-12: 237 238 240;
+
+    --ruby-1: 25 17 19;
+    --ruby-2: 30 21 23;
+    --ruby-3: 58 20 30;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    --background-color: 18 18 19;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 36 38 48;
+    --solid-active: 51 53 64;
+    --border-weak: 34 34 37;
+    --border-strong: 46 47 49;
+    --amber-solid: 42 37 30;
+    --blue-solid: 16 49 91;
+    --blue: 126 182 255;
+
+    /* alpha is added by default */
+    --alpha-1: 35, 37, 45, 0.8;
+    --alpha-2: 130, 134, 150, 0.15;
+    --alpha-3: 32, 33, 37, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --black-alpha-2: 0, 0, 0, 0.2;
+    --white-alpha: 255, 255, 255, 0.1;
+  }
+  /* NEXT COLORS END */
+
   :root {
     --color-amber-25: 254 253 251;
     --color-amber-50: 255 249 237;

app/javascript/dashboard/components-next/CardLayout.vue

@@ -0,0 +1,16 @@
+<script setup>
+const emit = defineEmits(['click']);
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col w-full gap-3 px-6 py-5 group/cardLayout rounded-2xl bg-slate-25 dark:bg-slate-800/50"
+    @click="handleClick"
+  >
+    <slot name="header" />
+    <slot name="footer" />
+  </div>
+</template>

app/javascript/dashboard/components-next/EmptyStateLayout.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  subtitle: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <section
+    class="relative flex flex-col items-center justify-center w-full h-full min-h-screen p-4 overflow-hidden"
+  >
+    <div
+      class="relative w-full max-w-[940px] mx-auto overflow-hidden h-full max-h-[448px]"
+    >
+      <div
+        class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
+      >
+        <slot name="empty-state-item" />
+      </div>
+      <div
+        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-9 bg-gradient-to-t from-white dark:from-slate-900 to-transparent font-interDisplay"
+      >
+        <div class="flex flex-col items-center justify-center gap-6">
+          <div class="flex flex-col items-center justify-center gap-2">
+            <h2
+              class="text-3xl font-medium text-center text-slate-900 dark:text-white"
+            >
+              {{ title }}
+            </h2>
+            <p
+              class="max-w-lg text-base text-center text-slate-600 dark:text-slate-300"
+            >
+              {{ subtitle }}
+            </p>
+          </div>
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup>
+import ArticleCard from './ArticleCard.vue';
+
+const articles = [
+  {
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: '2 days ago',
+    author: 'Michael',
+    category: '⚡️ Marketing',
+    views: 400,
+  },
+  {
+    title: 'Setting up your first Help Center portal',
+    status: '',
+    updatedAt: '1 week ago',
+    author: 'John',
+    category: '🛠️ Development',
+    views: 1400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 4300,
+  },
+];
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/HelpCenter/ArticleCard"
+    :layout="{ type: 'grid', width: '700px' }"
+  >
+    <Variant title="Article Card">
+      <div
+        v-for="(article, index) in articles"
+        :key="index"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <ArticleCard
+          :title="article.title"
+          :status="article.status"
+          :author="article.author"
+          :category="article.category"
+          :views="article.views"
+          :updated-at="article.updatedAt"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+  },
+  author: {
+    type: String,
+    required: true,
+  },
+  category: {
+    type: String,
+    required: true,
+  },
+  views: {
+    type: Number,
+    required: true,
+  },
+  updatedAt: {
+    type: String,
+    required: true,
+  },
+});
+
+const isOpen = ref(false);
+
+const menuItems = computed(() => {
+  const baseItems = [{ label: 'Delete', action: 'delete', icon: 'delete' }];
+  const menuOptions = {
+    archived: [
+      { label: 'Publish', action: 'publish', icon: 'checkmark' },
+      { label: 'Draft', action: 'draft', icon: 'draft' },
+    ],
+    draft: [
+      { label: 'Publish', action: 'publish', icon: 'checkmark' },
+      { label: 'Archive', action: 'archive', icon: 'archive' },
+    ],
+    '': [
+      // Empty string represents published status
+      { label: 'Draft', action: 'draft', icon: 'draft' },
+      { label: 'Archive', action: 'archive', icon: 'archive' },
+    ],
+  };
+  return [...(menuOptions[props.status] || menuOptions['']), ...baseItems];
+});
+
+const statusTextColor = computed(() => {
+  switch (props.status) {
+    case 'archived':
+      return '!text-slate-600 dark:!text-slate-200';
+    case 'draft':
+      return '!text-amber-700 dark:!text-amber-400';
+    default:
+      return '!text-teal-700 dark:!text-teal-400';
+  }
+});
+
+const statusText = computed(() => {
+  switch (props.status) {
+    case 'archived':
+      return 'Archived';
+    case 'draft':
+      return 'Draft';
+    default:
+      return 'Published';
+  }
+});
+
+const handleAction = () => {
+  isOpen.value = false;
+};
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <CardLayout>
+    <template #header>
+      <div class="flex justify-between gap-1">
+        <span class="text-base text-slate-900 dark:text-slate-50 line-clamp-1">
+          {{ title }}
+        </span>
+        <div class="relative group">
+          <Button
+            variant="ghost"
+            size="sm"
+            class="text-xs bg-slate-50 !font-normal group-hover:bg-slate-100/50 dark:group-hover:bg-slate-700/50 !h-6 dark:bg-slate-800 rounded-md border-0 !px-2 !py-0.5"
+            :label="statusText"
+            :class="statusTextColor"
+            @click="isOpen = !isOpen"
+          />
+          <OnClickOutside @trigger="isOpen = false">
+            <DropdownMenu
+              v-if="isOpen"
+              :menu-items="menuItems"
+              class="right-0 mt-2 xl:left-0 top-full"
+              @action="handleAction"
+            />
+          </OnClickOutside>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex items-center justify-between gap-4">
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-1">
+            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
+            <span class="text-sm text-slate-500 dark:text-slate-400">
+              {{ author }}
+            </span>
+          </div>
+          <span
+            class="block text-sm whitespace-nowrap text-slate-500 dark:text-slate-400"
+          >
+            {{ category }}
+          </span>
+          <div
+            class="inline-flex items-center gap-1 text-slate-500 dark:text-slate-400 whitespace-nowrap"
+          >
+            <FluentIcon icon="eye-show" size="18" />
+            <span class="text-sm"> {{ views }} views </span>
+          </div>
+        </div>
+        <span class="text-sm text-slate-600 dark:text-slate-400 line-clamp-1">
+          {{ updatedAt }}
+        </span>
+      </div>
+    </template>
+  </CardLayout>
+</template>

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

@@ -0,0 +1,41 @@
+<script setup>
+import CategoryCard from './CategoryCard.vue';
+const categories = [
+  {
+    id: 'getting-started',
+    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',
+  },
+  {
+    id: 'marketing',
+    title: '📈 Marketing',
+    description: '',
+    articlesCount: '4',
+  },
+];
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/HelpCenter/CategoryCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Category Card">
+      <div
+        v-for="(category, index) in categories"
+        :key="index"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <CategoryCard
+          :title="category.title"
+          :description="category.description"
+          :articles-count="category.articlesCount"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,115 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  articlesCount: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const isOpen = ref(false);
+
+const menuItems = [
+  {
+    label: 'Edit',
+    action: 'edit',
+    icon: 'edit',
+  },
+  {
+    label: 'Delete',
+    action: 'delete',
+    icon: 'delete',
+  },
+];
+
+const description = computed(() => {
+  return props.description ? props.description : 'No description added';
+});
+
+const hasDescription = computed(() => {
+  return props.description.length > 0;
+});
+
+const handleClick = id => {
+  emit('click', id);
+};
+
+// eslint-disable-next-line no-unused-vars
+const handleAction = action => {
+  // TODO: Implement action
+};
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <CardLayout @click="handleClick(id)">
+    <template #header>
+      <div class="flex gap-2">
+        <div class="flex justify-between w-full">
+          <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"
+            >
+              {{ title }}
+            </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"
+            >
+              {{ articlesCount }} articles
+            </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">
+              <DropdownMenu
+                v-if="isOpen"
+                :menu-items="menuItems"
+                class="right-0 mt-1 xl:left-0 top-full z-60"
+                @action="handleAction"
+              />
+            </OnClickOutside>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <span
+        class="text-sm line-clamp-3"
+        :class="
+          hasDescription
+            ? 'text-slate-500 dark:text-slate-400'
+            : 'text-slate-400 dark:text-slate-700'
+        "
+      >
+        {{ description }}
+      </span>
+    </template>
+  </CardLayout>
+</template>

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

@@ -0,0 +1,99 @@
+<script setup>
+import { ref } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import PortalSwitcher from 'dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue';
+
+defineProps({
+  header: {
+    type: String,
+    default: 'Chatwoot Help Center',
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalItems: {
+    type: Number,
+    default: 100,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 25,
+  },
+  showHeaderTitle: {
+    type: Boolean,
+    default: true,
+  },
+  showPaginationFooter: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['update:currentPage']);
+
+const showPortalSwitcher = ref(false);
+
+const updateCurrentPage = page => {
+  emit('update:currentPage', page);
+};
+const togglePortalSwitcher = () => {
+  showPortalSwitcher.value = !showPortalSwitcher.value;
+};
+</script>
+
+<template>
+  <section
+    class="flex flex-col w-full h-full overflow-hidden bg-white dark:bg-slate-900"
+  >
+    <header
+      class="sticky top-0 z-10 px-6 pb-3 bg-white lg:px-0 dark:bg-slate-900"
+    >
+      <div class="w-full max-w-[900px] mx-auto">
+        <div
+          v-if="showHeaderTitle"
+          class="flex items-center justify-start h-20 gap-2"
+        >
+          <span class="text-xl font-medium text-slate-900 dark:text-white">
+            {{ header }}
+          </span>
+          <div class="relative group">
+            <Button
+              icon="more-vertical"
+              variant="ghost"
+              size="sm"
+              class="group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+              @click="togglePortalSwitcher"
+            />
+            <OnClickOutside @trigger="showPortalSwitcher = false">
+              <PortalSwitcher
+                v-if="showPortalSwitcher"
+                class="absolute left-0 top-9"
+              />
+            </OnClickOutside>
+          </div>
+        </div>
+        <slot name="header-actions" />
+      </div>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto py-3">
+        <slot name="content" />
+      </div>
+    </main>
+    <footer
+      v-if="showPaginationFooter"
+      class="sticky bottom-0 z-10 px-4 pt-3 pb-4 bg-white dark:bg-slate-900"
+    >
+      <PaginationFooter
+        :current-page="currentPage"
+        :total-items="totalItems"
+        :items-per-page="itemsPerPage"
+        @update:current-page="updateCurrentPage"
+      />
+    </footer>
+  </section>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup>
+import LocaleCard from './LocaleCard.vue';
+const locales = [
+  { name: 'English', isDefault: true, articleCount: 29, categoryCount: 5 },
+  { name: 'Spanish', isDefault: false, articleCount: 29, categoryCount: 5 },
+];
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/HelpCenter/LocaleCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Locale Card">
+      <div class="px-10 py-4 bg-white dark:bg-slate-900">
+        <div v-for="(locale, index) in locales" :key="index" class="px-20 py-2">
+          <LocaleCard
+            :locale="locale.name"
+            :is-default="locale.isDefault"
+            :article-count="locale.articleCount"
+            :category-count="locale.categoryCount"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+defineProps({
+  locale: {
+    type: String,
+    required: true,
+  },
+  isDefault: {
+    type: Boolean,
+    required: true,
+  },
+  articleCount: {
+    type: Number,
+    required: true,
+  },
+  categoryCount: {
+    type: Number,
+    required: true,
+  },
+});
+
+const isOpen = ref(false);
+
+const menuItems = [
+  {
+    label: 'Make default',
+    action: 'default',
+    icon: 'star-emphasis',
+  },
+  {
+    label: 'Delete',
+    action: 'delete',
+    icon: 'delete',
+  },
+];
+
+// eslint-disable-next-line no-unused-vars
+const handleAction = action => {
+  // TODO: Implement action
+};
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <CardLayout class="ltr:pr-2 rtl:pl-2">
+    <template #header>
+      <div class="flex justify-between gap-2">
+        <div class="flex items-center justify-start gap-2">
+          <span
+            class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
+          >
+            {{ locale }}
+          </span>
+          <span
+            v-if="isDefault"
+            class="bg-slate-100 dark:bg-slate-800 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-woot-500 dark:text-woot-400 px-2 py-0.5"
+          >
+            Default
+          </span>
+        </div>
+        <div class="flex items-center justify-end gap-1">
+          <div class="flex items-center gap-4">
+            <span
+              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
+            >
+              {{ articleCount }} articles
+            </span>
+            <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
+            <span
+              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
+            >
+              {{ categoryCount }} categories
+            </span>
+          </div>
+          <div class="relative group">
+            <Button
+              variant="ghost"
+              size="icon"
+              icon="more-vertical"
+              class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+              @click="isOpen = !isOpen"
+            />
+            <OnClickOutside @trigger="isOpen = false">
+              <DropdownMenu
+                v-if="isOpen"
+                :menu-items="menuItems"
+                class="right-0 mt-1 xl:left-0 top-full z-60 min-w-[147px]"
+                @action="handleAction"
+              />
+            </OnClickOutside>
+          </div>
+        </div>
+      </div>
+    </template>
+  </CardLayout>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup>
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+
+defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <ul role="list" class="w-full h-full space-y-4">
+    <ArticleCard
+      v-for="article in articles"
+      :key="article.title"
+      :title="article.title"
+      :status="article.status"
+      :author="article.author"
+      :category="article.category"
+      :views="article.views"
+      :updated-at="article.updatedAt"
+    />
+  </ul>
+</template>

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

@@ -0,0 +1,72 @@
+<script setup>
+import ArticlesPage from './ArticlesPage.vue';
+
+const articles = [
+  {
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: '2 days ago',
+    author: 'Michael',
+    category: '⚡️ Marketing',
+    views: 3400,
+  },
+  {
+    title: 'Setting up your first Help Center portal',
+    status: '',
+    updatedAt: '1 week ago',
+    author: 'John',
+    category: '🛠️ Development',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Customizing the appearance of your Help Center',
+    status: '',
+    updatedAt: '5 days ago',
+    author: 'Jane',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Customizing the appearance of your Help Center',
+    status: '',
+    updatedAt: '5 days ago',
+    author: 'Jane',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
+    <Variant title="All Articles">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+        <ArticlesPage :articles="articles" />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,74 @@
+<script setup>
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+
+defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  },
+});
+
+const tabs = [
+  { label: 'All articles', count: 24 },
+  { label: 'Mine', count: 13 },
+  { label: 'Draft', count: 5 },
+  { label: 'Archived', count: 11 },
+];
+// TODO: remove comments
+// eslint-disable-next-line no-unused-vars
+const handleTabChange = tab => {
+  // TODO: Implement tab change logic
+};
+// eslint-disable-next-line no-unused-vars
+const handlePageChange = page => {
+  // TODO: Implement page change logic
+};
+</script>
+
+<template>
+  <HelpCenterLayout
+    :current-page="1"
+    :total-items="100"
+    :items-per-page="10"
+    @update:current-page="handlePageChange"
+  >
+    <template #header-actions>
+      <div class="flex items-end justify-between">
+        <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
+          <TabBar
+            :tabs="tabs"
+            :initial-active-tab="1"
+            @tab-changed="handleTabChange"
+          />
+          <div class="flex items-start justify-between w-full gap-2">
+            <div class="flex items-center gap-2">
+              <Button
+                label="English"
+                size="sm"
+                icon-position="right"
+                icon="chevron-lucide-down"
+                icon-lib="lucide"
+                variant="secondary"
+              />
+              <Button
+                label="All categories"
+                size="sm"
+                icon-position="right"
+                icon="chevron-lucide-down"
+                icon-lib="lucide"
+                variant="secondary"
+              />
+            </div>
+            <Button label="New article" icon="add" size="sm" />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <ArticleList :articles="articles" />
+    </template>
+  </HelpCenterLayout>
+</template>

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

@@ -0,0 +1,209 @@
+<script setup>
+import CategoriesPage from './CategoriesPage.vue';
+
+const categories = [
+  {
+    id: 'getting-started',
+    title: '🚀 Getting started',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '2',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'marketing',
+    title: 'Marketing',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
+    articlesCount: '4',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Customizing the appearance of your Help Center',
+        status: '',
+        updatedAt: '5 days ago',
+        author: 'Jane',
+        category: '💰 Finance',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'development',
+    title: 'Development',
+    description: '',
+    articlesCount: '5',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Customizing the appearance of your Help Center',
+        status: '',
+        updatedAt: '5 days ago',
+        author: 'Jane',
+        category: '💰 Finance',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'roadmap',
+    title: '🛣️ Roadmap',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '3',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'finance',
+    title: '💰 Finance',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '2',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
+    <Variant title="All Categories">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+        <CategoriesPage :categories="categories" />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,101 @@
+<script setup>
+import { ref, computed } from 'vue';
+// import { OnClickOutside } from '@vueuse/components';
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
+import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+// import EditCategory from 'dashboard/playground/HelpCenter/components/EditCategory.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+});
+
+const selectedCategory = ref(null);
+// const showEditCategory = ref(false);
+
+// const openEditCategory = () => {
+//   showEditCategory.value = true;
+// };
+// const closeEditCategory = () => {
+//   showEditCategory.value = false;
+// };
+
+const breadcrumbItems = computed(() => {
+  const items = [{ label: 'Categories (en-US)', link: '#' }];
+  if (selectedCategory.value) {
+    items.push({
+      label: selectedCategory.value.title,
+      count: selectedCategory.value.articles.length,
+    });
+  }
+  return items;
+});
+const openCategoryArticles = id => {
+  selectedCategory.value = props.categories.find(
+    category => category.id === id
+  );
+};
+const resetCategory = () => {
+  selectedCategory.value = null;
+};
+const displayedArticles = computed(() => {
+  return selectedCategory.value ? selectedCategory.value.articles : [];
+});
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #header-actions>
+      <div class="flex items-center justify-between">
+        <div v-if="!selectedCategory" class="flex items-center gap-4">
+          <Button
+            label="English"
+            size="sm"
+            icon-position="right"
+            icon="chevron-lucide-down"
+            icon-lib="lucide"
+            variant="secondary"
+          />
+          <div
+            class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800"
+          />
+          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+            {{ categories.length }} categories
+          </span>
+        </div>
+        <Breadcrumb v-else :items="breadcrumbItems" @click="resetCategory" />
+        <Button
+          v-if="!selectedCategory"
+          label="New category"
+          icon="add"
+          size="sm"
+        />
+        <div v-else class="relative">
+          <Button
+            label="Edit category"
+            variant="secondary"
+            size="sm"
+            @click="openEditCategory"
+          />
+          <!-- <OnClickOutside @trigger="closeEditCategory">
+            <EditCategory v-if="showEditCategory" @close="closeEditCategory" />
+          </OnClickOutside> -->
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <CategoryList
+        v-if="!selectedCategory"
+        :categories="categories"
+        @click="openCategoryArticles"
+      />
+      <ArticleList v-else :articles="displayedArticles" />
+    </template>
+  </HelpCenterLayout>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup>
+import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
+
+defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = id => {
+  emit('click', id);
+};
+</script>
+
+<template>
+  <ul role="list" class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2">
+    <CategoryCard
+      v-for="category in categories"
+      :id="category.id"
+      :key="category.title"
+      :title="category.title"
+      :description="category.description"
+      :articles-count="category.articlesCount"
+      @click="handleClick(category.id)"
+    />
+  </ul>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { computed } from 'vue';
+import { debounce } from '@chatwoot/utils';
+import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
+
+const { article } = defineProps({
+  article: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['saveArticle']);
+
+const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
+
+const articleTitle = computed({
+  get: () => article.title,
+  set: title => {
+    saveArticle({ title });
+  },
+});
+
+const articleContent = computed({
+  get: () => article.content,
+  set: content => {
+    saveArticle({ content });
+  },
+});
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <HelpCenterLayout :show-header-title="false" :show-pagination-footer="false">
+    <template #header-actions>
+      <div class="flex items-center justify-between h-20">
+        <Button
+          label="Back to articles"
+          icon="chevron-lucide-left"
+          icon-lib="lucide"
+          variant="link"
+          text-variant="info"
+          size="sm"
+        />
+        <div class="flex items-center gap-4">
+          <span class="text-xs font-medium text-slate-500 dark:text-slate-400">
+            Saved
+          </span>
+          <div class="flex items-center gap-2">
+            <Button label="Preview" variant="secondary" size="sm" />
+            <Button
+              label="Publish"
+              icon="chevron-lucide-down"
+              icon-position="right"
+              icon-lib="lucide"
+              size="sm"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
+        <TextArea
+          v-model="articleTitle"
+          class="h-12"
+          custom-text-area-class="border-0 !text-[32px] !bg-transparent !py-0 !px-0 !h-auto !leading-[48px] !font-medium !tracking-[0.2px]"
+          placeholder="Title"
+        />
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2">
+            <div class="w-5 h-5 rounded-full bg-slate-100 dark:bg-slate-700" />
+            <span class="text-sm text-slate-500 dark:text-slate-400">
+              John Doe
+            </span>
+          </div>
+          <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+          <Button
+            label="Uncategorized"
+            icon="play-shape"
+            variant="ghost"
+            class="!px-2 font-normal"
+            text-variant="info"
+          />
+          <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+          <Button
+            label="More properties"
+            icon="add"
+            variant="ghost"
+            class="!px-2 font-normal"
+          />
+        </div>
+      </div>
+      <FullEditor
+        v-model="articleContent"
+        class="py-0 pb-10 pl-4 rtl:pr-4 rtl:pl-0 h-fit"
+        placeholder="Write something"
+        :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
+      />
+    </template>
+  </HelpCenterLayout>
+</template>
+
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror .empty-node::before {
+    @apply text-slate-200 dark:text-slate-500 text-base;
+  }
+
+  .ProseMirror-menubar-wrapper {
+    .ProseMirror-woot-style {
+      @apply min-h-[15rem] max-h-full;
+    }
+  }
+
+  .ProseMirror-menubar {
+    display: none; // Hide by default
+  }
+
+  .editor-root .has-selection {
+    .ProseMirror-menubar {
+      @apply h-8 rounded-lg !px-2 z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
+      display: flex;
+      top: var(--selection-top, auto) !important;
+      left: var(--selection-left, 0) !important;
+      width: fit-content !important;
+      position: absolute !important;
+
+      .ProseMirror-menuitem {
+        @apply mr-0;
+        .ProseMirror-icon {
+          @apply p-0 mt-1 !mr-0;
+          svg {
+            width: 20px !important;
+            height: 20px !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue

@@ -0,0 +1,23 @@
+<script setup>
+import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
+
+defineProps({
+  locales: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <ul role="list" class="w-full h-full space-y-4">
+    <LocaleCard
+      v-for="(locale, index) in locales"
+      :key="index"
+      :locale="locale.name"
+      :is-default="locale.isDefault"
+      :article-count="locale.articleCount"
+      :category-count="locale.categoryCount"
+    />
+  </ul>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue

@@ -0,0 +1,52 @@
+<script setup>
+import LocalesPage from './LocalesPage.vue';
+
+const locales = [
+  {
+    name: 'English (en-US)',
+    isDefault: true,
+    articleCount: 5,
+    categoryCount: 5,
+  },
+  {
+    name: 'Spanish (es-ES)',
+    isDefault: false,
+    articleCount: 20,
+    categoryCount: 10,
+  },
+  {
+    name: 'English (en-UK)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+  {
+    name: 'Malay (ms-MY)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+  {
+    name: 'Malayalam (ml-IN)',
+    isDefault: false,
+    articleCount: 10,
+    categoryCount: 5,
+  },
+  {
+    name: 'Hindi (hi-IN)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
+    <Variant title="All Locales">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+        <LocalesPage :locales="locales" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from 'vue';
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
+
+const props = defineProps({
+  locales: {
+    type: Array,
+    required: true,
+  },
+});
+
+const localeCount = computed(() => props.locales?.length);
+
+// TODO: remove comments
+// eslint-disable-next-line no-unused-vars
+const handleTabChange = tab => {
+  // TODO: Implement tab change logic
+};
+// eslint-disable-next-line no-unused-vars
+const handlePageChange = page => {
+  // TODO: Implement page change logic
+};
+</script>
+
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #header-actions>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
+          </span>
+        </div>
+        <Button
+          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
+          icon="add"
+          size="sm"
+        />
+      </div>
+    </template>
+    <template #content>
+      <LocaleList :locales="locales" />
+    </template>
+  </HelpCenterLayout>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup>
+import PortalSettings from './PortalSettings.vue';
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
+    <Variant title="Default">
+      <div class="w-[1000px] min-h-screen bg-white dark:bg-slate-900">
+        <PortalSettings />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,113 @@
+<script setup>
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const handleUploadAvatar = () => {};
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #content>
+      <div class="flex flex-col w-full gap-10 max-w-[640px] pt-2 pb-8">
+        <div class="flex flex-col w-full gap-4">
+          <div class="flex flex-col w-full gap-2">
+            <label
+              class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+            >
+              Avatar
+            </label>
+            <Avatar
+              label="Avatar"
+              src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
+              class="bg-ruby-300 dark:bg-ruby-400"
+              @upload="handleUploadAvatar"
+            />
+          </div>
+          <div class="flex flex-col w-full gap-2">
+            <div class="flex justify-between w-full h-10 gap-2 py-1">
+              <label
+                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+              >
+                Name
+              </label>
+              <Input placeholder="Name" class="w-[432px]" />
+            </div>
+            <div class="flex justify-between w-full h-10 gap-2 py-1">
+              <label
+                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+              >
+                Header text
+              </label>
+              <Input placeholder="Header text" class="w-[432px]" />
+            </div>
+            <div class="flex justify-between w-full h-10 gap-2 py-1">
+              <label
+                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+              >
+                Page title
+              </label>
+              <Input placeholder="Page title" class="w-[432px]" />
+            </div>
+            <div class="flex justify-between w-full h-10 gap-2 py-1">
+              <label
+                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+              >
+                Widget color
+              </label>
+            </div>
+            <div class="flex justify-end w-full gap-2 py-2">
+              <Button label="Save changes" size="sm" />
+            </div>
+          </div>
+          <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        </div>
+        <div class="flex flex-col w-full gap-6">
+          <div class="flex flex-col w-full gap-6">
+            <h6 class="text-base font-medium text-slate-900 dark:text-slate-50">
+              Configuration
+            </h6>
+            <div class="flex flex-col w-full gap-4">
+              <div class="flex justify-between w-full gap-2 py-1">
+                <InlineInput
+                  placeholder="Slug"
+                  label="Slug:"
+                  custom-label-class="min-w-[100px]"
+                  custom-input-class="!w-[430px]"
+                />
+              </div>
+              <div class="flex justify-between w-full gap-2 py-1">
+                <InlineInput
+                  placeholder="Custom domain"
+                  label="Custom domain:"
+                  custom-label-class="min-w-[100px]"
+                  custom-input-class="!w-[430px]"
+                />
+              </div>
+              <div class="flex justify-between w-full gap-2 py-1">
+                <InlineInput
+                  placeholder="Home page link"
+                  label="Home page link:"
+                  custom-label-class="min-w-[100px]"
+                  custom-input-class="!w-[430px]"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-end w-full gap-3 py-4">
+            <Button label="Edit configuration" size="sm" variant="secondary" />
+            <Button
+              label="Delete Test-Help Center"
+              size="sm"
+              variant="destructive"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </HelpCenterLayout>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup>
+import PortalSwitcher from './PortalSwitcher.vue';
+
+const portals = [
+  {
+    id: 1,
+    name: 'Chatwoot Help Center',
+    articles: 67,
+    domain: 'chatwoot.help',
+    slug: 'help-center',
+  },
+  {
+    id: 2,
+    name: 'Chatwoot Handbook',
+    articles: 42,
+    domain: 'chatwoot.help',
+    slug: 'handbook',
+  },
+  {
+    id: 3,
+    name: 'Developer Documentation',
+    articles: 89,
+    domain: 'dev.chatwoot.com',
+    slug: 'docs',
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/HelpCenter/PortalSwitcher"
+    :layout="{ type: 'grid', width: '510px' }"
+  >
+    <Variant title="Portal Switcher">
+      <div class="h-[500px] p-4 bg-slate-100 dark:bg-slate-900">
+        <PortalSwitcher
+          :portals="portals"
+          header="Choose a Portal"
+          description="Select from available help center portals"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,111 @@
+<script setup>
+import { ref } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  portals: {
+    type: Array,
+    default: () => [
+      {
+        id: 1,
+        name: 'Chatwoot Help Center',
+        articles: 67,
+        domain: 'chatwoot.help',
+        slug: 'help-center',
+      },
+      {
+        id: 2,
+        name: 'Chatwoot Handbook',
+        articles: 42,
+        domain: 'chatwoot.help',
+        slug: 'handbook',
+      },
+    ],
+  },
+  header: {
+    type: String,
+    default: 'Portals',
+  },
+  description: {
+    type: String,
+    default: 'Create and manage multiple portals',
+  },
+});
+
+const selectedPortal = ref(1);
+
+const handlePortalChange = id => {
+  selectedPortal.value = id;
+};
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <div
+    class="pt-5 pb-3 bg-white z-50 dark:bg-slate-800 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+  >
+    <div class="flex items-center justify-between gap-4 px-6 pb-2">
+      <div class="flex flex-col gap-1">
+        <h2 class="text-base font-medium text-slate-900 dark:text-slate-50">
+          {{ header }}
+        </h2>
+        <p class="text-sm text-slate-600 dark:text-slate-300">
+          {{ description }}
+        </p>
+      </div>
+      <Button label="New portal" variant="secondary" icon="add" size="sm" />
+    </div>
+    <div v-if="portals.length > 0" class="flex flex-col gap-3">
+      <template v-for="(portal, index) in portals" :key="portal.id">
+        <div class="flex flex-col gap-2 px-6 py-2">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <input
+                :id="portal.id"
+                v-model="selectedPortal"
+                type="radio"
+                :value="portal.id"
+                class="mr-3"
+                @change="handlePortalChange(portal.id)"
+              />
+              <label
+                :for="portal.id"
+                class="text-sm font-medium text-slate-900 dark:text-slate-100"
+              >
+                {{ portal.name }}
+              </label>
+            </div>
+            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
+          </div>
+          <div class="inline-flex items-center gap-2 py-1 text-sm">
+            <span class="text-slate-600 dark:text-slate-400">
+              articles:
+              <span class="text-slate-800 dark:text-slate-200">
+                {{ portal.articles }}
+              </span>
+            </span>
+            <div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
+            <span class="text-slate-600 dark:text-slate-400">
+              domain:
+              <span class="text-slate-800 dark:text-slate-200">
+                {{ portal.domain }}
+              </span>
+            </span>
+            <div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
+            <span class="text-slate-600 dark:text-slate-400">
+              slug:
+              <span class="text-slate-800 dark:text-slate-200">
+                {{ portal.slug }}
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          v-if="index < portals.length - 1 && portals.length > 1"
+          class="w-full h-px bg-slate-50 dark:bg-slate-700/50"
+        />
+      </template>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/avatar/Avatar.story.vue

@@ -0,0 +1,36 @@
+<script setup>
+import Avatar from './Avatar.vue';
+</script>
+
+<template>
+  <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <Avatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
+          class="bg-ruby-300 dark:bg-ruby-900"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Sizes">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
+          :size="48"
+          class="bg-green-300 dark:bg-green-900"
+        />
+        <Avatar
+          :size="72"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          class="bg-indigo-300 dark:bg-indigo-900"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          :size="96"
+          class="bg-woot-300 dark:bg-woot-900"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 72,
+  },
+});
+
+const emit = defineEmits(['upload']);
+
+const avatarSize = computed(() => `${props.size}px`);
+const iconSize = computed(() => `${props.size / 2}px`);
+
+const handleUploadAvatar = () => {
+  emit('upload');
+};
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
+    :style="{
+      width: avatarSize,
+      height: avatarSize,
+    }"
+  >
+    <img
+      v-if="src"
+      :src="props.src"
+      alt="avatar"
+      class="w-full h-full shadow-sm rounded-xl"
+    />
+    <div
+      class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleUploadAvatar"
+    >
+      <FluentIcon
+        icon="upload-lucide"
+        icon-lib="lucide"
+        :size="iconSize"
+        class="text-white dark:text-white"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref } from 'vue';
+import Breadcrumb from './Breadcrumb.vue';
+
+const singleItem = ref([{ label: 'Home', link: '#' }]);
+const twoItems = ref([
+  { label: 'Home', link: '#' },
+  { label: 'Categories', link: '#' },
+]);
+const threeItems = ref([
+  { label: 'Home', link: '#' },
+  { label: 'Categories', link: '#' },
+  { label: 'Marketing', count: 6 },
+]);
+const longBreadcrumb = ref([
+  { label: 'Home', link: '#' },
+  { label: 'Categories', link: '#' },
+  { label: 'Marketing', link: '#' },
+  { label: 'Digital', link: '#' },
+  { label: 'Social Media', count: 12 },
+]);
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/Breadcrumb"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Single Item">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="singleItem" />
+      </div>
+    </Variant>
+
+    <Variant title="Two Items">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="twoItems" />
+      </div>
+    </Variant>
+
+    <Variant title="Three Items with Count">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="threeItems" count-label="articles" />
+      </div>
+    </Variant>
+
+    <Variant title="Long Breadcrumb">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="longBreadcrumb" count-label="articles" />
+      </div>
+    </Variant>
+
+    <Variant title="RTL Support">
+      <div dir="rtl">
+        <div class="w-full p-4 bg-white dark:bg-slate-900">
+          <Breadcrumb :items="threeItems" count-label="articles" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { defineProps } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+defineProps({
+  items: {
+    type: Array,
+    required: true,
+    validator: value => {
+      return value.every(
+        item =>
+          typeof item.label === 'string' &&
+          (item.link === undefined || typeof item.link === 'string') &&
+          (item.count === undefined || typeof item.count === 'number')
+      );
+    },
+  },
+  countLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
+    <ol class="flex items-center mb-0">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="flex items-center gap-3"
+      >
+        <template v-if="index === items.length - 1">
+          <span class="text-sm text-slate-900 dark:text-slate-50">
+            {{
+              `${item.label}${item.count ? ` (${item.count} ${countLabel})` : ''}`
+            }}
+          </span>
+        </template>
+        <a
+          v-else
+          :href="item.link"
+          class="text-sm transition-colors duration-200 text-slate-300 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-100"
+        >
+          {{ item.label }}
+        </a>
+        <FluentIcon
+          v-if="index < items.length - 1"
+          icon="chevron-lucide-right"
+          size="18"
+          icon-lib="lucide"
+          class="flex-shrink-0 text-slate-300 dark:text-slate-500 ltr:mr-3 rtl:mr-0 rtl:ml-3"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>

app/javascript/dashboard/components-next/button/Button.story.vue

@@ -0,0 +1,126 @@
+<script setup>
+import Button from './Button.vue';
+</script>
+
+<template>
+  <Story title="Components/Button" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <Button label="Default Button" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Disabled" disabled />
+        <Button label="Disabled" variant="outline" disabled />
+        <Button label="Disabled" disabled icon="delete" variant="outline" />
+        <Button
+          label="Disabled"
+          disabled
+          icon="delete"
+          variant="destructive"
+          size="sm"
+        />
+        <Button
+          label="Disabled"
+          disabled
+          icon="delete"
+          variant="ghost"
+          size="sm"
+        />
+        <Button
+          label="Disabled"
+          disabled
+          icon="delete"
+          variant="link"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled with icon">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <Button label="Disabled Button" icon="emoji-add" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Different variant">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Default" variant="default" />
+        <Button label="Destructive" variant="destructive" />
+        <Button label="Outline" variant="outline" />
+        <Button label="Secondary" variant="secondary" />
+        <Button label="Ghost" variant="ghost" />
+        <Button label="Link" variant="link" />
+      </div>
+    </Variant>
+
+    <Variant title="Different variant with icon only">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button icon="emoji-add" variant="default" />
+        <Button icon="emoji-add" variant="destructive" />
+        <Button icon="emoji-add" variant="outline" />
+        <Button icon="emoji-add" variant="secondary" />
+        <Button icon="emoji-add" variant="ghost" />
+        <Button icon="emoji-add" variant="link" />
+      </div>
+    </Variant>
+
+    <Variant title="Different size">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Default" />
+        <Button label="Large" size="lg" />
+        <Button label="Small" size="sm" />
+      </div>
+    </Variant>
+
+    <Variant title="Different text variant">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Default" text-variant="default" variant="outline" />
+        <Button label="Success" text-variant="success" variant="outline" />
+        <Button label="Warning" text-variant="warning" variant="outline" />
+        <Button label="Danger" text-variant="danger" variant="outline" />
+        <Button label="Info" text-variant="info" variant="outline" />
+      </div>
+    </Variant>
+
+    <Variant title="Button with left icon with different sizes and icon only">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Default" icon="emoji-add" icon-position="left" />
+        <Button
+          label="Default LG"
+          icon="emoji-add"
+          icon-position="left"
+          size="lg"
+        />
+        <Button
+          label="Default SM"
+          icon="emoji-add"
+          icon-position="left"
+          size="sm"
+        />
+        <Button icon="emoji-add" size="icon" />
+      </div>
+    </Variant>
+
+    <Variant title="Button with right icon with different sizes and icon only">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Default" icon="emoji-add" icon-position="right" />
+        <Button
+          label="Default LG"
+          icon="emoji-add"
+          icon-position="right"
+          size="lg"
+        />
+        <Button
+          label="Default SM"
+          icon="emoji-add"
+          icon-position="right"
+          size="sm"
+        />
+        <Button icon="emoji-add" size="icon" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/button/Button.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed } from 'vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  variant: {
+    type: String,
+    default: 'default',
+    validator: value =>
+      [
+        'default',
+        'destructive',
+        'outline',
+        'secondary',
+        'ghost',
+        'link',
+      ].includes(value),
+  },
+  textVariant: {
+    type: String,
+    default: '',
+    validator: value =>
+      ['', 'default', 'success', 'warning', 'danger', 'info'].includes(value),
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: value => ['default', 'sm', 'lg', 'icon'].includes(value),
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconPosition: {
+    type: String,
+    default: 'left',
+    validator: value => ['left', 'right'].includes(value),
+  },
+  iconLib: {
+    type: String,
+    default: 'fluent',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const buttonVariants = {
+  variant: {
+    default:
+      'bg-woot-500 dark:bg-woot-500 text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
+    destructive:
+      'bg-ruby-700 dark:bg-ruby-700 text-white dark:text-white hover:bg-ruby-800 dark:hover:bg-ruby-800',
+    outline:
+      'border border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600',
+    secondary:
+      'bg-slate-50 text-slate-900 dark:bg-slate-700/50 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-600',
+    ghost:
+      'text-slate-900 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800',
+    link: 'text-woot-500 underline-offset-4 hover:underline dark:hover:underline',
+  },
+  size: {
+    default: 'h-10 px-4 py-2',
+    sm: 'h-8 px-3',
+    lg: 'h-11 px-4',
+    icon: 'h-auto w-auto px-2',
+  },
+  text: {
+    default:
+      '!text-woot-500 dark:!text-woot-500 hover:!text-woot-600 dark:hover:!text-woot-600',
+    success:
+      '!text-green-500 dark:!text-green-500 hover:!text-green-600 dark:hover:!text-green-600',
+    warning:
+      '!text-amber-600 dark:!text-amber-600 hover:!text-amber-600 dark:hover:!text-amber-600',
+    danger:
+      '!text-ruby-700 dark:!text-ruby-700 hover:!text-ruby-800 dark:hover:!text-ruby-800',
+    info: '!text-slate-500 dark:!text-slate-400 hover:!text-slate-600 dark:hover:!text-slate-500',
+  },
+};
+
+const buttonClasses = computed(() => {
+  const classes = [
+    buttonVariants.variant[props.variant],
+    buttonVariants.size[props.size],
+  ];
+
+  if (props.textVariant && buttonVariants.text[props.textVariant]) {
+    classes.push(buttonVariants.text[props.textVariant]);
+  }
+
+  return classes.join(' ');
+});
+
+const iconSize = computed(() => {
+  if (props.size === 'sm') return 16;
+  if (props.size === 'lg') return 20;
+  return 18;
+});
+
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <button
+    :class="buttonClasses"
+    class="inline-flex items-center justify-center h-10 min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+    @click="handleClick"
+  >
+    <FluentIcon
+      v-if="icon && iconPosition === 'left'"
+      :icon="icon"
+      :size="iconSize"
+      :icon-lib="iconLib"
+      class="flex-shrink-0"
+    />
+    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
+    <FluentIcon
+      v-if="icon && iconPosition === 'right'"
+      :icon="icon"
+      :size="iconSize"
+      :icon-lib="iconLib"
+      class="flex-shrink-0"
+    />
+  </button>
+</template>

app/javascript/dashboard/components-next/combobox/ComboBox.story.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ref } from 'vue';
+import ComboBox from './ComboBox.vue';
+
+const options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' },
+  { value: 4, label: 'Option 4' },
+  { value: 5, label: 'Option 5' },
+];
+const selectedValue = ref('');
+</script>
+
+<template>
+  <Story title="Components/ComboBox" :layout="{ type: 'grid', width: '300px' }">
+    <Variant title="Default">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <ComboBox v-model="selectedValue" :options="options" />
+        <p class="mt-2">Selected value: {{ selectedValue }}</p>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <ComboBox :options="options" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -0,0 +1,163 @@
+<script setup>
+import { nextTick, ref, computed, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    validator: value =>
+      value.every(option => 'value' in option && 'label' in option),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+
+const selectedValue = ref(props.modelValue);
+const open = ref(false);
+const search = ref('');
+const searchInput = ref(null);
+const comboboxRef = ref(null);
+
+const filteredOptions = computed(() => {
+  const searchTerm = search.value.toLowerCase();
+  return props.options.filter(option =>
+    option.label.toLowerCase().includes(searchTerm)
+  );
+});
+const selectPlaceholder = computed(() => {
+  return props.placeholder || t('COMBOBOX.PLACEHOLDER');
+});
+const selectedLabel = computed(() => {
+  const selected = props.options.find(
+    option => option.value === selectedValue.value
+  );
+  return selected?.label ?? selectPlaceholder.value;
+});
+
+const selectOption = option => {
+  selectedValue.value = option.value;
+  emit('update:modelValue', option.value);
+  open.value = false;
+  search.value = '';
+};
+const toggleDropdown = () => {
+  open.value = !open.value;
+  if (open.value) {
+    search.value = '';
+    nextTick(() => searchInput.value.focus());
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedValue.value = newValue;
+  }
+);
+
+onClickOutside(comboboxRef, () => {
+  open.value = false;
+});
+</script>
+
+<template>
+  <div
+    ref="comboboxRef"
+    class="relative w-full"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'group/combobox': !disabled,
+    }"
+  >
+    <Button
+      variant="outline"
+      :label="selectedLabel"
+      icon-position="right"
+      size="sm"
+      :disabled="disabled"
+      class="justify-between w-full text-slate-900 dark:text-slate-100 group-hover/combobox:border-slate-300 dark:group-hover/combobox:border-slate-600"
+      :icon="open ? 'chevron-up' : 'chevron-down'"
+      @click="toggleDropdown"
+    />
+    <div
+      v-show="open"
+      class="absolute z-50 w-full mt-1 transition-opacity duration-200 bg-white border rounded-md shadow-lg border-slate-200 dark:bg-slate-900 dark:border-slate-700/50"
+    >
+      <div class="relative border-b border-slate-100 dark:border-slate-700/50">
+        <FluentIcon
+          icon="search"
+          :size="14"
+          class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
+          aria-hidden="true"
+        />
+        <input
+          ref="searchInput"
+          v-model="search"
+          type="search"
+          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          class="w-full py-2 pl-10 pr-2 text-sm bg-white border-none rounded-t-md dark:bg-slate-900 text-slate-900 dark:text-slate-50"
+        />
+      </div>
+      <ul
+        class="py-1 overflow-auto max-h-60"
+        role="listbox"
+        :aria-activedescendant="selectedValue"
+      >
+        <li
+          v-for="option in filteredOptions"
+          :key="option.value"
+          class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50"
+          :class="{
+            'bg-slate-50 dark:bg-slate-800/50': option.value === selectedValue,
+          }"
+          role="option"
+          :aria-selected="option.value === selectedValue"
+          @click="selectOption(option)"
+        >
+          <span :class="{ 'font-medium': option.value === selectedValue }">
+            {{ option.label }}
+          </span>
+          <FluentIcon
+            v-if="option.value === selectedValue"
+            icon="checkmark"
+            :size="16"
+            class="flex-shrink-0"
+            aria-hidden="true"
+          />
+        </li>
+        <li
+          v-if="filteredOptions.length === 0"
+          class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+        >
+          {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/dialog/Dialog.story.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+import Dialog from './Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const alertDialog = ref(null);
+const editDialog = ref(null);
+const confirmDialog = ref(null);
+
+const openAlertDialog = () => {
+  alertDialog.value.open();
+};
+const openEditDialog = () => {
+  editDialog.value.open();
+};
+const openConfirmDialog = () => {
+  confirmDialog.value.open();
+};
+
+// eslint-disable-next-line no-unused-vars
+const onConfirm = dialog => {};
+</script>
+
+<template>
+  <Story title="Components/Dialog" :layout="{ type: 'grid', width: '100%' }">
+    <Variant title="Alert Dialog">
+      <Button label="Open Alert Dialog" @click="openAlertDialog" />
+      <Dialog
+        ref="alertDialog"
+        type="alert"
+        title="Alert"
+        description="This is an alert message."
+      />
+    </Variant>
+
+    <Variant title="Edit Dialog">
+      <Button label="Open Edit Dialog" @click="openEditDialog" />
+      <Dialog
+        ref="editDialog"
+        type="edit"
+        description="You can create a new portal here, by providing a name and a slug."
+        title="Create Portal"
+        confirm-button-label="Save"
+        @confirm="onConfirm()"
+      >
+        <template #form>
+          <div class="flex flex-col gap-6">
+            <Input
+              id="portal-name"
+              type="text"
+              placeholder="User Guide | Chatwoot"
+              label="Name"
+              message="This will be the name of your public facing portal"
+            />
+            <Input
+              id="portal-slug"
+              type="text"
+              placeholder="user-guide"
+              label="Slug"
+              message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
+            />
+          </div>
+        </template>
+      </Dialog>
+    </Variant>
+
+    <Variant title="Confirm Dialog">
+      <Button label="Open Confirm Dialog" @click="openConfirmDialog" />
+      <Dialog
+        ref="confirmDialog"
+        type="confirm"
+        title="Confirm Action"
+        description="Are you sure you want to perform this action?"
+        confirm-button-label="Yes, I'm sure"
+        cancel-button-label="No, cancel"
+        @confirm="onConfirm()"
+      />
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  type: {
+    type: String,
+    default: 'edit',
+    validator: value => ['alert', 'edit'].includes(value),
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  cancelButtonLabel: {
+    type: String,
+    default: '',
+  },
+  confirmButtonLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['confirm']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+const dialogContentRef = ref(null);
+
+const open = () => {
+  dialogRef.value?.showModal();
+};
+const close = () => {
+  dialogRef.value?.close();
+};
+const confirm = () => {
+  emit('confirm');
+};
+
+defineExpose({ open });
+
+onClickOutside(dialogContentRef, event => {
+  if (
+    dialogRef.value &&
+    dialogRef.value.open &&
+    event.target === dialogRef.value
+  ) {
+    close();
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <dialog
+      ref="dialogRef"
+      class="w-full max-w-lg overflow-visible shadow-xl bg-modal-backdrop-light dark:bg-modal-backdrop-dark rounded-xl"
+      @close="close"
+    >
+      <div
+        ref="dialogContentRef"
+        class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-white shadow-xl dark:bg-slate-800 rounded-xl"
+        @click.stop
+      >
+        <div class="flex flex-col gap-2">
+          <h3
+            class="text-base font-medium leading-6 text-gray-900 dark:text-white"
+          >
+            {{ title }}
+          </h3>
+          <p
+            v-if="description"
+            class="mb-0 text-sm text-slate-500 dark:text-slate-400"
+          >
+            {{ description }}
+          </p>
+        </div>
+        <slot name="form">
+          <!-- Form content will be injected here -->
+        </slot>
+        <div class="flex items-center justify-between w-full gap-3">
+          <Button
+            variant="secondary"
+            :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
+            class="w-full"
+            size="sm"
+            @click="close"
+          />
+          <Button
+            v-if="type !== 'alert'"
+            :variant="type === 'edit' ? 'default' : 'destructive'"
+            :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
+            class="w-full"
+            size="sm"
+            @click="confirm"
+          />
+        </div>
+      </div>
+    </dialog>
+  </Teleport>
+</template>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import DropdownMenu from './DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+const menuItems = [
+  { label: 'Edit', action: 'edit', icon: 'edit' },
+  { label: 'Publish', action: 'publish', icon: 'checkmark' },
+  { label: 'Archive', action: 'archive', icon: 'archive' },
+  { label: 'Delete', action: 'delete', icon: 'delete' },
+];
+const isOpen = ref(false);
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+const handleAction = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <Story title="Components/DropdownMenu" :layout="{ type: 'grid', width: 300 }">
+    <Variant title="Default">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <div class="relative">
+          <Button label="Open Menu" size="sm" @click="toggleDropdown" />
+          <DropdownMenu
+            v-if="isOpen"
+            :menu-items="menuItems"
+            class="absolute left-0 top-10"
+            @action="handleAction"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Always Open">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <DropdownMenu :menu-items="menuItems" @action="handleAction" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Items">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <DropdownMenu
+          :menu-items="[
+            { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
+            { label: 'Custom 2', action: 'custom2', icon: 'document' },
+            { label: 'Danger', action: 'delete', icon: 'delete' },
+          ]"
+          @action="handleAction"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  menuItems: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const handleAction = action => {
+  emit('action', action);
+};
+</script>
+
+<template>
+  <div
+    class="bg-white dark:bg-slate-800 absolute rounded-xl z-50 py-3 px-1 gap-2 flex flex-col min-w-[136px] shadow-lg"
+  >
+    <Button
+      v-for="item in menuItems"
+      :key="item.action"
+      :label="item.label"
+      :icon="item.icon"
+      variant="ghost"
+      size="sm"
+      class="!justify-start w-full hover:bg-white dark:hover:bg-slate-800 z-60 font-normal"
+      :text-variant="item.action === 'delete' ? 'danger' : ''"
+      @click="handleAction(item.action)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue

@@ -0,0 +1,82 @@
+<script setup>
+import InlineInput from './InlineInput.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/InlineInput"
+    :layout="{ type: 'grid', width: '400' }"
+  >
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <InlineInput id="inline-input-1" placeholder="Default InlineInput" />
+      </div>
+    </Variant>
+
+    <Variant title="With Label">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-2"
+          label="Username"
+          placeholder="Enter your username"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-3"
+          label="Disabled InlineInput"
+          placeholder="Can't type here"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Classes">
+      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-4"
+          label="Custom Input Class"
+          placeholder="Custom input style"
+          custom-input-class="placeholder:text-green-200 dark:placeholder:text-green-800"
+        />
+        <InlineInput
+          id="inline-input-5"
+          label="Custom Label Class"
+          placeholder="Custom label style"
+          custom-label-class="text-green-600 dark:text-green-400"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Types">
+      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-6"
+          label="Text"
+          placeholder="Text input"
+        />
+        <InlineInput
+          id="inline-input-7"
+          label="Number"
+          placeholder="Number input"
+          type="number"
+        />
+        <InlineInput
+          id="inline-input-8"
+          label="Password"
+          placeholder="Password input"
+          type="password"
+        />
+        <InlineInput
+          id="inline-input-9"
+          label="Email"
+          placeholder="Email input"
+          type="email"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -0,0 +1,65 @@
+<script setup>
+defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  customInputClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
+  customLabelClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <div
+    class="relative flex items-center justify-between w-full gap-2 whitespace-nowrap"
+  >
+    <label
+      v-if="label"
+      :for="id"
+      :class="customLabelClass"
+      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+    >
+      {{ label }}
+    </label>
+    <!-- Added prefix slot to allow adding custom labels to the input -->
+    <slot name="prefix" />
+    <input
+      :id="id"
+      :value="modelValue"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :class="customInputClass"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/input/Input.story.vue

@@ -0,0 +1,68 @@
+<script setup>
+import Input from './Input.vue';
+</script>
+
+<template>
+  <Story title="Components/Input" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <Input placeholder="Default Input" />
+      </div>
+    </Variant>
+
+    <Variant title="With Label">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <Input label="Username" placeholder="Enter your username" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <Input label="Disabled Input" placeholder="Can't type here" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Message">
+      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+        <Input
+          label="Email"
+          placeholder="Enter your email"
+          message="We'll never share your email."
+        />
+        <Input
+          label="Password"
+          type="password"
+          placeholder="Enter your password"
+          message="Password is incorrect"
+          message-type="error"
+        />
+        <Input
+          label="Verification Code"
+          placeholder="Enter the code"
+          message="Code verified successfully"
+          message-type="success"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Types">
+      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+        <Input label="Text" type="text" placeholder="Text input" />
+        <Input label="Number" type="number" placeholder="Number input" />
+        <Input label="Password" type="password" placeholder="Password input" />
+        <Input label="Email" type="email" placeholder="Email input" />
+        <Input label="Date" type="date" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Input Class">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <Input
+          label="Custom Style"
+          placeholder="Custom input class"
+          custom-input-class="border-yellow-500 dark:border-yellow-700"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/input/Input.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  customInputClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
+});
+defineEmits(['update:modelValue']);
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-red-500 dark:text-red-400';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-slate-500 dark:text-slate-400';
+  }
+});
+const inputBorderClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'border-red-500 dark:border-red-400';
+    default:
+      return 'border-slate-100 dark:border-slate-700/50';
+  }
+});
+</script>
+
+<template>
+  <div class="relative flex flex-col gap-1">
+    <label
+      v-if="label"
+      :for="id"
+      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+    >
+      {{ label }}
+    </label>
+    <!-- Added prefix slot to allow adding icons to the input -->
+    <slot name="prefix" />
+    <input
+      :id="id"
+      :value="modelValue"
+      :class="[customInputClass, inputBorderClass]"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      class="flex w-full reset-base text-sm h-8 pl-3 pr-2 rtl:pr-3 rtl:pl-2 py-1.5 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <p
+      v-if="message"
+      class="mt-1 mb-0 text-xs transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>

app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue';
+import PaginationFooter from './PaginationFooter.vue';
+
+const createPaginationState = (initialPage, totalItems, itemsPerPage) => {
+  const currentPage = ref(initialPage);
+  const handlePageChange = newPage => {
+    currentPage.value = newPage;
+  };
+  return { currentPage, totalItems, itemsPerPage, handlePageChange };
+};
+
+const defaultState = createPaginationState(1, 100, 16);
+const middlePageState = createPaginationState(3, 100, 16);
+const lastPageState = createPaginationState(7, 100, 16);
+const customItemsState = createPaginationState(2, 100, 10);
+const singlePageState = createPaginationState(1, 10, 16);
+</script>
+
+<template>
+  <Story
+    title="Components/PaginationFooter"
+    :layout="{ type: 'grid', width: '957' }"
+  >
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="defaultState.currentPage.value"
+          :total-items="defaultState.totalItems"
+          :items-per-page="defaultState.itemsPerPage"
+          @update:current-page="defaultState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Middle Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="middlePageState.currentPage.value"
+          :total-items="middlePageState.totalItems"
+          :items-per-page="middlePageState.itemsPerPage"
+          @update:current-page="middlePageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Last Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="lastPageState.currentPage.value"
+          :total-items="lastPageState.totalItems"
+          :items-per-page="lastPageState.itemsPerPage"
+          @update:current-page="lastPageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Items Per Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="customItemsState.currentPage.value"
+          :total-items="customItemsState.totalItems"
+          :items-per-page="customItemsState.itemsPerPage"
+          @update:current-page="customItemsState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Single Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="singlePageState.currentPage.value"
+          :total-items="singlePageState.totalItems"
+          :items-per-page="singlePageState.itemsPerPage"
+          @update:current-page="singlePageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/pagination/PaginationFooter.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true,
+  },
+  totalItems: {
+    type: Number,
+    required: true,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 16,
+  },
+});
+const emit = defineEmits(['update:currentPage']);
+const { t } = useI18n();
+
+const totalPages = computed(() =>
+  Math.ceil(props.totalItems / props.itemsPerPage)
+);
+const startItem = computed(
+  () => (props.currentPage - 1) * props.itemsPerPage + 1
+);
+const endItem = computed(() =>
+  Math.min(startItem.value + props.itemsPerPage - 1, props.totalItems)
+);
+const isFirstPage = computed(() => props.currentPage === 1);
+const isLastPage = computed(() => props.currentPage === totalPages.value);
+const changePage = newPage => {
+  if (newPage >= 1 && newPage <= totalPages.value) {
+    emit('update:currentPage', newPage);
+  }
+};
+
+const currentPageInformation = computed(() => {
+  return t('PAGINATION_FOOTER.SHOWING', {
+    startItem: startItem.value,
+    endItem: endItem.value,
+    totalItems: props.totalItems,
+  });
+});
+
+const pageInfo = computed(() => {
+  return t('PAGINATION_FOOTER.CURRENT_PAGE_INFO', {
+    currentPage: '',
+    totalPages: totalPages.value,
+  });
+});
+</script>
+
+<template>
+  <div
+    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-slate-25 dark:bg-slate-800/50 rounded-xl py-2 px-3 items-center"
+  >
+    <div class="flex items-center gap-3">
+      <span
+        class="min-w-0 text-sm font-normal line-clamp-1 text-slate-600 dark:text-slate-300"
+      >
+        {{ currentPageInformation }}
+      </span>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button
+        icon="chevrons-lucide-left"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isFirstPage"
+        @click="changePage(1)"
+      />
+      <Button
+        icon="chevron-lucide-left"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isFirstPage"
+        @click="changePage(currentPage - 1)"
+      />
+      <div
+        class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400"
+      >
+        <span
+          class="px-3 tabular-nums py-0.5 bg-white dark:bg-slate-900 rounded-md"
+        >
+          {{ currentPage }}
+        </span>
+        <span>{{ pageInfo }}</span>
+      </div>
+      <Button
+        icon="chevron-lucide-right"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isLastPage"
+        @click="changePage(currentPage + 1)"
+      />
+      <Button
+        icon="chevrons-lucide-right"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isLastPage"
+        @click="changePage(totalPages)"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/tabbar/TabBar.story.vue

@@ -0,0 +1,61 @@
+<script setup>
+import TabBar from './TabBar.vue';
+
+const defaultTabs = [
+  { label: 'All articles', count: 24 },
+  { label: 'Mine', count: 13 },
+  { label: 'Draft', count: 5 },
+  { label: 'Archived', count: 11 },
+  { label: 'Unpublished', count: 23 },
+  { label: 'Published', count: 100 },
+  { label: 'Scheduled', count: 49 },
+];
+
+const customTabs = [
+  { label: 'Active', count: 10 },
+  { label: 'Pending', count: 5 },
+  { label: 'Completed', count: 15 },
+];
+
+const handleTabChanged = tab => {
+  console.log('Tab changed:', tab);
+};
+</script>
+
+<template>
+  <Story title="Components/TabBar" :layout="{ type: 'grid', width: '920px' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <TabBar :tabs="defaultTabs" @tab-changed="handleTabChanged" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Tabs with Initial Tab">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <TabBar
+          :tabs="customTabs"
+          :initial-active-tab="1"
+          @tab-changed="handleTabChanged"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Counts">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <TabBar
+          :tabs="[{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }]"
+          @tab-changed="handleTabChanged"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Single Tab">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <TabBar
+          :tabs="[{ label: 'Single Tab', count: 42 }]"
+          @tab-changed="handleTabChanged"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/tabbar/TabBar.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  initialActiveTab: {
+    type: Number,
+    default: 0,
+  },
+  tabs: {
+    type: Array,
+    required: true,
+    validator: value => {
+      return value.every(
+        tab => typeof tab.label === 'string' && typeof tab.count === 'number'
+      );
+    },
+  },
+});
+const emit = defineEmits(['tabChanged']);
+const activeTab = ref(props.initialActiveTab);
+const selectTab = index => {
+  activeTab.value = index;
+  emit('tabChanged', props.tabs[index]);
+};
+const showDivider = index => {
+  return (
+    // Show dividers after the active tab, but not after the last tab
+    (index > activeTab.value && index < props.tabs.length - 1) ||
+    // Show dividers before the active tab, but not immediately before it and not before the first tab
+    (index < activeTab.value - 1 && index > -1)
+  );
+};
+</script>
+
+<template>
+  <div class="flex h-8 rounded-lg bg-slate-25 dark:bg-slate-800/50 w-fit">
+    <template v-for="(tab, index) in tabs" :key="index">
+      <button
+        class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out"
+        :class="[
+          activeTab === index
+            ? 'text-woot-500 bg-woot-500/10 dark:bg-woot-500/10'
+            : 'text-slate-500 dark:text-slate-400 hover:text-woot-500 dark:hover:text-woot-400',
+        ]"
+        @click="selectTab(index)"
+      >
+        {{ tab.label }} {{ tab.count ? `(${tab.count})` : '' }}
+      </button>
+      <div
+        class="w-px h-3.5 rounded my-auto transition-colors duration-300 ease-in-out"
+        :class="
+          showDivider(index)
+            ? 'bg-slate-75 dark:bg-slate-800'
+            : 'bg-transparent dark:bg-transparent'
+        "
+      />
+    </template>
+  </div>
+</template>

app/javascript/dashboard/components-next/textarea/TextArea.story.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref } from 'vue';
+import TextArea from './TextArea.vue';
+
+const bio = ref('');
+const description = ref('');
+</script>
+
+<template>
+  <Story title="Components/TextArea" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <TextArea placeholder="Default TextArea" />
+      </div>
+    </Variant>
+
+    <Variant title="With Label">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <TextArea label="Description" placeholder="Enter your description" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <TextArea
+          label="Disabled TextArea"
+          placeholder="Can't type here"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Character Count">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <TextArea
+          v-model="bio"
+          label="Bio"
+          placeholder="Tell us about yourself"
+          :max-length="100"
+          show-character-count
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Max Length">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <TextArea
+          v-model="description"
+          label="Long Description"
+          placeholder="Enter a longer description"
+          :max-length="500"
+          show-character-count
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom TextArea Class">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <TextArea
+          label="Custom Style"
+          placeholder="Custom textarea class"
+          custom-text-area-class="border-yellow-500 dark:border-yellow-700"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/textarea/TextArea.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  maxLength: {
+    type: Number,
+    default: 200,
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  customTextAreaClass: {
+    type: String,
+    default: '',
+  },
+  showCharacterCount: {
+    type: Boolean,
+    default: false,
+  },
+});
+defineEmits(['update:modelValue']);
+const characterCount = computed(() => props.modelValue.length);
+</script>
+
+<template>
+  <div class="relative flex flex-col gap-1">
+    <label
+      v-if="label"
+      :for="id"
+      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+    >
+      {{ label }}
+    </label>
+    <textarea
+      :id="id"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+      class="flex w-full reset-base text-sm h-24 px-3 pt-3 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 placeholder:text-slate-200 dark:placeholder:text-slate-500 text-slate-900 dark:text-white transition-all duration-500 ease-in-out resize-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+      :class="[customTextAreaClass, showCharacterCount ? 'pb-9' : 'pb-3']"
+      :disabled="disabled"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <div
+      v-if="showCharacterCount"
+      class="absolute flex items-center justify-between mt-1 bottom-3 ltr:right-3 rtl:left-3"
+    >
+      <span class="text-xs tabular-nums text-slate-300 dark:text-slate-600">
+        {{ characterCount }} / {{ maxLength }}
+      </span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { useRoute, useRouter } from 'vue-router';
 
 import PrimarySidebar from './sidebarComponents/Primary.vue';
@@ -33,6 +34,7 @@ export default {
   setup(props, { emit }) {
     const route = useRoute();
     const router = useRouter();
+    const { accountId } = useAccount();
 
     const toggleKeyShortcutModal = () => {
       emit('openKeyShortcutModal');
@@ -72,6 +74,7 @@ export default {
 
     return {
       toggleKeyShortcutModal,
+      accountId,
     };
   },
   data() {
@@ -82,7 +85,6 @@ export default {
 
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -90,13 +90,17 @@ export default {
       />
     </div>
     <div class="flex flex-col items-center justify-end pb-6">
-      <PrimaryNavItem
+      <a
         v-if="!isACustomBrandedInstance"
-        icon="book-open-globe"
-        name="DOCS"
-        open-in-new-page
-        :to="helpDocsURL"
-      />
+        v-tooltip.right="$t(`SIDEBAR.DOCS`)"
+        :href="helpDocsURL"
+        class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        <fluent-icon icon="book-open-globe" />
+        <span class="sr-only">{{ $t(`SIDEBAR.DOCS`) }}</span>
+      </a>
       <NotificationBell @open-notification-panel="openNotificationPanel" />
       <AgentDetails @toggle-menu="toggleOptions" />
       <OptionsMenu

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -48,7 +48,7 @@ const debouncedEmit = debounce(value => {
 
 const onSearch = value => {
   searchTerm.value = value;
-  debouncedEmit();
+  debouncedEmit(value);
 };
 
 const filteredListItems = computed(() => {

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -59,6 +59,7 @@ export default {
   data() {
     return {
       plugins: [imagePastePlugin(this.handleImageUpload)],
+      isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
     };
   },
   watch: {
@@ -181,6 +182,7 @@ export default {
           if (tx.docChanged) {
             this.emitOnChange();
           }
+          this.checkSelection(state);
         },
         handleDOMEvents: {
           keyup: this.onKeyup,
@@ -226,6 +228,56 @@ export default {
     onFocus() {
       this.$emit('focus');
     },
+    checkSelection(editorState) {
+      const { from, to } = editorState.selection;
+      // Check if there's a selection (from and to are different)
+      const hasSelection = from !== to;
+      // If the selection state is the same as the previous state, do nothing
+      if (hasSelection === this.isTextSelected) return;
+      // Update the selection state
+      this.isTextSelected = hasSelection;
+
+      const { editor } = this.$refs;
+
+      // Toggle the 'has-selection' class based on whether there's a selection
+      editor.classList.toggle('has-selection', hasSelection);
+      // If there's a selection, update the menubar position
+      if (hasSelection) this.setMenubarPosition(editorState);
+    },
+    setMenubarPosition(editorState) {
+      if (!editorState.selection) return;
+
+      // Get the start and end positions of the selection
+      const { from, to } = editorState.selection;
+      const { editor } = this.$refs;
+      // Get the editor's position relative to the viewport
+      const { left: editorLeft, top: editorTop } =
+        editor.getBoundingClientRect();
+
+      // Get the editor's width
+      const editorWidth = editor.offsetWidth;
+      const menubarWidth = 480; // Menubar width (adjust as needed (px))
+
+      // Get the end position of the selection
+      const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to);
+      // Get the start position of the selection
+      const { left: startLeft } = editorView.coordsAtPos(from);
+
+      // Calculate the top position for the menubar (10px below the selection)
+      const top = endBottom - editorTop + 10;
+      // Calculate the left position for the menubar
+      // This centers the menubar on the selection while keeping it within the editor's bounds
+      const left = Math.max(
+        0,
+        Math.min(
+          (startLeft + endRight) / 2 - editorLeft,
+          editorWidth - menubarWidth
+        )
+      );
+      // Set the CSS custom properties for positioning the menubar
+      editor.style.setProperty('--selection-top', `${top}px`);
+      editor.style.setProperty('--selection-left', `${left}px`);
+    },
   },
 };
 </script>
@@ -259,6 +311,7 @@ export default {
 }
 
 .editor-root {
+  position: relative;
   width: 100%;
 }
 

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -1,5 +1,5 @@
 <script>
-import Letter from 'vue-letter';
+import { Letter } from 'vue-letter';
 import GalleryView from '../components/GalleryView.vue';
 
 export default {

app/javascript/dashboard/composables/spec/useAccount.spec.js

@@ -1,14 +1,15 @@
-import { ref } from 'vue';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useAccount } from '../useAccount';
-import { useStoreGetters } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
 
-vi.mock('dashboard/composables/store');
+vi.mock('vue-router');
 
 describe('useAccount', () => {
   beforeEach(() => {
-    useStoreGetters.mockReturnValue({
-      getCurrentAccountId: ref(123),
+    useRoute.mockReturnValue({
+      params: {
+        accountId: 123,
+      },
     });
   });
 

app/javascript/dashboard/composables/useAccount.js

@@ -1,18 +1,20 @@
 import { computed } from 'vue';
-import { useStoreGetters } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
 
 /**
  * Composable for account-related operations.
  * @returns {Object} An object containing account-related properties and methods.
  */
 export function useAccount() {
-  const getters = useStoreGetters();
-
   /**
    * Computed property for the current account ID.
    * @type {import('vue').ComputedRef<number>}
    */
-  const accountId = computed(() => getters.getCurrentAccountId.value);
+  const route = useRoute();
+
+  const accountId = computed(() => {
+    return Number(route.params.accountId);
+  });
 
   /**
    * Generates an account-scoped URL.

app/javascript/dashboard/i18n/locale/en/components.json

@@ -0,0 +1,20 @@
+{
+  "PAGINATION_FOOTER": {
+    "SHOWING": "Showing {startItem} - {endItem} of {totalItems} items",
+    "CURRENT_PAGE_INFO": "{currentPage} of {totalPages} pages"
+  },
+  "COMBOBOX": {
+    "PLACEHOLDER": "Select an option...",
+    "EMPTY_STATE": "No results found.",
+    "SEARCH_PLACEHOLDER": "Search..."
+  },
+  "DIALOG": {
+    "BUTTONS": {
+      "CANCEL": "Cancel",
+      "CONFIRM": "Confirm"
+    }
+  },
+  "BREADCRUMB": {
+    "ARIA_LABEL": "Breadcrumb"
+  }
+}

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -477,6 +477,10 @@
         }
       }
     },
-    "LOADING": "Loading..."
+    "LOADING": "Loading...",
+    "LOCALES_PAGE": {
+      "LOCALES_COUNT": "No locales available | {n} locale | {n} locales",
+      "NEW_LOCALE_BUTTON_TEXT": "New locale"
+    }
   }
 }

app/javascript/dashboard/i18n/locale/en/index.js

@@ -1,3 +1,4 @@
+import components from './components.json';
 import advancedFilters from './advancedFilters.json';
 import agentBots from './agentBots.json';
 import agentMgmt from './agentMgmt.json';
@@ -36,6 +37,7 @@ import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
 
 export default {
+  ...components,
   ...advancedFilters,
   ...agentBots,
   ...agentMgmt,

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -85,9 +85,13 @@ export default {
       const {
         social_profiles: socialProfiles,
         screen_name: twitterScreenName,
+        social_telegram_user_name: telegramUsername,
       } = this.additionalAttributes;
-
-      return { twitter: twitterScreenName, ...(socialProfiles || {}) };
+      return {
+        twitter: twitterScreenName,
+        telegram: telegramUsername,
+        ...(socialProfiles || {}),
+      };
     },
     // Delete Modal
     confirmDeleteMessage() {

app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue

@@ -14,6 +14,7 @@ export default {
         { key: 'linkedin', icon: 'linkedin', link: 'https://linkedin.com/' },
         { key: 'github', icon: 'github', link: 'https://github.com/' },
         { key: 'instagram', icon: 'instagram', link: 'https://instagram.com/' },
+        { key: 'telegram', icon: 'telegram', link: 'https://t.me/' },
       ],
     };
   },
@@ -29,7 +30,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
+  <div v-if="availableProfiles.length" class="flex items-end gap-3 mx-0 my-2">
     <a
       v-for="profile in availableProfiles"
       :key="profile.key"

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -5,6 +5,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useConfig } from 'dashboard/composables/useConfig';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import semver from 'semver';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
@@ -13,9 +14,10 @@ export default {
   setup() {
     const { updateUISettings } = useUISettings();
     const { enabledLanguages } = useConfig();
+    const { accountId } = useAccount();
     const v$ = useVuelidate();
 
-    return { updateUISettings, v$, enabledLanguages };
+    return { updateUISettings, v$, enabledLanguages, accountId };
   },
   data() {
     return {
@@ -46,7 +48,6 @@ export default {
       globalConfig: 'globalConfig/get',
       getAccount: 'accounts/getAccount',
       uiFlags: 'accounts/getUIFlags',
-      accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showAutoResolutionConfig() {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue

@@ -47,7 +47,7 @@ const emailProviderList = computed(() => {
 
 function onClick(emailProvider) {
   if (emailProvider.isEnabled) {
-    this.provider = emailProvider.key;
+    provider.value = emailProvider.key;
   }
 }
 </script>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import InboxReconnectionRequired from '../../components/InboxReconnectionRequired.vue';
 import googleClient from 'dashboard/api/channel/googleClient';
 
@@ -17,11 +17,18 @@ const { t } = useI18n();
 
 const isRequestingAuthorization = ref(false);
 
+const inboxEmail = computed(() => {
+  if (props.inbox.imap_login && props.inbox.imap_enabled) {
+    return props.inbox.imap_login;
+  }
+  return props.inbox.email;
+});
+
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
     const response = await googleClient.generateAuthorization({
-      email: props.inbox.email,
+      email: inboxEmail.value,
     });
 
     const {

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue

@@ -125,7 +125,7 @@ export default {
           "
           data-testid="app-title"
           @input="v$.app.title.$touch"
-          @blur="v$.slug.$touch"
+          @blur="v$.app.title.$touch"
         />
         <woot-input
           v-model="app.content.url"

app/javascript/dashboard/store/modules/contacts/mutations.js

@@ -1,4 +1,5 @@
 import types from '../../mutation-types';
+import * as Sentry from '@sentry/vue';
 
 export const mutations = {
   [types.SET_CONTACT_UI_FLAG]($state, data) {
@@ -48,12 +49,23 @@ export const mutations = {
   [types.DELETE_CONTACT]: ($state, id) => {
     const index = $state.sortOrder.findIndex(item => item === id);
     $state.sortOrder.splice(index, 1);
-    $state.records[id] = null;
+    delete $state.records[id];
   },
 
   [types.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
     Object.values($state.records).forEach(element => {
-      const availabilityStatus = data[element.id];
+      let availabilityStatus;
+      try {
+        availabilityStatus = data[element.id];
+      } catch (error) {
+        Sentry.setContext('contact is undefined', {
+          records: $state.records,
+          data: data,
+        });
+        Sentry.captureException(error);
+
+        return;
+      }
       if (availabilityStatus) {
         $state.records[element.id].availability_status = availabilityStatus;
       } else {

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -33,7 +33,7 @@ export const mutations = {
       // On reconnect, if there is existing notification with same primary_actor_id,
       // it will be deleted and the new one will be added. So it will solve with duplicate notification
       if (existingNotification) {
-        $state.records[existingNotification.id] = undefined;
+        delete $state.records[existingNotification.id];
       }
 
       $state.records[notification.id] = {
@@ -72,7 +72,7 @@ export const mutations = {
   },
   [types.DELETE_NOTIFICATION]($state, data) {
     const { notification, unread_count: unreadCount, count } = data;
-    $state.records[notification.id] = undefined;
+    delete $state.records[notification.id];
     $state.meta.unreadCount = unreadCount;
     $state.meta.count = count;
   },
@@ -83,7 +83,7 @@ export const mutations = {
   [types.DELETE_READ_NOTIFICATIONS]: $state => {
     Object.values($state.records).forEach(item => {
       if (item.read_at) {
-        $state.records[item.id] = undefined;
+        delete $state.records[item.id];
       }
     });
   },

app/javascript/design-system/histoire.scss

@@ -0,0 +1,21 @@
+@import 'dashboard/assets/scss/app';
+
+*,
+::before,
+::after {
+  --_histoire-color-primary-50: 235 245 255;
+  --_histoire-color-primary-100: 194 225 255;
+  --_histoire-color-primary-200: 153 206 255;
+  --_histoire-color-primary-300: 112 186 255;
+  --_histoire-color-primary-400: 71 166 255;
+  --_histoire-color-primary-500: 31 147 255;
+  --_histoire-color-primary-600: 25 118 204;
+  --_histoire-color-primary-700: 19 88 153;
+  --_histoire-color-primary-800: 12 59 102;
+  --_histoire-color-primary-900: 6 29 51;
+}
+
+html,
+body {
+  font-family: 'Inter', sans-serif;
+}

app/javascript/design-system/images/logo-thumbnail.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>woot-log</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="woot-log" fill-rule="nonzero">
+            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+            <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

app/javascript/entrypoints/dashboard.js

@@ -10,7 +10,6 @@ import Multiselect from 'vue-multiselect';
 import { plugin, defaultConfig } from '@formkit/vue';
 import WootSwitch from 'components/ui/Switch.vue';
 import WootWizard from 'components/ui/Wizard.vue';
-import { sync } from 'vuex-router-sync';
 import FloatingVue from 'floating-vue';
 import WootUiKit from 'dashboard/components';
 import App from 'dashboard/App.vue';
@@ -18,6 +17,7 @@ import i18nMessages from 'dashboard/i18n';
 import createAxios from 'dashboard/helper/APIHelper';
 
 import commonHelpers, { isJSONValid } from 'dashboard/helper/commons';
+import { sync } from 'vuex-router-sync';
 import router, { initalizeRouter } from 'dashboard/routes';
 import store from 'dashboard/store';
 import constants from 'dashboard/constants/globals';
@@ -42,6 +42,8 @@ const i18n = createI18n({
   messages: i18nMessages,
 });
 
+sync(store, router);
+
 const app = createApp(App);
 app.use(i18n);
 app.use(store);
@@ -97,7 +99,6 @@ app.component('fluent-icon', FluentIcon);
 app.directive('resize', vResizeObserver);
 app.directive('on-clickaway', onClickaway);
 
-sync(store, router);
 // load common helpers into js
 commonHelpers();
 window.WOOT_STORE = store;

app/javascript/histoire.setup.ts

@@ -0,0 +1,14 @@
+import './design-system/histoire.scss';
+import { defineSetupVue3 } from '@histoire/plugin-vue';
+import i18nMessages from 'dashboard/i18n';
+import { createI18n } from 'vue-i18n';
+
+const i18n = createI18n({
+  legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
+  locale: 'en',
+  messages: i18nMessages,
+});
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.use(i18n);
+});

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -285,5 +285,14 @@
     "M9.60364 9.20645C9.60364 8.67008 10.0385 8.23523 10.5749 8.23523C11.1113 8.23523 11.5461 8.67008 11.5461 9.20645V11.4511C11.5461 11.9875 11.1113 12.4223 10.5749 12.4223C10.0385 12.4223 9.60364 11.9875 9.60364 11.4511V9.20645Z",
     "M17.1442 5.57049C13.5275 5.06019 10.5793 5.04007 6.88135 5.56825C5.9466 5.70176 5.32812 5.79197 4.85654 5.92976C4.41928 6.05757 4.17061 6.20994 3.96492 6.43984C3.539 6.91583 3.48286 7.45419 3.4248 9.33184C3.36775 11.1772 3.48076 12.831 3.69481 14.6918C3.80887 15.6834 3.88736 16.3526 4.01268 16.8613C4.13155 17.3439 4.27532 17.6034 4.47513 17.802C4.67654 18.0023 4.93467 18.1435 5.40841 18.2581C5.90952 18.3793 6.56702 18.4526 7.5442 18.5592C10.7045 18.904 13.0702 18.9022 16.2423 18.561C17.2313 18.4546 17.8995 18.3813 18.4081 18.2609C18.8913 18.1465 19.1511 18.0063 19.3497 17.8118C19.5442 17.6213 19.6928 17.3587 19.8217 16.852C19.9561 16.3234 20.0476 15.624 20.18 14.5966C20.4162 12.7633 20.5863 11.1533 20.5929 9.3896C20.5999 7.50391 20.5613 6.96737 20.1306 6.46971C19.9226 6.22932 19.6696 6.0713 19.2224 5.93968C18.7395 5.79754 18.1042 5.70594 17.1442 5.57049ZM6.65555 3.98715C10.5078 3.43695 13.6072 3.45849 17.3674 3.98902L17.4224 3.99678C18.3127 4.12235 19.0648 4.22844 19.6733 4.40753C20.33 4.60078 20.8792 4.89417 21.3382 5.4245C22.2041 6.42482 22.1984 7.6117 22.1909 9.18858C22.1905 9.25686 22.1902 9.32584 22.19 9.3956C22.183 11.2604 22.0026 12.949 21.764 14.8006L21.7577 14.8496C21.6332 15.8159 21.5307 16.6121 21.3695 17.2458C21.2 17.9121 20.9467 18.4833 20.4672 18.9529C19.9919 19.4183 19.4302 19.6602 18.776 19.8151C18.1582 19.9613 17.3895 20.044 16.4629 20.1436L16.4131 20.149C13.1283 20.5023 10.6472 20.5043 7.37097 20.1469L7.32043 20.1414C6.40679 20.0417 5.64604 19.9587 5.03292 19.8104C4.38112 19.6527 3.82317 19.406 3.34911 18.9347C2.87346 18.4618 2.62363 17.8999 2.46191 17.2433C2.30938 16.6241 2.22071 15.8531 2.11393 14.9246L2.10815 14.8743C1.88863 12.9659 1.76823 11.23 1.82845 9.28246C1.83063 9.2118 1.83272 9.14191 1.83479 9.07281C1.8816 7.50776 1.91671 6.33374 2.7747 5.37486C3.22992 4.86612 3.76798 4.58399 4.40853 4.39678C5.00257 4.22316 5.73505 4.11858 6.60207 3.99479C6.61981 3.99225 6.63764 3.9897 6.65555 3.98715Z"
   ],
-  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0"
+  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0",
+
+  "play-shape-outline": "M3.7 11q-.575 0-.862-.488t-.013-.987l3.3-5.95q.275-.5.875-.5t.875.5l3.3 5.95q.275.5-.012.988T10.3 11zM7 21q-1.65 0-2.825-1.175T3 17q0-1.675 1.175-2.838T7 13q1.65 0 2.825 1.175T11 17q0 1.65-1.175 2.825T7 21m0-2q.825 0 1.412-.587T9 17q0-.825-.587-1.412T7 15q-.825 0-1.412.588T5 17q0 .825.588 1.413T7 19M5.4 9h3.2L7 6.125zM14 21q-.425 0-.712-.288T13 20v-6q0-.425.288-.712T14 13h6q.425 0 .713.288T21 14v6q0 .425-.288.713T20 21zm1-2h4v-4h-4zm.6-12.5l-1.9-1.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275L17 5.1l1.9-1.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-1.9 1.9l1.9 1.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L17 7.9l-1.9 1.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7z",
+  "upload-lucide-outline": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7l-5-5l-5 5m5-5v12",
+  "chevrons-lucide-left-outline": "m11 17l-5-5l5-5m7 10l-5-5l5-5",
+  "chevrons-lucide-right-outline": "m6 17l5-5l-5-5m7 10l5-5l-5-5",
+  "chevron-lucide-left-outline": "m15 18l-6-6l6-6",
+  "chevron-lucide-right-outline": "m9 18l6-6l-6-6",
+  "chevron-lucide-up-outline": "m18 15l-6-6l-6 6",
+  "chevron-lucide-down-outline": "m6 9l6 6l6-6"
 }

config/routes.rb

@@ -219,7 +219,7 @@ Rails.application.routes.draw do
             resources :apps, only: [:index, :show]
             resource :captain, controller: 'captain', only: [] do
               collection do
-                get :sso_url
+                post :proxy
               end
             end
             resources :hooks, only: [:show, :create, :update, :destroy] do

deployment/setup_20.04.sh

@@ -2,7 +2,7 @@
 
 # Description: Install and manage a Chatwoot installation.
 # OS: Ubuntu 20.04 LTS, 22.04 LTS, 24.04 LTS
-# Script Version: 2.8.0
+# Script Version: 3.0.0
 # Run this script as root
 
 set -eu -o errexit -o pipefail -o noclobber -o nounset

histoire.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig } from 'histoire';
+import { HstVue } from '@histoire/plugin-vue';
+
+export default defineConfig({
+  setupFile: './histoire.setup.ts',
+  plugins: [HstVue()],
+  vite: {
+    server: {
+      port: 6179,
+    },
+  },
+  viteIgnorePlugins: ['vite-plugin-ruby'],
+  theme: {
+    darkClass: 'dark',
+    title: '@chatwoot/design',
+    logo: {
+      square: './design-system/images/logo-thumbnail.svg',
+      light: './design-system/images/logo.png',
+      dark: './design-system/images/logo-dark.png',
+    },
+  },
+  defaultStoryProps: {
+    icon: 'carbon:cube',
+    iconColor: '#1F93FF',
+    layout: {
+      type: 'grid',
+      width: '80%',
+    },
+  },
+  tree: {
+    groups: [
+      {
+        id: 'top',
+        title: '',
+      },
+      {
+        id: 'components',
+        title: 'Components',
+        include: () => true,
+      },
+    ],
+  },
+});

package.json

@@ -14,7 +14,10 @@
     "ruby:prettier": "bundle exec rubocop -a",
     "build:sdk": "BUILD_MODE=library vite build",
     "prepare": "husky install",
-    "size": "size-limit"
+    "size": "size-limit",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "size-limit": [
     {
@@ -97,6 +100,7 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
+    "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/lucide": "^1.2.5",
     "@size-limit/file": "^8.2.4",
@@ -113,6 +117,7 @@
     "eslint-plugin-vitest-globals": "^1.5.0",
     "eslint-plugin-vue": "^9.28.0",
     "fake-indexeddb": "^6.0.0",
+    "histoire": "0.17.15",
     "husky": "^7.0.0",
     "jsdom": "^24.1.3",
     "lint-staged": "14.0.1",

spec/controllers/google/callbacks_controller_spec.rb

@@ -39,8 +39,9 @@ RSpec.describe 'Google::CallbacksController', type: :request do
       expect(Redis::Alfred.get(cache_key)).to be_nil
     end
 
-    it 'creates updates inbox channel config if inbox exists and authentication is successful' do
-      inbox = create(:channel_email, account: account, email: email)&.inbox
+    it 'updates inbox channel config if inbox exists with imap_login and authentication is successful' do
+      channel_email = create(:channel_email, account: account, imap_login: email)
+      inbox = channel_email.inbox
       expect(inbox.channel.provider_config).to eq({})
 
       stub_request(:post, 'https://accounts.google.com/o/oauth2/token')
@@ -50,7 +51,7 @@ RSpec.describe 'Google::CallbacksController', type: :request do
 
       get google_callback_url, params: { code: code }
 
-      expect(response).to redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: account.inboxes.last.id)
+      expect(response).to redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
       expect(account.inboxes.count).to be 1
       expect(inbox.channel.reload.provider_config.keys).to include('access_token', 'refresh_token', 'expires_on')
       expect(inbox.channel.reload.provider_config['access_token']).to eq response_body_success[:access_token]

theme/colors.js

@@ -12,6 +12,7 @@ const {
   violet,
   violetDark,
 } = require('@radix-ui/colors');
+
 export const colors = {
   woot: {
     25: blue.blue2,
@@ -282,4 +283,89 @@ export const colors = {
     800: 'rgb(var(--color-orange-800) / <alpha-value>)',
     900: 'rgb(var(--color-orange-900) / <alpha-value>)',
   },
+  // next design system color
+  n: {
+    slate: {
+      1: 'rgb(var(--slate-1) / <alpha-value>)',
+      2: 'rgb(var(--slate-2) / <alpha-value>)',
+      3: 'rgb(var(--slate-3) / <alpha-value>)',
+      4: 'rgb(var(--slate-4) / <alpha-value>)',
+      5: 'rgb(var(--slate-5) / <alpha-value>)',
+      6: 'rgb(var(--slate-6) / <alpha-value>)',
+      7: 'rgb(var(--slate-7) / <alpha-value>)',
+      8: 'rgb(var(--slate-8) / <alpha-value>)',
+      9: 'rgb(var(--slate-9) / <alpha-value>)',
+      10: 'rgb(var(--slate-10) / <alpha-value>)',
+      11: 'rgb(var(--slate-11) / <alpha-value>)',
+      12: 'rgb(var(--slate-12) / <alpha-value>)',
+    },
+
+    ruby: {
+      1: 'rgb(var(--ruby-1) / <alpha-value>)',
+      2: 'rgb(var(--ruby-2) / <alpha-value>)',
+      3: 'rgb(var(--ruby-3) / <alpha-value>)',
+      4: 'rgb(var(--ruby-4) / <alpha-value>)',
+      5: 'rgb(var(--ruby-5) / <alpha-value>)',
+      6: 'rgb(var(--ruby-6) / <alpha-value>)',
+      7: 'rgb(var(--ruby-7) / <alpha-value>)',
+      8: 'rgb(var(--ruby-8) / <alpha-value>)',
+      9: 'rgb(var(--ruby-9) / <alpha-value>)',
+      10: 'rgb(var(--ruby-10) / <alpha-value>)',
+      11: 'rgb(var(--ruby-11) / <alpha-value>)',
+      12: 'rgb(var(--ruby-12) / <alpha-value>)',
+    },
+
+    amber: {
+      1: 'rgb(var(--amber-1) / <alpha-value>)',
+      2: 'rgb(var(--amber-2) / <alpha-value>)',
+      3: 'rgb(var(--amber-3) / <alpha-value>)',
+      4: 'rgb(var(--amber-4) / <alpha-value>)',
+      5: 'rgb(var(--amber-5) / <alpha-value>)',
+      6: 'rgb(var(--amber-6) / <alpha-value>)',
+      7: 'rgb(var(--amber-7) / <alpha-value>)',
+      8: 'rgb(var(--amber-8) / <alpha-value>)',
+      9: 'rgb(var(--amber-9) / <alpha-value>)',
+      10: 'rgb(var(--amber-10) / <alpha-value>)',
+      11: 'rgb(var(--amber-11) / <alpha-value>)',
+      12: 'rgb(var(--amber-12) / <alpha-value>)',
+    },
+
+    teal: {
+      1: 'rgb(var(--teal-1) / <alpha-value>)',
+      2: 'rgb(var(--teal-2) / <alpha-value>)',
+      3: 'rgb(var(--teal-3) / <alpha-value>)',
+      4: 'rgb(var(--teal-4) / <alpha-value>)',
+      5: 'rgb(var(--teal-5) / <alpha-value>)',
+      6: 'rgb(var(--teal-6) / <alpha-value>)',
+      7: 'rgb(var(--teal-7) / <alpha-value>)',
+      8: 'rgb(var(--teal-8) / <alpha-value>)',
+      9: 'rgb(var(--teal-9) / <alpha-value>)',
+      10: 'rgb(var(--teal-10) / <alpha-value>)',
+      11: 'rgb(var(--teal-11) / <alpha-value>)',
+      12: 'rgb(var(--teal-12) / <alpha-value>)',
+    },
+
+    black: '#000000',
+    brand: '#2781F6',
+    blue: 'rgb(var(--blue) / <alpha-value>)',
+    background: 'rgb(var(--background-color) / <alpha-value>)',
+    solid: {
+      1: 'rgb(var(--solid-1) / <alpha-value>)',
+      2: 'rgb(var(--solid-2) / <alpha-value>)',
+      3: 'rgb(var(--solid-3) / <alpha-value>)',
+      active: 'rgb(var(--solid-active) / <alpha-value>)',
+      amber: 'rgb(var(--solid-amber) / <alpha-value>)',
+      blue: 'rgb(var(--solid-blue) / <alpha-value>)',
+    },
+    alpha: {
+      1: 'rgba(var(--alpha-1))',
+      2: 'rgba(var(--alpha-2))',
+      3: 'rgba(var(--alpha-3))',
+      black1: 'rgba(var(--alpha-black1))',
+      black2: 'rgba(var(--alpha-black2))',
+      white: 'rgba(var(--alpha-white))',
+    },
+    weak: 'rgb(var(--border-weak) / <alpha-value>)',
+    strong: 'rgb(var(--border-strong) / <alpha-value>)',
+  },
 };

vite.config.ts

@@ -66,7 +66,7 @@ export default defineConfig({
     lib: isLibraryMode
       ? {
           entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'),
-          formats: ['umd'], // UMD format for single file
+          formats: ['iife'], // IIFE format for single file
           name: 'sdk',
         }
       : undefined,