From 968b6b4977ae495cf2d3a158bedda6fb5cc7affd Mon Sep 17 00:00:00 2001
From: KaWaite <34051327+KaWaite@users.noreply.github.com>
Date: Wed, 29 Nov 2023 16:39:27 +0900
Subject: [PATCH] chore(web): add page name tag to indicator and fix some small
 bugs (#841)

---
 server/pkg/builtin/manifest.yml               |   9 +-
 server/pkg/builtin/manifest_ja.yml            |   2 +
 web/src/beta/components/Popover/hooks.ts      |   3 +-
 web/src/beta/components/Popover/index.tsx     | 116 +++++++++---------
 web/src/beta/components/Popover/types.ts      |   3 +-
 .../SidePanelSectionField/index.tsx           |   9 +-
 .../components/fields/ListField/index.tsx     |   2 +-
 .../fields/Property/PropertyList/index.tsx    |   2 +-
 .../tabs/map/LeftPanel/GroupField/index.tsx   |   2 +-
 .../PageIndicator/IndicatorSection.tsx        |  88 +++++++++++++
 .../core/StoryPanel/PageIndicator/index.tsx   |  54 ++++----
 web/src/beta/lib/core/StoryPanel/hooks.ts     |   1 +
 web/src/beta/lib/core/StoryPanel/index.tsx    |   1 +
 web/src/services/i18n/translations/en.yml     |   3 +-
 web/src/services/i18n/translations/ja.yml     |   3 +-
 15 files changed, 193 insertions(+), 105 deletions(-)
 create mode 100644 web/src/beta/lib/core/StoryPanel/PageIndicator/IndicatorSection.tsx

diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml
index d0cd41b88a..af103762c0 100644
--- a/server/pkg/builtin/manifest.yml
+++ b/server/pkg/builtin/manifest.yml
@@ -23,11 +23,11 @@ extensions:
               defaultValue: 3d
               choices:
                 - key: 3d
-                  label: Scene 3D
+                  label: 3D
                 - key: 2d
-                  label: Scene 2D
+                  label: 2D
                 - key: columbus
-                  label: Columbus View
+                  label: 2.5D (Columbus View)
             - id: ion
               type: string
               title: Cesium Ion API access token
@@ -2323,11 +2323,10 @@ extensions:
               ui: color
             - id: padding
               type: spacing
-              title: Spacing settings
+              title: Padding
               ui: padding
               min: 0
               max: 100
-              defaultValue: { top: 0, bottom: 0, left: 0, right: 0 }  
         - id: cameraAnimation
           title: Camera Animation
           fields:
diff --git a/server/pkg/builtin/manifest_ja.yml b/server/pkg/builtin/manifest_ja.yml
index cb87fd1b13..72cf712b59 100644
--- a/server/pkg/builtin/manifest_ja.yml
+++ b/server/pkg/builtin/manifest_ja.yml
@@ -1153,6 +1153,8 @@ extensions:
             title: タイトル
           color:
             title: 色
+          padding:
+            title: 余白
       cameraAnimation:
         title: カメラアニメーション
         fields:
diff --git a/web/src/beta/components/Popover/hooks.ts b/web/src/beta/components/Popover/hooks.ts
index 636faa9140..32ed62bb9c 100644
--- a/web/src/beta/components/Popover/hooks.ts
+++ b/web/src/beta/components/Popover/hooks.ts
@@ -18,6 +18,7 @@ export default function usePopover({
   placement = "bottom",
   modal,
   offset: offsetProps,
+  shift: shiftProps,
   open: controlledOpen,
   onOpenChange: setControlledOpen,
 }: PopoverOptions = {}) {
@@ -38,7 +39,7 @@ export default function usePopover({
         fallbackAxisSideDirection: "end",
         padding: 4,
       }),
-      shift({ padding: 4 }),
+      shift(shiftProps ?? { padding: 4 }),
     ],
   });
 
