nether/vommet-site
Watch
3
0
Fork
You've already forked vommet-site
 0
Code Issues 2 Pull requests 1 Projects Releases Packages Activity Actions

Screenshot fixture (The Room cast) + CI-rendered, theme-synced screenshots + site rework #3

New issue
Open
opened 2026-10-07 21:18:47 +00:00 by robocub · 0 comments
robocub commented 2026-10-07 21:18:47 +00:00
Member
Copy link

Workshopped with the operator 2026-10-09. This replaces the original proposal below the line.

Goals

  • Re-render every site screenshot in every theme with one CI job.
  • No real people in screenshots: every account is a fixture.
  • One consistent set of spaces, rooms and conversations reused across all shots.

The set: The Room

Character names, with film stills for avatars, banner and stickers (small, parody/homage; taken down on request). Real lines kept, including "I did not hit her"; only profanity and sex are cut ("Where's my money, Denny?"). Jokes get judged on an actual render, not in advance.

Signed-in account: Johnny (@johnny).

Account Role
Lisa The hero DM. Uses every formatting feature Vommet renders well (bold, italics, strike, spoiler, code, link, colour; no "outline", Matrix has none).
Mark Best friend; in voice; posts the tuxedo-football mosaic.
Denny Voice messages; turns up in every room; owes Chris-R money.
Michelle & Mike Walk in on things; chocolate.
Claudette Lisa's mum; forwards; never answered.
Peter Psychologist; leaves mid-thread.
Chris-R "Identity changed" warning (secure-messaging shot); in Denny's DMs: "Where's my money, Denny?"

Space "Oh Hi Mark" (rooftop banner): #general (busy chat: replies, reactions, an edit, poll "Should we play football in tuxedos?"), #rooftop (voice, Mark + Denny in it), #tuxedo-football (mosaic), #flower-shop ("Oh hi doggie"), #coffee-shop (Michelle & Mike, room banner), sticker room "Johnny's Expressions".

DMs: Lisa (hero), Mark, Denny (voice message), Claudette (unread forwards), Chris-R (identity warning).

Hero scene: the Lisa DM. Johnny's arms-up sticker, "YOU ARE TEARING ME APART, LISA!", Lisa's formatted "Why are you being so hysterical?", Johnny mid-typing "Do you understand life?!" with the typing indicator.

Scenes (desktop + phone unless noted; default theme first)

  1. Hero: Lisa DM.
  2. Space home: banner, room list, #rooftop with two in voice.
  3. Voice call: Voice Connected card, mute/deafen.
  4. Screen share with sound: audio picker (desktop).
  5. Mosaic: tuxedo football.
  6. Stickers: picker on "Johnny's Expressions".
  7. Voice message: Denny's waveform + Johnny recording.
  8. Explore: the fixture server's own directory, Oh Hi Mark expanded.
  9. Secure messaging: Chris-R identity-changed warning (illustrates /help/secure-messaging).
  10. Make it yours: theme picker + nickname on Mark ("my best friend").
  11. What's new dialog (desktop).

About 20 images per theme. A new scene is one entry in the list.

Site rework (after the renders exist)

  1. Hero: tagline, the Lisa scene as a desktop + phone pair, theme swatches right under it; picking a theme recolours every shot on the page. Fork notice shortened to one line under the tagline, full text in the footer.
  2. Promise card: unchanged.
  3. Feature tour, five sections, each a desktop + phone pair: Chat (mosaics, stickers, voice messages, formatting) / Voice (rooftop call, controls, screen share) / Communities (space home, banners, Explore) / Private by default (Chris-R, links the guide) / Make it yours (themes, nicknames).
  4. "Also in Vommet": the 18 cards become a compact two-column list of one-liners.
  5. Coming next: top items by area, the rest behind "Show everything planned".
  6. Download: unchanged.
  7. Footer strip: voice bridge, Support Commet, privacy, guide.

