style fixes + remove lastShared state

packages/codemirror/codemirror.mjs

@@ -108,7 +108,17 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
 
 export class StrudelMirror {
   constructor(options) {
-    const { root, id, initialCode = '', onDraw, drawTime = [-2, 2], autodraw, prebake, ...replOptions } = options;
+    const {
+      root,
+      id,
+      initialCode = '',
+      onDraw,
+      drawTime = [-2, 2],
+      autodraw,
+      prebake,
+      bgFill = true,
+      ...replOptions
+    } = options;
     this.code = initialCode;
     this.root = root;
     this.miniLocations = [];
@@ -183,7 +193,9 @@ export class StrudelMirror {
     const cmEditor = this.root.querySelector('.cm-editor');
     if (cmEditor) {
       this.root.style.display = 'block';
-      this.root.style.backgroundColor = 'var(--background)';
+      if (bgFill) {
+        this.root.style.backgroundColor = 'var(--background)';
+      }
       cmEditor.style.backgroundColor = 'transparent';
     }
     const settings = codemirrorSettings.get();

website/src/repl/Header.jsx

@@ -18,7 +18,6 @@ export function Header({ context }) {
     started,
     pending,
     isDirty,
-    lastShared,
     activeCode,
     handleTogglePlay,
     handleUpdate,
@@ -119,7 +118,7 @@ export function Header({ context }) {
               onClick={handleShare}
             >
               <LinkIcon className="w-6 h-6" />
-              <span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
+              <span>share</span>
             </button>
           )}
           {!isEmbedded && (

website/src/repl/Repl.jsx

@@ -209,7 +209,6 @@ export function Repl({ embedded = false }) {
     started,
     pending,
     isDirty,
-    lastShared,
     activeCode,
     handleChangeCode,
     handleTogglePlay,

website/src/repl/Repl2.jsx

@@ -28,6 +28,7 @@ import { Panel } from './panel/Panel';
 import { useStore } from '@nanostores/react';
 import { prebake /* , resetSounds */ } from './prebake.mjs';
 import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
+import './Repl.css';
 
 const { code: randomTune, name } = getRandomTune();
 export const ReplContext = createContext(null);
@@ -50,7 +51,6 @@ if (typeof window !== 'undefined') {
 export function Repl2({ embedded = false }) {
   //const isEmbedded = embedded || window.location !== window.parent.location;
   const isEmbedded = false;
-  const [lastShared, setLastShared] = useState();
   const { panelPosition, isZen } = useSettings();
   /* const replState = useStore($replstate);
   const isDirty = useStore($repldirty); */
@@ -89,6 +89,7 @@ export function Repl2({ embedded = false }) {
         setLatestCode(code);
         window.location.hash = '#' + code2hash(code);
       },
+      bgFill: false,
     });
     // init settings
     initCode().then((decoded) => {
@@ -185,7 +186,6 @@ export function Repl2({ embedded = false }) {
     started,
     pending,
     isDirty,
-    lastShared,
     activeCode,
     handleTogglePlay,
     handleUpdate,