From ff93c72dcc814bfa00b8cd443a233d1492497918 Mon Sep 17 00:00:00 2001
From: phyyou <gydudwls@gmail.com>
Date: Sat, 13 May 2023 02:50:37 +0900
Subject: [PATCH] feat(NewCharButton): Update NewCharButton

* Refactor NewCharButton
  * Remove BarIcon at NewCharButton
  * Replaced BaseRoundedButton and SVG
---
 src/lib/SideBars/Sidebar.svelte     | 39 ++++++++++++++++++++---------
 src/lib/UI/BaseRoundedButton.svelte | 16 ++++++++++++
 2 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/UI/BaseRoundedButton.svelte

diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 1569117d..061eeaa2 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -36,6 +36,7 @@
   import { onDestroy } from "svelte";
   import { isEqual } from "lodash";
   import SidebarAvatar from "./SidebarAvatar.svelte";
+  import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -101,7 +102,9 @@
   {#if menuMode === 0}
     {#each charImages as charimg, i}
       <div class="group relative flex items-center px-2">
-        <SidebarIndicator isActive={$selectedCharID === i} />
+        <SidebarIndicator
+          isActive={$selectedCharID === i && sideBarMode !== 1}
+        />
         {#if charimg !== ""}
           <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
           <div
@@ -169,17 +172,29 @@
         {/if}
       </div>
     {/each}
-    <BarIcon
-      onClick={() => {
-        if (sideBarMode === 1) {
-          reseter();
-          sideBarMode = 0;
-        } else {
-          reseter();
-          sideBarMode = 1;
-        }
-      }}><PlusIcon /></BarIcon
-    >
+    <div class="flex flex-col items-center space-y-2 px-2">
+      <BaseRoundedButton
+        onClick={() => {
+          if (sideBarMode === 1) {
+            reseter();
+            sideBarMode = 0;
+          } else {
+            reseter();
+            sideBarMode = 1;
+          }
+        }}
+        ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
+          ><path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+          /></svg
+        ></BaseRoundedButton
+      >
+    </div>
   {:else}
     <BarIcon
       onClick={() => {
diff --git a/src/lib/UI/BaseRoundedButton.svelte b/src/lib/UI/BaseRoundedButton.svelte
new file mode 100644
index 00000000..f0e4712b
--- /dev/null
+++ b/src/lib/UI/BaseRoundedButton.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let isDisabled: boolean = false;
+  export let onClick: () => void;
+</script>
+
+<button
+  disabled={isDisabled}
+  on:click={onClick}
+  class="flex h-[56px] w-[56px] cursor-pointer select-none items-center justify-center
+   transition-colors rounded-full
+   border border-gray-500 text-gray-300
+   hover:border-gray-300 
+   {isDisabled ? '!cursor-not-allowed' : ''}"
+>
+  <slot />
+</button>