managarten/packages/shared-help-mobile/src/components/FAQItem.tsx
Till-JS ee42b6cc76 feat: major update with network graphs, themes, todo extensions, and more
## New Features

### Network Graph Visualization (Contacts, Calendar, Todo)
- D3.js force simulation for physics-based layout
- Zoom & pan with mouse/touchpad
- Keyboard shortcuts: +/- zoom, 0 reset, Esc deselect, / search, F focus
- Filtering by tags, company/location/project, connection strength
- Shared components in @manacore/shared-ui

### Central Tags API (mana-core-auth)
- CRUD endpoints for tags
- Schema: tags table with userId, name, color, app
- Shared tag components in @manacore/shared-ui

### Custom Themes System
- Theme editor with live preview and color picker
- Community theme gallery
- Theme sharing (public, unlisted, private)
- Backend API in mana-core-auth

### Todo App Extensions
- Glass-pill design for task input and items
- Settings page with 20+ preferences
- Task edit modal with inline editing
- Statistics page with visualizations
- PWA support with offline capabilities
- Multiple kanban boards

### Contacts App Features
- Duplicate detection
- Photo upload
- Batch operations
- Enhanced favorites page with multiple view modes
- Alphabet view improvements
- Search modal

### Help System
- @manacore/shared-help-content
- @manacore/shared-help-ui
- @manacore/shared-help-types

### Other Features
- Themes page for all apps
- Referral system frontend
- CommandBar (global search)
- Skeleton loaders
- Settings page improvements

## Bug Fixes
- Network graph simulation initialization
- Database schema TEXT for user_id columns (Better Auth compatibility)
- Various styling fixes

## Documentation
- Daily report for 2025-12-10
- CI/CD deployment guide

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-10 02:37:46 +01:00

57 lines
1.5 KiB
TypeScript

/**
* Expandable FAQ Item component for mobile
*/
import React from 'react';
import { View, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native';
import type { FAQItem as FAQItemType } from '@manacore/shared-help-types';
// Enable LayoutAnimation on Android
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
interface FAQItemProps {
item: FAQItemType;
expanded?: boolean;
onToggle?: () => void;
}
export function FAQItem({ item, expanded = false, onToggle }: FAQItemProps) {
function handlePress() {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
onToggle?.();
}
// Strip HTML tags for mobile display
const plainAnswer = item.answer.replace(/<[^>]*>/g, '').trim();
return (
<View className="border-b border-gray-200 dark:border-gray-700">
<TouchableOpacity
onPress={handlePress}
className="py-4 flex-row items-center justify-between"
accessibilityRole="button"
accessibilityState={{ expanded }}
>
<Text className="flex-1 pr-4 font-medium text-gray-900 dark:text-gray-100 text-base">
{item.question}
</Text>
<Text
className="text-gray-500 dark:text-gray-400"
style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}
>
</Text>
</TouchableOpacity>
{expanded && (
<View className="pb-4">
<Text className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{plainAnswer}
</Text>
</View>
)}
</View>
);
}