a lot of improvements

1 files changed, 161 insertions, 0 deletions

diff --git a/extension/src/components/Bookmark-backup.txt b/extension/src/components/Bookmark-backup.txt
new file mode 100644
index 0000000..4d1eb60
--- /dev/null
+++ b/extension/src/components/Bookmark-backup.txt
@@ -0,0 +1,161 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import React, {SyntheticEvent, useEffect} from "react";
+import {getBrowser} from "../main.tsx";
+import {Settings} from "./Body.tsx";
+import react from "@vitejs/plugin-react";
+
+/**
+ * A component for a single bookmark
+ *
+ * @param props.data The BookmarkTreeNode with the data for the bookmark
+ */
+function Bookmark(props: {data: BookmarkTreeNode}) {
+    let [favicon, setFavicon] = React.useState<string | null>(null);
+    let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter");
+    let [settings, setSettings] = React.useContext(Settings);
+    let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
+    // let [dropRight, setDropRight] = React.useState(false);
+    // let [dropLeft, setDropLeft] = React.useState(false);
+    // let [dropCenter, setDropCenter] = React.useState(false);
+
+    useEffect(() => {
+        setBgColor([255, 0, 0])
+        // faviconURL(props.data.url).then(o => o && setFavicon(o))
+        faviconURL(props.data).then(r => {
+            if (r) {
+                setFavicon(r)
+                setIconMode("small");
+            }
+        })
+    }, []);
+
+    // useEffect(() => {
+    //     console.log("signal received", dropCenter)
+    // }, [dropCenter]);
+
+    function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
+        if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) {
+            setIconMode("large")
+        }
+    }
+
+    return(
+        <div className={"bookmark"}>
+            <a draggable={settings.editMode} href={props.data.url}
+               // onDragStart={e => {
+               //     console.log("dragStart")
+               //     e.dataTransfer.dropEffect = "move";
+               //     e.dataTransfer.setData("bm-id", props.data.id);
+               // }}
+            >
+                <div className={"icon-box " + (iconMode)}
+                     style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
+                    {favicon ? (
+                        <img alt="Bookmark icon"
+                             draggable={false}
+                             src={favicon}
+                             onLoad={handleImageLoad}
+                        />
+                    ) : (
+                        <span className={"letter"}>{new URL(props.data.url!).hostname.charAt(0)}</span>
+                    )}
+
+                </div>
+                <span>{props.data.title}</span>
+            </a>
+            {/*<div className={"drop-targets"}>*/}
+            {/*    <div*/}
+            {/*        className={"left"}*/}
+            {/*        onDragEnter={_ => setDropLeft(true)}*/}
+            {/*        onDragLeave={_ => setDropRight(false)}*/}
+            {/*        onDrop={e => getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {parentId: props.data.parentId, index: props.data.index})}*/}
+            {/*        style={dropLeft ? undefined : {visibility: "hidden"}}*/}
+            {/*        // hidden={!dropLeft}*/}
+            {/*    >*/}
+            {/*        <div/>*/}
+            {/*    </div>*/}
+            {/*    <div*/}
+            {/*        className={"right"}*/}
+            {/*        onDragEnter={_ => setDropLeft(true)}*/}
+            {/*        onDragLeave={_ => setDropRight(false)}*/}
+            {/*        onDrop={e => getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {parentId: props.data.parentId, index: (props.data.index! + 1)})}*/}
+            {/*        style={dropRight ? undefined : {visibility: "hidden"}}*/}
+            {/*        // hidden={!dropRight}*/}
+            {/*    >*/}
+            {/*        <div/>*/}
+            {/*    </div>*/}
+            {/*    <div*/}
+            {/*        className={"center"}*/}
+            {/*        onDragOver={e => {*/}
+            {/*            e.preventDefault()*/}
+            {/*            // console.log("dropped")*/}
+            {/*        }}*/}
+            {/*        onDragEnter={e => {*/}
+            {/*            e.preventDefault()*/}
+            {/*            setDropCenter(true)*/}
+            {/*            console.log("enter")*/}
+            {/*        }}*/}
+            {/*        onDragLeave={_ => {*/}
+            {/*            setDropCenter(false)*/}
+            {/*            console.log("exit")*/}
+            {/*        }}*/}
+            {/*        onDrop={e => {*/}
+            {/*            e.preventDefault();*/}
+            {/*            console.log("dropped")*/}
+            {/*        }}*/}
+            {/*        style={dropCenter ? undefined : {visibility: "hidden"}}*/}
+            {/*        // hidden={!dropCenter}*/}
+            {/*    >*/}
+            {/*        <span>+</span>*/}
+            {/*    </div>*/}
+            {/*</div>*/}
+        </div>
+    );
+}
+
+/**
+ * Gets the icon for a bookmark
+ *
+ * @param data The URL of the link
+ * @return The URL of the icon
+ */
+async function faviconURL(data: BookmarkTreeNode) {
+    let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id];
+    if (i) return i
+
+    const url = new URL('https://www.google.com/s2/favicons');
+    url.searchParams.set("sz", "256");
+    url.searchParams.set("domain_url", data.url!);
+    let resp = await fetch(url)
+    let imgData = resp.ok ? await toDataURL(url.toString()) : null;
+    getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData});
+    return imgData;
+}
+
+function toDataURL(url:string):string {
+    // @ts-ignore
+    return fetch(url)
+        .then(response => response.blob())
+        .then(blob => new Promise((resolve, reject) => {
+            const reader = new FileReader()
+            reader.onloadend = () => resolve(reader.result)
+            reader.onerror = reject
+            reader.readAsDataURL(blob)
+        }))
+}
+
+// function hashColor(url:string) {
+//     hashCode(String)
+// }
+//
+// function hashCode(str: string) {
+//     let hash = 0;
+//     for (let i = 0, len = str.length; i < len; i++) {
+//         let chr = str.charCodeAt(i);
+//         hash = (hash << 5) - hash + chr;
+//         hash |= 0; // Convert to 32bit integer
+//     }
+//     return hash;
+// }
+
+export default Bookmark;
\ No newline at end of file