From ae54bc6aaec2b253efdaf3bb5af01f5f8fa461f7 Mon Sep 17 00:00:00 2001
From: Elvanos <xfenix@seznam.cz>
Date: Sat, 3 Apr 2021 01:33:49 +0200
Subject: [PATCH] 0.1.5 - first code cleanup stage

---
 package.json                                  |   2 +-
 src/components/AppHeader.vue                  |   4 +-
 src/components/appHeader/AppControl.vue       | 129 +++++++----
 src/components/appHeader/AppWindowButtons.vue |  72 ++++--
 src/components/appHeader/TopTabs.vue          |  96 +++++---
 src/components/dialogs/AboutApp.vue           |  13 ++
 .../dialogs/AdvancedSearchGuide.vue           |  11 +-
 src/components/dialogs/ChangeLog.vue          |  11 +-
 src/components/dialogs/CloseDocumentCheck.vue |  16 +-
 .../dialogs/DeleteDocumentCheck.vue           |   9 +
 src/components/dialogs/ExistingDocument.vue   | 200 ++++++++++++-----
 src/components/dialogs/ImportProjectCheck.vue |  18 +-
 src/components/dialogs/KeybindCheatsheet.vue  |  24 +-
 src/components/dialogs/License.vue            |  11 +-
 src/components/dialogs/NewDocument.vue        | 127 ++++++++---
 src/components/dialogs/NewProjectCheck.vue    |  15 ++
 src/components/dialogs/ProgramSettings.vue    | 211 +++++++++---------
 src/components/dialogs/ProjectCloseCheck.vue  |  72 ++++--
 src/components/dialogs/TipsTricksTrivia.vue   |  14 +-
 src/components/dialogs/_DialogBase.ts         |  30 +++
 src/css/app.scss                              |   2 +-
 src/documents/advancedSearchGuide.md          |   1 +
 src/documents/changeLog.md                    |  22 ++
 src/layouts/DocumentLayout.vue                |   6 +-
 src/layouts/ProjectManagentLayout.vue         |   2 +-
 src/pages/DocumentDisplay.vue                 |   2 +-
 .../databaseManager/blueprints/characters.ts  |   4 +-
 .../databaseManager/blueprints/languages.ts   |   4 +-
 .../databaseManager/blueprints/races.ts       |   2 +-
 suggestionList.md                             |   4 +
 30 files changed, 765 insertions(+), 369 deletions(-)

diff --git a/package.json b/package.json
index 1a34bc8..6f6d63f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fantasiaarchive",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A database manager for world building",
   "productName": "Fantasia archive",
   "author": "Elvanos <elvanos66@gmail.com>",
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 4b133a2..ac00bd1 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -8,7 +8,6 @@
     <div class="appHeaderInner">
       <appControl
         class="appControl"
-        :is-project="isProject"
       />
       <topTabs
         class="topTabs"
@@ -21,7 +20,7 @@
 
 <script lang="ts">
 
-import { Component, Prop } from "vue-property-decorator"
+import { Component } from "vue-property-decorator"
 
 import BaseClass from "src/BaseClass"
 import topTabs from "src/components/appHeader/TopTabs.vue"
@@ -34,7 +33,6 @@ import appControl from "src/components/appHeader/AppControl.vue"
   }
 })
 export default class AppHeader extends BaseClass {
-  @Prop() readonly isProject!: boolean
 }
 </script>
 
diff --git a/src/components/appHeader/AppControl.vue b/src/components/appHeader/AppControl.vue
index a1be8df..7245fe4 100644
--- a/src/components/appHeader/AppControl.vue
+++ b/src/components/appHeader/AppControl.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div
-    :class="{'AppControl': isProject}"
+    :class="{'AppControl': !isFrontpage}"
   >
 
     <!-- New document dialog -->
@@ -378,7 +378,7 @@
 
 <script lang="ts">
 
-import { Component, Prop, Watch } from "vue-property-decorator"
+import { Component, Watch } from "vue-property-decorator"
 
 import BaseClass from "src/BaseClass"
 import projectCloseCheckDialog from "src/components/dialogs/ProjectCloseCheck.vue"
@@ -395,9 +395,7 @@ import tipsTricksTriviaDialog from "src/components/dialogs/TipsTricksTrivia.vue"
 import licenseDialog from "src/components/dialogs/License.vue"
 
 import { Loading, QSpinnerGears } from "quasar"
-
 import { retrieveCurrentProjectName, exportProject } from "src/scripts/projectManagement/projectManagent"
-
 import { toggleDevTools } from "src/scripts/utilities/devTools"
 
 import appLogo from "src/assets/appLogo.png"
