populate widgets with actual bookmarks

5 files changed, 49 insertions, 2 deletions

diff --git a/bookmarks-home/src/Bookmark.tsx b/extension/src/Bookmark.tsx
index bb25e9e..d9652a4 100644
--- a/bookmarks-home/src/Bookmark.tsx
+++ b/extension/src/Bookmark.tsx
@@ -1,12 +1,13 @@
 interface BookmarkProps {
     name: string;
     url: string;
+    icon: string;
 }
 
 function Bookmark(props: BookmarkProps) {
     return(
         <a className="bookmark" href={props.url}>
-            <img alt="Bookmark icon" src={""}></img>
+            <img alt="Bookmark icon" src={props.icon}></img>
             <span>{props.name}</span>
         </a>
     );
diff --git a/bookmarks-home/src/Folder.tsx b/extension/src/Folder.tsx
index e831e62..e831e62 100644
--- a/bookmarks-home/src/Folder.tsx
+++ b/extension/src/Folder.tsx
diff --git a/bookmarks-home/src/index.css b/extension/src/index.css
index 0644da2..63a2a92 100644
--- a/bookmarks-home/src/index.css
+++ b/extension/src/index.css
@@ -4,7 +4,8 @@
   border-width: 2px;
   border-style: solid;
   border-color: black;
-  padding: 5px;
+  padding: 2px;
+  margin: 2px;
 }
 
 .folder > div {
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
new file mode 100644
index 0000000..36df6f6
--- /dev/null
+++ b/extension/src/main.tsx
@@ -0,0 +1,45 @@
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import Folder from "./Folder.tsx";
+import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
+import Bookmark from "./Bookmark.tsx";
+
+chrome.bookmarks.getTree((tree) => {
+    createRoot(document.getElementById('root')!).render(createFolder(tree[0]))
+});
+
+function createFolder(lev: BookmarkTreeNode) {
+    return (
+        <Folder name={lev.title}>
+            {
+                lev.children ? lev.children.map(item => {
+                    if (item.children) {
+                        return createFolder(item)
+                    } else {
+                        return <Bookmark name={item.title} url={item.url ? item.url : ""} icon={faviconURL(item.url)} />
+                    }
+                }) : <span>err</span>
+            }
+        </Folder>
+    )
+}
+
+function faviconURL(u: string | undefined) {
+    if (!u) {
+        return "";
+    }
+    u = new URL(u).origin.toString();
+    const url = new URL(chrome.runtime.getURL("/_favicon/"));
+    url.searchParams.set("pageUrl", u);
+    url.searchParams.set("size", "32");
+    console.log(u)
+    return url.toString();
+}
+
+
+// chrome.bookmarks.create(
+//     {'parentId': '0', 'title': 'Bookmarks Extension'},
+//     function (newFolder) {
+//         console.log("added folder: " + newFolder.title);
+//     },
+// );
\ No newline at end of file
diff --git a/bookmarks-home/src/vite-env.d.ts b/extension/src/vite-env.d.ts
index 11f02fe..11f02fe 100644
--- a/bookmarks-home/src/vite-env.d.ts
+++ b/extension/src/vite-env.d.ts