Color picker

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",

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"

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>
+    );
+};

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>
+);

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">
+                <Color color={reminder.embed_color} onChange={() => {}}></Color>
-                    <span class="is-sr-only">Choose embed color</span>
-                    <i class="fas fa-eye-dropper"></i>
-                </button>
                 <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">
+            <Footer footer={reminder.embed_footer} icon={reminder.embed_footer_url}></Footer>
-                <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>
         </div>
     );
 };

vite.config.ts

@@ -7,5 +7,6 @@ export default defineConfig({
     build: {
         assetsDir: "static/assets",
         sourcemap: true,
+        copyPublicDir: false,
     },
 });