feat: relocated page state from tabs into own store

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-underscore-dangle': ['error', { allow: ['_vm'] }],
     'no-param-reassign': ['error', {
       props: true,
       ignorePropertyModificationsFor: [

src/components/TabHeader.vue

@@ -9,7 +9,7 @@
       @click="$emit('doReload')"
     />
     <div :class="$style.title">
-      {{ item.title }}
+      {{ pageState.title }}
     </div>
     <title-bar-button
       icon="code-tags"
@@ -41,6 +41,9 @@ export default {
     isLayoutInverted() {
       return this.$store.getters['Settings/isLayoutInvertedForOs'];
     },
+    pageState() {
+      return this.$store.getters['Pages/state'](this.item.ident);
+    },
   },
 };
 </script>

src/components/TabMain.vue

@@ -86,23 +86,19 @@ export default {
       }
     });
 
-    this.$refs.view.addEventListener('page-title-updated', (view) => {
-      this.$store.commit('Tabs/update', {
-        ident: this.item.ident,
-        data: {
-          title: view.title,
-        },
+    this.$refs.view.addEventListener('page-title-updated', ({ title }) => {
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.ident,
+        data: { title },
       });
     });
 
-    this.$refs.view.addEventListener('page-favicon-updated', (view) => {
-      const favicon = view.favicons[0];
+    this.$refs.view.addEventListener('page-favicon-updated', ({ favicons }) => {
+      const [favicon] = favicons;
 
-      this.$store.commit('Tabs/update', {
-        ident: this.item.ident,
-        data: {
-          favicon,
-        },
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.ident,
+        data: { favicon },
       });
     });
 

src/components/TabsNav.vue

@@ -10,9 +10,7 @@
     <tabs-nav-item
       v-for="tab in tabList"
       :key="tab.ident"
-      :label="tab.label"
-      :image="tab.favicon"
-      :to="{ name: 'tabs', params: { ident: tab.ident } }"
+      :item="tab"
     />
   </vue-draggable>
 </template>

src/components/TabsNavItem.vue

@@ -1,53 +1,46 @@
 <template>
   <router-link
-    :to="to"
+    :to="{ name: 'tabs', params: { ident: item.ident } }"
     :class="$style.item"
     :active-class="$style.active"
     tag="button"
   >
     <div
       :class="{
         [$style.thumb]: true,
-        [$style.thumbIsImage]: image,
-        [$style.thumbIsIcon]: !image,
+        [$style.thumbIsImage]: pageState.favicon,
+        [$style.thumbIsIcon]: !pageState.favicon,
       }"
     >
       <img
-        v-if="image"
-        :src="image"
+        v-if="pageState.favicon"
+        :src="pageState.favicon"
         :class="$style.image"
       >
       <app-icon
         v-else
-        :face="icon"
+        face="tab"
       />
     </div>
     <div :class="$style.label">
-      {{ label }}
+      {{ item.label }}
     </div>
   </router-link>
 </template>
 
 <script>
 export default {
   props: {
-    icon: {
-      type: String,
-      default: 'tab',
-    },
-    image: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    to: {
+    item: {
       type: Object,
       default: () => ({}),
     },
   },
+  computed: {
+    pageState() {
+      return this.$store.getters['Pages/state'](this.item.ident);
+    },
+  },
 };
 </script>
 

src/store/modules/Pages.js

@@ -0,0 +1,24 @@
+export default {
+  namespaced: true,
+  state: {
+    pages: [],
+  },
+  getters: {
+    state({ pages }) {
+      return tabId => pages.find(page => page.tabId === tabId) || {};
+    },
+  },
+  mutations: {
+    setState({ pages }, { tabId, data = {} }) {
+      const pageIndex = pages.findIndex(page => page.tabId === tabId);
+      const pageState = pages[pageIndex] || {};
+      const newState = { ...pageState, ...data };
+
+      if (pageIndex !== -1) {
+        this._vm.$set(pages, pageIndex, newState);
+      } else {
+        pages.push({ tabId, ...newState });
+      }
+    },
+  },
+};

src/store/modules/Tabs.js

@@ -41,11 +41,7 @@ export default {
     create(state, item) {
       db()
         .get('tabs')
-        .push({
-          ...item,
-          title: '',
-          favicon: '',
-        })
+        .push(item)
         .write();
 
       db()

src/store/modules/index.js

@@ -1,10 +1,12 @@
 import Notifications from './Notifications';
+import Pages from './Pages';
 import Settings from './Settings';
 import Tabs from './Tabs';
 import Window from './Window';
 
 export default {
   Notifications,
+  Pages,
   Settings,
   Tabs,
   Window,