NavigatorView reads searchResult/isFetching from useNavigatorSearch
instead of useNavigatorData/useNavigatorUiState. Tab clicks call
setTab(code) on the UI store, which atomically updates the query key
and triggers refetch. The 4 lifecycle useEffect blocks driving the
old imperative flow (needsSearch / reloadCurrentSearch / markReady)
are removed — the query handles all of it now.
NavigatorSearchView has a debounced (300ms) onChange -> setFilter
that drives the same query refetch. Explicit submit (Enter / button)
skips the debounce and calls setFilter immediately.
linkTracker case 'search' now setTab + setFilter + show — no more
pendingSearch ref.
useNavigatorSearch.test.tsx: cast constructors as any to satisfy tsgo
against real renderer types while keeping runtime stubs no-arg-safe.
yarn typecheck / test / lint:hooks all clean (only pre-existing
floorplan environmental failures).
P2 core surgery: search result + NavigatorSearchEvent listener +
sendSearch + reloadCurrentSearch all leave useNavigatorStore. The new
useNavigatorSearch query hook owns the cache. useNavigatorActions is
deleted entirely — the only two actions it exposed are gone, and no
consumer outside Navigator depended on it.
NavigatorMetadataEvent handler now seeds the UI store's currentTabCode
on first arrival, activating the query the moment top-level contexts
land.
useNavigatorData: searchResult removed from closure and return.
useNavigatorUiState: currentTabCode + currentFilter added.
index.ts: useNavigatorActions removed, useNavigatorSearch added.
NavigatorView.tsx is intentionally broken at this commit and gets
fixed in the next.
useNitroQuery keyed on [currentTabCode, currentFilter] from
navigatorUiStore. Fires NavigatorSearchComposer; subscribes to
NavigatorSearchEvent with an accept-filter that rejects results whose
code does not match the current tab. Invalidates on FlatCreatedEvent
and RoomSettingsUpdatedEvent for server-driven refresh.
nitro-renderer.mock.ts: add connection.send stub to GetCommunication
so SendMessageComposer (which calls GetCommunication().connection.send)
does not throw in tests that exercise useNitroQuery.
TDD: 7 cases incl. enabled-gating, accept-filter rejection on
mismatched tab, invalidator round-trip.
setTab(code) atomically updates currentTabCode and resets currentFilter
to '' — switching tabs starts a fresh search context. setFilter(value)
updates only the filter — the user is typing in the same tab.
TDD: 3 new cases (16 total in navigatorUiStore.test).
Combines spec + 5-task plan into a single doc for faster execution.
Branch: feat/navigator-p2-query (forked from feat/navigator-modernization
P1 tip). Migrates search from event-driven imperative state to
useNitroQuery with cache per [tabCode, filter], invalidator on
FlatCreatedEvent + RoomSettingsUpdatedEvent, accept-filter that rejects
mismatched-tab server pushes.
Key API changes: useNavigatorActions DELETED (sendSearch +
reloadCurrentSearch gone); useNavigatorData no longer returns
searchResult; navigatorUiStore adds currentTabCode + currentFilter +
setTab + setFilter; new useNavigatorSearch hook returns the
{ searchResult, isFetching, refetch } triple.
Each of the 5 Navigator sub-views (RoomCreator, DoorState, RoomInfo,
RoomLink, RoomSettings) is now wrapped in its own WidgetErrorBoundary so
a crash inside one no longer takes down the others. Matches the pattern
already applied to the 13 room widgets + 20 furniture widgets.
Zero behavioural change in the happy path. yarn typecheck +
yarn test --run + yarn lint:hooks all clean (only the 3 pre-existing
floorplan failures remain, unrelated to Navigator).
Commit 8ab0021a introduced an unjustified deviation: it removed the
useNotification() call from inside useNavigatorStore and replaced it
with a module-level _simpleAlert ref + _injectSimpleAlert() exported
function, on the theory that nested useBetween calls corrupt
use-between's state.
That diagnosis is wrong. Production proof:
- useCatalog.ts:56 calls useNotification() inside useCatalogStore
- useWiredToolsStore.ts:131 calls useNotification() inside its store
- The original useNavigator.ts:32 calls useNotification() inside its
state closure
All three have been in production for ages without issue. Nested
useBetween calls work fine.
The smoke-test failure that prompted the workaround was a mock issue,
not a real bug. Reverting to the standard pattern — useNotification()
direct inside the useBetween store closure. Production alerts work
again immediately without requiring an explicit injection call from
consumers.
Mock additions (src/nitro-renderer.mock.ts):
- Added 23 notification MessageEvent subclasses (AchievementNotification-
MessageEvent, ActivityPoint..., BadgeReceived, ClubGiftNotification,
ClubGiftSelected, ConnectionError, HabboBroadcast, HotelClosedAndOpens,
HotelClosesAndWillOpenAt, HotelWillCloseInMinutes, InfoFeedEnable,
MaintenanceStatus, ModeratorCaution, ModeratorMessage, MOTD,
NotificationDialog, PetLevel, PetReceived, RespectReceived, RoomEnter,
SimpleAlert, UserBanned, WiredRewardResult) so useNotificationStore
can register its listeners without throwing.
- Added RoomEnterEffect stub (isRunning: false, totalRunningTime: 0).
- Added WiredRewardResultMessageEvent static constants.
Splits the 492-line useNavigator god-hook into a useBetween-backed
useNavigatorStore closure plus three flat-shape filters
(useNavigatorData, useNavigatorUiState, useNavigatorActions), mirroring
the wired-tools layout. sendSearch + reloadCurrentSearch are extracted
as named actions out of NavigatorView locals.
Door-mode handling is removed from this store and lives in useDoorState
(committed previously) - see GetGuestRoomResultEvent and
GenericErrorEvent dual-subscription with mutually exclusive filters.
The simpleAlert dependency is lifted out of the useBetween scope via a
module-level _simpleAlert ref + _injectSimpleAlert() to avoid nested
useBetween calls that corrupt use-between's module-level dispatcher
state. The ref is null in tests (no events fire during smoke tests) and
is populated in production by the navigator consumer before any alert
is needed.
The barrel index.ts no longer re-exports useNavigator. The 13 consumers
will fail typecheck until the next commit migrates them; the hook files
themselves are clean. Smoke test covers filter shapes.
INTENTIONAL INTERMEDIATE-BROKEN COMMIT: yarn typecheck is RED at this
SHA on the 13 consumer files. The next commit (consumer migration sweep)
brings it back to green.
Code review of Task 2 (commit 07bbc0c7) found two real issues:
1. The GetGuestRoomResultEvent handler did not handle parser.roomEnter,
so after the consumer migration (Tasks 5-8) a successful room entry
would no longer dismiss the door dialog. Fix: reset to INITIAL when
parser.roomEnter is true, before the roomForward branch.
2. The test suite was order-dependent — the useBetween singleton
persisted state across tests, so 'exposes the initial NONE snapshot'
passed only because it ran first. Fix: beforeEach renders the hook
once, calls reset(), then unmounts; afterEach calls cleanup().
Plus one new test case verifying the roomEnter -> reset behavior.
- Add `src/hooks/rooms/widgets/useDoorState.ts`: useBetween-based
singleton wrapping DoorbellMessageEvent / RoomDoorbellAcceptedEvent /
FlatAccessDeniedMessageEvent / GenericErrorEvent /
GetGuestRoomResultEvent; all 5 handlers wrapped in useCallback([])
so their references are stable across useBetween tick() calls and
the effect dep-array never triggers re-registration.
- Add `src/hooks/rooms/widgets/useDoorState.test.tsx`: 11-case Vitest
suite (initial state, 5 event transitions, 2 no-op guards,
GetGuestRoomResultEvent doorbell/password paths, reset()).
- Extend `src/nitro-renderer.mock.ts`: new MessageEvent base class with
callBack/type/getParser; DoorbellMessageEvent / RoomDoorbellAcceptedEvent /
FlatAccessDeniedMessageEvent / GenericErrorEvent / GetGuestRoomResultEvent
concrete stubs; RoomDataParser.DOORBELL_STATE + PASSWORD_STATE; separate
msgListeners map (cleared independently of NitroEvent listeners so
useBetween subscriptions survive between test cases); WeakMap wrapper
for correct removeMessageEvent; GetCommunication routes to msgListeners.
All 11 useDoorState tests pass; full suite 453/456 (3 pre-existing
FloorplanCanvasSVG jsdom/SVG-CTM failures unrelated to this task).
Hoists the 9 useState in NavigatorView (isVisible, isReady, isCreatorOpen,
isRoomInfoOpen, isRoomLinkOpen, isOpenSavesSearches, isLoading, needsInit,
needsSearch) into a createNitroStore-backed Zustand store with named
actions. Future linkTracker / lifecycle wiring will call these actions
instead of mutating local component state.
TDD: 14 cases on each action's transitions + idempotency.
Bite-sized tasks with exact code blocks:
- Task 1: navigatorUiStore (TDD, 14 cases)
- Task 2: useDoorState extraction (TDD, 11 cases incl. dual-subscription filters)
- Task 3: useNavigatorStore internal closure (move all non-door listeners + new actions)
- Task 4: 3 filters + barrel rewrite + smoke test
- Tasks 5-8: 13 consumer migrations (atomic commit)
- Task 9: delete useNavigator.ts + final verification (typecheck/test/lint/manual)
Each commit is a green stopping point except Task 4 step 8 (intentional
intermediate-broken commit while consumers still import the removed
useNavigator export from the barrel). Tasks 5-8 land atomically to close
that gap in the next commit.
First of four planned phases reworking the Navigator on a clean
origin/Dev base. P1 is pure refactor (zero visible change): split
the 492-line useNavigator god-hook into wired-tools-style filters
(useNavigatorData / useNavigatorUiState / useNavigatorActions),
extract door lifecycle to useDoorState under src/hooks/rooms/widgets,
hoist the 9 local useState in NavigatorView into a Zustand
navigatorUiStore, migrate all 13 active consumers, and delete the
shim.
The Zustand UI store uses per-key selectors in useNavigatorUiState
to match createNitroStore's documented convention ("subscribe to
specific slices only").
Spec also anchors the visual rework (P4) target so architecture
decisions in P1 align with where we are heading: rich empty states,
card hover-reveal, saved-search chip row, filter intent chips,
sticky section headers, skeleton loaders.
Out of scope for P1 (each gets its own future spec): TanStack Query
migration of search (P2), reactive favourites/snapshot pattern (P3),
virtualization + empty states + persistence + chips (P4), Form
Action on search input (P6), WidgetErrorBoundary wrap (P5,
parallel-eligible).
The left-nav container is `max-w-[calc(50vw-242px)]` (reserves the chat
frame width) and uses `overflow-x: clip`. With the full icon set
(habbo, rooms, game, catalog, buildersclub, inventory, ME, wired-tools,
camera, youtube, modtools, furnieditor, housekeeping) the icons exceed
the available 528-608px around the 1540-1700px viewport range, so the
last icons get silently clipped on the right.
Raising the desktop breakpoint from 1540px to 1700px makes the client
fall back to the mobile-scrollable layout (`.tb-bar-scroll`) below
1700px, which scrolls horizontally and doesn't clip.
Above 1700px the desktop fixed-icon layout still applies, now with
enough horizontal room for every icon even with mod+HK enabled.
Touch devices are unaffected (already forced onto the mobile layout
via `pointer: coarse`).
Earlier rev had the hand first, before the label. Feedback: the
label belongs at the very start of the strip; the hand reads
better as the first of the tool buttons it groups with. Same
gesture and exclusive-group behaviour, just visually:
Modalita disegno [hand] [SET][UNSET][UP][DOWN][DOOR] ...
Two related changes from the latest feedback:
1) Hand is now the FIRST button in the toolbar (left of the
'Modalita disegno' label), matching where users typically
look for a pan affordance in painting / mapping editors.
2) The hand and the brush buttons form one exclusive tool
group: picking any brush (SET / UNSET / UP / DOWN / DOOR)
- or select-all / square-select - clears pan mode. No more
'I clicked SET but the canvas keeps panning'. Same goes
the other way: clicking the hand stays sticky, and while
it's active the brush highlights are visually de-selected
even though state.brush.action still holds the last brush
(so the user gets it back the moment they pick a brush
again).
Implementation: replaced the toolbar's onTogglePanMode prop
with an imperative setPanMode(next: boolean) =>. Every other
tool's onClick calls exitPan() first; the hand calls
setPanMode(!panMode) directly. data-active and the border
highlight on the brush + square-select buttons now require
!panMode so the visual state mirrors the gesture state.
No reducer changes - panMode stays a canvas-level UI flag.
Feedback was the amber thumb looked generic / off-the-shelf
and didnt visually tie to the gradient. The thumb now picks
its fill from tileFill of the selected height, so picking 0
shows a blue bead, picking 12 a green one, picking 26 a
purple one, and so on across the full HEIGHT_SCHEME palette.
- Fill: radial gradient on the band colour with a soft white
highlight at top-left and a darker rim at the bottom-right
for a beaded look. The highlight intensity adapts to the
base colour (stronger on dark hues, dimmer on light) so
it never washes out.
- Text contrast: a perceptual-luma heuristic (Rec.601, plain
arithmetic, no colour lib) flips between text-zinc-900 and
text-white at the right threshold so the height number
stays legible on every colour the picker can land on. A
matching textShadow seals the deal on the borderline hues.
- Ring on drag is now zinc-900 + scale-110 (clear gesture
feedback even when the underlying colour is similar to
white).
- Test added: thumb fill at h=0 must differ from h=13, so any
future regression that pins the thumb to a single colour
fails the suite.
Two related polish improvements after the swatch-column → vertical-
slider swap.
Slider
- Wider track (18 px, was 14 px) for a more comfortable click area
with the same on-screen footprint.
- Min / max chips above and below the rail (HEIGHT_BRUSH_MIN /
_MAX) so users know which end is high and which is low without
hovering to discover.
- Thumb now uses a warm amber radial gradient (#fff7c4 → #facc15
→ #ca8a04) on a dark brown border with a soft drop shadow + inset
highlight, instead of the flat yellow disc. Hover adds a white
ring; drag swaps it for a darker ring — clear gesture feedback.
- Track gains a hover/drag glow (inset white seam + amber outline
via boxShadow) so you can tell the slider has focus before you
even click.
Hand tool (canvas pan)
- New FloorplanToolbar button (FaHandPaper, sticky toggle, emerald
fill when active) ties to a new state lifted into
FloorplanEditorView. When the hand is active, plain left-click
+ drag pans the canvas instead of brushing tiles. Cursor flips
to grab / grabbing accordingly.
- FloorplanCanvasSVG's isPanGesture predicate becomes:
middle-mouse OR Shift+left-click OR (panMode && left-click).
Shift / middle still work whether or not the hand is on so power
users keep their muscle memory.
- No change to the reducer (panMode is a canvas-level UI flag, not
a brush action — keeps state/types tight).
DuckieTM