From 5ad32c0da61b8e1ab610e580279b792f9870a741 Mon Sep 17 00:00:00 2001
From: miyanokomiya <tomoya.hstexze24632@gmail.com>
Date: Fri, 29 Nov 2024 18:19:44 +0900
Subject: [PATCH] feat: Replace the sheet panel inside the inspector

- It displays when nothing is selected.
---
 src/components/AppRightPanel.tsx              |  2 --
 .../ShapeInspectorPanel.tsx                   |  3 +-
 .../SheetInspectorPanel.tsx}                  | 31 +++++++++++--------
 3 files changed, 20 insertions(+), 16 deletions(-)
 rename src/components/{SheetConfigPanel.tsx => shapeInspectorPanel/SheetInspectorPanel.tsx} (72%)

diff --git a/src/components/AppRightPanel.tsx b/src/components/AppRightPanel.tsx
index 9bf24966..409773b8 100644
--- a/src/components/AppRightPanel.tsx
+++ b/src/components/AppRightPanel.tsx
@@ -2,7 +2,6 @@ import { TabPanelV } from "./atoms/TabPanelV";
 import { ShapeTreeInspectorPanel } from "./shapeInspectorPanel/ShapeTreeInspectorPanel";
 import { ShapeLibraryPanel } from "./ShapeLibraryPanel";
 import { ShapeTemplatePanel } from "./ShapeTemplatePanel";
-import { SheetConfigPanel } from "./SheetConfigPanel";
 import { UserSettingPanel } from "./UserSettingPanel";
 
 interface Props {
@@ -13,7 +12,6 @@ interface Props {
 export const AppRightPanel: React.FC<Props> = ({ selected, onSelect }) => {
   const items: [{ name: string }, React.ReactNode, noPadding?: boolean][] = [
     [{ name: "Inspector" }, <ShapeTreeInspectorPanel />, true],
-    [{ name: "Sheet" }, <SheetConfigPanel />],
     [{ name: "Icons" }, <ShapeLibraryPanel />],
     [{ name: "Templates" }, <ShapeTemplatePanel />],
     [{ name: "Settings" }, <UserSettingPanel />],
diff --git a/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx b/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
index 00d09bb5..a5520032 100644
--- a/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
+++ b/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
@@ -16,6 +16,7 @@ import { AlphaField } from "./AlphaField";
 import { HighlightShapeMeta } from "../../composables/states/appCanvas/core";
 import { AttachmentInspector } from "./AttachmentInspector";
 import { patchByPartialProperties } from "../../utils/entities";
+import { SheetInspectorPanel } from "./SheetInspectorPanel";
 
 export const ShapeInspectorPanel: React.FC = () => {
   const targetShape = useSelectedShape();
@@ -24,7 +25,7 @@ export const ShapeInspectorPanel: React.FC = () => {
   return targetShape && targetTmpShape ? (
     <ShapeInspectorPanelWithShape targetShape={targetShape} targetTmpShape={targetTmpShape} />
   ) : (
-    <div>No shape selected</div>
+    <SheetInspectorPanel />
   );
 };
 
diff --git a/src/components/SheetConfigPanel.tsx b/src/components/shapeInspectorPanel/SheetInspectorPanel.tsx
similarity index 72%
rename from src/components/SheetConfigPanel.tsx
rename to src/components/shapeInspectorPanel/SheetInspectorPanel.tsx
index 62faf6e0..869c349c 100644
--- a/src/components/SheetConfigPanel.tsx
+++ b/src/components/shapeInspectorPanel/SheetInspectorPanel.tsx
@@ -1,14 +1,15 @@
 import { useCallback, useContext, useMemo, useState } from "react";
-import { AppCanvasContext } from "../contexts/AppCanvasContext";
-import { PopupButton } from "./atoms/PopupButton";
-import { ColorPickerPanel } from "./molecules/ColorPickerPanel";
-import { COLORS, rednerRGBA } from "../utils/color";
-import { Color } from "../models";
-import { useSelectedSheet, useSelectedTmpSheet } from "../hooks/storeHooks";
-import { SliderInput } from "./atoms/inputs/SliderInput";
-import { OutsideObserver } from "./atoms/OutsideObserver";
+import { AppCanvasContext } from "../../contexts/AppCanvasContext";
+import { PopupButton } from "../atoms/PopupButton";
+import { ColorPickerPanel } from "../molecules/ColorPickerPanel";
+import { COLORS, rednerRGBA } from "../../utils/color";
+import { Color } from "../../models";
+import { useSelectedSheet, useSelectedTmpSheet } from "../../hooks/storeHooks";
+import { SliderInput } from "../atoms/inputs/SliderInput";
+import { OutsideObserver } from "../atoms/OutsideObserver";
+import { InlineField } from "../atoms/InlineField";
 
-export const SheetConfigPanel: React.FC = () => {
+export const SheetInspectorPanel: React.FC = () => {
   const { sheetStore } = useContext(AppCanvasContext);
   const sheet = useSelectedSheet();
   const tmpSheet = useSelectedTmpSheet();
@@ -76,10 +77,14 @@ export const SheetConfigPanel: React.FC = () => {
     );
   }, [bgColor, sheet, onAlphaChanged, onColorClick]);
 
+  if (!sheet) return undefined;
+
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <p className="text-lg">Background color</p>
+      <InlineField label="Sheet name">
+        <span>{sheet.name}</span>
+      </InlineField>
+      <InlineField label="Background color">
         <OutsideObserver onClick={onClickOutside}>
           <PopupButton
             name="bgColor"
@@ -88,10 +93,10 @@ export const SheetConfigPanel: React.FC = () => {
             onClick={onClickPopupButton}
             popupPosition="left"
           >
-            <div className="w-8 h-8 border-2 rounded-full" style={{ backgroundColor: rednerRGBA(bgColor) }}></div>
+            <div className="w-6 h-6 border-2 rounded-full" style={{ backgroundColor: rednerRGBA(bgColor) }}></div>
           </PopupButton>
         </OutsideObserver>
-      </div>
+      </InlineField>
     </div>
   );
 };