refactor(flat-components): update pmi related texts and styles (#2075)

packages/flat-components/src/components/HomePage/HomePageHeroButton/index.tsx

@@ -33,7 +33,6 @@ export const HomePageHeroButton: React.FC<HomePageHeroButtonProps> = ({
             <span className="home-page-hero-button-text">
                 {t(`home-page-hero-button-type.${type}`)}
             </span>
-
             {children}
         </Button>
     );

packages/flat-components/src/components/HomePage/RoomList/RoomListItem/index.tsx

@@ -19,6 +19,7 @@ export interface RoomListItemProps<T extends string> {
     ownerAvatar?: string;
     generateAvatar?: (uid: string) => string;
     status: RoomStatusType;
+    isPmi?: boolean;
     isPeriodic?: boolean;
     menuActions?: Array<RoomListItemAction<T>> | null;
     primaryAction?: RoomListItemPrimaryAction<T> | null;
@@ -35,6 +36,7 @@ export function RoomListItem<T extends string = string>({
     ownerAvatar,
     generateAvatar,
     status,
+    isPmi,
     isPeriodic,
     menuActions,
     primaryAction,
@@ -75,6 +77,7 @@ export function RoomListItem<T extends string = string>({
                             {beginTime && format(beginTime, "yyyy/MM/dd")}
                         </span>
                         <span>{isPeriodic && `(${t("periodic")})`}</span>
+                        <span>{isPmi && `(${t("pmi")})`}</span>
                     </div>
                     <div>
                         <span

packages/flat-components/src/components/InviteModal/index.tsx

@@ -17,13 +17,16 @@ export interface InviteModalProps {
     baseUrl: string;
     // repeated weeks for periodic rooms
     periodicWeeks?: Week[];
+    // is self pmi room
+    isPmi?: boolean;
     onCopy: (text: string) => void;
     onCancel: () => void;
 }
 
 export const InviteModal: React.FC<InviteModalProps> = ({
     visible,
     room,
+    isPmi,
     periodicWeeks,
     userName,
     baseUrl,
@@ -52,9 +55,8 @@ export const InviteModal: React.FC<InviteModalProps> = ({
 
     const onCopyClicked = (): void => {
         const basePrefixText =
-            t("invite-prefix", { userName, title }) +
-            "\n" +
-            (formattedTimeRange ? t("invite-begin-time", { time: formattedTimeRange }) : "");
+            t(isPmi ? "pmi-invite-prefix" : "invite-prefix", { userName, title }) +
+            (formattedTimeRange ? "\n" + t("invite-begin-time", { time: formattedTimeRange }) : "");
         const baseSuffixText =
             "\n" +
             "\n" +
@@ -64,7 +66,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
 
         if (periodicUUID) {
             const content = periodicWeeks
-                ? t("repeat-weeks", { weeks: getWeekNames(periodicWeeks, language) })
+                ? "\n" + t("repeat-weeks", { weeks: getWeekNames(periodicWeeks, language) })
                 : "";
 
             onCopy(`${basePrefixText}${content}${baseSuffixText}`);
@@ -84,7 +86,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
             onOk={onCopyClicked}
         >
             <div className="invite-modal-header">
-                <span>{t("invite-title", { userName })}</span>
+                <span>{t(isPmi ? "pmi-invite-title" : "invite-title", { userName })}</span>
                 <span>{t("join-and-book-by-room-uuid")}</span>
             </div>
             <div className="invite-modal-content">

packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx

@@ -12,6 +12,7 @@ export interface MoreMenuProps {
     userName: string;
     inviteBaseUrl: string;
     isCreator: boolean;
+    isPmi?: boolean;
     onCopyInvitation: (text: string) => void;
     onCancelSubPeriodicRoom: () => void;
     jumpToRoomDetailPage: () => void;
@@ -23,6 +24,7 @@ export const MoreMenu: React.FC<MoreMenuProps> = ({
     userName,
     inviteBaseUrl,
     isCreator,
+    isPmi,
     onCopyInvitation,
     onCancelSubPeriodicRoom,
     jumpToRoomDetailPage,
@@ -79,6 +81,7 @@ export const MoreMenu: React.FC<MoreMenuProps> = ({
             />
             <InviteModal
                 baseUrl={inviteBaseUrl}
+                isPmi={isPmi}
                 room={room}
                 userName={userName}
                 visible={inviteRoomVisible}

packages/flat-components/src/components/PeriodicRoomPage/index.tsx

@@ -13,6 +13,7 @@ import { CancelPeriodicRoomModal } from "./CancelPeriodicRoomModal";
 import { useLanguage, useTranslate } from "@netless/flat-i18n";
 
 export interface PeriodicRoomPanelProps {
+    pmi?: string | null;
     rooms: Array<RoomInfo | undefined>;
     userName: string;
     isCreator: boolean;
@@ -31,6 +32,7 @@ export interface PeriodicRoomPanelProps {
 }
 
 export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
+    pmi,
     rooms,
     userName,
     inviteBaseUrl,
@@ -127,6 +129,7 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                                     <MoreMenu
                                         inviteBaseUrl={inviteBaseUrl}
                                         isCreator={isCreator}
+                                        isPmi={room.inviteCode === pmi}
                                         jumpToModifyOrdinaryRoomPage={() =>
                                             jumpToModifyOrdinaryRoomPage(
                                                 room.roomUUID,

packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx

@@ -16,6 +16,7 @@ export interface RoomDetailFooterProps {
     inviteBaseUrl: string;
     // repeated weeks for periodic rooms
     periodicWeeks?: Week[];
+    isPmi?: boolean;
     onJoinRoom: () => void;
     onReplayRoom: () => void;
     onModifyRoom: () => void;
@@ -31,6 +32,7 @@ export const RoomDetailFooter = /* @__PURE__ */ observer<RoomDetailFooterProps>(
         isCreator,
         isPeriodicDetailsPage,
         periodicWeeks,
+        isPmi,
         onJoinRoom,
         onReplayRoom,
         onModifyRoom,
@@ -89,6 +91,7 @@ export const RoomDetailFooter = /* @__PURE__ */ observer<RoomDetailFooterProps>(
                 </Button>
                 <InviteModal
                     baseUrl={inviteBaseUrl}
+                    isPmi={isPmi}
                     periodicWeeks={periodicWeeks}
                     room={room}
                     userName={userName}

packages/flat-components/src/components/UsersPanel/index.tsx

@@ -176,7 +176,9 @@ const Row = /* @__PURE__ */ observer(function Row({
                         <div className="users-panel-list-name-wrapper">
                             <span className="users-panel-list-name">
                                 <span
-                                    className={`users-panel-list-name-content ${isSelf && "is-me"}`}
+                                    className={`users-panel-list-name-content ${
+                                        isSelf ? "is-me" : ""
+                                    }`}
                                 >
                                     {user.name}
                                 </span>
@@ -186,7 +188,9 @@ const Row = /* @__PURE__ */ observer(function Row({
                         </div>
                     ) : (
                         <span className="users-panel-list-name">
-                            <span className={`users-panel-list-name-content ${isSelf && "is-me"}`}>
+                            <span
+                                className={`users-panel-list-name-content ${isSelf ? "is-me" : ""}`}
+                            >
                                 {user.name}
                             </span>
                             {isSelf && <span className="users-panel-is-self">{t("me")}</span>}

packages/flat-components/src/components/UsersPanel/style.less

@@ -141,6 +141,7 @@
     display: inline-flex;
     gap: 4px;
     font-size: 14px;
+    overflow: hidden;
 }
 
 .users-panel-is-self {
@@ -234,4 +235,4 @@
     .users-panel-list-item::after {
         background-color: var(--grey-9);
     }
-}
+}

packages/flat-i18n/locales/en.json

@@ -110,11 +110,12 @@
   "periodic": "Periodic",
   "today": "Today",
   "tomorrow": "Tomorrow",
-  "pmi-invite-prefix": "{{userName}} invites you to join {{appName}} personal room",
+  "pmi-invite-prefix": "{{userName}} invites you to join {{appName}} PMI room\n\nRoom theme: {{title}}",
   "invite-begin-time": "Start time: {{time}}",
   "invite-prefix": "{{userName}} invites you to join the {{appName}} room\n\nRoom theme: {{title}}",
   "invite-suffix": "Room ID: {{uuid}}",
   "invite-title": "{{userName}} invite to join the {{appName}} room",
+  "pmi-invite-title": "{{userName}} invites you to join {{appName}} PMI room",
   "invite-join-link": "Join Link: {{link}}",
   "join-link": "Join Link",
   "repeat-weeks": "Repeat period: {{weeks}}",
@@ -260,11 +261,13 @@
   "begin": "Begin",
   "join-options": "Join Room Options",
   "create-room-default-title": "The room created by {{name}}",
+  "pmi-create-room-default-title": "The PMI room created by {{name}}",
   "turn-on-the-camera": "Camera",
   "turn-on-cursor-name": "Show cursor name of others",
   "enter-room-uuid": "Please enter the room ID",
   "turn-on-the-microphone": "Microphone",
   "schedule-room-default-title": "The room scheduled by {{name}}",
+  "pmi-schedule-room-default-title": "The PMI room scheduled by {{name}}",
   "delete-room-records": "Delete room record",
   "delete-room-records-tips": "Are you sure to delete the current room record?",
   "repeat-frequency": "Every {{week}}",
@@ -529,15 +532,16 @@
   "user-account": "Account",
   "user-profile": "My Profile",
   "username": "Name",
+  "pmi": "PMI",
   "turn-on-the-pmi": "Use PMI",
   "copy-pmi": "Copy PMI",
   "wait-for-teacher-to-enter": "The room hasn't started yet. Please wait for the teacher to enter",
   "the-pmi-room-already-exists": "The PMI room already exists",
   "user-pmi-drained": "User PMI used up, please contact the administrator",
   "pmi-room-exist": "PMI room already exists, please cancel existing PMI room first",
   "pmi-help": "Your own room number, you can use this fixed number to create a room",
-  "personal-room-id": "Personal Room ID",
-  "personal-room-link": "Personal Room Link",
+  "personal-room-id": "PMI",
+  "personal-room-link": "PMI Link",
   "upload-avatar": "Upload Avatar",
   "upload-avatar-failed": "Upload avatar failed",
   "bind-wechat": "Bind WeChat",

packages/flat-i18n/locales/zh-CN.json

@@ -110,14 +110,15 @@
   "all-loaded": "已全部加载",
   "no-record": "暂无记录",
   "no-room": "暂无房间",
-  "pmi-invite-prefix": "{{userName}} 邀请你加入 {{appName}} 个人房间",
-  "invite-prefix": "{{userName}} 邀请你加入 {{appName}} 房间\n房间主题：{{title}}\n",
-  "invite-begin-time": "开始时间：{{time}}\n",
+  "pmi-invite-prefix": "{{userName}} 邀请你加入 {{appName}} 个人房间\n\n房间主题：{{title}}",
+  "invite-prefix": "{{userName}} 邀请你加入 {{appName}} 房间\n\n房间主题：{{title}}",
+  "invite-begin-time": "开始时间：{{time}}",
   "invite-suffix": "房间号：{{uuid}}",
   "invite-join-link": "加入链接：{{link}}",
   "join-link": "加入链接",
   "repeat-weeks": "重复周期：{{weeks}}",
-  "invite-title": "{{userName}} 邀请加入 {{appName}} 房间",
+  "invite-title": "{{userName}} 邀请你加入 {{appName}} 房间",
+  "pmi-invite-title": "{{userName}} 邀请你加入 {{appName}} 个人房间",
   "join-and-book-by-room-uuid": "可通过房间号加入和预约",
   "room-theme": "房间主题",
   "room-uuid": "房间号",
@@ -258,13 +259,15 @@
   "delete-records": "删除记录",
   "history": "历史记录",
   "create-room-default-title": "{{name}} 创建的房间",
+  "pmi-create-room-default-title": "{{name}} 创建的个人房间",
   "begin": "开始",
   "join-options": "加入房间选项",
   "turn-on-the-camera": "开启摄像头",
   "turn-on-cursor-name": "显示对方光标昵称",
   "enter-room-uuid": "请输入房间号",
   "turn-on-the-microphone": "开启麦克风",
   "schedule-room-default-title": "{{name}} 预定的房间",
+  "pmi-schedule-room-default-title": "{{name}} 预定的个人房间",
   "delete-room-records": "删除房间记录",
   "delete-room-records-tips": "确定删除当前房间记录？",
   "view-all-rooms-in-periodic-rooms": "查看全部 ({{count}}) 场房间",
@@ -529,6 +532,7 @@
   "user-account": "账号安全",
   "user-profile": "我的资料",
   "username": "昵称",
+  "pmi": "个人房间",
   "turn-on-the-pmi": "使用个人房间号",
   "copy-pmi": "复制个人房间信息",
   "wait-for-teacher-to-enter": "房间未开始，请等待老师进入",

packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx

@@ -137,6 +137,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                             endTime={endTime}
                             generateAvatar={generateAvatar}
                             isPeriodic={!!room.periodicUUID}
+                            isPmi={room.inviteCode === globalStore.pmi}
                             menuActions={getSubActions(room)}
                             ownerAvatar={room.ownerAvatarURL}
                             ownerName={room.ownerName}
@@ -231,6 +232,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
             {currentRoom && (
                 <InviteModal
                     baseUrl={FLAT_WEB_BASE_URL}
+                    isPmi={currentRoom.inviteCode === globalStore.pmi}
                     periodicWeeks={periodicInfo?.periodic.weeks}
                     room={currentRoom}
                     userName={globalStore.userName ?? ""}