Merge pull request #4 from unelmacoin/feature/bookmarks-histroty

Feature/bookmarks histroty
unelmacoin · Jun 13, 2022 · 2b9a3cb · 2b9a3cb
2 parents 99f9095 + 3501178
commit 2b9a3cb
Showing 30 changed files with 765 additions and 2,423 deletions.
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")) {

diff --git a/css/bookmarks.css b/css/bookmarks.css
@@ -0,0 +1,79 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: Lucida Grande, Arial, sans-serif;
+  background-color: transparent;
+}
+body::-webkit-scrollbar {
+  width: 0px;
+}
+button,
+input {
+  outline: none;
+  border: 0;
+  background: none;
+}
+button {
+  cursor: pointer;
+}
+a {
+  text-decoration: none;
+  color: rgb(73, 87, 107);
+  display: block;
+    width: 200px;
+}
+ul {
+  list-style: none;
+}
+#bookmarks {
+  border-radius: 7px;
+  display: flex;
+  padding: 30px;
+  width: 100%;
+}
+#categories-list {
+  width: 100%;
+}
+#bookmarks .category {
+  display: flex;
+  list-style: none;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid rgba(216, 220, 226, 0.37);
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  margin-bottom: 20px;
+}
+#bookmarks .category-list > li {
+  display: flex;
+  list-style: none;
+  flex-direction: column;
+  width: 100%;
+  padding: 15px 10px;
+  margin-bottom: 10px;
+}
+.history {
+  width: 100%;
+}
+.item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+
+}
+h4 {
+  border-bottom: 1px solid rgba(211, 211, 211, 0.575);
+  padding: 20px;
+  margin-bottom: 10px;
+  text-transform: capitalize;
+}
+.time {
+  font-weight: bold;
+  font-size: 14px;
+}
diff --git a/css/font-awesome.css b/css/font-awesome.css
diff --git a/css/history.css b/css/history.css
@@ -0,0 +1,79 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: Lucida Grande, Arial, sans-serif;
+  background-color: transparent;
+}
+body::-webkit-scrollbar {
+  width: 0px;
+}
+button,
+input {
+  outline: none;
+  border: 0;
+  background: none;
+}
+button {
+  cursor: pointer;
+}
+a {
+  text-decoration: none;
+  color: rgb(73, 87, 107);
+  display: block;
+    width: 200px;
+}
+ul {
+  list-style: none;
+}
+#search-history {
+  border-radius: 7px;
+  display: flex;
+  padding: 30px;
+  width: 100%;
+}
+#categories-list {
+  width: 100%;
+}
+#search-history .category {
+  display: flex;
+  list-style: none;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid rgba(216, 220, 226, 0.37);
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  margin-bottom: 20px;
+}
+#search-history .category-list > li {
+  display: flex;
+  list-style: none;
+  flex-direction: column;
+  width: 100%;
+  padding: 15px 10px;
+  margin-bottom: 10px;
+}
+.history {
+  width: 100%;
+}
+.item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+
+}
+h4 {
+  border-bottom: 1px solid rgba(211, 211, 211, 0.575);
+  padding: 20px;
+  margin-bottom: 10px;
+  text-transform: capitalize;
+}
+.time {
+  font-weight: bold;
+  font-size: 14px;
+}
diff --git a/css/styles.css b/css/styles.css
@@ -21,6 +21,7 @@ webview {
 }
 
 #root {
+  position: relative;
   background: rgb(193, 194, 250);
   background: linear-gradient(
     90deg,
@@ -29,18 +30,48 @@ webview {
     rgba(240, 240, 178, 1) 100%
   );
   border-radius: 7px;
-  padding: 35px 10px 10px;
+  padding: 40px 10px 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   -webkit-app-region: drag;
   -webkit-user-select: none;
   user-select: none;
 }
+.top-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  border-radius: inherit;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.top-bar button {
+  background-color: rgba(0, 0, 0, 0.1);
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  font-size: 8px;
+  color: transparent;
+  margin: 0 4px;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+}
+
+.top-bar button:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
 #root #app-sidebar {
   -webkit-app-region: no-drag;
+  position: relative;
   border-radius: inherit;
-  width: 17%;
+  width: 20%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -58,6 +89,7 @@ webview {
   display: flex;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
 }
 #root #app-sidebar.toggled-sidebar #controllers {
   flex-direction: column;
@@ -72,28 +104,6 @@ webview {
   flex-direction: column;
 }
 
