From 33729330442a72b3e1391e08a7cb6a92b6484454 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Mon, 30 Oct 2023 18:07:07 +0000
Subject: [PATCH] Color picker

---
 package-lock.json                            | 32 +++++++
 package.json                                 |  1 +
 src/components/EditReminder/Embed/Color.tsx  | 91 ++++++++++++++++++++
 src/components/EditReminder/Embed/Footer.tsx | 24 ++++++
 src/components/EditReminder/Embed/index.tsx  | 30 +------
 vite.config.ts                               |  1 +
 6 files changed, 153 insertions(+), 26 deletions(-)
 create mode 100644 src/components/EditReminder/Embed/Color.tsx
 create mode 100644 src/components/EditReminder/Embed/Footer.tsx

diff --git a/package-lock.json b/package-lock.json
index 3763cde..12f6504 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
 				"bulma": "^0.9.4",
 				"luxon": "^3.4.3",
 				"preact": "^10.13.1",
+				"react-colorful": "^5.6.1",
 				"react-query": "^3.39.3",
 				"tributejs": "^5.1.3",
 				"wouter": "^2.12.1"
@@ -3899,6 +3900,28 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-colorful": {
+			"version": "5.6.1",
+			"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+			"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/react-dom": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+			"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.0"
+			},
+			"peerDependencies": {
+				"react": "^18.2.0"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4098,6 +4121,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/scheduler": {
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/package.json b/package.json
index 144dfa9..6ab721b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 		"bulma": "^0.9.4",
 		"luxon": "^3.4.3",
 		"preact": "^10.13.1",
+		"react-colorful": "^5.6.1",
 		"react-query": "^3.39.3",
 		"tributejs": "^5.1.3",
 		"wouter": "^2.12.1"
diff --git a/src/components/EditReminder/Embed/Color.tsx b/src/components/EditReminder/Embed/Color.tsx
new file mode 100644
index 0000000..932f7d2
--- /dev/null
+++ b/src/components/EditReminder/Embed/Color.tsx
@@ -0,0 +1,91 @@
+import { useState } from "preact/hooks";
+import { HexColorPicker } from "react-colorful";
+
+export const Color = ({ color: colorProp, onChange }) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [color, setColor] = useState(colorProp);
+
+    return (
+        <>
+            {modalOpen && (
+                <ColorModal
+                    color={color}
+                    setModalOpen={setModalOpen}
+                    onSave={setColor}
+                ></ColorModal>
+            )}
+            <button
+                class="change-color button is-rounded is-small"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                <span class="is-sr-only">Choose embed color</span>
+                <i class="fas fa-eye-dropper"></i>
+            </button>
+        </>
+    );
+};
+
+const ColorModal = ({ setModalOpen, color: colorProp, onSave }) => {
+    const [color, setColor] = useState(colorProp);
+
+    return (
+        <div class="modal is-active" id="pickColorModal">
+            <div
+                class="modal-background"
+                onClick={() => {
+                    setModalOpen(false);
+                }}
+            ></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <label class="modal-card-title" for="colorInput">
+                        Select Color
+                    </label>
+                    <button
+                        class="delete close-modal"
+                        aria-label="close"
+                        onClick={() => {
+                            setModalOpen(false);
+                        }}
+                    ></button>
+                </header>
+                <section class="modal-card-body">
+                    <div class="colorpicker-container">
+                        <HexColorPicker color={color} onChange={setColor}></HexColorPicker>
+                    </div>
+                    <br></br>
+                    <input
+                        class="input"
+                        id="colorInput"
+                        value={color}
+                        onChange={(ev) => {
+                            setColor(ev.currentTarget.value);
+                        }}
+                    ></input>
+                </section>
+                <footer class="modal-card-foot">
+                    <button class="button is-success" onChange={onSave}>
+                        Save
+                    </button>
+                    <button
+                        class="button close-modal"
+                        onClick={() => {
+                            setModalOpen(false);
+                        }}
+                    >
+                        Cancel
+                    </button>
+                </footer>
+            </div>
+            <button
+                class="modal-close is-large close-modal"
+                aria-label="close"
+                onClick={() => {
+                    setModalOpen(false);
+                }}
+            ></button>
+        </div>
+    );
+};
diff --git a/src/components/EditReminder/Embed/Footer.tsx b/src/components/EditReminder/Embed/Footer.tsx
new file mode 100644
index 0000000..cdb8f08
--- /dev/null
+++ b/src/components/EditReminder/Embed/Footer.tsx
@@ -0,0 +1,24 @@
+export const Footer = ({ footer, icon }) => (
+    <div class="embed-footer-box">
+        <p class="image is-20x20 customizable">
+            <a>
+                <img
+                    class="is-rounded embed_footer_url"
+                    src={icon || "/static/img/bg.webp"}
+                    alt="Footer profile-like image"
+                ></img>
+            </a>
+        </p>
+        <label class="is-sr-only" for="embedFooter">
+            Embed Footer text
+        </label>
+        <textarea
+            class="discord-embed-footer message-input autoresize "
+            placeholder="Embed Footer..."
+            maxlength={2048}
+            name="embed_footer"
+            rows={1}
+            value={footer}
+        ></textarea>
+    </div>
+);
diff --git a/src/components/EditReminder/Embed/index.tsx b/src/components/EditReminder/Embed/index.tsx
index 98a42a7..a2f4fae 100644
--- a/src/components/EditReminder/Embed/index.tsx
+++ b/src/components/EditReminder/Embed/index.tsx
@@ -1,15 +1,14 @@
 import { Author } from "./Author";
 import { Title } from "./Title";
 import { Description } from "./Description";
+import { Footer } from "./Footer";
+import { Color } from "./Color";
 
 export const Embed = ({ reminder }) => {
     return (
         <div class="discord-embed">
             <div class="embed-body">
-                <button class="change-color button is-rounded is-small">
-                    <span class="is-sr-only">Choose embed color</span>
-                    <i class="fas fa-eye-dropper"></i>
-                </button>
+                <Color color={reminder.embed_color} onChange={() => {}}></Color>
                 <div class="a">
                     <Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
                     <Title title={reminder.embed_title}></Title>
@@ -73,28 +72,7 @@ export const Embed = ({ reminder }) => {
                 </a>
             </p>
 
-            <div class="embed-footer-box">
-                <p class="image is-20x20 customizable">
-                    <a>
-                        <img
-                            class="is-rounded embed_footer_url"
-                            src="/static/img/bg.webp"
-                            alt="Footer profile-like image"
-                        ></img>
-                    </a>
-                </p>
-
-                <label class="is-sr-only" for="embedFooter">
-                    Embed Footer text
-                </label>
-                <textarea
-                    class="discord-embed-footer message-input autoresize "
-                    placeholder="Embed Footer..."
-                    maxlength={2048}
-                    name="embed_footer"
-                    rows={1}
-                ></textarea>
-            </div>
+            <Footer footer={reminder.embed_footer} icon={reminder.embed_footer_url}></Footer>
         </div>
     );
 };
diff --git a/vite.config.ts b/vite.config.ts
index 440ba48..0337f8d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,5 +7,6 @@ export default defineConfig({
     build: {
         assetsDir: "static/assets",
         sourcemap: true,
+        copyPublicDir: false,
     },
 });