From cb46dd7840b8b27a28e13b9995a698015d211c87 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Wed, 21 Jan 2026 01:31:25 +0100 Subject: [PATCH 01/12] make it crunchier: border borders, less padding --- packages/codemirror/themes/strudel-theme.mjs | 2 +- website/src/repl/components/Code.jsx | 2 +- website/src/repl/components/Header.jsx | 2 +- .../repl/components/button/action-button.jsx | 2 +- .../src/repl/components/panel/ConsoleTab.jsx | 6 +- .../src/repl/components/panel/ExportTab.jsx | 2 +- website/src/repl/components/panel/Forms.jsx | 2 +- website/src/repl/components/panel/Panel.jsx | 21 +-- .../src/repl/components/panel/PatternsTab.jsx | 125 +++++++++--------- .../src/repl/components/panel/Reference.jsx | 13 +- .../src/repl/components/panel/SettingsTab.jsx | 2 +- .../src/repl/components/panel/SoundsTab.jsx | 8 +- .../src/repl/components/panel/WelcomeTab.jsx | 2 +- 13 files changed, 96 insertions(+), 93 deletions(-) diff --git a/packages/codemirror/themes/strudel-theme.mjs b/packages/codemirror/themes/strudel-theme.mjs index 658a682f1..58c675638 100644 --- a/packages/codemirror/themes/strudel-theme.mjs +++ b/packages/codemirror/themes/strudel-theme.mjs @@ -5,7 +5,7 @@ export const settings = { background: '#222', lineBackground: '#22222299', foreground: '#fff', - muted: '#ffffff50', + muted: '#8a919966', caret: '#ffcc00', selection: 'rgba(128, 203, 196, 0.5)', selectionMatch: '#036dd626', diff --git a/website/src/repl/components/Code.jsx b/website/src/repl/components/Code.jsx index 8481cc272..e8cccb86f 100644 --- a/website/src/repl/components/Code.jsx +++ b/website/src/repl/components/Code.jsx @@ -8,7 +8,7 @@ export function Code(Props) { return (
{ containerRef.current = el; diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx index 19e7b8fad..e113cea0a 100644 --- a/website/src/repl/components/Header.jsx +++ b/website/src/repl/components/Header.jsx @@ -16,7 +16,7 @@ export function Header({ context, isEmbedded = false }) {
- )) ||

Searcb or select a tag to get started.

} + )) ||

