a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ux(editor): smaller starter cards, bigger blue + on Blank, Arduino Mega card 

Cards drop to a 178px grid (dialog 840px) with tighter type so more
starters fit per row; the Blank card's plus glyph goes accent-blue at
64px. Arduino Mega (mega-blink) joins the Arduino section next to the
Uno. Recaptured xiao-rp2040-blink.webp now that the board art is
silk-screened "XIAO-RP2040" (was "XIAO-ESP32-C3").
This commit is contained in:
David Montero Crespo 2026-08-07 22:11:43 +02:00
parent 704fd6ef32
commit da4678bb60
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/examples-thumbs/xiao-rp2040-blink.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

20
frontend/src/components/editor/NewProjectDialog.css
View File

@ -25,7 +25,7 @@
background: #1e1e1e;
border: 1px solid #444;
border-radius: 10px;
width: min(920px, 94vw);
width: min(840px, 94vw);
max-height: 86vh;
display: flex;
flex-direction: column;
@ -68,8 +68,8 @@
.new-project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
gap: 8px;
}
.new-project-card {
@ -114,8 +114,8 @@
.new-project-card-info {
display: flex;
flex-direction: column;
gap: 3px;
padding: 9px 12px 11px;
gap: 2px;
padding: 7px 10px 9px;
}
.new-project-card-blank {
@ -128,21 +128,21 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 42px;
font-size: 64px;
font-weight: 300;
color: #4a4f58;
color: #4a9eff;
background: transparent;
}
.new-project-card-name {
font-weight: 600;
font-size: 13px;
font-size: 12px;
/* Keep clear of the PRO pill in the corner. */
padding-right: 44px;
padding-right: 40px;
}
.new-project-card-desc {
font-size: 11px;
font-size: 10.5px;
color: #8f949c;
line-height: 1.35;
}

4
frontend/src/components/editor/NewProjectDialog.tsx
View File

@ -48,6 +48,7 @@ interface NewProjectDialogProps {
/** Card blurbs (same voice as the component picker's board descriptions). */
const BOARD_BLURBS: Record<string, string> = {
'arduino-uno': '8-bit AVR, 32KB flash, 14 digital I/O',
'arduino-mega': '8-bit AVR, 256KB flash, 54 digital I/O',
esp32: 'Xtensa LX6 dual-core, WiFi+BT, 38 GPIO (QEMU)',
'xiao-esp32-s3': 'Seeed XIAO tiny form, 8MB flash+PSRAM (QEMU)',
'xiao-esp32-c3': 'Seeed XIAO ESP32-C3 mini board (QEMU)',
@ -126,6 +127,7 @@ export function clearWorkspaceForStarter(): void {
*/
const PREFERRED_BLINK_EXAMPLE: Record<string, string> = {
'arduino-uno': 'blink-led',
'arduino-mega': 'mega-blink',
esp32: 'esp32-blink-led',
'esp32-s3': 'esp32s3-blink-led',
'esp32-c3': 'c3-blink',
@ -225,7 +227,7 @@ export const NewProjectDialog: React.FC<NewProjectDialogProps> = ({ isOpen, onCl
return d ? [{ kind: d.kind, blurb: d.description }] : [];
};
return [
{ title: 'Arduino', entries: [oss('arduino-uno')] },
{ title: 'Arduino', entries: [oss('arduino-uno'), oss('arduino-mega')] },
// One card per ESP32 chip generation, XIAO variant preferred where
// Seeed makes one: classic → DevKit V1, S3/C3 → XIAO, C6 → XIAO (overlay).
{