Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces an initial React/Vite frontend for MLBlock, including a landing page, a block-based editor UI backed by a Zustand store, and an Axios API client to talk to the backend catalog/pipeline endpoints.
Changes:
- Bootstraps a Vite + React + TypeScript frontend workspace (config, env, dependencies).
- Adds editor UI (palette, canvas, drag & drop, console panel) and app state management via Zustand.
- Implements API client + OpenAPI-aligned wire types and adapters to build an internal “catalog” for rendering blocks.
Reviewed changes
Copilot reviewed 40 out of 49 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| TODO.md | Tracks planned frontend follow-ups and known gaps. |
| frontend/vite.config.ts | Vite config enabling React plugin. |
| frontend/tsconfig.json | TypeScript compiler settings for the frontend. |
| frontend/src/vite-env.d.ts | Vite env typings for import.meta.env. |
| frontend/src/utils/snapLogic.ts | Width “snap” + border-radius logic for block stacking visuals. |
| frontend/src/utils/blockHelpers.ts | Block model helpers (instantiate/title/color). |
| frontend/src/types/catalog.ts | Frontend internal catalog types + API wire types. |
| frontend/src/store/useAppStore.ts | Zustand store for editor state, drag state, run state, catalog, etc. |
| frontend/src/store/.gitkeep | Keeps store directory in git. |
| frontend/src/services/.gitkeep | Keeps services directory in git. |
| frontend/src/pages/HomePage.tsx | Landing/home page composition. |
| frontend/src/pages/EditorPage.tsx | Editor page bootstrapping (catalog fetch + error modal). |
| frontend/src/pages/.gitkeep | Keeps pages directory in git. |
| frontend/src/main.tsx | React entrypoint mounting <App />. |
| frontend/src/index.css | Global styling + animations + scrollbar styling. |
| frontend/src/hooks/useDragDrop.ts | Pointer-based drag/drop handling for palette + canvas. |
| frontend/src/hooks/useBlockWidths.ts | Measures block widths and computes snapped “bands”. |
| frontend/src/hooks/useBlockRunner.ts | Validates/saves/builds pipeline via backend API; writes console logs. |
| frontend/src/components/ui/EditorUnavailableModal.tsx | Modal shown when catalog/backend is unavailable. |
| frontend/src/components/ui/DragGhost.tsx | Drag “ghost” overlay while dragging blocks. |
| frontend/src/components/ui/ConsolePanel.tsx | Console output panel UI. |
| frontend/src/components/ui/.gitkeep | Keeps ui directory in git. |
| frontend/src/components/sidebar/PaletteBlock.tsx | Renders a draggable palette block. |
| frontend/src/components/sidebar/CategoryIcon.tsx | Category icon button (currently div-based) for sidebar. |
| frontend/src/components/sidebar/CategoryBar.tsx | Category selector sidebar. |
| frontend/src/components/sidebar/BlockPalette.tsx | Lists blocks for selected category. |
| frontend/src/components/landing/HomeNav.tsx | Landing page nav with “open editor” action. |
| frontend/src/components/landing/HomeFooter.tsx | Landing page footer. |
| frontend/src/components/landing/HeroSection.tsx | Landing hero section CTA + hero visuals. |
| frontend/src/components/landing/HeroBlockStack.tsx | Animated hero “stack of blocks” visual. |
| frontend/src/components/landing/FeaturesSection.tsx | Landing features section. |
| frontend/src/components/editor/EditorLayout.tsx | Main editor layout wiring palette/canvas and measurement refs. |
| frontend/src/components/editor/EditorHeader.tsx | Editor header actions (run/stop/clear/import/export). |
| frontend/src/components/canvas/EmptyCanvas.tsx | Empty canvas placeholder. |
| frontend/src/components/canvas/DropIndicator.tsx | Drop indicator UI. |
| frontend/src/components/canvas/Canvas.tsx | Canvas wrapper rendering hat/script blocks + overlays. |
| frontend/src/components/canvas/.gitkeep | Keeps canvas directory in git. |
| frontend/src/components/blocks/ScriptBlock.tsx | A script block row (fields + delete + drag). |
| frontend/src/components/blocks/HatBlock.tsx | The “start project” hat block. |
| frontend/src/components/blocks/BlockSegments.tsx | Renders a block template as text/inputs/selects. |
| frontend/src/components/blocks/.gitkeep | Keeps blocks directory in git. |
| frontend/src/App.tsx | Simple screen switch (home vs editor) based on store. |
| frontend/src/api/client.ts | Axios client + catalog adaptation + pipeline API calls. |
| frontend/package.json | Frontend dependencies and scripts. |
| frontend/package-lock.json | Dependency lockfile for frontend. |
| frontend/index.html | HTML entrypoint + font loading. |
| frontend/.gitignore | Ignores node_modules and dist for frontend package. |
| frontend/.env.example | Example Vite env var for backend base URL. |
| .gitignore | Root ignore rules (node, tooling, env, build outputs, etc.). |
Files not reviewed (1)
- frontend/package-lock.json: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const clusters: Cluster[] = [] | ||
| uniq.forEach(w => { | ||
| const last = clusters[clusters.length - 1] | ||
| if (last && w - last.min <= BAND_TOL) last.max = w |
Comment on lines
+18
to
+23
| export const instantiate = (type: string, defs: BlockDefMap): Block => { | ||
| const d = defs[type] | ||
| const fields: Record<string, string> = {} | ||
| d.segs.forEach(s => { if ('k' in s) fields[s.k] = s.def }) | ||
| return { id: 'b' + (uid++), type, fields } | ||
| } |
Comment on lines
+86
to
+94
| export async function fetchCatalog(): Promise<InternalCatalog> { | ||
| const [apiCategories, summaries] = await Promise.all([ | ||
| fetchBlockCategories(), | ||
| fetchAllBlockSummaries(), | ||
| ]) | ||
|
|
||
| const types = [...new Set(summaries.map(s => s.type))] | ||
| const details = await Promise.all(types.map(fetchBlockDetail)) | ||
|
|
Comment on lines
+18
to
+19
| "@types/react": "^19.2.17", | ||
| "@types/react-dom": "^19.2.3", |
Comment on lines
+58
to
+75
| <div | ||
| onClick={cat.onClick} | ||
| style={{ | ||
| display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, | ||
| padding: '10px 4px', borderRadius: 13, cursor: 'pointer', | ||
| color: selected ? '#f5efe9' : '#9c938a', | ||
| background: selected ? 'rgba(255,255,255,.07)' : 'transparent', | ||
| }} | ||
| > | ||
| <div style={{ | ||
| width: 38, height: 38, borderRadius: 13, background: cat.color, | ||
| display: 'flex', alignItems: 'center', justifyContent: 'center', | ||
| boxShadow: selected ? '0 0 0 3px rgba(255,255,255,.28)' : '0 2px 0 rgba(0,0,0,.2)', | ||
| }}> | ||
| {ICONS[cat.id]} | ||
| </div> | ||
| <span style={{ fontSize: 11, fontWeight: 800, textAlign: 'center', lineHeight: 1.15 }}>{cat.name}</span> | ||
| </div> |
Comment on lines
+12
to
+16
| useEffect(() => { | ||
| if (running && scrollRef.current) { | ||
| scrollRef.current.scrollTop = scrollRef.current.scrollHeight | ||
| } | ||
| }, [consoleLines, running]) |
|
|
||
| export default function EditorHeader({ onRun, onStop, onClear }: EditorHeaderProps) { | ||
| const goHome = useAppStore(s => s.goHome) | ||
| const projectName = useAppStore(s => 'mon-premier-modèle') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.