Search or select a tag to get started.

} {detailVisibleFunctions.length > 0 &&
}
From f9ed71fbf85186b5c2bd3c8984088c876a3b2bb3 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 22 Jan 2026 01:35:19 +0100 Subject: [PATCH 11/12] fix: import sounds font size --- website/src/repl/components/panel/SoundsTab.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx index 0a856f811..dcabce6f5 100644 --- a/website/src/repl/components/panel/SoundsTab.jsx +++ b/website/src/repl/components/panel/SoundsTab.jsx @@ -166,7 +166,7 @@ export function SoundsTab() { ); })} {!soundEntries.length && soundsFilter === 'importSounds' ? ( -
+
settingsMap.setKey('soundsFilter', 'user')} />

To import sounds into strudel, they must be contained{' '} From 3364b9f05fc8ed98188e36eb6a94302442cc9905 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 22 Jan 2026 10:12:16 +0100 Subject: [PATCH 12/12] keep it simple stupid --- .../repl/components/EmbeddedReplEditor.jsx | 4 +- website/src/repl/components/Header.jsx | 136 ------------- website/src/repl/components/ReplEditor.jsx | 19 +- website/src/repl/components/panel/Panel.jsx | 181 ++++++++++++++++-- .../src/repl/components/panel/SettingsTab.jsx | 2 +- 5 files changed, 179 insertions(+), 163 deletions(-) delete mode 100644 website/src/repl/components/Header.jsx diff --git a/website/src/repl/components/EmbeddedReplEditor.jsx b/website/src/repl/components/EmbeddedReplEditor.jsx index 74db2c655..100d5ad95 100644 --- a/website/src/repl/components/EmbeddedReplEditor.jsx +++ b/website/src/repl/components/EmbeddedReplEditor.jsx @@ -2,7 +2,7 @@ import Loader from '@src/repl/components/Loader'; import { Code } from '@src/repl/components/Code'; import BigPlayButton from '@src/repl/components/BigPlayButton'; import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'; -import { Header } from './Header'; +import { MainPanel } from './panel/Panel'; // type Props = { // context: replcontext, @@ -14,7 +14,7 @@ export default function EmbeddedReplEditor(Props) { return (

-
+
diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx deleted file mode 100644 index 1ed8915c0..000000000 --- a/website/src/repl/components/Header.jsx +++ /dev/null @@ -1,136 +0,0 @@ -import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; -import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon'; -import cx from '@src/cx.mjs'; -import { useSettings, setIsZen } from '../../settings.mjs'; -import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon'; -import '../Repl.css'; -import { PanelToggle } from '@src/repl/components/panel/Panel'; -import { PlayIcon, StopIcon } from '@heroicons/react/16/solid'; - -const { BASE_URL } = import.meta.env; -const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; - -export function Header({ context, isEmbedded = false }) { - const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context; - const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings(); - - return ( - - ); -} - -export function Footer({ context, isEmbedded = false }) { - return ( -
- -
- ); -} - -function MainMenu({ context, isEmbedded = false }) { - const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context; - const { isCSSAnimationDisabled } = useSettings(); - return ( -
- - - {!isEmbedded && ( - - )} - {!isEmbedded && ( - - learn - - )} -
- ); -} diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx index d2981d2a4..fe2e00acd 100644 --- a/website/src/repl/components/ReplEditor.jsx +++ b/website/src/repl/components/ReplEditor.jsx @@ -1,8 +1,7 @@ -import Loader from '@src/repl/components/Loader'; -import { HorizontalPanel, VerticalPanel, PanelToggle } from '@src/repl/components/panel/Panel'; import { Code } from '@src/repl/components/Code'; +import Loader from '@src/repl/components/Loader'; +import { HorizontalPanel, MainPanel, VerticalPanel } from '@src/repl/components/panel/Panel'; import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'; -import { Footer, Header } from './Header'; import { useSettings } from '@src/settings.mjs'; // type Props = { @@ -13,23 +12,23 @@ export default function ReplEditor(Props) { const { context, ...editorProps } = Props; const { containerRef, editorRef, error, init, pending } = context; const settings = useSettings(); - const { panelPosition, isZen, isButtonRowHidden } = settings; + const { panelPosition, isZen } = settings; const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location; return (
-
-
-
+
+ {/* */} + +
- {/*
*/} + {!isZen && panelPosition === 'right' && }
- {!isZen && panelPosition === 'right' && }
- {!isButtonRowHidden &&
} {!isZen && panelPosition === 'bottom' && } + {/* */}
); } diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx index bca283ae7..b34568d39 100644 --- a/website/src/repl/components/panel/Panel.jsx +++ b/website/src/repl/components/panel/Panel.jsx @@ -1,18 +1,161 @@ +import { Bars3Icon, PlayIcon, StopIcon, XMarkIcon } from '@heroicons/react/16/solid'; import cx from '@src/cx.mjs'; -import { setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs'; +import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon'; +import { useSettings, setIsZen, setIsPanelOpened, setActiveFooter as setTab } from '../../../settings.mjs'; +import '../../Repl.css'; +import { useLogger } from '../useLogger'; import { ConsoleTab } from './ConsoleTab'; +import ExportTab from './ExportTab'; import { FilesTab } from './FilesTab'; +import { PatternsTab } from './PatternsTab'; import { Reference } from './Reference'; import { SettingsTab } from './SettingsTab'; import { SoundsTab } from './SoundsTab'; -import { useLogger } from '../useLogger'; import { WelcomeTab } from './WelcomeTab'; -import { PatternsTab } from './PatternsTab'; -import { Bars3Icon, XMarkIcon } from '@heroicons/react/16/solid'; -import ExportTab from './ExportTab'; const TAURI = typeof window !== 'undefined' && window.__TAURI__; +const { BASE_URL } = import.meta.env; +const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; + +export function LogoButton({ context, isEmbedded }) { + const { started } = context; + const { isZen, isCSSAnimationDisabled, fontFamily } = useSettings(); + return ( +
{ + if (!isEmbedded) { + setIsZen(!isZen); + } + }} + > + + + +
+ ); +} + +export function MainPanel({ context, isEmbedded = false, className }) { + const { isZen, isButtonRowHidden, fontFamily } = useSettings(); + return ( + + ); +} + +export function Footer({ context, isEmbedded = false }) { + return ( +
+ {/* block lg:hidden */} + +
+ ); +} + +function MainMenu({ context, isEmbedded = false, className }) { + const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context; + const { isCSSAnimationDisabled } = useSettings(); + return ( +
+ + + {!isEmbedded && ( + + )} + {!isEmbedded && ( + + learn + + )} +
+ ); +} + function PanelCloseButton() { const { isPanelOpen } = useSettings(); return ( @@ -33,13 +176,13 @@ export function HorizontalPanel({ context }) { return ( -
- +
+
{isPanelOpen && (
@@ -61,14 +204,21 @@ export function VerticalPanel({ context }) { settings={settings} className={cx( //'border-l border-muted shrink-0', - 'border-0 border-muted shrink-0', - isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12', + 'border-0 border-muted shrink-0 h-full overflow-hidden', + isPanelOpen + ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]` + `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` + : 'min-w-12 max-w-12', )} >
-
- +
+ {/*
+ +
*/} + + {/* */}
@@ -101,7 +251,7 @@ function PanelNav({ children, className, ...props }) { } }} aria-label="Menu Panel" - className={cx('bg-lineHighlight group overflow-x-auto', className)} + className={cx('h-full bg-lineHighlight group overflow-x-auto', className)} {...props} > {children} @@ -171,10 +321,13 @@ export function PanelToggle({ isEmbedded, isZen }) { panelPosition === 'right' && ( ) diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx index f9733b354..d29534468 100644 --- a/website/src/repl/components/panel/SettingsTab.jsx +++ b/website/src/repl/components/panel/SettingsTab.jsx @@ -323,7 +323,7 @@ export function SettingsTab({ started }) { value={isSyncEnabled} /> settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)} value={isButtonRowHidden} />