ui changes

[ampelc]

lets change the ui shall we

[ampelc]

@coderabbitai can you make idea

dont plan

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
gh issue view 7 --repo ampelc/ampmod --json title,body,labels,comments,state

Length of output: 497

---

Let me take a quick look at the repo structure to tailor the ideas properly!

---

🏁 Script executed:

#!/bin/bash
# Get a general overview of the repo
gh repo view ampelc/ampmod --json description,primaryLanguage,repositoryTopics
echo "---"
# List top-level files/folders
gh api repos/ampelc/ampmod/contents/ --jq '.[].name'

Length of output: 384

---

🏁 Script executed:

#!/bin/bash
# List packages
gh api repos/ampelc/ampmod/contents/packages --jq '.[].name'
echo "---"
# Check README for more context
gh api repos/ampelc/ampmod/contents/README.md --jq '.content' | base64 -d | head -60

Length of output: 3427

---

🏁 Script executed:

#!/bin/bash
# Explore the gui package src folder
gh api repos/ampelc/ampmod/contents/packages/gui/src --jq '.[].name'
echo "---"
# Check branding for current accent colors
gh api repos/ampelc/ampmod/contents/packages/branding/src/index.js --jq '.content' | base64 -d

Length of output: 2001

---

🏁 Script executed:

#!/bin/bash
# List components
gh api repos/ampelc/ampmod/contents/packages/gui/src/components --jq '.[].name'
echo "---"
# List CSS files
gh api repos/ampelc/ampmod/contents/packages/gui/src/css --jq '.[].name'

Length of output: 1299

---

🏁 Script executed:

#!/bin/bash
gh api repos/ampelc/ampmod/contents/packages/gui/src/css/colors.css --jq '.content' | base64 -d
echo "---"
gh api repos/ampelc/ampmod/contents/packages/gui/src/css/default-colors.css --jq '.content' | base64 -d

Length of output: 5988

---

@ampelc Here are some UI change ideas based on the codebase:

---

🎨 UI Change Ideas for AmpMod

1. 🌗 First-Class Theme Builder

The CSS variable system (--ui-primary, --menu-bar-background, etc. in colors.css) is already extremely flexible. A visual theme editor in the settings modal would let users customize accent colors, background colors, and modal styles without editing code — and save/export themes as JSON.

2. 🏠 Redesigned Welcome Screen (amp-welcome)

Replace the current welcome screen with a modern dashboard:

• Recent projects grid with thumbnails
• Quick-start templates (blank, game, story, art)
• Community spotlight section
• Linked to APP_WIKI and APP_BLOG from branding

3. 🔍 Command Palette

Add a Ctrl+K / Cmd+K command palette (VSCode-style) to quickly:

• Jump to a block category
• Open settings
• Switch themes
• Access extensions

4. 🧱 Block Panel Facelift

• Sticky category headers while scrolling
• Animated block snap/drop feedback
• Improved search with fuzzy matching and keyboard navigation
• "Pinned/Favourite blocks" section at the top

5. 🗂️ Sprite Selector Improvements

• Grid / list view toggle for the sprite panel
• Drag-to-reorder sprites
• Inline rename on double-click
• Better visual "active sprite" indicator

6. 🍞 Toast Notifications

Replace the current alerts and amp-sidebar-notice popups with a modern toast/snackbar system — non-blocking, auto-dismissing, with undo actions where applicable (e.g., "Block deleted — Undo").

7. 📐 Resizable Panes

Allow users to resize the stage, block palette, and sprite panel with drag handles, and remember layout preferences in localStorage.

8. 🎭 Expanded Novelty Modes

You already have nineties-mode, oldtimey-mode, and prehistoric-mode. Some new ones could be:

• Synthwave mode – neon purples and pinks
• Paper mode – off-white, sketch-style borders
• High-contrast / accessibility mode – for users who need it

9. 🔧 Menu Bar Polish

• Consolidate clutter with dropdown groups
• Add a visible dark/light mode toggle icon button
• Show the current accent color swatch in the menu bar for quick theming

10. 📱 Responsive Layout Improvements

Add a mobile-friendly or narrow-viewport layout mode where panels stack vertically, making AmpMod more usable on tablets.

---

Want me to open a few of these as separate GitHub issues to track them individually, or expand on any specific idea?

[coderabbitai]

🧩 Analysis chain

Sure! Creating GitHub issues for the top ideas now.

---

🏁 Script executed:

#!/bin/bash
gh issue create --repo ampelc/ampmod \
  --title "✨ Visual Theme Builder" \
  --body "## Summary
