From 7154ab2b20c66757c8575989ebc8e8c9248ec50b Mon Sep 17 00:00:00 2001
From: Elvanos <xfenix@seznam.cz>
Date: Tue, 6 Apr 2021 02:15:17 +0200
Subject: [PATCH] 0.1.5 - added background color support, started on minor
 document mode

---
 src/BaseClass.ts                              |  4 ++-
 src/components/ObjectTree.vue                 | 26 +++++++++++++---
 src/components/appHeader/TopTabs.vue          |  2 +-
 src/components/dialogs/ExistingDocument.vue   | 31 ++++++++++++++++---
 .../fields/Field_MultiRelationship.vue        | 16 +++++++---
 .../fields/Field_SingleRelationship.vue       | 14 ++++++---
 src/css/app.scss                              |  4 +++
 src/documents/changeLog.md                    |  9 ++++--
 src/interfaces/I_OpenedDocument.ts            |  1 +
 src/pages/DocumentDisplay.vue                 |  2 +-
 .../databaseManager/blueprints/chapters.ts    | 11 +++++++
 .../databaseManager/blueprints/characters.ts  | 24 ++++++++++++++
 .../databaseManager/blueprints/currencies.ts  | 11 +++++++
 .../databaseManager/blueprints/events.ts      | 11 +++++++
 .../databaseManager/blueprints/items.ts       | 11 +++++++
 .../databaseManager/blueprints/languages.ts   | 11 +++++++
 .../databaseManager/blueprints/locations.ts   | 11 +++++++
 .../databaseManager/blueprints/loreNotes.ts   | 11 +++++++
 .../databaseManager/blueprints/magic.ts       | 13 +++++++-
 .../databaseManager/blueprints/myths.ts       | 13 +++++++-
 .../blueprints/politicalGroups.ts             | 11 +++++++
 .../databaseManager/blueprints/races.ts       | 11 +++++++
 .../databaseManager/blueprints/religions.ts   | 11 +++++++
 .../blueprints/scienceTechnology.ts           | 13 +++++++-
 src/scripts/utilities/tipsTricks.ts           |  1 +
 suggestionList.md                             | 11 ++-----
 26 files changed, 256 insertions(+), 38 deletions(-)

diff --git a/src/BaseClass.ts b/src/BaseClass.ts
index 15dbc02..7f5e8ff 100644
--- a/src/BaseClass.ts
+++ b/src/BaseClass.ts
@@ -468,7 +468,9 @@ export default class BaseClass extends Vue {
           hierarchicalPath: this.getDocumentHieararchicalPath(doc, dbDocuments),
           tags: doc.extraFields.find(e => e.id === "tags")?.value,
           color: doc.extraFields.find(e => e.id === "documentColor")?.value,
-          isCategory: doc.extraFields.find(e => e.id === "categorySwitch")?.value
+          bgColor: doc.extraFields.find(e => e.id === "documentBackgroundColor")?.value,
+          isCategory: doc.extraFields.find(e => e.id === "categorySwitch")?.value,
+          isMinor: doc.extraFields.find(e => e.id === "minorSwitch")?.value
         } as unknown as I_ShortenedDocument
         formattedDocuments.push(pushValue)
       }
diff --git a/src/components/ObjectTree.vue b/src/components/ObjectTree.vue
index 1ac6f44..fe55580 100644
--- a/src/components/ObjectTree.vue
+++ b/src/components/ObjectTree.vue
@@ -49,12 +49,15 @@
       no-results-label="Nothing matches your request"
       >
       <template v-slot:default-header="prop">
-        <div class="row items-center col-grow"
-        @click.stop.prevent="processNodeClick(prop.node)"
-        @click.stop.prevent.middle="processNodeLabelMiddleClick(prop.node)"
+        <div
+          class="row items-center col-grow documentWrapper"
+          :class="{'isMinor': prop.node.isMinor}"
+          :style="`background-color: ${prop.node.bgColor};`"
+          @click.stop.prevent="processNodeClick(prop.node)"
+          @click.stop.prevent.middle="processNodeLabelMiddleClick(prop.node)"
         >
           <div class="documentLabel"
