Feature/history toolbar (#44)

Add the history bar

package.json

@@ -14,6 +14,7 @@
     "@types/node-sass": "^4.11.0",
     "@types/react": "^16.9.34",
     "@types/react-bootstrap": "^1.0.1",
+    "@types/react-bootstrap-typeahead": "^3.4.6",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.8",
     "@types/react-router": "^5.1.7",
@@ -27,6 +28,7 @@
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
+    "react-bootstrap-typeahead": "^5.0.0-rc.1",
     "react-dom": "^16.13.1",
     "react-i18next": "^11.4.0",
     "react-redux": "^7.2.0",

public/locales/ar.json

@@ -15,16 +15,16 @@
   "or": "أو",
   "signOut": "خروج",
   "exploreFeatures": "استكشف جميع الميزات",
-  "Select tags...": "اختر كلمات مفتاحية...",
+  "selectTags": "اختر كلمات مفتاحية...",
-  "Search keyword...": "البحث عن كلمة مفتاحية...",
+  "searchKeywords": "البحث عن كلمة مفتاحية...",
-  "Sort by title": "الترتيب حسب العنوان",
+  "sortByTitle": "الترتيب حسب العنوان",
   "Title": "العنوان",
-  "Sort by time": "فرز حسب الوقت",
+  "sortByLastVisited": "فرز حسب الوقت",
   "Time": "الزمن",
-  "Export history": "تصدير التاريخ",
+  "exportHistory": "تصدير التاريخ",
-  "Import history": "استيراد التاريخ",
+  "importHistory": "استيراد التاريخ",
-  "Clear history": "مسح التاريخ",
+  "clearHistory": "مسح التاريخ",
-  "Refresh history": "حدث التاريخ",
+  "refreshHistory": "حدث التاريخ",
   "noHistory": "ليس هناك سِجِل",
   "Import from browser": "استيراد من المتصفح",
   "releases": "إصدارات",

public/locales/ca.json

@@ -15,16 +15,16 @@
   "or": "o",
   "signOut": "Sortir",
   "exploreFeatures": "Explorar totes les funcions",
-  "Select tags...": "Seleccionar etiquetes...",
+  "selectTags": "Seleccionar etiquetes...",
-  "Search keyword...": "Buscar paraules clau...",
+  "searchKeywords": "Buscar paraules clau...",
-  "Sort by title": "Ordenar per títol",
+  "sortByTitle": "Ordenar per títol",
   "Title": "Títol",
-  "Sort by time": "Ordenar per hora",
+  "sortByLastVisited": "Ordenar per hora",
   "Time": "Tiempo",
-  "Export history": "Exportar historial",
+  "exportHistory": "Exportar historial",
-  "Import history": "Importar historial",
+  "importHistory": "Importar historial",
-  "Clear history": "Borrar historial",
+  "clearHistory": "Borrar historial",
-  "Refresh history": "Actualitzar historial",
+  "refreshHistory": "Actualitzar historial",
   "noHistory": "Cap historial",
   "Import from browser": "Importar del navegador",
   "releases": "Versions",

public/locales/cs.json

@@ -15,16 +15,16 @@
   "or": "nebo",
   "signOut": "Odhlásit",
   "exploreFeatures": "Prozkoumat všechny funkce",
-  "Select tags...": "Zvolit štítky…",
+  "selectTags": "Zvolit štítky…",
-  "Search keyword...": "Vyhledat klíčové slovo …",
+  "searchKeywords": "Vyhledat klíčové slovo …",
-  "Sort by title": "Seřadit podle názvu",
+  "sortByTitle": "Seřadit podle názvu",
   "Title": "Název",
-  "Sort by time": "Seřadit podle času",
+  "sortByLastVisited": "Seřadit podle času",
   "Time": "Čas",
-  "Export history": "Exportovat historii",
+  "exportHistory": "Exportovat historii",
-  "Import history": "Importovat historii",
+  "importHistory": "Importovat historii",
-  "Clear history": "Odstranit historii",
+  "clearHistory": "Odstranit historii",
-  "Refresh history": "Aktualizovat historii",
+  "refreshHistory": "Aktualizovat historii",
   "noHistory": "Žádná historie",
   "Import from browser": "Importovat z prohlížeče",
   "releases": "Vydání",

public/locales/da.json

@@ -15,16 +15,16 @@
   "or": "eller",
   "signOut": " Log Ud",
   "exploreFeatures": "Udforsk alle features",
-  "Select tags...": "Vælg tags...",
+  "selectTags": "Vælg tags...",
-  "Search keyword...": "Søg nøgleord...",
+  "searchKeywords": "Søg nøgleord...",
-  "Sort by title": "Sortér titler",
+  "sortByTitle": "Sortér titler",
   "Title": "Titel",
-  "Sort by time": "Sortér kronologisk",
+  "sortByLastVisited": "Sortér kronologisk",
   "Time": "Tid",
-  "Export history": "Eksportér historik",
+  "exportHistory": "Eksportér historik",
-  "Import history": "Importér historik",
+  "importHistory": "Importér historik",
-  "Clear history": "Ryd hsitorik",
+  "clearHistory": "Ryd hsitorik",
-  "Refresh history": "Genindlæs historik",
+  "refreshHistory": "Genindlæs historik",
   "noHistory": "Ingen historik",
   "Import from browser": "Importér fra browser",
   "releases": "Releases",

public/locales/de.json

@@ -15,16 +15,16 @@
   "or": "oder",
   "signOut": "Ausloggen",
   "exploreFeatures": "Alle Funktionen",
-  "Select tags...": "Tags auswählen ...",
+  "selectTags": "Tags auswählen ...",
-  "Search keyword...": "Suche nach Stichwort ...",
+  "searchKeywords": "Suche nach Stichwort ...",
-  "Sort by title": "Nach Titel sortieren",
+  "sortByTitle": "Nach Titel sortieren",
   "Title": "Titel",
-  "Sort by time": "Nach Uhrzeit sortieren",
+  "sortByLastVisited": "Nach Uhrzeit sortieren",
   "Time": "Uhrzeit",
-  "Export history": "Verlauf exportieren",
+  "exportHistory": "Verlauf exportieren",
-  "Import history": "Verlauf importieren",
+  "importHistory": "Verlauf importieren",
-  "Clear history": "Verlauf löschen",
+  "clearHistory": "Verlauf löschen",
-  "Refresh history": "Verlauf aktualisieren",
+  "refreshHistory": "Verlauf aktualisieren",
   "noHistory": "Kein Verlauf",
   "Import from browser": "Vom Browser importieren",
   "releases": "Versionen",

public/locales/el.json

@@ -15,16 +15,16 @@
   "or": "ή",
   "signOut": "Αποσύνδεση",
   "exploreFeatures": "Ανακαλύψτε όλες τις λειτουργίες",
-  "Select tags...": "Επιλέξτε ετικέτα...",
+  "selectTags": "Επιλέξτε ετικέτα...",
-  "Search keyword...": "Αναζήτηση λέξης-κλειδί...",
+  "searchKeywords": "Αναζήτηση λέξης-κλειδί...",
-  "Sort by title": "Ταξινόμηση κατά τίτλο",
+  "sortByTitle": "Ταξινόμηση κατά τίτλο",
   "Title": "Τίτλος",
-  "Sort by time": "Ταξινόμηση κατά ώρα",
+  "sortByLastVisited": "Ταξινόμηση κατά ώρα",
   "Time": "Ώρα",
-  "Export history": "Εξαγωγή ιστορίας",
+  "exportHistory": "Εξαγωγή ιστορίας",
-  "Import history": "Εισαγωγή ιστορίας",
+  "importHistory": "Εισαγωγή ιστορίας",
-  "Clear history": "Καθαρισμός Ιστορίας",
+  "clearHistory": "Καθαρισμός Ιστορίας",
-  "Refresh history": "Ανανέωση ιστορίας",
+  "refreshHistory": "Ανανέωση ιστορίας",
   "noHistory": "Δεν υπάρχει ιστορία",
   "Import from browser": "Εισαγωγή απο τον περιηγητή",
   "releases": "Κυκλοφορίες",

public/locales/en.json

@@ -15,16 +15,17 @@
   "or": "or",
   "signOut": "Sign Out",
   "exploreFeatures": "Explore all features",
-  "Select tags...": "Select tags…",
+  "selectTags": "Select tags…",
-  "Search keyword...": "Search keyword…",
+  "searchKeywords": "Search keyword…",
-  "Sort by title": "Sort by title",
+  "sortByTitle": "Sort by title",
-  "Title": "Title",
+  "title": "Title",
-  "Sort by time": "Sort by time",
+  "lastVisit": "Last Visit",
-  "Time": "Time",
+  "actions": "Actions",
-  "Export history": "Export history",
+  "sortByLastVisited": "Sort by time",
-  "Import history": "Import history",
+  "exportHistory": "Export history",
-  "Clear history": "Clear history",
+  "importHistory": "Import history",
-  "Refresh history": "Refresh history",
+  "clearHistory": "Clear history",
+  "refreshHistory": "Refresh history",
   "noHistory": "No history",
   "Import from browser": "Import from browser",
   "releases": "Releases",
@@ -124,5 +125,7 @@
   "email": "Email",
   "password": "Password",
   "username": "Username",
+  "cards": "Cards",
+  "table": "Table",
   "errorOpenIdLogin": "Invalid OpenID provided"
 }