@@ -419,21 +417,93 @@ import appLogo from "src/assets/appLogo.png"
   }
 })
 export default class AppControl extends BaseClass {
-  @Prop() readonly isProject!: boolean
+  /****************************************************************/
+  // Import handling
+  /****************************************************************/
 
+  /**
+   * Toggles the developer tools on and off
+   */
   toggleDevTools = toggleDevTools
-  retrieveCurrentProjectName = retrieveCurrentProjectName
-  projectExists: undefined | string | boolean = false
-  isFrontpage = true
-  isProjectPage = true
-  projectName = ""
 
+  /**
+   * Retrieves the current project name
+   */
+  retrieveCurrentProjectName = retrieveCurrentProjectName
+
+  /**
+   * Just an image
+   */
   appLogo = appLogo
 
+  /****************************************************************/
+  // Basic component functionality
+  /****************************************************************/
+
+  /**
+   * Determines if the project exists or not
+   */
+  projectExists: undefined | string | boolean = false
+
+  /**
+   * Determines if we are on frontpage or not
+   */
+  isFrontpage = true
+
+  /**
+   * Determines if we are on project page or not
+   */
+  isProjectPage = true
+
+  /**
+   * Current project name
+   */
+  projectName = ""
+
   created () {
     this.checkProjectStatus().catch(e => console.log(e))
   }
 
+  async checkProjectStatus () {
+    this.projectName = await retrieveCurrentProjectName()
+    this.projectExists = !!(await retrieveCurrentProjectName())
+    this.isFrontpage = (this.$route.path === "/")
+    this.isProjectPage = (this.$route.path === "/project")
+  }
+
+  /****************************************************************/
+  // Local keybinds
+  /****************************************************************/
+
+  @Watch("SGET_getCurrentKeyBindData", { deep: true })
+  processKeyPush () {
+    // Keybind cheatsheet
+    if (this.determineKeyBind("openKeybindsCheatsheet") && !this.SGET_getDialogsState) {
+      this.keybindsDialogAssignUID()
+    }
+
+    // App options
+    if (this.determineKeyBind("openAppOptions") && !this.SGET_getDialogsState) {
+      this.programSettingsDialogAssignUID()
+    }
+  }
+
+  /****************************************************************/
+  // Navigate to project page action
+  /****************************************************************/
+
+  navigateToProjectPage () {
+    this.$router.push({ path: "/project" }).catch((e: {name: string}) => {
+      if (e && e.name !== "NavigationDuplicated") {
+        console.log(e)
+      }
+    })
+  }
+
+  /****************************************************************/
+  // Export project action
+  /****************************************************************/
+
   async commenceExport () {
     const projectName = await retrieveCurrentProjectName()
     const setup = {
@@ -448,12 +518,9 @@ export default class AppControl extends BaseClass {
     exportProject(projectName, Loading, setup, this.$q)
   }
 
-  async checkProjectStatus () {
-    this.projectName = await retrieveCurrentProjectName()
-    this.projectExists = !!(await retrieveCurrentProjectName())
-    this.isFrontpage = (this.$route.path === "/")
-    this.isProjectPage = (this.$route.path === "/project")
-  }
+  /****************************************************************/
+  // Close project dialog
+  /****************************************************************/
 
   projectCloseCheckDialogTrigger: string | false = false
   projectCloseCheckDialogClose () {
@@ -464,13 +531,9 @@ export default class AppControl extends BaseClass {
     this.projectCloseCheckDialogTrigger = this.generateUID()
   }
 
-  navigateToProjectPage () {
-    this.$router.push({ path: "/project" }).catch((e: {name: string}) => {
-      if (e && e.name !== "NavigationDuplicated") {
-        console.log(e)
-      }
-    })
-  }
+  /****************************************************************/
+  // Import project dialog
+  /****************************************************************/
 
   importProjectDialogTrigger: string | false = false
   importProjectDialogClose () {
@@ -481,6 +544,10 @@ export default class AppControl extends BaseClass {
     this.importProjectDialogTrigger = this.generateUID()
   }
 
+  /****************************************************************/
+  // New project dialog
+  /****************************************************************/
+
   newProjectDialogTrigger: string | false = false
   newProjectDialogClose () {
     this.newProjectDialogTrigger = false
@@ -490,22 +557,6 @@ export default class AppControl extends BaseClass {
     this.newProjectDialogTrigger = this.generateUID()
   }
 
-  /**
-   * Local keybinds
-   */
-  @Watch("SGET_getCurrentKeyBindData", { deep: true })
-  processKeyPush () {
-    // Keybind cheatsheet
-    if (this.determineKeyBind("openKeybindsCheatsheet") && !this.SGET_getDialogsState) {
-      this.keybindsDialogAssignUID()
-    }
-
-    // App options
-    if (this.determineKeyBind("openAppOptions") && !this.SGET_getDialogsState) {
-      this.programSettingsDialogAssignUID()
-    }
-  }
-
   /****************************************************************/
   // Keybings cheatsheet dialog
   /****************************************************************/
diff --git a/src/components/appHeader/AppWindowButtons.vue b/src/components/appHeader/AppWindowButtons.vue
index 47e567d..3cb21ea 100644
--- a/src/components/appHeader/AppWindowButtons.vue
+++ b/src/components/appHeader/AppWindowButtons.vue
@@ -18,7 +18,7 @@
       :class="{'minimize': osSystem === 'darwin'}"
       dark
       size='sm'
-      @click="minimize">
+      @click="minimizeWindow">
         <q-icon name="mdi-window-minimize"></q-icon>
     </q-btn>
 
@@ -29,7 +29,7 @@
       :class="{'minMax': osSystem === 'darwin'}"
       dark
       size='sm'
-      @click="maximize">
+      @click="resizeWindow">
         <q-icon :name="(isMaximized)? 'mdi-window-restore' : 'mdi-window-maximize'"></q-icon>
     </q-btn>
 
@@ -61,37 +61,63 @@ import projectCloseCheckDialog from "src/components/dialogs/ProjectCloseCheck.vu
   components: { projectCloseCheckDialog }
 })
 export default class AppWindowButtons extends BaseClass {
+  /****************************************************************/
+  // Basic component functionality
+  /****************************************************************/
+
+  /**
+   * Determines if the window is maximed or not
+   */
   isMaximized = false
 
+  /**
+   * Gets the currently used OS
+   */
   osSystem = remote.process.platform
 
+  /**
+   * Currently opened window
+   */
+  currentWindow = remote.getCurrentWindow()
+
+  /**
+   * Checks if the window is currently maximized or not
+   */
+  checkIfMaximized () {
+    this.isMaximized = this.currentWindow.isMaximized()
+  }
+
+  /**
+   * Minimizes the current window
+   */
+  minimizeWindow () {
+    this.currentWindow.minimize()
+  }
+
+  /**
+   * Resizes the window to either smaller or maximized
+   */
+  resizeWindow () {
+    if (this.currentWindow.isMaximized()) {
+      this.currentWindow.unmaximize()
+    }
+    else {
+      this.currentWindow.maximize()
+    }
+  }
+
   created () {
-    window.addEventListener("resize", this.checkMaximized)
-    this.checkMaximized()
+    window.addEventListener("resize", this.checkIfMaximized)
+    this.checkIfMaximized()
   }
 
   destroyed () {
-    window.addEventListener("resize", this.checkMaximized)
+    window.addEventListener("resize", this.checkIfMaximized)
   }
 
-  checkMaximized () {
-    this.isMaximized = remote.getCurrentWindow().isMaximized()
-  }
-
-  minimize () {
-    remote.getCurrentWindow().minimize()
-  }
-
-  maximize () {
-    const win = remote.getCurrentWindow()
-
-    if (win.isMaximized()) {
-      win.unmaximize()
-    }
-    else {
-      win.maximize()
-    }
-  }
+  /****************************************************************/
+  // Close project dialog
+  /****************************************************************/
 
   projectCloseCheckDialogTrigger: string | false = false
   projectCloseCheckDialogClose () {
diff --git a/src/components/appHeader/TopTabs.vue b/src/components/appHeader/TopTabs.vue
index a468160..da90ec9 100644
--- a/src/components/appHeader/TopTabs.vue
+++ b/src/components/appHeader/TopTabs.vue
@@ -25,7 +25,7 @@
         enter-active-class="animated fadeIn"
         leave-active-class="animated fadeOut"
         appear
-        :duration="150">
+        :duration="50">
 
         <q-route-tab
           :ripple="false"
@@ -35,7 +35,13 @@
           :icon="(retrieveFieldValue(document,'categorySwitch') ? 'fas fa-folder-open' : document.icon)"
           :label="retrieveFieldValue(document,'name')"
           :style="`color: ${retrieveFieldValue(document,'documentColor')};`"
-          :class="[{'isBold': (retrieveFieldValue(document,'documentColor') !== '#ffffff' && retrieveFieldValue(document,'documentColor') !== '#fff') && retrieveFieldValue(document,'documentColor') !== ''}]"
+          :class="[
+            {'isBold':
+              (
+                retrieveFieldValue(document,'documentColor') !== '#ffffff' &&
+                retrieveFieldValue(document,'documentColor') !== '#fff'
+              ) &&
+              retrieveFieldValue(document,'documentColor') !== ''}]"
           :alert="document.hasEdits"
           alert-icon="mdi-feather"
           @click.prevent.middle="tryCloseTab(document)"
@@ -44,6 +50,8 @@
               :delay="700"
             >
               {{retrieveFieldValue(document,'name')}}
+              <br>
+              <span class="text-caption">Middle mouse button to close</span>
             </q-tooltip>
             <q-btn
               round
@@ -67,11 +75,10 @@
 
 <script lang="ts">
 
-import { I_KeyPressObject } from "src/interfaces/I_KeypressObject"
-
-import { Component, Watch, Prop } from "vue-property-decorator"
-
 import BaseClass from "src/BaseClass"
+
+import { Component, Watch } from "vue-property-decorator"
+
 import { I_OpenedDocument } from "src/interfaces/I_OpenedDocument"
 import closeDocumentCheckDialog from "src/components/dialogs/CloseDocumentCheck.vue"
 
@@ -79,35 +86,24 @@ import closeDocumentCheckDialog from "src/components/dialogs/CloseDocumentCheck.
   components: { closeDocumentCheckDialog }
 })
 export default class TopTabs extends BaseClass {
+  /****************************************************************/
+  // App options
+  /****************************************************************/
+
+  /**
+   * Determines if the tabs have text shadow or not
+   */
   textShadow = false
 
+  /**
+   * Watch changes on options
+   */
   @Watch("SGET_options", { immediate: true, deep: true })
   onSettingsChange () {
     const options = this.SGET_options
     this.textShadow = options.textShadow
   }
 
-  @Watch("SGET_allOpenedDocuments", { deep: true })
-  reactToDocumentListChange (val: {docs: I_OpenedDocument[]}, oldVal: {docs: I_OpenedDocument[]}) {
-    this.localDocuments = []
-    this.localDocuments = val.docs
-
-    this.refreshRoute()
-  }
-
-  localDocuments: I_OpenedDocument[] = []
-
-  @Prop() readonly pushedKey!: I_KeyPressObject
-
-  closeDocumentCheckDialogTrigger: string | false = false
-  closeDocumentCheckDialogClose () {
-    this.closeDocumentCheckDialogTrigger = false
-  }
-
-  closeDocumentCheckDialogAssignUID () {
-    this.closeDocumentCheckDialogTrigger = this.generateUID()
-  }
-
   /****************************************************************/
   // Keybind handling
   /****************************************************************/
@@ -133,8 +129,35 @@ export default class TopTabs extends BaseClass {
     }
   }
 
+  /****************************************************************/
+  // Tab management
+  /****************************************************************/
+
+  /**
+   * Refresh the local reference whenever something gets changed
+   */
+  @Watch("SGET_allOpenedDocuments", { deep: true })
+  reactToDocumentListChange (val: {docs: I_OpenedDocument[]}, oldVal: {docs: I_OpenedDocument[]}) {
+    this.localDocuments = []
+    this.localDocuments = val.docs
+
+    // Re-check the route after a change
+    this.refreshRoute()
+  }
+
+  /**
+   * Local reference to the opened document list
+   */
+  localDocuments: I_OpenedDocument[] = []
+
+  /**
+   * Current document to be closed
+   */
   dialogDoc = null as unknown as I_OpenedDocument
 
+  /**
+   * Attempts to close the document being closed
+   */
   tryCloseTab (doc?: I_OpenedDocument) {
     const matchingDocument = this.findRequestedOrActiveDocument(doc)
 
@@ -144,6 +167,9 @@ export default class TopTabs extends BaseClass {
     }
   }
 
+  /**
+   * Attempt to navigate to next tab
+   */
   goToNextTab () {
     let index = -1
     const matchingDocument = this.localDocuments.find((e, i) => {
@@ -167,6 +193,9 @@ export default class TopTabs extends BaseClass {
     }
   }
 
+  /**
+   * Attempt to navigate to previous tab
+   */
   goToPreviousTab () {
     let index = -1
     const matchingDocument = this.localDocuments.find((e, i) => {
@@ -190,6 +219,19 @@ export default class TopTabs extends BaseClass {
       })
     }
   }
+
+  /****************************************************************/
+  // Close document dialog
+  /****************************************************************/
+
+  closeDocumentCheckDialogTrigger: string | false = false
+  closeDocumentCheckDialogClose () {
+    this.closeDocumentCheckDialogTrigger = false
+  }
+
+  closeDocumentCheckDialogAssignUID () {
+    this.closeDocumentCheckDialogTrigger = this.generateUID()
+  }
 }
 </script>
 
diff --git a/src/components/dialogs/AboutApp.vue b/src/components/dialogs/AboutApp.vue
index a588def..c4fdaf3 100644
--- a/src/components/dialogs/AboutApp.vue
+++ b/src/components/dialogs/AboutApp.vue
@@ -52,6 +52,9 @@ import DialogBase from "src/components/dialogs/_DialogBase"
   components: { }
 })
 export default class AboutApp extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -63,12 +66,22 @@ export default class AboutApp extends DialogBase {
     }
   }
 
+  /**
+   * Current app version
+   * NOTE: Show Electon version in DEV mode instead of NPM package version
+   */
   appVersion = remote.app.getVersion()
 
+  /**
+   * Opens Discord link via browser
+   */
   openDiscordInviteLink () {
     shell.openExternal("https://discord.gg/JQDBvsN9Te").catch(e => console.log(e))
   }
 
+  /**
+   * Opens Patreon link via browser
+   */
   openPatreonLink () {
     shell.openExternal("https://www.patreon.com/elvanos").catch(e => console.log(e))
   }
diff --git a/src/components/dialogs/AdvancedSearchGuide.vue b/src/components/dialogs/AdvancedSearchGuide.vue
index 110d833..8a2b6cd 100644
--- a/src/components/dialogs/AdvancedSearchGuide.vue
+++ b/src/components/dialogs/AdvancedSearchGuide.vue
@@ -40,6 +40,9 @@ import DialogBase from "src/components/dialogs/_DialogBase"
   components: { }
 })
 export default class AdvancedSearchGuide extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -50,14 +53,6 @@ export default class AdvancedSearchGuide extends DialogBase {
       this.dialogModel = true
     }
   }
