mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
Enhancements include: - Added data-testid attributes to all interactive components for improved e2e testing - Improved ARIA labels and semantic HTML attributes throughout - Added aria-label, aria-hidden, aria-describedby, and aria-current where appropriate - Enhanced form elements with proper aria-invalid and error associations - Added role attributes to semantic containers - Improved navigation accessibility with aria-expanded and aria-controls - Added proper aria-pressed to toggle buttons Modified components: - Dialog components (SnippetDialog, CreateNamespaceDialog, DeleteNamespaceDialog) - Navigation components (NavigationSidebar, Navigation toggle) - Snippet display components (SnippetCard, SnippetCardActions) - Snippet manager components (SnippetToolbar, SnippetGrid) - Snippet editor components (SnippetFormFields, InputParameterList, InputParameterItem) - Namespace management (NamespaceSelector) - Layout components (PageLayout) These changes improve both automated testing capabilities and accessibility for users with disabilities. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
140 lines
4.0 KiB
TypeScript
140 lines
4.0 KiB
TypeScript
import { SnippetDialog } from '@/components/features/snippet-editor/SnippetDialog'
|
|
import { SnippetViewer } from '@/components/features/snippet-viewer/SnippetViewer'
|
|
import { EmptyState } from '@/components/features/snippet-display/EmptyState'
|
|
import { NamespaceSelector } from '@/components/features/namespace-manager/NamespaceSelector'
|
|
import { SnippetTemplate } from '@/lib/types'
|
|
import templatesData from '@/data/templates.json'
|
|
import { useSnippetManager } from '@/hooks/useSnippetManager'
|
|
import { SnippetToolbar } from '@/components/snippet-manager/SnippetToolbar'
|
|
import { SelectionControls } from '@/components/snippet-manager/SelectionControls'
|
|
import { SnippetGrid } from '@/components/snippet-manager/SnippetGrid'
|
|
|
|
const templates = templatesData as SnippetTemplate[]
|
|
|
|
export function SnippetManagerRedux() {
|
|
const {
|
|
snippets,
|
|
filteredSnippets,
|
|
loading,
|
|
selectionMode,
|
|
selectedIds,
|
|
namespaces,
|
|
selectedNamespaceId,
|
|
dialogOpen,
|
|
viewerOpen,
|
|
editingSnippet,
|
|
viewingSnippet,
|
|
searchQuery,
|
|
handleSaveSnippet,
|
|
handleEditSnippet,
|
|
handleDeleteSnippet,
|
|
handleCopyCode,
|
|
handleViewSnippet,
|
|
handleMoveSnippet,
|
|
handleCreateNew,
|
|
handleCreateFromTemplate,
|
|
handleToggleSelectionMode,
|
|
handleToggleSnippetSelection,
|
|
handleSelectAll,
|
|
handleBulkMove,
|
|
handleNamespaceChange,
|
|
handleSearchChange,
|
|
handleDialogClose,
|
|
handleViewerClose,
|
|
} = useSnippetManager(templates)
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="text-center py-20" data-testid="snippet-manager-loading">
|
|
<p className="text-muted-foreground">Loading snippets...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (snippets.length === 0) {
|
|
return (
|
|
<>
|
|
<div className="mb-6">
|
|
<NamespaceSelector
|
|
selectedNamespaceId={selectedNamespaceId}
|
|
onNamespaceChange={handleNamespaceChange}
|
|
/>
|
|
</div>
|
|
<EmptyState
|
|
onCreateClick={handleCreateNew}
|
|
onCreateFromTemplate={handleCreateFromTemplate}
|
|
/>
|
|
<SnippetDialog
|
|
open={dialogOpen}
|
|
onOpenChange={handleDialogClose}
|
|
onSave={handleSaveSnippet}
|
|
editingSnippet={editingSnippet}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6" data-testid="snippet-manager">
|
|
<NamespaceSelector
|
|
selectedNamespaceId={selectedNamespaceId}
|
|
onNamespaceChange={handleNamespaceChange}
|
|
/>
|
|
|
|
<SnippetToolbar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={handleSearchChange}
|
|
selectionMode={selectionMode}
|
|
onToggleSelectionMode={handleToggleSelectionMode}
|
|
onCreateNew={handleCreateNew}
|
|
onCreateFromTemplate={handleCreateFromTemplate}
|
|
templates={templates}
|
|
/>
|
|
|
|
{selectionMode && (
|
|
<SelectionControls
|
|
selectedIds={selectedIds}
|
|
totalFilteredCount={filteredSnippets.length}
|
|
namespaces={namespaces}
|
|
currentNamespaceId={selectedNamespaceId}
|
|
onSelectAll={handleSelectAll}
|
|
onBulkMove={handleBulkMove}
|
|
/>
|
|
)}
|
|
|
|
{filteredSnippets.length === 0 && searchQuery && (
|
|
<div className="text-center py-20">
|
|
<p className="text-muted-foreground">No snippets found matching "{searchQuery}"</p>
|
|
</div>
|
|
)}
|
|
|
|
<SnippetGrid
|
|
snippets={filteredSnippets}
|
|
onView={handleViewSnippet}
|
|
onEdit={handleEditSnippet}
|
|
onDelete={handleDeleteSnippet}
|
|
onCopy={handleCopyCode}
|
|
onMove={handleMoveSnippet}
|
|
selectionMode={selectionMode}
|
|
selectedIds={selectedIds}
|
|
onToggleSelect={handleToggleSnippetSelection}
|
|
/>
|
|
|
|
<SnippetDialog
|
|
open={dialogOpen}
|
|
onOpenChange={handleDialogClose}
|
|
onSave={handleSaveSnippet}
|
|
editingSnippet={editingSnippet}
|
|
/>
|
|
|
|
<SnippetViewer
|
|
open={viewerOpen}
|
|
onOpenChange={handleViewerClose}
|
|
snippet={viewingSnippet}
|
|
onEdit={handleEditSnippet}
|
|
onCopy={handleCopyCode}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|