-#root #app-sidebar #controllers #window-controllers button:not(#toggle-btn) {
-  background-color: rgba(0, 0, 0, 0.1);
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  font-size: 8px;
-  color: transparent;
-  margin: 0 4px;
-  cursor: pointer;
-}
-#root #app-sidebar.toggled-sidebar #window-controllers button:not(#toggle-btn) {
-  margin: 4px 0 !important;
-}
-
-#root
-  #app-sidebar
-  #controllers
-  #window-controllers
-  button:not(#toggle-btn):hover {
-  color: rgba(255, 255, 255, 0.7);
-}
-
 #root #app-sidebar #controllers #toggle-btn {
   margin: 0 10px;
   display: flex;
@@ -117,19 +127,57 @@ webview {
   flex-direction: column;
 }
 #root #app-sidebar #navigation-controllers button {
-  font-size: 12px;
-  margin: 0 6px;
+  font-size: 16px;
+  margin-left: 17px;
+  margin-right: 2px;
   color: rgba(51, 51, 51, 0.67);
   cursor: pointer;
 }
+#menu-button {
+  margin: 0 5px;
+  color: rgba(51, 51, 51, 0.67);
+  cursor: pointer;
+  font-size: 18px;
+}
+
+#menu {
+  width: 200px;
+  border-radius: 7px;
+  background-color: #fff;
+  padding: 20px 0;
+  position: absolute;
+  top: 30px;
+  left: 0;
+  transform: scale(0, 0);
+  transition: 0.3s;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+#menu .menu-item {
+  display: flex;
+  align-items: center;
+  padding: 14px 10px;
+  color: rgb(72, 82, 97);
+  cursor: pointer;
+}
+#menu .menu-item:hover {
+  background-color: rgba(211, 211, 211, 0.205);
+}
+#menu .menu-item i {
+  margin-right: 10px;
+}
+#menu.open {
+  transform: scale(1, 1);
+}
+
 #root #app-sidebar #location-form {
   margin: 20px 0;
   display: flex;
   align-items: center;
   width: 100%;
+  justify-content: space-between;
 }
 #root #app-sidebar.toggled-sidebar #navigation-controllers button {
-  margin: 6px 0;
+  margin: 10px 0;
 }
 #root #app-sidebar.toggled-sidebar #location-form {
   display: none;
@@ -143,6 +191,18 @@ webview {
   font-size: 13px;
   color: rgba(51, 51, 51, 0.699);
 }
+#root #app-sidebar .location-container button {
+  padding: 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: rgba(51, 51, 51, 0.699);
+  cursor: pointer;
+}
+.location-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 #root #app-sidebar #location-form input::placeholder {
   color: rgba(51, 51, 51, 0.699);
   font-size: 13px;
@@ -235,12 +295,28 @@ input {
 #webviews-container {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   border-radius: 7px;
-  width: 82%;
+  width: 78%;
   height: 100%;
   overflow: hidden;
   -webkit-app-region: no-drag;
   transition: 0.3s;
 }
 #webviews-container.toggled-container {
-  width: 96%;
+  width: 95%;
+}
+#options-bar {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+#bookmark-btn {
+  margin: 0 5px;
+  cursor: pointer;
+  color: rgba(51, 51, 51, 0.637);
+}
+#bookmark-btn.active {
+  color: gold !important;
 }
+#root #app-sidebar.toggled-sidebar  #bookmark-btn {
+  margin: 10px 0;
+}
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2
diff --git a/history.html b/history.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/history.css" rel="stylesheet" />
+    <title>History</title>
+    <script src="https://kit.fontawesome.com/d127033893.js" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <script src="history.js" type="module"></script>
+  </body>
+</html>
diff --git a/history.js b/history.js
@@ -0,0 +1,80 @@
+import { categorizeByDate } from "./utils/categorize.js";
+
+window.addEventListener("DOMContentLoaded", function () {
+  const searchHistory = document.createElement("div");
+  searchHistory.id = "search-history";
+
+  const categoriesList = document.createElement("ul");
+  categoriesList.id = "categories-list";
+  history.className = "history";
+  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) => {
+      const history = document.createElement("ul");
+      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("search-history")
+        ).filter((i) => i.id !== item.id);
+        localStorage.setItem("search-history", JSON.stringify(sHistory));
+        itemLi.remove();
+        if (categoriesList.children.length === 0) {
+          let li = document.createElement("li");
+          li.textContent = "No search history";
+          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);
+      history.appendChild(itemLi);
+      category.appendChild(history);
+      categoriesList.appendChild(category);
+    });
+  });
+
+  if (categoriesList.children.length === 0) {
+    let li = document.createElement("li");
+    li.textContent = "No search history";
+    categoriesList.appendChild(li);
+  }
+  searchHistory.appendChild(categoriesList);
+  document.body.appendChild(searchHistory);
+});
diff --git a/index.html b/index.html
@@ -5,11 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link href="css/styles.css" rel="stylesheet" />
-    <link href="css/font-awesome.css" rel="stylesheet" />
     <title>Unelma.XYZ - Browser</title>