-
-  thumbStyle ={
-    right: "-40px",
-    borderRadius: "5px",
-    backgroundColor: "#61a2bd",
-    width: "5px",
-    opacity: 1
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/ChangeLog.vue b/src/components/dialogs/ChangeLog.vue
index 07e30dd..f412f81 100644
--- a/src/components/dialogs/ChangeLog.vue
+++ b/src/components/dialogs/ChangeLog.vue
@@ -40,6 +40,9 @@ import DialogBase from "src/components/dialogs/_DialogBase"
   components: { }
 })
 export default class ChangeLog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -50,14 +53,6 @@ export default class ChangeLog extends DialogBase {
       this.dialogModel = true
     }
   }
-
-  thumbStyle ={
-    right: "-40px",
-    borderRadius: "5px",
-    backgroundColor: "#61a2bd",
-    width: "5px",
-    opacity: 1
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/CloseDocumentCheck.vue b/src/components/dialogs/CloseDocumentCheck.vue
index d0fa29c..aa9decd 100644
--- a/src/components/dialogs/CloseDocumentCheck.vue
+++ b/src/components/dialogs/CloseDocumentCheck.vue
@@ -35,6 +35,9 @@ import { I_OpenedDocument } from "src/interfaces/I_OpenedDocument"
   components: { }
 })
 export default class CloseDocumentCheckDialog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -42,8 +45,14 @@ export default class CloseDocumentCheckDialog extends DialogBase {
     }
   }
 
+  /**
+   * Current document being processed by the dialog
+   */
   @Prop() readonly dialogDocument!: I_OpenedDocument
 
+  /**
+   * Determine if the document has edits or not. Based on this either skip this dialog altogether or show it.
+   */
   checkForCloseOpenedDocument () {
     const input = this.dialogDocument
     if (input?.hasEdits) {
@@ -58,12 +67,15 @@ export default class CloseDocumentCheckDialog extends DialogBase {
     }
   }
 
+  /**
+   * Closes the document and removes it from the list
+   */
   closeDocument (input: I_OpenedDocument) {
     const dataPass = { doc: input, treeAction: false }
+    this.SSET_removeOpenedDocument(dataPass)
+
     this.dialogModel = false
     this.SSET_setDialogState(false)
-
-    this.SSET_removeOpenedDocument(dataPass)
   }
 }
 </script>
diff --git a/src/components/dialogs/DeleteDocumentCheck.vue b/src/components/dialogs/DeleteDocumentCheck.vue
index d1993e2..aa0b115 100644
--- a/src/components/dialogs/DeleteDocumentCheck.vue
+++ b/src/components/dialogs/DeleteDocumentCheck.vue
@@ -48,6 +48,9 @@ import PouchDB from "pouchdb"
   components: { }
 })
 export default class DeleteDocumentCheckDialog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   async openDialog (val: string|false) {
     if (val && this.SGET_allOpenedDocuments.docs.length > 0) {
@@ -61,8 +64,14 @@ export default class DeleteDocumentCheckDialog extends DialogBase {
     }
   }
 
+  /**
+   * Current document for deletion
+   */
   currentDocument = false as unknown as I_OpenedDocument
 
+  /**
+   * Delete the document
+   */
   async deleteDocument () {
     const CurrentObjectDB = new PouchDB(this.$route.params.type)
 
diff --git a/src/components/dialogs/ExistingDocument.vue b/src/components/dialogs/ExistingDocument.vue
index 99e5ad5..05c5f02 100644
--- a/src/components/dialogs/ExistingDocument.vue
+++ b/src/components/dialogs/ExistingDocument.vue
@@ -110,6 +110,13 @@ import { I_Blueprint } from "src/interfaces/I_Blueprint"
   components: { }
 })
 export default class ExistingDocumentDialog extends DialogBase {
+  /****************************************************************/
+  // DIALOG CONTROL
+  /****************************************************************/
+
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -125,17 +132,117 @@ export default class ExistingDocumentDialog extends DialogBase {
     }
   }
 
