Rink Board Menu Overhaul: One Toolbar to Rule Them All

The rink board started with a simple toolbar. As features grew — drawing tools, panels, presets, export options, sounds, collaboration — the toolbar grew with them. Two rows. Thirty buttons. Labels everywhere. It worked, but it wasn't elegant.

Today we shipped a complete toolbar redesign. One row. Ten buttons. Everything accessible in two clicks or less.

The New Layout

From left to right:

Menu (hamburger icon) — Export, view controls, sounds, and help all in one flyout. This is where you'll find PNG export, game summary printing, zoom controls, fullscreen, whiteboard mode, and the sound effects board.

Game View — The red GV button toggles the live game visualization. Unchanged, just repositioned.

Panels (layout icon) — Every side panel in one flyout. Scoreboard, Scorekeeping, Rosters, Drills, Practice Plan, Drill Timer, Season, Boards, Animations, and Collaboration. Each item shows its keyboard shortcut (Alt+1 through Alt+9) and highlights when open.

Select — The pointer tool for clicking and moving items.

Draw (pencil icon) — All drawing tools, shapes, text, eraser, color/thickness, and clear options in one flyout. Pick a tool and the menu closes automatically. The active tool is highlighted with an accent indicator.

Add (person+ icon) — Presets (5v5, PP, PK, etc.) and add players by position.

Roster (people icon) — Quick-place any rostered player on the rink. Lists all home and away players with number, position, and name.

Undo / Redo — Always one click away.

Save / Snapshot — Save board to My Boards, or capture a keyframe for animation.

Why It Matters

The old toolbar required scanning 30+ buttons to find what you needed. The new toolbar has a clear visual hierarchy: the things you use constantly (select, undo, save) are always visible. Everything else is one click into a logically organized flyout.

On tablets and phones, the single row means no horizontal scrolling. The toolbar is sticky, so it stays visible as you scroll the canvas.

Command Palette

Can't find something? Press Ctrl+Shift+P to open the command palette — a fuzzy-search overlay with every action in the app. Type "export" to find PNG/PDF/video export. Type "5v5" to load a preset. Type "scoreboard" to toggle the panel. Over 55 actions are indexed.

Keyboard Shortcuts Still Work

All the drawing tool shortcuts (V, L, A, D, G, F, T, E) still work. Alt+1 through Alt+9 toggle panels. Ctrl+Z/Y for undo/redo. The flyout menus show these shortcuts next to each item as a reminder.

Panel System Changes

Panels are no longer floating overlays. Every panel now docks in the flex layout alongside the canvas — the same way the scoreboard always worked. This means panels don't cover the rink. They sit beside it. Multiple panels can be open simultaneously, and the canvas resizes to fit.

Panel states (which are open, which are collapsed) persist in localStorage. Close the browser, come back tomorrow, and your layout is exactly how you left it.

Recent Refinements

Since the initial overhaul, the toolbar has been further refined:

• 25% smaller buttons — more compact layout that fits better on all screen sizes
• Dropdown arrows removed — cleaner icon-only buttons without the small triangles
• Default zoom set to 125% — the rink board now loads at a slightly larger scale for better readability
• Mobile bottom sheets — on phones and tablets, panels slide up from the bottom as sheets (max 70% screen height) instead of covering the full screen
• Touch targets enlarged — all buttons meet the 44px minimum touch target on touch devices
• Toolbar z-index lowered — the site header's dropdown menus now render above the rink toolbar instead of behind it

Try It

Open the Rink Board and explore the toolbar. Hover over any button for a tooltip. Press Ctrl+Shift+P to try the command palette. Open a few panels and close the browser — they'll be there when you return.