Skip to content

Refactor: improve code quality, maintainability, and accessibility#54

Merged
mikenikles merged 1 commit intomainfrom
refactor/code-quality-improvements
Jan 9, 2026
Merged

Refactor: improve code quality, maintainability, and accessibility#54
mikenikles merged 1 commit intomainfrom
refactor/code-quality-improvements

Conversation

@mikenikles
Copy link
Contributor

Summary

This PR implements a comprehensive code quality improvement plan focusing on better maintainability, type safety, and accessibility.

Phase 1: Error Handling Framework

  • Created centralized error handling in src/lib/errors/
  • Added Result type for explicit error handling
  • Added AppError interface with error codes and severity levels
  • Added handleError function with toast/console routing based on severity

Phase 2: Accessibility Improvements

  • Added aria-labels to pagination buttons in query-editor
  • Added aria-labels and keyboard handlers (onkeydown for Enter key) to query-history items
  • Added aria-labels to sidebar-left star/delete buttons
  • Added translations for all accessibility labels in all 6 languages

Phase 3: Type Organization

  • Reorganized types from single types.ts into src/lib/types/ directory:
    • database.ts - DatabaseConnection, DatabaseType, SSHTunnelConfig
    • schema.ts - SchemaTable, SchemaColumn, SchemaIndex, SchemaTab
    • query.ts - QueryTab, QueryResult, StatementResult, QueryHistoryItem, SavedQuery
    • explain.ts - ExplainTab, ExplainPlanNode, ExplainResult
    • erd.ts - ErdTab
    • persisted.ts - All PersistedXxx types
  • Added JSDoc documentation to all exported interfaces
  • Created barrel export maintaining backward compatibility

Phase 4: State Management Migration (Map → Record)

  • Migrated all connection-keyed state from Map<string, T> to Record<string, T>
  • Updated all 11 manager files to use spread syntax instead of Map operations
  • Created record-utils.ts with helper functions
  • Deleted map-utils.ts

Benefits:

  • Simpler state updates using spread syntax: {...state, [key]: value}
  • Better Svelte 5 reactivity (no need for full Map replacement)
  • More idiomatic TypeScript/JavaScript patterns

Phase 5-6: Component Extraction

  • Split query-editor.svelte from 703 → 400 lines into subcomponents:
    • query-toolbar.svelte - Execute, format, save buttons
    • query-result-tabs.svelte - Multi-statement result tabs
    • query-export-menu.svelte - Export/copy dropdown
    • query-pagination.svelte - Page navigation controls
    • query-error-display.svelte - Error display for failed statements
  • Extracted ssh-tunnel-config.svelte from connection-dialog.svelte

Test plan

  • Run npm run check - TypeScript must pass ✅
  • Run npm run tauri dev - App must start
  • Test query execution with multiple statements
  • Test pagination controls
  • Test export/copy functionality
  • Test SSH tunnel connection
  • Verify accessibility with keyboard navigation
  • Test in all supported languages

🤖 Generated with Claude Code

## Phase 1: Error Handling Framework
- Create centralized error handling in src/lib/errors/
- Add Result type, AppError interface, and ErrorCode enum
- Add handleError function with severity-based routing

## Phase 2: Accessibility Improvements
- Add aria-labels to pagination buttons in query-editor
- Add aria-labels and keyboard handlers to query-history
- Add aria-labels to sidebar-left star/delete buttons
- Add translations for accessibility labels in all languages

## Phase 3: Type Organization
- Reorganize types into src/lib/types/ directory
- Split into database.ts, schema.ts, query.ts, explain.ts, erd.ts, persisted.ts
- Add JSDoc documentation to exported interfaces
- Create barrel export in index.ts

## Phase 4: State Management Migration (Map → Record)
- Migrate all connection-keyed state from Map<string, T> to Record<string, T>
- Update all 11 manager files to use spread syntax
- Create record-utils.ts with helper functions
- Delete map-utils.ts

## Phase 5-6: Component Extraction
- Split query-editor.svelte (703 → 400 lines) into subcomponents:
  - query-toolbar.svelte
  - query-result-tabs.svelte
  - query-export-menu.svelte
  - query-pagination.svelte
  - query-error-display.svelte
- Extract ssh-tunnel-config.svelte from connection-dialog.svelte

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@mikenikles mikenikles merged commit 19f5e24 into main Jan 9, 2026
1 check failed
@mikenikles mikenikles deleted the refactor/code-quality-improvements branch January 9, 2026 05:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant