From eb055e9ff0ddd840d880fd60e032d06aa7d58fa8 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Thu, 4 Jun 2020 18:16:13 +0200
Subject: [PATCH 01/11] feat: added bookmark icon on the sidepane

Handles #37
---
 .../app/components/BookmarksDrawer/index.js    |  9 +++++++++
 .../app/components/BookmarksDrawer/styles.css  |  4 ++++
 desktop-app/app/components/Drawer/index.js     |  5 ++++-
 .../app/components/LeftIconsPane/index.js      | 14 ++++++++++++++
 desktop-app/app/constants/DrawerContents.js    |  1 +
 .../app/containers/BookmarksContainer/index.js | 18 ++++++++++++++++++
 yarn.lock                                      |  4 ++++
 7 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 desktop-app/app/components/BookmarksDrawer/index.js
 create mode 100644 desktop-app/app/components/BookmarksDrawer/styles.css
 create mode 100644 desktop-app/app/containers/BookmarksContainer/index.js
 create mode 100644 yarn.lock

diff --git a/desktop-app/app/components/BookmarksDrawer/index.js b/desktop-app/app/components/BookmarksDrawer/index.js
new file mode 100644
index 00000000..5f833c2b
--- /dev/null
+++ b/desktop-app/app/components/BookmarksDrawer/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function BookmarksDrawer(props) {
+  return (
+    <div>
+      Hello World
+    </div>
+  );
+}
diff --git a/desktop-app/app/components/BookmarksDrawer/styles.css b/desktop-app/app/components/BookmarksDrawer/styles.css
new file mode 100644
index 00000000..5b879604
--- /dev/null
+++ b/desktop-app/app/components/BookmarksDrawer/styles.css
@@ -0,0 +1,4 @@
+.label {
+  font-size: 14px;
+  margin-bottom: 5px;
+}
diff --git a/desktop-app/app/components/Drawer/index.js b/desktop-app/app/components/Drawer/index.js
index 96b7eff4..5f190d56 100644
--- a/desktop-app/app/components/Drawer/index.js
+++ b/desktop-app/app/components/Drawer/index.js
@@ -2,12 +2,13 @@
 import React from 'react';
 import {makeStyles} from '@material-ui/core/styles';
 import DeviceDrawerContainer from '../../containers/DeviceDrawerContainer';
+import BookmarksContainer from '../../containers/BookmarksContainer';
 import UserPreferencesContainer from '../../containers/UserPreferencesContainer';
 import cx from 'classnames';
 
 import styles from './styles.css';
 import commonStyles from '../common.styles.css';
-import {DEVICE_MANAGER, USER_PREFERENCES} from '../../constants/DrawerContents';
+import {DEVICE_MANAGER, BOOKMARKS, USER_PREFERENCES} from '../../constants/DrawerContents'
 import {iconsColor} from '../../constants/colors';
 import DoubleLeftArrowIcon from '../icons/DoubleLeftArrow';
 
@@ -63,6 +64,8 @@ function getDrawerContent(type) {
       return <DeviceDrawerContainer />;
     case USER_PREFERENCES:
       return <UserPreferencesContainer />;
+    case BOOKMARKS:
+      return <BookmarksContainer />;
   }
 }
 
diff --git a/desktop-app/app/components/LeftIconsPane/index.js b/desktop-app/app/components/LeftIconsPane/index.js
index cbca0225..91aef4a4 100644
--- a/desktop-app/app/components/LeftIconsPane/index.js
+++ b/desktop-app/app/components/LeftIconsPane/index.js
@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid';
 import Logo from '../icons/Logo';
 import DevicesIcon from '@material-ui/icons/Devices';
 import SettingsIcon from '@material-ui/icons/Settings';
+import FavIcon from '@material-ui/icons/Star';
 import PhotoLibraryIcon from '@material-ui/icons/PhotoLibraryOutlined';
 import cx from 'classnames';
 
@@ -13,6 +14,7 @@ import commonStyles from '../common.styles.css';
 import {iconsColor} from '../../constants/colors';
 import {
   DEVICE_MANAGER,
+  BOOKMARKS,
   SCREENSHOT_MANAGER,
   USER_PREFERENCES,
 } from '../../constants/DrawerContents';
