newOS for Developers

Back to Overview

FolderInfoWrapper

output801 lines

A wrapper component that displays folder metadata, contributor information, access controls, license options, and download functionality.

Source Path
apps/web/Components/Model/folder/Views/FolderInfoWrapper.tsx
Package

@newos/web

Props Interface

FolderInfoWrapper: IOView<{
  id: string;                        // Folder ID
  userId: string;                    // Owner user ID
  post: any;                         // Post data (for context)
  children: React.ReactNode;         // Main content to wrap
  disableBottomDrawer?: boolean;     // Hide mobile bottom drawer
  forceMobile?: boolean;             // Force mobile layout (default: false)
  noRouting?: boolean;               // Disable navigation links
  disableLogo?: boolean;             // Hide folder logo
}>

Data Flow & API Calls

Reads (Input)

readFolder({ id }) — Fetches folder metadata
readFolderGrantees({ id }) — Gets all contributors
current() — Current authenticated user

Writes (Output)

requestAccess() — Requests folder access
updateFolder() — Updates folder settings

Hooks Used

useProgressiveLiveQuery() — Reactive data fetching
useSubscriberInfo() — Subscription status
useFlowSettings() — AI flow configuration
useIsWideScreen() — Responsive layout

Context

FolderContext — Provides folder and grantee data

Key Features

Contributors Display

Shows folder contributors with UserChip components. Organizes by access level: owners, writers, readers.

Access Level Badges

Displays current user's access level with color-coded badges: owner (purple), write (blue), read (gray).

License Type Display

Shows license type: open, licensed, or private. Includes tooltip explaining each license type.

Download Folder

DownloadFolder component allows downloading folder contents as a ZIP file.

Clone/Remix URLs

Generates shareable URLs for cloning (same content, new folder) or remixing (new AI conversation) the folder.

Mobile Bottom Drawer

On mobile, displays folder info in a bottom drawer. Toggle with disableBottomDrawer prop.

Edge Cases & Gotchas

forceMobile Default — The forceMobile prop defaults to false. Setting to true forces mobile layout regardless of screen size.
AgentAvatars Extraction — For chat views, extracts agent avatars from grantees to display in the header section.
Contributor Actions — The component includes action buttons for each contributor type (powers, settings, messaging).
FolderContext Provider — Wraps children with FolderContext.Providerpassing folder, grantees, and isRefetching state.
noRouting Mode — When noRouting=true, disables all internal navigation links for embedded/iframe usage.

Related Components

FolderCoreFolderCreateuseFlowSettingsuseProgressiveLiveQueryfolder.tsContributorsDownloadFolderUserChip
View source on GitHub →