-  existingObjectsBackupList = [] as I_ShortenedDocument[]
-  existingObjectList = [] as I_ShortenedDocument[]
+  /****************************************************************/
+  // COMPONENT SETTINGS
+  /****************************************************************/
+
+  /**
+   * Watch options and react to changes
+   */
+  @Watch("SGET_options", { immediate: true, deep: true })
+  onSettingsChange () {
+    this.reloadOptions()
+  }
+
+  /**
+   * Reloads local options
+   */
+  reloadOptions () {
+    this.closeWithSameClick = this.SGET_options.allowQuickPopupSameKeyClose
+    this.disableCloseAftertSelectQuickSearch = this.SGET_options.disableCloseAftertSelectQuickSearch
+    this.includeCategories = !this.SGET_options.disableQuickSearchCategoryPrecheck
+    this.textShadow = this.SGET_options.textShadow
+  }
+
+  /**
+   * Determines if the popup shouldnt close after a document is selected from the dropdown list
+   */
+  disableCloseAftertSelectQuickSearch = false
+
+  /**
+   * Determines if the popup is closeable with the same keybind that summoned it
+   */
+  closeWithSameClick = false
+
+  /**
+   * Determines if text shadow will be shows for accesiblity reasons or not
+   */
+  textShadow = false
+
+  /**
+   * A local lock that prevents double-triggering and instant re-closing of the dialog via keybinds
+   */
+  isCloseAbleViaKeybind = false
+
+  /****************************************************************/
+  // LOCAL KEYBINDS
+  /****************************************************************/
+
+  /**
+   * Local keybinds
+   */
+  @Watch("SGET_getCurrentKeyBindData", { deep: true })
+  processKeyPush () {
+    // Keybind cheatsheet
+    if (this.determineKeyBind("quickExistingDocument") && this.dialogModel && this.closeWithSameClick && this.isCloseAbleViaKeybind && this.SGET_getDialogsState) {
+      this.dialogModel = false
+      this.SSET_setDialogState(false)
+      // @ts-ignore
+      this.existingDocumentModel = null
+    }
+  }
+
+  /****************************************************************/
+  // PRE-FILTERING
+  /****************************************************************/
+
+  /**
+   * Model for pre-filtering via categories
+   */
+  includeCategories = true
+
+  /**
+   * React to the category checkbox changes
+   */
+  @Watch("includeCategories")
+  reactToCheckboxChange () {
+    this.preFilterDocuments()
+  }
+
+  /**
+   * Prefilter documents based on what is in the checkbox
+   */
+  preFilterDocuments () {
+    this.existingObjectPrefilteredList = this.existingObjectsFullList.filter(e => !((!this.includeCategories && e.isCategory)))
+  }
+
+  /****************************************************************/
+  // SELECT LIST MANAGEMENT
+  /****************************************************************/
+
+  /**
+   * Raw list of objects retrieved from the database
+   */
+  existingObjectPrefilteredList = [] as I_ShortenedDocument[]
+
+  /**
+   * Pre-filtered list based on the category inclussion or exlcussion
+   */
+  existingObjectsFullList = [] as I_ShortenedDocument[]
+
+  /**
+   * All currently loaded blueprints
+   */
   allDocumentBluePrints = [] as I_Blueprint[]
 
