togglable panel position

website/src/repl/Footer.jsx

@@ -16,7 +16,7 @@ const TAURI = window.__TAURI__;
 export function Footer({ context }) {
   const footerContent = useRef();
   const [log, setLog] = useState([]);
-  const { activeFooter, isZen } = useSettings();
+  const { activeFooter, isZen, panelPosition: position } = useSettings();
 
   useLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {
@@ -71,8 +71,15 @@ export function Footer({ context }) {
   if (isZen) {
     return null;
   }
+
+  const isActive = activeFooter !== '';
+
+  let positions = {
+    right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
+    bottom: '',
+  };
   return (
-    <footer className="bg-lineHighlight z-[20]">
+    <nav className={cx('bg-lineHighlight z-[1000]', positions[position])}>
       <div className="flex justify-between px-2">
         <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
           <FooterTab name="intro" label="welcome" />
@@ -83,13 +90,13 @@ export function Footer({ context }) {
           {TAURI && <FooterTab name="files" />}
         </div>
         {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-foreground" aria-label="Close Panel">
+          <button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel">
             <XMarkIcon className="w-5 h-5" />
           </button>
         )}
       </div>
       {activeFooter !== '' && (
-        <div className="text-white flex-none h-[360px] overflow-auto max-w-full relative" ref={footerContent}>
+        <div className="text-white flex-none h-full overflow-auto max-w-full relative" ref={footerContent}>
           {activeFooter === 'intro' && <WelcomeTab />}
           {activeFooter === 'console' && <ConsoleTab log={log} />}
           {activeFooter === 'sounds' && <SoundsTab />}
@@ -98,7 +105,7 @@ export function Footer({ context }) {
           {activeFooter === 'files' && <FilesTab />}
         </div>
       )}
-    </footer>
+    </nav>
   );
 }
 
@@ -377,6 +384,7 @@ function SettingsTab({ scheduler }) {
     isLineWrappingEnabled,
     fontSize,
     fontFamily,
+    panelPosition,
   } = useSettings();
 
   return (
@@ -443,6 +451,13 @@ function SettingsTab({ scheduler }) {
           onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
           value={isLineWrappingEnabled}
         />
+        <FormItem label="Footer Position">
+          <ButtonGroup
+            value={panelPosition}
+            onChange={(value) => settingsMap.setKey('panelPosition', value)}
+            items={{ bottom: 'Bottom', right: 'Right' }}
+          ></ButtonGroup>
+        </FormItem>
       </div>
       <FormItem label="Reset Settings">
         <button

website/src/repl/Header.jsx

@@ -30,8 +30,9 @@ export function Header({ context }) {
     <header
       id="header"
       className={cx(
-        'py-1 flex-none w-full text-black justify-between z-[100] text-lg  select-none sticky top-0',
+        'flex-none text-black  z-[100] text-lg select-none',
         !isZen && !isEmbedded && 'bg-lineHighlight',
+        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
         isEmbedded ? 'flex' : 'md:flex',
       )}
     >

website/src/repl/Repl.jsx

@@ -122,6 +122,7 @@ export function Repl({ embedded = false }) {
     isLineNumbersDisplayed,
     isAutoCompletionEnabled,
     isLineWrappingEnabled,
+    panelPosition,
   } = useSettings();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
@@ -289,30 +290,12 @@ export function Repl({ embedded = false }) {
     <ReplContext.Provider value={context}>
       <div
         className={cx(
-          'h-full flex flex-col',
+          'h-full flex flex-col relative',
           //        'bg-gradient-to-t from-green-900 to-slate-900', //
         )}
       >
         <Loader active={pending} />
         <Header context={context} />
-        <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
-          <CodeMirror
-            theme={currentTheme}
-            value={code}
-            keybindings={keybindings}
-            isLineNumbersDisplayed={isLineNumbersDisplayed}
-            isAutoCompletionEnabled={isAutoCompletionEnabled}
-            isLineWrappingEnabled={isLineWrappingEnabled}
-            fontSize={fontSize}
-            fontFamily={fontFamily}
-            onChange={handleChangeCode}
-            onViewChanged={handleViewChanged}
-            onSelectionChange={handleSelectionChange}
-          />
-        </section>
-        {error && (
-          <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
-        )}
         {isEmbedded && !started && (
           <button
             onClick={() => handleTogglePlay()}
@@ -322,7 +305,28 @@ export function Repl({ embedded = false }) {
             <span>play</span>
           </button>
         )}
-        {!isEmbedded && <Footer context={context} />}
+        <div className="grow flex relative overflow-hidden">
+          <section className="text-gray-100 cursor-text pb-0 overflow-auto grow" id="code">
+            <CodeMirror
+              theme={currentTheme}
+              value={code}
+              keybindings={keybindings}
+              isLineNumbersDisplayed={isLineNumbersDisplayed}
+              isAutoCompletionEnabled={isAutoCompletionEnabled}
+              isLineWrappingEnabled={isLineWrappingEnabled}
+              fontSize={fontSize}
+              fontFamily={fontFamily}
+              onChange={handleChangeCode}
+              onViewChanged={handleViewChanged}
+              onSelectionChange={handleSelectionChange}
+            />
+          </section>
+          {panelPosition === 'right' && !isEmbedded && <Footer context={context} />}
+        </div>
+        {error && (
+          <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
+        )}
+        {panelPosition === 'bottom' && !isEmbedded && <Footer context={context} />}
       </div>
     </ReplContext.Provider>
   );

website/src/settings.mjs

@@ -14,6 +14,7 @@ export const defaultSettings = {
   latestCode: '',
   isZen: false,
   soundsFilter: 'all',
+  panelPosition: 'bottom',
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);