Show a QR code for the pad from a desktop toolbar toggle

[HMarzban]

This is a backlog item. A later idea will let each person choose the toolbar buttons. This issue is only the QR toggle.

Related

• Check the share card Change link as the owner and scan its QR on a real phone #356 is the phone scan of the share card QR. The new code must use that same clean URL.
• [Tracking] Editor next steps: Slash hardening, heading links, and MCP reads #328 lists Check the share card Change link as the owner and scan its QR on a real phone #356. It does not request a toolbar QR.
• An issue search for "qr" and a discussion search for "qr" found no other request.

Request

Edward Saperia asked for this in chat on 2026-09-26. He wrote:

feature: I would be happy to have a button to make a QR code appear that takes you to the page

it can appear here (first pic)

Could put a little qr icon here (second pic)

Toolbar icon to turn it on and off (third pic)

He wants a button that shows a QR code for the page. A scan of that code opens the page.

The three pictures are mapped by what they show. The map follows his words.

• His first picture shows the pad header and a blue square on the grey workspace, under the right end of the toolbar. That square marks where the QR appears. Confidence is high.
• His second picture is a plain QR icon. That icon is the toolbar glyph. Confidence is certain.
• His third picture shows the same header with no square. His words call it the toolbar icon that turns the QR on and off. Confidence is high.

The issue form cannot hold the pictures. The maintainer attaches the three pictures to this issue.

What we expect

The desktop toolbar gets a button that shows and hides a small QR code. The code sits at the top right of the workspace, in the marked area. The code encodes the clean pad URL. The page reuses the existing QR component.

Findings

These facts are read from code. They were not measured in a browser.

• The share card sets the shared address to the site origin plus the pad slug. The address bar can also carry ?h=, a chat target, and Filter terms. The QR and the Copy button both omit those parts.
• On a Private pad, the share card shows one line and no QR. The line tells the owner to turn Private off in Settings before sharing a link or a QR code.
• The in-card QR is a button. Its name is Present QR code, plus the address. Hover and keyboard focus show a fullscreen icon on a light veil. At rest, that icon is hidden, so the code can scan.
• Present view is a full-screen dialog on that button. A dark Present view sets the plate to --qr-plate-dim. The modules stay dark on that light plate.
• QrCode encodes with uqr at error correction M. The quiet zone defaults to 4 modules. The share card passes 2, because the card padding supplies more light space.
• --qr-plate, --qr-ink, and --qr-eye stay fixed in every theme. On 2026-09-27 the maintainer ruled out a logo and a caption. The Present icon shows only on hover or focus.
• A reader shows a QR today by opening Share in the pad title. Present view needs a second click, on the QR itself.
• MobilePadTitle does not mount the share card. The desktop utility row is EditorToolbar, in the right-hand cluster. That cluster holds Discord, Copy, Documents, Bookmarks, Find, Filter, and Document settings. Documents and Bookmarks render for a signed-in reader. The new icon belongs in this cluster, next to Document settings. The exact slot is an open question below.
• The icon set is Lucide, through react-icons/lu. Font Awesome is used only for brands that Lucide lacks. The registry has no QR name today. react-icons 5.7.0 exports LuQrCode.
• The grey area under the toolbar is the pad well, --pad-well. The document sheet is centered on that well. Its max width is 56rem.
• Wide TOC and the tick rail use z-[42]. The TOC sash uses z-[41]. Docked chat uses z-[42] along the bottom of the editor column. Floating overlays use z-50.
• A small floating QR uses the L1 anchored frame. That frame is rounded-box, a border-base-300 border, bg-base-100, shadow-xl, and z-50. popoverPanelClassName is that frame plus a width of 28rem. The QR card uses the frame and sets its own width. The symbol itself stays on --qr-plate.
• The pad well is not a light quiet zone. This QR should use the default 4-module zone on the light plate. The fit of that card beside the sheet, in a narrow window, was not measured.

Open questions

These are questions for the maintainer.

• Does the shown QR survive a reload?
• Is that choice stored for each pad, or for each person?
• Does the QR stay in the marked corner, and can the reader move it?
• What size should the code be on screen?
• Does a signed-out visitor see the toggle?
• Does a Read-only pad show the QR?
• Private is hidden in the acceptance list, to match the share card. Please confirm that rule.
• Is the toggle desktop only?
• Does this QR stay available while Present view remains in the share card?
• Does the toggle remove the need to open Share?
• What should happen when the window is narrow?
• What should happen when docked chat is open? The fit was not measured.

Reference points

