fix(web): Check UI and fix language issue (#1237)

Co-authored-by: tcsola <[email protected]>
reearth · Nov 13, 2024 · dff7dc3 · dff7dc3
1 parent f333ed0
commit dff7dc3
Show file tree

Hide file tree

Showing 34 changed files with 302 additions and 101 deletions.
diff --git a/server/pkg/builtin/manifest_ja.yml b/server/pkg/builtin/manifest_ja.yml
@@ -1304,7 +1304,7 @@ extensions:
           bgColor:
             title: 背景色
           showLayers:
-            title: 見えるレイヤー
+            title: 表示するレイヤー
   nextPageStoryBlock:
     name: 次ページボタン
     description: ストーリーテリングの次ページに移動するボタンブロック
@@ -1326,6 +1326,7 @@ extensions:
             title: 余白
           gap:
             title: 間隔
+            description: "インフォボックスのコンテンツの間隔を変更します。最小値:0 最大値:40"
   textInfoboxBetaBlock:
     name: テキスト
     description: インフォボックスのテキストブロック
@@ -1405,4 +1406,21 @@ extensions:
         title: パネル設定
         fields:
           padding:
-            title: 余白
+            title: 余白
+  linkButtonStoryBlock:
+    name: リンクボタン
+    description: ストーリーテリングリンクボタン
+    propertySchema:
+      default:
+        title: リンクボタン
+        fields:
+          title:
+            title: タイトル
+          color:
+            title: 色
+          bgColor:
+            title: 背景色
+          url:
+            title: リンクURL
+
+
diff --git a/web/src/beta/features/AssetsManager/AssetsSelector.tsx b/web/src/beta/features/AssetsManager/AssetsSelector.tsx
@@ -39,7 +39,7 @@ const AssetsSelector: FC<AssetsSelectorProps> = ({
         onCancel={onClose}
         actions={
           <>
-            <Button onClick={onClose} size="normal" title="Cancel" />
+            <Button onClick={onClose} size="normal" title={t("Cancel")} />
             <Button
               size="normal"
               title="Select"

diff --git a/web/src/beta/features/AssetsManager/hooks.ts b/web/src/beta/features/AssetsManager/hooks.ts
@@ -236,7 +236,7 @@ export default ({
   // path
   // TODO: support path with folder
   const [paths, _setPaths] = useState<BreadcrumbItem[]>([
-    { id: "assets", title: "Assets" }
+    { id: "assets", title: t("Assets") }
   ]);
   const handlePathClick = useCallback((_id?: string) => {}, []);
 

diff --git a/web/src/beta/features/CreateWorkspaceModal/index.tsx b/web/src/beta/features/CreateWorkspaceModal/index.tsx
@@ -73,9 +73,9 @@ const AddWorkspaceModal: FC = () => {
         ]}
       >
         <ModalContentWrapper>
-          <Typography size="body">{t("Your workspace Name *")}</Typography>
+          <Typography size="body">{t("Your workspace Name*")}</Typography>
           <TextInput
-            placeholder="your workspace name"
+            placeholder={t("your workspace name")}
             onChange={setWorkspaceNameConfirm}
           />
 

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
@@ -5,6 +5,7 @@ import {
   Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { formatRelativeTime } from "@reearth/beta/utils/time";
+import { useMeFetcher } from "@reearth/services/api";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, MouseEvent, useMemo } from "react";
 
@@ -22,16 +23,20 @@ const ProjectListViewItem: FC<ProjectProps> = ({
   onProjectRemove
 }) => {
   const theme = useTheme();
-
-  const createAt = useMemo(
-    () =>
-      project.createdAt ? formatRelativeTime(new Date(project.createdAt)) : "",
-    [project.createdAt]
-  );
+  const { useMeQuery } = useMeFetcher();
+  const { me } = useMeQuery();
+
+  const createAt = useMemo(() => {
+    return project.createdAt
+      ? formatRelativeTime(new Date(project.createdAt), me.lang)
+      : "";
+  }, [me.lang, project.createdAt]);
   const UpdatedAt = useMemo(
     () =>
-      project.updatedAt ? formatRelativeTime(new Date(project.updatedAt)) : "",
-    [project.updatedAt]
+      project.updatedAt
+        ? formatRelativeTime(new Date(project.updatedAt), me.lang)
+        : "",
+    [me.lang, project.updatedAt]
   );
 
   const {

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectRemoveModal.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectRemoveModal.tsx
@@ -28,10 +28,10 @@ const ProjectRemoveModal: FC<Props> = ({
       <ModalPanel
         actions={
           <>
-            <Button size="normal" title="Cancel" onClick={onClose} />
+            <Button size="normal" title={t("Cancel")} onClick={onClose} />
             <Button
               size="normal"
-              title="Remove"
+              title={t("Remove")}
               appearance="dangerous"
               disabled={disabled}
               onClick={onProjectRemove}

diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
@@ -23,10 +23,10 @@ const LayerStyleTab: FC<LayerStyleSelectorProps> = ({
   const t = useT();
   const layerStyleOptions = useMemo(
     () => [
-      { value: "", label: "NO STYLE" },
+      { value: "", label: t("NO STYLE") },
       ...(layerStyles?.map((ls) => ({ value: ls.id, label: ls.name })) ?? [])
     ],
-    [layerStyles]
+    [layerStyles, t]
   );
 
   const handleLayerStyleChange = useCallback(

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/index.tsx
@@ -1,4 +1,5 @@
 import { IconButton, IconName, PopupMenu } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useCallback, useMemo, useState } from "react";
 
@@ -50,16 +51,18 @@ const StyleNodeComp: FC<Props> = ({ node, onUpdate, onDelete }) => {
 
   const theme = useTheme();
 
+  const t = useT();
+
   const optionsMenu = useMemo(() => {
     return [
       {
         id: "delete",
-        title: "Delete",
+        title: t("Delete"),
         icon: "trash" as const,
         onClick: () => onDelete(node.id)
       }
     ];
-  }, [node.id, onDelete]);
+  }, [node.id, onDelete, t]);
 
   const handleValueUpdate = useCallback(
     (value: StyleSimpleValue) => {

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
@@ -1,5 +1,6 @@
 import { TextInput } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, MouseEvent, useCallback, useState } from "react";
 
@@ -23,6 +24,7 @@ const LayerStyleItem: FC<LayerStyleItemProps> = ({
   onDelete,
   onLayerStyleNameUpdate
 }) => {
+  const t = useT();
   const [localName, setLocalName] = useState(name);
   const [isEditing, setIsEditing] = useState(false);
 
@@ -64,7 +66,7 @@ const LayerStyleItem: FC<LayerStyleItemProps> = ({
       optionsMenu={[
         {
           id: "delete",
-          title: "Delete",
+          title: t("Delete"),
           icon: "trash" as const,
           onClick: onDelete
         }

diff --git a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
@@ -5,6 +5,7 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem, EntryItemAction } from "@reearth/beta/ui/components";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import {
   Dispatch,
@@ -34,6 +35,7 @@ const LayerItem: FC<LayerItemProps> = ({
   editingLayerNameId,
   setEditingLayerNameId
 }) => {
+  const t = useT();
   const {
     selectedLayerId,
     handleLayerSelect,
@@ -65,13 +67,13 @@ const LayerItem: FC<LayerItemProps> = ({
     const menu = [
       {
         id: "rename",
-        title: "Rename",
+        title: t("Rename"),
         icon: "pencilSimple" as const,
         onClick: () => setEditingLayerNameId(layer.id)
       },
       {
         id: "delete",
-        title: "Delete",
+        title: t("Delete"),
         icon: "trash" as const,
         onClick: () => handleLayerDelete(layer.id)
       }
@@ -81,7 +83,7 @@ const LayerItem: FC<LayerItemProps> = ({
       ? [
           {
             id: "customProperty",
-            title: "Property Schema",
+            title: t("Property Schema"),
             icon: "listDashes" as const,
             onClick: () => {
               openCustomPropertySchema();
@@ -98,7 +100,8 @@ const LayerItem: FC<LayerItemProps> = ({
     setEditingLayerNameId,
     handleLayerDelete,
     openCustomPropertySchema,
-    handleCustomPropertySchemaClick
+    handleCustomPropertySchemaClick,
+    t
   ]);
 
   const hoverActions: EntryItemAction[] | undefined = useMemo(

diff --git a/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
@@ -118,10 +118,10 @@ const SketchLayerCreator: FC<SketchLayerProps> = ({
         onCancel={onClose}
         actions={
           <>
-            <Button onClick={onClose} size="normal" title="Cancel" />
+            <Button onClick={onClose} size="normal" title={t("Cancel")} />
             <Button
               size="normal"
-              title="Create"
+              title={t("Create")}
               appearance="primary"
               onClick={handleSubmit}
               disabled={!layerName || warning}

diff --git a/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
@@ -51,10 +51,10 @@ const SketchLayerEditor: FC<SketchLayerEditorProp> = ({
         onCancel={handleClose}
         actions={
           <>
-            <Button onClick={handleClose} size="normal" title="Cancel" />
+            <Button onClick={handleClose} size="normal" title={t("Cancel")} />
             <Button
               size="normal"
-              title="Apply"
+              title={t("Apply")}
               appearance="primary"
               onClick={handleSubmit}
               disabled={warning}

diff --git a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
@@ -65,7 +65,6 @@ const PageItem: FC<PageItemProps> = ({
     storyPage.property.items,
     storyPage.title
   ]);
-
   const optionsMenu = useMemo(
     () => [
       {
@@ -76,12 +75,12 @@ const PageItem: FC<PageItemProps> = ({
       },
       {
         id: "delete",
-        title: "Delete",
+        title: t("Delete"),
         icon: "trash" as const,
         onClick: () => handleStoryPageDelete(storyPage.id)
       }
     ],
-    [storyPage.id, handleStoryPageDelete]
+    [storyPage.id, handleStoryPageDelete, t]
   );
 
   return (

diff --git a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
@@ -70,7 +70,7 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
 
   return (
     <Panel
-      title="Pages"
+      title={t("Pages")}
       extend
       alwaysOpen
       storageId="editor-story-pages-panel"

diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
@@ -1,5 +1,6 @@
 import { EntryItem } from "@reearth/beta/ui/components";
 import { InstalledWidget } from "@reearth/services/api/widgetsApi/utils";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useMemo } from "react";
 
@@ -16,16 +17,17 @@ const ListItem: FC<ListItemProps> = ({
   onItemDelete,
   onItemSelect
 }) => {
+  const t = useT();
   const optionsMenu = useMemo(
     () => [
       {
         id: "delete",
-        title: "Delete",
+        title: t("Delete"),
         icon: "trash" as const,
         onClick: () => onItemDelete?.(item.id)
       }
     ],
-    [item.id, onItemDelete]
+    [item.id, onItemDelete, t]
   );
 
   return (

diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
@@ -1,4 +1,5 @@
 import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
+import { useT } from "@reearth/services/i18n";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
@@ -25,6 +26,7 @@ export default ({
   ) => Promise<void> | undefined;
   onBlockMove?: (id: string, targetIndex: number, blockId: string) => void;
 }) => {
+  const t = useT();
   const editModeContext = useEditModeContext();
 
   const [openBlocksIndex, setOpenBlocksIndex] = useState<number>();
@@ -78,12 +80,12 @@ export default ({
       title: {
         title: {
           value: property?.title?.title,
-          title: "Title",
+          title: t("Title"),
           type: "string"
         },
         color: {
           value: property?.title?.color,
-          title: "Color",
+          title: t("Color"),
           type: "string",
           ui: "color"
         }
@@ -97,7 +99,7 @@ export default ({
         }
       }
     }),
-    [property?.title]
+    [property?.title, t]
   );
 
   const titleId = useMemo(() => `${page?.id}/title`, [page?.id]);

diff --git a/web/src/beta/features/WorkspaceSetting/innerPages/Members/index.tsx b/web/src/beta/features/WorkspaceSetting/innerPages/Members/index.tsx
@@ -63,6 +63,13 @@ const Members: FC<MembersProps> = ({ workspace }) => {
     [workspace?.members]
   );
 
+  const memerRoleTranslation = {
+    MAINTAINER: t("MAINTAINER"),
+    OWNER: t("OWNER"),
+    READER: t("READER"),
+    WRITER: t("WRITER")
+  };
+
   return (
     <InnerPage>
       <SettingsWrapper>
@@ -87,7 +94,7 @@ const Members: FC<MembersProps> = ({ workspace }) => {
                 <Fragment key={index}>
                   <TableCell>{member.user?.name}</TableCell>
                   <TableCell>{member.user?.email}</TableCell>
-                  <TableCell>{member.role}</TableCell>
+                  <TableCell>{memerRoleTranslation[member.role]}</TableCell>
                   <TableCell justifyContent="flex-end">
                     <PopupMenu
                       label={