Try out icons in history for a few common actions

Inwerpsel · Oct 19, 2024 · 18ccb29 · 18ccb29
1 parent b9677c0
commit 18ccb29
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 38 deletions.
diff --git a/docs/demo/dist/bundle.js b/docs/demo/dist/bundle.js
diff --git a/docs/demo/dist/bundle.js.map b/docs/demo/dist/bundle.js.map
diff --git a/docs/demo/dist/main.css b/docs/demo/dist/main.css
diff --git a/docs/demo/dist/main.css.map b/docs/demo/dist/main.css.map
diff --git a/src/_unstable/historyStore.ts b/src/_unstable/historyStore.ts
@@ -45,7 +45,7 @@ export function restoreHistory() {
     };
 }
 
-let firstEntry = Infinity;
+export let firstEntry = Infinity;
 
 // problem:
 // - If an action was done against a locked state, we need to keep track of this base index
@@ -89,7 +89,7 @@ export function deleteStoredHistory(createSnap = false, lastState = null) {
         const snap = JSON.stringify([...lastState.entries()].filter(([k]) => interestingKeys.includes(k)));
         localStorage.setItem(snapshotKey, snap); 
     }
-    didUrl = false;
+    firstEntry = Infinity;
 
     console.log('Start store delete transaction in ', performance.now( ) - start) 
 }
diff --git a/src/previewComponents.jsx b/src/previewComponents.jsx
@@ -28,6 +28,10 @@ function FindOther({label}) {
   </Fragment>
 }
 
+function Icon({children}) {
+  return <span style={{fontSize: '1.5rem'}}>{children}</span>
+}
+
 export const previewComponents = {
   openGroups: ({ action: groups }) => {
     const items = Object.keys(groups);
@@ -70,8 +74,8 @@ export const previewComponents = {
 
     return (
       <Fragment>
+        <Icon>🔍</Icon>
         <ScrollInViewButton {...{path}} />
-        Inspect
         <pre className="monospace-code">{group?.label}</pre>
         {showLink && link}
       </Fragment>
@@ -83,7 +87,7 @@ export const previewComponents = {
 
       return (
         <Fragment>
-          {scope && <pre className="monospace-code">{scope}</pre>}
+          <Icon>🖌</Icon>{scope && <pre className="monospace-code">{scope}</pre>}
           <br />
           <b draggable onDragStart={dragValue(`var(${name})`)}><FormatVariableName {...{name}}/></b> <br />
           <span draggable onDragStart={dragValue(value)}>