refine

src/components/atoms/AutoComplete/index.tsx

@@ -14,6 +14,7 @@ export type Item<Value extends string | number = string> = {
 
 export type Props<Value extends string | number> = {
   className?: string;
+  placeholder?: string;
   items?: Item<Value>[];
   fullWidth?: boolean;
   creatable?: boolean;
@@ -23,6 +24,7 @@ export type Props<Value extends string | number> = {
 
 function AutoComplete<Value extends string | number>({
   className,
+  placeholder,
   items,
   fullWidth = false,
   creatable,
@@ -70,7 +72,12 @@ function AutoComplete<Value extends string | number>({
       className={className}
       fullWidth={fullWidth}
       selectComponent={
-        <StyledTextBox value={filterText} onChange={handleInputChange} onKeyDown={handleKeyDown} />
+        <StyledTextBox
+          value={filterText}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+        />
       }
       onChange={handleSelect}
       ref={ref}

src/components/molecules/EarthEditor/TagPane/LayerTagPane/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import { useIntl } from "react-intl";
 
 import AutoComplete from "@reearth/components/atoms/AutoComplete";
 import Box from "@reearth/components/atoms/Box";
@@ -37,6 +38,7 @@ const SceneTagPane: React.FC<Props> = ({
   onTagGroupDetach,
   onTagItemDetach,
 }) => {
+  const intl = useIntl();
   const handleTagGroupSelect = useCallback(
     (tagGroupLabel: string) => {
       const targetTagGroup = allTagGroups?.find(tg => tg.label === tagGroupLabel);
@@ -64,6 +66,7 @@ const SceneTagPane: React.FC<Props> = ({
         </Box>
       ))}
       <AutoComplete
+        placeholder={intl.formatMessage({ defaultMessage: "Add a tag group" })}
         onCreate={onTagGroupAdd}
         creatable
         items={allTagGroups

src/components/molecules/EarthEditor/TagPane/SceneTagPane/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AutoComplete from "@reearth/components/atoms/AutoComplete";
 import Box from "@reearth/components/atoms/Box";
@@ -33,6 +34,7 @@ const SceneTagPane: React.FC<Props> = ({
   onTagItemRemove,
   onTagGroupUpdate,
 }) => {
+  const intl = useIntl();
   return (
     <Wrapper className={className} direction="column">
       {allTagGroups?.map(tg => (
@@ -52,7 +54,11 @@ const SceneTagPane: React.FC<Props> = ({
           />
         </Box>
       ))}
-      <AutoComplete onCreate={onTagGroupAdd} creatable />
+      <AutoComplete
+        onCreate={onTagGroupAdd}
+        creatable
+        placeholder={intl.formatMessage({ defaultMessage: "Add a tag group" })}
+      />
     </Wrapper>
   );
 };

src/components/molecules/EarthEditor/TagPane/TagGroup/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState, useMemo } from "react";
+import { useIntl } from "react-intl";
 import { useClickAway } from "react-use";
 
 import AutoComplete from "@reearth/components/atoms/AutoComplete";
@@ -46,6 +47,7 @@ const TagGroup: React.FC<Props> = ({
   onTitleEdit,
 }) => {
   const theme = useTheme();
+  const intl = useIntl();
   const [editing, setEditing] = useState(false);
   const titleRef = useRef(null);
   useClickAway(titleRef, () => setEditing(false));
@@ -123,6 +125,7 @@ const TagGroup: React.FC<Props> = ({
         onSelect={handleSelectTag}
         creatable
         onCreate={onTagAdd}
+        placeholder={intl.formatMessage({ defaultMessage: "Add a tag" })}
       />
     </Wrapper>
   );

src/components/organisms/EarthEditor/RightMenu/index.tsx

@@ -10,9 +10,9 @@ import TagPane from "../TagPane";
 
 import useHooks, { Tab } from "./hooks";
 
-const layerMode = ["property", "infobox", "export"];
+const layerMode = ["property", "infobox", "tag", "export"];
 const widgetMode = ["property"];
-const sceneMode = ["property"];
+const sceneMode = ["property", "tag"];
 export type LayerMode = typeof layerMode[number];
 export type WidgetMode = typeof widgetMode[number];
 export type SceneMode = typeof sceneMode[number];

src/components/organisms/EarthEditor/TagPane/commonHooks.ts

@@ -68,7 +68,7 @@ export default () => {
 
   const layerTagGroups = useMemo(() => {
     // TagItems which don't belong to any TagGroup will be in "Default" tag group
-    const defaultTagGroup: TagGroup = { id: "default", label: DEFAULT_TAG_ID, tags: [] };
+    const defaultTagGroup: TagGroup = { id: DEFAULT_TAG_ID, label: "Default", tags: [] };
     const formattedGroups: TagGroup[] = selectedLayerTags
       ? selectedLayerTags
           ?.map(t => {

translations/en.yml

@@ -166,6 +166,7 @@ src:
           '1835798571': Layers
           '2793623359': Widgets
           '3645414921': Delete
+          '4117491116': Clusters
         PropertyPane:
           '3453457092': Create Infobox
           '3833270271': Dataset
@@ -260,6 +261,13 @@ src:
             project.
           '3869801582': Embed Code
           '4062044511': Update your project
+        TagPane:
+          LayerTagPane:
+            '1950319966': Add a tag group
+          SceneTagPane:
+            '1950319966': Add a tag group
+          TagGroup:
+            '1562483899': Add a tag
       Settings:
         Account:
           AccountSection:
@@ -490,8 +498,8 @@ src:
           '2793623359': Widgets
           '3590336714': Export
         TagPane:
-          '1982056879': A tag with the same label already exist. Please input a different label and try again.
-          '4149491408': 'This tag group still has tags. You must remove all tags in the tag group before you can delete it.'
+          '1982056879': Same label tag already exist. Please type different label.
+          '4149491408': 'Tag group has tags, you need to remove all tags under the tag group'
       Notification:
         '687096634': Warning
         '1354606874': Notice

translations/ja.yml

@@ -150,6 +150,7 @@ src:
           '1835798571': レイヤー
           '2793623359': ウィジェット
           '3645414921': 削除
+          '4117491116': クラスター
         PropertyPane:
           '3453457092': インフォボックス作成
           '3833270271': データセット
@@ -234,6 +235,13 @@ src:
           '3733220817': URLを知っている人もこのプロジェクトを見ることができなくなります。
           '3869801582': 埋め込み用コード
           '4062044511': プロジェクトを更新する
+        TagPane:
+          LayerTagPane:
+            '1950319966': タググループを追加
+          SceneTagPane:
+            '1950319966': タググループを追加
+          TagGroup:
+            '1562483899': タグを追加
       Settings:
         Account:
           AccountSection: