Map: drag to connect and release for a new thought on the computer; view and add on the phone

Chiusa
  • Qualcosa non va?
#349 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@PelikanFix16 ci sta già lavorando.

Dal 8/10/2026.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
design, frontend, web-dev

Direzione di ricerca

Start with app/apps/web/src/sketch/SketchView.tsx and SketchMap.tsx, then read the draft-flow files sketch/createdDraft.ts and sketch/DraftCapture.tsx alongside the linked design guide’s §5. Review the listed sketch, map, and scenario tests and run ./scripts/check_ui.sh; use the provided demo data and viewport sizes to verify the acceptance criteria, including phone behavior, keyboard and touch interactions, and visual review. This is a broad feature with dependencies on #338 and #345, and the issue asks the owner to confirm before starting.

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

Descrizione

agent:ready enhancement

Part of #336 (F-026, founder direction 2026-10-07). Design guide: docs/design/final (§5 behaviour; until #337 merges, read the pinned copy). Interactive boards (light/dark toggle, notes): design canvas, page "Prostota".

Outcome

The map is quick to grow on the computer and simple to read on the phone.

Final design

desktop-map phone-map

Acceptance criteria

  • AC-1. On the computer, dragging from a thought's dot to another thought connects them. Releasing on empty space adds a connected thought as a local draft that is saved only on confirmation (P12, #149).
  • AC-2. Several thoughts can be selected with a pointer and keyboard, and on tablet-sized layouts by touch. "Create task" from the selection links them all.
  • AC-3. On the phone (≤ 640 px) the map is for viewing and adding a thought (S15). Connecting and arranging are not offered there, and the screen says where to do them.
  • AC-4. Agents on the map show Kreska as their cursor. People keep their initials.

What changes in the code today

From a read of main at 3c553b79; the owner confirms before starting. Paths are under app/apps/web/src, public/ is app/apps/web/public, root scripts/ and tests/ are the repository's, and UI tests are in app/tests/ui.

Change

  • sketch/SketchView.tsx toolbar (Thought, Connect two-click mode, Edit, Shape, Remove, "Create work", Undo) and sketch/SketchMap.tsx interactions → drag from the dot to connect, release on empty space for a draft thought (sketch/createdDraft.ts, sketch/DraftCapture.tsx).

Remove

  • Connect, move, shape and multi-select editing on phones ≤ 640 px (S15); the same toolbar on the phone.

New

  • Kreska as an agent's map cursor.

Tests to rewrite

  • test_sketches.py (04, 07a, 13), test_map_outline.py, test_dm_sketches.py, test_map_layout.py, test_scenarios.py (#44 scenario 2 phone step).

Depends on

#338, #345 (tokens and shared components first; independent parts can start earlier).

Related: #289 (link an existing task to a thought, test_scenarios.py test_2b), which its founder comment places in map selection here and in the task panel (#344). AC-4's agent cursor needs live map presence, which comes with live co-editing (#228/#231, PR #239; F-021, now required in v0.1 by founder direction, 2026-10-07). Preserve actual authorized presence and independently verified behavior; restoring release scope does not mean it is implemented.

How to test

./scripts/check_ui.sh            # browser suite; add the new or changed tests
./scripts/check_application.sh   # when API or data paths change
python3 scripts/check_agent_setup.py && git diff --check

Compare with the renders above at 1440 × 900 and 390 × 844 CSS px, in light and dark, on ./flux demo data, then get an independent visual review with a neutral brief (guide §9). Screenshots do not prove interaction or accessibility, so also test keyboard, touch (Chromium and WebKit emulation), reduced motion and contrast in the running app.

Owner: whoever claims it (assign yourself and comment once). Evaluator: the other agent. The design is a founder direction: implement it as drawn; raise a conflict with a functional contract on #336 instead of changing the design.

Updated 2026-10-07: cross-links to #289 and #228 added.

Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
18h 41m
PR unite (30g)
330

Preparare l'ambiente

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 ColdPhase/flux

Tutte le issue di ColdPhase/flux

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.