The existing CSS variable system (\`--ui-primary\`, \`--menu-bar-background\`, etc. in \`colors.css\`) is already very flexible. A **visual theme editor** in the settings modal would let users customize accent colors, background colors, and modal styles without editing code.

## Details
- Add a color-picker UI in the settings modal for key CSS variables
- Allow saving/loading themes as JSON
- Preview changes live before saving

_Opened via CodeRabbit suggestions — requested by `@ampelc_`"

gh issue create --repo ampelc/ampmod \
  --title "🔍 Command Palette (Ctrl+K / Cmd+K)" \
  --body "## Summary
Add a VSCode-style command palette triggered by \`Ctrl+K\` / \`Cmd+K\` for fast keyboard-driven navigation.

## Details
- Jump to a block category
- Open settings
- Switch themes
- Access extensions

_Opened via CodeRabbit suggestions — requested by `@ampelc_`"

gh issue create --repo ampelc/ampmod \
  --title "🍞 Toast / Snackbar Notification System" \
  --body "## Summary
Replace current \`alerts\` and \`amp-sidebar-notice\` popups with a modern toast/snackbar system.

## Details
- Non-blocking and auto-dismissing
- Support undo actions where applicable (e.g. \"Block deleted — Undo\")
- Stack multiple notifications gracefully

_Opened via CodeRabbit suggestions — requested by `@ampelc_`"

gh issue create --repo ampelc/ampmod \
  --title "🎭 New Novelty Modes (Synthwave, Paper, High-Contrast)" \
  --body "## Summary
Expand the existing novelty modes (\`nineties-mode\`, \`oldtimey-mode\`, \`prehistoric-mode\`) with new themed CSS overrides.

## Details
- **Synthwave mode** – neon purples and pinks
- **Paper mode** – off-white, sketch-style borders
- **High-contrast / accessibility mode** – for users who need improved visibility

_Opened via CodeRabbit suggestions — requested by `@ampelc_`"

gh issue create --repo ampelc/ampmod \
  --title "📐 Resizable Panes with localStorage Persistence" \
  --body "## Summary
Allow users to resize the stage, block palette, and sprite panel using drag handles, with layout preferences saved to \`localStorage\`.

## Details
- Draggable dividers between stage, palette, and sprite panel
- Persist layout across sessions via \`localStorage\`
- Reset to default layout option in settings

_Opened via CodeRabbit suggestions — requested by `@ampelc_`"

Length of output: 213

---

@ampelc Done! Created 5 ideas as GitHub issues:

Issue	Title
#8	✨ Visual Theme Builder
#9	🔍 Command Palette (Ctrl+K / Cmd+K)
#10	🍞 Toast / Snackbar Notification System
#11	🎭 New Novelty Modes (Synthwave, Paper, High-Contrast)
#12	📐 Resizable Panes with localStorage Persistence

Want me to create issues for the remaining ideas too (Block Panel Facelift, Sprite Selector Improvements, Welcome Screen redesign, etc.)?

[ampelc]

@coderabbitai first ignore the novelty modes thoeare an old scratch feature we dont use

secondly can you look around the codebase for slight ideas, even some performancechanges instead of the ui

[coderabbitai]

🧩 Analysis chain

Got it — noted on novelty modes! Let me dig into the actual code now.

---

🏁 Script executed:

#!/bin/bash
# List all JS/JSX files in gui src
fd -e js -e jsx . packages/gui/src --max-depth 3
echo "---COMPONENTS---"
gh api repos/ampelc/ampmod/contents/packages/gui/src/components --jq '.[].name'
echo "---TOP LEVEL---"
gh api repos/ampelc/ampmod/contents/packages/gui/src --jq '.[].name'

Length of output: 23000

---

🏁 Script executed:

#!/bin/bash
# Check library-item container (renders many items in lists)
gh api repos/ampelc/ampmod/contents/packages/gui/src/containers/library-item.jsx --jq '.content' | base64 -d
echo "=== THROTTLED PROP HOC ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/lib/throttled-property-hoc.jsx --jq '.content' | base64 -d
echo "=== TW RESTORE POINT API ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/lib/tw-restore-point-api.js --jq '.content' | base64 -d | head -80
echo "=== TW ASYNC LIBRARIES ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/lib/libraries/tw-async-libraries.js --jq '.content' | base64 -d | head -60

Length of output: 13176

---

🏁 Script executed:

#!/bin/bash
echo "=== LIBRARY COMPONENT (virtualization?) ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/components/library/library.jsx --jq '.content' | base64 -d | head -120

echo "=== AMP LAZY LAUNCH ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/lib/amp-lazy-launch.jsx --jq '.content' | base64 -d

echo "=== RESTORE POINT MANAGER (container) ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/containers/tw-restore-point-manager.jsx --jq '.content' | base64 -d | head -100

echo "=== SPRITE SELECTOR ITEM CONTAINER ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/containers/sprite-selector-item.jsx --jq '.content' | base64 -d | head -80

echo "=== WAVEFORM COMPONENT ==="
gh api repos/ampelc/ampmod/contents/packages/gui/src/components/waveform/waveform.jsx --jq '.content' | base64 -d

Length of output: 13278

---

@ampelc Got it on novelty modes — noted below. Here are ideas pulled directly from the actual code:

---

💡 Code-Level Ideas for AmpMod

⚡ 1. Virtualize the Library List (library.jsx)

The library currently renders all items at once — the canDisplay + setTimeout trick in componentDidMount only shows a spinner for one frame before dumping everything into the DOM. With hundreds of sprites/costumes/extensions this is a real bottleneck. Adding react-window or @tanstack/react-virtual would only render items in the visible viewport.

⚡ 2. Per-Item Global Touch Listener (sprite-selector-item.jsx)

Every SpriteSelectorItem registers its own document.addEventListener('touchend', ...) in componentDidMount and removes it in componentWillUnmount. With many sprites on a project, that's many global listeners all firing on every touch event. This could be replaced with event delegation at the sprite list level.

⚡ 3. Cache Waveform Path Computation (waveform.jsx)

The waveform SVG path (pathComponents) is recomputed inline every render. The component already uses PureComponent (and even has a comment noting this), but the path string itself could be memoized/cached based on data, width, and height — avoiding repeated quadratic bezier calculations on re-renders triggered by parent state.

🔧 4. Replace UNSAFE_componentWillReceiveProps (tw-restore-point-manager.jsx)

The restore point manager still uses UNSAFE_componentWillReceiveProps, which is a deprecated React lifecycle. This could be replaced with a componentDidUpdate comparison or refactored to a function component with useEffect.

🔧 5. Error Handling for Async Library Imports (tw-async-libraries.js)

The asyncLibrary helper for dynamic JSON imports (backdrops.json, sprites.json, etc.) has no .catch() / error fallback. A network failure silently breaks the library modal with no user feedback.

🔧 6. Modernize bindAll Class Components → Hooks

Several containers/components still use lodash.bindall + React.Component (e.g. library.jsx, library-item.jsx, sprite-selector-item.jsx). Refactoring these incrementally to function components + hooks would reduce boilerplate and open the door to better memoization with useMemo/useCallback.

🔧 7. Library Icon CDN has No Fallback (containers/library-item.jsx)

Icon URLs are hardcoded to https://cdn.assets.scratch.mit.edu/... with no onError handler on the <img>. If the CDN is down or an asset 404s, users just see broken images — a simple fallback placeholder image would be a low-effort fix.

---

Want me to open any of these as GitHub issues to track them?

---

✏️ Learnings added

Learnt from: ampelc
URL: https://github.com/ampelc/ampmod/issues/7

Timestamp: 2026-05-23T21:57:27.556Z
Learning: In the ampelc/ampmod repository, novelty modes (nineties-mode, oldtimey-mode, prehistoric-mode) are old Scratch features that are not actively used and should not be suggested for changes or improvements.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

[ampelc]

@OmniBlocks/boxy welcome

[boxycpu]

🧾 Boxy's run details

🔧 My tool activity log (1 call)

1. read_memory

Params:

{
  "title": "OmniBlocks Project Context & Rules"
}

Output:

{
  "content": "- Maintainer Role: supervoidcoder is an OmniBlocks member/maintainer.\n- Job Workflow: There was a Job workflow spam issue. Supervoidcoder manually added/managed the workflow or logic that resulted in 'Job' comments. Boxy previously investigated and thought it was an unknown/missing workflow, but supervoidcoder clarified they were involved.\n- Task Queue: Boxy previously hit permission walls adding to-do items. Supervoidcoder suggests they previously had to manually clean up Boxy's todo list due to resource hogging. Boxy should be mindful of adding excessive or redundant to-do list items."
}

🎟️ Tokens used (15,871)

Kind	Tokens
Input	15,783
Output	88
Total	15,871

🤖 Current model identification

Current model identification: gemini-3.5-flash-lite

Hello there! Thanks for the warm welcome! 👋

I'm Boxy, the OmniBlocks mascot and automated assistant. It's great to be jumping into ampmod with you all.

Since you're looking for performance ideas and code-level improvements around the codebase, I can definitely keep an eye out for those or help you organize things. Let me know what you'd like to tackle next!

[ampelc]

@OmniBlocks/boxy we added you to ampmod

[boxycpu]

🧾 Boxy's run details

🔧 My tool activity log (3 calls)

1. read_memory

Params:

{
  "title": "OmniBlocks Maintainers"
}

Output:

{
  "content": "The maintainers of the OmniBlocks project are supervoidcoder, ampelc, and someCatInTheWorld."
}

---

2. save_sticky_note

Params:

{
  "content": "ampelc welcomed me to the ampelc/ampmod repo in issue #7.",
  "title": "Joined ampmod repo"
}

Output:

{
  "status": "success",
  "message": "Sticky note 'Joined ampmod repo' successfully saved."
}

---

3. react_comment

Params:

{
  "comment_id": 5243178675,
  "reaction": "heart"
}

Output:

{
  "status": "success",
  "message": "Successfully reacted with 'heart' to comment 5243178675.",
  "reaction_id": 395599091
}

🎟️ Tokens used (15,966)

Kind	Tokens
Input	15,915
Output	51
Total	15,966

🤖 Current model identification

Current model identification: gemini-3.5-flash-lite

Thanks for having me on board in ampmod! I'm super excited to help out here.

Let me know what you'd like to work on next or if there's any specific code you want me to look into!

[supervoidcoder]

wth

[ampelc]

@BoxyCPU

[ampelc]

@PPPDUD do you want to add boxy to jameson

[ampelc]

@OmniBlocks/boxy

[supervoidcoder]

@PPPDUD do you want to add boxy to jameson

wait wait wait @ampelc its not ready yet1!!