• DENSO WAVE requires a quiet zone four modules wide on every side of a QR Code. Letters or pictures in that margin make the code hard or impossible to read. https://www.qrcode.com/en/howto/code.html
• DENSO WAVE says art over the code makes the bright and dark areas indistinct. That code may not read. A stretched or shrunk image can distort the modules. https://www.qrcode.com/en/howto/trouble.html
• DENSO WAVE says the basic print is black on white. Scanners use red light, so some other color pairs cannot be read. https://www.qrcode.com/en/faq.html
• DENSO WAVE lists ISO/IEC 18004 as the international standard. It was approved in June 2000. The ISO document is sold. This issue quotes the DENSO WAVE pages. https://www.qrcode.com/en/about/standards.html
• The W3C button pattern says a toggle sets aria-pressed. The label stays the same when the state changes. Space and Enter activate a focused button. https://www.w3.org/WAI/ARIA/apg/patterns/button/
• The W3C toolbar example puts aria-pressed on its bold, italic, and underline toggles. Arrow keys move focus when the toolbar is one tab stop. EditorToolbar has no role="toolbar" today, so this issue does not add arrow-key roving. https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/
• Zoom documents a QR code that a person scans to join a Zoom Event. The scan can use a phone camera or the Zoom app. That page is about an event. This request is about a pad. https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0057680

Acceptance criteria

• The desktop toolbar has a toggle that uses LuQrCode through the icon registry.
• The toggle has a tooltip and an aria-label.
• The toggle sets aria-pressed to true when the QR is shown, and to false when it is hidden.
• The accessible name stays the same in both states.
• A keyboard user can focus the toggle and switch it with Space and with Enter.
• When the toggle is on, the QR is visible at the top right of the pad well.
• When the toggle is off, the QR is absent.
• The QR value is the clean pad URL, the same string as the share card.
• The value has no ?h=, no chat target, and no Filter terms.
• On a Private pad, the workspace shows no QR.
• The QR does not cover Wide TOC, the tick rail, docked chat, or the document sheet.
• That overlap check covers the supported desktop widths.
• Light, dark, and the premium themes keep dark modules on the light plate.
• The plate is --qr-plate. A dark theme does not invert the code.
• The quiet zone on this QR is 4 modules, on the light plate.
• The code has no logo and no caption.
• Nothing covers the modules while the QR is shown.
• The page renders the symbol with QrCode only.
• A Cypress spec is added that fails before the feature and passes after it.
• An iPhone camera and an Android camera each open the pad from this QR, as in Check the share card Change link as the owner and scan its QR on a real phone #356.

Blocked by

None.

Agent brief

Type: AFK. The phone scan at the end is a person, as in #356.

Category: Feature

Current behavior: Share in the pad title opens the share card. On a public pad, that card shows a QR for origin/slug and a Present view. On a Private pad, the card shows no QR. The desktop toolbar has no QR toggle. The workspace shows no QR.

Desired behavior: A desktop toolbar toggle shows and hides a small QR in the top right of the pad well. The QR uses QrCode and the clean pad URL. A Private pad shows no QR. The code stays clear of Wide TOC, the tick rail, docked chat, and the document sheet.

Where to start: Search by symbol. The date of these hints is 2026-09-29.

• apps/webapp/src/components/TipTap/toolbar/desktop/EditorToolbar.tsx — EditorToolbar, the right-hand cluster that ends at Document settings.
• apps/webapp/src/components/TipTap/toolbar/ToolbarButton.tsx — ToolbarButton (tooltip, aria-label, isActive).
• apps/webapp/src/components/icons/registry.ts — Icons. Add a QR name from LuQrCode.
• apps/webapp/src/components/ui/QrCode.tsx — QrCode, STANDARD_QUIET_ZONE.
• apps/webapp/src/components/TipTap/pad-title-section/ShareModal.tsx — shareUrl, the Private branch.
• apps/webapp/src/components/TipTap/pad-title-section/PresentQrCode.tsx — Present view. Leave its rulings in place.
• apps/webapp/src/components/ui/Popover.tsx — popoverPanelClassName.
• apps/webapp/src/components/pages/document/components/DesktopEditor.tsx — pad well, Wide TOC, tick rail, docked chat.

Rules that apply: .cursor/docs/design-system.md §ShareModal (rulings of 2026-09-27) and §Elevation species. A floating card is L1. Docked regions stay flat. apps/webapp/CLAUDE.md §Pad Workspace Surfaces and §Floating Surfaces And Modal Scrims. CONTEXT.md §Document access (Private, Read-only) and §Pad outline (Wide TOC, tick rail). AGENTS.md §UI And Theme. Do not build the later idea of user-controlled toolbar buttons in this issue.

Verify: Add the Cypress spec first and see it fail. Then build the toggle and see the spec pass. Check light, dark, and the premium themes on a public pad and a Private pad. For the phone scan, use https://docs.plus, because a local QR carries localhost. Scan from the on-page QR with an iPhone and an Android phone. Open a heading first, so the address bar has ?h=, and confirm the phone lands on origin/slug.

[HMarzban]

The larger idea is in discussion #375. It asks whether each person can choose, sort, and hide toolbar buttons. This issue stays scoped to the QR toggle.