Add support for custom icons

web/package.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.2",
+    "react-html-parser": "^2.0.2",
     "react-monaco-editor": "^0.43.0",
     "react-router": "^5.2.0",
     "react-scripts": "4.0.3",

web/src/components/Dashboard/SearchObjectEntry.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import styled from "styled-components";
 import Backend from "../../lib/Backend";
 import DefineRules from "./DefineRules";
@@ -56,7 +57,11 @@ const SearchObjectEntry = ({ title, icon, url, id, type }) => {
               <span className="tag is-link">{type}</span>
             </div>
           </div>
-          <span>{icon}</span>
+          {icon && (icon.includes("http") || icon.includes("data:image")) ? (
+            <img width={32} height={32} src={icon} alt="icon" />
+          ) : (
+            <span>{icon}</span>
+          )}
           <span className="subtitle is-6">{title}</span>
         </ObjectMeta>
         <ObjectActions>

web/src/components/Dashboard/UploadObjectEntry.tsx

@@ -1,3 +1,4 @@
+import ReactHtmlParser from "react-html-parser";
 import styled from "styled-components";
 
 const Entry = styled.div`
@@ -30,6 +31,11 @@ const ObjectActions = styled.div`
   justify-content: center;
 `;
 
+const UploadTitle = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
 const UploadObjectEntry = ({ size, title, icon, url, id, deleteUpload }) => {
   return (
     <>
@@ -45,7 +51,9 @@ const UploadObjectEntry = ({ size, title, icon, url, id, deleteUpload }) => {
             </div>
           </div>
           <span>{icon}</span>
-          <span className="subtitle is-6">{title}</span>
+          <UploadTitle className="subtitle is-6">
+            {ReactHtmlParser(title)}
+          </UploadTitle>
         </ObjectMeta>
         <ObjectActions>
           <ObjectAction

web/src/components/modals/SettingsModal.tsx

@@ -75,6 +75,9 @@ const SettingsModal: React.FC<{
   const [toggleMode, setToggleMode] = useState(
     loadValue("toggle-mode", "close_toggle", settings)
   );
+  const [pageEmoji, setPageEmoji] = useState(
+    loadValue("page-emoji", "first_emoji", settings)
+  );
   const [basicName, setBasicName] = useState(
     loadValue("basic_model_name", "", settings)
   );
@@ -97,6 +100,7 @@ const SettingsModal: React.FC<{
               setDeckName(s.deckName);
             }
             setToggleMode(s["toggle-mode"]);
+            setPageEmoji(s["page-emoji"]);
             setSettings(s);
           }
           setLoading(false);
@@ -138,6 +142,7 @@ const SettingsModal: React.FC<{
     payload.cloze_model_name = clozeName;
     payload.input_model_name = inputName;
     payload["font-size"] = fontSize;
+    payload["page-emoji"] = pageEmoji;
 
     let settings = { object_id: pageId, payload };
     await backend
@@ -192,6 +197,32 @@ const SettingsModal: React.FC<{
                       }}
                     />
                   </div>
+                  <div className="control">
+                    <strong>Page icon</strong>
+                    <p className="is-size-7">
+                      By default the icon is the Notion page icon. You can
+                      disable this for example when sorting gets messed up.
+                    </p>
+                    <TemplateSelect
+                      values={[
+                        { label: "Icon first", value: "first_emoji" },
+                        {
+                          label: "Icon last",
+                          value: "last_emoji",
+                        },
+                        {
+                          label: "Disable icon",
+                          value: "disable_emoji",
+                        },
+                      ]}
+                      value={pageEmoji}
+                      name="page-emoji"
+                      pickedTemplate={(t) => {
+                        setPageEmoji(t);
+                        persist("page-emoji", t, pageId);
+                      }}
+                    />
+                  </div>
                 </div>
                 <h2 className="title is-3">Card Options</h2>
                 <div className="container">

web/src/lib/Backend.ts

@@ -171,10 +171,17 @@ class Backend {
   }
   private __getObjectIcon(p: any): string {
     if (!p || !p.icon) {
-      return "📄";
+      return "";
     }
-    if (p.icon && p.icon.emoji) return p.icon.emoji as string;
-    return "📄";
+    const iconType = p.icon.type;
+    if (iconType === "emoji") return p.icon.emoji as string;
+    if (iconType === "external") {
+      return p.icon.external.url;
+    }
+    if (iconType === "file") {
+      return p.icon.file.url;
+    }
+    return "";
   }
 
   async getPage(pageId: string): Promise<NotionObject | null> {