From 6052d7576a07df25cedff2ac5433b2237a6650c2 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Tue, 5 Nov 2024 16:42:29 +0100
Subject: [PATCH 1/4] #495 fix css

---
 .../thumb-pages/components/thumb-page.module.css     | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/pods/thumb-pages/components/thumb-page.module.css b/src/pods/thumb-pages/components/thumb-page.module.css
index bfa1c2be..a5ac758d 100644
--- a/src/pods/thumb-pages/components/thumb-page.module.css
+++ b/src/pods/thumb-pages/components/thumb-page.module.css
@@ -4,8 +4,18 @@
   border: 3px solid;
   border-color: black;
   border-radius: 5px;
-  position: 'relative';
+  position: relative;
   background-color: white;
   margin-top: 10px;
   padding: 5px;
+  padding-bottom: 0px;
+}
+
+.container svg {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 12px;
+  height: 12px;
+  pointer-events: none;
 }

From 54d1e141aa611b53217608efe80e6365a7641338 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Tue, 5 Nov 2024 16:43:13 +0100
Subject: [PATCH 2/4] #495 add caret down icon

---
 .../icons/caret-down-icon.component.tsx           | 15 +++++++++++++++
 src/common/components/icons/index.ts              |  1 +
 src/pods/thumb-pages/components/thumb-page.tsx    |  2 ++
 3 files changed, 18 insertions(+)
 create mode 100644 src/common/components/icons/caret-down-icon.component.tsx

diff --git a/src/common/components/icons/caret-down-icon.component.tsx b/src/common/components/icons/caret-down-icon.component.tsx
new file mode 100644
index 00000000..b51c615a
--- /dev/null
+++ b/src/common/components/icons/caret-down-icon.component.tsx
@@ -0,0 +1,15 @@
+export const CaretDown = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66"
+      />
+    </svg>
+  );
+};
diff --git a/src/common/components/icons/index.ts b/src/common/components/icons/index.ts
index c5a2d422..94f0d905 100644
--- a/src/common/components/icons/index.ts
+++ b/src/common/components/icons/index.ts
@@ -10,3 +10,4 @@ export * from './copy-icon.component';
 export * from './paste-icon.component';
 export * from './delete-icon.component';
 export * from './pencil-icon.component';
+export * from './caret-down-icon.component';
diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx
index 3c031d0c..597c8ac7 100644
--- a/src/pods/thumb-pages/components/thumb-page.tsx
+++ b/src/pods/thumb-pages/components/thumb-page.tsx
@@ -7,6 +7,7 @@ import { createRef, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
 import { ThumbPageContextMenu } from './context-menu';
 import { useContextMenu } from '../use-context-menu-thumb.hook';
+import { CaretDown } from '@/common/components/icons';
 import classes from './thumb-page.module.css';
 
 interface Props {
@@ -61,6 +62,7 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
             })}
           </Layer>
         </Stage>
+        <CaretDown />
         {showContextMenu && (
           <ThumbPageContextMenu
             contextMenuRef={contextMenuRef}

From dc0275741ade808da6e62e0d07caed46aa1e8dc0 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Tue, 5 Nov 2024 16:44:41 +0100
Subject: [PATCH 3/4] fis css

---
 src/pods/thumb-pages/components/thumb-page.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pods/thumb-pages/components/thumb-page.module.css b/src/pods/thumb-pages/components/thumb-page.module.css
index a5ac758d..d707bde7 100644
--- a/src/pods/thumb-pages/components/thumb-page.module.css
+++ b/src/pods/thumb-pages/components/thumb-page.module.css
@@ -11,7 +11,7 @@
   padding-bottom: 0px;
 }
 
-.container svg {
+.container > svg {
   position: absolute;
   bottom: 8px;
   right: 8px;

From c4736aaded320e97b2b2c308928d29c6aa2cac3f Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Wed, 6 Nov 2024 10:24:45 +0100
Subject: [PATCH 4/4] #495 add handleclick to caretdown icon

---
 .../thumb-pages/components/thumb-page.module.css   | 14 ++++++++++++--
 src/pods/thumb-pages/components/thumb-page.tsx     |  7 ++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/pods/thumb-pages/components/thumb-page.module.css b/src/pods/thumb-pages/components/thumb-page.module.css
index d707bde7..d59e88f9 100644
--- a/src/pods/thumb-pages/components/thumb-page.module.css
+++ b/src/pods/thumb-pages/components/thumb-page.module.css
@@ -11,11 +11,21 @@
   padding-bottom: 0px;
 }
 
-.container > svg {
+.icon-container > svg {
   position: absolute;
   bottom: 8px;
   right: 8px;
   width: 12px;
   height: 12px;
-  pointer-events: none;
+  cursor: pointer;
+}
+
+.icon-container > svg:hover {
+  background-color: var(--primary-100);
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
 }
diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx
index 597c8ac7..3e0c916a 100644
--- a/src/pods/thumb-pages/components/thumb-page.tsx
+++ b/src/pods/thumb-pages/components/thumb-page.tsx
@@ -62,7 +62,12 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
             })}
           </Layer>
         </Stage>
-        <CaretDown />
+        <span
+          onClick={handleShowContextMenu}
+          className={classes['icon-container']}
+        >
+          <CaretDown />
+        </span>
         {showContextMenu && (
           <ThumbPageContextMenu
             contextMenuRef={contextMenuRef}