public/locales/eo.json

@@ -15,16 +15,16 @@
   "or": "aŭ",
   "signOut": "Elsalutu",
   "exploreFeatures": "Esploru ĉiujn eblecojn",
-  "Select tags...": "Elektu etikedojn..",
+  "selectTags": "Elektu etikedojn..",
-  "Search keyword...": "Serĉu ĉefvorton...",
+  "searchKeywords": "Serĉu ĉefvorton...",
-  "Sort by title": "Ordigu laŭ titolo",
+  "sortByTitle": "Ordigu laŭ titolo",
   "Title": "Titolo",
-  "Sort by time": "Ordigu laŭ tempo",
+  "sortByLastVisited": "Ordigu laŭ tempo",
   "Time": "Tempo",
-  "Export history": "Elportu historion",
+  "exportHistory": "Elportu historion",
-  "Import history": "Alportu historion",
+  "importHistory": "Alportu historion",
-  "Clear history": "Malplenigu historion",
+  "clearHistory": "Malplenigu historion",
-  "Refresh history": "Refreŝigu historion",
+  "refreshHistory": "Refreŝigu historion",
   "noHistory": "Neniu historio",
   "Import from browser": "Alportu de retumilo",
   "releases": "Eldonoj",

public/locales/es.json

@@ -15,16 +15,16 @@
   "or": "o",
   "signOut": "Salir",
   "exploreFeatures": "Explorar todas las funciones",
-  "Select tags...": "Seleccionar etiquetas...",
+  "selectTags": "Seleccionar etiquetas...",
-  "Search keyword...": "Buscar palabras clave...",
+  "searchKeywords": "Buscar palabras clave...",
-  "Sort by title": "Ordenar por título",
+  "sortByTitle": "Ordenar por título",
   "Title": "Título",
-  "Sort by time": "Ordenar por fecha",
+  "sortByLastVisited": "Ordenar por fecha",
   "Time": "Tiempo",
-  "Export history": "Exportar historial",
+  "exportHistory": "Exportar historial",
-  "Import history": "Importar historial",
+  "importHistory": "Importar historial",
-  "Clear history": "Borrar historial",
+  "clearHistory": "Borrar historial",
-  "Refresh history": "Actualizar historial",
+  "refreshHistory": "Actualizar historial",
   "noHistory": "Ningún historial",
   "Import from browser": "Importar del navegador",
   "releases": "Versiones",

public/locales/fr.json

@@ -15,16 +15,16 @@
   "or": "ou",
   "signOut": "Se déconnecter",
   "exploreFeatures": "Explorer toutes les fonctionnalités",
-  "Select tags...": "Sélectionner les tags...",
+  "selectTags": "Sélectionner les tags...",
-  "Search keyword...": "Chercher un mot-clef...",
+  "searchKeywords": "Chercher un mot-clef...",
-  "Sort by title": "Trier par titre",
+  "sortByTitle": "Trier par titre",
   "Title": "Titre",
-  "Sort by time": "Trier par date",
+  "sortByLastVisited": "Trier par date",
   "Time": "Date",
-  "Export history": "Exporter l'historique",
+  "exportHistory": "Exporter l'historique",
-  "Import history": "Importer l'historique",
+  "importHistory": "Importer l'historique",
-  "Clear history": "Effacer l'historique",
+  "clearHistory": "Effacer l'historique",
-  "Refresh history": "Actualiser l'historique",
+  "refreshHistory": "Actualiser l'historique",
   "noHistory": "Pas d'historique",
   "Import from browser": "Importer depuis le navigateur",
   "releases": "Versions",

public/locales/hi.json

@@ -15,16 +15,16 @@
   "or": "या",
   "signOut": "साइन आउट",
   "exploreFeatures": "सभी सुविधाओं का अन्वेषण करें",
-  "Select tags...": "टैग का चयन करें ...",
+  "selectTags": "टैग का चयन करें ...",
-  "Search keyword...": "मुख्य शब्द ढूंडो...",
+  "searchKeywords": "मुख्य शब्द ढूंडो...",
-  "Sort by title": "शीर्षक द्वारा क्रमबद्ध करें",
+  "sortByTitle": "शीर्षक द्वारा क्रमबद्ध करें",
   "Title": "शीर्षक",
-  "Sort by time": "समय के अनुसार क्रमबद्ध करें",
+  "sortByLastVisited": "समय के अनुसार क्रमबद्ध करें",
   "Time": "समय",
-  "Export history": "इतिहास को निर्यात करें",
+  "exportHistory": "इतिहास को निर्यात करें",
-  "Import history": "इतिहास को आयात करें",
+  "importHistory": "इतिहास को आयात करें",
-  "Clear history": "इतिहास मिटा दें",
+  "clearHistory": "इतिहास मिटा दें",
-  "Refresh history": "इतिहास ताज़ा करे",
+  "refreshHistory": "इतिहास ताज़ा करे",
   "noHistory": "इतिहास न रखें",
   "Import from browser": "ब्राउज़र से आयात",
   "releases": "विज्ञप्ति",

public/locales/hr.json

@@ -15,16 +15,16 @@
   "or": "ili",
   "signOut": "Odjavi se",
   "exploreFeatures": "Istraži sve značajke",
-  "Select tags...": "Odaberi oznake...",
+  "selectTags": "Odaberi oznake...",
-  "Search keyword...": "Pretraži ključnu riječ...",
+  "searchKeywords": "Pretraži ključnu riječ...",
-  "Sort by title": "Sortiraj po naslovu",
+  "sortByTitle": "Sortiraj po naslovu",
   "Title": "Naslov",
-  "Sort by time": "Sortiraj po vremenu",
+  "sortByLastVisited": "Sortiraj po vremenu",
   "Time": "Vrijeme",
