refactor: item name capitalization improvements

src/components/common/SystemCommands.vue

@@ -87,11 +87,10 @@
                   <span
                     v-bind="attrs"
                     class="text-wrap"
-                    style="text-transform: capitalize;"
                     v-on="on"
-                  >{{ service.name }}</span>
+                  >{{ $filters.prettyCase(service.name) }}</span>
                 </template>
-                <span style="text-transform: capitalize;">{{ service.active_state }} ({{ service.sub_state }})</span>
+                <span>{{ $filters.prettyCase(`${service.active_state} (${service.sub_state})`) }}</span>
               </v-tooltip>
             </v-list-item-title>
           </v-list-item-content>

src/util/__tests__/string-formatters.spec.ts

@@ -0,0 +1,14 @@
+import stringFormatters from '../string-formatters'
+
+describe('prettyCase', () => {
+  const sf = stringFormatters()
+
+  it.each([
+    ['_  hello   _ _world_ ', 'Hello World'],
+    ['raspberry pi 3b+', 'Raspberry Pi 3b+'],
+    ['Raspberry Pi 3B+', 'Raspberry Pi 3B+'],
+    ['active (running)', 'Active (Running)'],
+  ])('Expects pretty case of "%s" to be "%s"', (input, expected) => {
+    expect(sf.prettyCase(input)).toBe(expected)
+  })
+})

src/util/string-formatters.ts

@@ -11,10 +11,9 @@ const stringFormatters = () => {
   const instance = {
     prettyCase: (value: string) => {
       return value
-        .split(/[ _]/g)
-        .filter(x => x)
-        .map(upperFirst)
-        .join(' ')
+        .replace(/[_ ]+/g, ' ')
+        .trim()
+        .replace(/\w+/g, match => upperFirst(match))
     },
 
     getPixelsString: (value: number | string | undefined | null) => {