From 9a55a994a3688a701756dc3b5b3614c67f1d92ee Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Mon, 1 Sep 2025 20:14:28 +0200
Subject: [PATCH] feat: add formatAsHeading function to format tag names in
 TripChecklist

---
 frontend/src/pages/TripChecklist.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index d761318..fe05d8f 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -108,6 +108,13 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
     a.tag.name.localeCompare(b.tag.name)
   );
 
+  function formatAsHeading(str: string) {
+    if (!str) return "";
+    // Replace hyphens with spaces and capitalize first letter
+    const withSpaces = str.replace(/-/g, " ");
+    return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1);
+  }
+
   return (
     <div>
       {/* Trip-Titel und Zeitraum */}
@@ -242,9 +249,9 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
         {sortedTagGroups.map(({ tag, items }) => (
           <React.Fragment key={tag.id}>
             <li className="mt-4 mb-1 font-semibold text-gray-700 flex items-center gap-2">
-              <span className="text-xs bg-gray-200 text-gray-700 rounded px-2 py-0.5">
-                #{tag.name}
-              </span>
+              <h3 className="text-m text-gray-700 px-2 py-0.5 m-0 font-semibold">
+                {formatAsHeading(tag.name)}
+              </h3>
             </li>
             {items.map((item) => (
               <li