From afa44751b7f9d39c4842d5a91a9e3ce28d74bfce Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 2 Dec 2024 23:07:26 -0500 Subject: a lot of improvements --- extension/src/Settings.ts | 4 +- extension/src/assets/close.svg | 2 +- extension/src/assets/edit.svg | 1 + extension/src/assets/folder.svg | 2 +- extension/src/assets/folder_open.svg | 2 +- extension/src/assets/globe.svg | 2 +- extension/src/assets/settings.svg | 2 +- extension/src/colortheif.d.ts | 15 +++ extension/src/components/Body.tsx | 17 ++- extension/src/components/Bookmark-backup.txt | 161 +++++++++++++++++++++++++++ extension/src/components/Bookmark.tsx | 71 +++++++++--- extension/src/components/FolderButton.tsx | 25 +++-- extension/src/components/SettingsEditor.tsx | 13 +-- extension/src/index.css | 129 +++++++++++++++++++-- extension/src/vite-env.d.ts | 1 + 15 files changed, 395 insertions(+), 52 deletions(-) create mode 100644 extension/src/assets/edit.svg create mode 100644 extension/src/colortheif.d.ts create mode 100644 extension/src/components/Bookmark-backup.txt (limited to 'extension/src') diff --git a/extension/src/Settings.ts b/extension/src/Settings.ts index ce6c344..853058f 100644 --- a/extension/src/Settings.ts +++ b/extension/src/Settings.ts @@ -24,12 +24,12 @@ export let defaultSettings: ISettings = { export function loadSettings(): Promise { // @ts-ignore - let tmp: Promise = getBrowser().storage.local.get(defaultSettings); + let tmp: Promise = getBrowser().storage.sync.get(defaultSettings); tmp.then(j => console.log(j)) return tmp; } export function writeSettings(settings: ISettings) { - getBrowser().storage.local.set(settings); + getBrowser().storage.sync.set(settings); } diff --git a/extension/src/assets/close.svg b/extension/src/assets/close.svg index 8c71124..83a6cce 100644 --- a/extension/src/assets/close.svg +++ b/extension/src/assets/close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extension/src/assets/edit.svg b/extension/src/assets/edit.svg new file mode 100644 index 0000000..9182fd3 --- /dev/null +++ b/extension/src/assets/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extension/src/assets/folder.svg b/extension/src/assets/folder.svg index 45d526a..c487795 100644 --- a/extension/src/assets/folder.svg +++ b/extension/src/assets/folder.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extension/src/assets/folder_open.svg b/extension/src/assets/folder_open.svg index 75ecf42..a6def6c 100644 --- a/extension/src/assets/folder_open.svg +++ b/extension/src/assets/folder_open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extension/src/assets/globe.svg b/extension/src/assets/globe.svg index b87a4d9..2f98c9d 100644 --- a/extension/src/assets/globe.svg +++ b/extension/src/assets/globe.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extension/src/assets/settings.svg b/extension/src/assets/settings.svg index 551161c..cbc41c7 100644 --- a/extension/src/assets/settings.svg +++ b/extension/src/assets/settings.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extension/src/colortheif.d.ts b/extension/src/colortheif.d.ts new file mode 100644 index 0000000..8e98fdf --- /dev/null +++ b/extension/src/colortheif.d.ts @@ -0,0 +1,15 @@ +declare module "colorthief" { + export type RGBColor = [number, number, number] + export default class ColorThief { + getColor: ( + img: HTMLImageElement | null, + quality: number = 10, + ) => RGBColor | null + + getPalette: ( + img: HTMLImageElement | null, + colorCount: number = 10, + quality: number = 10, + ) => RGBColor[] | null + } +} \ No newline at end of file diff --git a/extension/src/components/Body.tsx b/extension/src/components/Body.tsx index 6498a0a..e575d89 100644 --- a/extension/src/components/Body.tsx +++ b/extension/src/components/Body.tsx @@ -1,6 +1,7 @@ import React, {useEffect, useState} from "react"; import SettingsEditor from "./SettingsEditor.tsx"; -import imageUrl from "../assets/settings.svg" +import SettingsIcon from "../assets/settings.svg?react"; +import EditIcon from "../assets/edit.svg?react"; import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; import FolderBody from "./FolderBody.tsx"; import {defaultSettings, ISettings, loadSettings, writeSettings} from "../Settings.ts"; @@ -33,7 +34,7 @@ function Body() { useEffect(() => { writeSettings(settings); - if (settings?.rootFolder) { + if (settings.rootFolder) { getBrowser().bookmarks.getSubTree(settings.rootFolder).then(t => { setSelectedBookmarkTree(t); }); @@ -51,9 +52,15 @@ function Body() { case "image": return () }})()} - +
+ {settings.editMode && Move mode: Drag bookmarks to change order} + + +
{selectedBookmarkTree[0] && ()} 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(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) { + if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) { + setIconMode("large") + } + } + + return( +
+ { + // console.log("dragStart") + // e.dataTransfer.dropEffect = "move"; + // e.dataTransfer.setData("bm-id", props.data.id); + // }} + > +
+ {favicon ? ( + Bookmark icon + ) : ( + {new URL(props.data.url!).hostname.charAt(0)} + )} + +
+ {props.data.title} + + {/*
*/} + {/* 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}*/} + {/* >*/} + {/*
*/} + {/*
*/} + {/* 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}*/} + {/* >*/} + {/*
*/} + {/*
*/} + {/* {*/} + {/* 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}*/} + {/* >*/} + {/* +*/} + {/*
*/} + {/*
*/} + + ); +} + +/** + * 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 diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx index 839a9f5..d1c1756 100644 --- a/extension/src/components/Bookmark.tsx +++ b/extension/src/components/Bookmark.tsx @@ -1,7 +1,9 @@ import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; -import GlobeIcon from "../assets/globe.svg" import React, {SyntheticEvent, useEffect} from "react"; import {getBrowser} from "../main.tsx"; +import {Settings} from "./Body.tsx"; +import ColorThief from 'colorthief' +import react from "@vitejs/plugin-react"; /** * A component for a single bookmark @@ -9,27 +11,51 @@ import {getBrowser} from "../main.tsx"; * @param props.data The BookmarkTreeNode with the data for the bookmark */ function Bookmark(props: {data: BookmarkTreeNode}) { - let [favicon, setFavicon] = React.useState(GlobeIcon); - let [isSmall, setSmall] = React.useState(true); + let [favicon, setFavicon] = React.useState(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) + useEffect(() => { - // faviconURL(props.data.url).then(o => o && setFavicon(o)) faviconURL(props.data).then(r => { if (r) { setFavicon(r) + setIconMode("small"); } }) }, []); + function handleImageLoad(e: SyntheticEvent) { + if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) { + setIconMode("large") + } else if(!bgColor) { + setBgColor(new ColorThief().getColor(e.currentTarget)) + } + } + return( - -
- Bookmark icon setSmall(e.currentTarget.naturalWidth < 75 && !favicon.startsWith("data:image/svg+xml"))} - > -
- {props.data.title} - + ); } @@ -42,12 +68,13 @@ function Bookmark(props: {data: BookmarkTreeNode}) { async function faviconURL(data: BookmarkTreeNode) { let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id]; if (i) return i + if (i == null) 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()) : GlobeIcon; + let imgData = resp.ok ? await toDataURL(url.toString()) : null; getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData}); return imgData; } @@ -64,4 +91,20 @@ function toDataURL(url:string):string { })) } +function djb2(str: string){ + var hash = 5381; + for (var i = 0; i < str.length; i++) { + hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */ + } + return hash; +} + +function hashStringToColor(str: string): [number, number, number] { + var hash = djb2(str); + var r = (hash & 0xFF0000) >> 16; + var g = (hash & 0x00FF00) >> 8; + var b = hash & 0x0000FF; + return [r, g, b]; +} + export default Bookmark; \ No newline at end of file diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx index 42e5d60..2b59d56 100644 --- a/extension/src/components/FolderButton.tsx +++ b/extension/src/components/FolderButton.tsx @@ -1,8 +1,9 @@ import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; import FolderBody from "./FolderBody.tsx"; -import folderIcon from "../assets/folder.svg" -import folderIconOpen from "../assets/folder_open.svg" +import FolderIcon from "../assets/folder.svg?react" +import FolderIconOpen from "../assets/folder_open.svg?react" import {useState} from "react"; +import bookmark from "./Bookmark.tsx"; /** * A component for the button used to open a bookmark folder. @@ -15,16 +16,18 @@ function FolderButton(props: {data: BookmarkTreeNode}) { return( <> - setFolderOpen(!folderOpen)}> -
- Folder icon -
- {props.data.title} - + {folderOpen - && props.data.children - && props.data.children.length > 0 - && ()} + && props.data.children + && props.data.children.length > 0 + && ()} ); } diff --git a/extension/src/components/SettingsEditor.tsx b/extension/src/components/SettingsEditor.tsx index edd99f9..d11158e 100644 --- a/extension/src/components/SettingsEditor.tsx +++ b/extension/src/components/SettingsEditor.tsx @@ -1,8 +1,9 @@ import RadioButtonGroup from "./RadioButtonGroup.tsx"; import React, {useContext} from "react"; -import imageUrl from "../assets/close.svg" +import CloseIcon from "../assets/close.svg?react" import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; import {Settings} from "./Body.tsx"; +import {getBrowser} from "../main.tsx"; /** * A component for the settings sidebar @@ -17,7 +18,7 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean, Rea return (

Settings

@@ -28,7 +29,6 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean, Rea }}> -
@@ -79,10 +79,9 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean, Rea )} - {/*
*/} - {/*sort: {settings.sort}*/} - {/*rootFolder: {settings.rootFolder}*/} - {/*bgmode: {settings.backgroundMode}*/} +

