unelmacoin · unelmacoin · Jun 13, 2022 · Jun 9, 2022 · Jun 11, 2022 · Jun 12, 2022
diff --git a/bookmarks.html b/bookmarks.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link href="css/bookmarks.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/d127033893.js" crossorigin="anonymous"></script>
+    <title>Bookmarks</title>
+  </head>
+  <body>
+    <script src="bookmarks.js" type="module"></script>
+  </body>
+</html>
diff --git a/bookmarks.js b/bookmarks.js
@@ -0,0 +1,80 @@
+import { categorizeByDate } from "./utils/categorize.js";
+
+window.addEventListener("DOMContentLoaded", function () {
+  let bookmarks = document.createElement("div");
+  bookmarks.id = "bookmarks";
+
+ const categoriesList = document.createElement("ul");
+ categoriesList.id = "categories-list";
+ const searchHistoryArray = JSON.parse(
+   localStorage.getItem("search-history") || "[]"
+ );
+ const categories = categorizeByDate(searchHistoryArray);
+ console.log(categories);
+
+ const sortedKeys = Object.keys(categories).sort((a, b) => {
+   if (a.includes("Today")) return -1;
+   if (b.includes("Today")) return 1;
+   if (a.includes("Yesterday")) return -1;
+   if (b.includes("Yesterday")) return 1;
+   if (a.includes("Last 7 days")) return -1;
+   if (b.includes("Last 7 days")) return 1;
+   if (a.includes("Older")) return -1;
+   if (b.includes("Older")) return 1;
+   return 0;
+ });
+
+ sortedKeys.forEach((key) => {
+   const category = document.createElement("li");
+   category.className = "category";
+   const categoryTitle = document.createElement("h4");
+   categoryTitle.innerText = key;
+   category.appendChild(categoryTitle);
+   const categoryList = document.createElement("ul");
+   categoryList.className = "category-list";
+   categories[key].forEach((item) => {
+     let marks = document.createElement("ul");
+     marks.className = "marks";
+     const itemLi = document.createElement("li");
+     itemLi.className = "item";
+     const itemLink = document.createElement("a");
+     const time = document.createElement("div");
+     time.className = "time";
+     time.innerText = new Date(item.time).toLocaleTimeString();
+     let button = document.createElement("button");
+     button.innerHTML = "<i class='fa fa-times'></i>";
+     button.addEventListener("click", function () {
+       const sHistory = JSON.parse(
+         localStorage.getItem("bookmarks")
+       ).filter((i) => i.id !== item.id);
+       localStorage.setItem("bookmarks", JSON.stringify(sHistory));
+       itemLi.remove();
+       if (categoriesList.children.length === 0) {
+         let li = document.createElement("li");
+         li.textContent = "No Bookmarks";
+         categoriesList.appendChild(li);
+       }
+     });
+     itemLink.href = item.url;
+     itemLink.innerText = item.url.slice(
+       item.url.indexOf("//") + 2,
+       item.url.indexOf("/", item.url.indexOf("//") + 2)
+     );
+     itemLink.target = "_blank";
+     itemLi.appendChild(itemLink);
+     itemLi.appendChild(time);
+     itemLi.appendChild(button);
+     marks.appendChild(itemLi);
+     category.appendChild(marks);
+     categoriesList.appendChild(category);
+   });
+ });
+
+ if (categoriesList.children.length === 0) {
+   let li = document.createElement("li");
+   li.textContent = "No Bookmarks";
+   categoriesList.appendChild(li);
+ }
+ bookmarks.appendChild(categoriesList);
+ document.body.appendChild(bookmarks);
+});
diff --git a/components/BookmarkBtn.js b/components/BookmarkBtn.js
@@ -0,0 +1,24 @@
+const {
+  addBookmark,
+  getBookmarks,
+  removeFromBookmarks,
+} = require("../utils/handleLocalStorage");
+
+const BookmarkBtn = () => {
+  const bookmarkBtn = document.createElement("button");
+  bookmarkBtn.id = "bookmark-btn";
+  bookmarkBtn.innerHTML = '<i class="fa fa-star"></i>';
+  bookmarkBtn.addEventListener("click", function () {
+    bookmarkBtn.classList.toggle("active");
+    const bookmarks = getBookmarks();
+    const activeWebview = document.querySelector(".active-webview");
+    const url = activeWebview.src;
+    if (!bookmarks.find((item) => item.url === url)) {
+      addBookmark(url);
+    } else {
+      removeFromBookmarks(url);
+    }
+  });
+  return bookmarkBtn;
+};
+module.exports = BookmarkBtn;
diff --git a/components/LocationForm.js b/components/LocationForm.js
@@ -1,19 +1,19 @@
 const goToLocation = require("../utils/goToLocation");
 
 const LocationForm = () => {
+  const container = document.createElement("div");
   const locationForm = document.createElement("form");
-
+  container.classList.add("location-container");
   const location = document.createElement("input");
   locationForm.id = "location-form";
   location.id = "location-input";
   location.type = "text";
   location.value = "https://www.unelma.xyz/";
-
   locationForm.appendChild(location);
   locationForm.addEventListener("submit", (e) => {
     e.preventDefault();
     goToLocation(location);
   });
   return locationForm;
 };