+  /**
+   * Set up up all data in to the dialog on popup load
+   */
   async populateExistingObjectDialog () {
     this.allDocumentBluePrints = this.SGET_allBlueprints
 
-    const allDocs = await this.retrieveAllDocuments()
-
-    this.existingObjectsBackupList = allDocs
-    this.filterDocuments()
+    this.existingObjectsFullList = await this.retrieveAllDocuments()
+    this.preFilterDocuments()
 
     await this.$nextTick()
 
@@ -148,10 +255,19 @@ export default class ExistingDocumentDialog extends DialogBase {
     this.isCloseAbleViaKeybind = true
   }
 
+  /**
+   * Currently being opened document
+   */
   existingDocumentModel = []
 
+  /**
+   * Filtered list of items
+   */
   filteredExistingInput = null as unknown as I_ShortenedDocument[]
 
+  /**
+   * Refocuses the first value in the selct upon filtering for intuitive keyboard control
+   */
   async refocusSelect () {
     await this.$nextTick()
     /*eslint-disable */
@@ -162,10 +278,18 @@ export default class ExistingDocumentDialog extends DialogBase {
     /* eslint-enable */
   }
 
+  /**
+   * Local list copty for filtering in order to not mess up the original list
+   */
+  listCopy: I_ShortenedDocument[] = []
+
+  /**
+   * Filter the pre-filtered list
+   */
   filterExistingSelect (val: string, update: (e: () => void) => void) {
     if (val === "") {
       update(() => {
-        this.filteredExistingInput = this.existingObjectList
+        this.filteredExistingInput = this.existingObjectPrefilteredList
         if (this.$refs.ref_existingDocument && this.filteredExistingInput.length > 0) {
           this.refocusSelect().catch(e => console.log(e))
         }
@@ -175,8 +299,8 @@ export default class ExistingDocumentDialog extends DialogBase {
 
     update(() => {
       const needle = val.toLowerCase()
-      const listCopy : I_ShortenedDocument[] = extend(true, [], this.existingObjectList)
-      this.filteredExistingInput = advancedDocumentFilter(needle, listCopy, this.allDocumentBluePrints, this.existingObjectsBackupList)
+      this.listCopy = extend(true, [], this.existingObjectPrefilteredList)
+      this.filteredExistingInput = advancedDocumentFilter(needle, this.listCopy, this.allDocumentBluePrints, this.existingObjectsFullList)
 
       if (this.$refs.ref_existingDocument && this.filteredExistingInput.length > 0) {
         this.refocusSelect().catch(e => console.log(e))
@@ -184,13 +308,24 @@ export default class ExistingDocumentDialog extends DialogBase {
     })
   }
 
+  /****************************************************************/
+  // TRIGGER ACTIONS
+  /****************************************************************/
+
+  /**
+   * Opened the existing input in two modes
+   * Either as a focus with closure of the dialog.
+   * Or as a background tab without closing of the dialog.
+   */
   async openExistingInput (e: I_ShortenedDocument[]) {
+    // Open document and close dialog
     if (!this.disableCloseAftertSelectQuickSearch) {
       this.dialogModel = false
       // @ts-ignore
       this.openExistingDocumentRoute(e[0])
       this.existingDocumentModel = []
     }
+    // Open document and DO NOT close the dialog
     else {
       // @ts-ignore
       this.existingDocumentModel = []
@@ -209,6 +344,9 @@ export default class ExistingDocumentDialog extends DialogBase {
     }
   }
 
+  /**
+   * Add new item under whatever document this was called from
+   */
   addNewItemUnderSelected (parent: any) {
     const routeObject = {
       _id: parent.type,
@@ -217,50 +355,6 @@ export default class ExistingDocumentDialog extends DialogBase {
     // @ts-ignore
     this.addNewObjectRoute(routeObject)
   }
-
-  disableCloseAftertSelectQuickSearch = false
-  closeWithSameClick = false
-  textShadow = false
-
-  @Watch("SGET_options", { immediate: true, deep: true })
-  onSettingsChange () {
-    this.reloadOptions()
-  }
-
-  reloadOptions () {
-    const options = this.SGET_options
-    this.closeWithSameClick = options.allowQuickPopupSameKeyClose
-    this.disableCloseAftertSelectQuickSearch = options.disableCloseAftertSelectQuickSearch
-    this.includeCategories = !options.disableQuickSearchCategoryPrecheck
-    this.textShadow = options.textShadow
-  }
-
-  includeCategories = true
-
-  @Watch("includeCategories")
-  reactToCheckboxChange () {
-    this.filterDocuments()
-  }
-
-  filterDocuments () {
-    this.existingObjectList = this.existingObjectsBackupList.filter(e => !((!this.includeCategories && e.isCategory)))
-  }
-
-  isCloseAbleViaKeybind = false
-
-  /**
-   * Local keybinds
-   */
-  @Watch("SGET_getCurrentKeyBindData", { deep: true })
-  processKeyPush () {
-    // Keybind cheatsheet
-    if (this.determineKeyBind("quickExistingDocument") && this.dialogModel && this.closeWithSameClick && this.isCloseAbleViaKeybind && this.SGET_getDialogsState) {
-      this.dialogModel = false
-      this.SSET_setDialogState(false)
-      // @ts-ignore
-      this.existingDocumentModel = null
-    }
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/ImportProjectCheck.vue b/src/components/dialogs/ImportProjectCheck.vue
index f7dc3fe..d0a7f4f 100644
--- a/src/components/dialogs/ImportProjectCheck.vue
+++ b/src/components/dialogs/ImportProjectCheck.vue
@@ -51,13 +51,16 @@ import { Loading, QSpinnerGears } from "quasar"
   components: { }
 })
 export default class ImportProjectCheckDialog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
-  async openDialog (val: string|false) {
+  async checkForOpenedProject (val: string|false) {
     if (val) {
       const projectName = await retrieveCurrentProjectName()
 
       if (projectName) {
-        this.checkForCloseOpenedDocument()
+        this.openDialog()
       }
       else {
         this.importProject()
@@ -65,7 +68,10 @@ export default class ImportProjectCheckDialog extends DialogBase {
     }
   }
 
-  checkForCloseOpenedDocument () {
+  /**
+   * Open the the dialog if project is present on the window
+   */
+  openDialog () {
     if (this.SGET_getDialogsState) {
       return
     }
@@ -73,6 +79,9 @@ export default class ImportProjectCheckDialog extends DialogBase {
     this.dialogModel = true
   }
 
+  /**
+  * Import a new project
+  */
   importProject () {
     const setup = {
       message: "<h4>Importing selected project...</h4>",
@@ -87,6 +96,9 @@ export default class ImportProjectCheckDialog extends DialogBase {
     importExistingProject(this.$router, Loading, setup, this.$q, this)
   }
 
+  /**
+   * Export the current project
+   */
   async commenceExport () {
     const projectName = await retrieveCurrentProjectName()
     const setup = {
diff --git a/src/components/dialogs/KeybindCheatsheet.vue b/src/components/dialogs/KeybindCheatsheet.vue
index 7947144..60d38cc 100644
--- a/src/components/dialogs/KeybindCheatsheet.vue
+++ b/src/components/dialogs/KeybindCheatsheet.vue
@@ -59,16 +59,26 @@ import { I_KeyPressObject } from "src/interfaces/I_KeypressObject"
   components: { }
 })
 export default class KeybindCheatsheet extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
       if (this.SGET_getDialogsState) {
         return
       }
+
       this.SSET_setDialogState(true)
       this.dialogModel = true
+
+      // Remap the cheetcheet based on available input settings
       this.localCheatSheet = this.SGET_getCurrentKeyBindData.defaults.map((bind, index) => {
-        const mappedKeybind = (this.SGET_getCurrentKeyBindData.userKeybinds[index] && this.SGET_getCurrentKeyBindData.userKeybinds[index].which)
+        const mappedKeybind = (
+          this.SGET_getCurrentKeyBindData.userKeybinds[index] &&
+          this.SGET_getCurrentKeyBindData.userKeybinds[index].which
+        )
+          // If user keybind
           ? {
             altKey: this.SGET_getCurrentKeyBindData.userKeybinds[index].altKey,
             ctrlKey: this.SGET_getCurrentKeyBindData.userKeybinds[index].ctrlKey,
@@ -78,6 +88,7 @@ export default class KeybindCheatsheet extends DialogBase {
             tooltip: bind.tooltip,
             note: bind.note
           }
+          // If default keybind
           : {
             altKey: bind.altKey,
             ctrlKey: bind.ctrlKey,
@@ -93,15 +104,10 @@ export default class KeybindCheatsheet extends DialogBase {
     }
   }
 
+  /**
+   * Local, remaped cheatsheet
+   */
   localCheatSheet: I_KeyPressObject[] = []
-
-  thumbStyle ={
-    right: "-40px",
-    borderRadius: "5px",
-    backgroundColor: "#61a2bd",
-    width: "5px",
-    opacity: 1
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/License.vue b/src/components/dialogs/License.vue
index c025ea1..c56ef0a 100644
--- a/src/components/dialogs/License.vue
+++ b/src/components/dialogs/License.vue
@@ -40,6 +40,9 @@ import DialogBase from "src/components/dialogs/_DialogBase"
   components: { }
 })
 export default class ChangeLog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -50,14 +53,6 @@ export default class ChangeLog extends DialogBase {
       this.dialogModel = true
     }
   }
-
-  thumbStyle ={
-    right: "-40px",
-    borderRadius: "5px",
-    backgroundColor: "#61a2bd",
-    width: "5px",
-    opacity: 1
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/NewDocument.vue b/src/components/dialogs/NewDocument.vue
index d5fe89c..b2947dc 100644
--- a/src/components/dialogs/NewDocument.vue
+++ b/src/components/dialogs/NewDocument.vue
@@ -58,7 +58,6 @@
 
 <script lang="ts">
 
-import { Component, Watch } from "vue-property-decorator"
 interface NewObjectDocument {
   label: string
   icon: string
@@ -66,11 +65,21 @@ interface NewObjectDocument {
   _id: string
   specialLabel: string
 }
+
+import { Component, Watch } from "vue-property-decorator"
 import DialogBase from "src/components/dialogs/_DialogBase"
+
 @Component({
   components: { }
 })
 export default class NewDocumentDialog extends DialogBase {
+  /****************************************************************/
+  // DIALOG CONTROL
+  /****************************************************************/
+
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -81,13 +90,80 @@ export default class NewDocumentDialog extends DialogBase {
       this.SSET_setDialogState(true)
       this.dialogModel = true
       this.populateNewObjectDialog().catch(e => console.log(e))
+      this.reloadOptions()
     }
   }
 
+  /****************************************************************/
+  // COMPONENT SETTINGS
+  /****************************************************************/
+
+  /**
+   * Watch options and react to changes
+   */
+  @Watch("SGET_options", { immediate: true, deep: true })
+  onSettingsChange () {
+    this.reloadOptions()
+  }
+
+  /**
+   * Reloads local options
+   */
+  reloadOptions () {
+    this.closeWithSameClick = this.SGET_options.allowQuickPopupSameKeyClose
+    this.textShadow = this.SGET_options.textShadow
+  }
+
+  /**
+   * A local lock that prevents double-triggering and instant re-closing of the dialog via keybinds
+   */
+  isCloseAbleViaKeybind = false
+
+  /**
+   * Determines if the popup is closeable with the same keybind that summoned it
+   */
+  closeWithSameClick = false
+
+  /**
+   * Determines if text shadow will be shows for accesiblity reasons or not
+   */
+  textShadow = false
+
+  /****************************************************************/
+  // LOCAL KEYBINDS
+  /****************************************************************/
+
+  /**
+   * Local keybinds
+   */
+  @Watch("SGET_getCurrentKeyBindData", { deep: true })
+  processKeyPush () {
+    // Keybind cheatsheet
+    if (this.determineKeyBind("quickNewDocument") && this.dialogModel && this.closeWithSameClick && this.isCloseAbleViaKeybind && this.SGET_getDialogsState) {
+      this.dialogModel = false
+      this.SSET_setDialogState(false)
+      // @ts-ignore
+      this.existingDocumentModel = null
+    }
+  }
+
+  /****************************************************************/
+  // SELECT LIST MANAGEMENT
+  /****************************************************************/
+
+  /**
+   * List of all possible new objects
+   */
   newObjectList = [] as NewObjectDocument[]
 
+  /**
+   * Currently selected new object type
+   */
   newDocumentModel = null
 
+  /**
+   * Map the object types based on what is currently loaded into the blueprint list
+   */
   async populateNewObjectDialog () {
     // @ts-ignore
     this.newObjectList = this.SGET_allBlueprints.map(blueprint => {
@@ -110,8 +186,9 @@ export default class NewDocumentDialog extends DialogBase {
     this.isCloseAbleViaKeybind = true
   }
 
-  filteredNewInput = null as unknown as NewObjectDocument[]
-
+  /**
+   * Refocuses the first value in the selct upon filtering for intuitive keyboard control
+   */
   async refocusSelect () {
     await this.$nextTick()
     /*eslint-disable */
@@ -122,6 +199,14 @@ export default class NewDocumentDialog extends DialogBase {
     /* eslint-enable */
   }
 
+  /**
+   * Filtered list of new document types
+   */
+  filteredNewInput = null as unknown as NewObjectDocument[]
+
+  /**
+   * Filtering of the value list
+   */
   filterNewSelect (val: string, update: (e: () => void) => void) {
     if (val === "") {
       update(() => {
@@ -142,40 +227,18 @@ export default class NewDocumentDialog extends DialogBase {
     })
   }
 
+  /****************************************************************/
+  // TRIGGER ACTIONS
+  /****************************************************************/
+
+  /**
+   * Add new document
+   */
   triggerNewInput (e: NewObjectDocument) {
     this.dialogModel = false
     this.addNewObjectRoute(e)
     this.newDocumentModel = null
   }
-
-  isCloseAbleViaKeybind = false
-  closeWithSameClick = false
-  textShadow = false
-
-  @Watch("SGET_options", { immediate: true, deep: true })
-  onSettingsChange () {
-    this.reloadOptions()
-  }
-
-  reloadOptions () {
-    const options = this.SGET_options
-    this.closeWithSameClick = options.allowQuickPopupSameKeyClose
-    this.textShadow = options.textShadow
-  }
-
-  /**
-   * Local keybinds
-   */
-  @Watch("SGET_getCurrentKeyBindData", { deep: true })
-  processKeyPush () {
-    // Keybind cheatsheet
-    if (this.determineKeyBind("quickNewDocument") && this.dialogModel && this.closeWithSameClick && this.isCloseAbleViaKeybind && this.SGET_getDialogsState) {
-      this.dialogModel = false
-      this.SSET_setDialogState(false)
-      // @ts-ignore
-      this.existingDocumentModel = null
-    }
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/NewProjectCheck.vue b/src/components/dialogs/NewProjectCheck.vue
index ccf8a42..d97bd62 100644
--- a/src/components/dialogs/NewProjectCheck.vue
+++ b/src/components/dialogs/NewProjectCheck.vue
@@ -68,6 +68,9 @@ import { Loading, QSpinnerGears } from "quasar"
   components: { }
 })
 export default class ImportProjectCheckDialog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   async openDialog (val: string|false) {
     if (val) {
@@ -86,10 +89,19 @@ export default class ImportProjectCheckDialog extends DialogBase {
     }
   }
 
+  /**
+   * Determines if any project currently exists or not
+   */
   projectExists: undefined | string | boolean = false
 
+  /**
+   * Model for the new project name
+   */
   newProjectName = ""
 
+  /**
+   * Create new project
+   */
   createNewProject () {
     Loading.show({
       message: "<h4>Setting up a new project...</h4>",
@@ -104,6 +116,9 @@ export default class ImportProjectCheckDialog extends DialogBase {
     createNewProject(this.newProjectName, this.$router, this.$q, this).catch(e => console.log(e))
   }
 
+  /**
+   * Export current project
+   */
   async commenceExport () {
     const projectName = await retrieveCurrentProjectName()
     const setup = {
diff --git a/src/components/dialogs/ProgramSettings.vue b/src/components/dialogs/ProgramSettings.vue
index 5edf649..5a88a9b 100644
--- a/src/components/dialogs/ProgramSettings.vue
+++ b/src/components/dialogs/ProgramSettings.vue
@@ -585,6 +585,9 @@ export default class ProgramSettings extends DialogBase {
   // DIALOG CONTROL
   /****************************************************************/
 
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -594,25 +597,59 @@ export default class ProgramSettings extends DialogBase {
       this.SSET_setDialogState(true)
       this.dialogModel = true
       this.activeTab = "uiSettings"
-      this.retrieveOptions()
+      this.options = extend(true, {}, this.SGET_options)
       this.mapKeybinds()
     }
   }
 
-  thumbStyle ={
-    right: "-40px",
-    borderRadius: "5px",
-    backgroundColor: "#61a2bd",
-    width: "5px",
-    opacity: 1
-  }
-
+  /**
+   * Currently active tab model of the options\
+   * "uiSettings" by default
+   */
   activeTab = "uiSettings"
 
+  /**
+   * Save settings and keybings
+   */
+  saveSettings () {
+    const optionsSnapShot: OptionsStateInteface = extend(true, {}, this.options)
+    optionsSnapShot.userKeybindList = []
+
+    this.keybindList.forEach(e => {
+      // Deregister all custom user keybinds
+      this.SSET_deregisterUserKeybind({
+        id: e.id,
+        altKey: e.defaultKeybind.altKey,
+        ctrlKey: e.defaultKeybind.ctrlKey,
+        shiftKey: e.defaultKeybind.shiftKey,
+        which: e.defaultKeybind.which
+      })
+
+      // Re-register new user keybinds if there are any present
+      if (e.userKeybind && e.userKeybind.which) {
+        const tempkey = {
+          id: e.id,
+          altKey: e.userKeybind.altKey,
+          ctrlKey: e.userKeybind.ctrlKey,
+          shiftKey: e.userKeybind.shiftKey,
+          which: e.userKeybind.which
+        }
+
+        optionsSnapShot.userKeybindList.push(tempkey)
+        this.SSET_registerUserKeybind(tempkey)
+      }
+    })
+
+    this.SSET_options(optionsSnapShot)
+  }
+
   /****************************************************************/
   // OPTIONS TAB
   /****************************************************************/
 
+  /**
+   * Default options list state
+   */
   options: OptionsStateInteface = {
     _id: "settings",
     darkMode: false,
@@ -640,50 +677,20 @@ export default class ProgramSettings extends DialogBase {
     userKeybindList: []
   }
 
-  retrieveOptions () {
-    const optionsSnapShot: OptionsStateInteface = extend(true, {}, this.SGET_options)
-
-    this.options = optionsSnapShot
-  }
-
-  saveSettings () {
-    const optionsSnapShot: OptionsStateInteface = extend(true, {}, this.options)
-    optionsSnapShot.userKeybindList = []
-
-    this.keybindList.forEach(e => {
-      this.SSET_deregisterUserKeybind({
-        id: e.id,
-        altKey: e.defaultKeybind.altKey,
-        ctrlKey: e.defaultKeybind.ctrlKey,
-        shiftKey: e.defaultKeybind.shiftKey,
-        which: e.defaultKeybind.which
-      })
-
-      if (e.userKeybind && e.userKeybind.which) {
-        const tempkey = {
-          id: e.id,
-          altKey: e.userKeybind.altKey,
-          ctrlKey: e.userKeybind.ctrlKey,
-          shiftKey: e.userKeybind.shiftKey,
-          which: e.userKeybind.which
-        }
-
-        optionsSnapShot.userKeybindList.push(tempkey)
-        this.SSET_registerUserKeybind(tempkey)
-      }
-    })
-
-    this.SSET_options(optionsSnapShot)
-  }
-
   /****************************************************************/
-  // KEYBDINS MANAGEMENT
+  // KEYBINDS MANAGEMENT
   /****************************************************************/
 
+  /**
+   * Keybinds table pagination settings
+   */
   pagination = {
     rowsPerPage: 0
   }
 
+  /**
+   * Keybinds table settings
+   */
   keybindListCollums = [
     {
       name: "name",
@@ -708,19 +715,50 @@ export default class ProgramSettings extends DialogBase {
     }
   ]
 
+  /**
+   * Keybinds table string filter
+   */
   filter = ""
 
+  /**
+   * Temporary keybind string value entered by the user
+   * EG: "CTRL + V"
+   */
   tempKeybindString = ""
+
+  /**
+   * Temporary keybind object details entered by the user
+   */
   tempKeybindData = null as any
+
+  /**
+   * Determines if any change has been done to the input entered by the user after it was lodead
+   */
   tempHasChange = false
 
+  /**
+   * A list of all keybinds
+   */
   keybindList: any[] = []
 
+  /**
+   * Determines if the keybinds popup has any error right now
+   */
   keybindError = false
+
+  /**
+   * Current error message
+   */
   keybindErrorMessage = ""
 
+  /**
+   * Temporary variable for holding on to currently active row data
+   */
   currentRowData = {} as any
 
+  /**
+   * Resets the particular keybind
+   */
   async resetKeybind () {
     this.tempKeybindString = ""
     this.tempKeybindData = null
@@ -737,6 +775,9 @@ export default class ProgramSettings extends DialogBase {
     this.keybindList = temp
   }
 
+  /**
+   * Sets the particular keybind
+   */
   async setKeybind () {
     this.currentRowData.userKeybind = this.tempKeybindData
     const temp: any[] = extend(true, [], this.keybindList)
@@ -748,10 +789,16 @@ export default class ProgramSettings extends DialogBase {
     this.keybindList = temp
   }
 
+  /**
+   * Process all needed actions after the keybind window popup closes
+   */
   processKeybindSetting () {
     window.removeEventListener("keydown", this.triggerKeyPush)
   }
 
+  /**
+   * Process all needed actions before the keybind window popup opens
+   */
   prepareKeybindSetting (row: any) {
     this.keybindError = false
     this.tempHasChange = false
@@ -761,75 +808,14 @@ export default class ProgramSettings extends DialogBase {
     window.addEventListener("keydown", this.triggerKeyPush)
   }
 
+  /**
+   * Register keybind input for the keybind popup
+   */
   triggerKeyPush (e:any) {
     this.keybindError = false
 
     const ignoredKeys = [16, 17, 18, 27]
-    const allowedKeys = [
-      186,
-      187,
-      188,
-      189,
-      190,
-      191,
-      192,
-      219,
-      220,
-      221,
-      222,
-      112,
-      113,
-      114,
-      115,
-      116,
-      117,
-      118,
-      119,
-      120,
-      121,
-      122,
-      123,
-      37,
-      38,
-      39,
-      40,
-      48,
-      49,
-      50,
-      51,
-      52,
-      53,
-      54,
-      55,
-      56,
-      57,
-      65,
-      66,
-      67,
-      68,
-      69,
-      70,
-      71,
-      72,
-      73,
-      74,
-      75,
-      76,
-      77,
-      78,
-      79,
-      80,
-      81,
-      82,
-      83,
-      84,
-      85,
-      86,
-      87,
-      88,
-      89,
-      90
-    ]
+    const allowedKeys = [186, 187, 188, 189, 190, 191, 192, 219, 220, 221, 222, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90]
 
     // Prevent all non-permitted key presses
     if ((e?.altKey || e?.ctrlKey) && e?.keyCode && !ignoredKeys.includes(e.which)) {
@@ -899,6 +885,9 @@ export default class ProgramSettings extends DialogBase {
     }
   }
 
+  /**
+   * Map all existing keybinds to something useable for the table
+   */
   mapKeybinds () {
     this.keybindList = this.SGET_getCurrentKeyBindData.defaults.map((keybind, index) => {
       return {
diff --git a/src/components/dialogs/ProjectCloseCheck.vue b/src/components/dialogs/ProjectCloseCheck.vue
index a3bec8c..cd41c47 100644
--- a/src/components/dialogs/ProjectCloseCheck.vue
+++ b/src/components/dialogs/ProjectCloseCheck.vue
@@ -16,7 +16,7 @@
         <div class="q-mb-md text-bold">Affected documents:</div>
         <q-list class="projectCloseDalogList">
           <q-item
-          v-for=" doc in openedDocs"
+          v-for=" doc in openedDocsWithEdits"
           :key="doc._id"
           clickable
           v-ripple
@@ -46,7 +46,7 @@
           :label="exitLabelText"
           color="secondary"
           v-close-popup
-          @click="checkModeAction" />
+          @click="determineModeAction" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -63,8 +63,25 @@ import { remote } from "electron"
   components: { }
 })
 export default class ProjectCloseCheck extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
+  @Watch("dialogTrigger")
+  openDialog (val: string|false) {
+    if (val) {
+      this.SSET_setDialogState(true)
+      this.checkForDocumentsWithEdits()
+    }
+  }
+
+  /**
+   * Determines if the dialog should be used in application closing mode or in project closing mode
+   */
   @Prop() readonly dialogMode!: "appClose" | "projectClose"
 
+  /**
+   * Label text for the dialog
+   */
   get exitLabelText () {
     if (this.dialogMode === "appClose") {
       return "Exit app without saving"
@@ -75,42 +92,53 @@ export default class ProjectCloseCheck extends DialogBase {
     }
   }
 
-  @Watch("dialogTrigger")
-  openDialog (val: string|false) {
-    if (val) {
-      this.SSET_setDialogState(true)
-      this.checkForDocumentsWithEdits()
-    }
-  }
-
-  openedDocs: I_OpenedDocument[]= []
+  /**
+   * List of opened documents with edits in them
+   */
+  openedDocsWithEdits: I_OpenedDocument[]= []
 
+  /**
+   * Check if we have any documents with edit. If not, skip the dialog and proceed.
+   */
   checkForDocumentsWithEdits () {
-    this.openedDocs = this.SGET_allOpenedDocuments.docs.filter(doc => doc.hasEdits)
+    this.openedDocsWithEdits = this.SGET_allOpenedDocuments.docs.filter(doc => doc.hasEdits)
 
-    if (this.openedDocs.length > 0) {
+    if (this.openedDocsWithEdits.length > 0) {
       this.dialogModel = true
     }
     else {
-      this.checkModeAction()
+      this.determineModeAction()
     }
   }
 
-  checkModeAction () {
+  /**
+   * Decide what action to take depending on the dialog mode
+   */
+  determineModeAction () {
     if (this.dialogMode === "appClose") {
       this.closeApp()
     }
     if (this.dialogMode === "projectClose") {
-      this.SSET_resetDocuments()
-      this.triggerDialogClose()
-      this.$router.push({ path: "/" }).catch((e: {name: string}) => {
-        if (e && e.name !== "NavigationDuplicated") {
-          console.log(e)
-        }
-      })
+      this.closeProject()
     }
   }
 
+  /**
+   * Close the project and navigate to the intro screen
+   */
+  closeProject () {
+    this.SSET_resetDocuments()
+    this.triggerDialogClose()
+    this.$router.push({ path: "/" }).catch((e: {name: string}) => {
+      if (e && e.name !== "NavigationDuplicated") {
+        console.log(e)
+      }
+    })
+  }
+
+  /**
+   * Close app
+   */
   closeApp () {
     remote.getCurrentWindow().destroy()
   }
diff --git a/src/components/dialogs/TipsTricksTrivia.vue b/src/components/dialogs/TipsTricksTrivia.vue
index 5aaa9f0..b99d28b 100644
--- a/src/components/dialogs/TipsTricksTrivia.vue
+++ b/src/components/dialogs/TipsTricksTrivia.vue
@@ -50,6 +50,9 @@ import DialogBase from "src/components/dialogs/_DialogBase"
   components: { }
 })
 export default class ChangeLog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
   @Watch("dialogTrigger")
   openDialog (val: string|false) {
     if (val) {
@@ -61,15 +64,10 @@ export default class ChangeLog extends DialogBase {
     }
   }
 
+  /**
+   * An array of string with the trivia
+   */
   tipsTricks = tipsTricks
-
-  thumbStyle ={
-    right: "-40px",
-    borderRadius: "5px",
-    backgroundColor: "#61a2bd",
-    width: "5px",
-    opacity: 1
-  }
 }
 </script>
 
diff --git a/src/components/dialogs/_DialogBase.ts b/src/components/dialogs/_DialogBase.ts
index 10ff132..26642f8 100644
--- a/src/components/dialogs/_DialogBase.ts
+++ b/src/components/dialogs/_DialogBase.ts
@@ -7,21 +7,51 @@ const Dialogs = namespace("dialogsModule")
 
 @Component
 export default class DialogBase extends BaseClass {
+  /**
+   * Get the currently open-ness dialog state
+   */
   @Dialogs.Getter("getDialogsState") SGET_getDialogsState!: boolean
+
+  /**
+   * Set the currently open-ness dialog state
+   */
   @Dialogs.Mutation("setDialogState") SSET_setDialogState!: (input: boolean) => void
 
+  /**
+   * The current model for the specific dialog being opened
+   */
   dialogModel = false
 
+  /**
+   * Prop that detemines if the dialog should be showing or not
+   */
   @Prop() readonly dialogTrigger!: string
 
+  /**
+   * Triggers upon any kind of closure
+   */
   @Emit()
   triggerDialogClose () {
     this.SSET_setDialogState(false)
     return true
   }
 
+  /**
+   * Trigger upon submission with some kind of value
+   */
   @Emit()
   triggerDialogSubmit (val:string) {
     return val
   }
+
+  /**
+   * Settings for the scrolling thumb of the scrollarea
+   */
+  thumbStyle ={
+    right: "-40px",
+    borderRadius: "5px",
+    backgroundColor: "#61a2bd",
+    width: "5px",
+    opacity: 1
+  }
 }
diff --git a/src/css/app.scss b/src/css/app.scss
index 5d036d4..7a06d38 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -172,7 +172,7 @@ a {
   padding: 10px 0 15px;
 
   .q-editor__content {
-    padding: 35px 60px;
+    padding: 35px 60px 50vh;
   }
 }
 
diff --git a/src/documents/advancedSearchGuide.md b/src/documents/advancedSearchGuide.md
index 297dfcb..87b4732 100644
--- a/src/documents/advancedSearchGuide.md
+++ b/src/documents/advancedSearchGuide.md
@@ -75,6 +75,7 @@ This feature is meant mostly for those in need of full-scale search that can cra
   - `:` - Symbol for the division between the field-name and field value
 - **If your filter-term contained whitespaces, replace them with the `-` symbol**
   - Example: You wish to search for a field called `Local Currencies` that contains `Canadian Dollars` as value, to fully match this tag, you will need to type `%local-currencies:canadian-dollars`
+- **It is possible to do a full-text search, checking all fields for the desired text by doing the following: `%:canadian-dollars`**
 - **A list of fields/field types the full-search doesn't work with:**
   - The `Break` field type (these are the big titles present throughout the document)
   - The `Tags` field type (this one is covered with a more sophisticated tag filter)
diff --git a/src/documents/changeLog.md b/src/documents/changeLog.md
index 873e1c7..709cdf1 100644
--- a/src/documents/changeLog.md
+++ b/src/documents/changeLog.md
@@ -3,6 +3,28 @@
 
 ---
 
+## 0.1.5
+
+### Known issues
+
+- When creating a brand new project, Fantasia Archive sometimes doesn't load the default categories in the left hierarchical tree. A temporary workaround before the issue is fixed is restarting the program - the project stays intact, can be normally edited no data loss occurs.
+- Some users report that dialog (popups) don't function the very first time you start FA. This is solved by restarting the application. The bug doesn't seem to appear again once FA has been started at least once before.
+
+### Bugfixes
+
+- Fixed a typo in `Type of being` field in the `Races/Species` document type
+- Updated advanced search guide with missing information about full-text search
+- Changes a small bug when the `New Object` dialog wasn't respecting option changes being done in the same session of the program being opened
+
+### New features
+
+### QoL adjustments
+
+- Updated fullscreen editor looks to work more like a proper document editor
+- Made the app a bit more "snappy" by decreasing animation lengths when transitioning between documents
+
+---
+
 ## 0.1.4
 
 ### Known issues
diff --git a/src/layouts/DocumentLayout.vue b/src/layouts/DocumentLayout.vue
index ab51675..f2f4a62 100644
--- a/src/layouts/DocumentLayout.vue
+++ b/src/layouts/DocumentLayout.vue
@@ -2,9 +2,7 @@
   <q-layout view="hHh LpR lfr">
 
     <!-- Header -->
-    <appHeader
-      :is-project="true"
-    />
+    <appHeader/>
 
     <q-splitter
       v-model="splitterModel"
@@ -35,7 +33,7 @@
             enter-active-class="animated fadeIn"
             leave-active-class="animated fadeOut"
             appear
-            :duration="150"
+            :duration="50"
           >
             <router-view :key="$route.path" />
           </transition>
diff --git a/src/layouts/ProjectManagentLayout.vue b/src/layouts/ProjectManagentLayout.vue
index 47c2765..420700f 100644
--- a/src/layouts/ProjectManagentLayout.vue
+++ b/src/layouts/ProjectManagentLayout.vue
@@ -11,7 +11,7 @@
         enter-active-class="animated fadeIn"
         leave-active-class="animated fadeOut"
         appear
-        :duration="150"
+        :duration="50"
       >
       <router-view :key="$route.path" />
       </transition>
diff --git a/src/pages/DocumentDisplay.vue b/src/pages/DocumentDisplay.vue
index 375756f..15c99cf 100644
--- a/src/pages/DocumentDisplay.vue
+++ b/src/pages/DocumentDisplay.vue
@@ -304,7 +304,7 @@ export default class PageDocumentDisplay extends BaseClass {
   async onDocChange () {
     this.checkHasEdits()
 
-    await this.sleep(300)
+    await this.sleep(100)
 
     const matchingDoc = this.findRequestedOrActiveDocument()
     if (matchingDoc && matchingDoc._id === this.currentData._id && !matchingDoc.hasEdits) {
diff --git a/src/scripts/databaseManager/blueprints/characters.ts b/src/scripts/databaseManager/blueprints/characters.ts
index 89003d7..fb45d6f 100644
--- a/src/scripts/databaseManager/blueprints/characters.ts
+++ b/src/scripts/databaseManager/blueprints/characters.ts
@@ -246,7 +246,7 @@ export const charactersBlueprint: I_Blueprint = {
       icon: "fas fa-fist-raised",
       sizing: 3,
       predefinedSelectValues: [
-        /*
+
         "0 - Civilian",
         "1 - Trainee / Athletic civilian",
         "2 - Trained soldier / Weak magic user",
@@ -263,7 +263,7 @@ export const charactersBlueprint: I_Blueprint = {
         "13 - World-shaping god / Powerful ascendant / Strong outerplanar entity",
         "14 - New transcendant / Genius ascendant / Powerful outerplanar entity",
         "15 - Established transcendant / Prodigy ascendant / Ancient outerplanar entity",
-        "16 & Above - Off the scale / Impossible to even categorize" */
+        "16 & Above - Off the scale / Impossible to even categorize"
       ]
     },
     {
diff --git a/src/scripts/databaseManager/blueprints/languages.ts b/src/scripts/databaseManager/blueprints/languages.ts
index dcf40dd..be4cd09 100644
--- a/src/scripts/databaseManager/blueprints/languages.ts
+++ b/src/scripts/databaseManager/blueprints/languages.ts
@@ -117,7 +117,7 @@ export const languagesBlueprint: I_Blueprint = {
       sizing: 6,
       relationshipSettings: {
         connectedObjectType: "languages",
-        connectedField: "predecessorLanguages"
+        connectedField: "followingLanguages"
       }
     },
     {
@@ -128,7 +128,7 @@ export const languagesBlueprint: I_Blueprint = {
       sizing: 6,
       relationshipSettings: {
         connectedObjectType: "languages",
-        connectedField: "followingLanguages"
+        connectedField: "predecessorLanguages"
       }
     },
     {
diff --git a/src/scripts/databaseManager/blueprints/races.ts b/src/scripts/databaseManager/blueprints/races.ts
index ce4868b..e3c7da3 100644
--- a/src/scripts/databaseManager/blueprints/races.ts
+++ b/src/scripts/databaseManager/blueprints/races.ts
@@ -153,7 +153,7 @@ export const racesBlueprint: I_Blueprint = {
       predefinedSelectValues: [
         "Amphibian",
         "Animal",
-        "Atrificial",
+        "Artificial",
         "Bacteria",
         "Bird",
         "Draconoid",
diff --git a/suggestionList.md b/suggestionList.md
index 4cc3f20..58ff898 100644
--- a/suggestionList.md
+++ b/suggestionList.md
@@ -1,3 +1,7 @@
+- Fix custom order sorting in tag groups
+- Add to "-webkit-app-region: no-drag;" ".q-position-engine" 
+### ADD DOCS ABOUT BUGGY BUILD FILE
+
 - Unify "/" style capitals across document fields
 - Add "Document relevance" switch and integrate it into filters
 - Add "Show in search results" checkbox for relationship searches