-            :style="`color: ${prop.node.color}`"
+            :style="`color: ${prop.node.color};`"
            >
           <q-icon
             :style="`color: ${determineNodeColor(prop.node)}; width: 22px !important;`"
@@ -458,17 +461,22 @@ export default class ObjectTree extends BaseClass {
 
           const parentDocID = doc.extraFields.find(e => e.id === "parentDoc")?.value.value as unknown as {_id: string}
           const color = doc.extraFields.find(e => e.id === "documentColor")?.value as unknown as string
-          const isCategory = doc.extraFields.find(e => e.id === "categorySwitch")?.value as unknown as string
+          const bgColor = doc.extraFields.find(e => e.id === "documentBackgroundColor")?.value as unknown as string
+
+          const isCategory = doc.extraFields.find(e => e.id === "categorySwitch")?.value as unknown as boolean
+          const isMinor = doc.extraFields.find(e => e.id === "minorSwitch")?.value as unknown as boolean
 
           return {
             label: doc.extraFields.find(e => e.id === "name")?.value,
             icon: (isCategory) ? "fas fa-folder-open" : doc.icon,
             isCategory: !!(isCategory),
+            isMinor: isMinor,
             sticker: doc.extraFields.find(e => e.id === "order")?.value,
             parentDoc: (parentDocID) ? parentDocID._id : false,
             handler: this.openExistingDocumentRoute,
             expandable: true,
             color: color,
+            bgColor: bgColor,
             type: doc.type,
             children: [],
             hasEdits: false,
@@ -889,6 +897,14 @@ export default class ObjectTree extends BaseClass {
     }
   }
 
+  .documentWrapper {
+    border-radius: 3px;
+
+    &.isMinor {
+      filter: grayscale(100) brightness(0.7);
+    }
+  }
+
   .documentLabel {
     width: 100%;
     display: flex;
diff --git a/src/components/appHeader/TopTabs.vue b/src/components/appHeader/TopTabs.vue
index da90ec9..b525a0b 100644
--- a/src/components/appHeader/TopTabs.vue
+++ b/src/components/appHeader/TopTabs.vue
@@ -34,7 +34,7 @@
           :key="document.type+document._id"
           :icon="(retrieveFieldValue(document,'categorySwitch') ? 'fas fa-folder-open' : document.icon)"
           :label="retrieveFieldValue(document,'name')"
-          :style="`color: ${retrieveFieldValue(document,'documentColor')};`"
+          :style="`color: ${retrieveFieldValue(document,'documentColor')}; background-color: ${retrieveFieldValue(document,'documentBackgroundColor')}; filter: ${(retrieveFieldValue(document,'minorSwitch') ? 'grayscale(100) brightness(0.7)' : '')}`"
           :class="[
             {'isBold':
               (
diff --git a/src/components/dialogs/ExistingDocument.vue b/src/components/dialogs/ExistingDocument.vue
index d8c2de9..6af3a9e 100644
--- a/src/components/dialogs/ExistingDocument.vue
+++ b/src/components/dialogs/ExistingDocument.vue
@@ -14,9 +14,14 @@
         </q-card-section>
 
         <q-card-section class="column items-center">
-          <div class="q-mb-lg">
+          <div class="q-mb-md">
             <q-checkbox dark color="primary" v-model="includeCategories" label="Include categories in the list?" />
           </div>
+
+           <div class="q-mb-lg">
+            <q-checkbox dark color="primary" v-model="includeMinor" label="Include minor documents in the list?" />
+          </div>
+
            <q-select
               style="width: 400px;"
               ref="ref_existingDocument"
@@ -36,10 +41,11 @@
             >
               <template v-slot:option="{ itemProps, itemEvents, opt }">
                   <q-item
-                    :class="{'hasTextShadow': textShadow}"
+                    :class="{'hasTextShadow': textShadow, 'isMinor':opt.isMinor}"
                     v-bind="itemProps"
                     v-on="itemEvents"
-                    :style="`color: ${opt.color}`"
+                    :key="opt.id"
+                    :style="`color: ${opt.color}; background-color: ${opt.bgColor}`"
                   >
                     <q-item-section avatar>
                       <q-icon
@@ -201,11 +207,24 @@ export default class ExistingDocumentDialog extends DialogBase {
    */
   includeCategories = true
 
+  /**
+   * Model for pre-filtering via minor documents
+   */
+  includeMinor = false
+
   /**
    * React to the category checkbox changes
    */
   @Watch("includeCategories")
-  reactToCheckboxChange () {
+  reactToCategoryCheckboxChange () {
+    this.preFilterDocuments()
+  }
+
+  /**
+   * React to the category checkbox changes
+   */
+  @Watch("includeMinor")
+  reactToMinorCheckboxChange () {
     this.preFilterDocuments()
   }
 
@@ -213,7 +232,9 @@ export default class ExistingDocumentDialog extends DialogBase {
    * Prefilter documents based on what is in the checkbox
    */
   preFilterDocuments () {
-    this.existingObjectPrefilteredList = this.existingObjectsFullList.filter(e => !((!this.includeCategories && e.isCategory)))
+    this.existingObjectPrefilteredList = this.existingObjectsFullList
+      .filter(e => !((!this.includeCategories && e.isCategory)))
+      .filter(e => !((!this.includeMinor && e.isMinor)))
   }
 
   /****************************************************************/
diff --git a/src/components/fields/Field_MultiRelationship.vue b/src/components/fields/Field_MultiRelationship.vue
index d380e73..db5e304 100644
--- a/src/components/fields/Field_MultiRelationship.vue
+++ b/src/components/fields/Field_MultiRelationship.vue
@@ -120,9 +120,11 @@
       </template>
       <template v-slot:option="{ itemProps, itemEvents, opt }">
         <q-item
-          :class="{'hasTextShadow': textShadow}"
+          :class="{'hasTextShadow': textShadow, 'isMinor':opt.isMinor}"
           v-bind="itemProps"
           v-on="itemEvents"
+          :key="opt.id"
+          :style="`background-color: ${opt.bgColor}`"
         >
            <q-item-section avatar>
             <q-icon
@@ -242,7 +244,7 @@ export default class Field_MultiRelationship extends FieldBase {
 
     this.checkNotes()
 
-    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log(e))
+    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log())
   }
 
   /**
@@ -250,7 +252,7 @@ export default class Field_MultiRelationship extends FieldBase {
    */
   @Watch("inputDataBluePrint", { deep: true, immediate: true })
   reactToBlueprintChanges () {
-    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log(e))
+    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log())
   }
 
   /**
@@ -258,7 +260,7 @@ export default class Field_MultiRelationship extends FieldBase {
    */
   @Watch("currentId")
   reactToIDChanges () {
-    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log(e))
+    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log())
   }
 
   /**
@@ -367,7 +369,9 @@ export default class Field_MultiRelationship extends FieldBase {
           url: `/project/display-content/${objectDoc.type}/${objectDoc._id}`,
           label: objectDoc.extraFields.find(e => e.id === "name")?.value,
           isCategory: objectDoc.extraFields.find(e => e.id === "categorySwitch")?.value,
+          isMinor: objectDoc.extraFields.find(e => e.id === "minorSwitch")?.value,
           color: objectDoc.extraFields.find(e => e.id === "documentColor")?.value,
+          bgColor: objectDoc.extraFields.find(e => e.id === "documentBackgroundColor")?.value,
           pairedField: pairedField,
           tags: objectDoc.extraFields.find(e => e.id === "tags")?.value,
           // @ts-ignore
@@ -412,7 +416,9 @@ export default class Field_MultiRelationship extends FieldBase {
       await CurrentObjectDB.close()
 
       // Do a last set of filtering
-      this.allDocumentsWithoutCurrent = allObjectsWithoutCurrent.filter((obj) => !obj.isCategory)
+      this.allDocumentsWithoutCurrent = allObjectsWithoutCurrent
+        .filter((obj) => !obj.isCategory)
+        .filter((obj) => !obj.isMinor)
 
       // @ts-ignore
       allObjectsWithoutCurrent = null
diff --git a/src/components/fields/Field_SingleRelationship.vue b/src/components/fields/Field_SingleRelationship.vue
index 43bf871..33323c7 100644
--- a/src/components/fields/Field_SingleRelationship.vue
+++ b/src/components/fields/Field_SingleRelationship.vue
@@ -118,9 +118,11 @@
 
       <template v-slot:option="{ itemProps, itemEvents, opt }">
           <q-item
-            :class="{'hasTextShadow': textShadow}"
+            :class="{'hasTextShadow': textShadow, 'isMinor':opt.isMinor}"
             v-bind="itemProps"
             v-on="itemEvents"
+            :key="opt.id"
+            :style="`background-color: ${opt.bgColor}`"
           >
             <q-item-section avatar>
               <q-icon
@@ -242,7 +244,7 @@ export default class Field_SingleRelationship extends FieldBase {
 
     this.inputNote = (!this.inputDataValue?.addedValues) ? this.inputNote : this.inputDataValue.addedValues
 
-    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log(e))
+    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log())
   }
 
   /**
@@ -250,7 +252,7 @@ export default class Field_SingleRelationship extends FieldBase {
    */
   @Watch("inputDataBluePrint", { deep: true, immediate: true })
   reactToBlueprintChanges () {
-    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log(e))
+    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log())
   }
 
   /**
@@ -258,7 +260,7 @@ export default class Field_SingleRelationship extends FieldBase {
    */
   @Watch("currentId")
   reactToIDChanges () {
-    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log(e))
+    this.reloadObjectListAndCheckIfValueExists().catch(e => console.log())
   }
 
   /**
@@ -370,7 +372,9 @@ export default class Field_SingleRelationship extends FieldBase {
           url: `/project/display-content/${objectDoc.type}/${objectDoc._id}`,
           label: objectDoc.extraFields.find(e => e.id === "name")?.value,
           color: objectDoc.extraFields.find(e => e.id === "documentColor")?.value,
+          bgColor: objectDoc.extraFields.find(e => e.id === "documentBackgroundColor")?.value,
           isCategory: objectDoc.extraFields.find(e => e.id === "categorySwitch")?.value,
+          isMinor: objectDoc.extraFields.find(e => e.id === "minorSwitch")?.value,
           pairedField: pairedField,
           tags: objectDoc.extraFields.find(e => e.id === "tags")?.value,
           // @ts-ignore
@@ -382,7 +386,7 @@ export default class Field_SingleRelationship extends FieldBase {
       const isBelongsUnder = (this.inputDataBluePrint.id === "parentDoc")
       const objectsWithoutCurrent: I_ShortenedDocument[] = (isBelongsUnder)
         ? allObjects.filter((obj) => obj._id !== this.currentId)
-        : allObjects.filter((obj) => obj._id !== this.currentId).filter((obj) => !obj.isCategory)
+        : allObjects.filter((obj) => obj._id !== this.currentId).filter((obj) => !obj.isCategory).filter((obj) => !obj.isMinor)
 
       // Proceed only if the local input is properly set up
       if (this.localInput._id) {
diff --git a/src/css/app.scss b/src/css/app.scss
index 83590fc..74866c0 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -181,6 +181,10 @@ a {
 }
 
 .q-item {
+  &.isMinor {
+    filter: grayscale(100) brightness(0.7);
+  }
+
   &.hasTextShadow {
     $shadowColorOutline: #000;
     $shadowColorSurround: #000;
diff --git a/src/documents/changeLog.md b/src/documents/changeLog.md
index 13e3161..ef6d58c 100644
--- a/src/documents/changeLog.md
+++ b/src/documents/changeLog.md
@@ -7,7 +7,7 @@
 
 ### 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.
+- 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 and 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 & Optimizations
@@ -24,10 +24,13 @@
 ### New features
 
 - Added a dedicated button that opens the connected documents straight from the little chips in relationship fields while in edit mode
+- Added support for background color for documents
+- Added support for "Minor document" mode switch for better organization of documents
 
 ### QoL adjustments
 
 - Updated fullscreen editor looks to work more like a proper document editor
+- Updated the Advanced search guide with new additions and added one new Trivia popup text concerning it
 - Made the app a bit more "snappy" by decreasing animation lengths when transitioning between documents
 - Updated `readme` file on how to properly compile the app since I made it OSS and all... kinda important
 
@@ -37,7 +40,7 @@
 
 ### 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.
+- 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 and no data loss occurs.
 
 ### Bugfixes
 
@@ -116,7 +119,7 @@
 
 ### 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.
+- 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 and no data loss occurs.
 
 ### Bugfixes
 
diff --git a/src/interfaces/I_OpenedDocument.ts b/src/interfaces/I_OpenedDocument.ts
index 33f6971..b3033bb 100644
--- a/src/interfaces/I_OpenedDocument.ts
+++ b/src/interfaces/I_OpenedDocument.ts
@@ -25,6 +25,7 @@ export interface I_ShortenedDocument{
   _id: string
   hierarchicalPath?: string
   isCategory?: boolean
+  isMinor?: boolean
   parentDoc: string | false
   children: I_ShortenedDocument[]
   extraFields: I_ExtraDocumentFields[]
diff --git a/src/pages/DocumentDisplay.vue b/src/pages/DocumentDisplay.vue
index 31ab476..6d3ce61 100644
--- a/src/pages/DocumentDisplay.vue
+++ b/src/pages/DocumentDisplay.vue
@@ -713,7 +713,7 @@ export default class PageDocumentDisplay extends BaseClass {
   categoryFieldFilter (currentFieldID: string) {
     const isCategory = this.retrieveFieldValue(this.currentData, "categorySwitch")
 
-    const ignoredList = ["breakBasic", "name", "documentColor", "parentDoc", "order", "categorySwitch", "tags"]
+    const ignoredList = ["breakBasic", "name", "documentColor", "documentBackgroundColor", "parentDoc", "order", "categorySwitch", "minorSwitch", "tags"]
     return (!isCategory || ignoredList.includes(currentFieldID))
   }
 
diff --git a/src/scripts/databaseManager/blueprints/chapters.ts b/src/scripts/databaseManager/blueprints/chapters.ts
index c1ca916..a4168bb 100644
--- a/src/scripts/databaseManager/blueprints/chapters.ts
+++ b/src/scripts/databaseManager/blueprints/chapters.ts
@@ -30,6 +30,17 @@ export const chaptersBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/characters.ts b/src/scripts/databaseManager/blueprints/characters.ts
index a25638d..d2e68f5 100644
--- a/src/scripts/databaseManager/blueprints/characters.ts
+++ b/src/scripts/databaseManager/blueprints/characters.ts
@@ -30,6 +30,17 @@ export const charactersBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
@@ -56,6 +67,19 @@ export const charactersBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "minorSwitch",
+      name: "Is a minor document",
+      type: "switch",
+      icon: "mdi-magnify-minus-outline",
+      tooltip:
+        `This setting allows for setting the current document to minor document mode.
+        <br>
+        A document with minor document mode toggled on will not show in any other relationship searches.<br>
+        The idea behind this setting is to allow for creation of documents that will not clutter the search, but could be theoretically relevant in some very specific cases to the story (eg: distant relatives of a character).
+        `,
+      sizing: 3
+    },
     {
       id: "categorySwitch",
       name: "Is a category",
diff --git a/src/scripts/databaseManager/blueprints/currencies.ts b/src/scripts/databaseManager/blueprints/currencies.ts
index 4c9bd6c..45ebba3 100644
--- a/src/scripts/databaseManager/blueprints/currencies.ts
+++ b/src/scripts/databaseManager/blueprints/currencies.ts
@@ -30,6 +30,17 @@ export const currenciesBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/events.ts b/src/scripts/databaseManager/blueprints/events.ts
index e3b8f97..9284d51 100644
--- a/src/scripts/databaseManager/blueprints/events.ts
+++ b/src/scripts/databaseManager/blueprints/events.ts
@@ -30,6 +30,17 @@ export const eventsBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/items.ts b/src/scripts/databaseManager/blueprints/items.ts
index 79e218c..69ada08 100644
--- a/src/scripts/databaseManager/blueprints/items.ts
+++ b/src/scripts/databaseManager/blueprints/items.ts
@@ -30,6 +30,17 @@ export const itemsBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/languages.ts b/src/scripts/databaseManager/blueprints/languages.ts
index 18c438f..f3037fb 100644
--- a/src/scripts/databaseManager/blueprints/languages.ts
+++ b/src/scripts/databaseManager/blueprints/languages.ts
@@ -30,6 +30,17 @@ export const languagesBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/locations.ts b/src/scripts/databaseManager/blueprints/locations.ts
index bd8ff25..50cf17c 100644
--- a/src/scripts/databaseManager/blueprints/locations.ts
+++ b/src/scripts/databaseManager/blueprints/locations.ts
@@ -30,6 +30,17 @@ export const locationsBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/loreNotes.ts b/src/scripts/databaseManager/blueprints/loreNotes.ts
index 3dfa9d5..9a90f79 100644
--- a/src/scripts/databaseManager/blueprints/loreNotes.ts
+++ b/src/scripts/databaseManager/blueprints/loreNotes.ts
@@ -30,6 +30,17 @@ export const loreNotesBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/magic.ts b/src/scripts/databaseManager/blueprints/magic.ts
index 346f494..1bae3ab 100644
--- a/src/scripts/databaseManager/blueprints/magic.ts
+++ b/src/scripts/databaseManager/blueprints/magic.ts
@@ -21,7 +21,7 @@ export const magicBlueprint: I_Blueprint = {
     },
     {
       id: "documentColor",
-      name: "Text Color",
+      name: "Text color",
       type: "colorPicker",
       icon: "mdi-eyedropper",
       tooltip:
@@ -30,6 +30,17 @@ export const magicBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/myths.ts b/src/scripts/databaseManager/blueprints/myths.ts
index 8669a7e..e141a9c 100644
--- a/src/scripts/databaseManager/blueprints/myths.ts
+++ b/src/scripts/databaseManager/blueprints/myths.ts
@@ -21,7 +21,7 @@ export const mythsBlueprint: I_Blueprint = {
     },
     {
       id: "documentColor",
-      name: "Text Color",
+      name: "Text color",
       type: "colorPicker",
       icon: "mdi-eyedropper",
       tooltip:
@@ -30,6 +30,17 @@ export const mythsBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/politicalGroups.ts b/src/scripts/databaseManager/blueprints/politicalGroups.ts
index 430f00c..1e3d01a 100644
--- a/src/scripts/databaseManager/blueprints/politicalGroups.ts
+++ b/src/scripts/databaseManager/blueprints/politicalGroups.ts
@@ -30,6 +30,17 @@ export const politicalGroupsBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/races.ts b/src/scripts/databaseManager/blueprints/races.ts
index ccda450..bb78102 100644
--- a/src/scripts/databaseManager/blueprints/races.ts
+++ b/src/scripts/databaseManager/blueprints/races.ts
@@ -30,6 +30,17 @@ export const racesBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/religions.ts b/src/scripts/databaseManager/blueprints/religions.ts
index 341f41d..985e761 100644
--- a/src/scripts/databaseManager/blueprints/religions.ts
+++ b/src/scripts/databaseManager/blueprints/religions.ts
@@ -30,6 +30,17 @@ export const religionsBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/databaseManager/blueprints/scienceTechnology.ts b/src/scripts/databaseManager/blueprints/scienceTechnology.ts
index 6933044..37d21cc 100644
--- a/src/scripts/databaseManager/blueprints/scienceTechnology.ts
+++ b/src/scripts/databaseManager/blueprints/scienceTechnology.ts
@@ -21,7 +21,7 @@ export const techBlueprint: I_Blueprint = {
     },
     {
       id: "documentColor",
-      name: "Text Color",
+      name: "Text color",
       type: "colorPicker",
       icon: "mdi-eyedropper",
       tooltip:
@@ -30,6 +30,17 @@ export const techBlueprint: I_Blueprint = {
         `,
       sizing: 2
     },
+    {
+      id: "documentBackgroundColor",
+      name: "Background color",
+      type: "colorPicker",
+      icon: "mdi-format-color-fill",
+      tooltip:
+        `This field allows for custom-coloring your document to any available HEX or RBG color.
+        <br>The selected color will show as a background both in the hierarchical tree on the left and in the top tabs.
+        `,
+      sizing: 2
+    },
     {
       id: "parentDoc",
       name: "Belongs under",
diff --git a/src/scripts/utilities/tipsTricks.ts b/src/scripts/utilities/tipsTricks.ts
index 0333f39..20607fc 100644
--- a/src/scripts/utilities/tipsTricks.ts
+++ b/src/scripts/utilities/tipsTricks.ts
@@ -3,6 +3,7 @@
  * Toggles dev tools in the current window
  */
 export const tipsTricks: string[] = [
+  "It is possible to search through all documents and all of their fields at once using the following in either the Quick search popup or any of the relationship searches: \" %:whatever-you-need\"",
   "There is a whole list of really helpful keybinds that can make your use of FA a lot quicker and easier!",
   "The settings menu contains a whole assortment of both big and small tweaks to tailor the app to your needs!",
   "FA has a Dark Mode that is no mere afterthought and is fully serviceable!",
diff --git a/suggestionList.md b/suggestionList.md
index a44df8e..fa9ea8c 100644
--- a/suggestionList.md
+++ b/suggestionList.md
@@ -1,23 +1,16 @@
-- Unify "/" style capitals across document fields
-- Add "Document relevance" switch and integrate it into filters
-- Add "Show in search results" checkbox for relationship searches
+- Add "is dead" or some similar switch to documents and show strike-through/etc on items in lists, tombstone icon or overlay crossed out icon
+
 - Add "Related notes"
 - Add "Predecessors", "Successors", "Date of start", "Date of end" and "How long it lasted" fields to locations and all other groups
 - Save scroll distance when switching tabs (consider some auto-scroll when opening edit mode)
-- Fix lag on opening Quick-search popup
 - Mass tag rename
 - Add advanced search capabilities to the hierarchical tree
-- Add "is dead" or some similar switch to documents and show strike-through/etc on items in lists, tombstone icon or overlay crossed out icon
-- Custom icons/images to documents
-- Add colored backgrounds to documents (along with already existing colored texts)
 - "Save all" keybind and "Save all and exit" option on the exiting
 - Add support for dates in "custom order"... reee
-- Add cogwheels (loading) for the relationship fields when opening/closing since it takes a while on some PCs
 - Add safeguard to escape closing of settings only after something actually got modified
 - Add hover/on-demand document preview to relationships
 - Floating notes corkboard
 
-- Considering multiple "belongs under" category listing
 - Add intelligent responsive design to the left tree and document body (maybe button to pull the left bar in and out?)
 - Context menu: Expand all
 - Context menu: Collapse all