chore(web): add container settings panel for widget area

web/src/beta/components/SidePanelSectionField/index.tsx

@@ -6,20 +6,22 @@ import Icon from "../Icon";
 import Text from "../Text";
 
 const SidePanelSectionField: React.FC<{
-  title: string;
+  title?: string;
   children?: ReactNode;
 }> = ({ title, children }) => {
   const theme = useTheme();
   const [opened, setOpened] = useState(true);
 
   return (
     <Field>
-      <Header onClick={() => setOpened(!opened)}>
-        <Text size="body" color={theme.content.main}>
-          {title}
-        </Text>
-        <ArrowIcon icon="arrowToggle" size={12} color={theme.content.main} opened={opened} />
-      </Header>
+      {title && (
+        <Header onClick={() => setOpened(!opened)}>
+          <Text size="body" color={theme.content.main}>
+            {title}
+          </Text>
+          <ArrowIcon icon="arrowToggle" size={12} color={theme.content.main} opened={opened} />
+        </Header>
+      )}
       {opened && children && <Content>{children}</Content>}
     </Field>
   );
@@ -45,7 +47,7 @@ const ArrowIcon = styled(Icon)<{ opened: boolean }>`
 `;
 
 const Content = styled.div`
-  padding: 0 8px 8px 8px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 4px;

web/src/beta/features/Editor/Visualizer/CanvasArea/hooks.ts

@@ -1,3 +1,4 @@
+import { useReactiveVar } from "@apollo/client";
 import { useMemo, useEffect, useCallback, useState } from "react";
 
 import type { Alignment, Location } from "@reearth/beta/lib/core/Crust";
@@ -13,7 +14,7 @@
   useSelectedBlock,
   useWidgetAlignEditorActivated,
   useZoomedLayerId,
-  useSelectedWidgetArea,
+  selectedWidgetAreaVar,
 } from "@reearth/services/state";
 
 import { convertWidgets } from "./convert";
@@ -29,7 +30,7 @@
   const [camera, onCameraChange] = useCamera();
   const [selected, select] = useSelected();
   const [selectedBlock, selectBlock] = useSelectedBlock();
-  const [selectedWidgetArea, selectWidgetArea] = useSelectedWidgetArea();
+  const selectedWidgetArea = useReactiveVar(selectedWidgetAreaVar);
   const [widgetAlignEditorActivated] = useWidgetAlignEditorActivated();
   const [zoomedLayerId, zoomToLayer] = useZoomedLayerId();
 
@@ -92,7 +93,7 @@
 
   const widgets = convertWidgets(scene);
   // TODO: Fix to use exact type through GQL typing
   const sceneProperty: any = useMemo(
     () => ({
       tiles: [
         {
@@ -129,7 +130,7 @@
       vt: T,
       selectedLayer?: Layer,
     ) => {
       const propertyId = (selectedLayer?.infobox?.blocks?.find(b => b.id === blockId) as any)
         ?.propertyId as string | undefined;
       if (!propertyId) return;
 
@@ -182,7 +183,10 @@
 
   const onWidgetAlignSystemUpdate = useCallback(
     async (location: Location, align: Alignment) => {
-      await useUpdateWidgetAlignSystem(location, align, sceneId);
+      await useUpdateWidgetAlignSystem(
+        { zone: location.zone, section: location.section, area: location.area, align },
+        sceneId,
+      );
     },
     [sceneId, useUpdateWidgetAlignSystem],
   );
@@ -227,7 +231,7 @@
     onBlockRemove,
     onBlockInsert,
     onWidgetUpdate,
-    selectWidgetArea,
+    selectWidgetArea: selectedWidgetAreaVar,
     onWidgetAlignSystemUpdate,
     onIsCapturingChange,
     onCameraChange,

web/src/beta/features/Editor/tabs/widgets/Nav/index.tsx

@@ -1,6 +1,9 @@
+import { useEffect } from "react";
+
 import Toggle from "@reearth/beta/components/properties/Toggle";
 import SecondaryNav from "@reearth/beta/features/Editor/SecondaryNav";
 import { useT } from "@reearth/services/i18n";
+import { selectedWidgetAreaVar } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
 
 import Devices, { type Device } from "./Devices";
@@ -23,6 +26,13 @@ const Nav: React.FC<Props> = ({
   onDeviceChange,
 }) => {
   const t = useT();
+
+  useEffect(() => {
+    if (!showWidgetEditor) {
+      selectedWidgetAreaVar(undefined);
+    }
+  }, [showWidgetEditor]);
+
   return (
     <StyledSecondaryNav>
       <Devices selectedDevice={selectedDevice} onDeviceChange={onDeviceChange} />

web/src/beta/features/Editor/tabs/widgets/SidePanel/ContainerSettings/hooks.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+
+import { useWidgetsFetcher } from "@reearth/services/api";
+import { type WidgetAreaState, selectedWidgetAreaVar } from "@reearth/services/state";
+
+export default ({ sceneId }: { sceneId: string }) => {
+  const { useUpdateWidgetAlignSystem } = useWidgetsFetcher();
+  const handleAreaStateChange = useCallback(
+    async (widgetAreaState?: WidgetAreaState) => {
+      if (!sceneId || !widgetAreaState) return;
+      const results = await useUpdateWidgetAlignSystem(widgetAreaState, sceneId);
+      if (results.status === "success") {
+        selectedWidgetAreaVar(widgetAreaState);
+      }
+    },
+    [sceneId, useUpdateWidgetAlignSystem],
+  );
+
+  return {
+    handleAreaStateChange,
+  };
+};

web/src/beta/features/Editor/tabs/widgets/SidePanel/ContainerSettings/index.tsx

@@ -0,0 +1,97 @@
+import TextInput from "@reearth/beta/components/properties/TextInput";
+import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
+import { WidgetAreaPadding, WidgetAreaState } from "@reearth/services/state";
+import { styled } from "@reearth/services/theme";
+
+import useHooks from "./hooks";
+
+type Props = {
+  sceneId: string;
+  widgetArea: WidgetAreaState;
+};
+
+const ContainerSettings: React.FC<Props> = ({ sceneId, widgetArea }) => {
+  const { handleAreaStateChange } = useHooks({ sceneId });
+
+  // TODO: This is dummy UI
+  return (
+    <Wrapper>
+      <SidePanelSectionField>
+        <TextInput
+          name="Padding Top"
+          value={widgetArea?.padding?.top.toString()}
+          onChange={newVal => {
+            handleAreaStateChange?.({
+              ...widgetArea,
+              padding: {
+                ...(widgetArea.padding as WidgetAreaPadding),
+                top: Number(newVal) ?? 0,
+              },
+            });
+          }}
+        />
+        <TextInput
+          name="Padding Right"
+          value={widgetArea?.padding?.right.toString()}
+          onChange={newVal => {
+            handleAreaStateChange?.({
+              ...widgetArea,
+              padding: {
+                ...(widgetArea.padding as WidgetAreaPadding),
+                right: Number(newVal) ?? 0,
+              },
+            });
+          }}
+        />
+        <TextInput
+          name="Padding Bottom"
+          value={widgetArea?.padding?.bottom.toString()}
+          onChange={newVal => {
+            handleAreaStateChange?.({
+              ...widgetArea,
+              padding: {
+                ...(widgetArea.padding as WidgetAreaPadding),
+                bottom: Number(newVal) ?? 0,
+              },
+            });
+          }}
+        />
+        <TextInput
+          name="Padding Left"
+          value={widgetArea?.padding?.left.toString()}
+          onChange={newVal => {
+            handleAreaStateChange?.({
+              ...widgetArea,
+              padding: {
+                ...(widgetArea.padding as WidgetAreaPadding),
+                left: Number(newVal) ?? 0,
+              },
+            });
+          }}
+        />
+
+        <TextInput
+          name="Gap Spacing"
+          value={(widgetArea?.gap ?? 0).toString()}
+          onChange={newVal => {
+            handleAreaStateChange?.({
+              ...widgetArea,
+              gap: Number(newVal) ?? 0,
+            });
+          }}
+        />
+
+        <div>[Switch field] Align Center {!!widgetArea?.centered}</div>
+        <div>[Color field] Background Color {widgetArea?.background}</div>
+      </SidePanelSectionField>
+    </Wrapper>
+  );
+};
+
+export default ContainerSettings;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

web/src/beta/features/Editor/tabs/widgets/SidePanel/hooks.ts

@@ -2,7 +2,7 @@ import { useReactiveVar } from "@apollo/client";
 import { useCallback, useMemo } from "react";
 
 import { useWidgetsFetcher } from "@reearth/services/api";
-import { selectedWidgetVar } from "@reearth/services/state";
+import { selectedWidgetVar, selectedWidgetAreaVar } from "@reearth/services/state";
 
 export default ({ sceneId }: { sceneId?: string }) => {
   const { useInstallableWidgetsQuery, useInstalledWidgetsQuery, useAddWidget, useRemoveWidget } =
@@ -11,6 +11,7 @@ export default ({ sceneId }: { sceneId?: string }) => {
   const { installedWidgets } = useInstalledWidgetsQuery({ sceneId });
 
   const selectedWidget = useReactiveVar(selectedWidgetVar);
+  const selectedWidgetArea = useReactiveVar(selectedWidgetAreaVar);
 
   const propertyItems = useMemo(
     () => installedWidgets?.find(w => w.id === selectedWidget?.id)?.property.items,
@@ -49,6 +50,7 @@ export default ({ sceneId }: { sceneId?: string }) => {
 
   return {
     selectedWidget,
+    selectedWidgetArea,
     propertyItems,
     installedWidgets,
     installableWidgets,

web/src/beta/features/Editor/tabs/widgets/SidePanel/index.tsx

@@ -1,6 +1,7 @@
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
 import { useT } from "@reearth/services/i18n";
 
+import ContainerSettings from "./ContainerSettings";
 import useHooks from "./hooks";
 import Manager, { ActionArea } from "./Manager";
 import Settings from "./Settings";
@@ -15,6 +16,7 @@ const SidePanel: React.FC<Props> = ({ sceneId }) => {
 
   const {
     selectedWidget,
+    selectedWidgetArea,
     propertyItems,
     installedWidgets,
     installableWidgets,
@@ -51,6 +53,14 @@ const SidePanel: React.FC<Props> = ({ sceneId }) => {
             <Settings widgetPropertyId={selectedWidget.propertyId} propertyItems={propertyItems} />
           ),
         },
+        {
+          id: "containerSettings",
+          title: t("Container Settings"),
+          hide: !selectedWidgetArea,
+          children: selectedWidgetArea && sceneId && (
+            <ContainerSettings sceneId={sceneId} widgetArea={selectedWidgetArea} />
+          ),
+        },
       ]}
     />
   );

web/src/beta/lib/core/Crust/Widgets/WidgetAlignSystem/Area.tsx

@@ -120,7 +120,7 @@ export default function Area({
       editorStyle={{
         flexWrap: "wrap",
         padding: `${padding?.top}px ${padding?.right}px ${padding?.bottom}px ${padding?.left}px`,
-        background: backgroundColor
+        backgroundColor: backgroundColor
           ? backgroundColor
           : area === "middle"
           ? theme.placeHolder.main_2

web/src/services/api/widgetsApi/index.ts

@@ -16,7 +16,7 @@ import {
   UPDATE_WIDGET_ALIGN_SYSTEM,
 } from "@reearth/services/gql/queries/widget";
 import { useT } from "@reearth/services/i18n";
-import { useNotification } from "@reearth/services/state";
+import { WidgetAreaState, useNotification } from "@reearth/services/state";
 
 import { SceneQueryProps } from "../sceneApi";
 import { MutationReturn } from "../types";
@@ -196,7 +196,7 @@ export default () => {
   });
 
   const useUpdateWidgetAlignSystem = useCallback(
-    async (location: WidgetLocation, align: WidgetAlignment, sceneId?: string) => {
+    async (widgetAreaState: WidgetAreaState, sceneId?: string) => {
       if (!sceneId) {
         console.log(
           "GraphQL: Failed to update the widget align system because there is no sceneId provided",
@@ -211,11 +211,15 @@ export default () => {
         variables: {
           sceneId,
           location: {
-            zone: location.zone.toUpperCase() as WidgetZoneType,
-            section: location.section.toUpperCase() as WidgetSectionType,
-            area: location.area.toUpperCase() as WidgetAreaType,
+            zone: widgetAreaState.zone.toUpperCase() as WidgetZoneType,
+            section: widgetAreaState.section.toUpperCase() as WidgetSectionType,
+            area: widgetAreaState.area.toUpperCase() as WidgetAreaType,
           },
-          align: align?.toUpperCase() as WidgetAreaAlign,
+          align: widgetAreaState.align?.toUpperCase() as WidgetAreaAlign,
+          background: widgetAreaState.background,
+          padding: widgetAreaState.padding,
+          centered: widgetAreaState.centered,
+          gap: widgetAreaState.gap,
         },
       });
 

web/src/services/i18n/translations/en.yml

@@ -35,6 +35,7 @@ Page: Page
 Align System: Align System
 Widget Manager: Widget Manager
 Inspector: Inspector
+Container Settings: Container Settings
 Angle: Angle
 Narrow: Narrow
 Wide: Wide

web/src/services/i18n/translations/ja.yml

@@ -31,6 +31,7 @@ Page: ページ
 Align System: アラインシステム
 Widget Manager: ウィジェット管理
 Inspector: インスペクター
+Container Settings: Container Settings
 Angle: 角度
 Narrow: 狭い
 Wide: 広い

web/src/services/state/index.ts

@@ -1,5 +1,7 @@
 import { makeVar } from "@apollo/client";
 
+import type { WidgetAreaType } from "@reearth/beta/lib/core/Crust";
+
 export type SelectedWidget = {
   id: string;
   pluginId: string;
@@ -9,4 +11,6 @@ export type SelectedWidget = {
 
 export const selectedWidgetVar = makeVar<SelectedWidget | undefined>(undefined);
 
+export const selectedWidgetAreaVar = makeVar<WidgetAreaType | undefined>(undefined);
+
 export * from "./jotai";