feat(ui): multi-tabling — pull a table pill out of the header into a floating card bubble you can park anywhere

Aperta
  • Qualcosa non va?
#887 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Dzeezbtc ci sta già lavorando.

Dal 24/10/2026.

  • #894 di @Dzeezbtc — aperta

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with src/components/MultiTable/TablePillBar.tsx, TablePill.tsx, and MultiTableWorkspace.tsx, then read src/context/tableSessions/sessionsModel.ts to understand table order and persistence. Check the existing pill drag behavior and identify where session state is saved. Done means implementing and unit testing pull-out, docking, clamping, persistence, mouse and touch behavior, and confirming all acceptance criteria; an open linked pull request (#894) indicates work is already underway.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Backlog feature table-layout UI

Overview

Follow-up to multi-tabling (#55, PR #833). Today each open table is a pill in the header (hole cards + table name), and pills can be dragged left/right to reorder. Switching tables still means moving the cursor up to the header every time, which is slow when you're playing several tables.

This ticket lets you pull a pill out of the header and park it anywhere on the screen as a small round bubble, so the table you switch to most is right next to where you're already working (e.g. beside the action buttons).

Built separately, on top of the pill bar, so the pill bar can ship first and this can follow independently.

Behaviour

  • Pull out: press a pill in the header and drag it down, out of the header row. On release it becomes a floating bubble at that spot.
  • The bubble is a small circle that shows only the hole cards at that table (card backs between hands), with no table name on it. The name shows on hover / as its accessible label.
  • Click a bubble to switch to that table (same as clicking its pill).
  • Move it: drag a bubble anywhere on the screen. It stays where you put it, including after a reload, and it stays on screen when the window is resized.
  • Your turn: a bubble glows with the same magenta ring as a pill when it's your turn at that table.
  • Dock back: drag a bubble back up into the header row and it becomes a pill again, at the position where you drop it.
  • Close: closing the table removes its bubble as well.
  • A table is either a pill or a bubble, never both.

Acceptance criteria

  • AC-1 Dragging a pill vertically out of the header row turns it into a bubble at the drop point. A horizontal drag inside the row still reorders, as it does today.
  • AC-2 A bubble is circular, shows only the two hole cards (or backs), and glows on your turn.
  • AC-3 Clicking a bubble switches to its table. Dragging it moves it without switching.
  • AC-4 Bubble positions persist across reloads and are kept inside the viewport on resize.
  • AC-5 Dragging a bubble back into the header row docks it as a pill.
  • AC-6 Works with mouse and touch (touch: press and hold, then drag).
  • AC-7 Unit-tested: the pull-out threshold, position clamping, persistence and docking.

References

  • src/components/MultiTable/TablePillBar.tsx, TablePill.tsx, MultiTableWorkspace.tsx
  • src/context/tableSessions/sessionsModel.ts (open tables, order, persistence)
  • Part of #55. Builds on #833 (pill bar in the header + drag to reorder) and #834 (table-scoped submission).

🤖 Generated with Claude Code

Lingua principale
TypeScript
Stelle
2
Fork
5
Merge medio
22h 35m
PR unite (30g)
91

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di block52/ui

Tutte le issue di block52/ui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.