add button languages for noti preview

Author: steveninhle

ui/dashboard/src/@locales/en/form.json

@@ -554,6 +554,7 @@
   "mention": "Mention",
   "languages": "Languages",
   "languages-info": "Add a translation for each language. Viewers see the notification in their console language, falling back to English.",
+  "languages-info-view": "This notification is available in the following languages.",
   "add-language": "Add language",
   "remove-language": "Remove language",
   "content": "Content",

ui/dashboard/src/@locales/ja/form.json

@@ -553,6 +553,7 @@
   "notification-title-placeholder": "通知のタイトル",
   "languages": "言語",
   "languages-info": "各言語の翻訳を追加します。閲覧者にはコンソールの言語で表示され、なければ英語で表示されます。",
+  "languages-info-view": "この通知は以下の言語でご利用いただけます。",
   "add-language": "言語を追加",
   "remove-language": "言語を削除",
   "content": "内容",

ui/dashboard/src/pages/notification-feed/elements/notification-detail.tsx

@@ -1,14 +1,20 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useToast } from 'hooks';
-import { useTranslation } from 'i18n';
+import { getLanguage, useTranslation } from 'i18n';
 import { Pencil, Send } from 'lucide-react';
 import { formatLongDateTime, useFormatDateTime } from 'utils/date-time';
 import { cn } from 'utils/style';
 import Button from 'components/button';
 import SlideModal from 'components/modal/slide';
 import Spinner from 'components/spinner';
 import { usePublishDraft } from '../collection-loader/use-fetch-notifications';
-import { NotificationDetail, NotificationStatus } from '../types';
+import { LANGUAGE_META } from '../language-meta';
+import LanguageTabs from '../publisher/language-tabs';
+import {
+  NotificationDetail,
+  NotificationLocalizationInput,
+  NotificationStatus
+} from '../types';
 import { MarkdownContent } from './markdown-content';
 import TagChip from './tag-chip';
 
