feat(frontend): useAuth /auth/me, videos list + locked flag, VITE_API_URL

frontend/src/hooks/useAuth.ts

@@ -5,6 +5,7 @@ export interface User {
   id: number;
   email: string;
   nickname: string;
+  subscriptionLevel?: number;
 }
 
 interface AuthState {
@@ -12,6 +13,11 @@ interface AuthState {
   loading: boolean;
 }
 
+interface MeResponse {
+  success: boolean;
+  data: { user: User };
+}
+
 export function useAuth(): AuthState {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
@@ -19,8 +25,8 @@ export function useAuth(): AuthState {
   useEffect(() => {
     let cancelled = false;
 
-    apiFetch<User>('/profile')
+    apiFetch<MeResponse>('/auth/me')
-      .then((u) => { if (!cancelled) setUser(u); })
+      .then((res) => { if (!cancelled) setUser(res.data.user); })
       .catch(() => { if (!cancelled) setUser(null); })
       .finally(() => { if (!cancelled) setLoading(false); });
 

frontend/src/lib/api.ts

@@ -1,4 +1,6 @@
-const BASE = '/api';
+// En dev : VITE_API_URL absent → proxy Vite sur /api → localhost:4000
+// En prod : VITE_API_URL=https://origins.tetardtek.com/api
+const BASE = import.meta.env.VITE_API_URL || '/api';
 
 export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${BASE}${path}`, {

frontend/src/pages/HomePage.tsx

@@ -1,56 +1,136 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { apiFetch } from '../lib/api';
+
+interface Video {
+  id: number;
+  title: string;
+  description: string;
+  requiredLevel: number;
+  locked: boolean;
+  thumbnailUrl?: string;
+}
+
+interface VideosResponse {
+  success: boolean;
+  data: Video[];
+}
+
 export default function HomePage() {
+  const [videos, setVideos] = useState<Video[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiFetch<VideosResponse>('/videos')
+      .then((res) => setVideos(res.data))
+      .catch(() => setVideos([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const free    = videos.filter((v) => !v.locked);
+  const premium = videos.filter((v) => v.locked);
+
   return (
     <div className="flex flex-col gap-10">
 
       {/* Hero */}
       <section className="border-b border-od-border pb-8">
-        <h1 className="text-2xl font-semibold text-od-text">
+        <h1 className="text-2xl font-semibold text-od-text">Vidéos & formations</h1>
-          Vidéos & formations
-        </h1>
         <p className="mt-2 text-sm text-od-muted">
           Contenu libre et premium — connecte-toi pour accéder aux formations complètes.
         </p>
       </section>
 
-      {/* Accès libre */}
+      {loading && (
-      <section>
-        <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-muted">
-          Accès libre
-        </h2>
         <div className="grid gap-4 sm:grid-cols-2">
-          <VideoCardPlaceholder tier="free" />
+          {[...Array(4)].map((_, i) => <VideoCardSkeleton key={i} />)}
-          <VideoCardPlaceholder tier="free" />
         </div>
-      </section>
+      )}
 
-      {/* Premium */}
+      {!loading && (
-      <section>
+        <>
-        <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-accent">
+          {free.length > 0 && (
-          Premium
+            <section>
-        </h2>
+              <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-muted">
-        <div className="grid gap-4 sm:grid-cols-2">
+                Accès libre
-          <VideoCardPlaceholder tier="premium" />
+              </h2>
-          <VideoCardPlaceholder tier="premium" />
+              <div className="grid gap-4 sm:grid-cols-2">
-        </div>
+                {free.map((v) => <VideoCard key={v.id} video={v} />)}
-      </section>
+              </div>
+            </section>
+          )}
+
+          {premium.length > 0 && (
+            <section>
+              <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-accent">
+                Premium
+              </h2>
+              <div className="grid gap-4 sm:grid-cols-2">
+                {premium.map((v) => <VideoCard key={v.id} video={v} />)}
+              </div>
+            </section>
+          )}
+
+          {videos.length === 0 && (
+            <p className="text-sm text-od-muted">Aucune vidéo disponible pour l'instant.</p>
+          )}
+        </>
+      )}
 
     </div>
   );
 }
 
-function VideoCardPlaceholder({ tier }: { tier: 'free' | 'premium' }) {
+function VideoCard({ video }: { video: Video }) {
+  const inner = (
+    <div className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4 transition-colors hover:border-od-accent/40">
+      {/* Thumbnail */}
+      <div className="relative h-28 overflow-hidden rounded bg-od-surface-hi">
+        {video.thumbnailUrl && (
+          <img
+            src={video.thumbnailUrl}
+            alt={video.title}
+            className="h-full w-full object-cover"
+          />
+        )}
+        {video.locked && (
+          <div className="absolute inset-0 flex items-center justify-center bg-od-bg/70">
+            <span className="font-mono text-lg text-od-accent">⊘</span>
+          </div>
+        )}
+      </div>
+
+      <p className="text-sm font-medium text-od-text leading-snug">{video.title}</p>
+
+      {video.description && (
+        <p className="text-xs text-od-muted line-clamp-2">{video.description}</p>
+      )}
+
+      <div className="flex items-center gap-2">
+        {video.locked ? (
+          <span className="rounded border border-od-accent px-2 py-0.5 font-mono text-xs text-od-accent">
+            Premium
+          </span>
+        ) : (
+          <span className="rounded border border-od-border px-2 py-0.5 font-mono text-xs text-od-muted">
+            Libre
+          </span>
+        )}
+      </div>
+    </div>
+  );
+
+  if (video.locked) return <div className="cursor-not-allowed opacity-75">{inner}</div>;
+
+  return <Link to={`/video/${video.id}`}>{inner}</Link>;
+}
+
+function VideoCardSkeleton() {
   return (
     <div className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
-      {/* Thumbnail */}
+      <div className="h-28 rounded bg-od-surface-hi animate-pulse" />
-      <div className="h-28 rounded bg-od-surface-hi" />
+      <div className="h-3 w-3/4 rounded bg-od-surface-hi animate-pulse" />
-      {/* Title skeleton */}
+      <div className="h-2 w-1/2 rounded bg-od-surface-hi animate-pulse" />
-      <div className="h-3 w-3/4 rounded bg-od-surface-hi" />
-      <div className="h-2 w-1/2 rounded bg-od-surface-hi" />
-      {tier === 'premium' && (
-        <span className="self-start rounded border border-od-accent px-2 py-0.5 font-mono text-xs text-od-accent">
-          Premium
-        </span>
-      )}
     </div>
   );
 }

frontend/src/vite-env.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  // URL de base SuperOAuth — ex: https://superoauth.tetardtek.com
-  // Flow login : VITE_SUPEROAUTH_URL + /api/v1/auth/oauth/:provider?redirectUrl=<callback>
   readonly VITE_SUPEROAUTH_URL: string;
+  readonly VITE_API_URL: string;
 }
 
 interface ImportMeta {