-  "Export history": "Izvezi povijest",
+  "exportHistory": "Izvezi povijest",
-  "Import history": "Uvezi povijest",
+  "importHistory": "Uvezi povijest",
-  "Clear history": "Očisti povijest",
+  "clearHistory": "Očisti povijest",
-  "Refresh history": "Osvježi povijest",
+  "refreshHistory": "Osvježi povijest",
   "noHistory": "Nema povijesti",
   "Import from browser": "Uvezi iz preglednika",
   "releases": "Izdanja",

public/locales/id.json

@@ -15,16 +15,16 @@
   "or": "atau",
   "signOut": "Keluar",
   "exploreFeatures": "Jelajahi semua fitur",
-  "Select tags...": "Pilih tanda...",
+  "selectTags": "Pilih tanda...",
-  "Search keyword...": "Cari berdasarkan kata kunci...",
+  "searchKeywords": "Cari berdasarkan kata kunci...",
-  "Sort by title": "Urutkan berdasarkan judul",
+  "sortByTitle": "Urutkan berdasarkan judul",
   "Title": "Judul",
-  "Sort by time": "Urutkan berdasarkan waktu",
+  "sortByLastVisited": "Urutkan berdasarkan waktu",
   "Time": "Waktu",
-  "Export history": "Ekspor Riwayat",
+  "exportHistory": "Ekspor Riwayat",
-  "Import history": "Impor Riwayat",
+  "importHistory": "Impor Riwayat",
-  "Clear history": "Bersihkan Riwayat",
+  "clearHistory": "Bersihkan Riwayat",
-  "Refresh history": "Muat-ulang Riwayat",
+  "refreshHistory": "Muat-ulang Riwayat",
   "noHistory": "Tidak ada riwayat",
   "Import from browser": "Impor dari browser",
   "releases": "Penerbitan",

public/locales/it.json

@@ -15,16 +15,16 @@
   "or": "o",
   "signOut": "Disconettiti",
   "exploreFeatures": "Esplora tutte le funzioni",
-  "Select tags...": "Seleziona tag...",
+  "selectTags": "Seleziona tag...",
-  "Search keyword...": "Cerca...",
+  "searchKeywords": "Cerca...",
-  "Sort by title": "Ordina per titolo",
+  "sortByTitle": "Ordina per titolo",
   "Title": "Titolo",
-  "Sort by time": "Ordina per data",
+  "sortByLastVisited": "Ordina per data",
   "Time": "Data",
-  "Export history": "Esporta cronologia",
+  "exportHistory": "Esporta cronologia",
-  "Import history": "Importa cronologia",
+  "importHistory": "Importa cronologia",
-  "Clear history": "Cancella cronologia",
+  "clearHistory": "Cancella cronologia",
-  "Refresh history": "Aggiorna cronologia",
+  "refreshHistory": "Aggiorna cronologia",
   "noHistory": "Nessuna cronologia",
   "Import from browser": "Importa da browser",
   "releases": "Versioni",

public/locales/ja.json

@@ -15,16 +15,16 @@
   "or": "または",
   "signOut": "サインアウト",
   "exploreFeatures": "すべての機能をチェック",
-  "Select tags...": "タグで検索",
+  "selectTags": "タグで検索",
-  "Search keyword...": "キーワードで検索",
+  "searchKeywords": "キーワードで検索",
-  "Sort by title": "タイトル順でソート",
+  "sortByTitle": "タイトル順でソート",
   "Title": "タイトル",
-  "Sort by time": "日時順でソート",
+  "sortByLastVisited": "日時順でソート",
   "Time": "日時",
-  "Export history": "履歴をエクスポート",
+  "exportHistory": "履歴をエクスポート",
-  "Import history": "履歴をインポート",
+  "importHistory": "履歴をインポート",
-  "Clear history": "履歴をクリア",
+  "clearHistory": "履歴をクリア",
-  "Refresh history": "履歴を更新",
+  "refreshHistory": "履歴を更新",
   "noHistory": "履歴はありません",
   "Import from browser": "ブラウザからインポート",
   "releases": "リリース",

public/locales/ko.json

@@ -15,16 +15,16 @@
   "or": "또는",
   "signOut": "로그아웃",
   "exploreFeatures": "모든 기능 둘러보기",
-  "Select tags...": "태그 선택하기",
+  "selectTags": "태그 선택하기",
-  "Search keyword...": "키워드 검색하기",
+  "searchKeywords": "키워드 검색하기",
-  "Sort by title": "제목 기준 정렬",
+  "sortByTitle": "제목 기준 정렬",
   "Title": "제목",
-  "Sort by time": "시간 기준 정렬",
+  "sortByLastVisited": "시간 기준 정렬",
   "Time": "시간",
-  "Export history": "기록 내보내기",
+  "exportHistory": "기록 내보내기",
-  "Import history": "기록 불러오기",
+  "importHistory": "기록 불러오기",
-  "Clear history": "기록 초기화",
+  "clearHistory": "기록 초기화",
-  "Refresh history": "기록 새로고침",
+  "refreshHistory": "기록 새로고침",
   "noHistory": "기록 없음",
   "Import from browser": "브라우저에서 불러오기",
   "releases": "릴리즈",

public/locales/nl.json

@@ -15,16 +15,16 @@
   "or": "of",
   "signOut": "Uitloggen",
   "exploreFeatures": "Ontdek alle features",
-  "Select tags...": "Selecteer tags...",
+  "selectTags": "Selecteer tags...",
-  "Search keyword...": "Zoeken op keyword...",
+  "searchKeywords": "Zoeken op keyword...",
-  "Sort by title": "Sorteren op titel",
+  "sortByTitle": "Sorteren op titel",
   "Title": "Titel",
-  "Sort by time": "Sorteren op tijd",
+  "sortByLastVisited": "Sorteren op tijd",
   "Time": "Tijd",
-  "Export history": "Exporteer geschiedenis",
+  "exportHistory": "Exporteer geschiedenis",
-  "Import history": "Importeer geschiedenis",
+  "importHistory": "Importeer geschiedenis",
-  "Clear history": "Verwijder geschiedenis",
+  "clearHistory": "Verwijder geschiedenis",
-  "Refresh history": "Ververs geschiedenis",
+  "refreshHistory": "Ververs geschiedenis",
   "noHistory": "Geen geschidenis gevonden",
   "Import from browser": "Importeer van browser",
   "releases": "Versies",

public/locales/pl.json

@@ -15,16 +15,16 @@
   "or": "lub",
   "signOut": "Wyloguj się",
   "exploreFeatures": "Przeglądaj wszystkie funkcje",
-  "Select tags...": "Wybierz tagi...",
+  "selectTags": "Wybierz tagi...",
-  "Search keyword...": "Znajdź kluczowe słowo...",
+  "searchKeywords": "Znajdź kluczowe słowo...",
-  "Sort by title": "Sortuj według tytułu",
+  "sortByTitle": "Sortuj według tytułu",
   "Title": "Tytuł",
-  "Sort by time": "Sortuj według czasu",
+  "sortByLastVisited": "Sortuj według czasu",
   "Time": "Czas",
-  "Export history": "Eksportuj historię",
+  "exportHistory": "Eksportuj historię",
-  "Import history": "Importuj historię",
+  "importHistory": "Importuj historię",
-  "Clear history": "Wyczyść historię",
+  "clearHistory": "Wyczyść historię",
-  "Refresh history": "Odśwież historię",
+  "refreshHistory": "Odśwież historię",
   "noHistory": "Brak historii",
   "Import from browser": "Importuj z przeglądarki",
   "releases": "Wydania",

public/locales/pt.json

@@ -15,16 +15,16 @@
   "or": "ou",
   "signOut": "Sair",
   "exploreFeatures": "Explore todas as funções",
