viewer: major code and search mode overhaul

Updated libraries to the lastest version
SCSS Formatter as suggested VSC extensions
Renamed toolbar-color by scrollbar-color
LD components use Props in favor of touching the stores directly (when possible)
Moved most common algorithms to a "services" folder
Complete search overhaul (lots of code change)

3 files changed, 13 insertions, 10 deletions

diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts
index 74b6176..ebdf64e 100644
--- a/viewer/src/plugins/buefy.ts
+++ b/viewer/src/plugins/buefy.ts
@@ -24,7 +24,7 @@ import Taginput from 'buefy/src/components/taginput';
 // @ts-ignore
 import Loading from 'buefy/src/components/loading';
 // @ts-ignore
-import Radio from 'buefy/src/components/radio';
+import Button from 'buefy/src/components/button';
 // @ts-ignore
 import SnackBar from 'buefy/src/components/snackbar';
 
@@ -32,7 +32,7 @@ import "@/assets/scss/buefy.scss";
 
 Vue.use(Taginput);
 Vue.use(Loading);
-Vue.use(Radio);
+Vue.use(Button);
 Vue.use(SnackBar);
 
 declare module 'vue/types/vue' {
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index e8848f9..cc8b7ab 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -23,6 +23,7 @@ import { library, config } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
     faFolder,
+    faEraser,
     faSearch,
     faPlus,
     faMinus,
@@ -37,6 +38,7 @@ import {
 
 library.add(
     faFolder,
+    faEraser,
     faSearch,
     faPlus,
     faMinus,
diff --git a/viewer/src/plugins/router.ts b/viewer/src/plugins/router.ts
index 8b4a8dc..00979c9 100644
--- a/viewer/src/plugins/router.ts
+++ b/viewer/src/plugins/router.ts
@@ -18,19 +18,20 @@
 */
 
 import Vue from "vue";
-import VueRouter from "vue-router";
-import MainGallery from "@/views/MainGallery.vue";
+import VueRouter, { RouteConfig } from "vue-router";
+import GalleryNavigation from "@/views/GalleryNavigation.vue";
 
 Vue.use(VueRouter);
 
-// async way : component: () => import(/* webpackChunkName: "MainGallery" */ "@/views/MainGallery.vue"),
-
-const routes = [
+const routes: RouteConfig[] = [
   {
     path: "*",
-    name: "MainGallery",
-    component: MainGallery,
-    props: true
+    name: "GalleryNavigation",
+    component: GalleryNavigation,
+    props: (route) => ({
+      path: route.params.pathMatch,
+      query: Object.keys(route.query),
+    }),
   },
 ];