Add space to setting group label (#370)

* Add space to setting group label

* handle acronym

src/components/dialog/content/setting/SettingGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="setting-group">
     <Divider v-if="divider" />
-    <h3>{{ group.label }}</h3>
+    <h3>{{ formatCamelCase(group.label) }}</h3>
     <div
       v-for="setting in group.settings"
       :key="setting.id"
@@ -40,6 +40,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import Divider from 'primevue/divider'
 import CustomSettingValue from '@/components/dialog/content/setting/CustomSettingValue.vue'
 import InputSlider from '@/components/dialog/content/setting/InputSlider.vue'
+import { formatCamelCase } from '@/utils/formatUtil'
 
 defineProps<{
   group: {

src/utils/formatUtil.ts

@@ -0,0 +1,24 @@
+export function formatCamelCase(str: string): string {
+  // Check if the string is camel case
+  const isCamelCase = /^([A-Z][a-z]*)+$/.test(str)
+
+  if (!isCamelCase) {
+    return str // Return original string if not camel case
+  }
+
+  // Split the string into words, keeping acronyms together
+  const words = str.split(/(?=[A-Z][a-z])|\d+/)
+
+  // Process each word
+  const processedWords = words.map((word) => {
+    // If the word is all uppercase and longer than one character, it's likely an acronym
+    if (word.length > 1 && word === word.toUpperCase()) {
+      return word // Keep acronyms as is
+    }
+    // For other words, ensure the first letter is capitalized
+    return word.charAt(0).toUpperCase() + word.slice(1)
+  })
+
+  // Join the words with spaces
+  return processedWords.join(' ')
+}