-  "Select tags...": "Selecionar etiquetas...",
+  "selectTags": "Selecionar etiquetas...",
-  "Search keyword...": "Buscar palavra-chave...",
+  "searchKeywords": "Buscar palavra-chave...",
-  "Sort by title": "Ordenar por título",
+  "sortByTitle": "Ordenar por título",
   "Title": "Título",
-  "Sort by time": "Ordenar por hora",
+  "sortByLastVisited": "Ordenar por hora",
   "Time": "Hora",
-  "Export history": "Exportar histórico",
+  "exportHistory": "Exportar histórico",
-  "Import history": "Importar histórico",
+  "importHistory": "Importar histórico",
-  "Clear history": "Apagar histórico",
+  "clearHistory": "Apagar histórico",
-  "Refresh history": "Atualizar histórico",
+  "refreshHistory": "Atualizar histórico",
   "noHistory": "Nenhum histórico",
   "Import from browser": "Importar do navegador",
   "releases": "Lançamentos",

public/locales/ru.json

@@ -15,16 +15,16 @@
   "or": "или",
   "signOut": "Выйти",
   "exploreFeatures": "Изучите все возможности",
-  "Select tags...": "Выберите теги...",
+  "selectTags": "Выберите теги...",
-  "Search keyword...": "Поиск...",
+  "searchKeywords": "Поиск...",
-  "Sort by title": "Сортировка по заголовку",
+  "sortByTitle": "Сортировка по заголовку",
   "Title": "Заголовок",
-  "Sort by time": "Сортировка по времени",
+  "sortByLastVisited": "Сортировка по времени",
   "Time": "Время",
-  "Export history": "Экспорт истории",
+  "exportHistory": "Экспорт истории",
-  "Import history": "Импорт истории",
+  "importHistory": "Импорт истории",
-  "Clear history": "Очистить историю",
+  "clearHistory": "Очистить историю",
-  "Refresh history": "Обновить историю",
+  "refreshHistory": "Обновить историю",
   "noHistory": "Нет истории",
   "Import from browser": "Импорт из браузера",
   "releases": "Релизы",

public/locales/sk.json

@@ -15,16 +15,16 @@
   "or": "alebo",
   "signOut": "Odhlásiť sa",
   "exploreFeatures": "Preskúmať všetky funkcie",
-  "Select tags...": "Zvoliť štítky…",
+  "selectTags": "Zvoliť štítky…",
-  "Search keyword...": "Vyhľadať klúčové slovo …",
+  "searchKeywords": "Vyhľadať klúčové slovo …",
-  "Sort by title": "Zoradiť podľa názvu",
+  "sortByTitle": "Zoradiť podľa názvu",
   "Title": "Názov",
-  "Sort by time": "Zoradiť podľa času",
+  "sortByLastVisited": "Zoradiť podľa času",
   "Time": "Čas",
-  "Export history": "Exportovať históriu",
+  "exportHistory": "Exportovať históriu",
-  "Import history": "Importovať históriu",
+  "importHistory": "Importovať históriu",
-  "Clear history": "Odstrániť históriu",
+  "clearHistory": "Odstrániť históriu",
-  "Refresh history": "Aktualizovať históriu",
+  "refreshHistory": "Aktualizovať históriu",
   "noHistory": "Žiadna história",
   "Import from browser": "Importovať z prehliadača",
   "releases": "Vydania",

public/locales/sr.json

@@ -15,16 +15,16 @@
   "or": "или",
   "signOut": "Одјави се",
   "exploreFeatures": "Истражи све могућности",
-  "Select tags...": "Одабери тагове...",
+  "selectTags": "Одабери тагове...",
-  "Search keyword...": "Претрага по кључној речи...",
+  "searchKeywords": "Претрага по кључној речи...",
-  "Sort by title": "Редослед по наслову",
+  "sortByTitle": "Редослед по наслову",
   "Title": "Наслов",
-  "Sort by time": "Редослед по времену",
+  "sortByLastVisited": "Редослед по времену",
   "Time": "време",
-  "Export history": "Извези историјат",
+  "exportHistory": "Извези историјат",
-  "Import history": "Увези историјат",
+  "importHistory": "Увези историјат",
-  "Clear history": "Очисти историју",
+  "clearHistory": "Очисти историју",
-  "Refresh history": "Освежи историју",
+  "refreshHistory": "Освежи историју",
   "noHistory": "Нема историје",
   "Import from browser": "Увези из прегледача",
   "releases": "Издања",

public/locales/sv.json

@@ -15,16 +15,16 @@
   "or": "eller",
   "signOut": "Logga ut",
   "exploreFeatures": "Upptäck alla funktioner",
-  "Select tags...": "Välj taggar...",
+  "selectTags": "Välj taggar...",
-  "Search keyword...": "Sök nyckelord...",
+  "searchKeywords": "Sök nyckelord...",
-  "Sort by title": "Sortera titlar",
+  "sortByTitle": "Sortera titlar",
   "Title": "Titel",
-  "Sort by time": "Sortera kronologiskt",
+  "sortByLastVisited": "Sortera kronologiskt",
   "Time": "Tid",
-  "Export history": "Exporthistorik",
+  "exportHistory": "Exporthistorik",
-  "Import history": "Importhistorik",
+  "importHistory": "Importhistorik",
-  "Clear history": "Rensa historik",
+  "clearHistory": "Rensa historik",
-  "Refresh history": "Uppdatera historik",
+  "refreshHistory": "Uppdatera historik",
   "noHistory": "Ingen historik",
   "Import from browser": "Importera från webbläsare",
   "releases": "Lanseringar",

public/locales/tr.json

@@ -15,16 +15,16 @@
   "or": "veya",
   "signOut": "Çıkış Yap",
   "exploreFeatures": "Özellikleri keşfet",
-  "Select tags...": "Etiketleri seçin...",
+  "selectTags": "Etiketleri seçin...",
-  "Search keyword...": "Anahtar kelimeleri arayın...",
+  "searchKeywords": "Anahtar kelimeleri arayın...",
-  "Sort by title": "Başlığa göre sırala",
+  "sortByTitle": "Başlığa göre sırala",
   "Title": "Başlık",
-  "Sort by time": "Zamana göre sırala",
+  "sortByLastVisited": "Zamana göre sırala",
   "Time": "Zaman",
-  "Export history": "Geçmişe dışa aktar",
+  "exportHistory": "Geçmişe dışa aktar",
-  "Import history": "Geçmişi içe aktar",
+  "importHistory": "Geçmişi içe aktar",
-  "Clear history": "Geçmişi temizle",
+  "clearHistory": "Geçmişi temizle",
-  "Refresh history": "Geçmişi yenile",
+  "refreshHistory": "Geçmişi yenile",
   "noHistory": "Geçmiş yok",
   "Import from browser": "Tarayıcıdan içe aktar",
   "releases": "Sürümler",

public/locales/uk.json

@@ -15,16 +15,16 @@
   "or": "або",
   "signOut": "Вийти",
   "exploreFeatures": "Дослідити всі можливості",
-  "Select tags...": "Вибрати теги...",
+  "selectTags": "Вибрати теги...",
-  "Search keyword...": "Пошук...",
+  "searchKeywords": "Пошук...",
-  "Sort by title": "Сортувати по заголовку",
+  "sortByTitle": "Сортувати по заголовку",
   "Title": "Заголовок",
-  "Sort by time": "Сортувати по часу",
+  "sortByLastVisited": "Сортувати по часу",
   "Time": "Час",
