From 3c377d06a52d1c0dabf8a1f439e03b7831cb3e3f Mon Sep 17 00:00:00 2001
From: Shunya Hayashi <hayashun0226@icloud.com>
Date: Tue, 22 Oct 2024 14:38:48 +0900
Subject: [PATCH 1/5] display plugin list

---
 .../PluginPlayground/Plugins/index.tsx        | 150 +++++++++++++++++-
 1 file changed, 148 insertions(+), 2 deletions(-)

diff --git a/web/src/beta/features/PluginPlayground/Plugins/index.tsx b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
index 28d1faee47..ee76606de3 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/index.tsx
+++ b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
@@ -1,7 +1,153 @@
-import { FC } from "react";
+import { Button, Icon } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/styled";
+import { FC, useState } from "react";
+
+// TODO Implement: display uploaded files
+const mockPlugins = [
+  {
+    id: "1",
+    name: "My Plugin"
+  },
+  {
+    id: "2",
+    name: "My Plugin"
+  }
+];
+
+const mockFiles = [
+  {
+    id: "1",
+    name: "widget.js"
+  },
+  {
+    id: "2",
+    name: "table.js"
+  },
+  {
+    id: "3",
+    name: "reearth.yml"
+  }
+];
 
 const Plugins: FC = () => {
-  return <div>Plugins content</div>;
+  const [selectedPlugin, setSelectedPlugin] = useState<number>(0);
+  const [selectedFile, setSelectedFile] = useState<number>(0);
+
+  const onClickPluginItem = (i: number) => {
+    setSelectedPlugin(i);
+  };
+
+  const onClickFileItem = (i: number) => {
+    setSelectedFile(i);
+  };
+
+  return (
+    <Wrapper>
+      <PluginListWrapper>
+        <PluginList>
+          {mockPlugins.map((plugin, i) => (
+            <PluginListItem
+              key={plugin.id}
+              selected={selectedPlugin === i}
+              onClick={() => onClickPluginItem(i)}
+            >
+              {plugin.name}
+            </PluginListItem>
+          ))}
+        </PluginList>
+      </PluginListWrapper>
+      <FileListWrapper>
+        <ButtonsWrapper>
+          <Button icon="plus" title="File" />
+          <Button title="Upload" />
+        </ButtonsWrapper>
+        <FileList>
+          {mockFiles.map((file, i) => (
+            <FileListItem
+              key={file.id}
+              selected={selectedFile === i}
+              onClick={() => onClickFileItem(i)}
+            >
+              <Icon icon="file" />
+              {file.name}
+            </FileListItem>
+          ))}
+        </FileList>
+      </FileListWrapper>
+    </Wrapper>
+  );
 };
 
+const Wrapper = styled("div")(() => ({
+  display: "flex",
+  height: "100%"
+}));
+
+const PluginListWrapper = styled("div")(() => ({
+  display: "flex",
+  width: "50%",
+  padding: "4px"
+}));
+
+const PluginList = styled("ul")(() => ({
+  width: "100%",
+  padding: "0",
+  margin: "0",
+  listStyle: "none"
+}));
+
+const PluginListItem = styled("li")<{
+  selected?: boolean;
+}>(({ theme, selected }) => ({
+  paddingTop: theme.spacing.smallest,
+  paddingRight: theme.spacing.small,
+  paddingLeft: theme.spacing.normal,
+  paddingBottom: theme.spacing.smallest,
+  borderRadius: theme.radius.small,
+  backgroundColor: selected ? theme.select.main : "transparent",
+  cursor: "pointer",
+  "&:not(:first-child)": {
+    marginTop: theme.spacing.smallest
+  }
+}));
+
+const FileListWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "4px",
+  width: "50%",
+  borderLeft: `1px solid ${theme.outline.weaker}`,
+  gap: theme.spacing.small
+}));
+
+const FileList = styled("ul")(() => ({
+  width: "100%",
+  padding: "0",
+  margin: "0",
+  listStyle: "none"
+}));
+
+const FileListItem = styled("li")<{
+  selected?: boolean;
+}>(({ theme, selected }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.small,
+  paddingTop: theme.spacing.smallest,
+  paddingRight: theme.spacing.small,
+  paddingLeft: theme.spacing.normal,
+  paddingBottom: theme.spacing.smallest,
+  borderRadius: theme.radius.small,
+  backgroundColor: selected ? theme.select.main : "transparent",
+  cursor: "pointer",
+  "&:not(:first-child)": {
+    marginTop: theme.spacing.smallest
+  }
+}));
+
+const ButtonsWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.smallest
+}));
+
 export default Plugins;

From 44ecdfac2d9f3664f4b875d32a8476a8f92c8c55 Mon Sep 17 00:00:00 2001
From: Shunya Hayashi <hayashun0226@icloud.com>
Date: Tue, 22 Oct 2024 14:51:31 +0900
Subject: [PATCH 2/5] Activated the path to enable playground functionality
 testing

---
 web/src/beta/features/Dashboard/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/beta/features/Dashboard/index.tsx b/web/src/beta/features/Dashboard/index.tsx
index 0956ce48a6..1c27a8cd7d 100644
--- a/web/src/beta/features/Dashboard/index.tsx
+++ b/web/src/beta/features/Dashboard/index.tsx
@@ -23,7 +23,7 @@ export const bottomTabsItems: Omit<TabItems[], "active"> = [
     id: "plugin",
     text: "Plugin Playground",
     icon: "puzzlePiece",
-    disabled: true
+    path: "/plugin-playground"
   },
   { id: "documentation", text: "Documentation", icon: "book", disabled: true },
   { id: "community", text: "Community", icon: "usersFour", disabled: true },