diff --git a/web/src/beta/components/Popover/index.tsx b/web/src/beta/components/Popover/index.tsx
index 69fb42e48d..f3b58f22fd 100644
--- a/web/src/beta/components/Popover/index.tsx
+++ b/web/src/beta/components/Popover/index.tsx
@@ -4,7 +4,15 @@ import {
   FloatingFocusManager,
   useTransitionStyles,
 } from "@floating-ui/react";
-import * as React from "react";
+import {
+  forwardRef,
+  isValidElement,
+  cloneElement,
+  MutableRefObject,
+  type ButtonHTMLAttributes,
+  type HTMLProps,
+  type ReactNode,
+} from "react";
 
 import { PopoverContext, usePopoverContext } from "@reearth/beta/components/Popover/context";
 import { useTheme } from "@reearth/services/theme";
@@ -18,7 +26,7 @@ export function Provider({
   modal = false,
   ...restOptions
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 } & PopoverOptions) {
   const popover = usePopover({ modal, ...restOptions });
   return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;
@@ -26,19 +34,19 @@ export function Provider({
 
 type TriggerProps = {
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
   asChild?: boolean;
 };
 
-export const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & TriggerProps>(
+export const Trigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TriggerProps>(
   function Trigger({ children, asChild = false, className, ...props }, propRef) {
     const context = usePopoverContext();
     const childrenRef = (children as any).ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
     // `asChild` allows the user to pass any element as the anchor
-    if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(
+    if (asChild && isValidElement(children)) {
+      return cloneElement(
         children,
         context.getReferenceProps({
           ref,
@@ -68,55 +76,53 @@ type ContentProps = {
   attachToRoot?: boolean;
 };
 
-export const Content = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLProps<HTMLDivElement> & ContentProps
->(function Content({ style, className, attachToRoot = false, ...props }, propRef) {
-  const { context: floatingContext, ...context } = usePopoverContext();
-  const theme = useTheme();
-  const ref = useMergeRefs([context.refs.setFloating, propRef]);
-  const { isMounted, styles: transitionStyles } = useTransitionStyles(floatingContext, {
-    duration: 50,
-  });
+export const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement> & ContentProps>(
+  function Content({ style, className, attachToRoot = false, ...props }, propRef) {
+    const { context: floatingContext, ...context } = usePopoverContext();
+    const theme = useTheme();
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    const { isMounted, styles: transitionStyles } = useTransitionStyles(floatingContext, {
+      duration: 50,
+    });
 
-  if (!isMounted) return null;
+    if (!isMounted) return null;
 
-  return (
-    <FloatingPortal
-      // whether to render this inside the Trigger or outside the main div
-      root={attachToRoot ? (context.refs.domReference as React.MutableRefObject<null>) : null}>
-      <FloatingFocusManager context={floatingContext} modal={context.modal} initialFocus={-1}>
-        <div
-          ref={ref}
-          className={className}
-          style={{
-            ...context.floatingStyles,
-            ...transitionStyles,
-            ...style,
-            zIndex: theme.zIndexes.editor.popover,
-          }}
-          {...context.getFloatingProps(props)}>
-          {props.children}
-        </div>
-      </FloatingFocusManager>
-    </FloatingPortal>
-  );
-});
+    return (
+      <FloatingPortal
+        // whether to render this inside the Trigger or outside the main div
+        root={attachToRoot ? (context.refs.domReference as MutableRefObject<null>) : null}>
+        <FloatingFocusManager context={floatingContext} modal={context.modal} initialFocus={-1}>
+          <div
+            ref={ref}
+            className={className}
+            style={{
+              ...context.floatingStyles,
+              ...transitionStyles,
+              ...style,
+              zIndex: theme.zIndexes.editor.popover,
+            }}
+            {...context.getFloatingProps(props)}>
+            {props.children}
+          </div>
+        </FloatingFocusManager>
+      </FloatingPortal>
+    );
+  },
+);
 
-export const Close = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->(function PopoverClose(props, ref) {
-  const { setOpen } = usePopoverContext();
-  return (
-    <button
-      type="button"
-      ref={ref}
-      {...props}
-      onClick={event => {
-        props.onClick?.(event);
-        setOpen(false);
-      }}
-    />
-  );
-});
+export const Close = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PopoverClose(props, ref) {
+    const { setOpen } = usePopoverContext();
+    return (
+      <button
+        type="button"
+        ref={ref}
+        {...props}
+        onClick={event => {
+          props.onClick?.(event);
+          setOpen(false);
+        }}
+      />
+    );
+  },
+);
diff --git a/web/src/beta/components/Popover/types.ts b/web/src/beta/components/Popover/types.ts
index d3cd691ef5..8cef3315ba 100644
--- a/web/src/beta/components/Popover/types.ts
+++ b/web/src/beta/components/Popover/types.ts
@@ -1,4 +1,4 @@
-import { Placement, OffsetOptions } from "@floating-ui/react";
+import { Placement, OffsetOptions, ShiftOptions } from "@floating-ui/react";
 
 export type PopoverOptions = {
   initialOpen?: boolean;
@@ -6,5 +6,6 @@ export type PopoverOptions = {
   modal?: boolean; // @see https://floating-ui.com/docs/floatingfocusmanager#modal
   open?: boolean;
   offset?: OffsetOptions; // @see https://floating-ui.com/docs/offset
+  shift?: ShiftOptions;
   onOpenChange?: (open: boolean) => void;
 };
diff --git a/web/src/beta/components/SidePanelSectionField/index.tsx b/web/src/beta/components/SidePanelSectionField/index.tsx
index 06f57c61cf..aeae0c0659 100644
--- a/web/src/beta/components/SidePanelSectionField/index.tsx
+++ b/web/src/beta/components/SidePanelSectionField/index.tsx
@@ -9,8 +9,9 @@ const SidePanelSectionField: React.FC<{
   className?: string;
   title?: string;
   startCollapsed?: boolean;
+  gap?: number;
   children?: ReactNode;
-}> = ({ className, title, startCollapsed, children }) => {
+}> = ({ className, title, startCollapsed, gap, children }) => {
   const theme = useTheme();
   const [opened, setOpened] = useState<boolean>();
 
@@ -28,7 +29,7 @@ const SidePanelSectionField: React.FC<{
           <ArrowIcon icon="arrowToggle" size={12} color={theme.content.main} opened={opened} />
         </Header>
       )}
-      {opened && children && <Content>{children}</Content>}
+      {opened && children && <Content gap={gap}>{children}</Content>}
     </Field>
   );
 };
@@ -52,11 +53,11 @@ const ArrowIcon = styled(Icon)<{ opened?: boolean }>`
   transition: all 0.2s;
 `;
 
-const Content = styled.div`
+const Content = styled.div<{ gap?: number }>`
   padding: 8px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: ${({ gap }) => (gap ?? 16) + "px"} 16px;
 `;
 
 export default SidePanelSectionField;
diff --git a/web/src/beta/components/fields/ListField/index.tsx b/web/src/beta/components/fields/ListField/index.tsx
index 3f9b072e13..239e180e7c 100644
--- a/web/src/beta/components/fields/ListField/index.tsx
+++ b/web/src/beta/components/fields/ListField/index.tsx
@@ -94,7 +94,7 @@ const ListField: React.FC<Props> = ({
           onClick={addItem}
           icon="plus"
           buttonType="secondary"
-          text={t("Add Item")}
+          text={t("Add")}
           size="medium"
         />
       </ButtonGroup>
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.tsx b/web/src/beta/components/fields/Property/PropertyList/index.tsx
index 78d304a76e..fdaba9c5d1 100644
--- a/web/src/beta/components/fields/Property/PropertyList/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyList/index.tsx
@@ -98,7 +98,7 @@ const PropertyList: React.FC<Props> = ({
           onClick={handleAddPropertyItem}
           icon="plus"
           buttonType="secondary"
-          text={t("Add Item")}
+          text={t("Add")}
           size="medium"
         />
       </ButtonGroup>
diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx
index 0e84b54f49..e87603022c 100644
--- a/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx
+++ b/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx
@@ -64,7 +64,7 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
 
   return (
     <>
-      <StyledSidePanelSectionField title={t("Scene")} startCollapsed>
+      <StyledSidePanelSectionField title={t("Scene")} startCollapsed gap={0}>
         {[...new Set(scene?.property?.schema?.groups.map(({ collection }) => collection))].map(
           (collection, index) =>
             collection && (
diff --git a/web/src/beta/lib/core/StoryPanel/PageIndicator/IndicatorSection.tsx b/web/src/beta/lib/core/StoryPanel/PageIndicator/IndicatorSection.tsx
new file mode 100644
index 0000000000..18da5d9bf2
--- /dev/null
+++ b/web/src/beta/lib/core/StoryPanel/PageIndicator/IndicatorSection.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useMemo, useState } from "react";
+
+import * as Popover from "@reearth/beta/components/Popover";
+import Text from "@reearth/beta/components/Text";
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  title?: string;
+  pageNumber: number;
+  currentPageNumber: number;
+  onPageChange: (page: number) => void;
+};
+
+const IndicatorSection: React.FC<Props> = ({
+  pageNumber,
+  currentPageNumber,
+  title,
+  onPageChange,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseOut = useCallback(() => setIsHovered(false), []);
+
+  const handleClick = useCallback(() => {
+    onPageChange(pageNumber);
+    setIsHovered(false);
+  }, [pageNumber, onPageChange]);
+
+  const isHighlighted = useMemo(
+    () => pageNumber <= currentPageNumber,
+    [currentPageNumber, pageNumber],
+  );
+
+  // const isLast = useMemo(() => pageNumber === totalPages, [pageNumber, totalPages]);
+
+  return (
+    <Wrapper onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseOut}>
+      <Popover.Provider open={isHovered} placement="bottom" offset={0} shift={{ padding: 0 }}>
+        <Popover.Trigger asChild>
+          <Indicator highlighted={isHighlighted} />
+        </Popover.Trigger>
+        <Popover.Content attachToRoot>
+          <PageNameWrapper isHighlighted={isHighlighted}>
+            <StyledText size="footnote" customColor>
+              {title}
+            </StyledText>
+          </PageNameWrapper>
+        </Popover.Content>
+      </Popover.Provider>
+    </Wrapper>
+  );
+};
+
+export default IndicatorSection;
+
+const Wrapper = styled.div`
+  flex: 1;
+  cursor: pointer;
+  color: ${({ theme }) => theme.content.strong};
+
+  :not(:first-of-type) {
+    border-left: 1px solid #ffffff;
+  }
+`;
+
+const Indicator = styled.div<{ highlighted: boolean }>`
+  height: 100%;
+  ${({ highlighted }) =>
+    highlighted &&
+    `
+  background-color: #4589ff;
+  width: 100%;
+  `}
+`;
+
+const PageNameWrapper = styled.div<{ isHighlighted: boolean }>`
+  background-color: #78a9ff;
+  padding: 4px 8px;
+  ${({ isHighlighted }) => isHighlighted && "background-color: #4589ff;"}
+  max-width: 255px;
+`;
+
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
diff --git a/web/src/beta/lib/core/StoryPanel/PageIndicator/index.tsx b/web/src/beta/lib/core/StoryPanel/PageIndicator/index.tsx
index b52e3dfd8e..cb61944bf1 100644
--- a/web/src/beta/lib/core/StoryPanel/PageIndicator/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/PageIndicator/index.tsx
@@ -1,24 +1,34 @@
-import { FC, useMemo } from "react";
-
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
+import IndicatorSection from "./IndicatorSection";
+
 type Props = {
   currentPage: number;
+  pageTitles?: string[];
   maxPage: number;
   onPageChange: (page: number) => void;
 };
 
-const StoryPageIndicator: FC<Props> = ({ currentPage, maxPage, onPageChange }) => {
-  const widthPercentage = useMemo(() => {
-    const onePageWidth = 100 / maxPage;
-    const base = currentPage * onePageWidth;
-    return base;
-  }, [currentPage, maxPage]);
-
+const StoryPageIndicator: React.FC<Props> = ({
+  currentPage,
+  pageTitles,
+  maxPage,
+  onPageChange,
+}) => {
+  const t = useT();
   return (
-    <Wrapper widthPercentage={widthPercentage}>
+    <Wrapper>
       {[...Array(maxPage)].map((_, i) => {
-        return <Indicator key={i} type="button" onClick={() => onPageChange(i + 1)} />;
+        return (
+          <IndicatorSection
+            key={i}
+            pageNumber={i + 1}
+            currentPageNumber={currentPage}
+            title={pageTitles?.[i] ?? t("Untitled")}
+            onPageChange={onPageChange}
+          />
+        );
       })}
     </Wrapper>
   );
@@ -26,29 +36,9 @@ const StoryPageIndicator: FC<Props> = ({ currentPage, maxPage, onPageChange }) =
 
 export default StoryPageIndicator;
 
-const Wrapper = styled.div<{ widthPercentage: number }>`
-  position: relative;
+const Wrapper = styled.div`
   display: flex;
   background-color: #78a9ff;
-  z-index: ${({ theme }) => theme.zIndexes.visualizer.storyPage.indicator.unselected};
-
-  :after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-color: #4589ff;
-    transition: width 0.2s ease-out;
-    width: ${({ widthPercentage }) => widthPercentage}%;
-  }
-`;
-
-const Indicator = styled.button`
-  position: relative;
-  flex: 1;
   height: 8px;
-  z-index: ${({ theme }) => theme.zIndexes.visualizer.storyPage.indicator.selected};
-
-  :not(:first-of-type) {
-    border-left: 1px solid #ffffff;
   }
 `;
diff --git a/web/src/beta/lib/core/StoryPanel/hooks.ts b/web/src/beta/lib/core/StoryPanel/hooks.ts
index f4625fca6e..fd77efd78c 100644
--- a/web/src/beta/lib/core/StoryPanel/hooks.ts
+++ b/web/src/beta/lib/core/StoryPanel/hooks.ts
@@ -138,6 +138,7 @@ export default (
     const currentIndex = pages.findIndex(p => p.id === currentPageId);
     return {
       currentPage: currentIndex + 1,
+      pageTitles: pages.map(p => p.property?.title?.title?.value),
       maxPage: pages.length,
       onPageChange: (pageIndex: number) => handleCurrentPageChange(pages[pageIndex - 1]?.id),
     };
diff --git a/web/src/beta/lib/core/StoryPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/index.tsx
index 87fba1db05..8e26967756 100644
--- a/web/src/beta/lib/core/StoryPanel/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/index.tsx
@@ -107,6 +107,7 @@ export const StoryPanel = memo(
             {!!pageInfo && (
               <PageIndicator
                 currentPage={pageInfo.currentPage}
+                pageTitles={pageInfo.pageTitles}
                 maxPage={pageInfo.maxPage}
                 onPageChange={pageInfo.onPageChange}
               />
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index e4c7b274fe..758f9c1c93 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -24,7 +24,7 @@ Time: Time
 Time Zone: Time Zone
 set: set
 Remove: Remove
-Add Item: Add Item
+Add: Add
 Settings: Settings
 Options: Options
 Please choose an option: Please choose an option
@@ -391,7 +391,6 @@ Export: Export
 Preview: Preview
 Layer selection: Layer selection
 Selectable Layers: Selectable Layers
-Add: Add
 Stories: Stories
 Delete Selected Layer: Delete Selected Layer
 Create New Folder: Create New Folder
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index b6e71549b3..8a14bacfed 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -24,7 +24,7 @@ Time: 時間
 Time Zone: 時間帯
 set: 設定
 Remove: 削除
-Add Item: アイテムを追加
+Add: 追加
 Settings: 設定
 Options: オプション
 Please choose an option: オプションを選んでください
@@ -360,7 +360,6 @@ Export: エクスポート
 Preview: プレビュー
 Layer selection: レイヤーを選択
 Selectable Layers: 選択可能なレイヤー
-Add: 追加
 Stories: ストーリー
 Delete Selected Layer: 選択中のレイヤーを削除
 Create New Folder: 新規フォルダ作成