collections library - bitcobblers/wod-wiki GitHub Wiki

Screen: Collections Stream & Library

  • Route: /collections, /library
  • Host Component: apps/playground/app/views/stream/QueriableStreamView.tsx (COLLECTIONS_STREAM_PROFILE, LIBRARY_STREAM_PROFILE)
  • Domain Models: Collection, Note, Tag, BlockIndexRow

1. Component & Service Dependencies

Core UI Components

  • QueriableStreamView (apps/playground/app/views/stream/QueriableStreamView.tsx). Renders stream profiles for collections and library catalogs.
  • StreamQueryBar (apps/playground/app/views/stream/StreamQueryBar.tsx). Houses WQL queries like find:note{source:collections} by {tag}.
  • LibraryRow (apps/playground/app/views/library/LibraryRow.tsx). Individual item component rendering workout metadata, tags, and action buttons.
  • PropertyTable (apps/playground/app/views/library/PropertyTable.tsx). Compact tabular view for dense browsing.

Services & Seed Data

  • seedContent (apps/playground/src/services/content/seedContent.ts). Provides bundled collections from markdown/collections/.
  • buildScriptCollections (apps/playground/src/repositories/script-collections.ts). Derives collection structures, item counts, and categories from seed files.
  • queryService (apps/playground/src/services/queryService.ts). Handles facet filters and tag searches across collection catalogs.

2. Desktop View Layout (≥1024px)

  • Context Sidebar (240px left): Collections tree with category filters (CrossFit Girls, Heroes, Gymnastics, Endurance).
  • Sticky Top Bar:
    • StreamQueryBar configured for collections scope.
    • Tag filter dropdowns and keyword search input.
    • Layout controls (Cards / Grid / Table).
  • Content Grid: Responsive 2 or 3-column card grid. Each card displays collection title, description excerpt, workout count badge, and category tags.
  • Right Rail (216px right): Category facets and tag cloud for instant filtering.

3. Mobile View Layout (<1024px)

  • Top Navbar: Displays "Collections" title and category drawer trigger.
  • Content Column: Single-column card feed with large touch targets.
  • Thumb Footer: Mobile query footer button row lets user tap to customize the collection search query.
  • Thumb Dock: Floating action cluster provides fast access to search and view options.

4. Composable Behaviors

  • Dual-Link Generation:
    • Clicking a collection card routes to /c/:slug (the specialized landing view).
    • Clicking an individual workout row inside a collection routes directly to /c/:collection/:workout or /notes/:noteId if a user copy exists.
  • Responsive Facets:
    • Desktop renders tag facets in the right rail.
    • Mobile places facet filters inside the drawer and bottom sheet filter dialog.
⚠️ **GitHub.com Fallback** ⚠️