feat: ajouter des composants de statut en direct et mettre à jour la configuration de l'éducation

app/components/home/live/Activity.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { Activity } from '~~/types'
+import { IDEs } from '~~/types'
+
+const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'), { lazy: true })
+useIntervalFn(refresh, 5000)
+
+const currentSession = computed(() => {
+  const list = activity.value?.data.activities ?? []
+  const ideActivity = list.find(a => IDEs.some(ide => ide.name === a.name))
+
+  if (!ideActivity) return null
+
+  const name = ideActivity.assets?.small_text === 'Cursor' ? 'Cursor' : ideActivity.name
+
+  const isIdling = ideActivity.details?.includes('Idling') || (!ideActivity.state?.toLowerCase().includes('editing') && name !== 'Visual Studio Code')
+
+  const rawProject = ideActivity.details ? ideActivity.details.replace('Workspace:', '').replace('Editing', '').trim() : 'Unknown Context'
+  const project = rawProject.charAt(0).toUpperCase() + rawProject.slice(1)
+  const file = ideActivity.state?.replace('Editing', '').trim() || 'No active file'
+
+  return {
+    name,
+    project,
+    file,
+    isIdling,
+    startTime: ideActivity.timestamps?.start,
+    icon: IDEs.find(ide => ide.name === name)?.icon ?? 'i-ph-code-duotone'
+  }
+})
+
+const timeAgo = useTimeAgo(computed(() => currentSession.value?.startTime ?? new Date()))
+
+const statusColor = computed(() => {
+  if (!currentSession.value) return 'red'
+  return currentSession.value.isIdling ? 'orange' : 'green'
+})
+
+const statusLabel = computed(() => {
+  if (!currentSession.value) return 'System Offline'
+  if (currentSession.value.isIdling) return 'System Idling'
+  return 'Active Development'
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <UCard v-if="activity">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center gap-3">
+          <div class="relative flex h-3 w-3">
+            <span
+              v-if="statusColor === 'green'"
+              class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"
+            />
+            <span
+              class="relative inline-flex rounded-full h-3 w-3 transition-colors duration-300"
+              :class="{
+                'bg-green-500': statusColor === 'green',
+                'bg-orange-500': statusColor === 'orange',
+                'bg-red-500': statusColor === 'red'
+              }"
+            />
+          </div>
+
+          <span class="text-xs font-bold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <UIcon
+          v-if="currentSession"
+          :name="currentSession.icon"
+          class="w-5 h-5 opacity-80"
+        />
+        <UIcon
+          v-else
+          name="i-ph-power-duotone"
+          class="w-5 h-5 text-red-400 opacity-80"
+        />
+      </div>
+
+      <div
+        v-if="currentSession"
+        class="space-y-1 pl-6 border-l-2 border-neutral-100 dark:border-neutral-800 ml-1.5"
+      >
+        <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
+          <h3 class="font-semibold text-neutral-900 dark:text-white truncate">
+            {{ currentSession.project }}
+          </h3>
+          <span class="hidden sm:inline text-neutral-400 text-xs">•</span>
+          <span class="text-sm text-neutral-500 dark:text-neutral-400 truncate">
+            {{ currentSession.file }}
+          </span>
+        </div>
+
+        <div class="flex items-center gap-2 text-xs text-neutral-400 mt-1">
+          <UIcon
+            name="i-ph-timer-duotone"
+            class="w-4 h-4"
+          />
+          <span>Started {{ timeAgo }}</span>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="text-sm text-neutral-500 dark:text-neutral-400 flex items-center gap-2 pl-6 border-l-2 border-red-100 dark:border-red-900/30 ml-1.5"
+      >
+        <p>Telemetry disconnected. Research in progress.</p>
+      </div>
+    </UCard>
+
+    <UCard v-else>
+      <div class="flex items-center gap-3">
+        <USkeleton class="h-3 w-3 rounded-full" /> <div class="space-y-2 flex-1">
+          <USkeleton class="h-4 w-1/3" />
+          <USkeleton class="h-3 w-2/3" />
+        </div>
+      </div>
+    </UCard>
+  </ClientOnly>
+</template>