useDeskState

@sushindustries/ui

Which windows are open, where they sit and what has been put away, remembered without breaking a server render.

3 min read
View as Markdown
Viewport width
Desktop100%whatever the page has
tanstacktanstack add https://adamjurek.com/r/tanstack/use-desk-state.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/use-desk-state.json

Paths are stored as ids

A stored desk outlives the tree it described. Components get added and renamed, packages get removed.

Storing the entries themselves would restore a window titled after something that is no longer there; storing ids means a path that no longer resolves is dropped, and the window quietly does not reopen. Quiet is right - somebody returning to the site did not ask about your refactor.

Where this is used

FolderShelf holds one internally when given rememberAs. The home page holds its own instead, because two things need it: the shelf draws the windows and the dock lists them, and the place where two components meet is the component above both.

Install

tanstack add https://adamjurek.com/r/tanstack/use-desk-state.json
shell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/use-desk-state.json
shell
pnpm add @sushindustries/ui @sushindustries/atoms
shell

What you get

Version0.1.0
Categorylayout · Overlays
Filesuse-desk-state.ts
DependenciesNone
Tagsstate, storage, ssr, no-deps

No runtime dependencies

It brings nothing with it beyond the stylesheet.

Used byFolder ShelfFolder ShelfA desktop of folders that open into draggable windows, several at once, remembered between visits.@sushindustries/ui · layout