Browse Page Components¶
Documentation of UI components captured via Playwright screenshots.
Screenshot Variations¶
Each component has two screenshots: - no-padding.png - Exact element bounds - with-padding.png - Element with 20px padding around it
TopBar (.app-header, .top-bar)¶
Contains: - Database selector dropdown - Window controls (close, minimize, maximize) - Navigation buttons (back, forward, browse, random, next/previous) - Navigation dropdown menu
Search Bar (.search-bar-row, .search-container)¶
Contains: - Search input field with placeholder - Search button - Help button - Search history dropdown - Saved searches autocomplete
Browse Table (.browse-table)¶
Full table with all rows and columns.
Column Headers (thead)¶
Columns: - Thumb - Thumbnail preview (100px width) - Rating - Star rating display, sortable - Filename - Entity filename, sortable - Tags - Tag chips with style templates applied - File Time - Last modified date, sortable - Size - File size, sortable - Plays - Play count, sortable - Actions - Row action buttons
Entity Row ([data-entity-id="N"])¶
Individual entity row showing all columns.
Table Cells¶
Thumbnail Cell (.thumbnail-cell)¶
Shows thumbnail image or placeholder (100x100px).
Rating Cell (.attr-cell)¶
Star rating display (0-5 stars with half-star support).
Tags Cell (.tags-cell)¶
Displays styled tag chips using tag style templates.
Filename Cell (.filename-cell)¶
Shows filename with truncation for long names.
Action Cell (.action-cell)¶
Row action buttons: - Play button - Favorite button - Copy button - Delete button
Navigation Sidebar (.right-panel-nav)¶
Right panel navigation with: - Back button - Play button - Title display - Browse filter chips - Settings button - Tab buttons
Tag Chips¶
Tags are rendered with styles defined in tag style templates: - Color, font-weight, font-size configurable - Border style (solid, dashed, dotted) - Padding around tag text