-  "Export history": "Еспортувати історію",
+  "exportHistory": "Еспортувати історію",
-  "Import history": "Імпортувати історію",
+  "importHistory": "Імпортувати історію",
-  "Clear history": "Очистити історію",
+  "clearHistory": "Очистити історію",
-  "Refresh history": "Оновити історію",
+  "refreshHistory": "Оновити історію",
   "noHistory": "Історія відсутня",
   "Import from browser": "Імпортувати з браузера",
   "releases": "Релізи",

public/locales/vi.json

@@ -15,16 +15,16 @@
   "or": "hoặc",
   "signOut": "Đăng xuất",
   "exploreFeatures": "Khám phá tất cả tính năng",
-  "Select tags...": "Chọn tag",
+  "selectTags": "Chọn tag",
-  "Search keyword...": "Tìm kiếm",
+  "searchKeywords": "Tìm kiếm",
-  "Sort by title": "Sắp xếp theo tiêu đề",
+  "sortByTitle": "Sắp xếp theo tiêu đề",
   "Title": "Tiêu đề",
-  "Sort by time": "Sắp xếp theo thời gian",
+  "sortByLastVisited": "Sắp xếp theo thời gian",
   "Time": "Thời gian",
-  "Export history": "Xuất lịch sử",
+  "exportHistory": "Xuất lịch sử",
-  "Import history": "Nhập lịch sử",
+  "importHistory": "Nhập lịch sử",
-  "Clear history": "Xóa lịch sử",
+  "clearHistory": "Xóa lịch sử",
-  "Refresh history": "Làm mới lịch sử",
+  "refreshHistory": "Làm mới lịch sử",
   "noHistory": "Không có lịch sử",
   "Import from browser": "Nhập từ trình duyệt",
   "releases": "Xuất bản",

public/locales/zh-CN.json

@@ -15,16 +15,16 @@
   "or": "或",
   "signOut": "登出",
   "exploreFeatures": "探索所有功能",
-  "Select tags...": "选择标签...",
+  "selectTags": "选择标签...",
-  "Search keyword...": "搜索关键字...",
+  "searchKeywords": "搜索关键字...",
-  "Sort by title": "按标题排序",
+  "sortByTitle": "按标题排序",
   "Title": "标题",
-  "Sort by time": "按时间排序",
+  "sortByLastVisited": "按时间排序",
   "Time": "时间",
-  "Export history": "导出历史",
+  "exportHistory": "导出历史",
-  "Import history": "导入历史",
+  "importHistory": "导入历史",
-  "Clear history": "清空历史",
+  "clearHistory": "清空历史",
-  "Refresh history": "刷新历史",
+  "refreshHistory": "刷新历史",
   "noHistory": "无历史记录",
   "Import from browser": "从浏览器导入",
   "releases": "版本",

public/locales/zh-TW.json

@@ -15,16 +15,16 @@
   "or": "或",
   "signOut": "登出",
   "exploreFeatures": "探索所有功能",
-  "Select tags...": "選擇標籤...",
+  "selectTags": "選擇標籤...",
-  "Search keyword...": "搜尋關鍵字...",
+  "searchKeywords": "搜尋關鍵字...",
-  "Sort by title": "用標題排序",
+  "sortByTitle": "用標題排序",
   "Title": "標題",
-  "Sort by time": "用時間排序",
+  "sortByLastVisited": "用時間排序",
   "Time": "時間",
-  "Export history": "匯出紀錄",
+  "exportHistory": "匯出紀錄",
-  "Import history": "匯入紀錄",
+  "importHistory": "匯入紀錄",
-  "Clear history": "清空紀錄",
+  "clearHistory": "清空紀錄",
-  "Refresh history": "更新紀錄",
+  "refreshHistory": "更新紀錄",
   "noHistory": "沒有紀錄",
   "Import from browser": "從瀏覽器匯入",
   "releases": "版本",

src/components/icon-button/icon-button.scss

@@ -0,0 +1,20 @@
+.btn-icon {
+  padding: 0.375rem 0.375rem;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  display: flex;
+
+  .icon-part {
+    padding: 0.375rem 0.375rem;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    display: flex;
+
+    .social-icon {
+      font-size: 1.5em;
+    }
+  }
+
+  .text-part {
+    padding: 0.375rem 0.75rem;
+  }
+}
+

src/components/icon-button/icon-button.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import "./icon-button.scss";
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
+import {Button, ButtonProps} from "react-bootstrap";
+
+export interface SocialButtonProps extends ButtonProps {
+    icon: IconProp
+    onClick?: () => void
+}
+
+export const IconButton: React.FC<SocialButtonProps> = ({icon, children, variant, onClick}) => {
+    return (
+        <Button variant={variant} className={"btn-icon p-0 d-inline-flex align-items-stretch"}
+                onClick={() => onClick?.()}>
+            <span className="icon-part d-flex align-items-center">
+                <FontAwesomeIcon icon={icon} className={"icon"}/>
+            </span>
+            <span className="text-part d-flex align-items-center">
+                {children}
+            </span>
+        </Button>
+    )
+}

src/components/landing/layout/style/index.scss

@@ -1,4 +1,5 @@
 @import "../../../../../node_modules/bootstrap/scss/bootstrap";
+@import '../../../../../node_modules/react-bootstrap-typeahead/css/Typeahead';
 @import "font-pack";
 //@import "cover.scss";
 

src/components/landing/pages/history/common/close-button.tsx

@@ -1,14 +1,21 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React from "react";
 import "./close-button.scss"
+import {Button} from "react-bootstrap";
 
