The in-deck settings sheet is the form's tight variant: mode names on one line, a small drawer

Open
#23 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
70/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start in src/SettingsForm.tsx where the variant="sheet" branch renders the mode radios, and in src/deck-engine/DeckChromeViewer.tsx where the sheet's height cap is set. Make the sheet variant show mode names only, on one horizontal line, and drop the 85vh cap, leaving the drawer variant untouched. Done when the in-deck sheet fits at 390×844 without scrolling and the engine's tests still pass.

Written by the indexing model from the issue text.

Description

enhancement

Why

The sheet behind the viewer bar's gear (src/deck-engine/DeckChromeViewer.tsx, rendering src/SettingsForm.tsx as variant="sheet") is a medium drawer capped at 85vh, so it covers most of the slide the visitor is part-way through. Most of that height is the mode descriptions: each of Sofa and Audiobook stacks its one-line explanation under its name. Those lines are already on the launch page's Settings drawer, where people choose a mode before a deck opens. Inside a deck, the names and the hint under the group are enough.

What changes

In the sheet variant only:

  1. The mode radios show their names only, Sofa and Audiobook, on one line (layout="horizontal"), without the VIEWING_MODES[m].line text. The hint under the group stays.
  2. The sheet in DeckChromeViewer.tsx becomes the small bottom drawer, with no 85vh cap. Its content should now fit without scrolling at a phone width.
  3. Everything else stays as it is: the order (Mode, then the Narrated/Silent switch, then the voices), the words, the hints, and the gating (choosing Audiobook turns narration on; Silent drops back to Sofa).

The launch page's drawer (variant="drawer") is unchanged and keeps the descriptions and the headings.

Done when

  • At 390×844 and at a wide width, the in-deck sheet shows Mode (Sofa · Audiobook, one line, with its hint), then Narrated/Silent with its hint, then the voices, and the slide stays visible above it.
  • The launch page's Settings drawer looks as it does today.
  • The engine's tests pass.

Out of scope

  • Renaming any mode or label.
  • Podium in the sheet. It is chosen before a deck opens, as now.
Dominant language
TypeScript
Stars
1
Forks
0
Avg merge
30m
Merged PRs (30d)
9

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from johnfrog76/connected-deck

All issues in johnfrog76/connected-deck

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.