library

Summary

My Library: the signed-in user's recordings as cards.

Raw wireframe

• .context/designs/web/library/library.html
• .context/designs/web/library/library-empty.html
• .context/designs/web/library/library-loading.html
• .context/designs/web/library/library-error.html

Why it is drawn this way

Grid view is a vertical list. viewMode === "grid" renders space-y rows of RecordingCard, one per line. There is no grid.

Drawn with two selected. Checkboxes and Delete (n) only render once something is selected, and the only way to start is the select-all button. The drawing shows that state so bulk delete can be reached.

Tabs filter what is already loaded. useRecordingsFilter filters the fetched page of 50 on the client. The count under the title is the filtered count.

Loading hides the toolbar. Three CardSkeletons under the title, nothing else.

Error narrows the page. The error branch uses the md container and drops the toolbar.

Empty keeps the toolbar. Tabs, sort and the view toggle stay; select-all does not.

Related

• library-list
• delete-recordings
• recording
• shared-with-me

Sources

• apps/website/src/app/library/page.tsx
• packages/ui/src/components/recording/recording-card.tsx