@@ -78,6 +84,34 @@ const NotificationDetailModal = ({
   const { notify, errorNotify } = useToast();
   const publishMutation = usePublishDraft();
 
+  const localizations: NotificationLocalizationInput[] = useMemo(() => {
+    if (notification?.localizations?.length) return notification.localizations;
+    if (!notification) return [];
+    return [
+      {
+        language: getLanguage(),
+        title: notification.title,
+        content: notification.content,
+        tags: notification.tags
+      }
+    ];
+  }, [notification]);
+
+  const [activeLanguage, setActiveLanguage] = useState<string>(() =>
+    getLanguage()
+  );
+
+  useEffect(() => {
+    if (!localizations.length) return;
+    setActiveLanguage(current => {
+      if (localizations.some(l => l.language === current)) return current;
+      const preferred = getLanguage();
+      return localizations.some(l => l.language === preferred)
+        ? preferred
+        : localizations[0].language;
+    });
+  }, [localizations]);
+
   if (!isOpen) return null;
 
   if (isError) {
@@ -107,6 +141,8 @@ const NotificationDetailModal = ({
 
   const isDraft = notification.status === NotificationStatus.DRAFT;
   const timestamp = isDraft ? notification.updatedAt : notification.publishedAt;
+  const activeLocalization =
+    localizations.find(l => l.language === activeLanguage) ?? localizations[0];
 
   const onPublish = () => {
     publishMutation.mutate(notification.id, {
@@ -119,9 +155,31 @@ const NotificationDetailModal = ({
   };
 
   return (
-    <SlideModal title={notification.title} isOpen={isOpen} onClose={onClose}>
+    <SlideModal
+      title={activeLocalization.title}
+      isOpen={isOpen}
+      onClose={onClose}
+    >
       <div className="w-full h-full flex flex-col">
         <div className="flex flex-1 flex-col gap-6 overflow-auto p-6">
+          {localizations.length > 1 && (
+            <LanguageTabs
+              fields={localizations.map(l => ({
+                id: l.language,
+                language: l.language
+              }))}
+              activeLanguage={activeLanguage}
+              availableToAdd={[]}
+              canRemove={false}
+              readOnly
+              languageMeta={LANGUAGE_META}
+              tooltipContent={t('form:languages-info-view')}
+              onSelect={setActiveLanguage}
+              onAdd={() => {}}
+              onRemove={() => {}}
+            />
+          )}
+
           <div className="flex items-center gap-2">
             <TagChip
               tag={{
@@ -136,16 +194,16 @@ const NotificationDetailModal = ({
             </span>
           </div>
 
-          {notification.tags.length > 0 && (
+          {activeLocalization.tags.length > 0 && (
             <div className="flex flex-wrap items-center gap-2">
-              {notification.tags.map(tag => (
+              {activeLocalization.tags.map(tag => (
                 <TagChip key={tag.name} tag={tag} />
               ))}
             </div>
           )}
 
           <Section title={t('form:content')}>
-            <MarkdownContent source={notification.content} />
+            <MarkdownContent source={activeLocalization.content} />
           </Section>
 
           <Section

ui/dashboard/src/pages/notification-feed/language-meta.ts

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import { Language } from 'i18n';
+import { IconEnglishFlag, IconJapanFlag } from '@icons';
+
+export interface LanguageMeta {
+  label: string;
+  englishName: string;
+  icon: FunctionComponent;
+}
+
+export const LANGUAGE_META: Record<string, LanguageMeta> = {
+  [Language.ENGLISH]: {
+    label: 'English',
+    englishName: 'English',
+    icon: IconEnglishFlag
+  },
+  [Language.JAPANESE]: {
+    label: '日本語',
+    englishName: 'Japanese',
+    icon: IconJapanFlag
+  }
+};
+
+export const FORM_LANGUAGES: Language[] = [Language.ENGLISH, Language.JAPANESE];

ui/dashboard/src/pages/notification-feed/publisher/language-tabs.tsx

@@ -1,4 +1,3 @@
-import { FunctionComponent } from 'react';
 import { useTranslation } from 'i18n';
 import { X } from 'lucide-react';
 import { cn } from 'utils/style';
@@ -7,18 +6,13 @@ import Button from 'components/button';
 import Dropdown from 'components/dropdown';
 import Icon from 'components/icon';
 import { Tooltip } from 'components/tooltip';
+import { LanguageMeta } from '../language-meta';
 
 export interface LanguageTabField {
   id: string;
   language: string;
 }
 
-interface LanguageMeta {
-  label: string;
-  englishName: string;
-  icon: FunctionComponent;
-}
-
 interface LanguageTabsProps {
   fields: LanguageTabField[];
   activeLanguage: string;
@@ -28,6 +22,8 @@ interface LanguageTabsProps {
   onSelect: (language: string) => void;
   onAdd: (language: string) => void;
   onRemove: (index: number, language: string) => void;
+  readOnly?: boolean;
+  tooltipContent?: string;
 }
 
 const LanguageTabs = ({
@@ -38,7 +34,9 @@ const LanguageTabs = ({
   languageMeta,
   onSelect,
   onAdd,
-  onRemove
+  onRemove,
+  readOnly = false,
+  tooltipContent
 }: LanguageTabsProps) => {
   const { t } = useTranslation(['form']);
 
@@ -52,7 +50,7 @@ const LanguageTabs = ({
           {t('form:languages')}
         </label>
         <Tooltip
-          content={t('form:languages-info')}
+          content={tooltipContent ?? t('form:languages-info')}
           trigger={
             <span className="flex text-gray-400">
               <Icon icon={IconInfo} size="xxs" />
@@ -83,7 +81,7 @@ const LanguageTabs = ({
                 )}
                 {label(field.language)}
               </Button>
-              {canRemove && (
+              {!readOnly && canRemove && (
                 <Button
                   type="button"
                   variant="text"
@@ -98,17 +96,19 @@ const LanguageTabs = ({
           ))}
         </div>
 
-        <Dropdown
-          className="w-[200px] py-[11px]"
-          disabled={availableToAdd.length <= 0}
-          placeholder={t('form:add-language')}
-          options={availableToAdd.map(lang => ({
-            value: lang,
-            label: `${label(lang)} (${languageMeta[lang]?.englishName ?? lang})`,
-            icon: icon(lang)
-          }))}
-          onChange={value => onAdd(String(value))}
-        />
+        {!readOnly && (
+          <Dropdown
+            className="w-[200px] py-[11px]"
+            disabled={availableToAdd.length <= 0}
+            placeholder={t('form:add-language')}
+            options={availableToAdd.map(lang => ({
+              value: lang,
+              label: `${label(lang)} (${languageMeta[lang]?.englishName ?? lang})`,
+              icon: icon(lang)
+            }))}
+            onChange={value => onAdd(String(value))}
+          />
+        )}
       </div>
     </div>
   );

ui/dashboard/src/pages/notification-feed/publisher/publish-form.tsx

@@ -4,7 +4,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useToast } from 'hooks';
 import useFormSchema from 'hooks/use-form-schema';
 import { getLanguage, Language, useTranslation } from 'i18n';
-import { IconEnglishFlag, IconJapanFlag } from '@icons';
 import Button from 'components/button';
 import Form from 'components/form';
 import Input from 'components/input';
@@ -13,6 +12,7 @@ import {
   useSaveDraft,
   useUpdateNotification
 } from '../collection-loader/use-fetch-notifications';
+import { FORM_LANGUAGES, LANGUAGE_META } from '../language-meta';
 import {
   NotificationDetail,
   NotificationLocalizationInput,
@@ -24,22 +24,6 @@ import LanguageTabs from './language-tabs';
 import MarkdownEditor from './markdown-editor';
 import TagSelect from './tag-select';
 
-const LANGUAGE_META = {
-  [Language.ENGLISH]: {
-    label: 'English',
-    englishName: 'English',
-    icon: IconEnglishFlag
-  },
-  [Language.JAPANESE]: {
-    label: '日本語',
-    englishName: 'Japanese',
-    icon: IconJapanFlag
-  }
-};
-
-// Languages the form can author, in the order they appear in the add menu.
-const FORM_LANGUAGES: Language[] = [Language.ENGLISH, Language.JAPANESE];
-
 const emptyLocalization = (
   language: string
 ): NotificationLocalizationInput => ({