newOS for Developers

Back to Overview

FolderCore

output1104 lines

The central view component for displaying folder content with multiple view modes: chat, grid, snap, and analytics.

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

@newos/web

Props Interface

FolderCore: IOView<{
  id: string;                    // Folder ID to display
  mode: string | undefined;      // View mode: "chat" | "grid" | "snap" | "analytics"
  height?: string;               // Container height override
  noFlows?: boolean;             // Hide flow settings
  starter?: string;              // Conversation starter message
  manual?: boolean;              // Manual mode flag
  noUserCard?: boolean;          // Hide user card display
  agentAuthorMode?: boolean;     // Enable agent author features
}>

Data Flow & API Calls

Reads (Input)

readFolder({ id }) — Fetches folder metadata
readFolderGrantees({ id }) — Gets contributors with access
liveSubscribe(id) — Real-time updates subscription
readUserGrants() — Current user's folder permissions

Writes (Output)

massAttachToFolder() — Attaches posts to folder
requestAccess() — Requests folder access
updateFolder() — Updates folder settings

Hooks Used

useProgressiveLiveQuery() — Reactive folder data
useSubscriberInfo() — Subscription credits
useFlowSettings() — AI flow configuration
useCachedFolderAttachments() — Optimized attachment loading
useConnectDialog() — Connect wallet modal

Context

FolderContext — Provides folder data to children

Key Features

Multi-View Modes

Supports chat, grid, snap, and analytics views. Each mode has specific rendering logic and layout.

Real-Time Updates

Uses liveSubscribe(id) to receive real-time updates for new posts, reactions, and folder changes via WebSocket.

Chat Input Integration

Embeds ChatInput component with flow settings, file attachments, and agent mentions support.

System Apps Detection

Detects system app folders and renders appropriate content. Uses localViewers registry for system-specific views.

Access Control

Checks accessLevel (read/write) and shows appropriate UI. Protected folders show access request button.

Internal URL Parsing

Extracts internal links from post content using regex patterns for /space/, /user/, and /post/ URLs.

Mobile Optimization

Uses useIsWideScreen() for responsive layout. Different scroll behavior and chat input placement on mobile.

Edge Cases & Gotchas

instantAccessLevel — Casts _folder.accessLevel to determine immediate access level. Affects UI gating and contributor list.
Scroll Behavior — Chat mode uses flex-direction: column-reversefor natural chat scrolling. Grid/snap modes use standard top-to-bottom.
Post Enrichment — Posts are enriched with author data viaenrichPosts() before rendering.
Content Mode Thresholds — isMediaContentMode is determined by checking if 80% of attachments have media content type.
Height Calculation — Default height is calc(100vh - 60px). Overridable via height prop for embedded usage.
1:1 Agent Detection — Detects 1:1 agent chats by checking if exactly 2 contributors exist and one is an agent.

Related Components

ChatInputFolderInfoWrapperPostWidgetuseFlowSettingsuseProgressiveLiveQueryfolder.ts
View source on GitHub →