@@ -67,6 +69,18 @@ const LeftIconsPane = props => {
             <SettingsIcon {...iconProps} className="settingsIcon" />
           </div>
         </Grid>
+        <Grid
+          item
+          className={cx(commonStyles.icons, styles.icon, commonStyles.enabled, {
+            [commonStyles.selected]:
+            props.drawer.open && props.drawer.content === BOOKMARKS,
+          })}
+          onClick={() => toggleState(BOOKMARKS)}
+        >
+          <div>
+            <FavIcon {...iconProps} className="favIcon" />
+          </div>
+        </Grid>
       </Grid>
       <div style={{position: 'relative'}}>
         <div
diff --git a/desktop-app/app/constants/DrawerContents.js b/desktop-app/app/constants/DrawerContents.js
index c61013a6..b34cae90 100644
--- a/desktop-app/app/constants/DrawerContents.js
+++ b/desktop-app/app/constants/DrawerContents.js
@@ -1,3 +1,4 @@
 export const DEVICE_MANAGER = 'DEVICE_MANAGER';
 export const SCREENSHOT_MANAGER = 'SCREENSHOT_MANAGER';
 export const USER_PREFERENCES = 'USER_PREFERENCES';
+export const BOOKMARKS = 'BOOKMARKS';
diff --git a/desktop-app/app/containers/BookmarksContainer/index.js b/desktop-app/app/containers/BookmarksContainer/index.js
new file mode 100644
index 00000000..422434ff
--- /dev/null
+++ b/desktop-app/app/containers/BookmarksContainer/index.js
@@ -0,0 +1,18 @@
+// @flow
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import BookmarksDrawer from '../../components/BookmarksDrawer';
+import * as BrowserActions from '../../actions/browser';
+
+function mapStateToProps(state) {
+  return {
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(BrowserActions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BookmarksDrawer);
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000..fb57ccd1
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

From d3a51ce72feba60d06143f2193093c2e98e1e7ea Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Thu, 4 Jun 2020 20:11:44 +0200
Subject: [PATCH 02/11] feat: bookmark store

---
 desktop-app/app/actions/browser.js            |  9 +++++++
 .../app/components/Addressinput/index.js      | 20 ++++++++++++++
 .../app/components/BookmarksDrawer/index.js   | 27 ++++++++++++++++---
 desktop-app/app/constants/settingKeys.js      |  1 +
 .../app/containers/AddressBar/index.js        |  1 +
 .../containers/BookmarksContainer/index.js    |  1 +
 desktop-app/app/reducers/browser.js           | 26 ++++++++++++++++--
 desktop-app/app/utils/navigatorUtils.js       |  1 +
 8 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
index d8460945..00ed5ba6 100644
--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@@ -26,6 +26,7 @@ export const NEW_CUSTOM_DEVICE = 'NEW_CUSTOM_DEVICE';
 export const DELETE_CUSTOM_DEVICE = 'DELETE_CUSTOM_DEVICE';
 export const NEW_FILTERS = 'NEW_FILTERS';
 export const NEW_USER_PREFERENCES = 'NEW_USER_PREFERENCES';
+export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
 
 export function newAddress(address) {
   return {
@@ -428,3 +429,11 @@ export function reloadCSS() {
     pubsub.publish(RELOAD_CSS);
   };
 }
+
+export function toggleBookmark(url) {
+  console.log('URRRRLR', url)
+  return {
+    type: TOGGLE_BOOKMARK,
+    url,
+  };
+}
diff --git a/desktop-app/app/components/Addressinput/index.js b/desktop-app/app/components/Addressinput/index.js
index f895f509..720a235c 100644
--- a/desktop-app/app/components/Addressinput/index.js
+++ b/desktop-app/app/components/Addressinput/index.js
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import HomePlusIcon from '../icons/HomePlus';
 import DeleteCookieIcon from '../icons/DeleteCookie';
 import DeleteStorageIcon from '../icons/DeleteStorage';
+import FavIcon from '@material-ui/icons/StarBorder';
 import {iconsColor} from '../../constants/colors';
 
 import commonStyles from '../common.styles.css';
@@ -57,6 +58,25 @@ class AddressBar extends React.Component<Props> {
           onChange={e => this.setState({userTypedAddress: e.target.value})}
         />
         <div className={cx(styles.floatingOptionsContainer)}>
+          <div
+            className={cx(commonStyles.icons, commonStyles.roundIcon, {
+              [commonStyles.enabled]: true,
+            })}
+          >
+            <Tooltip title="Bookmark">
+              <div
+                className={cx(commonStyles.flexAlignVerticalMiddle)}
+                onClick={() => this.props.toggleBookmark(this.state.userTypedAddress)}
+              >
+                <FavIcon
+                  height={22}
+                  width={22}
+                  padding={5}
+                  color={iconsColor}
+                />
+              </div>
+            </Tooltip>
+          </div>
           <div
             className={cx(commonStyles.icons, commonStyles.roundIcon, {
               [commonStyles.enabled]: true,
diff --git a/desktop-app/app/components/BookmarksDrawer/index.js b/desktop-app/app/components/BookmarksDrawer/index.js
index 5f833c2b..6f1181dd 100644
--- a/desktop-app/app/components/BookmarksDrawer/index.js
+++ b/desktop-app/app/components/BookmarksDrawer/index.js
@@ -1,9 +1,30 @@
 import React from 'react';
+import cx from 'classnames'
+import FavIcon from '@material-ui/icons/Star';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 
-export default function BookmarksDrawer(props) {
+import commonStyles from '../common.styles.css'
+
+export default function BookmarksDrawer({bookmarks}) {
   return (
-    <div>
-      Hello World
+    <div className={cx(commonStyles.sidebarContentSection)}>
+      <div className={cx(commonStyles.sidebarContentSectionTitleBar)}>
+        <FavIcon width={26} margin={2} /> Bookmarks
+      </div>
+      <div className={cx(commonStyles.sidebarContentSectionContainer)}>
+        <div>
+          <List component="nav" dense={true}>
+            {bookmarks.map(bookmark => (
+              <ListItem button>
+                <ListItemText primary={bookmark} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/desktop-app/app/constants/settingKeys.js b/desktop-app/app/constants/settingKeys.js
index 4633900b..6485262e 100644
--- a/desktop-app/app/constants/settingKeys.js
+++ b/desktop-app/app/constants/settingKeys.js
@@ -1,3 +1,4 @@
 export const ACTIVE_DEVICES = 'activeDevices';
 export const CUSTOM_DEVICES = 'customDevices';
 export const USER_PREFERENCES = 'userPreferences';
+export const BOOKMARKS = 'bookmarks';
diff --git a/desktop-app/app/containers/AddressBar/index.js b/desktop-app/app/containers/AddressBar/index.js
index efce17f3..6e7bd65b 100644
--- a/desktop-app/app/containers/AddressBar/index.js
+++ b/desktop-app/app/containers/AddressBar/index.js
@@ -19,6 +19,7 @@ const AddressBar = function(props) {
       onChange={props.onAddressChange}
       homepage={props.browser.homepage}
       setHomepage={props.setCurrentAddressAsHomepage}
+      toggleBookmark={props.toggleBookmark}
       deleteCookies={props.deleteCookies}
       deleteStorage={props.deleteStorage}
     />
diff --git a/desktop-app/app/containers/BookmarksContainer/index.js b/desktop-app/app/containers/BookmarksContainer/index.js
index 422434ff..a6d1faab 100644
--- a/desktop-app/app/containers/BookmarksContainer/index.js
+++ b/desktop-app/app/containers/BookmarksContainer/index.js
@@ -8,6 +8,7 @@ import * as BrowserActions from '../../actions/browser';
 
 function mapStateToProps(state) {
   return {
+    bookmarks: state.browser.bookmarks,
   };
 }
 
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index cd84059f..3de3db52 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -11,8 +11,8 @@ import {
   NEW_FILTERS,
   NEW_HOMEPAGE,
   NEW_USER_PREFERENCES,
-  DELETE_CUSTOM_DEVICE,
-} from '../actions/browser';
+  DELETE_CUSTOM_DEVICE, TOGGLE_BOOKMARK
+} from '../actions/browser'
 import type {Action} from './types';
 import getAllDevices from '../constants/devices';
 import settings from 'electron-settings';
@@ -26,6 +26,7 @@ import {
   ACTIVE_DEVICES,
   USER_PREFERENCES,
   CUSTOM_DEVICES,
+  BOOKMARKS,
 } from '../constants/settingKeys';
 import {isIfStatement} from 'typescript';
 import {getHomepage, saveHomepage} from '../utils/navigatorUtils';
@@ -63,6 +64,8 @@ type FilterFieldType = FILTER_FIELDS.OS | FILTER_FIELDS.DEVICE_TYPE;
 
 type FilterType = {[key: FilterFieldType]: Array<string>};
 
+type BookmarksType = Array<string>;
+
 export type BrowserStateType = {
   devices: Array<Device>,
   homepage: string,
@@ -74,6 +77,7 @@ export type BrowserStateType = {
   previewer: PreviewerType,
   filters: FilterType,
   userPreferences: UserPreferenceType,
+  bookmarks: BookmarksType
 };
 
 let _activeDevices = null;
@@ -112,6 +116,14 @@ function _setUserPreferences(userPreferences) {
   settings.set(USER_PREFERENCES, userPreferences);
 }
 
+function _getBookmarks(): BookmarksType {
+  return settings.get(BOOKMARKS) || [];
+}
+
+function _setBookmarks(bookmarks) {
+  settings.set(BOOKMARKS, bookmarks);
+}
+
 export default function browser(
   state: BrowserStateType = {
     devices: _getActiveDevices(),
@@ -132,6 +144,7 @@ export default function browser(
     filters: {[FILTER_FIELDS.OS]: [], [FILTER_FIELDS.DEVICE_TYPE]: []},
     userPreferences: _getUserPreferences(),
     allDevices: getAllDevices(),
+    bookmarks: _getBookmarks(),
   },
   action: Action
 ) {
@@ -190,6 +203,15 @@ export default function browser(
     case NEW_USER_PREFERENCES:
       settings.set(USER_PREFERENCES, action.userPreferences);
       return {...state, userPreferences: action.userPreferences};
+    case TOGGLE_BOOKMARK:
+      let bookmarks = state.bookmarks
+      if (bookmarks.includes(action.url)) {
+        bookmarks = bookmarks.filter(b => b !== action.url)
+      } else {
+        bookmarks = [...bookmarks, action.url]
+      }
+      _setBookmarks(bookmarks)
+      return {...state, bookmarks}
     default:
       return state;
   }
diff --git a/desktop-app/app/utils/navigatorUtils.js b/desktop-app/app/utils/navigatorUtils.js
index c5c123f2..7706ef1c 100644
--- a/desktop-app/app/utils/navigatorUtils.js
+++ b/desktop-app/app/utils/navigatorUtils.js
@@ -10,3 +10,4 @@ export function saveHomepage(url) {
 export function getHomepage() {
   return settings.get(HOME_PAGE) || 'https://www.google.com/';
 }
+

From 400c185646d0bc265d3fb2ae1952c750226e9923 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Thu, 4 Jun 2020 22:45:32 +0200
Subject: [PATCH 03/11] feat: bookmark use <title>

---
 desktop-app/app/actions/browser.js                | 15 ++++++++++++++-
 .../app/components/BookmarksDrawer/index.js       |  7 +++----
 .../app/components/WebView/screenshotUtil.js      |  6 +++---
 desktop-app/app/reducers/browser.js               | 14 +++++++++++---
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
index 00ed5ba6..145e0b76 100644
--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@@ -330,6 +330,20 @@ export function goToHomepage() {
   };
 }
 
+export function gotoUrl(url) {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    const {
+      browser: {address},
+    } = getState();
+
+    if (url === address) {
+      return;
+    }
+
+    dispatch(newAddress(url));
+  };
+}
+
 export function setCurrentAddressAsHomepage() {
   return (dispatch: Dispatch, getState: RootStateType) => {
     const {
@@ -431,7 +445,6 @@ export function reloadCSS() {
 }
 
 export function toggleBookmark(url) {
-  console.log('URRRRLR', url)
   return {
     type: TOGGLE_BOOKMARK,
     url,
diff --git a/desktop-app/app/components/BookmarksDrawer/index.js b/desktop-app/app/components/BookmarksDrawer/index.js
index 6f1181dd..602b942b 100644
--- a/desktop-app/app/components/BookmarksDrawer/index.js
+++ b/desktop-app/app/components/BookmarksDrawer/index.js
@@ -3,12 +3,11 @@ import cx from 'classnames'
 import FavIcon from '@material-ui/icons/Star';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import commonStyles from '../common.styles.css'
 
-export default function BookmarksDrawer({bookmarks}) {
+export default function BookmarksDrawer({bookmarks, gotoUrl}) {
   return (
     <div className={cx(commonStyles.sidebarContentSection)}>
       <div className={cx(commonStyles.sidebarContentSectionTitleBar)}>
@@ -18,8 +17,8 @@ export default function BookmarksDrawer({bookmarks}) {
         <div>
           <List component="nav" dense={true}>
             {bookmarks.map(bookmark => (
-              <ListItem button>
-                <ListItemText primary={bookmark} />
+              <ListItem button onClick={() => gotoUrl(bookmark.url)}>
+                <ListItemText primary={bookmark.title} />
               </ListItem>
             ))}
           </List>
diff --git a/desktop-app/app/components/WebView/screenshotUtil.js b/desktop-app/app/components/WebView/screenshotUtil.js
index c4b4d6ba..b779a872 100644
--- a/desktop-app/app/components/WebView/screenshotUtil.js
+++ b/desktop-app/app/components/WebView/screenshotUtil.js
@@ -55,7 +55,7 @@ export const captureFullPage = async (
     document.body.classList.add('responsivelyApp__ScreenshotInProgress');
     responsivelyApp.screenshotVar = {
       previousScrollPosition : {
-        left: window.scrollX, 
+        left: window.scrollX,
         top: window.scrollY,
       },
       scrollHeight: document.body.scrollHeight,
@@ -186,14 +186,14 @@ function _getScreenshotFileName(
       `Desktop/Responsively-Screenshots`,
       directoryPath
     ),
-    file: `${_getWebsiteName(address)} - ${device.name.replace(
+    file: `${getWebsiteName(address)} - ${device.name.replace(
       /\//g,
       '-'
     )} - ${dateString}.png`,
   };
 }
 
-const _getWebsiteName = address => {
+export const getWebsiteName = address => {
   let domain = '';
   if (address.startsWith('file://')) {
     let fileNameStartingIndex = address.lastIndexOf('/') + 1;
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index 3de3db52..6f60e149 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -30,6 +30,7 @@ import {
 } from '../constants/settingKeys';
 import {isIfStatement} from 'typescript';
 import {getHomepage, saveHomepage} from '../utils/navigatorUtils';
+import {getWebsiteName} from '../components/WebView/screenshotUtil'
 
 export const FILTER_FIELDS = {
   OS: 'OS',
@@ -64,7 +65,10 @@ type FilterFieldType = FILTER_FIELDS.OS | FILTER_FIELDS.DEVICE_TYPE;
 
 type FilterType = {[key: FilterFieldType]: Array<string>};
 
-type BookmarksType = Array<string>;
+type BookmarksType = {
+  title: string,
+  url: string
+}
 
 export type BrowserStateType = {
   devices: Array<Device>,
@@ -205,10 +209,14 @@ export default function browser(
       return {...state, userPreferences: action.userPreferences};
     case TOGGLE_BOOKMARK:
       let bookmarks = state.bookmarks
+      const bookmark = {
+        title: getWebsiteName(action.url),
+        url: action.url
+      }
       if (bookmarks.includes(action.url)) {
-        bookmarks = bookmarks.filter(b => b !== action.url)
+        bookmarks = bookmarks.filter(b => b.url !== bookmark.url)
       } else {
-        bookmarks = [...bookmarks, action.url]
+        bookmarks = [...bookmarks, bookmark]
       }
       _setBookmarks(bookmarks)
       return {...state, bookmarks}

From 5d13f17ee33ec43f8765cf204a5b5ccc0151a7f6 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Thu, 4 Jun 2020 23:11:53 +0200
Subject: [PATCH 04/11] feat: bookmarks bar

---
 .../app/components/BookmarksBar/index.js      | 16 ++++++++++
 .../app/components/BookmarksBar/style.css     |  3 ++
 .../app/components/BookmarksDrawer/index.js   | 29 -------------------
 .../app/components/BookmarksDrawer/styles.css |  4 ---
 desktop-app/app/components/Drawer/index.js    |  5 +---
 desktop-app/app/components/Header/index.js    |  3 +-
 .../app/components/LeftIconsPane/index.js     | 14 ---------
 desktop-app/app/constants/DrawerContents.js   |  1 -
 .../index.js                                  | 12 ++++++--
 desktop-app/app/reducers/browser.js           |  4 +--
 10 files changed, 33 insertions(+), 58 deletions(-)
 create mode 100644 desktop-app/app/components/BookmarksBar/index.js
 create mode 100644 desktop-app/app/components/BookmarksBar/style.css
 delete mode 100644 desktop-app/app/components/BookmarksDrawer/index.js
 delete mode 100644 desktop-app/app/components/BookmarksDrawer/styles.css
 rename desktop-app/app/containers/{BookmarksContainer => BookmarksBarContainer}/index.js (60%)

diff --git a/desktop-app/app/components/BookmarksBar/index.js b/desktop-app/app/components/BookmarksBar/index.js
new file mode 100644
index 00000000..7bffd412
--- /dev/null
+++ b/desktop-app/app/components/BookmarksBar/index.js
@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import Grid from '@material-ui/core/Grid'
+import Button from '@material-ui/core/Button'
+import styles from './style.css';
+
+export const BookmarksBar = function ({bookmarks, gotoUrl}) {
+  console.log(gotoUrl)
+  return <Grid container direction="row" justify="flex-start" alignItems="center" className={styles.bookmarks} spacing={1}>
+    {bookmarks.map(bookmark => (
+      <Grid item onClick={() => gotoUrl(bookmark.url)} key={bookmark.url}>
+        <Button size="small">{bookmark.title}</Button>
+      </Grid>
+    ))}
+    </Grid>
+}
diff --git a/desktop-app/app/components/BookmarksBar/style.css b/desktop-app/app/components/BookmarksBar/style.css
new file mode 100644
index 00000000..c88d5055
--- /dev/null
+++ b/desktop-app/app/components/BookmarksBar/style.css
@@ -0,0 +1,3 @@
+.bookmarks {
+  padding: 0 10px;
+}
diff --git a/desktop-app/app/components/BookmarksDrawer/index.js b/desktop-app/app/components/BookmarksDrawer/index.js
deleted file mode 100644
index 602b942b..00000000
--- a/desktop-app/app/components/BookmarksDrawer/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import cx from 'classnames'
-import FavIcon from '@material-ui/icons/Star';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-
-import commonStyles from '../common.styles.css'
-
-export default function BookmarksDrawer({bookmarks, gotoUrl}) {
-  return (
-    <div className={cx(commonStyles.sidebarContentSection)}>
-      <div className={cx(commonStyles.sidebarContentSectionTitleBar)}>
-        <FavIcon width={26} margin={2} /> Bookmarks
-      </div>
-      <div className={cx(commonStyles.sidebarContentSectionContainer)}>
-        <div>
-          <List component="nav" dense={true}>
-            {bookmarks.map(bookmark => (
-              <ListItem button onClick={() => gotoUrl(bookmark.url)}>
-                <ListItemText primary={bookmark.title} />
-              </ListItem>
-            ))}
-          </List>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/desktop-app/app/components/BookmarksDrawer/styles.css b/desktop-app/app/components/BookmarksDrawer/styles.css
deleted file mode 100644
index 5b879604..00000000
--- a/desktop-app/app/components/BookmarksDrawer/styles.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.label {
-  font-size: 14px;
-  margin-bottom: 5px;
-}
diff --git a/desktop-app/app/components/Drawer/index.js b/desktop-app/app/components/Drawer/index.js
index 5f190d56..576ba072 100644
--- a/desktop-app/app/components/Drawer/index.js
+++ b/desktop-app/app/components/Drawer/index.js
@@ -2,13 +2,12 @@
 import React from 'react';
 import {makeStyles} from '@material-ui/core/styles';
 import DeviceDrawerContainer from '../../containers/DeviceDrawerContainer';
-import BookmarksContainer from '../../containers/BookmarksContainer';
 import UserPreferencesContainer from '../../containers/UserPreferencesContainer';
 import cx from 'classnames';
 
 import styles from './styles.css';
 import commonStyles from '../common.styles.css';
-import {DEVICE_MANAGER, BOOKMARKS, USER_PREFERENCES} from '../../constants/DrawerContents'
+import {DEVICE_MANAGER, USER_PREFERENCES} from '../../constants/DrawerContents'
 import {iconsColor} from '../../constants/colors';
 import DoubleLeftArrowIcon from '../icons/DoubleLeftArrow';
 
@@ -64,8 +63,6 @@ function getDrawerContent(type) {
       return <DeviceDrawerContainer />;
     case USER_PREFERENCES:
       return <UserPreferencesContainer />;
-    case BOOKMARKS:
-      return <BookmarksContainer />;
   }
 }
 
diff --git a/desktop-app/app/components/Header/index.js b/desktop-app/app/components/Header/index.js
index 7ee4998e..e49873a3 100644
--- a/desktop-app/app/components/Header/index.js
+++ b/desktop-app/app/components/Header/index.js
@@ -5,11 +5,11 @@ import Grid from '@material-ui/core/Grid';
 import {ToastContainer} from 'react-toastify';
 import AddressBar from '../../containers/AddressBar';
 import ScrollControlsContainer from '../../containers/ScrollControlsContainer';
-import ZoomContainer from '../../containers/ZoomContainer';
 import HttpAuthDialog from '../HttpAuthDialog';
 
 import styles from './style.module.css';
 import NavigationControlsContainer from '../../containers/NavigationControlsContainer';
+import BookmarksBar from '../../containers/BookmarksBarContainer'
 
 const Header = function() {
   return (
@@ -25,6 +25,7 @@ const Header = function() {
           <ScrollControlsContainer />
         </Grid>
       </Grid>
+      <BookmarksBar />
       <HttpAuthDialog />
       <ToastContainer
         position="top-right"
diff --git a/desktop-app/app/components/LeftIconsPane/index.js b/desktop-app/app/components/LeftIconsPane/index.js
index 91aef4a4..cbca0225 100644
--- a/desktop-app/app/components/LeftIconsPane/index.js
+++ b/desktop-app/app/components/LeftIconsPane/index.js
@@ -5,7 +5,6 @@ import Grid from '@material-ui/core/Grid';
 import Logo from '../icons/Logo';
 import DevicesIcon from '@material-ui/icons/Devices';
 import SettingsIcon from '@material-ui/icons/Settings';
-import FavIcon from '@material-ui/icons/Star';
 import PhotoLibraryIcon from '@material-ui/icons/PhotoLibraryOutlined';
 import cx from 'classnames';
 
@@ -14,7 +13,6 @@ import commonStyles from '../common.styles.css';
 import {iconsColor} from '../../constants/colors';
 import {
   DEVICE_MANAGER,
-  BOOKMARKS,
   SCREENSHOT_MANAGER,
   USER_PREFERENCES,
 } from '../../constants/DrawerContents';
@@ -69,18 +67,6 @@ const LeftIconsPane = props => {
             <SettingsIcon {...iconProps} className="settingsIcon" />
           </div>
         </Grid>
-        <Grid
-          item
-          className={cx(commonStyles.icons, styles.icon, commonStyles.enabled, {
-            [commonStyles.selected]:
-            props.drawer.open && props.drawer.content === BOOKMARKS,
-          })}
-          onClick={() => toggleState(BOOKMARKS)}
-        >
-          <div>
-            <FavIcon {...iconProps} className="favIcon" />
-          </div>
-        </Grid>
       </Grid>
       <div style={{position: 'relative'}}>
         <div
diff --git a/desktop-app/app/constants/DrawerContents.js b/desktop-app/app/constants/DrawerContents.js
index b34cae90..c61013a6 100644
--- a/desktop-app/app/constants/DrawerContents.js
+++ b/desktop-app/app/constants/DrawerContents.js
@@ -1,4 +1,3 @@
 export const DEVICE_MANAGER = 'DEVICE_MANAGER';
 export const SCREENSHOT_MANAGER = 'SCREENSHOT_MANAGER';
 export const USER_PREFERENCES = 'USER_PREFERENCES';
-export const BOOKMARKS = 'BOOKMARKS';
diff --git a/desktop-app/app/containers/BookmarksContainer/index.js b/desktop-app/app/containers/BookmarksBarContainer/index.js
similarity index 60%
rename from desktop-app/app/containers/BookmarksContainer/index.js
rename to desktop-app/app/containers/BookmarksBarContainer/index.js
index a6d1faab..03f3216c 100644
--- a/desktop-app/app/containers/BookmarksContainer/index.js
+++ b/desktop-app/app/containers/BookmarksBarContainer/index.js
@@ -3,12 +3,18 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
-import BookmarksDrawer from '../../components/BookmarksDrawer';
 import * as BrowserActions from '../../actions/browser';
+import {BookmarksBar} from '../../components/BookmarksBar'
+
+const BookmarksBarContainer = function(props) {
+  return (
+    <BookmarksBar bookmarks={props.browser.bookmarks} gotoUrl={props.gotoUrl}/>
+  );
+};
 
 function mapStateToProps(state) {
   return {
-    bookmarks: state.browser.bookmarks,
+    browser: state.browser,
   };
 }
 
@@ -16,4 +22,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(BrowserActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(BookmarksDrawer);
+export default connect(mapStateToProps, mapDispatchToProps)(BookmarksBarContainer);
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index 6f60e149..bb830219 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -213,8 +213,8 @@ export default function browser(
         title: getWebsiteName(action.url),
         url: action.url
       }
-      if (bookmarks.includes(action.url)) {
-        bookmarks = bookmarks.filter(b => b.url !== bookmark.url)
+      if (bookmarks.find(b => b.url === action.url)) {
+        bookmarks = bookmarks.filter(b => b.url !== action.url)
       } else {
         bookmarks = [...bookmarks, bookmark]
       }

From ed4d1306d385c008ed7e37c47375b96b3d3290bc Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Thu, 4 Jun 2020 23:23:53 +0200
Subject: [PATCH 05/11] fix: toggleBookmark not being used anymore

---
 desktop-app/app/actions/browser.js  | 8 --------
 desktop-app/app/reducers/browser.js | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
index 145e0b76..d19d1d7f 100644
--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@@ -26,7 +26,6 @@ export const NEW_CUSTOM_DEVICE = 'NEW_CUSTOM_DEVICE';
 export const DELETE_CUSTOM_DEVICE = 'DELETE_CUSTOM_DEVICE';
 export const NEW_FILTERS = 'NEW_FILTERS';
 export const NEW_USER_PREFERENCES = 'NEW_USER_PREFERENCES';
-export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
 
 export function newAddress(address) {
   return {
@@ -443,10 +442,3 @@ export function reloadCSS() {
     pubsub.publish(RELOAD_CSS);
   };
 }
-
-export function toggleBookmark(url) {
-  return {
-    type: TOGGLE_BOOKMARK,
-    url,
-  };
-}
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index bb830219..a216fae3 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -11,7 +11,7 @@ import {
   NEW_FILTERS,
   NEW_HOMEPAGE,
   NEW_USER_PREFERENCES,
-  DELETE_CUSTOM_DEVICE, TOGGLE_BOOKMARK
+  DELETE_CUSTOM_DEVICE
 } from '../actions/browser'
 import type {Action} from './types';
 import getAllDevices from '../constants/devices';

From 82b2690befa72793798439a02fb537cda6d7443b Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Thu, 4 Jun 2020 23:25:54 +0200
Subject: [PATCH 06/11] typo: missing commas

---
 desktop-app/app/components/Drawer/index.js | 2 +-
 desktop-app/app/components/Header/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/desktop-app/app/components/Drawer/index.js b/desktop-app/app/components/Drawer/index.js
index 576ba072..96b7eff4 100644
--- a/desktop-app/app/components/Drawer/index.js
+++ b/desktop-app/app/components/Drawer/index.js
@@ -7,7 +7,7 @@ import cx from 'classnames';
 
 import styles from './styles.css';
 import commonStyles from '../common.styles.css';
-import {DEVICE_MANAGER, USER_PREFERENCES} from '../../constants/DrawerContents'
+import {DEVICE_MANAGER, USER_PREFERENCES} from '../../constants/DrawerContents';
 import {iconsColor} from '../../constants/colors';
 import DoubleLeftArrowIcon from '../icons/DoubleLeftArrow';
 
diff --git a/desktop-app/app/components/Header/index.js b/desktop-app/app/components/Header/index.js
index e49873a3..d19a7228 100644
--- a/desktop-app/app/components/Header/index.js
+++ b/desktop-app/app/components/Header/index.js
@@ -9,7 +9,7 @@ import HttpAuthDialog from '../HttpAuthDialog';
 
 import styles from './style.module.css';
 import NavigationControlsContainer from '../../containers/NavigationControlsContainer';
-import BookmarksBar from '../../containers/BookmarksBarContainer'
+import BookmarksBar from '../../containers/BookmarksBarContainer';
 
 const Header = function() {
   return (

From 526e7aed271477fb03daf618582816de15ec954a Mon Sep 17 00:00:00 2001
From: Jonthan Boyer <contact@grafikart.fr>
Date: Sat, 6 Jun 2020 01:43:08 +0200
Subject: [PATCH 07/11] fix: toggle bookmark

Fix toggle bookmark being removed in a previous commit.
Refactor and Reuse the onAddressChange method.
---
 desktop-app/app/actions/browser.js                       | 8 ++++++++
 desktop-app/app/components/BookmarksBar/index.js         | 5 ++---
 .../app/containers/BookmarksBarContainer/index.js        | 9 +++++++--
 desktop-app/app/reducers/browser.js                      | 3 ++-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
index d19d1d7f..34374832 100644
--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@@ -26,6 +26,7 @@ export const NEW_CUSTOM_DEVICE = 'NEW_CUSTOM_DEVICE';
 export const DELETE_CUSTOM_DEVICE = 'DELETE_CUSTOM_DEVICE';
 export const NEW_FILTERS = 'NEW_FILTERS';
 export const NEW_USER_PREFERENCES = 'NEW_USER_PREFERENCES';
+export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
 
 export function newAddress(address) {
   return {
@@ -442,3 +443,10 @@ export function reloadCSS() {
     pubsub.publish(RELOAD_CSS);
   };
 }
+
+export function toggleBookmark(url) {		
+  return {		
+    type: TOGGLE_BOOKMARK,		
+    url,		
+  };		
+}
\ No newline at end of file
diff --git a/desktop-app/app/components/BookmarksBar/index.js b/desktop-app/app/components/BookmarksBar/index.js
index 7bffd412..0b95adaf 100644
--- a/desktop-app/app/components/BookmarksBar/index.js
+++ b/desktop-app/app/components/BookmarksBar/index.js
@@ -4,11 +4,10 @@ import Grid from '@material-ui/core/Grid'
 import Button from '@material-ui/core/Button'
 import styles from './style.css';
 
-export const BookmarksBar = function ({bookmarks, gotoUrl}) {
-  console.log(gotoUrl)
+export const BookmarksBar = function ({bookmarks, onBookmarkClick}) {
   return <Grid container direction="row" justify="flex-start" alignItems="center" className={styles.bookmarks} spacing={1}>
     {bookmarks.map(bookmark => (
-      <Grid item onClick={() => gotoUrl(bookmark.url)} key={bookmark.url}>
+      <Grid item onClick={() => onBookmarkClick(bookmark)} key={bookmark.url}>
         <Button size="small">{bookmark.title}</Button>
       </Grid>
     ))}
diff --git a/desktop-app/app/containers/BookmarksBarContainer/index.js b/desktop-app/app/containers/BookmarksBarContainer/index.js
index 03f3216c..7e983154 100644
--- a/desktop-app/app/containers/BookmarksBarContainer/index.js
+++ b/desktop-app/app/containers/BookmarksBarContainer/index.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { useCallback } from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
@@ -7,8 +7,13 @@ import * as BrowserActions from '../../actions/browser';
 import {BookmarksBar} from '../../components/BookmarksBar'
 
 const BookmarksBarContainer = function(props) {
+
+  const handleBookmarkClick = useCallback(function (bookmark) {
+    props.onAddressChange(bookmark.url)
+  }, [])
+
   return (
-    <BookmarksBar bookmarks={props.browser.bookmarks} gotoUrl={props.gotoUrl}/>
+    <BookmarksBar bookmarks={props.browser.bookmarks} onBookmarkClick={handleBookmarkClick}/>
   );
 };
 
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index a216fae3..1b154b5a 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -11,7 +11,8 @@ import {
   NEW_FILTERS,
   NEW_HOMEPAGE,
   NEW_USER_PREFERENCES,
-  DELETE_CUSTOM_DEVICE
+  DELETE_CUSTOM_DEVICE,
+  TOGGLE_BOOKMARK,
 } from '../actions/browser'
 import type {Action} from './types';
 import getAllDevices from '../constants/devices';

From 1b8f8b2425a8490722c2b246d7a88be4173f22e3 Mon Sep 17 00:00:00 2001
From: Jonthan Boyer <contact@grafikart.fr>
Date: Sat, 6 Jun 2020 19:32:16 +0200
Subject: [PATCH 08/11] feat: bookmark renaming

---
 desktop-app/app/actions/bookmarks.js          | 20 +++++
 desktop-app/app/actions/browser.js            |  7 --
 .../app/components/Addressinput/index.js      |  4 +-
 .../BookmarksBar/BookmarkRenameDialog.js      | 52 +++++++++++++
 .../app/components/BookmarksBar/index.js      | 76 +++++++++++++++++--
 .../app/containers/AddressBar/index.js        |  5 +-
 .../containers/BookmarksBarContainer/index.js | 16 +++-
 desktop-app/app/reducers/bookmarks.js         | 46 +++++++++++
 desktop-app/app/reducers/browser.js           | 30 +-------
 desktop-app/app/reducers/index.js             |  2 +
 10 files changed, 206 insertions(+), 52 deletions(-)
 create mode 100644 desktop-app/app/actions/bookmarks.js
 create mode 100644 desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js
 create mode 100644 desktop-app/app/reducers/bookmarks.js

diff --git a/desktop-app/app/actions/bookmarks.js b/desktop-app/app/actions/bookmarks.js
new file mode 100644
index 00000000..85f772ff
--- /dev/null
+++ b/desktop-app/app/actions/bookmarks.js
@@ -0,0 +1,20 @@
+export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
+export const RENAME_BOOKMARK = 'RENAME_BOOKMARK';
+
+// Add or Remove an URL from the bookmark list
+export function toggleBookmarkUrl(url, title = null) {		
+  return {		
+    type: TOGGLE_BOOKMARK,		
+    url,		
+    title
+  };		
+}
+
+// Updates bookmark title
+export function renameBookmark(bookmark, title) {
+  return {
+    type: RENAME_BOOKMARK,
+    title,
+    bookmark
+  }
+}
\ No newline at end of file
diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
index 34374832..4c067577 100644
--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@@ -442,11 +442,4 @@ export function reloadCSS() {
   return (dispatch: Dispatch, getState: RootStateType) => {
     pubsub.publish(RELOAD_CSS);
   };
-}
-
-export function toggleBookmark(url) {		
-  return {		
-    type: TOGGLE_BOOKMARK,		
-    url,		
-  };		
 }
\ No newline at end of file
diff --git a/desktop-app/app/components/Addressinput/index.js b/desktop-app/app/components/Addressinput/index.js
index 720a235c..91363aa2 100644
--- a/desktop-app/app/components/Addressinput/index.js
+++ b/desktop-app/app/components/Addressinput/index.js
@@ -69,8 +69,8 @@ class AddressBar extends React.Component<Props> {
                 onClick={() => this.props.toggleBookmark(this.state.userTypedAddress)}
               >
                 <FavIcon
-                  height={22}
-                  width={22}
+                  height={18}
+                  width={18}
                   padding={5}
                   color={iconsColor}
                 />
diff --git a/desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js b/desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js
new file mode 100644
index 00000000..14908d10
--- /dev/null
+++ b/desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js
@@ -0,0 +1,52 @@
+import React, { useRef } from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+export default function BookmarkRenameDialog({open, onClose, onSubmit, defaultValue}) {
+  const input = useRef(null)
+
+  const handleSubmit = function (e) {
+    onSubmit(input.current.querySelector('input').value)
+    onClose()
+  }
+
+  const handleKeyPress = function (e) {
+    if (e.key === 'Enter') {
+      handleSubmit(e)
+    } else if (e.key === 'Escape') {
+      onClose()
+    }
+  }
+
+  return (
+      <Dialog open={open} onClose={onClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">Bookmark title</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            ref={input}
+            margin="dense"
+            id="name"
+            label="Title"
+            type="text"
+            onKeyPress={handleKeyPress}
+            defaultValue={defaultValue}
+            fullWidth
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} color="primary">
+            Update
+          </Button>
+        </DialogActions>
+      </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/desktop-app/app/components/BookmarksBar/index.js b/desktop-app/app/components/BookmarksBar/index.js
index 0b95adaf..ce735cdf 100644
--- a/desktop-app/app/components/BookmarksBar/index.js
+++ b/desktop-app/app/components/BookmarksBar/index.js
@@ -1,15 +1,75 @@
 // @flow
-import React from 'react';
-import Grid from '@material-ui/core/Grid'
-import Button from '@material-ui/core/Button'
+import React, { useState } from 'react';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Modal from '@material-ui/core/Modal';
+import BookmarkRenameDialog from './BookmarkRenameDialog'
 import styles from './style.css';
 
-export const BookmarksBar = function ({bookmarks, onBookmarkClick}) {
+export const BookmarksBar = function ({bookmarks, onBookmarkClick, onBookmarkDelete, onBookmarkRename}) {
   return <Grid container direction="row" justify="flex-start" alignItems="center" className={styles.bookmarks} spacing={1}>
-    {bookmarks.map(bookmark => (
-      <Grid item onClick={() => onBookmarkClick(bookmark)} key={bookmark.url}>
-        <Button size="small">{bookmark.title}</Button>
-      </Grid>
+    {bookmarks.map((bookmark, k) => (
+      <BookmarkItem bookmark={bookmark} onClick={onBookmarkClick} key={'bookmark' + k} onDelete={onBookmarkDelete} onRename={onBookmarkRename}/>
     ))}
     </Grid>
+};
+
+const useToggle = function () {
+  const [value, setValue] = useState(false)
+  return [
+    value,
+    function () { setValue(true) },
+    function () { setValue(false) }
+  ]
 }
+
+function BookmarkItem ({bookmark, onClick, onDelete, onRename}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [renameDialog, openRenameDialog, closeRenameDialog] = useToggle(null)
+
+  const handleContextMenu = function (event) {
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = function () {
+    setAnchorEl(null);
+  };
+
+  const handleClick = function () {
+    onClick(bookmark)
+  };
+
+  const handleDelete = function () {
+    onDelete(bookmark)
+  };
+
+  const handleRename = function (title) {
+    onRename(bookmark, title)
+    setAnchorEl(null)
+  }
+
+  const closeDialog = function () {
+    closeRenameDialog()
+    setAnchorEl(null)
+  }
+
+  return <Grid item key={bookmark.url}>
+    <Button aria-controls="bookmark-menu" aria-haspopup="true" onClick={handleClick} onContextMenu={handleContextMenu}>
+      {bookmark.title}
+    </Button>
+    <Menu
+      id="bookmark-menu"
+      anchorEl={anchorEl}
+      keepMounted
+      open={Boolean(anchorEl)}
+      onClose={handleClose}
+    >
+      <MenuItem onClick={openRenameDialog}>Rename</MenuItem>
+      <MenuItem onClick={handleDelete}>Delete</MenuItem>
+    </Menu>
+    <BookmarkRenameDialog open={renameDialog} onSubmit={handleRename} onClose={closeDialog} defaultValue={bookmark.title}/>
+  </Grid>
+}
\ No newline at end of file
diff --git a/desktop-app/app/containers/AddressBar/index.js b/desktop-app/app/containers/AddressBar/index.js
index 6e7bd65b..137c4ce4 100644
--- a/desktop-app/app/containers/AddressBar/index.js
+++ b/desktop-app/app/containers/AddressBar/index.js
@@ -6,6 +6,7 @@ import {bindActionCreators} from 'redux';
 
 import AddressInput from '../../components/Addressinput';
 import * as BrowserActions from '../../actions/browser';
+import {toggleBookmarkUrl} from '../../actions/bookmarks'
 
 const AddressBar = function(props) {
   useEffect(() => {
@@ -19,7 +20,7 @@ const AddressBar = function(props) {
       onChange={props.onAddressChange}
       homepage={props.browser.homepage}
       setHomepage={props.setCurrentAddressAsHomepage}
-      toggleBookmark={props.toggleBookmark}
+      toggleBookmark={props.toggleBookmarkUrl}
       deleteCookies={props.deleteCookies}
       deleteStorage={props.deleteStorage}
     />
@@ -33,7 +34,7 @@ function mapStateToProps(state) {
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(BrowserActions, dispatch);
+  return bindActionCreators({...BrowserActions, toggleBookmarkUrl}, dispatch);
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(AddressBar);
diff --git a/desktop-app/app/containers/BookmarksBarContainer/index.js b/desktop-app/app/containers/BookmarksBarContainer/index.js
index 7e983154..09955600 100644
--- a/desktop-app/app/containers/BookmarksBarContainer/index.js
+++ b/desktop-app/app/containers/BookmarksBarContainer/index.js
@@ -4,7 +4,8 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
 import * as BrowserActions from '../../actions/browser';
-import {BookmarksBar} from '../../components/BookmarksBar'
+import * as BookmarksActions from '../../actions/bookmarks';
+import {BookmarksBar} from '../../components/BookmarksBar';
 
 const BookmarksBarContainer = function(props) {
 
@@ -12,19 +13,26 @@ const BookmarksBarContainer = function(props) {
     props.onAddressChange(bookmark.url)
   }, [])
 
+  const handleBookmarkDelete = useCallback(function (bookmark) {
+    props.toggleBookmarkUrl(bookmark.url)
+  }, [])
+
   return (
-    <BookmarksBar bookmarks={props.browser.bookmarks} onBookmarkClick={handleBookmarkClick}/>
+    <BookmarksBar bookmarks={props.bookmarks} onBookmarkClick={handleBookmarkClick} onBookmarkDelete={handleBookmarkDelete} onBookmarkRename={props.renameBookmark}/>
   );
 };
 
 function mapStateToProps(state) {
   return {
-    browser: state.browser,
+    bookmarks: state.bookmarks.bookmarks
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(BrowserActions, dispatch);
+  return bindActionCreators({
+    onAddressChange: BrowserActions.onAddressChange,
+    ...BookmarksActions
+  }, dispatch);
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(BookmarksBarContainer);
diff --git a/desktop-app/app/reducers/bookmarks.js b/desktop-app/app/reducers/bookmarks.js
new file mode 100644
index 00000000..0e953eb0
--- /dev/null
+++ b/desktop-app/app/reducers/bookmarks.js
@@ -0,0 +1,46 @@
+import settings from 'electron-settings';
+import {TOGGLE_BOOKMARK, RENAME_BOOKMARK} from '../actions/bookmarks'
+import {BOOKMARKS} from '../constants/settingKeys'
+import { getWebsiteName } from '../components/WebView/screenshotUtil';
+
+type BookmarksType = {
+  title: string,
+  url: string
+}
+
+function fetchBookmarks(): BookmarksType {
+  return settings.get(BOOKMARKS) || [];
+}
+
+function persistBookmarks(bookmarks) {
+  settings.set(BOOKMARKS, bookmarks);
+}
+
+export default function browser(
+  state: BrowserStateType = {
+    bookmarks: fetchBookmarks(),
+  },
+  action: Action
+) {
+  switch (action.type) {
+    case TOGGLE_BOOKMARK:
+      let bookmarks = state.bookmarks
+      const bookmark = {
+        title: getWebsiteName(action.url),
+        url: action.url
+      }
+      if (bookmarks.find(b => b.url === action.url)) {
+        bookmarks = bookmarks.filter(b => b.url !== action.url)
+      } else {
+        bookmarks = [...bookmarks, bookmark]
+      }
+      persistBookmarks(bookmarks)
+      return {...state, bookmarks}
+    case RENAME_BOOKMARK:
+      const updatedBookmarks = state.bookmarks.map(b => b === action.bookmark ? {...b, title: action.title} : b)
+      persistBookmarks(updatedBookmarks)
+      return {...state, bookmarks: updatedBookmarks}
+    default:
+      return state;
+  }
+}
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index 1b154b5a..7ad24dd2 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -26,8 +26,7 @@ import {DEVICE_MANAGER} from '../constants/DrawerContents';
 import {
   ACTIVE_DEVICES,
   USER_PREFERENCES,
-  CUSTOM_DEVICES,
-  BOOKMARKS,
+  CUSTOM_DEVICES
 } from '../constants/settingKeys';
 import {isIfStatement} from 'typescript';
 import {getHomepage, saveHomepage} from '../utils/navigatorUtils';
@@ -66,11 +65,6 @@ type FilterFieldType = FILTER_FIELDS.OS | FILTER_FIELDS.DEVICE_TYPE;
 
 type FilterType = {[key: FilterFieldType]: Array<string>};
 
-type BookmarksType = {
-  title: string,
-  url: string
-}
-
 export type BrowserStateType = {
   devices: Array<Device>,
   homepage: string,
@@ -121,14 +115,6 @@ function _setUserPreferences(userPreferences) {
   settings.set(USER_PREFERENCES, userPreferences);
 }
 
-function _getBookmarks(): BookmarksType {
-  return settings.get(BOOKMARKS) || [];
-}
-
-function _setBookmarks(bookmarks) {
-  settings.set(BOOKMARKS, bookmarks);
-}
-
 export default function browser(
   state: BrowserStateType = {
     devices: _getActiveDevices(),
@@ -149,7 +135,6 @@ export default function browser(
     filters: {[FILTER_FIELDS.OS]: [], [FILTER_FIELDS.DEVICE_TYPE]: []},
     userPreferences: _getUserPreferences(),
     allDevices: getAllDevices(),
-    bookmarks: _getBookmarks(),
   },
   action: Action
 ) {
@@ -208,19 +193,6 @@ export default function browser(
     case NEW_USER_PREFERENCES:
       settings.set(USER_PREFERENCES, action.userPreferences);
       return {...state, userPreferences: action.userPreferences};
-    case TOGGLE_BOOKMARK:
-      let bookmarks = state.bookmarks
-      const bookmark = {
-        title: getWebsiteName(action.url),
-        url: action.url
-      }
-      if (bookmarks.find(b => b.url === action.url)) {
-        bookmarks = bookmarks.filter(b => b.url !== action.url)
-      } else {
-        bookmarks = [...bookmarks, bookmark]
-      }
-      _setBookmarks(bookmarks)
-      return {...state, bookmarks}
     default:
       return state;
   }
diff --git a/desktop-app/app/reducers/index.js b/desktop-app/app/reducers/index.js
index 0b76a177..ec43acae 100644
--- a/desktop-app/app/reducers/index.js
+++ b/desktop-app/app/reducers/index.js
@@ -2,10 +2,12 @@
 import {combineReducers} from 'redux';
 import {connectRouter} from 'connected-react-router';
 import browser from './browser';
+import bookmarks from './bookmarks'
 
 export default function createRootReducer(history: History) {
   return combineReducers({
     router: connectRouter(history),
     browser,
+    bookmarks,
   });
 }

From 8c7e63dc30e1fc73345992326a63a6c7c7f1e727 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Tue, 9 Jun 2020 18:26:27 +0200
Subject: [PATCH 09/11] feat: update title bookmark

---
 desktop-app/app/actions/bookmarks.js          | 19 ++++++------
 ...kRenameDialog.js => BookmarkEditDialog.js} | 31 ++++++++++++++-----
 .../app/components/BookmarksBar/index.js      | 17 +++++-----
 .../containers/BookmarksBarContainer/index.js |  2 +-
 desktop-app/app/reducers/bookmarks.js         |  6 ++--
 5 files changed, 45 insertions(+), 30 deletions(-)
 rename desktop-app/app/components/BookmarksBar/{BookmarkRenameDialog.js => BookmarkEditDialog.js} (64%)

diff --git a/desktop-app/app/actions/bookmarks.js b/desktop-app/app/actions/bookmarks.js
index 85f772ff..87cc53aa 100644
--- a/desktop-app/app/actions/bookmarks.js
+++ b/desktop-app/app/actions/bookmarks.js
@@ -1,20 +1,21 @@
 export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
-export const RENAME_BOOKMARK = 'RENAME_BOOKMARK';
+export const EDIT_BOOKMARK = 'EDIT_BOOKMARK';
 
 // Add or Remove an URL from the bookmark list
-export function toggleBookmarkUrl(url, title = null) {		
-  return {		
-    type: TOGGLE_BOOKMARK,		
-    url,		
+export function toggleBookmarkUrl(url, title = null) {
+  return {
+    type: TOGGLE_BOOKMARK,
+    url,
     title
-  };		
+  };
 }
 
 // Updates bookmark title
-export function renameBookmark(bookmark, title) {
+export function editBookmark(bookmark, {title, url}) {
   return {
-    type: RENAME_BOOKMARK,
+    type: EDIT_BOOKMARK,
     title,
+    url,
     bookmark
   }
-}
\ No newline at end of file
+}
diff --git a/desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js b/desktop-app/app/components/BookmarksBar/BookmarkEditDialog.js
similarity index 64%
rename from desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js
rename to desktop-app/app/components/BookmarksBar/BookmarkEditDialog.js
index 14908d10..3c629db5 100644
--- a/desktop-app/app/components/BookmarksBar/BookmarkRenameDialog.js
+++ b/desktop-app/app/components/BookmarksBar/BookmarkEditDialog.js
@@ -4,14 +4,17 @@ import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
-export default function BookmarkRenameDialog({open, onClose, onSubmit, defaultValue}) {
-  const input = useRef(null)
+export default function BookmarkEditDialog({open, onClose, onSubmit, bookmark}) {
+  const titleInput = useRef(null)
+  const urlInput = useRef(null)
 
   const handleSubmit = function (e) {
-    onSubmit(input.current.querySelector('input').value)
+    onSubmit(
+      titleInput.current.querySelector('input').value,
+      urlInput.current.querySelector('input').value
+    )
     onClose()
   }
 
@@ -29,13 +32,25 @@ export default function BookmarkRenameDialog({open, onClose, onSubmit, defaultVa
         <DialogContent>
           <TextField
             autoFocus
-            ref={input}
+            ref={titleInput}
             margin="dense"
-            id="name"
+            id="title"
             label="Title"
             type="text"
             onKeyPress={handleKeyPress}
-            defaultValue={defaultValue}
+            defaultValue={bookmark.title}
+            fullWidth
+          />
+          <TextField
+            style={{marginTop: '16px'}}
+            autoFocus
+            ref={urlInput}
+            margin="dense"
+            id="url"
+            label="URL"
+            type="text"
+            onKeyPress={handleKeyPress}
+            defaultValue={bookmark.url}
             fullWidth
           />
         </DialogContent>
@@ -49,4 +64,4 @@ export default function BookmarkRenameDialog({open, onClose, onSubmit, defaultVa
         </DialogActions>
       </Dialog>
   );
-}
\ No newline at end of file
+}
diff --git a/desktop-app/app/components/BookmarksBar/index.js b/desktop-app/app/components/BookmarksBar/index.js
index ce735cdf..b55c436b 100644
--- a/desktop-app/app/components/BookmarksBar/index.js
+++ b/desktop-app/app/components/BookmarksBar/index.js
@@ -4,14 +4,13 @@ import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import Modal from '@material-ui/core/Modal';
-import BookmarkRenameDialog from './BookmarkRenameDialog'
+import BookmarkEditDialog from './BookmarkEditDialog'
 import styles from './style.css';
 
-export const BookmarksBar = function ({bookmarks, onBookmarkClick, onBookmarkDelete, onBookmarkRename}) {
+export const BookmarksBar = function ({bookmarks, onBookmarkClick, onBookmarkDelete, onBookmarkEdit}) {
   return <Grid container direction="row" justify="flex-start" alignItems="center" className={styles.bookmarks} spacing={1}>
     {bookmarks.map((bookmark, k) => (
-      <BookmarkItem bookmark={bookmark} onClick={onBookmarkClick} key={'bookmark' + k} onDelete={onBookmarkDelete} onRename={onBookmarkRename}/>
+      <BookmarkItem bookmark={bookmark} onClick={onBookmarkClick} key={'bookmark' + k} onDelete={onBookmarkDelete} onEdit={onBookmarkEdit}/>
     ))}
     </Grid>
 };
@@ -25,7 +24,7 @@ const useToggle = function () {
   ]
 }
 
-function BookmarkItem ({bookmark, onClick, onDelete, onRename}) {
+function BookmarkItem ({bookmark, onClick, onDelete, onEdit}) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [renameDialog, openRenameDialog, closeRenameDialog] = useToggle(null)
 
@@ -46,8 +45,8 @@ function BookmarkItem ({bookmark, onClick, onDelete, onRename}) {
     onDelete(bookmark)
   };
 
-  const handleRename = function (title) {
-    onRename(bookmark, title)
+  const handleRename = function (title, url) {
+    onEdit(bookmark, {title, url})
     setAnchorEl(null)
   }
 
@@ -70,6 +69,6 @@ function BookmarkItem ({bookmark, onClick, onDelete, onRename}) {
       <MenuItem onClick={openRenameDialog}>Rename</MenuItem>
       <MenuItem onClick={handleDelete}>Delete</MenuItem>
     </Menu>
-    <BookmarkRenameDialog open={renameDialog} onSubmit={handleRename} onClose={closeDialog} defaultValue={bookmark.title}/>
+    <BookmarkEditDialog open={renameDialog} onSubmit={handleRename} onClose={closeDialog} bookmark={bookmark}/>
   </Grid>
-}
\ No newline at end of file
+}
diff --git a/desktop-app/app/containers/BookmarksBarContainer/index.js b/desktop-app/app/containers/BookmarksBarContainer/index.js
index 09955600..9282cc98 100644
--- a/desktop-app/app/containers/BookmarksBarContainer/index.js
+++ b/desktop-app/app/containers/BookmarksBarContainer/index.js
@@ -18,7 +18,7 @@ const BookmarksBarContainer = function(props) {
   }, [])
 
   return (
-    <BookmarksBar bookmarks={props.bookmarks} onBookmarkClick={handleBookmarkClick} onBookmarkDelete={handleBookmarkDelete} onBookmarkRename={props.renameBookmark}/>
+    <BookmarksBar bookmarks={props.bookmarks} onBookmarkClick={handleBookmarkClick} onBookmarkDelete={handleBookmarkDelete} onBookmarkEdit={props.editBookmark}/>
   );
 };
 
diff --git a/desktop-app/app/reducers/bookmarks.js b/desktop-app/app/reducers/bookmarks.js
index 0e953eb0..ebf88a42 100644
--- a/desktop-app/app/reducers/bookmarks.js
+++ b/desktop-app/app/reducers/bookmarks.js
@@ -1,5 +1,5 @@
 import settings from 'electron-settings';
-import {TOGGLE_BOOKMARK, RENAME_BOOKMARK} from '../actions/bookmarks'
+import {TOGGLE_BOOKMARK, EDIT_BOOKMARK} from '../actions/bookmarks'
 import {BOOKMARKS} from '../constants/settingKeys'
 import { getWebsiteName } from '../components/WebView/screenshotUtil';
 
@@ -36,8 +36,8 @@ export default function browser(
       }
       persistBookmarks(bookmarks)
       return {...state, bookmarks}
-    case RENAME_BOOKMARK:
-      const updatedBookmarks = state.bookmarks.map(b => b === action.bookmark ? {...b, title: action.title} : b)
+    case EDIT_BOOKMARK:
+      const updatedBookmarks = state.bookmarks.map(b => b === action.bookmark ? {...b, title: action.title, url: action.url} : b)
       persistBookmarks(updatedBookmarks)
       return {...state, bookmarks: updatedBookmarks}
     default:

From c03671baceaef7cc60112c065c8fd474026b1aa4 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Tue, 9 Jun 2020 18:31:04 +0200
Subject: [PATCH 10/11] feat: keyboard shortcut

---
 desktop-app/app/containers/Root.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/desktop-app/app/containers/Root.js b/desktop-app/app/containers/Root.js
index 7f5ad685..a5b088f3 100644
--- a/desktop-app/app/containers/Root.js
+++ b/desktop-app/app/containers/Root.js
@@ -13,18 +13,19 @@ import ErrorBoundary from '../components/ErrorBoundary';
 
 import {registerShortcut, clearAllShortcuts, unregisterShortcut} from '../shortcut-manager/renderer-shortcut-manager';
 import {
-  onZoomChange, 
-  triggerScrollUp, 
-  triggerScrollDown, 
-  screenshotAllDevices, 
-  flipOrientationAllDevices, 
-  enableInpector, 
-  goToHomepage, 
-  triggerNavigationBack, 
+  onZoomChange,
+  triggerScrollUp,
+  triggerScrollDown,
+  screenshotAllDevices,
+  flipOrientationAllDevices,
+  enableInpector,
+  goToHomepage,
+  triggerNavigationBack,
   triggerNavigationForward,
   deleteCookies,
   deleteStorage
 } from '../actions/browser';
+import {toggleBookmarkUrl} from '../actions/bookmarks'
 
 type Props = {
   store: Store,
@@ -106,7 +107,7 @@ export default class Root extends Component<Props> {
     registerShortcut({id: 'TiltDevices', title: 'Tilt Devices', accelerators: ['mod+tab']}, () => {
       store.dispatch(flipOrientationAllDevices());
     }, true);
-    
+
     registerShortcut({id: 'ToggleInspector', title: 'Toggle Inspector', accelerators: ['mod+i']}, () => {
       store.dispatch(enableInpector());
     }, true);
@@ -130,6 +131,10 @@ export default class Root extends Component<Props> {
     registerShortcut({id: 'DeleteCookies', title: 'Delete Cookies', accelerators: ['mod+shift+del']}, () => {
       store.dispatch(deleteCookies());
     }, true);
+
+    registerShortcut({id: 'AddBookmark', title: 'Add Bookmark', accelerators: ['mod+d']}, () => {
+      store.dispatch(toggleBookmarkUrl(store.getState().browser.address));
+    }, true);
   }
 
   componentWillUnmount() {

From f528a60e6ce02ad9fd5aeaa31c980317c4ef02c9 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Fri, 12 Jun 2020 15:03:24 +0200
Subject: [PATCH 11/11] feat: fill bookmark icon

Fill bookmark icon when the current address is bookmarked
---
 desktop-app/app/components/Addressinput/index.js | 11 ++++-------
 desktop-app/app/containers/AddressBar/index.js   |  2 ++
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/desktop-app/app/components/Addressinput/index.js b/desktop-app/app/components/Addressinput/index.js
index 91363aa2..aa895208 100644
--- a/desktop-app/app/components/Addressinput/index.js
+++ b/desktop-app/app/components/Addressinput/index.js
@@ -4,7 +4,8 @@ import cx from 'classnames';
 import HomePlusIcon from '../icons/HomePlus';
 import DeleteCookieIcon from '../icons/DeleteCookie';
 import DeleteStorageIcon from '../icons/DeleteStorage';
-import FavIcon from '@material-ui/icons/StarBorder';
+import FavIconOff from '@material-ui/icons/StarBorder';
+import FavIconOn from '@material-ui/icons/Star';
 import {iconsColor} from '../../constants/colors';
 
 import commonStyles from '../common.styles.css';
@@ -44,6 +45,7 @@ class AddressBar extends React.Component<Props> {
   }
 
   render() {
+    const FavIcon = this.props.isBookmarked ? FavIconOn : FavIconOff;
     return (
       <div className={styles.addressBarContainer}>
         <input
@@ -68,12 +70,7 @@ class AddressBar extends React.Component<Props> {
                 className={cx(commonStyles.flexAlignVerticalMiddle)}
                 onClick={() => this.props.toggleBookmark(this.state.userTypedAddress)}
               >
-                <FavIcon
-                  height={18}
-                  width={18}
-                  padding={5}
-                  color={iconsColor}
-                />
+                <FavIcon fontSize="small"/>
               </div>
             </Tooltip>
           </div>
diff --git a/desktop-app/app/containers/AddressBar/index.js b/desktop-app/app/containers/AddressBar/index.js
index 137c4ce4..bf059bb5 100644
--- a/desktop-app/app/containers/AddressBar/index.js
+++ b/desktop-app/app/containers/AddressBar/index.js
@@ -20,6 +20,7 @@ const AddressBar = function(props) {
       onChange={props.onAddressChange}
       homepage={props.browser.homepage}
       setHomepage={props.setCurrentAddressAsHomepage}
+      isBookmarked={props.isBookmarked}
       toggleBookmark={props.toggleBookmarkUrl}
       deleteCookies={props.deleteCookies}
       deleteStorage={props.deleteStorage}
@@ -30,6 +31,7 @@ const AddressBar = function(props) {
 function mapStateToProps(state) {
   return {
     browser: state.browser,
+    isBookmarked: state.bookmarks.bookmarks.some(b => b.url === state.browser.address)
   };
 }