2a90652f05
This adds a draft status for Help Center locales so teams can prepare localized content in the dashboard without exposing those locales in the public portal switcher until they are ready to publish. Fixes: https://github.com/chatwoot/chatwoot/issues/10412 Closes: https://github.com/chatwoot/chatwoot/issues/10412 ## Why Teams need a way to work on locale-specific Help Center content ahead of launch. The public portal should only show ready locales, while the admin dashboard should continue to expose every allowed locale for ongoing article and category work. ## What this change does - Adds `draft_locales` to portal config as a subset of `allowed_locales` - Hides drafted locales from the public portal language switchers while keeping direct locale URLs working - Keeps drafted locales fully visible in the admin dashboard for article and category management - Adds locale actions to move an existing locale to draft, publish a drafted locale, and keep the default locale protected from drafting - Adds a status dropdown when creating a locale so new locales can be created as `Published` or `Draft` - Returns each admin locale with a `draft` flag so the locale UI can reflect the public visibility state ## Validation - Seed a portal with multiple locales, draft one locale, and confirm the public portal switcher hides it while `/hc/:slug/:locale` still loads directly - In the admin dashboard, confirm drafted locales still appear in the locale list and remain selectable for articles and categories - Create a new locale with `Draft` status and confirm it stays out of the public switcher until published - Move an existing locale back and forth between `Published` and `Draft` and confirm the public switcher updates accordingly ## Demo https://github.com/user-attachments/assets/ba22dc26-c2e7-463a-b1f5-adf1fda1f9be --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
121 lines
7.7 KiB
Plaintext
121 lines
7.7 KiB
Plaintext
<header class="sticky top-0 z-50 w-full bg-white shadow-sm dark:bg-slate-900">
|
|
<nav class="hidden sm:flex max-w-5xl px-4 mx-auto md:px-8" aria-label="Top">
|
|
<div class="flex items-center w-full py-5 overflow-hidden">
|
|
<a href="<%= generate_home_link(@portal.slug, @portal.config['default_locale'] || params[:locale], @theme_from_params, @is_plain_layout_enabled) %>" class="flex items-center min-w-0 h-10">
|
|
<% if @portal.logo.present? %>
|
|
<img src="<%= url_for(@portal.logo) %>" class="w-auto h-10 ltr:mr-2 rtl:ml-2" draggable="false" />
|
|
<% end %>
|
|
<span class="text-lg font-semibold text-slate-900 truncate dark:text-white <%= @portal.logo.present? ? 'hidden lg:block' : 'hidden sm:block' %>"><%= @portal.name %></span>
|
|
</a>
|
|
</div>
|
|
|
|
<%# Go to homepage link section %>
|
|
<div class="flex items-center justify-between gap-2 sm:gap-5">
|
|
<% if @portal.homepage_link %>
|
|
<div class="px-1 py-2 ltr:ml-8 rtl:mr-8 cursor-pointer block">
|
|
<div class="flex-grow flex-shrink-0">
|
|
<a id="header-action-button" target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center gap-1 text-sm font-medium whitespace-nowrap text-slate-800 dark:text-slate-100 stroke-slate-700 dark:stroke-slate-200">
|
|
<%= render partial: 'icons/redirect' %>
|
|
<%= I18n.t('public_portal.header.go_to_homepage') %>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Appearance toggle section %>
|
|
<div class="relative flex-grow flex-shrink-0 px-1 py-2 cursor-pointer">
|
|
<button id="toggle-appearance" class="flex justify-between min-w-[76px] flex-row items-center stroke-slate-700 dark:stroke-slate-200 text-slate-800 dark:text-slate-100 gap-1" type="button">
|
|
<div data-theme="system" class="flex-row items-center gap-1 theme-button <%= @theme_from_params == 'system' ? 'flex' : 'hidden' %>">
|
|
<%= render partial: 'icons/monitor' %>
|
|
<span class="text-sm font-medium"><%= I18n.t('public_portal.header.appearance.system') %></span>
|
|
</div>
|
|
<div data-theme="light" class="flex-row items-center gap-1 theme-button <%= @theme_from_params == 'light' ? 'flex' : 'hidden' %>">
|
|
<%= render partial: 'icons/sun' %>
|
|
<span class="text-sm font-medium"><%= I18n.t('public_portal.header.appearance.light') %></span>
|
|
</div>
|
|
<div data-theme="dark" class="flex-row items-center gap-1 theme-button <%= @theme_from_params == 'dark' ? 'flex' : 'hidden' %>">
|
|
<%= render partial: 'icons/moon' %>
|
|
<span class="text-sm font-medium"><%= I18n.t('public_portal.header.appearance.dark') %></span>
|
|
</div>
|
|
<div class="flex items-center px-1 pointer-events-none">
|
|
<%= render partial: 'icons/chevron-down' %>
|
|
</div>
|
|
</button>
|
|
<%# Appearance dropdown section %>
|
|
<div id="appearance-dropdown"
|
|
data-current-theme="<%= @theme_from_params %>"
|
|
class="appearance-menu absolute hidden flex-col w-32 h-auto bg-white border border-solid rounded dark:bg-slate-900 top-9 ltr:right-1 rtl:left-1 border-slate-100 dark:border-slate-800 shadow-lg transition-all duration-200 ease-out opacity-0 scale-95 data-[dropdown-open=true]:opacity-100 data-[dropdown-open=true]:scale-100 data-[dropdown-open=true]:flex"
|
|
aria-hidden="true"
|
|
data-dropdown="appearance-dropdown">
|
|
<button class="desktop-theme-button flex flex-row items-center justify-between gap-1 px-2 py-2 border-b border-solid border-slate-100 dark:border-slate-800 stroke-slate-700 dark:stroke-slate-200 text-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors" data-theme="system">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<%= render partial: 'icons/monitor' %>
|
|
<span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.system') %></span>
|
|
</div>
|
|
<span class="check-mark-icon system-theme">
|
|
<%= render partial: 'icons/check-mark' %>
|
|
</span>
|
|
</button>
|
|
<button class="desktop-theme-button flex flex-row items-center justify-between gap-1 px-2 py-2 border-b border-solid border-slate-100 dark:border-slate-800 stroke-slate-700 dark:stroke-slate-200 text-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors" data-theme="light">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<%= render partial: 'icons/sun' %>
|
|
<span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.light') %></span>
|
|
</div>
|
|
<span class="check-mark-icon light-theme">
|
|
<%= render partial: 'icons/check-mark' %>
|
|
</span>
|
|
</button>
|
|
<button class="desktop-theme-button flex flex-row items-center justify-between gap-1 px-2 py-2 stroke-slate-700 dark:stroke-slate-200 text-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors rounded-b" data-theme="dark">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<%= render partial: 'icons/moon' %>
|
|
<span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.dark') %></span>
|
|
</div>
|
|
<span class="check-mark-icon dark-theme">
|
|
<%= render partial: 'icons/check-mark' %>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Locale switcher section %>
|
|
<% if @portal.public_locale_codes.length > 1 %>
|
|
<div id="header-action-button" class="flex items-center stroke-slate-700 dark:stroke-slate-200 text-slate-800 dark:text-slate-100">
|
|
<div class="flex items-center gap-1 px-1 py-2 cursor-pointer">
|
|
<%= render partial: 'icons/globe' %>
|
|
<select
|
|
data-portal-slug="<%= @portal.slug %>"
|
|
class="w-24 overflow-hidden text-sm font-medium leading-tight bg-white appearance-none cursor-pointer dark:bg-slate-900 text-ellipsis whitespace-nowrap focus:outline-none focus:shadow-outline locale-switcher"
|
|
>
|
|
<% if @portal.draft_locale?(@locale) %>
|
|
<option selected disabled value="<%= @locale %>"><%= "#{language_name(@locale)} (#{@locale})" %></option>
|
|
<% end %>
|
|
<% @portal.public_locale_codes.each do |locale| %>
|
|
<option <%= locale == @locale ? 'selected': '' %> value="<%= locale %>"><%= "#{language_name(locale)} (#{locale})" %></option>
|
|
<% end %>
|
|
</select>
|
|
<%= render partial: 'icons/chevron-down' %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="flex sm:hidden max-w-5xl px-4 mx-auto" aria-label="Mobile Top">
|
|
<div class="flex items-center justify-between w-full py-5">
|
|
<a href="<%= generate_home_link(@portal.slug, @portal.config['default_locale'] || params[:locale], @theme_from_params, @is_plain_layout_enabled) %>" class="flex items-center min-w-0 h-10 text-lg font-semibold text-slate-900 dark:text-white">
|
|
<% if @portal.logo.present? %>
|
|
<img src="<%= url_for(@portal.logo) %>" class="w-auto h-10 ltr:mr-2 rtl:ml-2" draggable="false" />
|
|
<% end %>
|
|
<span class="text-lg font-semibold text-slate-900 truncate dark:text-white <%= @portal.logo.present? ? 'hidden' : 'sm:hidden block' %>"><%= @portal.name %></span>
|
|
</a>
|
|
|
|
<!-- Mobile Menu Component -->
|
|
<%= render partial: 'public/api/v1/portals/mobile_menu', locals: {
|
|
portal: @portal,
|
|
locale: @locale,
|
|
theme_from_params: @theme_from_params
|
|
} %>
|
|
</div>
|
|
</nav>
|
|
</header>
|