From e97bff0cfa136c68f5b72ee16ca903c458173bb3 Mon Sep 17 00:00:00 2001
From: spd789562 <leo.yicun.lin@gmail.com>
Date: Tue, 12 Nov 2024 17:28:54 +0800
Subject: [PATCH] [add] deselect all button on CharacterSelectionDialog

---
 .../CharacterSelectionDialog.tsx                 |  6 +++---
 .../dialog/CharacterSelectionDialog/index.tsx    | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/dialog/CharacterSelectionDialog/CharacterSelectionDialog.tsx b/src/components/dialog/CharacterSelectionDialog/CharacterSelectionDialog.tsx
index 2a3f83f..774cf7f 100644
--- a/src/components/dialog/CharacterSelectionDialog/CharacterSelectionDialog.tsx
+++ b/src/components/dialog/CharacterSelectionDialog/CharacterSelectionDialog.tsx
@@ -13,9 +13,9 @@ export const CharacterSelectionDialog = (
   return (
     <Dialog.Root {...props}>
       <Portal>
-        <Dialog.Backdrop zIndex="settingOverlay" />
-        <Dialog.Positioner zIndex="settingModal">
-          <Dialog.Content minWidth="2xl">
+        <Dialog.Backdrop zIndex="topDrawer" />
+        <Dialog.Positioner zIndex="topDrawer">
+          <Dialog.Content minWidth="2xl" height="75%">
             {props.children}
             <Dialog.CloseTrigger
               asChild={(closeTriggerProps) => (
diff --git a/src/components/dialog/CharacterSelectionDialog/index.tsx b/src/components/dialog/CharacterSelectionDialog/index.tsx
index f4312d5..7e2e32c 100644
--- a/src/components/dialog/CharacterSelectionDialog/index.tsx
+++ b/src/components/dialog/CharacterSelectionDialog/index.tsx
@@ -1,12 +1,14 @@
-import { createSignal, splitProps, createEffect, on } from 'solid-js';
+import { createSignal, splitProps } from 'solid-js';
 import type { ReadableAtom } from 'nanostores';
 
 import { Grid } from 'styled-system/jsx/grid';
+import { HStack } from 'styled-system/jsx';
 import {
   Title,
   type RootProps as DialogRootProps,
   type OpenChangeDetails,
 } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 import { CharacterSelectionDialog as Dialog } from './CharacterSelectionDialog';
 import { CharacterGrid } from './CharacterGrid';
@@ -46,6 +48,10 @@ export const CharacterSelectionDialog = (
     setSelectIds([...currentIds]);
   }
 
+  function handleClear() {
+    setSelectIds([]);
+  }
+
   function handleExit() {
     props.onExit?.(selectedIds());
   }
@@ -58,8 +64,7 @@ export const CharacterSelectionDialog = (
     >
       <Grid
         position="relative"
-        overflow="auto"
-        gridTemplateRows="auto 1fr"
+        gridTemplateRows="auto 1fr auto"
         height="[100%]"
         padding="4"
       >
@@ -69,6 +74,11 @@ export const CharacterSelectionDialog = (
           selectedIds={selectedIds()}
           onSelect={handleSelect}
         />
+        <HStack justify="flex-end" py="1">
+          <Button variant="outline" onClick={handleClear}>
+            清除選取
+          </Button>
+        </HStack>
       </Grid>
     </Dialog>
   );