IntentStylesSettings

Location: src/components/IntentStylesSettings.jsx

Overview

IntentStylesSettings is a full settings page where users customize how their posts look for each of the six intents. Users select an intent tab, then configure font, frame, surface, effects, emphasis, a custom avatar, and a background image. Changes are saved automatically and reflected in a live preview panel.

This enables the "Expressive Freedom" invariant by letting users personalize their visual identity per intent, without affecting the overall calm of the platform.

Relevant Invariants

• Invariant #4: "Intent Precedes Interpretation" -- Each intent has independently configurable styles.
• Invariant #10: "Expressive Freedom Is Spatially Contained" -- Customization applies only to the user's own posts.

Props

This component takes no props. It uses the useMyIntentStyles hook for data access and the Supabase session internally.

Style Options

Option	Values	Description
Font	20+ fonts across Sans-serif, Serif, Technical, Playful categories	Controls the post content font family
Frame	flat, soft-card, paper, outlined, floating	Post card border/shadow style
Surface	light, warm, cool, dark	Background tone of the post card
Effects	none, paper-texture, soft-vignette, subtle-noise	Visual texture overlays
Emphasis	subtle, normal, strong	Controls visual weight/presence of the post
Avatar	Upload, camera capture, or select from library	Per-intent avatar image
Background Image	Upload	Subtle background image shown at low opacity

Key Behaviors

• Intent Tabs: Six tabs across the top, one for each intent. Selecting a tab loads that intent's current style configuration.
• Live Preview: A PostPreview sub-component renders a sample post with the current style applied in real time.
• Auto-Save: Each style change is saved immediately to Supabase via updateStyle. A status indicator shows saving/saved/error states.
• Avatar Upload: Supports file upload, camera capture (native on mobile, webcam modal on desktop), and selection from a saved avatar library.
• Avatar Library: Users can save up to 24 avatars to a personal library for reuse across intents, managed via the AvatarLibraryModal component.
• Background Image: Upload a subtle background image for posts. Can be removed at any time.

Usage

import IntentStylesSettings from '@/components/IntentStylesSettings';

// Rendered via React Router
<Route path="/intent-styles" element={<IntentStylesSettings />} />

Related

• Post -- Applies the configured intent styles when rendering
• IntentBadge -- Displays the intent indicator on posts
• AdvancedComposer -- Style customization during post creation

---

Last updated: 2026-02-07