a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
velxio/frontend/src/components/editor/FileExplorer.css

426 lines
8.4 KiB
CSS
Raw Normal View History

feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
.file-explorer {
fix: enhance Docker build process and improve file explorer resizing functionality
2026-03-06 21:20:47 +07:00
width: 100%;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
background: #252526;
border-right: 1px solid #333;
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 12px;
font-family: 'Segoe UI', sans-serif;
}
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
/* Two rows, not one: the title on top, the three actions under it. Side by
side they set the pane's minimum width between them (a truncated "WORK..."
next to buttons that must stay reachable); stacked, the panel is free to be
narrow and the code editor takes the px that frees up. Vertical space is
what this column has to spare. */
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
.file-explorer-header {
display: flex;
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 3px;
padding: 6px 6px 6px 8px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
color: #9d9d9d;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
font-size: 10px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
font-weight: 600;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
letter-spacing: 0.3px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
border-bottom: 1px solid #333;
flex-shrink: 0;
}
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
.file-explorer-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
.file-explorer-header-actions {
display: flex;
align-items: center;
gap: 2px;
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
margin-left: -2px; /* optical: line the first glyph up with the title */
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
}
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
.file-explorer-new-btn {
background: none;
border: none;
color: #9d9d9d;
cursor: pointer;
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
padding: 2px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
width: 20px;
height: 20px;
}
.file-explorer-new-btn svg,
.file-explorer-save-btn svg {
width: 16px;
height: 16px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
}
.file-explorer-new-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
.file-explorer-save-btn {
background: none;
border: none;
color: #9d9d9d;
cursor: pointer;
padding: 2px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
width: 20px;
height: 20px;
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
}
.file-explorer-save-btn:hover {
background: rgba(255, 255, 255, 0.08);
style(ui): unify every interactive surface on the single #0071e3 accent Sweep all off-brand blues (#007acc logo-blue, #0e639c, #3b82f6) and the neon cyan family (#4fc3f7, #00b8d4, #00e5ff, rgba 0,184,212 / 0,122,204) across the editor, simulator, examples gallery and pages to var(--color-action-primary). The Code/Both/Circuit toggle, board chips, library manager, modals etc. now match the Libraries / +Add buttons. Also keep the editor Libraries label visible in the default split (lower the container-query threshold).
2026-06-21 10:34:25 +07:00
color: var(--color-action-primary);
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
}
feat(editor): the Save button is the auto-save indicator; drop the header pill The header rendered a "Saved" / "Unsaved changes" text pill next to the menus whenever a project was loaded. It ate width in the one row that has to hold the whole editor toolbar, and it duplicated a signal the Save button in the workspace panel can carry by colour alone. The pill is gone. FileExplorer takes the AutoSaveState and colours its Save button: green saved, orange unsaved changes, pulsing while saving, red on failure; grey (unchanged) with no project loaded. The tooltip carries what the pill used to say plus the last-save time. Nine locales get the four new strings under editor.fileExplorer with English fallbacks. AppHeader no longer takes autoSave; EditorPage passes it to FileExplorer instead. No pro overlay code referenced the pill or the prop.
2026-08-18 07:26:35 +07:00
/* The Save button doubles as the auto-save indicator once a project is
loaded (replaces the "Unsaved changes" text pill in the header). */
.file-explorer-save-btn.is-saved {
color: #3fb950;
}
.file-explorer-save-btn.is-dirty {
color: #f0883e;
}
.file-explorer-save-btn.is-saving {
color: #3fb950;
animation: velxio-pulse 1s ease-in-out infinite;
}
.file-explorer-save-btn.is-error {
color: #f85149;
}
.file-explorer-save-btn.is-saved:hover,
.file-explorer-save-btn.is-dirty:hover,
.file-explorer-save-btn.is-error:hover {
filter: brightness(1.25);
}
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
.file-explorer-list {
flex: 1;
overflow-y: auto;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
padding: 2px 0;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
scrollbar-width: thin;
scrollbar-color: #3c3c3c transparent;
}
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
/* Rows are deliberately compact (VS Code density): the explorer is a narrow
pane and every px of padding, indent or icon here is a px the code editor
does not get. */
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
.file-explorer-item {
display: flex;
align-items: center;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
gap: 4px;
padding: 3px 6px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
cursor: pointer;
color: #ccc;
border-radius: 3px;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
margin: 0 2px;
font-size: 11px;
line-height: 16px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
white-space: nowrap;
overflow: hidden;
user-select: none;
}
.file-explorer-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.file-explorer-item-active {
style(ui): unify every interactive surface on the single #0071e3 accent Sweep all off-brand blues (#007acc logo-blue, #0e639c, #3b82f6) and the neon cyan family (#4fc3f7, #00b8d4, #00e5ff, rgba 0,184,212 / 0,122,204) across the editor, simulator, examples gallery and pages to var(--color-action-primary). The Code/Both/Circuit toggle, board chips, library manager, modals etc. now match the Libraries / +Add buttons. Also keep the editor Libraries label visible in the default split (lower the container-query threshold).
2026-06-21 10:34:25 +07:00
background: rgba(0, 113, 227, 0.12);
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
color: #e2e2e2;
}
.file-explorer-item-new {
background: rgba(255, 255, 255, 0.04);
}
.file-explorer-icon {
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
display: inline-flex;
align-items: center;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
flex-shrink: 0;
opacity: 0.8;
}
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
.file-explorer-icon svg {
width: 16px;
height: 16px;
}
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
.file-explorer-name {
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.file-explorer-dot {
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
width: 6px;
height: 6px;
feat: update component styles and add serial monitor functionality
2026-03-06 20:24:03 +07:00
border-radius: 50%;
background: #e8a87c;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
flex-shrink: 0;
}
.file-explorer-rename-input {
flex: 1;
background: #3c3c3c;
style(ui): unify every interactive surface on the single #0071e3 accent Sweep all off-brand blues (#007acc logo-blue, #0e639c, #3b82f6) and the neon cyan family (#4fc3f7, #00b8d4, #00e5ff, rgba 0,184,212 / 0,122,204) across the editor, simulator, examples gallery and pages to var(--color-action-primary). The Code/Both/Circuit toggle, board chips, library manager, modals etc. now match the Libraries / +Add buttons. Also keep the editor Libraries label visible in the default split (lower the container-query threshold).
2026-06-21 10:34:25 +07:00
border: 1px solid var(--color-action-primary);
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
color: #fff;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
font-size: 11px;
feat: implement user authentication and project management features - Add LoginPage and RegisterPage for user authentication. - Create UserProfilePage to display user projects. - Implement ProjectPage for viewing and editing individual projects. - Introduce authService for handling user login, registration, and session management. - Add projectService for managing project data retrieval and manipulation. - Enhance EditorPage with file management capabilities and save prompts. - Introduce Zustand stores for managing authentication, editor state, and project state. - Add reserved usernames utility to prevent certain usernames during registration. - Update compilation service to handle multiple files for Arduino sketches.
2026-03-06 20:14:50 +07:00
padding: 1px 4px;
border-radius: 2px;
outline: none;
min-width: 0;
font-family: inherit;
}
/* Context menu */
.file-explorer-context-menu {
position: fixed;
background: #2d2d2d;
border: 1px solid #3c3c3c;
border-radius: 4px;
z-index: 2000;
display: flex;
flex-direction: column;
min-width: 120px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.file-explorer-context-menu button {
background: none;
border: none;
color: #ccc;
padding: 7px 14px;
text-align: left;
cursor: pointer;
font-size: 12px;
font-family: inherit;
}
.file-explorer-context-menu button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.file-explorer-context-menu button:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.ctx-delete:hover:not(:disabled) {
color: #ef5350 !important;
}
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
/* ─── Board-grouped FileExplorer ─────────────────── */
.fe-board-section {
margin-bottom: 2px;
}
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
/* A board section header is two rows: its actions, then its name. The name
row then spans the full pane width, so "M5 Cardputer ADV" reads as a name
instead of an ellipsis squeezed between three buttons and a status dot. */
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
.fe-board-header {
display: flex;
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
flex-direction: column;
align-items: stretch;
gap: 1px;
padding: 2px 4px 3px 2px;
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
cursor: pointer;
color: #aaa;
border-radius: 3px;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
margin: 0 2px;
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
user-select: none;
position: relative;
}
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
.fe-board-name-row {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
/* The actions keep their row reserved whether or not they are showing: a row
that appears on hover would shove every file below it down by its height
under the pointer. */
.fe-board-actions-row {
display: flex;
align-items: center;
gap: 1px;
min-height: 16px;
padding-left: 2px;
}
/* Pushes the buttons to the right end and leaves the status dot at the left. */
.fe-board-actions-spacer {
flex: 1 1 auto;
}
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
.fe-board-header:hover {
background: rgba(255, 255, 255, 0.06);
color: #ddd;
}
.fe-board-header-active {
background: rgba(255, 255, 255, 0.05);
color: #e2e2e2;
}
.fe-collapse-btn {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
flex-shrink: 0;
opacity: 0.6;
}
.fe-collapse-btn:hover {
opacity: 1;
}
.fe-board-icon {
font-size: 10px;
flex-shrink: 0;
line-height: 1;
}
.fe-board-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
feat(editor): rename boards & custom chips; show which target owns each file Phase 2 of the run-system/UX work. - BoardInstance gains an optional user ; boardDisplayName(board) resolver (name || kind label) routes every INSTANCE-label surface: file-explorer section header, compile console (EditorToolbar), canvas selector/tooltip/ context-menu, Serial Monitor tabs, Oscilloscope board picker, Board Options subtitle. Board/component pickers keep the KIND label (they pick new boards). - Inline rename on board AND chip section headers (double-click the name, or a hover pencil button). Board -> updateBoard(id,{name}); chip -> chipName in properties. Enter commits, Escape cancels (cancel-flag ref guards the unmount-fires-onBlur footgun), empty clears to the kind / 'Custom Chip'. - FileTabs shows an owner badge naming the board/chip whose files are shown (resolved as a selector so it doesn't re-render on every sim pin toggle). - CustomChipDialog no longer clobbers a user-given chipName: chip.json's name only seeds the blank defaults (My Chip / Custom Chip); loading an example relabels explicitly. - Persistence: board name round-trips via projectPayload (+ dirty hash), vlxFile, ProjectByIdPage load + loadProjectState; chipName rides components_json. - Drive-by: fixed a pre-existing rules-of-hooks violation in BoardOptionsModal (early return before a useCallback). Reviewed by a 3-agent adversarial pass (completeness / persistence / correctness); all major findings folded in. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 11:22:25 +07:00
/* Inline rename input for a board/chip section header — flex into the label
slot and match the header's compact type. */
.fe-section-rename-input {
flex: 1;
min-width: 0;
font-size: 11px;
font-weight: 600;
}
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
.fe-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.fe-board-new-btn {
background: none;
border: none;
color: #9d9d9d;
cursor: pointer;
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
padding: 0;
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
width: 16px;
height: 16px;
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
flex-shrink: 0;
opacity: 0;
transition: opacity 0.1s;
}
.fe-board-header:hover .fe-board-new-btn,
.fe-board-header-active .fe-board-new-btn {
opacity: 1;
}
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
.fe-board-new-btn svg {
fix(editor): the workspace panel stacks its actions, and the toolbar stops growing a hole Two places where the editor bar spent width on nothing. The file explorer put its label and its buttons on one line: WORKSPACE next to new/open/save, and every board section's name next to rename / new file / new folder plus the status dot. Between them those set a floor under the panel's width, and the board name — the one thing a user reads there — got whatever was left ("M5 Cardput..." in a 150px pane). Both headers now stack: the label owns its row, the actions sit above (board) or below (workspace), and the status dot rides in the actions row, where it costs the name nothing. The actions row keeps its height reserved whether or not the buttons are showing, so hovering a section never shoves the files below it down. Default pane width 150 -> 124px; the freed px go to the code editor. The toolbar's center slot is a flexible spacer that pins the right icons to the far right, and nothing renders into it (no caller passes centerSlot). So whenever the bar had width to spare — closing the docked AI chat is exactly that — the spacer ate it: 191px of black between Reset and Libraries on a 1600px window. Empty, it no longer grows, so the editor controls stay packed and the surplus collects at the one boundary that already carries a divider, in front of the canvas controls (which belong over the canvas pane).
2026-08-18 23:42:33 +07:00
width: 14px;
height: 14px;
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
}
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
.fe-board-new-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.fe-board-files {
/* files are indented to show hierarchy */
}
.fe-file-item {
feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
2026-08-18 09:54:49 +07:00
/* --fe-depth: nesting level inside the board's folder tree (0 = root).
Root files sit just inside the board header's chevron, not under its
icon — the deeper indent read as wasted margin in a 150px pane. */
padding-left: calc(16px + var(--fe-depth, 0) * 12px) !important;
feat(editor): folders - create/delete folder trees in the file explorer File names may now carry '/' paths; the explorer renders each board group as a collapsible folder tree (folders first, files in group order, CSS-var indentation because .fe-file-item pins padding with !important). New-folder buttons on the board header and per-folder hover actions (new file here, new subfolder, delete with confirm when files are inside; a folder holding every file of the group cannot be deleted - groups keep >= 1 file). Model: names are the source of truth; only EMPTY folders are tracked (folderGroups per group) so they survive until a file lands in them, then materialise into the name prefix. Round-trips through .vlx (optional folderGroups field, laxly validated), the auth stash draft, and loadProjectState. Examples gain boards[].files so a single board can ship a full multi-file tree (first entry = main sketch). Backend: the arduino-cli sketch writer now creates subdirectories for '/'-pathed names and REJECTS names that resolve outside the sketch dir ('..' traversal) - previously it crashed on the former and wrote outside the tmp dir on the latter.
2026-08-05 11:48:38 +07:00
}
/* ── Folder rows ────────────────────────────────────────────────────────── */
.fe-folder-item {
user-select: none;
}
.fe-folder-chevron {
display: inline-flex;
align-items: center;
margin-right: 2px;
color: #9d9d9d;
}
.fe-folder-icon {
color: #d8a12a;
}
.fe-folder-actions {
display: none;
margin-left: auto;
align-items: center;
gap: 2px;
}
.fe-folder-item:hover .fe-folder-actions {
display: inline-flex;
}
.fe-folder-actions button {
display: inline-flex;
align-items: center;
background: none;
border: none;
padding: 1px;
cursor: pointer;
color: #9d9d9d;
}
.fe-folder-actions button:hover {
color: #fff;
}
.fe-folder-actions button svg {
width: 14px;
height: 14px;
}
.fe-folder-actions .fe-folder-delete:hover {
color: #f87171;
feat: Implement Virtual File System for Raspberry Pi 3 with context menu and upload functionality - Add VirtualFileSystem component for managing files and directories. - Integrate useVfsStore for state management of the virtual file system. - Implement context menu for file operations: New File, New Folder, Rename, Delete. - Add upload functionality to send files to Raspberry Pi. - Create default file structure for new Raspberry Pi boards. - Enhance editor with board-aware features and compile/run orchestration. - Introduce CompileAllProgress component for tracking compilation status across boards. - Redesign SerialMonitor to support multiple boards with tabbed interface. - Establish Raspberry Pi specific workspace with terminal and file system integration.
2026-03-16 00:04:01 +07:00
}