From 9d050db506aa61b393a8f94371feff75a78dc50e Mon Sep 17 00:00:00 2001
From: Andy Woodward <39595991+an-d-uu@users.noreply.github.com>
Date: Mon, 30 Oct 2023 10:43:04 -0500
Subject: [PATCH] Added "Always Show Fragment Name" in the preferences of your
 Editor

Added new field to the preferences under the Editor section that allows the user to store a bit field that will allow you to always see the fragment name instead of only seeing it when you have multiple fragments in a single snippet item.
---
 src/main/services/i18n/locales/en/preferences.json        | 1 +
 src/main/store/module/preferences.ts                      | 3 ++-
 src/renderer/components/preferences/EditorPreferences.vue | 6 ++++++
 src/renderer/store/app.ts                                 | 3 ++-
 src/renderer/store/snippets.ts                            | 4 +++-
 src/shared/types/renderer/store/app.d.ts                  | 1 +
 6 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/main/services/i18n/locales/en/preferences.json b/src/main/services/i18n/locales/en/preferences.json
index 87fc2000..ec427cbe 100644
--- a/src/main/services/i18n/locales/en/preferences.json
+++ b/src/main/services/i18n/locales/en/preferences.json
@@ -19,6 +19,7 @@
     "highlightLine": "Highlight Line",
     "highlightGutter": "Highlight Gutter",
     "matchBrackets": "Match Brackets",
+    "showFragments": "Always Show Fragments",
     "prettier": {
       "label": "Prettier",
       "trailingComma": {
diff --git a/src/main/store/module/preferences.ts b/src/main/store/module/preferences.ts
index c9183ff2..6c812f84 100644
--- a/src/main/store/module/preferences.ts
+++ b/src/main/store/module/preferences.ts
@@ -25,7 +25,8 @@ export default new Store<PreferencesStore>({
       singleQuote: true,
       highlightLine: false,
       highlightGutter: false,
-      matchBrackets: false
+      matchBrackets: false,
+      showFragments: false
     },
     screenshot: {
       background: false,
diff --git a/src/renderer/components/preferences/EditorPreferences.vue b/src/renderer/components/preferences/EditorPreferences.vue
index 1519db1f..4781d6fb 100644
--- a/src/renderer/components/preferences/EditorPreferences.vue
+++ b/src/renderer/components/preferences/EditorPreferences.vue
@@ -37,6 +37,12 @@
           name="matchBrackets"
         />
       </AppFormItem>
+      <AppFormItem :label="i18n.t('preferences:editor.showFragments')">
+        <AppCheckbox
+          v-model="appStore.editor.showFragments"
+          name="showFragments"
+        />
+      </AppFormItem>
       <h4>{{ i18n.t('preferences:editor.prettier.label') }}</h4>
       <AppFormItem
         :label="i18n.t('preferences:editor.prettier.trailingComma.label')"
diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
index a8a15229..2dcaa989 100644
--- a/src/renderer/store/app.ts
+++ b/src/renderer/store/app.ts
@@ -21,7 +21,8 @@ export const EDITOR_DEFAULTS: EditorSettings = {
   singleQuote: true,
   highlightLine: false,
   highlightGutter: false,
-  matchBrackets: false
+  matchBrackets: false,
+  showFragments: false
 }
 
 const SCREENSHOT_DEFAULTS: ScreenshotSettings = {
diff --git a/src/renderer/store/snippets.ts b/src/renderer/store/snippets.ts
index 7b376daf..ff5de974 100644
--- a/src/renderer/store/snippets.ts
+++ b/src/renderer/store/snippets.ts
@@ -81,7 +81,9 @@ export const useSnippetStore = defineStore('snippets', {
     fragmentCount: state => state.selected?.content?.length,
     tagsCount: state => state.selected?.tagsIds?.length,
     isFragmentsShow (): boolean {
-      return this.fragmentCount ? this.fragmentCount > 1 : false
+      const appStore = useAppStore()
+      if (appStore.editor.showFragments === true) return true
+      else return this.fragmentCount ? this.fragmentCount > 1 : false
     },
     isTagsShow (): boolean {
       const appStore = useAppStore()
diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
index c7d7c963..1bd54241 100644
--- a/src/shared/types/renderer/store/app.d.ts
+++ b/src/shared/types/renderer/store/app.d.ts
@@ -37,6 +37,7 @@ export interface EditorSettings {
   highlightLine: boolean
   highlightGutter: boolean
   matchBrackets: boolean
+  showFragments: boolean
 }
 
 export interface ScreenshotSettings {