Icon Cache

+ +
) } diff --git a/extension/src/index.css b/extension/src/index.css index 6b3ba69..a85aeaf 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -79,11 +79,15 @@ body > .folderBody { /* Bookmark */ .bookmark { + padding: 10px; + position: relative; +} + +.bookmark > a { display: flex; flex-direction: column; width: 125px; padding: 10px; - margin: 10px; user-select: none; border-radius: 10px; } @@ -96,9 +100,21 @@ body > .folderBody { justify-content: center; } -.icon-box.small { +@property --icon-bg { + syntax: ""; + inherits: false; + initial-value: #ffffff14; +} + +.icon-box.small, .icon-box.letter { border-radius: 10px; - background-color: #ffffff14; + background-color: var(--icon-bg); +} + +.icon-box > span { + font-size: xx-large; + text-transform: capitalize; + font-weight: bold; } .icon-box > img { @@ -106,12 +122,17 @@ body > .folderBody { border-radius: 10px; } +.icon-box > svg { + width: 100%; + height: 100%; +} + .icon-box.small > img { width: 50%; border-radius: 5px; } -.bookmark > span { +.bookmark > a > span { text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -119,7 +140,7 @@ body > .folderBody { font-size: 12px; } -.bookmark:hover { +.bookmark > a:hover { background-color: rgba(0, 0, 0, 0.3); } @@ -128,7 +149,7 @@ a { text-decoration: none; } -#settings-close, #settings-button { +#settings-close { border-style: none; background: none; color: white; @@ -140,8 +161,100 @@ a { z-index: 2; } -#settings-close:hover, #settings-button:hover { - background-color: rgba(0, 0, 0, 0.3); +#action-area { + position: absolute; + top: 0; + right: 0; + z-index: 2; + gap: 5px; + margin: 5px; + display: flex; + flex-direction: row; + + button { + border-style: none; + background: none; + color: white; + } + + > * { + padding: 5px; + display: flex; + justify-content: center; + align-items: center; + } + + button:hover { + background-color: rgba(0, 0, 0, 0.3); + } +} + +/* Drop targets */ +.drop-targets { + pointer-events: none; + position: absolute; + top: 0; + /* bottom: 0; */ + left: 0; + right: 0; + height: 100%; + width: 100%; +} + +/*.drop-targets > *:hover {*/ +/* background-color: red;*/ +/*}*/ + +.drop-targets > .left { + position: absolute; + left: -2px; + height: 100%; + width: 30px; + display: flex; + justify-content: flex-start; + align-items: center; + + > div { + background-color: aqua; + height: 50%; + width: 4px; + } +} + +.drop-targets > .right { + position: absolute; + right: -2px; + height: 100%; + width: 30px; + display: flex; + justify-content: flex-end; + align-items: center; + + > div { + background-color: aqua; + width: 4px; + height: 50%; + } +} + +.drop-targets > .center { + position: absolute; + top: 0; + bottom: 0; + left: 30px; + right: 30px; + display: flex; + justify-content: center; + align-items: center; + + > span { + color: aqua; + font-size: 100px; + /* background-color: aqua; */ + /* aspect-ratio: 1 / 1; */ + /* height: 100px; */ + font-family: monospace; + } } diff --git a/extension/src/vite-env.d.ts b/extension/src/vite-env.d.ts index 11f02fe..fa3e1b9 100644 --- a/extension/src/vite-env.d.ts +++ b/extension/src/vite-env.d.ts @@ -1 +1,2 @@ /// +/// \ No newline at end of file -- cgit v1.2.3