normalize menu item titles

Author: chlab

web/src/components/MenuItem.vue

@@ -1,6 +1,14 @@
 <script setup>
 import MenuIcon from './MenuIcon.vue'
 
+const toTitleCase = (str) => {
+  return str.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+const normalizeTitle = (str) => {
+  return toTitleCase(str.replace(/^[«»"]+|[«»"]+$/g, '').trim());
+};
+
 const props = defineProps({
   name: {
     type: String,
@@ -49,7 +57,7 @@ const props = defineProps({
     <div :class="compact ? '' : 'px-6 py-4 pb-6'">
       <!-- Title row with vegi icon -->
       <div class="flex items-center gap-2">
-        <h3 :class="['capitalize', compact ? 'text-sm' : 'font-medium']">{{ name }}</h3>
+        <h3 :class="[compact ? 'text-sm' : 'font-medium']">{{ normalizeTitle(name) }}</h3>
         <span v-if="type === 'vegetarian'" class="text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" :class="compact ? 'size-3' : 'size-4'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
             <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>