Skip to content

feat(builder): advertise the format-token autocomplete - #1570

Merged
chhoumann merged 1 commit into
masterfrom
chhoumann/1542-advertise-token-autocomplete
Jul 27, 2026
Merged

feat(builder): advertise the format-token autocomplete#1570
chhoumann merged 1 commit into
masterfrom
chhoumann/1542-advertise-token-autocomplete

Conversation

@chhoumann

@chhoumann chhoumann commented Jul 27, 2026

Copy link
Copy Markdown
Owner

Closes #1542. Supersedes #1561, which GitHub closed permanently when its base
branch (#1560) was merged and deleted — same commit, rebased onto master.

The problem

Typing {{ in a format field opens a list of every token, each with a one-line
description (that part shipped in #1549). Nothing in the UI said so. The reporter
found it by typing {{ on a hunch while looking for the syntax; a new user has
no reason to try that, and no other in-app way to learn which tokens exist.

Ask 1 was deliberately left out of #1549 because its two natural homes belonged
to siblings from the same walkthrough: #1541 (docs links in the UI) and #1544 (a
worked-example placeholder). Both have now shipped, and #1541 explicitly left
"docs links inside the builders" to this issue. So this closes #1542.

The change

The affordance is two characters, so the honest fix is to name the two
characters, right below the caret:

Type {{ to insert a token · Format syntax

"Format syntax" is the docs entry point #1541 deferred here: the token language
is the one part of the builder you cannot work out by looking at it.

hint

Decisions worth arguing with

It hides once the value contains {{. The hint has done its job, and a line
that never goes away is exactly the permanent chrome an "Insert token" button
was rejected for in the issue thread. Stateless — no setting, no migration.

Three of the five token fields, not all five. Capture format, File name
format, and Capture to — the last being the only format field a brand-new
Capture builder renders, since the other two sit behind default-off toggles.

Deliberately not on insert-after / insert-before: their own descriptions tell
you to type a literal heading like ## Tasks, so a token-less value is the
documented normal state there and the hint would nag forever. Not on the template
path field either — it has no token autocomplete at all.

Not a persisted "you've seen this" flag. It was the obvious alternative and
it is worse in four ways: settingsStore mutations rewrite the whole
data.json, so the suggester would write to disk on a keystroke; no Svelte
component subscribes to the store, so the flag would not be reactive and the
hint would linger until the builder was reopened; settings are per-vault, so
"user lifetime" is false; and one stray {{ would delete the affordance
vault-wide with no way to bring it back.

Not the placeholder alone. It vanishes on the first keystroke and on every
existing choice, and cannot carry the docs link. #1544 already shipped that
pattern on "Capture to" without closing this ask.

Not { as the trigger, and not open-on-focus. Both were rejected in the
issue thread: { + Enter would insert a token instead of a newline in a capture
format holding JSON or code, and open-on-focus fires on every builder open and
races the file suggester on "Capture to".

Validation

Summary by CodeRabbit

  • New Features

    • Added inline guidance for inserting format tokens in capture format, file name format, and capture destination fields.
    • Hints link to the relevant format syntax documentation and disappear once a token is entered.
    • Added styling for clearer, unobtrusive token guidance.
  • Documentation

    • Added a link to the canonical format syntax documentation.
  • Tests

    • Added coverage for token hint visibility, documentation links, and dynamic updates.

Closes #1542.

Typing `{{` in a format field opens a list of every token, each with a one-line
description (shipped in #1549). Nothing in the UI said so - the reporter only
found it by typing `{{` on a hunch while looking for the syntax. Ask 1 of #1542
was deliberately left open because its two natural homes belonged to #1541
(docs links in the UI) and #1544 (a worked-example placeholder); both have
shipped, and #1541 explicitly left "docs links inside the builders" here.

The affordance is two characters, so the honest fix is to name the two
characters, right below the caret:

    Type {{ to insert a token · Format syntax

"Format syntax" is the docs entry point #1541 deferred: the token language is
the one part of the builder you cannot work out by looking at it.

The hint hides once the value contains `{{`. It has done its job, and a line
that never goes away is the permanent chrome an "Insert token" button was
rejected for.

On three of the five token-autocomplete fields: Capture format, File name
format, and Capture to - the only one a brand-new Capture builder renders, since
the other two sit behind default-off toggles. Deliberately NOT on insert-after /
insert-before: their own descriptions tell you to type a literal heading like
`## Tasks`, so a token-less value is the documented normal state there and the
hint would nag forever.

Also considered and rejected:

- Triggering the popup on a single `{`, which would make `{` + Enter insert a
  token instead of a newline in a capture format holding JSON or code.
- Opening the list on focus: fires on every builder open, and races the file
  suggester on "Capture to".
- Persisting a `hasUsedTokenAutocomplete` setting. Settings mutations rewrite
  the whole data.json, so the suggester would write to disk on a keystroke; no
  Svelte component subscribes to the store, so it would not be reactive; settings
  are per-vault, so "user lifetime" is false; and one stray `{{` would delete
  the affordance vault-wide with no way back.
- Teaching via the placeholder alone: it vanishes on the first keystroke and on
  every existing choice, and cannot carry the docs link.
@coderabbitai

coderabbitai Bot commented Jul 27, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ccf1a256-edbc-48cd-a684-b7018efcadc7

📥 Commits

Reviewing files that changed from the base of the PR and between 5e18213 and 6665d44.

📒 Files selected for processing (7)
  • src/docs.ts
  • src/gui/ChoiceBuilder/CaptureChoiceForm.svelte
  • src/gui/ChoiceBuilder/TemplateChoiceForm.svelte
  • src/gui/ChoiceBuilder/components/CaptureTargetSetting.svelte
  • src/gui/ChoiceBuilder/components/FormatTokenHint.svelte
  • src/gui/ChoiceBuilder/components/FormatTokenHint.test.ts
  • src/styles.css

📝 Walkthrough

Walkthrough

Format token guidance was added to three choice-builder fields through a reusable Svelte component. The component links to format syntax documentation, hides after token insertion, and is covered by tests and modal-specific styling.

Changes

Format token guidance

Layer / File(s) Summary
Token hint component and documentation contract
src/docs.ts, src/gui/ChoiceBuilder/components/FormatTokenHint.svelte, src/gui/ChoiceBuilder/components/FormatTokenHint.test.ts
Adds the format syntax URL and a conditional hint with an external documentation link; tests cover display, link attributes, hiding, and reappearing.
Choice builder field integration
src/gui/ChoiceBuilder/CaptureChoiceForm.svelte, src/gui/ChoiceBuilder/TemplateChoiceForm.svelte, src/gui/ChoiceBuilder/components/CaptureTargetSetting.svelte
Renders token hints for capture format, file name format, and capture target values.
Hint presentation styling
src/styles.css
Adds quick-add modal styling for the hint and its inline code text.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ChoiceBuilder
  participant FormatTokenHint
  participant FormatSyntaxDocs
  User->>ChoiceBuilder: Enter a format value
  ChoiceBuilder->>FormatTokenHint: Pass the current value
  FormatTokenHint->>FormatTokenHint: Check for {{
  FormatTokenHint->>FormatSyntaxDocs: Open format syntax link
Loading

Possibly related PRs

Poem

A bunny found the braces bright,
And taught the tokens where to hop.
Three fields now whisper syntax light,
With docs a click away atop.
“Type two curls!” the rabbit sings,
While hidden hints grow useful wings.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is concise and accurately describes the main change: adding a discoverable format-token hint.
Linked Issues check ✅ Passed The PR adds the requested inline hint and docs link for token discoverability; the token-description concern is noted as already shipped separately.
Out of Scope Changes check ✅ Passed All changes support the format-token hint feature, including wiring, docs, tests, and styling; no unrelated scope creep is evident.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chhoumann/1542-advertise-token-autocomplete

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying quickadd with  Cloudflare Pages  Cloudflare Pages

Latest commit: 6665d44
Status: ✅  Deploy successful!
Preview URL: https://6e1a579e.quickadd.pages.dev
Branch Preview URL: https://chhoumann-1542-advertise-tok.quickadd.pages.dev

View logs

@chhoumann
chhoumann merged commit bf39e2b into master Jul 27, 2026
13 checks passed
@chhoumann
chhoumann deleted the chhoumann/1542-advertise-token-autocomplete branch July 27, 2026 05:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE REQUEST] Format token autocomplete is undiscoverable, and its entries lack descriptions

1 participant