From c10d984cdbb155a501c2963a9fdcc035bc0bd40f Mon Sep 17 00:00:00 2001
From: miyanokomiya <tomoya.hstexze24632@gmail.com>
Date: Sun, 7 Apr 2024 11:34:28 +0900
Subject: [PATCH] feat: Show flowchart templates

---
 src/components/ShapeTemplatePanel.tsx          | 8 ++++++++
 src/components/molecules/ShapeLibraryGroup.tsx | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/ShapeTemplatePanel.tsx b/src/components/ShapeTemplatePanel.tsx
index fb71c8a9..af4ef9e9 100644
--- a/src/components/ShapeTemplatePanel.tsx
+++ b/src/components/ShapeTemplatePanel.tsx
@@ -49,6 +49,14 @@ export const ShapeTemplatePanel: React.FC = () => {
 
   return (
     <div className={"transition-opacity" + (stateLabel === "DroppingNewShape" ? " opacity-30" : "")}>
+      <GroupAccordion
+        selectedName={selected}
+        name="Flowchart"
+        type="templates"
+        size="lg"
+        onClick={handleClickAccordion}
+        onIconDown={handleIconDown}
+      />
       <GroupAccordion
         selectedName={selected}
         name="Sequence"
diff --git a/src/components/molecules/ShapeLibraryGroup.tsx b/src/components/molecules/ShapeLibraryGroup.tsx
index 5b2cc911..73a75543 100644
--- a/src/components/molecules/ShapeLibraryGroup.tsx
+++ b/src/components/molecules/ShapeLibraryGroup.tsx
@@ -235,11 +235,11 @@ export const IconItem: React.FC<IconButtonProps> = ({ url, name, id, size, onDow
     [onDown, id, url],
   );
 
-  const wrapperClass = size === "lg" ? "w-full h-auto max-h-32" : "w-10 h-10";
+  const wrapperClass = size === "lg" ? "w-full h-auto max-h-32 p-1" : "w-10 h-10";
   const skeletonClass = size === "lg" ? "w-full h-32" : "w-full h-full";
 
   return (
-    <li className={wrapperClass}>
+    <li className={"rounded hover:bg-gray-200 " + wrapperClass}>
       <button type="button" onPointerDown={handleDown} className="w-full h-full cursor-grab touch-none" title={name}>
         <ImageWithSkeleton
           src={url}