feature/editor-improvements (#289)

* pin editor buttons on scroll

* scaler scratch

* fix langauge assignment 1st pass

* set lang on navigate

* refactor/breakup router

* unify style for language selectro

* refactor/code-cleanup

* refactor/page specific components to page folder

* Fix time card layout issue

* fix timecard display

* update mobile cards / fix overflow errors

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/store/index.js

@@ -12,7 +12,7 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   plugins: [
     createPersistedState({
-      paths: ["userSettings", "language.lang", "siteSettings"],
+      paths: ["userSettings", "siteSettings"],
     }),
   ],
   modules: {

frontend/src/store/modules/language.js

@@ -1,7 +1,5 @@
-import VueI18n from "../../i18n";
-
+// This is the data store for the options for language selection. Property is reference only, you cannot set this property.
 const state = {
-  lang: "en-US",
   allLangs: [
     {
       name: "English",
@@ -42,33 +40,11 @@ const state = {
   ],
 };
 
-const mutations = {
-  setLang(state, payload) {
-    VueI18n.locale = payload;
-    state.lang = payload;
-  },
-};
-
-const actions = {
-  initLang({ getters }, { currentVueComponent }) {
-    VueI18n.locale = getters.getActiveLang;
-    currentVueComponent.$vuetify.lang.current = getters.getActiveLang;
-  },
-  setLang({ commit }, { language, currentVueComponent }) {
-    VueI18n.locale = language;
-    currentVueComponent.$vuetify.lang.current = language;
-    commit('setLang', language);
-  },
-};
-
 const getters = {
-  getActiveLang: state => state.lang,
   getAllLangs: state => state.allLangs,
 };
 
 export default {
   state,
-  mutations,
-  actions,
   getters,
 };

frontend/src/store/modules/siteSettings.js

@@ -1,8 +1,10 @@
 import { api } from "@/api";
+import VueI18n from "@/i18n";
+import Vuetify from "@/plugins/vuetify";
 
 const state = {
   siteSettings: {
-    language: "en",
+    language: "en-US",
     firstDayOfWeek: 0,
     showRecent: true,
     cardsPerSection: 9,
@@ -13,17 +15,20 @@ const state = {
 const mutations = {
   setSettings(state, payload) {
     state.siteSettings = payload;
+    VueI18n.locale = payload.language;
+    Vuetify.framework.lang.current = payload.language;
   },
 };
 
 const actions = {
-  async requestSiteSettings() {
+  async requestSiteSettings({ commit }) {
     let settings = await api.siteSettings.get();
-    this.commit("setSettings", settings);
+    commit("setSettings", settings);
   },
 };
 
 const getters = {
+  getActiveLang: state => state.siteSettings.language,
   getSiteSettings: state => state.siteSettings,
 };
 

frontend/src/store/modules/userSettings.js

@@ -1,5 +1,5 @@
 import { api } from "@/api";
-import Vuetify from "../../plugins/vuetify";
+import Vuetify from "@/plugins/vuetify";
 import axios from "axios";
 
 function inDarkMode(payload) {