+    <script src="https://kit.fontawesome.com/d127033893.js" crossorigin="anonymous"></script>
     <script src="script.js" type="module"></script>
+
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+    </div>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -52,9 +52,9 @@ function createWindow() {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on("web-contents-created", function (webContentsCreatedEvent, contents) {
+app.on("web-contents-created", function (_, contents) {
   if (contents.getType() === "webview") {
-    contents.addListener("new-window", function (newWindowEvent, url) {
+    contents.addListener("new-window", function (newWindowEvent, _) {
       newWindowEvent.preventDefault();
     });
   }

diff --git a/script.js b/script.js
@@ -1,5 +1,7 @@
 const Sidebar = require("./components/Sidebar");
 const addTab = require("./utils/addTab");
+const TopBar = require("./components/TopBar");
+const { getCurrentTabs } = require("./utils/handleLocalStorage");
 
 window.addEventListener("DOMContentLoaded", function () {
   const root = document.getElementById("root");
@@ -10,6 +12,7 @@ window.addEventListener("DOMContentLoaded", function () {
   const sidebar = Sidebar();
   root.appendChild(sidebar);
   root.appendChild(content);
+  root.appendChild(TopBar());
   const controllers = document.getElementById("controllers");
   const actualTabs = document.getElementById("actual-tabs");
   const LocationForm = document.getElementById("location-form");
@@ -28,5 +31,13 @@ window.addEventListener("DOMContentLoaded", function () {
       115
     }px`;
   });
-  addTab();
+  const currentTabs = getCurrentTabs();
+  if (currentTabs.length === 0) {
+    addTab();
+  } else {
+    currentTabs.forEach((tab) => {
+      addTab(tab.url, true, tab.id);
+    });
+  }
+
 });
diff --git a/styles.css b/styles.css
@@ -36,7 +36,7 @@ strong,
 sub,
 sup,
 tt,
-var,
+let,
 b,
 u,
 i,

diff --git a/utils/addTab.js b/utils/addTab.js
@@ -1,9 +1,15 @@
 const Tab = require("../components/Tab");
 const Webview = require("../components/Webview");
-
-const addTab = (passedURL) => {
+const {
+  getCurrentTabs,
+  setCurrentTabs,
+  getBookmarks,
+  addHistory,
+} = require("./handleLocalStorage");
+const newId = () => Math.round(Math.random() * 10000 * Math.random());
+const addTab = (passedURL, isNew, oldId) => {
+  const id = oldId || newId();
   const url = passedURL ? passedURL : "https://www.unelma.xyz/";
-  const id = Math.round(Math.random() * 10000 * Math.random());
   const tabs = document.getElementById("actual-tabs");
   const views = document.getElementById("webviews-container");
   const locationInput = document.getElementById("location-input");
@@ -18,12 +24,37 @@ const addTab = (passedURL) => {
     });
     newTab.classList.add("active-tab");
     newWebview.classList.add("active-webview");
-     newWebview.addEventListener("new-window", (e) => {
-       addTab(e.url);
-     });
+
+    const currentTabs = getCurrentTabs();
+    currentTabs.push({ id, url });
+    if (!isNew) setCurrentTabs(currentTabs);
+    newWebview.addEventListener("new-window", (e) => {
+      addTab(e.url);
+    });
     tabs.appendChild(newTab);
     views.appendChild(newWebview);
+
+    newWebview.addEventListener("dom-ready", () => {
+      if (
+        url.endsWith("history.html") ||
+        url.endsWith("bookmarks.html")
+      ) {
+        newWebview.executeJavaScript(
+          "window.localStorage.setItem('search-history', JSON.stringify(JSON.parse(localStorage.getItem('search-history')||'[]')));"
+        );
+        newWebview.executeJavaScript(
+          "window.localStorage.setItem('bookmarks', JSON.stringify(JSON.parse(localStorage.getItem('bookmarks')||'[]')));"
+        );
+      }
+    });
+    const bookmarks = getBookmarks();
+    const bookmarkBtn = document.getElementById("bookmark-btn");
+    if (bookmarks.find((item) => item.url === url))
+      bookmarkBtn.classList.add("active");
+    else bookmarkBtn.classList.remove("active");
+
     locationInput.value = url;
   }
+  addHistory(url);
 };
 module.exports = addTab;
diff --git a/utils/categorize.js b/utils/categorize.js
@@ -0,0 +1,32 @@
+export function categorizeByDate(arr) {
+  const categories = arr.reverse().reduce((acc, item) => {
+    const date = new Date(item.time);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+    const older = new Date(today);
+    older.setDate(today.getDate() - 7);
+    const category =
+      date.getTime() > today.getTime()
+        ? `Today - ${date.toDateString()}`
+        : date.getTime() > yesterday.getTime()
+        ? `Yesterday - ${date.toDateString()}`
+        : date.getTime() > older.getTime()
+        ? `Last 7 days`
+        : `Older`;
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(item);
+    return acc;
+  }, {});
+
+  let sortedCategories = {};
+  //put key  contains today first
+  //put key  contains yesterday second
+  //put key  contains last 7 days third
+  //put key  contains older last
+
+  return categories;
+}
diff --git a/utils/goToLocation.js b/utils/goToLocation.js
@@ -1,9 +1,25 @@
+const {
+  setCurrentTabs,
+  getBookmarks,
+  addHistory,
+} = require("./handleLocalStorage");
 const handleSearch = require("./handleSearch");
 
 const goToLocation = (input) => {
   const activeWebview = document.querySelector(".active-webview");
+  const id = +activeWebview.id.split("-")[1];
   activeWebview.src = handleSearch(input.value);
   input.value = handleSearch(input.value);
+  const currentTabs = JSON.parse(localStorage.getItem("current-tabs"));
+  const indexOfCurrentTab = currentTabs.findIndex((tab) => tab.id === id);
+  currentTabs[indexOfCurrentTab].url = handleSearch(input.value);
+  setCurrentTabs(currentTabs);
+  addHistory(handleSearch(input.value));
+  const bookmarks = getBookmarks();
+  const bookmarkBtn = document.getElementById("bookmark-btn");
+  if (bookmarks.find((item) => item.url === handleSearch(input.value)))
+    bookmarkBtn.classList.add("active");
+  else bookmarkBtn.classList.remove("active");
 };
 
 module.exports = goToLocation;
diff --git a/utils/handleLocalStorage.js b/utils/handleLocalStorage.js
@@ -0,0 +1,58 @@
+const newId = () => Math.round(Math.random() * 10000 * Math.random());
+const dateTime = () => new Date(Date.now())
+module.exports = {
+  getCurrentTabs: () => {
+    return JSON.parse(localStorage.getItem("current-tabs") || "[]");
+  },
+  setCurrentTabs: (tabs) => {
+    localStorage.setItem("current-tabs", JSON.stringify(tabs));
+  },
+  getSearchHistory: () => {
+    return JSON.parse(localStorage.getItem("search-history") || "[]");
+  },
+  setSearchHistory: (history) => {
+    localStorage.setItem("search-history", JSON.stringify(history));
+  },
+  addHistory: (url) => {
+    let history = JSON.parse(localStorage.getItem("search-history") || "[]");
+    if (
+      url !== "https://www.unelma.xyz/" &&
+      !url.includes("history.html") &&
+      !url.includes("bookmarks.html") &&
+      !history.find((item) => item.url === url)
+    ) {
+      const id = newId();
+      history.push({ id, url, time: dateTime() });
+      localStorage.setItem("search-history", JSON.stringify(history));
+    }
+  },
+  getBookmarks: () => {
+    return JSON.parse(localStorage.getItem("bookmarks") || "[]");
+  },
+  setBookmarks: (marks) => {
+    localStorage.setItem("bookmarks", JSON.stringify(marks));
+  },
+  addBookmark: (url) => {
+    let bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "[]");
+    if (
+      !bookmarks.find((item) => item.url === url) &&
+      !url.endsWith("bookmarks.html") &&
+      !url.endsWith("history.html")
+    ) {
+      const id = newId();
+      bookmarks.push({ id, url, time: dateTime() });
+      localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+    }
+  },
+  removeFromBookmarks: (url) => {
+    let bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "[]");
+    bookmarks = bookmarks.filter((item) => item.url !== url);
+    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+  },
+  removeFromSearchHistroy: (url) => {
+    let history = JSON.parse(localStorage.getItem("bookmarks") || "[]");
+
+    history = history.filter((item) => item.url !== url);
+    localStorage.setItem("search-history", JSON.stringify(history));
+  },
+};
diff --git a/utils/handleSearch.js b/utils/handleSearch.js
@@ -1,4 +1,3 @@
-// create function to validate url
 const isURL = (url) => {
   const urlRegex =
     /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
-Original file line number
+Diff line change
@@ @@ -36,7 +36,7 @@ strong, @@
     sub,
     sup,
     tt,
-    var,
+    let,
     b,
     u,
     i,