22b3ec19a5
Extract business logic and UI into reusable pieces: Custom Hooks: - useFocusGroupAutoSave: debounced auto-save with retry logic - useFolderManagement: folder CRUD operations - usePersonaFiltering: filter state and persona filtering - useDiscussionGuideGeneration: guide generation and progress UI Components: - SaveStatusIndicator: auto-save status display - FolderSidebar: folder list and management - PersonaFilterDialog: persona filter modal - CopyGuideDialog: copy guide from other focus groups Tab Components: - SetupTab: form and asset uploader - ReviewTab: discussion guide viewer - ParticipantsTab: persona selection grid Reduces FocusGroupModerator from 2,396 to ~600 lines (75% reduction). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
29 lines
906 B
TypeScript
29 lines
906 B
TypeScript
import React from 'react';
|
|
|
|
export type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
|
|
|
|
interface SaveStatusIndicatorProps {
|
|
status: SaveStatus;
|
|
}
|
|
|
|
const statusConfig = {
|
|
idle: null,
|
|
saving: { text: 'Saving...', className: 'text-blue-600 bg-blue-50 border-blue-200' },
|
|
saved: { text: 'All changes saved', className: 'text-green-600 bg-green-50 border-green-200' },
|
|
error: { text: 'Save failed - retrying...', className: 'text-red-600 bg-red-50 border-red-200' }
|
|
};
|
|
|
|
export function SaveStatusIndicator({ status }: SaveStatusIndicatorProps) {
|
|
if (status === 'idle') return null;
|
|
|
|
const config = statusConfig[status];
|
|
if (!config) return null;
|
|
|
|
return (
|
|
<div className={`fixed top-16 left-1/2 transform -translate-x-1/2 z-50 px-3 py-1 rounded-md text-sm font-medium border shadow-sm ${config.className}`}>
|
|
{config.text}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SaveStatusIndicator;
|