From c1854b8c57d0ea14297ec5bee536b77ffee9450a Mon Sep 17 00:00:00 2001
From: Shunya Hayashi <hayashun0226@icloud.com>
Date: Wed, 23 Oct 2024 14:11:24 +0900
Subject: [PATCH 3/5] fix style

---
 web/src/beta/features/PluginPlayground/Plugins/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/beta/features/PluginPlayground/Plugins/index.tsx b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
index ee76606de3..9a86a3a680 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/index.tsx
+++ b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
@@ -147,7 +147,10 @@ const FileListItem = styled("li")<{
 
 const ButtonsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
-  gap: theme.spacing.smallest
+  gap: theme.spacing.smallest,
+  "& > button": {
+    flexGrow: 1
+  }
 }));
 
 export default Plugins;

From 6ac16f05cb791a53956252329bee359e64042161 Mon Sep 17 00:00:00 2001
From: Shunya Hayashi <hayashun0226@icloud.com>
Date: Fri, 25 Oct 2024 10:37:50 +0900
Subject: [PATCH 4/5] fix comment

---
 .../PluginPlayground/Plugins/index.tsx        | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/web/src/beta/features/PluginPlayground/Plugins/index.tsx b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
index 9a86a3a680..ad4b226f65 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/index.tsx
+++ b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
@@ -30,26 +30,28 @@ const mockFiles = [
 ];
 
 const Plugins: FC = () => {
-  const [selectedPlugin, setSelectedPlugin] = useState<number>(0);
-  const [selectedFile, setSelectedFile] = useState<number>(0);
+  const [selectedPluginId, setSelectedPluginId] = useState<string>(
+    mockPlugins[0]?.id || ""
+  );
+  const [selectedFileId, setSelectedFileId] = useState<string>();
 
-  const onClickPluginItem = (i: number) => {
-    setSelectedPlugin(i);
+  const onClickPluginItem = (id: string) => {
+    setSelectedPluginId(id);
   };
 
-  const onClickFileItem = (i: number) => {
-    setSelectedFile(i);
+  const onClickFileItem = (id: string) => {
+    setSelectedFileId(id);
   };
 
   return (
     <Wrapper>
       <PluginListWrapper>
         <PluginList>
-          {mockPlugins.map((plugin, i) => (
+          {mockPlugins.map((plugin) => (
             <PluginListItem
               key={plugin.id}
-              selected={selectedPlugin === i}
-              onClick={() => onClickPluginItem(i)}
+              selected={selectedPluginId === plugin.id}
+              onClick={() => onClickPluginItem(plugin.id)}
             >
               {plugin.name}
             </PluginListItem>
@@ -62,11 +64,11 @@ const Plugins: FC = () => {
           <Button title="Upload" />
         </ButtonsWrapper>
         <FileList>
-          {mockFiles.map((file, i) => (
+          {mockFiles.map((file) => (
             <FileListItem
               key={file.id}
-              selected={selectedFile === i}
-              onClick={() => onClickFileItem(i)}
+              selected={selectedFileId === file.id}
+              onClick={() => onClickFileItem(file.id)}
             >
               <Icon icon="file" />
               {file.name}
@@ -99,10 +101,7 @@ const PluginList = styled("ul")(() => ({
 const PluginListItem = styled("li")<{
   selected?: boolean;
 }>(({ theme, selected }) => ({
-  paddingTop: theme.spacing.smallest,
-  paddingRight: theme.spacing.small,
-  paddingLeft: theme.spacing.normal,
-  paddingBottom: theme.spacing.smallest,
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px  ${theme.spacing.smallest}px ${theme.spacing.normal}px`,
   borderRadius: theme.radius.small,
   backgroundColor: selected ? theme.select.main : "transparent",
   cursor: "pointer",
@@ -114,7 +113,7 @@ const PluginListItem = styled("li")<{
 const FileListWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  padding: "4px",
+  padding: theme.spacing.small,
   width: "50%",
   borderLeft: `1px solid ${theme.outline.weaker}`,
   gap: theme.spacing.small
@@ -133,10 +132,7 @@ const FileListItem = styled("li")<{
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.small,
-  paddingTop: theme.spacing.smallest,
-  paddingRight: theme.spacing.small,
-  paddingLeft: theme.spacing.normal,
-  paddingBottom: theme.spacing.smallest,
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px  ${theme.spacing.smallest}px ${theme.spacing.normal}px`,
   borderRadius: theme.radius.small,
   backgroundColor: selected ? theme.select.main : "transparent",
   cursor: "pointer",

From 81a957ba70661aa1831a84edee7845f6868e8fd9 Mon Sep 17 00:00:00 2001
From: Shunya Hayashi <hayashun0226@icloud.com>
Date: Fri, 25 Oct 2024 10:49:28 +0900
Subject: [PATCH 5/5] fixup! fix comment

---
 web/src/beta/features/PluginPlayground/Plugins/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/beta/features/PluginPlayground/Plugins/index.tsx b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
index ad4b226f65..5e0a6a6a10 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/index.tsx
+++ b/web/src/beta/features/PluginPlayground/Plugins/index.tsx
@@ -33,7 +33,9 @@ const Plugins: FC = () => {
   const [selectedPluginId, setSelectedPluginId] = useState<string>(
     mockPlugins[0]?.id || ""
   );
-  const [selectedFileId, setSelectedFileId] = useState<string>();
+  const [selectedFileId, setSelectedFileId] = useState<string>(
+    mockFiles[0]?.id || ""
+  );
 
   const onClickPluginItem = (id: string) => {
     setSelectedPluginId(id);