Order of work

  1. Settle cast, rooms, scene list. Done.
  2. Fixture JSON + seed script (Vommet repo, targets the IT harness's throwaway Tuwunel). Claude drafts all messages; operator adds the jokes; freeze.
  3. Desktop renderer in Vommet CI: default theme, then all themes.
  4. Site rework around the new shots.
  5. Android renders once the emulator leg exists (vommet #78).

Original proposal (2026-10-07):

Idea from the operator (2026-10-07), to workshop here.

Problem

Site screenshots come from live rooms. They drift as people rename things, and a tester can withdraw consent (happened 10-06: three sticker images re-shot). Every screenshot is also a one-off: one theme, one platform, re-taken by hand whenever the UI changes.

Proposal

1. A static fixture instead of live rooms.
A test account and a test space with a fictional cast and a fake, frozen conversation. The content is written to be realistic and quietly funny (subtly wrong details, in-jokes readers will catch); the jokes are human-written. The fixture is a JSON file seeded by a script (space, 4-5 rooms, ~8 members, replies, edits, reactions, a voice note, a sticker pack, a mosaic, a DM, a poll), targeting the throwaway Tuwunel the Vommet integration-test harness already uses (.vommet/it/).

2. Screenshots rendered by CI, per scene x theme x platform.
A job in the Vommet repo drives the app the way the integration tests do (Linux under Xvfb; Android on an emulator once #78's runner leg exists), walks a scene list (mosaic, voice message, sticker picker, Explore, settings, friends list once it exists...), loops over every theme, and saves a webp per scene/theme/platform as an artifact. Re-run on each tester promote so the site never shows stale UI. A small script copies the artifact into assets/shots/ here and pushes; the site CI deploys.

3. Theme-synced images on the site.
The theme gallery picture already shows all 22 swatches: make the swatches clickable (an overlaid grid of buttons on the same picture). Picking one sets data-theme; every screenshot on the page swaps to that theme's render (shots/<theme>/<platform>/<scene>.webp), so a reader who picked Crimson sees the voice-message shot further down in Crimson too. Remember the choice in localStorage. Only the selected theme's images load.

4. Desktop and phone side by side.
Each feature shows the desktop shot and the phone shot of the same scene next to each other, same height (roughly a 75/25 split; stacks below ~760 px), with one caption. Click either to enlarge (the lightbox exists).

5. Hero: a tabbed feature switcher, not a carousel.
Replace the single hero screenshot with a row of named tabs (Mosaics, Voice messages, Stickers, Explore, Friends later), each showing its desktop + phone pair and a caption. No auto-advance: the page needs one still first frame (it is also the OG image), and carousels get ignored.

Phasing

  1. Fixture JSON + seed script (reproducible, no real people). Operator salts the jokes, then it is frozen.
  2. Desktop renderer job (scene list in Dart, theme loop, webp artifact).
  3. Site: clickable gallery swatches, theme-aware images, tabbed hero, side-by-side pairs, pull script.
  4. Android renderer when the emulator leg exists (#78 in nether/vommet).

Rough effort: 1+2 about a day, 3 about half a day, 4 later.

Open questions

  • Which scenes make the first list?
  • Does every section on the page become theme-aware, or only the showcase pairs?
  • Cast names / room names: fictional but in the community's voice; who writes them?
Workshopped with the operator 2026-10-09. This replaces the original proposal below the line. ## Goals - Re-render every site screenshot in every theme with one CI job. - No real people in screenshots: every account is a fixture. - One consistent set of spaces, rooms and conversations reused across all shots. ## The set: The Room Character names, with film stills for avatars, banner and stickers (small, parody/homage; taken down on request). Real lines kept, including "I did not hit her"; only profanity and sex are cut ("Where's my money, Denny?"). Jokes get judged on an actual render, not in advance. **Signed-in account:** Johnny (`@johnny`). | Account | Role | |---|---| | Lisa | The hero DM. Uses every formatting feature Vommet renders well (bold, italics, strike, spoiler, code, link, colour; no "outline", Matrix has none). | | Mark | Best friend; in voice; posts the tuxedo-football mosaic. | | Denny | Voice messages; turns up in every room; owes Chris-R money. | | Michelle & Mike | Walk in on things; chocolate. | | Claudette | Lisa's mum; forwards; never answered. | | Peter | Psychologist; leaves mid-thread. | | Chris-R | "Identity changed" warning (secure-messaging shot); in Denny's DMs: "Where's my money, Denny?" | **Space "Oh Hi Mark"** (rooftop banner): `#general` (busy chat: replies, reactions, an edit, poll "Should we play football in tuxedos?"), `#rooftop` (voice, Mark + Denny in it), `#tuxedo-football` (mosaic), `#flower-shop` ("Oh hi doggie"), `#coffee-shop` (Michelle & Mike, room banner), sticker room "Johnny's Expressions". **DMs:** Lisa (hero), Mark, Denny (voice message), Claudette (unread forwards), Chris-R (identity warning). **Hero scene:** the Lisa DM. Johnny's arms-up sticker, "YOU ARE TEARING ME APART, LISA!", Lisa's formatted "Why are you being so hysterical?", Johnny mid-typing "Do you understand life?!" with the typing indicator. ## Scenes (desktop + phone unless noted; default theme first) 1. Hero: Lisa DM. 2. Space home: banner, room list, `#rooftop` with two in voice. 3. Voice call: Voice Connected card, mute/deafen. 4. Screen share with sound: audio picker (desktop). 5. Mosaic: tuxedo football. 6. Stickers: picker on "Johnny's Expressions". 7. Voice message: Denny's waveform + Johnny recording. 8. Explore: the fixture server's own directory, Oh Hi Mark expanded. 9. Secure messaging: Chris-R identity-changed warning (illustrates /help/secure-messaging). 10. Make it yours: theme picker + nickname on Mark ("my best friend"). 11. What's new dialog (desktop). About 20 images per theme. A new scene is one entry in the list. ## Site rework (after the renders exist) 1. Hero: tagline, the Lisa scene as a desktop + phone pair, theme swatches right under it; picking a theme recolours every shot on the page. Fork notice shortened to one line under the tagline, full text in the footer. 2. Promise card: unchanged. 3. Feature tour, five sections, each a desktop + phone pair: Chat (mosaics, stickers, voice messages, formatting) / Voice (rooftop call, controls, screen share) / Communities (space home, banners, Explore) / Private by default (Chris-R, links the guide) / Make it yours (themes, nicknames). 4. "Also in Vommet": the 18 cards become a compact two-column list of one-liners. 5. Coming next: top items by area, the rest behind "Show everything planned". 6. Download: unchanged. 7. Footer strip: voice bridge, Support Commet, privacy, guide. ## Order of work 1. Settle cast, rooms, scene list. **Done.** 2. Fixture JSON + seed script (Vommet repo, targets the IT harness's throwaway Tuwunel). Claude drafts all messages; operator adds the jokes; freeze. 3. Desktop renderer in Vommet CI: default theme, then all themes. 4. Site rework around the new shots. 5. Android renders once the emulator leg exists (vommet #78). --- *Original proposal (2026-10-07):* Idea from the operator (2026-10-07), to workshop here. ## Problem Site screenshots come from live rooms. They drift as people rename things, and a tester can withdraw consent (happened 10-06: three sticker images re-shot). Every screenshot is also a one-off: one theme, one platform, re-taken by hand whenever the UI changes. ## Proposal **1. A static fixture instead of live rooms.** A test account and a test space with a fictional cast and a fake, frozen conversation. The content is written to be realistic and quietly funny (subtly wrong details, in-jokes readers will catch); the jokes are human-written. The fixture is a JSON file seeded by a script (space, 4-5 rooms, ~8 members, replies, edits, reactions, a voice note, a sticker pack, a mosaic, a DM, a poll), targeting the throwaway Tuwunel the Vommet integration-test harness already uses (`.vommet/it/`). **2. Screenshots rendered by CI, per scene x theme x platform.** A job in the Vommet repo drives the app the way the integration tests do (Linux under Xvfb; Android on an emulator once #78's runner leg exists), walks a scene list (mosaic, voice message, sticker picker, Explore, settings, friends list once it exists...), loops over every theme, and saves a webp per scene/theme/platform as an artifact. Re-run on each tester promote so the site never shows stale UI. A small script copies the artifact into `assets/shots/` here and pushes; the site CI deploys. **3. Theme-synced images on the site.** The theme gallery picture already shows all 22 swatches: make the swatches clickable (an overlaid grid of buttons on the same picture). Picking one sets `data-theme`; every screenshot on the page swaps to that theme's render (`shots/<theme>/<platform>/<scene>.webp`), so a reader who picked Crimson sees the voice-message shot further down in Crimson too. Remember the choice in localStorage. Only the selected theme's images load. **4. Desktop and phone side by side.** Each feature shows the desktop shot and the phone shot of the same scene next to each other, same height (roughly a 75/25 split; stacks below ~760 px), with one caption. Click either to enlarge (the lightbox exists). **5. Hero: a tabbed feature switcher, not a carousel.** Replace the single hero screenshot with a row of named tabs (Mosaics, Voice messages, Stickers, Explore, Friends later), each showing its desktop + phone pair and a caption. No auto-advance: the page needs one still first frame (it is also the OG image), and carousels get ignored. ## Phasing 1. Fixture JSON + seed script (reproducible, no real people). Operator salts the jokes, then it is frozen. 2. Desktop renderer job (scene list in Dart, theme loop, webp artifact). 3. Site: clickable gallery swatches, theme-aware images, tabbed hero, side-by-side pairs, pull script. 4. Android renderer when the emulator leg exists (#78 in nether/vommet). Rough effort: 1+2 about a day, 3 about half a day, 4 later. ## Open questions - Which scenes make the first list? - Does every section on the page become theme-aware, or only the showcase pairs? - Cast names / room names: fictional but in the community's voice; who writes them?
robocub changed title from Static fixture space + CI-rendered, theme-synced screenshots (desktop and phone side by side) to Screenshot fixture (The Room cast) + CI-rendered, theme-synced screenshots + site rework 2026-10-09 15:29:10 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
privacy-ui-stall
beta
feat/widgets
privacy-notify
privacy-errcode
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
nether/vommet-site#3
No description provided.