fix intervals not loading and other library issues

src/components/workout/WorkoutCard.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="workout-card" @click="$emit('click', workout)">
     <div class="workout-card-header">
-      <div class="workout-category" :class="`category-${workout.category}`">
-        {{ formatCategory(workout.category) }}
+      <div class="workout-badges">
+        <div class="workout-type" :class="`type-${workout.type}`">
+          {{ formatType(workout.type) }}
+        </div>
+        <div v-if="workout.difficulty" class="workout-difficulty" :class="`difficulty-${workout.difficulty}`">
+          {{ formatDifficulty(workout.difficulty) }}
+        </div>
       </div>
       <FavoriteButton
         v-if="showFavorite"
@@ -75,16 +80,32 @@ defineProps({
 
 defineEmits(['click', 'toggle-favorite'])
 
-const categoryLabels = {
+const typeLabels = {
   endurance: 'Endurance',
+  tempo: 'Tempo',
   threshold: 'Threshold',
   vo2max: 'VO2 Max',
   sprint: 'Sprint',
-  recovery: 'Recovery'
+  recovery: 'Recovery',
+  climbing: 'Climbing',
+  interval: 'Interval',
+  freeride: 'Free Ride',
+  race: 'Race'
 }
 
-function formatCategory(category) {
-  return categoryLabels[category] || category
+const difficultyLabels = {
+  beginner: 'Beginner',
+  intermediate: 'Intermediate',
+  advanced: 'Advanced',
+  expert: 'Expert'
+}
+
+function formatType(type) {
+  return typeLabels[type] || type
+}
+
+function formatDifficulty(difficulty) {
+  return difficultyLabels[difficulty] || difficulty
 }
 
 function formatIF(value) {
@@ -122,7 +143,14 @@ function truncateDescription(text) {
   margin-bottom: var(--spacing-sm);
 }
 
-.workout-category {
+.workout-badges {
+  display: flex;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+.workout-type,
+.workout-difficulty {
   display: inline-block;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--radius-sm);
@@ -132,29 +160,74 @@ function truncateDescription(text) {
   letter-spacing: 0.5px;
 }
 
-.category-endurance {
+.type-endurance {
   background: rgba(46, 204, 113, 0.15);
   color: #27ae60;
 }
 
-.category-threshold {
+.type-tempo {
+  background: rgba(52, 152, 219, 0.15);
+  color: #2980b9;
+}
+
+.type-threshold {
   background: rgba(241, 196, 15, 0.15);
   color: #f39c12;
 }
 
-.category-vo2max {
+.type-vo2max {
   background: rgba(231, 76, 60, 0.15);
   color: #c0392b;
 }
 
-.category-sprint {
+.type-sprint {
   background: rgba(155, 89, 182, 0.15);
   color: #8e44ad;
 }
 
-.category-recovery {
-  background: rgba(52, 152, 219, 0.15);
-  color: #2980b9;
+.type-recovery {
+  background: rgba(149, 165, 166, 0.15);
+  color: #7f8c8d;
+}
+
+.type-climbing {
+  background: rgba(230, 126, 34, 0.15);
+  color: #d35400;
+}
+
+.type-interval {
+  background: rgba(26, 188, 156, 0.15);
+  color: #16a085;
+}
+
+.type-freeride {
+  background: rgba(52, 73, 94, 0.15);
+  color: #2c3e50;
+}
+
+.type-race {
+  background: rgba(192, 57, 43, 0.15);
+  color: #c0392b;
+}
+
+.difficulty-beginner {
+  background: rgba(46, 204, 113, 0.1);
+  color: #27ae60;
+}
+
+.difficulty-intermediate {
+  background: rgba(241, 196, 15, 0.1);
+  color: #f39c12;
+}
+
+.difficulty-advanced {
+  background: rgba(230, 126, 34, 0.1);
+  color: #d35400;
+}
+
+.difficulty-expert {
+  background: rgba(231, 76, 60, 0.1);
+  color: #c0392b;
 }
 
 .workout-name {