-const CloseButton: React.FC = () => {
+export interface CloseButtonProps {
+    isDark: boolean;
+}
+
+const CloseButton: React.FC<CloseButtonProps> = ({isDark}) => {
     return (
-        <FontAwesomeIcon
+        <Button variant={isDark ? "secondary" : "light"}>
-            className="history-close"
+            <FontAwesomeIcon
-            icon="times"
+                className="history-close"
-        />
+                icon="times"
+            />
+        </Button>
     );
 }
 
-export { CloseButton }
+export {CloseButton}

src/components/landing/pages/history/common/pin-button.tsx

@@ -1,20 +1,22 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React from "react";
 import "./pin-button.scss"
+import {Button} from "react-bootstrap";
 
 export interface PinButtonProps {
-    pin: boolean;
+    isPinned: boolean;
     onPinClick: () => void;
+    isDark: boolean;
 }
 
-const PinButton: React.FC<PinButtonProps> = ({pin, onPinClick}) => {
+export const PinButton: React.FC<PinButtonProps> = ({isPinned, onPinClick, isDark}) => {
     return (
-        <FontAwesomeIcon
+        <Button variant={isDark ? "secondary" : "light"}
-            icon="thumbtack"
+                onClick={onPinClick}>
-            className={`history-pin ${pin ? 'active' : ''}`}
+            <FontAwesomeIcon
-            onClick={onPinClick}
+                icon="thumbtack"
-        />
+                className={`history-pin ${isPinned ? 'active' : ''}`}
+            />
+        </Button>
     );
 }
-
-export { PinButton }

src/components/landing/pages/history/history-card/history-card.tsx

@@ -13,12 +13,12 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({entry, onPinClick}) =>
     return (
         <div className="p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4">
             <Card className="p-0" text={"dark"} bg={"light"}>
-                <div className="d-flex justify-content-between p-2">
+                <div className="d-flex justify-content-between p-2 align-items-start">
-                    <PinButton pin={entry.pinned} onPinClick={() => {
+                    <PinButton isDark={false} isPinned={entry.pinned} onPinClick={() => {
                         onPinClick(entry.id)
                     }}/>
                     <Card.Title className="m-0 mt-3">{entry.title}</Card.Title>
-                    <CloseButton/>
+                    <CloseButton isDark={false}/>
                 </div>
                 <Card.Body>
                     <div className="text-black-50">
@@ -26,7 +26,8 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({entry, onPinClick}) =>
                         {formatHistoryDate(entry.lastVisited)}
                         <div>
                             {
-                                entry.tags.map((tag) => <Badge variant={"dark"} key={tag}>{tag}</Badge>)
+                                entry.tags.map((tag) => <Badge variant={"dark"} className={"mr-1 mb-1"}
+                                                               key={tag}>{tag}</Badge>)
                             }
                         </div>
                     </div>

src/components/landing/pages/history/history-content/history-content.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import {HistoryEntry, pinClick, ViewStateEnum} from "../history";
+import {HistoryEntry, pinClick} from "../history";
 import {HistoryTable} from "../history-table/history-table";
 import {Alert} from "react-bootstrap";
 import {Trans} from "react-i18next";
 import {HistoryCardList} from "../history-card/history-card-list";
+import {ViewStateEnum} from "../history-toolbar/history-toolbar";
 
 export interface HistoryContentProps {
     viewState: ViewStateEnum

src/components/landing/pages/history/history-table/history-table-row.tsx

@@ -12,11 +12,11 @@ export const HistoryTableRow: React.FC<HistoryEntryProps> = ({entry, onPinClick}
             <td>{entry.title}</td>
             <td>{formatHistoryDate(entry.lastVisited)}</td>
             <td>
-                <PinButton pin={entry.pinned} onPinClick={() => {
+                <PinButton isDark={true} isPinned={entry.pinned} onPinClick={() => {
                     onPinClick(entry.id)
                 }}/>
                 &nbsp;
-                <CloseButton/>
+                <CloseButton isDark={true}/>
             </td>
         </tr>
     )

src/components/landing/pages/history/history-table/history-table.tsx

@@ -2,15 +2,16 @@ import React from "react";
 import {Table} from "react-bootstrap"
 import {HistoryTableRow} from "./history-table-row";
 import {HistoryEntriesProps} from "../history-content/history-content";
+import {Trans} from "react-i18next";
 
 const HistoryTable: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
     return (
         <Table striped bordered hover size="sm" variant="dark">
             <thead>
             <tr>
-                <th>Title</th>
+                <th><Trans i18nKey={"title"}/></th>
-                <th>Last visited</th>
+                <th><Trans i18nKey={"lastVisit"}/></th>
-                <th>Actions</th>
+                <th><Trans i18nKey={"actions"}/></th>
             </tr>
             </thead>
             <tbody>

src/components/landing/pages/history/history-toolbar/history-toolbar.tsx

@@ -0,0 +1,128 @@
+import {Button, Form, FormControl, InputGroup, ToggleButton, ToggleButtonGroup} from "react-bootstrap";
+import React, {ChangeEvent, useEffect, useState} from "react";
+import {Trans, useTranslation} from "react-i18next";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {SortButton, SortModeEnum} from "../../../../sort-button/sort-button";
+import {Typeahead} from 'react-bootstrap-typeahead';
+import "./typeahead-hacks.scss";
+
+export type HistoryToolbarChange = (settings: HistoryToolbarState) => void;
+
+export interface HistoryToolbarState {
+    viewState: ViewStateEnum
+    titleSortDirection: SortModeEnum
+    lastVisitedSortDirection: SortModeEnum
+    keywordSearch: string
+    selectedTags: string[]
+}
+
+export enum ViewStateEnum {
+    card,
+    table
+}
+
+export interface HistoryToolbarProps {
+    onSettingsChange: HistoryToolbarChange
+    tags: string[]
+}
+
+export const initState: HistoryToolbarState = {
+    viewState: ViewStateEnum.card,
+    titleSortDirection: SortModeEnum.no,
+    lastVisitedSortDirection: SortModeEnum.no,
+    keywordSearch: "",
+    selectedTags: []
+}
+
+export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({onSettingsChange, tags}) => {
+
+    const [t] = useTranslation()
+    const [state, setState] = useState<HistoryToolbarState>(initState);
+
+    const titleSortChanged = (direction: SortModeEnum) => {
+        setState(prevState => ({
+            ...prevState,
+            titleSortDirection: direction,
+            lastVisitedSortDirection: SortModeEnum.no
+        }))
+    }
+
+    const lastVisitedSortChanged = (direction: SortModeEnum) => {
+        setState(prevState => ({
+            ...prevState,
+            lastVisitedSortDirection: direction,
+            titleSortDirection: SortModeEnum.no
+        }))
+    }
+
+    const keywordSearchChanged = (event: ChangeEvent<HTMLInputElement>) => {
+        setState(prevState => ({...prevState, keywordSearch: event.currentTarget.value}));
+    }
+
+    const toggleViewChanged = (newViewState: ViewStateEnum) => {
+        setState((prevState) => ({...prevState, viewState: newViewState}))
+    }
+
+    const selectedTagsChanged = (selected: string[]) => {
+        setState((prevState => ({...prevState, selectedTags: selected})))
+    }
+
+    useEffect(() => {
+        onSettingsChange(state);
+    }, [onSettingsChange, state])
+
+    return (
+        <Form inline={true}>
+            <InputGroup className={"mr-1"}>
+                <Typeahead id={"tagsSelection"} options={tags} multiple={true} placeholder={t("selectTags")}
+                           onChange={selectedTagsChanged}/>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <FormControl
+                    placeholder={t("searchKeywords")}
+                    aria-label={t("searchKeywords")}
+                    onChange={keywordSearchChanged}
+                />
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <SortButton onChange={titleSortChanged} direction={state.titleSortDirection} variant={"light"}><Trans
+                    i18nKey={"sortByTitle"}/></SortButton>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <SortButton onChange={lastVisitedSortChanged} direction={state.lastVisitedSortDirection}
+                            variant={"light"}><Trans i18nKey={"sortByLastVisited"}/></SortButton>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <Button variant={"light"} title={t("exportHistory")}>
+                    <FontAwesomeIcon icon={"download"}/>
+                </Button>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <Button variant={"light"} title={t("importHistory")}>
+                    <FontAwesomeIcon icon={"upload"}/>
+                </Button>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <Button variant={"light"} title={t("clearHistory")}>
+                    <FontAwesomeIcon icon={"trash"}/>
+                </Button>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <Button variant={"light"} title={t("refreshHistory")}>
+                    <FontAwesomeIcon icon={"sync"}/>
+                </Button>
+            </InputGroup>
+            <InputGroup className={"mr-1"}>
+                <ToggleButtonGroup type="radio" name="options" value={state.viewState}
+                                   onChange={(newViewState: ViewStateEnum) => {
+                                       toggleViewChanged(newViewState)
+                                   }}>
+                    <ToggleButton className={"btn-light"} value={ViewStateEnum.card}><Trans
+                        i18nKey={"cards"}/></ToggleButton>
+                    <ToggleButton className={"btn-light"} value={ViewStateEnum.table}><Trans
+                        i18nKey={"table"}/></ToggleButton>
+                </ToggleButtonGroup>
+            </InputGroup>
+        </Form>
+    )
+}

src/components/landing/pages/history/history-toolbar/typeahead-hacks.scss

@@ -0,0 +1,11 @@
+.rbt-input-multi {
+  min-width: 200px !important;
+
+  .rbt-input-main {
+    &[placeholder=""] {
+      width: 10px !important;
+    }
+
+    width: 100%;
+  }
+}

src/components/landing/pages/history/history.tsx

@@ -1,12 +1,8 @@
 import React, {Fragment, useEffect, useState} from 'react'
-import {ToggleButton, ToggleButtonGroup} from 'react-bootstrap';
 import {HistoryContent} from './history-content/history-content';
+import {HistoryToolbar, HistoryToolbarState, initState as toolbarInitState} from './history-toolbar/history-toolbar';
 import {loadHistoryFromLocalStore, sortAndFilterEntries} from "../../../../utils/historyUtils";
-
+import {Row} from 'react-bootstrap';
-export enum ViewStateEnum {
-    card,
-    table
-}
 
 export interface HistoryEntry {
     id: string,
@@ -20,7 +16,7 @@ export type pinClick = (entryId: string) => void;
 
 export const History: React.FC = () => {
     const [historyEntries, setHistoryEntries] = useState<HistoryEntry[]>([])
-    const [viewState, setViewState] = useState<ViewStateEnum>(ViewStateEnum.card)
+    const [viewState, setViewState] = useState<HistoryToolbarState>(toolbarInitState)
 
     useEffect(() => {
         const history = loadHistoryFromLocalStore();
@@ -28,6 +24,9 @@ export const History: React.FC = () => {
     }, [])
 
     useEffect(() => {
+        if (historyEntries === []) {
+            return;
+        }
         window.localStorage.setItem("history", JSON.stringify(historyEntries));
     }, [historyEntries])
 
@@ -42,16 +41,25 @@ export const History: React.FC = () => {
         })
     }
 
+    const tags = historyEntries.map(entry => entry.tags)
+        .reduce((a, b) => ([...a, ...b]), [])
+        .filter((value, index, array) => {
+            if (index === 0) {
+                return true;
+            }
+            return (value !== array[index - 1])
+        })
+    const entriesToShow = sortAndFilterEntries(historyEntries, viewState);
+
     return (
         <Fragment>
             <h1>History</h1>
-            <ToggleButtonGroup type="radio" name="options" defaultValue={ViewStateEnum.card} className="mb-2"
+            <Row className={"justify-content-center mb-3"}>
-                               onChange={(newState: ViewStateEnum) => setViewState(newState)}>
+                <HistoryToolbar onSettingsChange={setViewState} tags={tags}/>
-                <ToggleButton value={ViewStateEnum.card}>Card</ToggleButton>
+            </Row>
-                <ToggleButton value={ViewStateEnum.table}>Table</ToggleButton>
-            </ToggleButtonGroup>
             <div className="d-flex flex-wrap justify-content-center">
-                <HistoryContent viewState={viewState} entries={sortAndFilterEntries(historyEntries)}
+                <HistoryContent viewState={viewState.viewState}
+                                entries={entriesToShow}
                                 onPinClick={pinClick}/>
             </div>
         </Fragment>

src/components/landing/pages/login/auth/social-link-button/social-link-button.scss

@@ -1,4 +1,4 @@
-.btn.btn-icon {
+.btn.social-link-button {
   color: #FFFFFF;
 
   @mixin button($color) {
@@ -8,6 +8,20 @@
     }
   }
 
+  .icon-part {
+    padding: 0.375rem 0.375rem;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    display: flex;
+
+    .social-icon {
+      font-size: 1.5em;
+    }
+  }
+
+  .text-part {
+    padding: 0.375rem 0.75rem;
+  }
+
   &.btn-social-dropbox {
     @include button(#1087DD);
   }
@@ -33,16 +47,3 @@
   }
 }
 
-.btn-social-button {
-  padding: 0.375rem 0.375rem;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-  display: flex;
-
-  .social-icon {
-    font-size: 1.5em;
-  }
-}
-
-.btn-social-text {
-  padding: 0.375rem 0.75rem;
-}

src/components/landing/pages/login/auth/social-link-button/social-link-button.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import "./icon-button.scss";
+import "./social-link-button.scss";
 import {IconProp} from "@fortawesome/fontawesome-svg-core";
 
 export interface SocialButtonProps {
@@ -10,14 +10,14 @@ export interface SocialButtonProps {
     title?: string
 }
 
-export const IconButton: React.FC<SocialButtonProps> = ({title, backgroundClass, href, icon, children}) => {
+export const SocialLinkButton: React.FC<SocialButtonProps> = ({title, backgroundClass, href, icon, children}) => {
     return (
         <a href={href} title={title}
-           className={"btn btn-icon p-0 d-inline-flex align-items-stretch " + backgroundClass}>
+           className={"btn social-link-button p-0 d-inline-flex align-items-stretch " + backgroundClass}>
-            <span className="btn-social-button d-flex align-items-center">
+            <span className="icon-part d-flex align-items-center">
                 <FontAwesomeIcon icon={icon} className={"social-icon"}/>
             </span>
-            <span className="btn-social-text d-flex align-items-center">
+            <span className="text-part d-flex align-items-center">
                 {children}
             </span>
         </a>

src/components/landing/pages/login/auth/via-one-click.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {IconProp} from "@fortawesome/fontawesome-svg-core";
-import {IconButton} from "./icon-button/icon-button";
+import {SocialLinkButton} from "./social-link-button/social-link-button";
 
 export enum OneClickType {
     'DROPBOX'="dropbox",
@@ -101,14 +101,14 @@ const ViaOneClick: React.FC<ViaOneClickProps> = ({oneClickType, optionalName}) =
     const {name, icon, className, url} = getMetadata(oneClickType);
     const text = !!optionalName ? optionalName : name;
     return (
-        <IconButton
+        <SocialLinkButton
             backgroundClass={className}
             icon={icon}
             href={url}
             title={text}
         >
             {text}
-        </IconButton>
+        </SocialLinkButton>
     )
 }
 

src/components/sort-button/sort-button.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
+import {ButtonProps} from "react-bootstrap";
+import {IconButton} from "../icon-button/icon-button";
+
+export enum SortModeEnum {
+    up = 1,
+    down = -1,
+    no = 0
+}
+
+const getIcon = (direction: SortModeEnum): IconProp => {
+    switch (direction) {
+        default:
+        case SortModeEnum.no:
+            return "sort";
+        case SortModeEnum.up:
+            return "sort-up";
+        case SortModeEnum.down:
+            return "sort-down";
+    }
+}
+
+export interface SortButtonProps extends ButtonProps {
+    onChange: (direction: SortModeEnum) => void
+    direction: SortModeEnum
+}
+
+const toggleDirection = (direction: SortModeEnum) => {
+    switch (direction) {
+        case SortModeEnum.no:
+            return SortModeEnum.up;
+        case SortModeEnum.up:
+            return SortModeEnum.down;
+        default:
+        case SortModeEnum.down:
+            return SortModeEnum.no;
+    }
+}
+
+export const SortButton: React.FC<SortButtonProps> = ({children, variant, onChange, direction}) => {
+    const toggleSort = () => {
+        onChange(toggleDirection(direction));
+    }
+
+    return <IconButton onClick={toggleSort} variant={variant} icon={getIcon(direction)}>{children}</IconButton>;
+}

src/initializers/fontAwesome.ts

@@ -6,14 +6,20 @@ import {
     faClock,
     faCloudDownloadAlt,
     faComment,
+    faDownload,
     faFileAlt,
     faGlobe,
     faPlus,
     faSignOutAlt,
+    faSort,
+    faSortDown,
+    faSortUp,
+    faSync,
     faThumbtack,
     faTimes,
     faTrash,
     faTv,
+    faUpload,
     faUsers,
 } from "@fortawesome/free-solid-svg-icons";
 import {
@@ -31,5 +37,5 @@ export function setUpFontAwesome() {
     library.add(faBolt, faPlus, faChartBar, faTv, faFileAlt, faCloudDownloadAlt,
         faTrash, faSignOutAlt, faComment, faDiscourse, faMastodon, faGlobe,
         faThumbtack, faClock, faTimes, faGithub, faGitlab, faGoogle, faFacebook,
-        faDropbox, faTwitter, faUsers, faAddressCard)
+        faDropbox, faTwitter, faUsers, faAddressCard, faSort, faDownload, faUpload, faTrash, faSync, faSortUp, faSortDown)
 }

src/utils/historyUtils.ts

@@ -1,24 +1,55 @@
 import {HistoryEntry} from "../components/landing/pages/history/history";
 import moment from "moment";
+import {HistoryToolbarState} from "../components/landing/pages/history/history-toolbar/history-toolbar";
+import {SortModeEnum} from "../components/sort-button/sort-button";
 
-export function sortAndFilterEntries(entries: HistoryEntry[]): HistoryEntry[] {
+export function sortAndFilterEntries(entries: HistoryEntry[], viewState: HistoryToolbarState): HistoryEntry[] {
-    return sortEntries(entries);
+    return sortEntries(filterByKeywordSearch(filterBySelectedTags(entries, viewState.selectedTags), viewState.keywordSearch), viewState);
 }
 
-function sortEntries(entries: HistoryEntry[]): HistoryEntry[] {
+function filterBySelectedTags(entries: HistoryEntry[], selectedTags: string[]): HistoryEntry[] {
-    return entries.sort((a, b) => {
+    return entries.filter(entry => {
-        if (a.pinned && !b.pinned) {
+            return (selectedTags.length === 0 || arrayCommonCheck(entry.tags, selectedTags))
+        }
+    )
+}
+
+function arrayCommonCheck<T>(array1: T[], array2: T[]): boolean {
+    const foundElement = array1.find((element1) =>
+        array2.find((element2) =>
+            element2 === element1
+        )
+    )
+    return !!foundElement;
+}
+
+function filterByKeywordSearch(entries: HistoryEntry[], keywords: string): HistoryEntry[] {
+    const searchTerm = keywords.toLowerCase();
+    return entries.filter(entry => entry.title.toLowerCase().indexOf(searchTerm) !== -1);
+}
+
+function sortEntries(entries: HistoryEntry[], viewState: HistoryToolbarState): HistoryEntry[] {
+    return entries.sort((firstEntry, secondEntry) => {
+        if (firstEntry.pinned && !secondEntry.pinned) {
             return -1;
         }
-        if (!a.pinned && b.pinned) {
+        if (!firstEntry.pinned && secondEntry.pinned) {
             return 1;
         }
-        if (a.lastVisited < b.lastVisited) {
+
-            return -1;
+        if (viewState.titleSortDirection !== SortModeEnum.no) {
+            return firstEntry.title.localeCompare(secondEntry.title) * viewState.titleSortDirection;
         }
-        if (a.lastVisited > b.lastVisited) {
+
-            return 1;
+        if (viewState.lastVisitedSortDirection !== SortModeEnum.no) {
+            if (firstEntry.lastVisited > secondEntry.lastVisited) {
+                return 1 * viewState.lastVisitedSortDirection;
+            }
+            if (firstEntry.lastVisited < secondEntry.lastVisited) {
+                return -1 * viewState.lastVisitedSortDirection;
+            }
         }
+
         return 0;
     })
 }
@@ -37,7 +68,7 @@ export interface OldHistoryEntry {
 
 export function loadHistoryFromLocalStore(): HistoryEntry[] {
     const historyJsonString = window.localStorage.getItem("history");
-    if (historyJsonString === null) {
+    if (!historyJsonString) {
         // if localStorage["history"] is empty we check the old localStorage["notehistory"]
         // and convert it to the new format
         const oldHistoryJsonString = window.localStorage.getItem("notehistory")

yarn.lock

@@ -1589,6 +1589,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/react-bootstrap-typeahead@^3.4.6":
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/@types/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.4.6.tgz#b97709ad10670ad277b2c7b2f0e6368f890bf849"
+  integrity sha512-3vrWrPNb2G+ieyWB1VtEPZH6E4NBcd2cVsacb6oUhBNU/D/ZYnUqnbmeTIKzIVXqEkdPtgARG45W1x7tUV9DGA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-bootstrap@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-bootstrap/-/react-bootstrap-1.0.1.tgz#3badd512fc37913b5e72f1ed94e3aacbd1452d97"
@@ -3019,7 +3026,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
+classnames@^2.2.0, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -3212,6 +3219,11 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.13.tgz#be1b1663b0e3f56cd5f7713082549f562a3477e2"
+  integrity sha512-o+w9w7A98aAFi/GjK8cxSV+CdASuPa2rR5UWs3+yHkJzWqaKoBEufFNWYaXInCSmUfDCVhesG+v9MTWqOjsxFg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3388,6 +3400,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
+  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
 cross-spawn@7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
@@ -3731,7 +3751,7 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-deep-equal@^1.0.1:
+deep-equal@^1.0.1, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -5661,7 +5681,7 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -6839,6 +6859,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -8132,6 +8157,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.4, popper.js@^1.15.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.25:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -8898,7 +8928,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9069,6 +9099,22 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-bootstrap-typeahead@^5.0.0-rc.1:
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/react-bootstrap-typeahead/-/react-bootstrap-typeahead-5.0.0-rc.1.tgz#f20b9d5a7a46783e886b1f79ed074e7e05582495"
+  integrity sha512-Crmguatcjaw9593MHBNQvsFSd0BFWsx74wC+txpLVpOCEB9JJ+pfkwGopbau3w1mYasZZ046ga7E6lAXmty7xA==
+  dependencies:
+    "@babel/runtime" "^7.3.4"
+    classnames "^2.2.0"
+    fast-deep-equal "^3.1.1"
+    invariant "^2.2.1"
+    lodash.debounce "^4.0.8"
+    prop-types "^15.5.8"
+    react-overlays "^2.0.0"
+    react-popper "^1.0.0"
+    scroll-into-view-if-needed "^2.2.20"
+    warning "^4.0.1"
+
 react-bootstrap@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.0.1.tgz#044b51f34a9db8e17dbfb321a71267a8d6ad11b4"
@@ -9151,6 +9197,19 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-overlays@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-2.1.1.tgz#ffe2090c4a10da6b8947a1c7b1a67d0457648a0d"
+  integrity sha512-gaQJwmb8Ij2IGVt4D1HmLtl4A0mDVYxlsv/8i0dHWK7Mw0kNat6ORelbbEWzaXTK1TqMeQtJw/jraL3WOADz3w==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    "@restart/hooks" "^0.3.12"
+    dom-helpers "^5.1.0"
+    popper.js "^1.15.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.0.0"
+    warning "^4.0.3"
+
 react-overlays@^3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-3.1.3.tgz#e6ac2b43fd2179924491bd794508072399940128"
@@ -9165,6 +9224,19 @@ react-overlays@^3.1.2:
     uncontrollable "^7.0.0"
     warning "^4.0.3"
 
+react-popper@^1.0.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
 react-redux@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
@@ -9874,6 +9946,13 @@ schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+scroll-into-view-if-needed@^2.2.20:
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.24.tgz#12bca532990769bd509115a49edcfa755e92a0ea"
+  integrity sha512-vsC6SzyIZUyJG8o4nbUDCiIwsPdH6W/FVmjT2avR2hp/yzS53JjGmg/bKD20TkoNajbu5dAQN4xR7yes4qhwtQ==
+  dependencies:
+    compute-scroll-into-view "^1.0.13"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -10917,6 +10996,11 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
   integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -11191,7 +11275,7 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.0, warning@^4.0.3:
+warning@^4.0.0, warning@^4.0.1, warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==