Show duration on schedule block lists

Display effective duration (time window or custom override) on every
block list — Admin, Dashboard, and TV sidebar. Custom duration_minutes
values are highlighted in indigo to distinguish them from the default
time-window calculation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/ScheduleBlock.vue

@@ -12,7 +12,12 @@
       <div class="block-title">
         {{ block.label || subjectName || 'Block' }}
       </div>
-      <div class="block-time">{{ block.time_start }} – {{ block.time_end }}</div>
+      <div class="block-time">
+        {{ block.time_start }} – {{ block.time_end }}
+        <span class="block-duration" :class="{ 'block-duration-custom': block.duration_minutes != null }">
+          · {{ durationLabel }}
+        </span>
+      </div>
     </div>
     <div class="block-status" v-if="isCompleted">✓</div>
     <div class="block-status active" v-else-if="isCurrent">▶</div>
@@ -31,6 +36,19 @@ const props = defineProps({
 
 const subjectColor = computed(() => props.block.subject?.color || '#475569')
 const subjectName = computed(() => props.block.subject?.name || null)
+
+const durationLabel = computed(() => {
+  if (props.block.duration_minutes != null) return `${props.block.duration_minutes} min`
+  const start = props.block.time_start
+  const end = props.block.time_end
+  if (start && end) {
+    const [sh, sm] = start.split(':').map(Number)
+    const [eh, em] = end.split(':').map(Number)
+    const mins = (eh * 60 + em) - (sh * 60 + sm)
+    if (mins > 0) return `${mins} min`
+  }
+  return ''
+})
 </script>
 
 <style scoped>
@@ -90,6 +108,9 @@ const subjectName = computed(() => props.block.subject?.name || null)
   font-variant-numeric: tabular-nums;
 }
 
+.block-duration { color: #475569; }
+.block-duration-custom { color: #818cf8; }
+
 .block-status {
   font-size: 0.85rem;
   color: #64748b;