-module.exports = LocationForm;
+module.exports = LocationForm;
diff --git a/components/Menu.js b/components/Menu.js
@@ -0,0 +1,48 @@
+const addTab = require("../utils/addTab");
+const { getCurrentTabs } = require("../utils/handleLocalStorage");
+
+const menuItems = [
+  {
+    name: "Bookmarks",
+    url: "bookmarks.html",
+    icon: "bookmark",
+  },
+  {
+    name: "History",
+    url: "history.html",
+    icon: "history",
+  },
+];
+
+const Menu = () => {
+  const menu = document.createElement("div");
+  menu.id = "menu";
+  const menuList = document.createElement("ul");
+  menuList.id = "menu-list";
+  const bookmarks = document.createElement("li");
+  bookmarks.id = "bookmarks";
+  menuItems.forEach((item) => {
+    const menuItem = document.createElement("li");
+    menuItem.classList.add("menu-item");
+    menuItem.innerHTML = `<i class="fa fa-${item.icon}"></i> ${item.name}`;
+    menuItem.addEventListener("click", () => {
+      menu.classList.remove("open");
+      const historyTab = getCurrentTabs().find(
+        (item) => item.url === "history.html"
+      );
+      const bookmarksTab = getCurrentTabs().find(
+        (item) => item.url === "bookmarks.html"
+      );
+      if (!historyTab && item.url === "history.html") {
+        addTab("history.html");
+      }
+      if (!bookmarksTab && item.url === "bookmarks.html") {
+        addTab("bookmarks.html");
+      }
+    });
+    menuList.appendChild(menuItem);
+  });
+  menu.appendChild(menuList);
+  return menu;
+};
+module.exports = Menu;
diff --git a/components/MenuButton.js b/components/MenuButton.js
@@ -0,0 +1,11 @@
+const MenuButton = () => {
+  const menuButton = document.createElement("div");
+  menuButton.id = "menu-button";
+  menuButton.innerHTML = '<i class="fa fa-ellipsis"></i>';
+  menuButton.addEventListener("click", () => {
+    const menu = document.getElementById("menu");
+    menu.classList.toggle("open");
+  });
+  return menuButton;
+};
+module.exports = MenuButton;
diff --git a/components/NavigationControls.js b/components/NavigationControls.js
@@ -9,7 +9,7 @@ const NavigationControls = () => {
   navigationControlsForward.innerHTML = '<i class="fa fa-arrow-right"></i>';
   const navigationControlsReload = document.createElement("button");
   navigationControlsReload.id = "navigation-controls-reload";
-  navigationControlsReload.innerHTML = '<i class="fa fa-refresh"></i>';
+  navigationControlsReload.innerHTML = '<i class="fa fa-rotate-right"></i>';
   navigationControls.appendChild(navigationControlsBack);
   navigationControls.appendChild(navigationControlsForward);
   navigationControls.appendChild(navigationControlsReload);

diff --git a/components/Sidebar.js b/components/Sidebar.js
@@ -1,4 +1,7 @@
+const BookmarkBtn = require("./BookmarkBtn");
 const LocationForm = require("./LocationForm");
+const Menu = require("./Menu");
+const MenuButton = require("./MenuButton");
 const NavigationControls = require("./NavigationControls");
 const TabsList = require("./TabsList");
 const WindowControllers = require("./WindowControllers");
@@ -8,10 +11,13 @@ const Sidebar = () => {
     appSidebar.id = "app-sidebar";
   const controllers = document.createElement("div");
     controllers.id = "controllers";
-  controllers.appendChild(WindowControllers());
-  controllers.appendChild(NavigationControls());
+    controllers.appendChild(MenuButton());
+    controllers.appendChild(WindowControllers());
+    controllers.appendChild(BookmarkBtn());
+    controllers.appendChild(NavigationControls());
   appSidebar.appendChild(controllers);
   appSidebar.appendChild(LocationForm());
+  appSidebar.appendChild(Menu());
   appSidebar.appendChild(TabsList());
   return appSidebar;
 };

diff --git a/components/Tab.js b/components/Tab.js
@@ -1,11 +1,15 @@
 const { ipcRenderer } = require("electron");
+const {
+  setCurrentTabs,
+  getCurrentTabs,
+  getBookmarks,
+} = require("../utils/handleLocalStorage");
 const Tab = (input, id) => {
   const tab = document.createElement("div");
   const tabContent = document.createElement("div");
   const closeTab = document.createElement("button");
   tab.classList.add("tab");
   tab.id = `tab-${id}`;
-  setTimeout(() => (tabContent.textContent = "Unelma Search"), 300);
   closeTab.innerHTML = "&#10006;";
   tabContent.classList.add("content");
   closeTab.classList.add("close");
@@ -19,13 +23,22 @@ const Tab = (input, id) => {
     [...document.querySelectorAll(".active-webview")].forEach((t) => {
       t.classList.remove("active-webview");
     });
-   
+
     const currentView = document.getElementById(`webview-${id}`);
     tab.classList.add("active-tab");
     currentView.classList.add("active-webview");
-     input.value = currentView.getURL();
+
+    input.value = currentView.getURL();
+     const bookmarks = getBookmarks();
+     const bookmarkBtn = document.getElementById("bookmark-btn");
+     if (bookmarks.find((item) => item.url === input.value))
+       bookmarkBtn.classList.add("active");
+     else bookmarkBtn.classList.remove("active");
   });
   closeTab.addEventListener("click", function () {
+    const currentTabs = getCurrentTabs();
+    const newTabs = currentTabs.filter((tab) => tab.id !== id);
+    setCurrentTabs(newTabs);
     const tabs = document.getElementById("actual-tabs").children;
     if (tabs.length === 1) {
       ipcRenderer.send("close-window");
@@ -34,7 +47,6 @@ const Tab = (input, id) => {
       const tabIndex = [...tabs].findIndex((t) => t.id.endsWith(id));
       const viewIndex = [...views].findIndex((t) => t.id.endsWith(id));
       if (tab.classList.contains("active-tab")) {
-
         tabs[tabIndex].remove();
         views[viewIndex].remove();
         tabs[tabIndex === 0 ? tabIndex + 1 : tabIndex - 1].classList.add(
@@ -48,6 +60,11 @@ const Tab = (input, id) => {
         views[viewIndex].remove();
       }
     }
+    const bookmarks = getBookmarks();
+    const bookmarkBtn = document.getElementById("bookmark-btn");
+    if (bookmarks.find((item) => item.url === input.value))
+      bookmarkBtn.classList.add("active");
+    else bookmarkBtn.classList.remove("active");
   });
   return tab;
 };

diff --git a/components/TopBar.js b/components/TopBar.js
@@ -0,0 +1,30 @@
+const handleMaximization = require("../utils/handleMaximization");
+const TopBar = () => {
+  const topBar = document.createElement("div");
+  topBar.classList.add("top-bar");
+  const windowControlsClose = document.createElement("button");
+  windowControlsClose.id = "window-controls-close";
+  windowControlsClose.innerHTML = '<i class="fa fa-times"></i>';
+  const windowControlsMinimize = document.createElement("button");
+  windowControlsMinimize.id = "window-controls-minimize";
+  windowControlsMinimize.innerHTML = '<i class="fa fa-minus"></i>';
+  const windowControlsMaximize = document.createElement("button");
+  windowControlsMaximize.id = "window-controls-maximize";
+  windowControlsMaximize.innerHTML = '<i class="fa fa-expand"></i>';
+
+  const windowControlsUnmaximize = document.createElement("button");
+  windowControlsUnmaximize.id = "window-controls-unmaximize";
+  windowControlsUnmaximize.innerHTML = '<i class="fa fa-compress"></i>';
+  handleMaximization(
+    windowControlsUnmaximize,
+    windowControlsMaximize,
+    windowControlsClose,
+    windowControlsMinimize
+  );
+  topBar.appendChild(windowControlsMinimize);
+  topBar.appendChild(windowControlsMaximize);
+  topBar.appendChild(windowControlsUnmaximize);
+  topBar.appendChild(windowControlsClose);
+  return topBar;
+};
+module.exports = TopBar;
diff --git a/components/Webview.js b/components/Webview.js
@@ -17,14 +17,17 @@ const Webview = (id, url) => {
     const currentTab = document.getElementById(`tab-${id}`);
     currentTab.children[0].textContent = "Loading...";
   });
+
   webview.addEventListener("did-finish-load", () => {
     const currentTab = document.getElementById(`tab-${id}`);
-    currentTab.children[0].textContent = webview.getTitle()
+    currentTab.children[0].textContent = webview.getTitle();
+
   });
   webview.addEventListener("did-frame-finish-load", () => {
     const currentTab = document.getElementById(`tab-${id}`);
     currentTab.children[0].textContent = webview.getTitle();
      document.getElementById("location-input").value = webview.getURL();
+
   });
   return webview;
 };

diff --git a/components/WindowControllers.js b/components/WindowControllers.js
@@ -1,36 +1,11 @@
-const handleMaximization = require("../utils/handleMaximization");
-
 const WindowControllers = () => {
   const windowControls = document.createElement("div");
-  windowControls.id = "window-controllers";
-  const windowControlsClose = document.createElement("button");
-  windowControlsClose.id = "window-controls-close";
-  windowControlsClose.innerHTML = '<i class="fa fa-times"></i>';
-  const windowControlsMinimize = document.createElement("button");
-  windowControlsMinimize.id = "window-controls-minimize";
-  windowControlsMinimize.innerHTML = '<i class="fa fa-minus"></i>';
-  const windowControlsMaximize = document.createElement("button");
-  windowControlsMaximize.id = "window-controls-maximize";
-  windowControlsMaximize.innerHTML = '<i class="fa fa-expand"></i>';
-
-  const windowControlsUnmaximize = document.createElement("button");
-  windowControlsUnmaximize.id = "window-controls-unmaximize";
-  windowControlsUnmaximize.innerHTML = '<i class="fa fa-compress"></i>';
-
-  windowControls.appendChild(windowControlsClose);
-  windowControls.appendChild(windowControlsMinimize);
-  windowControls.appendChild(windowControlsMaximize);
-  windowControls.appendChild(windowControlsUnmaximize);
+  windowControls.id = "window-controllers"
   const toggleBtn = document.createElement("button");
   toggleBtn.id = "toggle-btn";
   toggleBtn.innerHTML = '<img src="img/sidebar.png" alt="toggle" />';
   windowControls.appendChild(toggleBtn);
-  handleMaximization(
-    windowControlsUnmaximize,
-    windowControlsMaximize,
-    windowControlsClose,
-    windowControlsMinimize
-  );
+
   toggleBtn.addEventListener("click", () => {
     const sidebar = document.getElementById("app-sidebar");
     if (!sidebar.classList.contains("toggled-sidebar")) {