0.1.5 - added background color support, started on minor document mode

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)
       }

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;

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':
               (

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)))
   }
 
   /****************************************************************/

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

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) {

src/css/app.scss

@@ -181,6 +181,10 @@ a {
 }
 
 .q-item {
+  &.isMinor {
+    filter: grayscale(100) brightness(0.7);
+  }
+
   &.hasTextShadow {
     $shadowColorOutline: #000;
     $shadowColorSurround: #000;

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
 

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[]

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))
   }
 

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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!",

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