fix intervals not loading and other library issues

src/components/WorkoutLibraryDetail.vue

@@ -30,8 +30,16 @@
 
           <div class="header-row">
             <div class="header-info">
-              <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.category" class="workout-category">
+                  {{ formatCategory(workout.category) }}
+                </div>
+                <div v-if="workout.difficulty" class="workout-difficulty" :class="`difficulty-${workout.difficulty}`">
+                  {{ formatDifficulty(workout.difficulty) }}
+                </div>
               </div>
               <h1>{{ workout.name }}</h1>
               <p v-if="workout.description">{{ workout.description }}</p>
@@ -56,7 +64,7 @@
             <div class="card-modern">
               <h2>Workout Structure</h2>
               <IntervalDisplay
-                :intervals="intervals"
+                :structure="workout.structure"
                 :show-legend="true"
                 :show-details="true"
               />
@@ -142,23 +150,51 @@ const router = useRouter()
 const store = useWorkoutLibraryStore()
 
 const workout = ref(null)
-const intervals = ref([])
 const loading = ref(true)
 const error = ref('')
 const userRating = ref(0)
 
-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'
+}
+
+const categoryLabels = {
+  base: 'Base',
+  build: 'Build',
+  peak: 'Peak',
+  recovery: 'Recovery',
+  test: 'Test',
+  fun: 'Fun'
+}
+
+const difficultyLabels = {
+  beginner: 'Beginner',
+  intermediate: 'Intermediate',
+  advanced: 'Advanced',
+  expert: 'Expert'
+}
+
+function formatType(type) {
+  return typeLabels[type] || type
 }
 
 function formatCategory(category) {
   return categoryLabels[category] || category
 }
 
+function formatDifficulty(difficulty) {
+  return difficultyLabels[difficulty] || difficulty
+}
+
 function formatIF(value) {
   if (!value) return '—'
   return value.toFixed(2)
@@ -171,7 +207,6 @@ async function loadWorkout() {
   try {
     const workoutId = route.params.workoutId
     workout.value = await store.fetchWorkout(workoutId)
-    intervals.value = await store.fetchWorkoutIntervals(workoutId)
     await store.fetchFavorites()
   } catch (err) {
     error.value = err.response?.data?.error || 'Failed to load workout'
@@ -294,7 +329,16 @@ onMounted(() => {
   flex: 1;
 }
 
-.workout-category {
+.workout-badges {
+  display: flex;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  margin-bottom: var(--spacing-sm);
+}
+
+.workout-type,
+.workout-category,
+.workout-difficulty {
   display: inline-block;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--radius-sm);
@@ -302,32 +346,81 @@ onMounted(() => {
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  margin-bottom: var(--spacing-sm);
 }
 
-.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;
+}
+
+.workout-category {
+  background: var(--color-surface-secondary);
+  color: var(--color-text-secondary);
+}
+
+.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;
 }
 
 .header-info h1 {