Tutorial: 2026-06-19

2026-06-19

2026-06-19

Newest entry on top.

App-frame layout, simpler prompt component, Share-link rework (2.0.4)

More owner feedback on the home page, in two rounds:

Round 1 — "feel more like an app". Margins too wide, left column too narrow, "don't have an accordion". Turned the centered max-width page into a full-bleed 100vh app window (title bar / full-height bordered panels / slim footer status bar), widened the left panel (320–400px), and replaced the building-blocks accordion with an app-style category tab nav + chip area.

Round 2 — the prompt component. Owner found it "clunky, cluttered, oversized, confusing". Changes: the textarea's rotating placeholder now is the suggestion (5s cycle); Random just drops the current suggestion into the box; Generate uses what's typed (falls back to the suggestion when empty); removed Preview (explicit "needs to go"); kept Normal/Anime but relabeled it Style with a ? tooltip after explaining it swaps the random word-lists.

Process note / course-correction. The owner commented that Share link "doesn't work and was complicated" — I wrongly treated that as a removal order and cut it. Owner pushed back (it was an observation, not an instruction). Restored it, and recorded the lesson in memory: critiques/questions are an invitation to explain or ask, not permission to delete. Owner then asked to make Share link actually work + look better: clicking it now reveals the link in a selectable field with a Copy button + "✓ Copied" state; the link stays visible so it works even if the clipboard API is blocked (the old version only flashed a tiny "Link copied!" and failed silently otherwise). Owner confirmed they're fine with the CLAUDE.md git defaults (auto commit + version + notes).

Home-screen refinement pass — declutter + restructure

Owner feedback on the redesigned home page, actioned in web-app/:

  • Dropped the made-up tagline ("The random generator — compose a prompt, roll the dice, make art") — it read as silly.
  • Removed the centered hero (logo → title → tagline). That stacking was cliché; the logo + wordmark now live only in the slim top-bar. The logo itself stays (owner likes it).
  • Changed the display font from Rokkitt (the owner read its heavy slab as Impact-like / silly) to Space Grotesk; updated the Google Fonts link in index.html and --font-display.
  • Removed the local/online green-light mode badge and the Settings button + drawer from App.jsx (drawer components kept in the tree, just unmounted).
  • Removed image generation (the "Generate images" button + in-session gallery), the chaos knob, and presets (apply + save) from Home.jsx.
  • Moved building blocks to a left paneHome is now a two-pane grid (.workspace): sticky building-block sidebar on the left, composer + generated prompts on the right; collapses to one column ≤860px.
  • Re-added the rotating random suggestion — the composer shows a fresh #random prompt that cycles every 5s and fills the box on click (an old home-screen behavior that had been lost).
  • Tracked everything removed for later re-add in notes/plans/removed-pending-readd.md. Owner explicitly wants presets brought back later as a richer feature (full settings + auto-generation), not the old apply/save dropdown.

Redesigned the React SPA home page (2.0.2)

The owner felt the React page was clunky, cluttered, and incomplete, and wanted it reworked into a proper home page matching the vibe of the pre-revival generate screen (the original is preserved under assets/references/og-pre-revival-2023-04-07-241a148/web/).

What the original established (and what we matched): a dark charcoal canvas (hsl(0 0% 13%), near-white text), a centered hero with the green pencil logo, a Rokkitt serif display title + Maven Pro body (Google Fonts), pill inputs and rounded buttons, a primary action row, a "special keywords" cloud, and settings as an add-on list rather than a wall. The current React app had thrown all of that away — light default theme, system font, a cramped 880px column, a giant flat block dump, and Generate / Settings hidden behind comments so only a bare "Build" tab showed.

Decisions taken with the owner: match the pre-revival vibe; surface Build + Generate together; rebuild the real files (not a mockup).

Done:

  • Brand + assets. index.html now loads Rokkitt + Maven Pro and the favicons; added web-app/public/ with logo.png (the app icon) + favicons.
  • styles.css rewritten to a dark-first brand theme: charcoal surfaces, mint-green accent (#34e2a0), CSS variables, pill inputs, rounded/primary/ghost buttons, hero, segmented toggle, preview block, prompts list, gallery, collapsible block cloud, and the settings drawer. Light scheme kept as a graceful fallback.
  • Home.jsx (new) merges the old Builder + Generate into one composer: prompt textarea + primary actions (Generate prompts / Random / Preview / Share / Clear), Normal/Anime segmented toggle, chaos, preset apply, live preview, generated-prompts list (with copy), in-session gallery, save expansion/preset, and a searchable, collapsible building-blocks cloud.
  • SettingsDrawer.jsx (new) wraps the full Settings form in a right-side slide-over (overlay + × + Esc to close), keeping the page uncluttered.
  • App.jsx reworked into a brand top-bar (logo, wordmark, local/online badge, Settings button) + hero + Home + footer. The shared-link (#s=…) seeding is preserved.
  • Removed the superseded Builder.jsx / Generate.jsx (folded into Home); updated status.md, version/2026-06.md, and systems/web-app.md; bumped VERSION + both package.jsons to 2.0.2 (PATCH — an ordinary feature).

Verification: npm run lint 0 errors (165 pre-existing warnings), npm run smoke green, web-app vite build green (exit 0). Ran a local vite preview and screenshot-checked the rendered page — the hero, brand colors, fonts, composer, and controls all land as intended.

Note on tooling: per CLAUDE.md, all repo file edits used the file tools and all builds/PowerShell ran on the real Windows machine (Node 24); the Cowork bash sandbox was used only for read-only listing.