User Segments

Manage user segment assignments with permission-aware editing

Overview

The UserSegments component provides a comprehensive interface for managing user segment assignments. It supports both read-only display and interactive editing modes based on permissions.

Features

Permission-aware editing with read-only fallback
Multi-select segment assignment with taxonomy grouping
Visual indicators for segment sources (platform, program, project)
Real-time updates with optimistic UI
Empty states and loading skeletons

Examples

Editable Mode

When the user has edit permissions, they can add or remove segment assignments.

Has edit permission

Selected: seg-healthcare, seg-developer

Read-Only Mode

When the user lacks edit permissions, segments are displayed in read-only mode.

Edit permission required to modify segments

Empty State

When no segments are assigned.

Edit permission required to modify segments

Loading State

Skeleton loading state.

Props Reference

Prop	Type	Default	Description
`assignedSegmentIds`	`string[]`	`required`	Array of segment IDs currently assigned to the user
`userId`	`string`	`required`	The ID of the user whose segments are being managed
`membershipId`	`string`	`-`	The membership ID for scope-specific segment management
`availableSegments`	`TaxonomySelectorGroup[]`	`required`	Grouped segments available for assignment
`permissions`	`UserSegmentsPermissions`	`-`	Permission flags controlling edit capabilities
`onSegmentsChange`	`(userId: string, segmentIds: string[]) => void`	`-`	Callback fired when segment assignments change
`currentProjectId`	`string`	`-`	Current project ID for context-aware segment display
`isLoading`	`boolean`	`false`	Shows loading skeleton when true
`disabled`	`boolean`	`false`	Disables all interactions when true
`className`	`string`	`-`	Additional CSS classes for the root element

Usage

import { UserSegments } from '@/ui/components';
import type { TaxonomySelectorGroup } from '@/ui/blocks';

// Define available segments grouped by type
const segmentGroups: TaxonomySelectorGroup[] = [
  {
    id: 'industry',
    name: 'Industry',
    source: 'platform',
    items: [
      { id: 'healthcare', name: 'Healthcare' },
      { id: 'finance', name: 'Finance' },
    ],
  },
  {
    id: 'role',
    name: 'Role',
    source: 'program',
    items: [
      { id: 'developer', name: 'Developer' },
      { id: 'designer', name: 'Designer' },
    ],
  },
];

// Usage in UserSheet or user management context
<UserSegments
  assignedSegmentIds={user.segments.map(s => s.segmentId)}
  userId={user.id}
  membershipId={membership.id}
  availableSegments={segmentGroups}
  permissions={{ canEditSegments: canEdit }}
  onSegmentsChange={handleSegmentsChange}
  currentProjectId={projectId}
/>

Prop

Type

Default

Description

assignedSegmentIds

string[]

required

Array of segment IDs currently assigned to the user

userId

string

required

The ID of the user whose segments are being managed

membershipId

string

-

The membership ID for scope-specific segment management

availableSegments

TaxonomySelectorGroup[]

required

Grouped segments available for assignment

permissions

UserSegmentsPermissions

-

Permission flags controlling edit capabilities

onSegmentsChange

(userId: string, segmentIds: string[]) => void

-

Callback fired when segment assignments change

currentProjectId

string

-

Current project ID for context-aware segment display

isLoading

boolean

false

Shows loading skeleton when true

disabled

boolean

false

Disables all interactions when true

className

string

-

Additional CSS classes for the root element

import { UserSegments } from '@/ui/components'; import type { TaxonomySelectorGroup } from '@/ui/blocks'; // Define available segments grouped by type const segmentGroups: TaxonomySelectorGroup[] = [ { id: 'industry', name: 'Industry', source: 'platform', items: [ { id: 'healthcare', name: 'Healthcare' }, { id: 'finance', name: 'Finance' }, ], }, { id: 'role', name: 'Role', source: 'program', items: [ { id: 'developer', name: 'Developer' }, { id: 'designer', name: 'Designer' }, ], }, ]; // Usage in UserSheet or user management context <UserSegments assignedSegmentIds={user.segments.map(s => s.segmentId)} userId={user.id} membershipId={membership.id} availableSegments={segmentGroups} permissions={{ canEditSegments: canEdit }} onSegmentsChange={handleSegmentsChange} currentProjectId={projectId} />