newOS for Developers
Back to Overview
FolderWidget
outputcompactA compact card widget for displaying folder/mood previews with subscription status and post counts.
Source Path
apps/web/Components/Model/folder/FolderWidget.tsxPackage
@newos/web
Props Interface
FolderWidget: IOView<{
id: string; // Folder ID
title?: string; // Display title (overrides folder.title)
coverUrl?: string; // Cover image URL
postCount?: number; // Number of posts
isSubscribed?: boolean; // Subscription status
showStats?: boolean; // Show post count
onClick?: () => void; // Click handler
style?: CSSProperties; // Custom styles
}>Data Flow & API Calls
Reads (Input)
readFolder({ id }) — Fetches folder data if not provided via propsUsed With
Typically used in folder grid layouts
Works with
ItemGrid for responsive displayKey Features
Cover Image
Displays aspect-ratio cover image with gradient fallback when no image provided.
Subscription Badge
Shows green checkmark badge when isSubscribed is true.
Hover Effects
Subtle shadow/scale animation on hover for better interactivity feedback.
Edge Cases & Gotchas
Image Loading — Cover images use lazy loading. Provide fallback gradient for smooth UX.
Title Truncation — Long titles are truncated with ellipsis to maintain card layout.
Fixed Width — Widget uses fixed width (256px) for consistent grid layouts.